Особенности стандарта HTML5

Автор работы: Пользователь скрыл имя, 13 Октября 2013 в 07:21, курсовая работа

Описание работы

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

Содержание работы

Введение 3
1. История появления HTML5 4
2. Особенности HTML5 6
3. Отличия HTML5 от предыдущих версий. Сравнительный анализ плюсов и минусов 10
3.1 Преимущества HTML5 10
3.2 Недостатки HTML5 14
4. Примеры реализации на HTML5 16
5. Примеры зарубежных и российских сайтов на HTML5 17
6. Сравнение браузеров (HTML5) 20
Заключение 23
Список литературы 24

Файлы: 1 файл

Особенности стандарта HTML5.docx

— 2.99 Мб (Скачать файл)

В HTML5, чтобы избежать подобной ситуации для тегов iframe была спроектирована технология Sandbox. Благодаря ей, все скрипты, запускающиеся через iframe будут работать в специально ограниченной виртуальной среде, которая не выпустит результаты их работы за пределы браузера, а значит и не сможет поразить пользовательскую операционную систему. Даже если предположить, что запуск вируса посредством этого тега все же произойдет, какие-либо серьезные последствия он понести уже не сможет.  [5]

  1. Ввод данных

В HTML5 становится проще и безопаснее. Правильность введения данных контролируется в режиме реального времени непосредственно во время ввода. В HTML4.0 проверка ошибок и сообщение о них происходит уже после отправки документа, что может создавать проблемы пользователям. [6]

  1. Поддержка полноценной графики

До  недавнего времени бесспорным лидером  анимированной графики для браузеров  была технология Flash. С появлением в новом HTML5 стандарте такого инструмента как canvas позиции Flash-графики будут, вероятно, сильно потеснены.

Суть  такого мощного нововведения как  canvas состоит в том, что для браузеров на экране выделяется специальное пространство, положение которого на веб-странице определяется разработчиком сайта. В этой области с помощью целого набора специальных графических HTML5 команд можно составлять графические изображения, в том числе и анимированные, практически любой сложности. Более того,  для 3-D графики разрабатывается специальный набор команд аналогичных всемирно известному стандарту трехмерной графики OpenGL6(Википедия, свободная энциклопедия: [сайт]. URL: http://ru.wikipedia.org/wiki/OpenGL). Теперь браузер будет способен воспроизводить не только красивые двухмерные интерактивные приложения, но и полноценные трехмерные игры.

Если  для HTML5 и дальше продолжат развивать направление трехмерных игр, в недалеком   будущем мы имеем   все  шансы   получить  игровые проекты с современной шейдерной графикой7 (Википедия, свободная энциклопедия: [сайт]. URL: http://ru.wikipedia.org/wiki/Шейдер) и соответствующими   спецэффектами для нее. Как только графику браузеров полностью переведут на вычислительную поддержку от видеокарт, в сети будут размещены ресурсы с он-лайн играми практически ничем не отличающимися от сегодняшних графически красивых, но отдельно устанавливаемых клиентов игровых приложений.[5]

  1. Видео и аудио

Для того чтобы воспроизвести видео  или аудио поток в браузере пользователю приходиться прибегать  к помощи все той же Flash технологии, требуемые в HTML4.0.

Браузерам для  этого приходиться постоянно пользоваться  Flash проигрывателями, а также скачивать постоянные обновления от Adobe для этой технологии, без которых пользователи сильно рискуют заразить свои компьютеры вирусами через бреши в старых версиях Flash.

HTML5 призван наконец избавить браузеры от этих дополнительных программ и дать им возможность полноценного воспроизведения аудио и видео контента своими силами. Для этого в HTML5 коде предусмотрены специальные теги, такие как <video> и <audio>. Впрочем, у этого нововведения имеются и свои недостатки, например отсутствие единого стандарта для видеокодеков8 (Википедия, свободная энциклопедия: [сайт]. URL: http://ru.wikipedia.org/wiki/Видеокодек), что не способствует пока широкому распространению этой удобной для пользователя и веб-разработчиков технологии. [5]

  1. Многократное увеличение скорости работы

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

Проектировщики HTML5 не могли обойти эту проблему стороной. Новый стандарт обеспечивает поддержку многопоточности, которую именовали как Web Works. Таким образом, современные многоядерные системы получают возможность параллельно выполнять обработку скриптов и тем самым увеличить скорость работы сайта на несколько порядков в зависимости от его конструкции и сложности. [5]

  1. Технология Web Storage

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

Технология  Web Storage для HTML5 затмит cookies своими возможностями только потому, что представляет из себя не форматно ограниченный текстовый файл, а специально ориентированную базу данных для различных видов информации. Теперь в такой базе сайт может хранить не только отдельные настройки сайта, а целые фрагменты его кода, что позволит работать с веб-приложениями даже при отсутствии подключения к сети Интернет.[5]

  1. Структурные возможности HTML5

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

Несколько конкретных примеров:

Пример1. Вместо громоздкой записи HTML4:

<!DOCTYPE html PUBLIC ”_//DTD XHTML1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>,

в HTML5 это будет выглядеть следующим образом:

<!DOCTYPE html>.

Пример2: В HTML4 для создания заголовка необходим код:

<div id=”header”>

<h1> Мой блог</h1>

<p class=”tagine”> Здесь помещается текст </p>

</div>

В HTML5 есть специальный элемент <header>, который позволит записать этот же фрагмент в виде:

<header>

<h1>Мой блог</h1>

<p class=”tagine”> Здесь помещается текст </p>

</header>

Как видим код становится проще и  понятнее.

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

Например такими:

(URL: http://www.apple.com/iphone/)

(URL: http://www.nikebetterworld.com/)

(URL: http://www.ultranoir.com/en/#!/blog/creative_html/web_3.0/)

  1. Преимущества для конечного пользователя

С HTML5 жизнь конечного пользователя становится заметно легче:

  • Не требуется установка многочисленных дополнительных программ;
  • HTML5, в отличие от HTML4 совместим, помимо ПК и ноутбуков, еще и с планшетами, смартфонами и современными моделями телевизоров, которые предоставляют доступ в интернет. [6]

 

 

 

    1. Недостатки HTML5

На сегодняшний день в  HTML5 присутствуют минусы, из-за которых он проигрывает прежним технологиям. Имеет место некоторая уязвимость HTML5 в области защиты данных. Такую уязвимость создает больший, по сравнению с cookie стандарта HTML4, объем данных, которые сохраняются на жестком диске пользователя. Опасность заключается в том, что в больших объемах данных  может содержаться более подробная информация о пользователе. Эксперты высказывают мнение, сто если хранилище HTML5 остается на компьютере пользователя в течение многих месяцев, то интернет-сайты, обращаясь к нему через JavaScript после загрузки страницы, могут незаметно для пользователя собирать и передавать данные владельцу сайта.

В отношении мультимедийного  контента  тоже есть недостатки, не позволяющие сделать окончательный  выбор в пользу HTML5. Как отмечается в официальном блоге YouTube, поддержка видео HTML5 позволяет воспроизводить мультимедийный контент на компьютерах и устройствах, которые не поддерживают Flash Player, однако в полной степени HTML5 всем этим потребностям все еще не отвечает. На сегодняшний день Adobe Flash обеспечивает наилучшую платформу для воспроизведения видео. В HTML5 пока нет, например, полноэкранного режима. Имеются недостатки, касающиеся использования HTML5 для создания игр. И, кроме того, новый стандарт пока еще не поддерживается всеми браузерами. [6]

Различие в форматах HTML5 видео/аудио в различных браузерах может привести:

  1. К увеличению времени тестирования и разработки;
  2. К увеличению затрат дискового пространства и нагрузке на сервер.

Также есть и другие недостатки в использовании HTML5 видео/аудио:

  1. На данном этапе ни один их кодеков не может поддерживать шифрование потока с распаковкой на клиенте, то есть не имеют возможности отдавать контент в одну точку  (теоретически его одновременно без шифрования сможет смотреть неограниченное число клиентов, а следовательно придется регулировать доступ к конкретному потоку на стороне сервера, что приведет к затратам мощностей);
  2. Нет ни одного универсального решения кроме как Flash для создания митингов и онлайн-трансляций прямо в браузере без установки дополнительного ПО. [7]

Недостатки HTML5 в разработке игр:

    • Медленная работа игр, созданных при помощи HTML5;
    • Не каждая платформа поддерживает игры, разработанные на HTML5;
    • При разработке игры на HTML5 требуется гораздо больше ресурсов и времени;
    • Открытость кода HTML5 неприемлема для бесплатных игр;
    • Отсутствие мощных и удобных инструментов для создания игр, особенно для анимации;
    • Невозможность адекватно упаковывать игру в один файл для дистрибуции на разных порталах;

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

Как отметил Филипп Ле Эгаре (Philippe Le Hegaret), руководитель направления  компании W3C, которая разрабатывает  стандарт HTML5, в ближайшие годы не получиться отказаться от технологии Flash. Причиной этому он назвал то, что  потребуется длительное время для  перехода всех веб-клиентов к поддержке HTML5. В течение ближайшего времени  технологии HTML5 и Adobe Flash будут существовать. [6]

 

 

 

 

 

 

 

 

 

 

 

 

 

  1. Примеры реализации на HTML5

Примеры реализации игр:

  1. Galactians 2 (URL: http://www.spacemonsters.co.uk/games/mobile/galactians2/)

Игроку предстоит побороть инопланетную угрозу, уничтожая плещущие корабли противника.

  1. Sand trap (URL: http://gopherwoodstudios.com/sandtrap/sand-trap.htm)

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

  1. HTML5 Chess (URL:http://htmlchess.sourceforge.net/demo/example.html)

Шахматы, полностью оформленные с применением  новой технологии и возможностью переключения обзора доски с фигурами из 2D в 3D вид.

Примеры реализации приложений:

  1. Google Body Browser (URL: http://www.zygotebody.com/)

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

  1. DeviantART Muro (URL: http://muro.deviantart.com/)

Программа, которая позволит немного поиграться с кистями  и красками. На экране можно создавать неплохие графические надписи для своих проектов.

  1. CSSWarp (URL: http://csswarp.eleqtriq.com/)

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

Информация о работе Особенности стандарта HTML5