Подробности
В началото може да си помислите, че HTML5 представлява пета версия на HTML езика за писане на уеб страници. Но в действителност нещата не са толкова прости.
HTML5 е „бунтар". Той беше бленуван от група свободомислещи хора, които не се занимаваха с официалния HTML стандарт. HTML5 разрешава практики за писане на страници, които бяха отхвърлени преди едно десетилетие. Част от него е посветена на производителите на браузъри и в нея се показват начини за обработка на грешки в маркиращата конструкция вместо незабавното им отхвърляне. Стандартът прави възможно възпроизвеждането на видео без плъгин за браузър като Flash. Освен това той представя много елементи, управлявани с JavaScript, които придават на всяка уеб страница богатите, интерактивни възможности на един настолен софтуер.
Научаването на HTML5 е изключително постижение. Най-голямото предизвикателство е, че хората използват думата HTML5 като препратка към дузина или повече самостоятелни стандарта. (Ще разберете, че този проблем възниква в резултат на еволюцията на HTML5. Езикът започна съществуването си като отделен стандарт, който впоследствие беше разделен на по-съдържателни части.) Всъщност HTML5 вече се тълкува като „HTML5 и всички свързани с него стандарти" или по-популярното определение „технологии за писане на уеб страници от следващо поколение". В настоящата книга ще разгледате всичко от основния HTML5 език, както и няколко нови възможности, които никога не са били част от стандарта.
Всичко казано дотук води до второто предизвикателство в HTML5: поддръжката от браузърите. Различните браузъри поддържат различни части от HTML5, а някои съвсем нови възможности на езика все още не работят в нито един браузър.
Независимо от всички тези трудности съществува един факт, който никой не смее да оспори: HTML5 е бъдещето. Големите софтуерни компании като Apple и Google поддържат езика; W3C (World Wide Web Consortium) се отказа от работата си по XHTML, за да формализира и одобри HTML5; и сега всеки производител на браузъри поддържа значителна част от него. А ако прочетете настоящата книга, вие също ще се присъедините към феновете на HTML5 - ще ви бъде интересно и забавно и ще можете да създавате чудесни страници.
Въведение
Част първа: Въведение в новия език
Глава 1: Представяне на HTML5................................................. 13
История на HTML5
XHTML 1.0: строги правила
XHTML 2: неочакван провал
HTML5: завръщането
HTML: вечният език
Трите ключови принципи на HTML5
1. Да не се разваля световната мрежа
2. Утъпкване на „черния път“
3. Практичност
Първи поглед към маркиращия език HTML5
HTML5 doctype
Кодиране на символи
Езикът
Добавяне на стилове
Добавяне на JavaScript
Финалният продукт
Преглед на синтаксиса на HTML5
Правила, предоставящи по-голяма свобода
Валидиране на HTML5
Завръщането на XHTML
Семейството на HTML5 елементите
Добавени елементи
Премахнати елементи
Адаптирани елементи
Променени елементи
Стандартизирани елементи
Съвременна употреба на HTML5
Определяне на съвместимостта на браузърите
Статистики за усвояемостта на браузърите
Разпознаване на елементи с Modernizr
Елементи с „пълнежи“
Глава 2: Нов начин за структуриране на страници.............49
Представяне на семантичните елементи
Модернизиране на традиционна HTML страница
Старомодна структура на страницата
Структура на HTML5 страница
Подзаглавия с <hgroup>
Добавяне на фигура с елемент <figure>
Добавяне на страничен текст с елемента <aside>
Съвместимост на браузърите, свързана със семантичните елементи
Проектиране на сайт с помощта на семантични елементи
Подробно разглеждане на горните колонтитули
Линкове за навигация с <nav>
Подробно разглеждане на долните колонтитули
Подробно разглеждане на секциите
Система на HTML5 за структуриране на схема
Начини за разглеждане на една схема
Основни схеми
Секционни елементи
Отстраняване на проблем в схемата
Глава 3: Съдържателен маркиращ език.................................. 89
Повторен преглед на семантичните елементи
Дати и часове с <time>
JavaScript изчисления с <output>
Открояващ се текст с <mark>>
Други стандарти, които подпомагат семантичните елементи
ARIA (Accessible Rich Internet Applications)
RDFa (Resource Description Framework)
Микроформати
Микроданни
Разширени снипети на Google (Google Rich Snippets)
По-добри резултати при търсене
Търсачка за рецепти
Част Втора: Създаване на модерни уеб страници
Глава 4: Прецизни уеб формуляри......................................... 119
Разучаване на формулярите
Обновяване на традиционен HTML формуляр
Добавяне на подсказки с шаблонен текст
Фокус: стартиране от правилното място
Валидиране: предотвратяване на грешки
Как работи валидирането в HTML5
Изключване на валидирането
Средства за форматиране при валидиране
Валидиране с регулярни изрази
Потребителско валидиране
Поддръжка на валидирането в браузърите
Нови видове полета за въвеждане на данни
Електронни адреси
URL адреси
Кутии за търсене
Телефонни номера
Числа
Плъзгачи
Дати и часове
Цветове
Нови елементи
Предложения при въвеждане на данни с <datalist>
Ленти за следене на процеса и инструменти за измерване
Ленти с инструменти и менюта с <command> и <menu>
HTML редактор в уеб страница
Използване на contentEditable за редактиране на елемент
Използване на designMode за редактиране на страница
Глава 5: Аудио и видео................................................................ 161
Концепция на днешното видео
Представяне на видео и аудио в HTML5
Малко шум с <audio>
Представяне на елемента <video>
„Войната“ на форматите и алтернативни решения
Запознайте се с форматите
Поддръжка на медийни формати в браузърите
Елемент <source>
Резервен вариант с Flash
Управление на вашия плейър с JavaScript
Добавяне на звукови ефекти
Създаване на потребителски видеоплейър
JavaScript плейъри
Надписи и достъпност
Глава 6: Основи в рисуването с елемент canvas.............. 191
Първи стъпки в разучаването на елемент canvas
Прави линии
Пътеки и форми
Криви линии
Трансформации
Прозрачност
Създаване на основна програма за рисуване
Подготовка за рисуване
Рисуване в елемент canvas
Съхраняване на рисунка от елемент canvas
Съвместимост на браузърите с елемент canvas
Пълнеж за елемент canvas
Резервно решение за елемент canvas и откриване на елементи
Глава 7: Подробно разглеждане на елемент canvas........ 223
Какво друго можете да нарисувате в елемент canvas
Рисуване на изображения
Срязване, изрязване и преоразмеряване на изображение
Рисуване на текст
Сенки и декоративно запълване
Добавяне на сенки
Оцветяване на формите с шарки
Оцветяване на форми с градиенти
Сглобяване на всичко: създаване на диаграма
Интерактивни форми
Следене на нарисуваните обекти
Тестване за попадение чрез координати
Анимиране на елемент canvas
Основна анимация
Анимиране на множество обекти
Практически пример: игра с лабиринт
Настройки за лабиринта
Анимиране на усмихнатото човече
Тестване за попадение чрез цветове на пикселите
Глава 8: CSS3 в подкрепа на стиловете............................... 267
Съвременна употреба на CSS3
Стратегия 1: Използвайте това, което можете
Стратегия 2: Третирайте CSS3 елементите като подобрения
Стратегия 3: Добавяйте резервни решения с Modernizr
Стилове, специфични за браузърите
Уеб типография
Формати за уеб шрифтове
Използване на комплекти с шрифтове
Използване на Google Web Fonts
Използване на собствени шрифтове
Оформяне на текст в много колони
Адаптиране към различни устройства
Медийни заявки
По-сложни медийни заявки
Замяна на цял набор стилове
Разпознаване на мобилни устройства
Създаване на по-красиви кутии
Прозрачност
Заоблени ъгли
Фонове
Сенки
Градиенти
Създаване на ефекти с преходи
Основен цветови преход
Повече идеи за преходи
Трансформации
Част трета: Създаване на уеб приложения
със системни средства
Глава 9: Съхраняване на данни............................................... 317
Основни принципи в уеб съхранението
Съхраняване на данни
Практически пример: запазване на последната позиция в игра
Поддръжка на уеб съхранението в браузърите
Подробно разглеждане на уеб съхранението
Премахване на елементи
Откриване на всички съхранение елементи
Съхраняване на числа и дати
Съхраняване на обекти
Действия при промени, касаещи мястото за съхранение
Четене на файлове
Получаване на файл
Четене на текстов файл
Замяна на стандартната контрола за качване на файлове
Четене на файл с изображение
Глава 10: Офлайн приложения................................................. 341
Кеширане на файлове с manifest
Създаване на manifest файл
Употреба на manifest файла
Поставяне на manifest файла на уеб сървър
Актуализиране на manifest файла
Поддръжка на браузърите за офлайн приложения
Практически техники за кеширане
Достъп до файлове, които не са кеширани
Добавяне на резервни решения
Проверка на Интернет връзката
Посочване на актуализации с JavaScript
Глава 11: Комуникация с уеб сървър.................................... 363
Изпращане на съобщения до уеб сървър
Обект XMLHttpRequest
Заявка към уеб сървър
Вземане на ново съдържание
Събития, изпратени от сървъра
Формат на съобщението
Изпращане на съобщения със сървърен скрипт
Обработка на съобщения в уеб страница
Полинг чрез събития, изпратени от сървъра
Уеб сокети
Оценка на уеб сокети
Лесна клиентска програма за уеб сокет
Примери за уеб сокети в уеб пространството
Глава 12: Още хитри JavaScript трикове............................... 389
Геолокация
Как работи геолокацията
Откриване на координатите на посетител
Обработка на грешки
Настройки на геолокацията
Показване на карта
Проследяване движенията на посетителя
Уеб работници
Задача, изискваща продължително изпълнение
Работа на заден план
Обработка на грешки от работника
Прекъсване на задача, която се изпълнява на заден план
Предаване на по-сложни съобщения
Управление на историята
Проблемът с URL адреса
Традиционното решение: промяна на URL адреси с техниката hashbang
Решението на HTML5: история на сесиите
Част четвърта: Приложения
Приложение А: Кратко представяне на CSS....................... 427
Приложение Б: Кратко представяне на JavaScript........... 443
Индекс................................................................................................ 467
Част първа: Въведение в новия език
Глава 1: Представяне на HTML5................................................. 13
История на HTML5
XHTML 1.0: строги правила
XHTML 2: неочакван провал
HTML5: завръщането
HTML: вечният език
Трите ключови принципи на HTML5
1. Да не се разваля световната мрежа
2. Утъпкване на „черния път“
3. Практичност
Първи поглед към маркиращия език HTML5
HTML5 doctype
Кодиране на символи
Езикът
Добавяне на стилове
Добавяне на JavaScript
Финалният продукт
Преглед на синтаксиса на HTML5
Правила, предоставящи по-голяма свобода
Валидиране на HTML5
Завръщането на XHTML
Семейството на HTML5 елементите
Добавени елементи
Премахнати елементи
Адаптирани елементи
Променени елементи
Стандартизирани елементи
Съвременна употреба на HTML5
Определяне на съвместимостта на браузърите
Статистики за усвояемостта на браузърите
Разпознаване на елементи с Modernizr
Елементи с „пълнежи“
Глава 2: Нов начин за структуриране на страници.............49
Представяне на семантичните елементи
Модернизиране на традиционна HTML страница
Старомодна структура на страницата
Структура на HTML5 страница
Подзаглавия с <hgroup>
Добавяне на фигура с елемент <figure>
Добавяне на страничен текст с елемента <aside>
Съвместимост на браузърите, свързана със семантичните елементи
Проектиране на сайт с помощта на семантични елементи
Подробно разглеждане на горните колонтитули
Линкове за навигация с <nav>
Подробно разглеждане на долните колонтитули
Подробно разглеждане на секциите
Система на HTML5 за структуриране на схема
Начини за разглеждане на една схема
Основни схеми
Секционни елементи
Отстраняване на проблем в схемата
Глава 3: Съдържателен маркиращ език.................................. 89
Повторен преглед на семантичните елементи
Дати и часове с <time>
JavaScript изчисления с <output>
Открояващ се текст с <mark>>
Други стандарти, които подпомагат семантичните елементи
ARIA (Accessible Rich Internet Applications)
RDFa (Resource Description Framework)
Микроформати
Микроданни
Разширени снипети на Google (Google Rich Snippets)
По-добри резултати при търсене
Търсачка за рецепти
Част Втора: Създаване на модерни уеб страници
Глава 4: Прецизни уеб формуляри......................................... 119
Разучаване на формулярите
Обновяване на традиционен HTML формуляр
Добавяне на подсказки с шаблонен текст
Фокус: стартиране от правилното място
Валидиране: предотвратяване на грешки
Как работи валидирането в HTML5
Изключване на валидирането
Средства за форматиране при валидиране
Валидиране с регулярни изрази
Потребителско валидиране
Поддръжка на валидирането в браузърите
Нови видове полета за въвеждане на данни
Електронни адреси
URL адреси
Кутии за търсене
Телефонни номера
Числа
Плъзгачи
Дати и часове
Цветове
Нови елементи
Предложения при въвеждане на данни с <datalist>
Ленти за следене на процеса и инструменти за измерване
Ленти с инструменти и менюта с <command> и <menu>
HTML редактор в уеб страница
Използване на contentEditable за редактиране на елемент
Използване на designMode за редактиране на страница
Глава 5: Аудио и видео................................................................ 161
Концепция на днешното видео
Представяне на видео и аудио в HTML5
Малко шум с <audio>
Представяне на елемента <video>
„Войната“ на форматите и алтернативни решения
Запознайте се с форматите
Поддръжка на медийни формати в браузърите
Елемент <source>
Резервен вариант с Flash
Управление на вашия плейър с JavaScript
Добавяне на звукови ефекти
Създаване на потребителски видеоплейър
JavaScript плейъри
Надписи и достъпност
Глава 6: Основи в рисуването с елемент canvas.............. 191
Първи стъпки в разучаването на елемент canvas
Прави линии
Пътеки и форми
Криви линии
Трансформации
Прозрачност
Създаване на основна програма за рисуване
Подготовка за рисуване
Рисуване в елемент canvas
Съхраняване на рисунка от елемент canvas
Съвместимост на браузърите с елемент canvas
Пълнеж за елемент canvas
Резервно решение за елемент canvas и откриване на елементи
Глава 7: Подробно разглеждане на елемент canvas........ 223
Какво друго можете да нарисувате в елемент canvas
Рисуване на изображения
Срязване, изрязване и преоразмеряване на изображение
Рисуване на текст
Сенки и декоративно запълване
Добавяне на сенки
Оцветяване на формите с шарки
Оцветяване на форми с градиенти
Сглобяване на всичко: създаване на диаграма
Интерактивни форми
Следене на нарисуваните обекти
Тестване за попадение чрез координати
Анимиране на елемент canvas
Основна анимация
Анимиране на множество обекти
Практически пример: игра с лабиринт
Настройки за лабиринта
Анимиране на усмихнатото човече
Тестване за попадение чрез цветове на пикселите
Глава 8: CSS3 в подкрепа на стиловете............................... 267
Съвременна употреба на CSS3
Стратегия 1: Използвайте това, което можете
Стратегия 2: Третирайте CSS3 елементите като подобрения
Стратегия 3: Добавяйте резервни решения с Modernizr
Стилове, специфични за браузърите
Уеб типография
Формати за уеб шрифтове
Използване на комплекти с шрифтове
Използване на Google Web Fonts
Използване на собствени шрифтове
Оформяне на текст в много колони
Адаптиране към различни устройства
Медийни заявки
По-сложни медийни заявки
Замяна на цял набор стилове
Разпознаване на мобилни устройства
Създаване на по-красиви кутии
Прозрачност
Заоблени ъгли
Фонове
Сенки
Градиенти
Създаване на ефекти с преходи
Основен цветови преход
Повече идеи за преходи
Трансформации
Част трета: Създаване на уеб приложения
със системни средства
Глава 9: Съхраняване на данни............................................... 317
Основни принципи в уеб съхранението
Съхраняване на данни
Практически пример: запазване на последната позиция в игра
Поддръжка на уеб съхранението в браузърите
Подробно разглеждане на уеб съхранението
Премахване на елементи
Откриване на всички съхранение елементи
Съхраняване на числа и дати
Съхраняване на обекти
Действия при промени, касаещи мястото за съхранение
Четене на файлове
Получаване на файл
Четене на текстов файл
Замяна на стандартната контрола за качване на файлове
Четене на файл с изображение
Глава 10: Офлайн приложения................................................. 341
Кеширане на файлове с manifest
Създаване на manifest файл
Употреба на manifest файла
Поставяне на manifest файла на уеб сървър
Актуализиране на manifest файла
Поддръжка на браузърите за офлайн приложения
Практически техники за кеширане
Достъп до файлове, които не са кеширани
Добавяне на резервни решения
Проверка на Интернет връзката
Посочване на актуализации с JavaScript
Глава 11: Комуникация с уеб сървър.................................... 363
Изпращане на съобщения до уеб сървър
Обект XMLHttpRequest
Заявка към уеб сървър
Вземане на ново съдържание
Събития, изпратени от сървъра
Формат на съобщението
Изпращане на съобщения със сървърен скрипт
Обработка на съобщения в уеб страница
Полинг чрез събития, изпратени от сървъра
Уеб сокети
Оценка на уеб сокети
Лесна клиентска програма за уеб сокет
Примери за уеб сокети в уеб пространството
Глава 12: Още хитри JavaScript трикове............................... 389
Геолокация
Как работи геолокацията
Откриване на координатите на посетител
Обработка на грешки
Настройки на геолокацията
Показване на карта
Проследяване движенията на посетителя
Уеб работници
Задача, изискваща продължително изпълнение
Работа на заден план
Обработка на грешки от работника
Прекъсване на задача, която се изпълнява на заден план
Предаване на по-сложни съобщения
Управление на историята
Проблемът с URL адреса
Традиционното решение: промяна на URL адреси с техниката hashbang
Решението на HTML5: история на сесиите
Част четвърта: Приложения
Приложение А: Кратко представяне на CSS....................... 427
Приложение Б: Кратко представяне на JavaScript........... 443
Индекс................................................................................................ 467
Матю МакДоналд, автор и преподавател с интерес към новите технологии, публикува статии в списания като Inside Visual Basic и ASPToday. Той е написал няколко книги от серията „Липсващото ръководство", сред които Създаване на уеб сайт: Липсващото ръководство (издадена на български език от ИК „ЗеСТ Прес"), Your Brain: The Missing Manual и Excel 2010: The Missing Manual.