HTML5: Хакове

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

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

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

ЗеСТ Прес ЕООД
София, 1408
жк Иван Вазов, ул. Димитър Манов 75
info@zest-pres.com

Предговор
Запознаване със семантичния подход

• Хак 01. Употреба на подходящ елемент
• Хак 02. Използване на широко разпространени структури
• Хак 03. Коректно интерпретиране на нови HTML5 тагове в стари браузъри
• Хак 04. Използване на тага "input"
• Хак 05. Лесно валидиране на формуляри без използване на JavaScript
• Хак 06. Нови контроли за по-добра използваемост на формулярите
• Хак 07. Проследяване работата на приложения с помощта на новите DOM събития
• Хак 08. Добавяне на изчерпателен контекст към маркираща конструкция с помощта на потребителски данни
• Хак 09. Проследяване на потребителски събития с помощта на потребителски данни
• Хак 10. Уеднаквяване използваемостта на страници с помощта на микроданни

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

• Хак 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. Управление на мобилния изглед чрез таг

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

• Хак 28. Директно влагане на видео в приложение чрез HTML5 видео
• Хак 29. Избор на подходящ кодек за вашите видео файлове
• Хак 30. Създаване на потребителски видео контроли чрез приложно-програмни интерфейси за видео
• Хак 31. Промяна на фона на HTML5 видео чрез таг "canvas"
• Хак 32. Добавяне на субтитри към HTML5 елемент video
• Хак 33. Украсяване на репликите за HTML5 видео
• Хак 34. Пълнеж Cuepoint.js за субтитри
• Хак 35. Използване на Buzz, за създаване на приложения с аудио ефекти
• Хак 36. Пълнеж MediaElement.js за HTML5 медия

Създаване на графики чрез елемент 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 код

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

• Хак 46. Провлачване на произволно съдържание в рамките на приложението
• Хак 47. Обновяване на DOM модела с обект за трансфер на данни при "провлачване и пускане"
• Хак 48. Провлачване на файлове извън вашето уеб приложение и вътре в него
• Хак 49. Произволни елементи от страница, които могат да се персонализират и редактират от потребителя
• Хак 50. Превръщане на страницата в WYSIWYG редактор
• Хак 51. Управление на бутоните за преминаване през посетените страници в браузъра чрез история на сесиите в HTML5

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

• Хак 52. Влагане на двоични данни във вътрешен URL адрес
• Хак 53. Преобразуване на URI идентификатори в Blob обекти и добавянето им към данни от формуляр чрез XHR2
• Хак 54. Използване на приложно-програмен интерфейс WebStorage за съхранение на потребителски данни
• Хак 55. Пълнеж за LocalStorage с YepNope.js и Storage.js
• Хак 56. Локално кеширане на медийни ресурси чрез приложно-програмен интерфейс FileSystem
• Хак 57. Създаване на календар за отбелязване на важни събития чрез IndexedDB и FullCalendar.js

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

• Хак 58. Употреба на приложно-програмни интерфейси за геолокация за визуализиране на географска дължина и ширина в мобилно уеб приложение
• Хак 59. Употреба на приложно-програмен интерфейс за геокодиране на Google при обратно геокодиране на потребителско местоположение
• Хак 60. Обновяване на текущото местоположение на потребител в карта на Google
• Хак 61. Употреба на услугата Geoloqi за създаване на гео-ограда
• Хак 62. Употреба на услугата Geoloqi за стрийминг в реално време за предаване на движенията на отдалечен потребител
• Хак 63. Пълнеж за приложно-програмни интерфейси за геолокация чрез Webshims

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

• Хак 64. Употреба на интерфейс BlobBuilder за създаване на вътрешен работник
• Хак 65. Сложни изчисления с масиви в самостоятелен работник
• Хак 66. Таймер за изпращане на състоянието на приложение към работници
• Хак 67. Обработка на данни за изображение чрез манипулиране на пиксели в самостоятелен работник
• Хак 68. Импортиране на скриптове за създаване на Twitter JSONP заявки
• Хак 69. Едновременно свързване на много прозорци на браузър към споделени работници

Трикове при осъществяване на връзки чрез 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

Трикове за създаване на професионални 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 като шаблон по подразбиране