IT-стандарты *

HTML5 для веб-дизайнеров

1. Краткая история языка разметки
2. Модель HTML5
3. Мультимедиа
4. Формы 2.0
5. Семантика
6. HTML5 и современные условия

Когда браузеры стали поддерживать JavaScript, за ним быстро закрепились две основные задачи: эффекты при наведении мышью и улучшения для веб-форм. Потом в CSS появился псевдо-класс :hover и необходимость в скриптах для многих ситуаций первого плана отпала.

Эта история постоянно повторяется. Как только определенный шаблон или задача становятся достаточно популярными, они почти непременно в конце концов упрощаются в техническом плане и делаются более доступными. Именно так в CSS3 появилось много функций для создания простых анимаций, для которых прежде требовался JavaScript.

Говоря о формах, тут возможности CSS довольно ограничены. И теперь на сцену снова выходит HTML5. Следуя тому же принципу, он вводит новые функции, которые на самом деле вовсе не новые, но сделаны проще и удобнее.

Нетрудно догадаться, что прежде они были частью отдельной спецификации WHATWG под названием Web Forms 2.0.

HTML5 для веб-дизайнеров

1. Краткая история языка разметки
2. Модель HTML5
3. Мультимедиа
4. Формы 2.0
5. Семантика
6. HTML5 и современные условия

В истории всемирной сети каждый очередной виток перехода на новый уровень развития начинался с какого-нибудь технологического нововведения. Когда в HTML добавился элемент img, это в корне изменило облик сети. Затем введение JavaScript сделало ее более динамичной и интерактивной. Чуть позже появился Ajax, что открыло возможности для создания в сети полноценных приложений.

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

В спецификациях этих стандартов все еще есть пробелы. Так, если вы хотите сваять страницу с текстом и картинками, вы вполне обойдетесь HTML и CSS. Но если вам нужно опубликовать аудио или видео, тут неизбежно придется обратиться к сторонним технологиям — Flash или Silverlight.

Эти технологии — «плагины», эдакие «затычки», заполняющие «дыры» в сети. Они делают относительно простой публикацию игр, фильмов и музыки онлайн, но они не открыты и принадлежат и контролируются частными компаниями. Да, тот же Flash — мощный инструмент, но его применения в какой-то мере схоже со сделкой со злыми силами: мы получаем новые, недоступные другим путем, возможности, но взамен теряем часть свой независимости.

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

Киевским веб-разработчикам этой осенью везёт: в выходные 18 и 19 сентября их ожидает сразу два события: встреча Web Stanadrds Days и мастер-класс «Современная вёрстка».

HTML5 для веб-дизайнеров

1. Краткая история языка разметки
2. Модель HTML5
3. Мультимедиа
4. Формы 2.0
5. Семантика
6. HTML5 и современные условия

Великая Французская революция была временем радикальных политических и социальных преобразований. Времени как такового они тоже коснулись: в определенный период своего существования Французская Республика жила по новой системе — в сутках было 10 часов по сто минут каждый. Очевидно, что она была была куда логичнее и «правильнее» привычной шестидесятеричной.

Вместе с тем, она была полным провалом. Никто ей не пользовался.

То же самое можно сказать и про XHTML 2. W3C только лишний раз доказал то, чему нас научил урок послереволюционной Франции: изменить привычки людей по приказу очень-очень трудно.

HTML5 для веб-дизайнеров

1. Краткая история языка разметки
2. Модель HTML5
3. Мультимедиа
4. Формы 2.0
5. Семантика
6. HTML5 и современные условия

HTML — язык, объединяющий всемирную сеть. Всего лишь посредством набора простых тегов, человечеству удалось создать несравнимую ни с чем по своим масштабам систему связанных между собой страниц и веб-узлов: от Amazon, eBay и Википедии, до личных блогов и сайтов, посвященных котам, похожим на Гитлера.

HTML5 — свежайшая версия этого языка. Но несмотря на то, что она собирается принести с собой значительные изменения и новые возможности, нельзя сказать, что подобное происходит впервые и до этого язык никак не развивался. Развивался и постоянно улучшался, причем с самого своего появления.

Как и всемирная сеть вообще, HTML — язык разметки гипертекста (HyperText Mark-up Language) — является детищем сэра Тима Берненс-Ли (Sir Tim Berners-Lee). В 1991 году он написал работу, озаглавленную «HTML Tags», в которой описал чуть меньше двух дюжин тегов, предложенных им для разметки веб-страниц.

Идея использовать для этого кодовые слова внутри треугольных скобок, впрочем, не принадлежит сэру Тиму. Такая система на тот момент уже существовала и использовалась в SGML (Standard Generalised Markup Language, стандартный обобщённый язык разметки), и вместо того, чтобы изобретать что-то с нуля, сэр Тим посчитал более рациональным взять за основу уже существующие решения. Аналогичный подход применялся и вообще на всем пути к HTML5 в процессах разработки.

Моя предыдущая статья «Чего я ждал от HTML5 и CSS3» затронула достаточно щекотливую тему, но не ответила на вполне резонный вопрос, а что я предлагаю взамен. Поэтому мне в голову пришла идея сделать общественную спецификацию CSS, которая будет отражать современные тенденции развития web-технологий и требования к будущему функционалу. Я приглашаю всех поучаствовать в разработке нашей собственной версии спецификации. Если популярность ее будет достаточно высокой, ее могут принять все разработчики браузеров, а от этого выиграют и web-разработчики, и пользователи.

Первый механизм, который я представляю вашему вниманию называется «направляющие»

18 августа Тэд Джонсон (майкрософтовский Program Manager Lead for Web Graphics) объявил во блоге IE, что браузер IE9 станет поддерживать модуль CSS3 Color, и, в частности, поддерживать свойство opacity вместо собственного майкрософтовского фильтра alpha. Однако поддержка фильтра alpha сохранится в режимах совместимости (Quirks, IE7 и IE8), для которых, наоборот, внедрение opacity не планируется.

Таким образом, чтобы CSS работал во всех версиях майкрософтовского Эксплорера, достаточно описать прозрачность двумя свойствами кряду:

.некоторыйКласс {
    opacity: 0.3;
    filter: alpha(opacity=30);
}

Если же вы задаёте прозрачность не при помощи CSS, а джаваскриптом, то побеспокойтесь о том, чтобы скрипт не исходил из того, что все версии IE понимают filter и не понимают opacity: такое предположение окажется неверным по отношению к IE9. Вместо этого Тэд Джонсон рекомендовал использовать в скриптах свойство opacity в зависимости от значения некоторой (заранее вычисленной) переменной, определяющей поддержку этого свойства браузером:

var useOpacity = (typeof document.createElement("div").style.opacity != 'undefined');

За более подробными примерами можете обратиться к его блогозаписи.

Наверняка Вы задумывались над тем, каким образом «поставляют» Интернет в Австралию или, например, в Новую Зеландию. Проект cablemap.info на основе карт Bing создал мировую карту подводных кабелей. На сайте также можно посмотреть пропускную способность кабелей и их протяженность. Изучайте!

Веб разработкой я занимаюсь давно, и помню еще IE3 и NN4.xx. Многое изменилось с тех пор, много воды утекло. Пришло понимание всех технологий не на уровне «HTML — это текстовый файлик, в котором попадаются какие-то слова в скобочках», а понимание логики построения самого языка разметки, его абстракций.

Начало разработки спецификаций HTML5 и CSS3 уже не вызывала у меня щенячьего восторга и бурной радости, а воспринималась как вполне эволюционное событие. Заглядывал я в рабочие черновики изредка, отмечая для себя основные направления развития. Но чем больше спецификации приближаются к финалу, тем страшнее мне становится. Это не то направление развития, которое требует рынок!

Возникает резонный вопрос, куда делись все те люди, которые разрабатывали стандарты 10 лет назад? Куда делись инновации? Почему w3c создает стандарт, который, по некоторым меркам, уже устарел?

Давайте разберемся.

Когда мы впервые обнародовали наши планы по поводу предварительных версий IE9, мы сказали что «разработчики и люди, интересующиеся стандартами и веб-разработкой, смогут попробовать предварительную версию IE9 и высказать свои замечания и предложения относительно его работы». На данный момент мы ежедневно получаем отзывы и используем их для улучшения Internet Explorer 9. Однако обратная связь иногда касается не только IE9. Эта история о том, как недавний отзыв на Internet Explorer 9 Platform Preview вызвал изменение нового стандарта JavaScript – 5-ую редакцию EcmaScript.

Сегодня у нас хорошие новости: как и обещали, мы открываем наш флагманский сайт Веб-стандарты. Это ресурс со статьями, новостями и анонсами событий Web Standards Days, созданный разработчиками для разработчиков.

Объединение разработчиков «Веб-стандарты» представляет новый формат мероприятий под названием «Web Standards Days». Очередная встреча состоится 26 июня 2010 года в Санкт-Петербурге на Факультете переподготовки специалистов СПбГПУ по адресу ул. Обручевых, 1.

Уже готова предварительная программа встречи:

Это формат представления древовидных структур данных в виде одной строки в удобном для человека виде. Является обобщением формата «application/x-www-form-urlencoded» и как следствие — обратно совместим с ним. В основе Hiqus лежит всё тот же принцип представления данных в виде пар «ключ-значение» с той лишь разницей, что ключ может быть составным или пустым.

Данный формат уже используется такими монстрами как Яндекс (http://yandex.ru/yandsearch?date=within&text=hiqus&from_day=28&from_month=4&from_year=2009), Гугл (http://www.google.ru/search?as_q=hiqus&hl=ru&num=10&as_qdr=all) и многими другими, кому требуется передавать иерархические данные в строке запроса. Исключение составляют PHP-сайты, для которых традиционно используется свой, не слишком наглядный формат (пример, навскидку не нашёл, но выглядит он примерно так: ?user%5Bid%5D=123&user%5Bname%5D=Nick).

В процессе тестирования веб-преферанса неожиданно выяснилась одна странная деталь. Около 5% игроков стабильно жаловались на «нехватку» карт. При этом у тысяч других игроков (включая разработчиков) все работало идеально. В процессе разбора полетов стало понятно, что каждый раз не хватало одной и той же карты. А именно — бубнового туза.
Все тесты сервер проходил идеально. Код бубнового туза отдавался на клиент стабильно с остальными картами. Ларчик, как это обычно бывает, открывался очень просто. Картинка с бубновым тузом в ресурсах называлась ad.gif. И у этих 5% игроков на страже правопорядка стоял… Да-да, вы не ошиблись, Юрий Антонов Kaspersky Internet Security, которому не понравилось название файла картинки.
Мораль для веб-разработчиков проста. При именовании внешних ресурсов (картинок, css, js, swf) обратите внимание на отсутствие «подозрительных» слов и сокращений (advertise, banner, ...). Возможно это сэкономит вам, и вашим пользователям душевное здоровье.

Каждый веб-разработчик знает, что после POST сабмита формы желательно сделать редирект, чтобы предотвратить повторную отправку данных, когда пользователь захочет обновить страницу. В основном это критически необходимая операция, так как данные формы могут сохраняться в базе данных или участвовать в платёжной транзакции. И тогда данные не только продублируются, но и спишутся лишние деньги.

Но речь не о деньгах, а о правильном редиректе…

Думаю, никому не надо рассказывать, что такое ЧПУ. В интернетах хватает евангелистов-фетишистов, ратующих за человеко-понятность в урлах.

При желании, ознакомиться с основной идеей можно, например, в Википедии.

Я же попробую уточнить и несколько доосмыслить эту идею.

Умопотрясающий Джереми Орем (Jeremy Orem) написал расширение MediaWiki, дозволяющее прямое внедрение Открытого Видео (то есть <video> — прим. пер.), и задействовал эту возможность на wiki.mozilla.org. Гляньте мою демостраницу (вы просто вбиваете обычный HTML-синтаксис в вики-разметку), а затем невозбранно используйте вики для размещения видеозаписей про Мозиллу. (Примечание: на wiki.mozilla.org действует тридцатидвухмегабайтовый предел размера закачиваемого файла.)

Увидел здесь достаточно много статей на счёт HTML5, Theora и video тега но по большей части они крутятся вокруг теории. Недавно на моём сайте MJV-ART.ORG — Аниме Обои я открыл раздел JV-Video который является небольшим видео хостингом аля Youtube по анимешной тематике на базе HTML5/Theora. Собственно я сейчас и хочу рассказать о тех проблемах которые у меня возникли.

Свершилось то, чего многие ожидали — крупнейшие видеосервисы (YouTube, Vimeo) предоставили в режиме бета-тестирования возможность воспроизводить ролики средствами HTML5. Казалось бы, всё прекрасно, и Flash-у пора уйти на заслуженный покой. Ан нет — оказалось всё не так гладко.

Дэвид Дэвис из Ext не просто клёво зовётся, но и делает клёвые штуки :) Последняя его блогозапись демонстрирует и объясняет слияние HTML5-элемента <video> с поддержкою холста (<canvas>) по мере того, как он создаёт всплывающую подсказку с живым видео.

В этом примере используется рабочий web-стол Ext JS, и созданный код поставляет специальную панель, способную доставлять видео, а затем попросту захватывается видеокадр, и размер его уменьшается до размеров всплывающей подсказки:

win.ctx.drawImage(win.videoEl, 0, 0, win.tip.width, win.tip.height);

Весьма мило устроено.