Будучи прекрасным образцом инноваций, HTML5 — это технология, которая действительно принесла новую кровь в жанр создания веб-сайтов. Хотите ли вы, чтобы ваш сайт похвастался необычной функциональностью или вы хотите, чтобы ваш сайт щеголял подавляющей красотой визуальной привлекательности, HTML5 сделает работу для вас самым продуктивным способом.
В то же самое время, эта платформа совершила свой набег в область веб-разработки достаточно давно и нет недостатка в веб-мастерах, кто не добавил бы HTML5 в их список «трёх самых предпочитаемых инструментах» для создания веб-сайтов. И большое число из этих веб-мастеров уже используют другие платформы для их веб-сайтов, идя таким образом на компромиссы по целому ряду ключевых особенностей HTML5, которые могли бы быть интегрированы в их веб-сайты.
1. HTML5 даёт бесплатные поводья для творческих душ
Инновации являются отличительной чертой величайших дизайнеров и разработчиков, и, когда инструмент приходит, он позволяет им реализовывать их творческие способности без границ, он получает одобрение. HTML5 отвечает этим требованиям идеально, он попал в тренд моды. В рамках веб-разработки, HTML5 супер является супернастраиваемым, позволяя профессионалам от дизайна выражать себя. Так, если действовать на повышение — это ваша тактика, то удачной идеей станет ухватиться за HTML5.
2. Значительно улучшенная поддержка видео
Поддержка видео была значительно улучшена в HTML5 для встраивания видео в браузеры. Т.к. браузеры поддерживают различные форматы (например, H.264), когда вы хотите отобразить видео средствами HTML5 вам нужно сделать следующее:
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p>Ваш браузер не поддерживает этот формат. <a href="cohagenPhoneCall.mp4">Загрузить этот файл.</a></p>
</video>
3. Позволяет сразу делать веб-сайты «для мобильных устройств», вместо создания нескольких версий
Зайдите в статистику вашего сайта и посмотрите операционные системы пользователей, которые заходят на ваш веб-сайт. Вас ждёт сюрприз, значительное число просматривают сайт с мобильных устройств, эта ситуация сильно отличается от той, которая была всего год назад, когда большинство заходило с настольных компьютеров. Т.е. создание сайта для мобильных устройств является более удачным решением, чем создание версии ориентированной на настольные компьютеры и дальнейшее создание мобильной версии того же самого сайта. И HTML5 очень хорошо себя здесь проявляет, когда делается как бы «сайт для мобильных устройств», но который прекрасно выглядит и на больших экранах без возни с совместимостью и каких-либо проблем.
4. Задание типа документа является более простым, менее громоздким чем для XHTML
Честно, без обиняков, задание типа документа XHTML не было принято «на ура» веб-разработчиками.
<!DOCTYPE html PUBLIC "-//KKK//DTD XHTML 1.0 Transitional//EN"
"http://www.xyz.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML5 сделало декларацию типа документов простой и понятной для разработчиков:
<!DOCTYPE html>
6. У него есть свой набор фиксов для IE
Ну что ж, Internet Explorer повсеместно воспринимается интернет-сообществом прохладно, и на этой есть свои причины. Как и ожидалось, IE имеет свои собственные проблемы при работе с новыми элементами HTML5 в процессе заполнения, следовательно в процессе создания более понятных для этого браузера стилей этих элементов важно понимать, что элементы HTML5 выравниваются как блочные элементы:
header, footer, article, section, nav, menu {
display: block;
} Сейчас есть все основания полагать, что Internet Explorer продолжит быть занозой в …, что он не сможет должным образом знакомиться с заголовочными элементами. Поэтому появляется риск того, что стили HTML5-элементов будут полностью проигнорированы. Тем не менее, для этого есть простое решение:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("menu");
8. Код без помех и более понятный
Всегда рекомендуется писать чистый, понятный код, много раз используемый код. HTML5 этому всячески способствует, синхронный, семантический, дающий вам свободу в разграничении стилей и контента для облегчения их понимания. Обычный код заголовка с навигацией выглядит примерно так:
<div id="header"> <h1>Header Text</h1> <div id="nav"> <ul> <li><a href="x">Link</a></li> <li><a href="x">Link</a></li> <li><a href="x">Link</a></li> </ul> </div> </div>
Вы можете возразить, что код довольно простой, но давайте посмотрим, что HTML5 может сделать:
<header> <h1>Header Text</h1> <nav> <ul> <li><a href="x">Link</a></li> <li><a href="x">Link</a></li> <li><a href="x">Link</a></li> </ul> </nav> </header>
Очевидно, HTML5 добавляет больше смысла в структуру всего кода, новые теги лучше отражают ваш контент.
9. Вам больше не нужно задавать тег ‘Type’ для скриптов и ссылок
Достаточно веб-разработчиков, которые не дружат с атрибутом Type, особенно в тегах скриптов. С HTML5 вы можете раз и навсегда решить проблему с вашими Type'ами, просто удаливих их всем скопом. Следующий код демонстрирует это:
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
С вышеизложенным набором особенностей, трудно не предположить, что HTML5 меняет сферу веб-технологий выходя на передовую и увеличивая своё влияние. Он уже сейчас служит основой некоторых наиболее восхитительных веб-сайтов и тем в Интернете.
Превосходные примеры веб-сайтов сделанных на HTML5
Следующие примеры ещё больше подтвердят факт, что HTML5 несёт волну изменений:
1. Ghost Writer Art Studio («Безымянный художник»)
Ghost Writer Art Studio может быть и не сразит вас наповал, но, я уверен, оставит у вас сильное впечатление, благодаря талантливому дизайнеру, он, мягко говоря, имеет притязательный дизайн. Ну и, конечно, свою не последнюю роль в этом сыграл HTML5.
2. Cantina Valpolicella Negrar
Поражает своей реалистичностью сайт Cantina Valpolicella, просто хочется ткнуть пальцем. Функции HTML5 использованы весьма разумно в этом минималистичном по дизайну веб-сайте, чем достигается максимальный эффект.
3. Waterloo : The Film
Этот веб-сайт переносит вас сразу в битву, и не надо никакой машины времени. Он делает свою работу, всё замечательно: кадры из фильма, отличное использование цветов, расположение, позиционирование элементов и многое другое.
4. Zizzi
Тот самый случай, когда лучше один раз увидеть, чес сто раз услышать. Основанный на HTML5, сайт Zizzi является примером креативности, вооружившись мощным инструментом, может творить магию. Также используются API геолокации HTML5.
5. Water Canvas
И вот оно! Water Canvas просто захватывающе красив. Обращает на себя внимание отзывчивость сайта. Текстуры и общая компоновка соединены достаточно хорошо, чтобы слиться в единое целое.
6. Lardini
Lardini — уже один бренд говорит сам за себя. HTML5 действительно дал дизайнерам и разработчиком целый ансамбль инструментов и возможностей для реализации своего творчества наиболее полно и модно.
Эти примеры должны заставить вас взять паузу и развить свои навыки в сторону HTML5, узнать то, что послужит вам добрую службу.