Пропуснете до основното съдържание »

Вашата кошница е празна

HTML5 хакове, Съвети и инструменти за създаване на интерактивни уеб приложения

Редовна цена: 40,00 лв.

Специална цена: 32,00 лв.

Наличност: На склад

html5-hacks

Кликнете два пъти върху изображението, за да го видите в по-голям размер

Намаляване
Увеличаване

Подробности

В 90 съдържателни хака експертите в областта на уеб разработката Джеси Крейвънс и Джеф Бъртофт демонстрират интригуващи приложения на технологиите, свързани с HTML5. Всеки хак съдържа детайлно описание, скрийншотове и примерна имплементация за спецификации като Canvas, SVG, CSS3, мултимедия, съхранение на данни, уеб работници, WebSocket и геолокация. В началото на книгата ще откриете хакове за маркиращи елементи и атрибути на HTML5, които ще ви предоставят солидна основа за по-лесно овладяване на останалия материал. Последната глава описва всичко, което трябва да знаете, за да усъвършенствате своето HTML5 приложение - от Node.js до използване на облачен сървър.

Ето няколко от хаковете, които ще откриете в тази книга:

  • Създаване на двустранни карти в стил iOS чрез CSS трансформации и преходи
  • Промяна на фона на видео чрез таг Canvas
  • Използване на Canvas за създаване на медия с висока разделителна способност, предназначена за Retina екрани
  • Създаване на елементи от страница, които могат да се персонализират от потребителите чрез редактируемо съдържание
  • Локално кеширане на медийни ресурси чрез приложно-програмен интерфейс за работа с файловата система
  • Обратно геокодиране на местоположението на потребителя на вашето уеб приложение
  • Обработка на данни за изображения чрез манипулация на пиксели в самостоятелен уеб работник
  • Push известия към браузъра чрез събития, изпратени от сървър

Предговор



1. Запознаване със семантичния подход


Хак 01. Употреба на подходящ елемент <doctype>


Хак 02. Използване на широко разпространени структури


Хак 03. Коректно интерпретиране на нови HTML5 тагове в стари браузъри


Хак 04. Използване на тага <input>


Хак 05. Лесно валидиране на формуляри без използване на JavaScript


Хак 06. Нови контроли за по-добра използваемост на формулярите


Хак 07. Проследяване работата на приложения с помощта на новите DOM събития


Хак 08. Добавяне на изчерпателен контекст към маркираща конструкция с помощта на потребителски данни


Хак 09. Проследяване на потребителски събития с помощта на потребителски данни


Хак 10. Уеднаквяване използваемостта на страници с помощта на микроданни


2. Работа със стилове


Хак 11. Използване на експериментални CSS елементи заедно с префикси за браузъри


Хак 12. Използване на уеб шрифтове


Хак 13. Използване на Google Web Fonts за обикновена @font-face имплементация


Хак 14. Използване на текстови ефекти на CSS3 за подобряване външния вид на текста


Хак 15. Прозрачни елементи без използване на свойството opacity


Хак 16. Използване на медийни заявки за създаване на адаптивен дизайн


Хак 17. Адаптиране на уеб приложение към ориентацията на устройството


Хак 18. Пълен контрол над DOM с помощта на псевдокласове


Хак 19. Поставяне на изображенията директно в кода чрез URI идентификатори на данни за изображения


Хак 20. Лесен начин за създаване на градиенти


Хак 21. Различни обработки за създаване на по-интересни рамки


Хак 22. Използване на множество фонови изображения за един и същ елемент


Хак 23. Промяна на изгледа на елементите с помощта на CSS3 трансформации


Хак 24. Анимиране на трансформации с помощта на CSS3 преходи


Хак 25. Двустранни карти в стил iOS чрез трансформации и преходи


Хак 26. Употреба на Respond.js като пълнеж на CSS3 медийни заявки в IE


Хак 27. Управление на мобилния изглед чрез таг <meta>


3. Работа с мултимедия

Хак 28. Директно влагане на видео в приложение чрез HTML5 видео


Хак 29. Избор на подходящ кодек за вашите видео файлове


Хак 30. Създаване на потребителски видео контроли чрез приложно-програмни интерфейси за видео


Хак 31. Промяна на фона на HTML5 видео чрез таг <canvas>


Хак 32. Добавяне на субтитри към HTML5 елемент video


Хак 33. Украсяване на репликите за HTML5 видео


Хак 34. Пълнеж Cuepoint.js за субтитри


Хак 35. Използване на Buzz, за създаване на приложения с аудио ефекти


Хак 36. Пълнеж MediaElement.js за HTML5 медия



4. Създаване на графики чрез елемент canvas и SVG


Хак 37. Рисуване на форми в HTML5 таг <canvas>


Хак 38. Прилагане на стилове към canvas елементи


Хак 39. Стилизиране на canvas елементи с изображения от файл


Хак 40. Създаване на медия с висока разделителна способност, предназначена за Retina екран, чрез HTML5 таг <canvas>


Хак 41. Анимации с висока скорост чрез canvas рисунки


Хак 42. Създаване на native илюстрации чрез SVG


Хак 43. Стилизиране на SVG елементи с CSS


Хак 44. Анимиране на илюстрации с SVG


Хак 45. Влагане на SVG директно в HTML код


5. Взаимодействие с потребителя


Хак 46. Провлачване на произволно съдържание в рамките на приложението


Хак 47. Обновяване на DOM модела с обект за трансфер на данни при „провлачване и пускане“


Хак 48. Провлачване на файлове извън вашето уеб приложение и вътре в него


Хак 49. Произволни елементи от страница, които могат да се персонализират и редактират от потребителя


Хак 50. Превръщане на страницата в WYSIWYG редактор


Хак 51. Управление на бутоните за преминаване през посетените страници в браузъра чрез история на сесиите в HTML5


6. Трикове за съхранение на данни от страна на клиента


Хак 52. Влагане на двоични данни във вътрешен URL адрес


Хак 53. Преобразуване на URI идентификатори в Blob обекти и добавянето им към данни от формуляр чрез XHR2


Хак 54. Използване на приложно-програмен интерфейс WebStorage за съхранение на потребителски данни


Хак 55. Пълнеж за LocalStorage с YepNope.js и Storage.js


Хак 56. Локално кеширане на медийни ресурси чрез приложно-програмен интерфейс FileSystem


Хак 57. Създаване на календар за отбелязване на важни събития чрез IndexedDB и FullCalendar.js


7. Трикове при геолокация


Хак 58. Употреба на приложно-програмни интерфейси за геолокация за визуализиране на географска дължина и ширина в мобилно уеб приложение


Хак 59. Употреба на приложно-програмен интерфейс за геокодиране на Google при обратно геокодиране на потребителско местоположение


Хак 60. Обновяване на текущото местоположение на потребител в карта на Google


Хак 61. Употреба на услугата Geoloqi за създаване на гео-ограда


Хак 62. Употреба на услугата Geoloqi за стрийминг в реално време за предаване на движенията на отдалечен потребител


Хак 63. Пълнеж за приложно-програмни интерфейси за геолокация чрез Webshims


8. Приложно-програмен интерфейс WebWorker


Хак 64. Употреба на интерфейс BlobBuilder за създаване на вътрешен работник


Хак 65. Сложни изчисления с масиви в самостоятелен работник


Хак 66. Таймер за изпращане на състоянието на приложение към работници


Хак 67. Обработка на данни за изображение чрез манипулиране на пиксели в самостоятелен работник


Хак 68. Импортиране на скриптове за създаване на Twitter JSONP заявки


Хак 69. Едновременно свързване на много прозорци на браузър към споделени работници



9. Трикове при осъществяване на връзки чрез HTML5


Хак 70. Използване на отдалечен WebSocket сървър на Kaazing за повтаряне на обикновени съобщения от браузър


Хак 71. Създаване на изключително бърз WebSocket сървър чрез Node.js и модул ws


Хак 72. Създаване на инструмент за измерване на дарения с помощта на уеб сокети, приложно-програмен интерфейс Pusher и PHP


Хак 73. Създаване на плъгини за jWebSocket


Хак 74. Push известия към браузъра чрез събития от сървър


Хак 75. Конфигуриране на Amazon S3 за споделяне на ресурси от различни домейни с цел поддържане на уеб шрифт


Хак 76. Управление на HTML5 поредица от слайдове чрез Robodeck


Хак 77. Проверка дали една Socket.IO връзка е native или емулирана


Хак 78. Създаване на обикновен SPDY сървър с node-spdy


10. Трикове за създаване на професионални HTML5 приложения с Node.js


Хак 79. Визуализиране на „Здравей, Html5“ в браузъра


Хак 80. Откриване на низа на потребителския агент в обекта request


Хак 81. Употреба на обект Response на Node.js за предоставяне на данни, подходящи за клиентското устройство


Хак 82. Употреба на Node Package Manager за добавяне на платформа за уеб приложения като модул от трета страна


Хак 83. Употреба на Express генератор на приложения за зареждане на базов код за вашето приложение


Хак 84. Създаване на потребителски модул за обработка на маршрути


Хак 85. Конфигуриране на Express за работа с генератор за изгледи


Хак 86. Употреба на Jade оформления за прилагане на подхода DRY към изгледите на вашето приложение

Хак 87. Употреба на мини-изгледи на Jade за създаване на обикновена лента за навигация във вашите изгледи


Хак 88. Употреба на Jade Mixin класове за попълване на изгледи с данни


Хак 89. Създаване на експресивен, динамичен и мощен CSS стил чрез Stylus


Хак 90. Добавяне на HTML5 Boilerplate като шаблон по подразбиране

Джеси Крейвънс е старши инженер във frog, където работи с водещи световни компании и им помага да проектират, създават и предлагат на пазара полезни продукти и услуги. Той има 12 годишен опит в разработването на уеб приложения, а понастоящем работи в областта на уеб приложенията с единствена страница, мобилните приложения и HTML5.


Джеф Бъртофт, HTML5 евангелист в компанията Microsoft, си е изградил репутация на човек, който използва до краен предел възможностите на HTML5 и JavaScript. Той има над 10 годишен опит в уеб разработването, преминал е през много работни позиции - от уеб дизайнер в стартираща фирма до главен разработчик на интерфейса за една от най-големите компании в САЩ.