HTML5: Все пользуются, но никто не знает, что это. Больше похоже на хедлайнер к какому-нибудь экзистенциальному фильму, как «В ожидании Годо» или экранизацию произведения Сартра, чем на утверждение относительно HTML5. Но это правда: большинство людей, используя HTML5, юзают его, как HTML4 , или даже HTML4 (а некоторые функции вообще не используют). Каков результат? Абсолютный провал, который может исправить HTML5. Не стоит отворачиваться, т.к. когда вы оглядываетесь назад, вы можете пропустить что-то очень важное: небольшой, но значительный переход, сфокусированный на HTML5.

В этой статье я хочу глубже рассмотреть HTML5. Есть простое предложение с большим количеством выводов: HTML5 одновременно что-то совершенно новое, но, тем не менее, не что иное как HTML; и как только вы поймете HTML5, изменится способ кодирования и даже восприятие web-пространства и приложений.

Возврат к первому правилу

HTML всегда был связан с перелинковкой. В стародавние времена, когда электроника была «крутой» и еще не называлась House music, еще до того как Rolling Stones занялись страхованием престарелых, все что связано с web, сопровождалось огромных количеством документации. Все было в точности до наоборот по сравнению с нынешними временами, когда большая часть людей воспринимают электронные книги всего лишь оберткой полноценной печатной версии.

В 90-х web был заполнен 15-страничными спецификациями, собранными в едином файле. Вам приходилось скролить по всему документу, как по энциклопедии. Более ранние версии HTML были связанны именно с этим, что наносило неоспоримый ущерб юзабилити web. Это связано с тем, что Тим Бернерс-Ли (Tim Berners-Lee), признанный отец HTML, был исследователем, дававшим возможность проводить исследования (в основном в CERN в то время). Если вы знакомы с исследователями, то знаете, что краткость – не их конек. Таким образом, чтение огромных кип документов онлайн было необходимостью, но скроллинг 15- (или 1500) страниц не являлось долгосрочной опцией.

Итак, ранее HTML не был связан с отображением многостраничных документов. Наиболее фундаментальной характеристикой HTML стал тег. Он давал возможность документу связаться с другим документом. Неожиданно 15-страничные документы превратились в 15 одностраничных, связанных между собой. Прощай скроллинг; здравствуй перелинковка. Все стандартно. И если вы узнали для себя что-то новое, то дальше можете просто «утонуть».

HTML5: Все еще соединяет

Вернемся к настоящему. В результате возможность соединять вещи в Интернете является основной характеристикой HTML5. Именно сейчас мы начинаем понимать оригинальную версию HTML, и перелинковываем гораздо больше, чем гипертекст со статическими изображениями. Так, представление аудио и видео элементов в HTML5 не более чем логическое расширение старых элементов.

(Примечание: правильнее сказать, аудио и видео заменяют объекты и внедренные в веб-страницы коды на многие годы, как, например, «подтягивание» файлов с YouTube или Vimeo. Такие элементы семантически функционируют больше как элементы, которые размещают ссылку на странице, чем те, которые переносят вас в другой пункт. В этом смысле даже элемент изображения является линейным: он берет контент из другого места и размещает его на странице. Все это обычная перелинковка, все это HTML: перелинковка и соединение.)

Сейчас вы можете «подтягивать» изображения, аудио и видео файлы прямо в документ. Что еще важнее, благодаря тому, что эти элементы являются элементами первого порядка, вы можете ими манипулировать через JavaScript. Это важно, я вернуть к этой теме позже. Если коротко, то элементы первого порядка призваны поддерживать прямой программный доступ.

Итак, если аудио и видео элементы сами по себе новы, то их значение – нет. HTML5 позволяет интегрировать больше свойств в документ, сохраняя целостность и раздельность данных свойств в одном месте. Это для того чтобы убедиться в том, что библиография документа физически не застопорилась в самом конце веб-страницы, а является отдельным элементом, который легко найти и интегрировать в страницу.

Прежде чем продолжать, вы должны понять, что возможность «подтягивать» аудио и видео не является (относительно) важной. Более важно то, что вы можете «подтянуть» остальные элементы. Таких может быть 20-25. Основное условие остается прежним: множество составляющих, которые разбросаны в разных местах, могут быть объединены семантическими элементами, легко доступными через JavaScript. В HTML5 эти «другие элементы», будучи аудио или видео, могут быть интересными, но, тем не менее, побочными.

Перелинковка HTML5 – новая мультимедийная реклама

И что теперь? Почему это так важно? На то есть 3 причины:

-Веб-страницы уже не должны выглядеть (и работать) как веб-страницы. Распространение Flash в последние годы попыталось преодолеть “ограничения” HTML. Flash изначально фокусировался на анимации и визуальных эффектах. Затем большая часть сайтов перешла на Flash, позволяя тем самым использовать различные виды навигации и организации страниц, предоставляя больше программных доступов к индивидуальным частям, и избегать недостатков JavaScript. (Здесь я пропущу обязательные комментарии относительно недостатков Flash.)

-Веб-страница больше не должна информировать об одном человеке/организации. Несмотря на то, что программисты и дизайнеры годами вытягивали изображения с других сайтов, веб-страницы до сих пор очень однородны в плане сроков правообладания ресурсом. Веб-страница сегодня содержит информацию, изображения, страницы, рекламу одного человека. Даже такие сайты как Vimeo и YouTube больше используются как частный файлообменник, чем свободное пространство для доступа.

-Веб-страницы хорошо отображаются на различных дисплеях. Не секрет, что мобильные телефоны (как недавно написал мне коллега) – это баннер, под которым парит HTML5. Но дело даже не в том, что у HTML5 прекрасная поддержка мобильного контента, а в том, что отображение на дисплее телефона больше не является проблемой. (Список вещей, не входящих в «большую часть», сокращается изо дня в день, так что я даже не буду их перечислять, чтобы они не устарели через пару недель) С другой стороны телефоны и планшеты – это первоклассные граждане, т.к. их задача – связывать все вышеперечисленное. Наверное, я выражусь не слишком метафизически, если заявлю, что в дополнение к соединяющему контенту HTML5 также соединяет все дивайсы, находящиеся поблизости… а это так же важно, как соединение контента и веб-приложений.

HTML5 представляет — хотя это и не единственное, что он поддерживает — парадигму, уходящую от этих ограничений. Во-первых, HTML5 и CSS3 предоставляют для JavaScript солидный набор инструментов, сравнимых с большинством Flash веб-сайтов. Я легко могу взять средний веб-сайт на Flash и воссоздать его на WordPress, HTML5, JavaScript (через jQuery), и CSS3 за неделю, если не быстрее. Преимущества велики: текст можно выбрать, закладки работают без каких-либо сложностей, и, конечно, владельцы веб-сайта могут апдейтить его, не обращаясь за помощью к вечно занятому Flash-программисту.

В результате HTML5 – наиболее пригодный и индексируемый инструмент, доступный для веб-контента, но этот контент больше, чем когда бы то ни было. Далее, этим контентом не нужно владеть, как было ранее. Эмоциональные и психологические характеристики аудио и видео элементов, подтягиваемых из других ресурсов. Когда вы видите видео, то внутренний голос как будто говорит: «Возьми это видео и размести его на своей странице!» Но если создателей веб-страниц будет больше, чем создателей видео, как можно заполучить это видео? Вы берете его у кого-то другого, кто, будем надеяться, использует Creative Commons лицензию. Такая же история с аудио: вы можете подключиться к чужому каталогу, и вы это с легкостью делаете. И как уже было сказано, аудио или видео файлы прекрасно проигрываются на телефоне или планшете, благодаря HTML5.

В этом обзоре ограничений есть более глубокий смысл: создатели контента переходят от создания уникального контента к созданию компиляции. Технически это совсем не ново, но внедряются такие вещи именно благодаря элементам HTML5: аудио и видео. И когда сеть разрастается, она гигантскими шагами приближается к «Лавине» Нила Стивенсона и «Нейромантику» Уильяма Гибсона. Человек создает видео, и ему уже не нужно размещать его или создавать веб-страницу. Он просто бросает его на файлообменные ресурсы, как YouTube или Vimeo. Другой человек просто переходит по внешней ссылке, но фактически интегрирует это видео (доступное и редактируемое через JavaScript, но гораздо проще) на веб-страницу. Человеку не нужно даже выходить из своего домена (видео и веб-страницы, соответственно), а в результате получает массу преимуществ.

А теперь умножим эти преимущества на 1,000. Или на 1,000,000. Добавляем данные и поиск, организуем и даже локализуем данные, как не делали ранее. Доступ к данным есть не через один браузер, а через большинство существующих, на всех возможных девайсах – ноутбуках, нетбуках, планшетах и телефонах. Добавляем очень дешевые файлохранилища и понимаем, что мы обязаны сказать об увеличении мощи JavaScript, свободном теге и его способности к манипулированию аудио и видео, о веб-мессенджерах, и вы очень быстро забудете, что мы разговариваем об HTML, а не о традиционных языках программирования Java или PHP!

JavaScript не есть объект внимания HTML5 … не так ли?

Большие возможности HTML5 концентрирует внимание на JavaScript. Если честно, то совсем не многое в HTML5 обращается к JavaScript. Да, проект HTML5, в соответствии с W3C, направлен на замену JavaScript API в более старых документах HTML4, XML1, и DOM Level 2. Нет, не ждите, что язык JavaScript будет радикально или сколько-нибудь заметно изменен в HTML5. Если вы решите поболтать о веб-программировании, то о JavaScript вы услышите больше, чем о любом другом языке.

Итак, во-первых, HTML5 добавил несколько важных и совершенно новых элементов первого порядка. Аудио и видео – ключевые, а вот следующий, который мы рассмотрим – это Канвас. Это означает, что больше не нужно тратить время на поиск элемента через тег (объект) или ИД-тег дополнительного элемента, чтобы работать с рекламой на веб-странице. Если подробнее, то эти элементы (в отличие от дополнительных элементов) обладают рекламно-ориентированными атрибутами: autoplay и предварительная загрузка. Это означает, что с помощью JavaScript, вы можете подтянуть видео, отобразить элементы управления, изменить URL и эффективно загрузить новое видео, а также контролировать загрузку (или предварительную загрузку), включать или выключать звук аудио.

Все это делается через JavaScript, но в самом JavaScript нет новшеств, которые предоставляли бы такой доступ. Все это – добавление семантически значимых элементов в HTML5, что и усиливает возможности JavaScript, или, по меньшей мере, упрощает данные задачи. Уверен, что грамотный JavaScript программист (который ставил метки и парсил) может получить желаемый результат, выгрузив необходимые атрибуты из дополнительных элементов, настроив их и т.д. Но это было бы слишком сложно и долго даже чтобы поставить точку с запятой в нужном месте.

Что хорошо в HTML5, хотя и может показаться скучным, так это перенос важных элементов и атрибутов из заказного или единичного пункта в семантически важные. Даже подтянутые атрибуты — позволяющие перетаскивать «родные» в HTML5 — лучше, т.к. теперь они более доступны и могут быть видоизменены через JavaScript. Страница требует меньше текстовых данных, а больше значений вкладывается в структуру самой страницы.

Думаю, очевидно: чем больше семантического значения в документе, и чем меньше атрибутов или даже элементов вложено в качестве простого текста в скрытые элементы или объекты, тем лучше сам документ. Доступ, модернизация и отзывы к странице становятся легче с точки зрения JavaScript; CSS (CSS2 или CSS3) может применяться напрямую без псевдо- и вложенного выбора, а документ описывает все сам. Когда же у вас документы семантического значения, вы увидите, что JavaScript стал гораздо четче. На самом деле, многие программисты среднего уровня поймут, что они способны делать вещи, «подвластные» только продвинутым программистам: выкладывать видео на стр выключать звук и загружать разные части аудиодорожки, проигрывать эти разные части аудио и видео и ба-бах: у вас есть полное описание HTML5 от Hitler о JJ Abrams и Star Trek … без необходимости модифицировать оригинальные аудио и видео.

С другой стороны, страница HTML становится больше похожей на контейнер (которая содержит другие контейнеры и т.д.), чем на страницу. JavaScript получает легкий доступ к этим вложенным контейнерам, модифицирует их, модернизирует, перемещает и делает, все, о чем вы могли мечтать или кодить. CSS может также визуально стилизовать и работать с этими контейнерами, превращая HTML в инструмент организации, но это уже неправильно. Порядок и позиционирование элементов в HTML становятся лучшим проводником, если они, конечно, релевантны.

(Стоит отметить, что дисплей-подход, игнорирующий организацию и подчинение элементов в документах HTML – это плохая идея. Семантически значимые элементы пропадают, как только вы нарушаете позиционирование и иерархию. Это верно и для HTML4, и XHTML1, и HTML5, поэтому не буду заострять внимание на этом пункте.)