Лишнее свидетельство того, что, нравится нам это или нет, но HTML5 обосновался здесь всерьёз и надолго, УЖЕ превратившись в стандарт. Мы делали интересные обзоры по данной теме в нашем журнале и прежде, приводя примеры роскошных новых сайтов, сконструированных средствами HTML5. Чтобы не повторяться, я решил предложить вам новую подборку образцов, не вошедших в предыдущие публикации, наглядно демонстрирующих передовые достижения, ставшие возможными, благодаря HTML5. Некоторые из них, правда, не такие уж новые, но есть и совсем свежие примеры. А также несколько сайтов, в оригинальном оформлении которых прослеживаются, пусть пока и не слишком явно, новые, но уже прижившиеся приёмы.

Надеюсь, подборка вдохновит и порадует вас. Всемирная паутина ждёт своих новаторов!

Хотелось вам когда-нибудь увидеть эпизоды из собственной жизни в качестве видео-ряда клипа на песню одной из ваших любимых групп? Благодаря HTML5, это стало не только возможным, но и легко осуществимым в вашем браузере. Заходите на страницу The Wilderness Downtown и указывайте там адрес дома, в котором прошло ваше детство. А дальше смотрите и наслаждайтесь удивительным путешествием в ваше прошлое, куда вас под музыку The Arcade Fire отправят Google Maps и Крис Милк (Chris Milk, режиссёр фильма).

Компактная и гибкая ОС на основе Linux, обеспечивающая вам беспрепятственный доступ к нужным приложениям – как сетевым, так и встроенным.

Хотите посмотреть на слово или фразу, набранные всеми шрифтами, заложенными в ваш компьютер, и представленные немного удобнее, чем в развёртывающемся меню? Что ж, пожалуйста. Попробуйте сами!

Почему эта игра не попалась мне в начальной школе, когда я учился печатать? Серьёзно, если сумеете оторваться от неё, не дойдя до "10 атаки", то вы - более волевой человек, чем я. Z-type стимулирует развитие навыков быстрого и грамотного набора текста, используя элемент HTML5 Canvas, звуковые эффекты и javascript в космическом антураже, где вам угрожают пришельцы и астероиды. Давайте, попробуйте!

Кто сказал, что прямолинейность и броскость (присущая, например, Flash-элементам) рррраздражают? Уж точно, не Nike, ведь сайт этой фирмы, прекрасно оформленный и отнюдь не режущий глаз, наглядно демонстрирует нам возможности HTML5 в плане отображения природной красоты совершенно по-новому. Зайдите и посмотрите.

Новейший и лучший (однако, это спорное утверждение) способ представить доказательства того, что увиденное вами в небе не было иллюзией, - запечатлеть его на этом HTML5-холсте, разработанном ребятами из команды Klowdz. Можно даже купить оттиски ваших художеств! А ещё они обещают в скором будущем открыть "состязательный" раздел, где вы сможете до бесконечности спорить с друзьями о том, правое полушарие чьего мозга развито лучше.

Ещё один из любопытных пробных проектов серии "Chrome Experiments", Canvas Cycle похож на окно редактирования, встроенное в вашу игровую приставку Super Nintendo. С его помощью можно выбирать 8-битные эпизоды из целого их ряда, настраивать параметры воспроизведения звука, масштабировать изображение, задавать скорость цикличного проигрывания (движения воды/звукового сопровождения), применять различные модификации циклов и, естественно, варьировать цвета.

Трёхмерный калькулятор, сконструированный средствами HTML5, и позволяющий вам рассматривать объёмные диаграммы путём их вращения с помощью кнопок мыши. Что тут можно добавить? Вращайте!

Эта гремучая смесь "зацепила" меня сильнее всех остальных примеров в нашей подборке. Почему? Да потому, что API-интерфейс от Google Maps позволяет вам снимать с изображения его модифицированные кальки, используя холст HTML5 Canvas. Замечательнее всего то, что возможности применения этой функции, очевидно, безграничны, при всей её практичности. В нашем конкретном случае мы видим, сколько велосипедов сейчас можно взять на прокат в пунктах вело-сети London Cycle, по данным, полученным через API-интерфейс Boris Bikes.

Веб-приложение, дающее вам возможность извлекать картинки с различных сетевых ресурсов, подобных Flickr, и редактировать/сохранять их, используя для обработки основной набор весьма действенных инструментов.

Если вы создаете шаблон с нуля, то надо от чего-то отталкиваться. Учитывая, что стандарт HTML5 «широко шагает по стране», я в этой статье приведу пример пустого шаблона HTML5.

В новом стандарте многое упростилось и теперь базовая часть выглядит так:

...

Новые теги HTML5

В HTML5 для структуры кода введено несколько новых тегов: