Интересные примеры экспериментов с HTML5


Технологии сегодня развиваются быстрыми темпами. Сеть растет, и сайты становятся все более интерактивными, используют последние наработки. Сам язык HTML тоже не стоит на места, а постоянно совершенствуется. Спецификация HTML 4, используемая в последние годы начинает уступать место более новой спецификации HTML 5. Последние версии браузеров поддерживают уже сегодня спецификацию HTML 5, а значит переход на неё это уже вопрос времени.

Спецификация HTML 5значительно расширяет диапазон возможностей для разработчиков сайтов. Она дает большую гибкостьи способность достичь максимальной интерактивности. Возможно, многие воспринимают HTML 5лишь как альтернативу или замену Flash. Но на самом деле Flash и HTML5 решают разные задачи.

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

Как я уже упоминал, HTML 5 несет новые улучшенные возможности как язык разметки документов. Сегодня я хотел бы обозначать некоторые преимущества, которые несёт HTML 5.

Интерактивность

Большим преимуществом HTML 5является функциональность, встроенная в браузер. Веб-разработчики все чаще пытаются создавать приложения, которые отображают анимацию, видео, музыку и интеграцию с социальными сетями, такими как Twitterи Facebook. В большинстве случаев для реализации такого функционала они могут изучить и применить дополнительные средства, например Flex, Flash, Silverlight, или JavaScript. Конечно это выход, но все это увеличивает сложность и время, затраченное на разработку веб-проекта.

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

Чистый код

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

Улучшенная согласованность

Поскольку HTML 5определяет новые элементы, то это несомненно позволит достичь большей согласованности веб-страниц. Структура документа HTML 5становиться теперь более логичнойи понятной. Благодаря основным блокам, которые теперь определяют документ, разработчикам будет более логично и проще формировать странички. Любой веб-разработчик сможет быстро понять как устроена HTML 5страница. Особенно это поможет новичкам, Теперь это станет намного понятнее.

Улучшенная семантика

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

Улучшенная доступность

Различные технологии теперь смогут проще использовать характеристики которые им предоставит HTML 5. Поскольку части страницы определены стандартными тегами, для сторонних технологий проще теперь будет понять структуру страницы, и использовать ту часть, которая им нужна. И это опять же благодаря новым элементам HTML 5.

Улучшенное хранение данных

Для отслеживания уникальных данных пользователя в течение многих лет использовались cookies. Но у них есть серьезные недостатки. Основной недостаток заключается в том, что все ваши данные cookies добавляется в каждом заголовке HTTP запроса. Это может закончиться тем, что вы получите ощутимое время отклика. Обычно cookies стараются максимально уменьшить, чтобы ославить влияние на загрузку.В HTML5 мы можем улучшить все это с помощью sessionStorageи localStorage(два разных хранилища в HTML5) вместо cookies. Конечно это не постоянные базы данных, но позволяет временно хранить структурированные данные.

Автономный кэш

Все браузеры используют кэширование. Кэширование это временное хранение информации на диске пользователя. Когда вы включаете свой компьютер и в браузере нажимаете на кнопку назад, то вы надеетесь увидеть страницу, которая была открыта ранее. Однако, если вы не подключены к сети Интернет и браузер не сделал кэш страницы должным образом, вы не сможете увидеть эту страницу. Страницы могут грузиться только при подключении к сети Интернет. HTML 5, к счастью, обеспечивает умнее решение. При создании сайта, разработчик может указать файлы, которые браузер должен кэшировать. Таким образом, даже если Вы обновите страницу в автономном режиме, то страница будет по-прежнему загружаются корректно. Такое кэширование имеет ряд преимуществ. Автономный просмотр позволяет загружать файлы намного быстрее и снижает нагрузку на сервер.

Улучшенные формы

HTML5 позволяет дизайнерам использовать на страницах более сложные и интересные формы. HTML 5 формыдают вам больше свободы в реализации более интересных идей. Но валидация их все равно останется такой же, как и для HTML форм. Пользовательский интерфейс HTML 5 формзначительно усовершенствован и уменьшено количество кода JavaScript(JavaScript нужен только в браузерах, которые не поддерживают такие HTML 5 формы). Вы можете использовать различные типы полей ввода, поиска и гибко настраивать поля для различных целей.

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

Спецификация HTML 5 включает много новых и полезных функций. Одной из интересных функций является тег canvas. HTML 5 Canvas(канва HTML 5) предоставляет простой и мощный способ вывода графики и рисования с использованием JavaScript. Рисование здесь происходит в растровой форме, то есть, нарисовав что-то на канве, это нельзя будет изменить или удалить отдельно, — можно только стереть целую область канвы.

Предлагаю вам посмотреть несколько примеров того, насколько мощным инструментом является тег canvas.

 

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Один отзыв

  1. IVAN26/06/2015

Добавить коментарий

шестнадцать + восемнадцать =