Блог
     AVATARAM.RU
        Записки Серфера

   HTML5 новости. То, что блог построен на html5, это не новость, вот как продвигаются дела в этом направлении, об этом хочу рассказать на основе личного опыта. По обыкновению, перелопатив кучу сайтов и блогов, включая саму спецификацию W3C, приходим к неутешительным, на текущий момент выводам, дело движется с огромным скрипом. Да, не буду спорить, что до официального принятия стандарта HTML5 еще пройдет не мало времени, но не это сподвигло на написание этой заметки. Основным толчком стала информация о поддержке нового стандарта современными браузерами. По множественным заявлениям, как на наших сайтах, так и на забугорных, идут дискуссии о поддержки многих новых тегов, вводимых в пятом HTML. В особом фаворе оказалось обсуждение тегов <video>...</video> и <audio>...</audio>. "Многие современные браузеры имеют поддержку этих тегов, бла бла бла...", на поверку же видео можно просматривать только в Firefox 3.2-3.6 версий, ну еще в Opera 10.5pre alfa (без звука). Вроде бы Opera уже ввела подержку в версии 9.6 но потом почему то эта поддержка исчезла? Новомодные Chrom, Chromium, Safari(win) не поддерживают видео.

   Во что же уперлись наши вилы? А уперлись они в форматы которые должны будут использовать видео и аудио. Часть форматов, из вроде бы "фришных", вдруг, оказывается под какой то лицензией. К слову, их, этих лицензий расплодилось на сегодняшний день не меряно!. Кто то предлагает кодек H264, кто то радеет за ogg vorbis + ogg theora. К общему соглашению пока не пришли. На многих ресурсах "радостно" собщается, что примеры видео в HTML5 формате мы можем посмотреть перейдя по ссылке. Переходим и видим, что видео действительно есть и действительно показывает. И, народ радуется! УРА! Вопрос? В код кто нибудь заглядывал? Какой там HTML5 на самом деле. Ах, да, забыл. Для этого нужно быть специалистом. Так вот, код то там с тегами <video>...</video> присутствует, но окружен таким JAVA наворотом, что страшно смотреть. Не предусматривает HTML5 дополнительных ява примочек для проигрывания видео, нету такого. С таким кодом не стоит вообще замарачивать на пятом хтмл-е. Поставь себе flash-плеер и живи спокойно.

   По уже укоренившейся традиции разработчики тянут "одеяло", каждый на себя. Им плевать глубоко на юзера и его амбиции, вместе взятые. По прежнему большую часть сегмента браузеров держит IE, с теми же криками о поддержке новых стандартов. Где?, Что где?. Где новые стандарты? Может достаточно лить в уши. Либо юзер окончательно отупел? Ну, да ладно. Вернемся к стандартам. Из новых возможностей можно отметить возможности:

1. скругления углов
2. отбрасывание блоками теней
3. линейный градиент заливки бекграунда
4. радиальный градиент заливки
5. многоколоночность (без использования div-ов и таблиц)
6. использование нескольких фоновых изображений (на мой взгляд, достаточно спорная возможность)
7. градиент текста и многое другое

   И все вышеперечисленное - пустые слова. Не, не, не! Не нужно утверждать, что все это прекрасно пашет, если добавить префикс. Для FF, скажем -moz-. Да. Сразу оживает фоновое изображение залитое градиентом, блоки приподнимаютя над основным фоном, за счет отбрасываемых теней, формы обнаруживают наличие новых возможностей. Красотища! Вот только Валидатор, такую щтуку не съест. Вернее съест, но только на половину. Он радостно сообщит об отсутствии ошибок в html-коде, и, выплюнет ваш CSS3 (а я уверен, что третий) с ошибками, в которых главным багом окажется тот самый префикс, делающий все так красиво. Так, что этот хак тут не прокатывает.

   Что же действительно проходит валидацию, а соответственно может быть использовано для перехода на HTML5? Могу только сказать, что использовал сам. Прежде всего - разметка. Верхняя часть (<header>...</header>), для основного меню используются теги - <nav>...</nav>, низ страницы, так называемый - "подвал", теперь обозначаются как <footer>...</footer>, а так же, зарезервировал одну колонку на случай размещения какой либо дополнительной информации - <aside>...</aside> (кстати, для этих целей тег и предназначен). Для разметки контента используются, так же, новые элементы: <article>...</article> и <section>...</section>. Первый, как видно из названия, отвечает за контент (статья, заметка, публикация, etc...), вторая, за какую либо часть этого контента. Что интересно?! Порядок вложенности этих тегов проходит валидацию, т.е:

в статье может быть несколько секций, и, в секции несколько, скажем однотипных или тематических публикаций. Еще одним из новых тегов можно считать дату: <time datatime="2010-02-02T22.56.40">02.02.2010</time>. К чему это нужно?, не знаю, думаю, все же разработчики стандарта не самые тупые, раз ввели дату отдельным тегом. Возможно так же использование тега <figure>, целесообразно использовать который к какому либо блоку, ну, как пример:

Код: <figure> <img src="" width="" height="" alt="" title="" > Текст и соответствующая тексту картинка </figure>

Сам пример: Текст и соответствующая тексту картинка, расцениваются не как разные элементы, а как общий блок, несущий определенную информацию. СЕО - дружно хлопаем! И идем регится на CNN.COM! (Шутка). При использовании вместе с DIV-ами и правильным позицированием, из таких небольших блочков, можно собрать, очень даже неплохую страницу. Предварительно, присвоив дивам нужные размеры, посредством потрошения CSS.

   Еще одним из нововведений можно считать тег - <dialog>, выглядит это так:

Код:

   Есть правда в этом не большой нюанс. Не стоит вкладывать тег <dialog> между тегами <p> и <section> - Не валидно выйдет. Почему так? Ну, не знаю. Вот те теги, которые прошли поверку валидацией, и на которых уже можно, что то строить. Вообще, суть новой спецификации HTML5 склоняется в сторону улучшения семантики кода. Прежде всего, для его лучшего распознования всевозможными роботами. Разметка отдельно, текста отдельно, картинки отдельно, ну и в таком ключе далее. Правда, как уже было где то упомянуто, СЕО-шникам дается флаг в руки, дабы появляются новые возможности, опирающиеся на эту самую семантику.

   Представленное видео имеет формат: ogg theora(видео) и ogg vorbis(аудио). На этом, конечно теги не заканчиваются,и полная информация по ним всегда доступна на W3C. Да и семантические "трюки" с появлением HTML5, так же не заканчиваются. А что еще то? А еще есть такое понятие как Микроформаты, о чем и будет поведано в следующей публикации.

02.02.2010

Автор: Avatara