HTML5. Возможности и примеры сайтов на HTML5

Здравствуйте, дорогие читатели! Каждому веб-мастеру и каждому блоггеру известно, что такое HTML. При этом мало кому известно, что HTML5 не просто обновленная версия web-языка, это без преувеличения новая эра в веб разработках.

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

Сайты на HTML5

Применение, достоинства и недостатки HTML5

Возможности HTML5 позволяют структуре веб-документа быть более простой, а коду – чище. Новые семантические элементы, такие как section, footer, header, nav, article, aside, могут быть использованы вместо контейнеров, применяющихся в HTML4, таких как div.

Возможности HTML5 также впечатляют. Мультимедиа делает лишним использование Adobe Flash и некоторых дополнительных программ. Сегодня все гораздо проще: видеофайлы и музыку можно воспроизводить сразу в браузере.

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

Обновился и ввод данных в  HTML5. Все стало еще проще и еще быстрее! Ошибки контролируются в режиме «онлайн» непосредственно во время ввода. Это очень удобно, по сравнению с HTML4, где проверка ошибок и оповещение о них происходит только после отправки документа, что создает неудобства пользователям.

Внешний вид текстов и изображений также изменился. Теперь они стали одним целым. Полностью изменились возможности отображения текста и изображений на интернет-сайтах. С новой версией – HTML5 разработчики море замечательных возможностей для оформления веб-сайтов, которые позволяют сделать их такими же красивыми, как глянцевые журналы.

Коснулись изменения также графики и анимации. Такая ценная функция, как Canvas позволяет размещать графику, анимации, с меняющимся контентом и небольшие игрушки непосредственно на сайтах.

В старой версии HTML4 для этого требуются некоторые дополнительные программы, например Adobe Flash. При помощи Canvas появляются дополнительные возможности создания пользовательских интерфейсов и инновационных игр нового уровня.

В этой ситуации не обошлось без некоторых «НО»: уязвимость HTML5 в области защиты данных. Такая уязвимость обусловлена большим объемом данных, которые хранятся долгое время на жестком диске пользователя. Такой факт позволяет незаметно собрать информацию о посетителе.

Многие разработчики недовольны низкой производительностью контента созданного с помощью  HTML5, ограниченностью платформ во время применения, увеличению затрат времени и ресурсов.

Еще совсем недавно не все браузеры поддерживали HTML5, а сегодня он подходит даже консервативному IE. Что касается остальных браузеров, они делают это давно.

Но одним из первых HTML5 начал воспринимать Google, а совсем недавно вышла в свет 18 версия браузера Chrom (Хром), в который добавлен новый модуль Canvas 2D. Используя наиболее яркую возможность HTML5 – тег canvas, позволяет заменить флеш-технологии в сети.

Не смотря на некоторые неточности и недостатки тестовой версии HTML5 «интернет монстры» активно ее используют, такие как Google, YouTube и другие.

Спецификации HTML5

Стандартизация проекта HTML5 началась в 2007 году, и продолжается до сих пор. Согласно W3C-расписанию, предполагалось, что HTML5 получит от W3C рекомендации еще в 2010 году, но это оказалось невозможным без одобрения Last Call и Candidate Recommendation.

От Last Call HTML5 получил поддержку в середине осени 2009 года. С Candidate Recommendation дело обстоит сложнее, но главный редактор спецификации Ян Хиксон всех заверил, что одобрение обязательно будет в конце 2012 году или вначале 2013 года.

Нам остается только ждать.

Примеры реализации HTML5

Корпорация Гугл сделала просто колоссальный вклад для того, чтобы новый стандарт интернет языка был жив, и ним пользовались основные массы пользователей. Много и сейчас делает корпорация, чтобы он стал общепринятым и как можно быстрее. Чтобы его разрекламировать, очень часто применяется стартовая страница Гугл.

Приведем пример того, как может выглядеть эта страница с использованием HTML5, предназначенная для того, чтобы поздравить с каким-то знаменательным событием жителей Гонконга. Заходите на сайт www.google.com.hk/intl/zh-CN/landing/shuixia и пощелкайте левой кнопкой мыши немного ниже уровня воды. Масса удовольствия гарантирована!

Что касается всего остального, это обычная стартовая страница Google.

Приведенный пример не единственный в своем роде, подобное можно увидеть на день рождения Станислава Лема, когда главная страница Гугл была привлекательной аркадной игрушкой по типу Кибериады.

Взгляните на сайт html5game.ru. Он очень забавный, особенно его шапка. При наведении курсора на нее, шапка разлетается на множество шариков, которые потом собираются назад.

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

Зайдите на www.picozu.com/editor. Здесь находится интерактивный графический редактор, который по возможностям заметно превышает Paint – здесь даже сама возможность рисовать.

Что можно сказать в заключение?

На первый взгляд можно подумать, что самой незаменимой и востребованной функцией HTML5 является canvas-тег. Это, конечно же, преувеличение, но без него и вправду тяжело добиться столь качественной графики.

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

К сожалению, все это великолепие находится на стадии некого эксперимента, что очень странно. Но будьте уверены, это ненадолго!