вход

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

Интересные примеры экспериментов с 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 стараются максимально уменьшить, чтобы ославить влияние на загрузку.В HTML 5 мы можем улучшить все это с помощью 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 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

Статья → Интересные примеры экспериментов с HTML5

  1. IVAN:

    А где можно скачать эти исходники?

Оставить комментарий

Статья → Интересные примеры экспериментов с HTML5

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.