Размещено на http://www.allbest.ru/

Байкальский государственный университет экономики и права

Кафедра информатики и кибернетики

КУРСОВАЯ РАБОТА

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

Работу выполнил: студент группы ИС-09-2

Михайлова А.М.

Руководитель: Артамонов И.В.

Иркутск

2012г.



Содержание

Введение

1. История появления HTML5

2. Особенности HTML5

3. Отличия HTML5 от предыдущих версий. Сравнительный анализ плюсов и минусов

3.1 Преимущества HTML5

3.2 Недостатки HTML5

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

5. Примеры российских сайтов на HTML5

6. Сравнение браузеров (HTML)

Заключение

Использованные источники

Приложения



Введение

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

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

Самые заметные HTML5 возможности - это появление таких тегов как aside, footer, header, nav и article и полная поддержка новейших типов полей ввода в формах, включая атрибут placeholder (подсказывает подсказку в поле ввода), phone и email (которые обеспечивают правильную валидацию), а также ряд новейших медиа-элементов, которые включают audio, video и canvas, позволяющий динамически менять или рисовать контент.

HTML5 стремиться сделать интернет-сайты боле семантически правильными, более интерактивными, более быстрыми. Новый HTML стандарт включает функции, которые раньше требовали Flash или Javascript, а это значит, что сайты станут менее зависимы и смогут работать на многих платформах. [1]

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

1. История появления HTML5

Стандарт HTML прошел долгий эволюционный путь. Его первая версия была опубликована в 1993 году в виде черновой спецификации для Интернета. В 90-е годы HTML оказался в центре всеобщего внимания. Очередные версии быстро сменяли друг друга. Вскоре после выпуска версии 2.0 вышла версия 3.2, затем -- 4.0 (и это на протяжении всего лишь одного года) и, наконец, в 1999 году-- версия HTML 4.01. Контроль за разработкой соответствующих спецификаций по мере развития языка осуществляет международный консорциум W3C  World Wide Web Consortium (W3C) -- организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий..

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

В 2004 году по инициативе небольшой группы специалистов, представлявших ряд крупных производителей браузеров и заинтересованных в поднятии веб-платформы на новый технологический уровень, было основано сообщество WHATWG (Web Hypertext Application Working Group). Благодаря усилиям его участников и появилась спецификация HTML5. Они же инициировали и разработку новых средств, специально предназначенных для веб-приложений, поскольку ясно осознавали, насколько велика потребность в таких средствах. Именно в то время все чаще стали употреблять термин "Web 2.0". Все это давало основания полагать, что мы действительно являемся свидетелями второго возрождения Интернета, если первым считать период, когда статические веб-сайты уступили место более динамичным и социально направленным веб-сайтам, нуждавшимся в гораздо большем разнообразии различных средств в своем арсенале.

В 2006 году к работе над HTML вновь подключился Консорциум W3C и начали появляться постоянные ссылки или временные на различные ресурсы, в результате чего в 2008 году свет увидел первый рабочий вариант проекта рекомендаций по HTML5 , тогда как рабочая группа, занимавшаяся до этого разработкой спецификации XHTML 2, в 2009 году прекратила свою деятельность. Поскольку HTML5 (как вскоре будет показано) решает ряд важных практических проблем, производители браузеров ведут активную работу по внедрению новых возможностей, и это несмотря на то, что до выпуска окончательного варианта спецификации еще очень далеко. В свою очередь, апробация спецификации в эксплуатируемых браузерах служит источником ценной информации, которая используется для улучшения самой спецификации. HTML5 быстро развивается, шагая в ногу со все возрастающими требованиями к веб-платформам. [2]

2. Особенности HTML5

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

Основная идея разработчиков HTML 5 -- сделать жизнеспособный язык разметки, который будет работать на практике, и приносить пользу посетителям и разработчикам сайтов. Один из принципов, положенных в основу стандарта: на первом месте стоят интересы реальных пользователей, затем -- создателей сайтов, затем -- разработчиков браузеров и других приложений, затем -- авторов самого стандарта, и только потом -- теоретические и идеологические соображения, которые Консорциум безуспешно продвигал последние десять лет. HTML 5 должен стать преемником как HTML 4.0, так и XHTML 1.0 XHTML (англ. Extensible Hypertext Markup Language -- расширяемый язык разметки гипертекста) -- семейство языков разметки веб-страницна основе XML, повторяющих и расширяющих возможности HTML 4. Спецификации XHTML 1.0 и XHTML 1.1 являются рекомендациями консорциума Всемирной паутины.

Главное отличие XHTML от HTML заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются., поэтому в стандарте уделяется большое внимание обратной совместимости. С одной стороны, новый язык не полностью совместим с предыдущими версиями, но, с другой стороны, не уходит в радикальный отрыв, как XHTML 2.0.

HTML5 существует в двух вариациях -- как разновидность XHTML и как модификация «исторического» HTML. Создатели веб-страниц могут применять любую из этих вариаций. В первой вариации новый язык полностью согласован с XML 1.0, так что разработчикам доступны все преимущества XML и смежных технологий. Во второй вариации HTML5 покончил с кошмарным наследием прошлого -- формальной совместимостью с SGML SGML (англ. Standard Generalized Markup Language -- стандартный обобщённый язык разметки) -- метаязык, на котором можно определять язык разметки для документов. SGML -- наследник разработанного в 1969 году в IBM языка GML (Generalized Markup Language), который не стоит путать с Geography Markup Language, разрабатываемым Open GIS Consortium. Все предыдущие стандарты HTML претендовали на эту совместимость, но ни один браузер не обрабатывал код HTML по замысловатым правилам SGML. Вместо этого использовались простые алгоритмы, распознающие набор конкретных элементов и атрибутов. HTML 5 узаконил такое поведение браузеров. Новый стандарт не оглядывается на SGML, а описывает частные правила для интерпретации конкретных тэгов и других синтаксических конструкций. По сути, HTML 5 документирует принципы, по которым браузеры уже обрабатывают код последние пятнадцать лет.

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

Ещё одна особенность нового стандарта: он описывает документ HTML в терминах объектной модели (DOM) Document Object Model, (DOM) -- набор объектов, представленных HTML-элементами на странице. Каждый элемент -- каждый<p>, каждый <div> и каждый <span> -- показан в DOM самостоятельным объектом (есть также глобальные объекты, вроде window или element, но они слишком специфичны).. Перед тем, как отображать веб-страницу, браузер формирует древовидную структуру её элементов и других объектов. Предыдущие стандарты стыдливо замалчивали этот этап, а HTML5, наоборот, во многом опирается именно на такое представление документа. Это позволяет включить в спецификацию объекты, свойства и методы DOM, которые широко используются с незапамятных времён, однако никогда не были стандартизованы: window.open(), alert(), prompt(), document.links, document.images, innerHTML, contentEditable и так далее. Наконец, в HTML 5 официально включён элемент embed Элемент <embed> используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы..

Однако HTML5 впитал не всё, что поддерживается в браузерах. Некоторые элементы, наоборот, удалены из стандарта: acronym, applet, basefont, big, center, dir, font, isindex, s, strike, tt, u. Убраны фреймы (frame, frameset, noframes), хотя остался элемент iframe. Нет больше атрибутов, которыми почти никто не пользовался (accesskey, longdesc и др.) или которыми не имеет смысла пользоваться (align, border, valign, cellpadding, cellspacing и др.). Некоторые старые элементы переосмыслены: например, i и b теперь обозначают разные формы смыслового выделения, а не курсив и полужирный шрифт; hr отвечает за разрыв в структуре документа. Элемент menu обрел вторую молодость и позволяет создавать настоящие меню, а address ущемлён в правах и предназначен строго для контактной информации в узком контексте.

Наконец, в HTML5 добавилось много нового. Для статей, блогов, документации и подобных материалов будут полезны элементы article и section, а также новая система заголовков и рубрикации. «Шапка» и «подвал», панель навигации и боковая панель обозначаются элементами header, footer, nav и aside. Для мультимедийного содержания появились элементы audio и video. Они внедряют в страницу соответствующий ресурс и обеспечивают стандартные элементы управления -- кнопки запуска, паузы и остановки, проматывание, регулятор громкости. Для тех браузеров, где эти элементы не поддерживаются, HTML5 позволяет дополнить их альтернативным содержанием -- например, роликом Flash, с помощью которого сейчас внедряется большинство аудио- и видеозаписей. В продвинутых браузерах полноценно сработает элемент audio или video, а во всех остальных -- альтернативный ролик, так что все пользователи останутся довольны. (см. Приложение 1)

Здесь проявляется ещё один генеральный принцип -- новые возможности HTML5 должны создавать как можно меньше проблем в тех браузерах, где они не поддерживаются. Почти все новшества языка устроены так, что для старых браузеров можно обеспечить их реализацию с помощью альтернативного содержания, CSS, JavaScript и других технологий. Отдельного упоминания заслуживает элемент canvas, который предоставляет область для рисования изображений «на лету» средствами JavaScript. Собственно, массовый интерес к HTML 5 начался после того, как Firefox и Opera решили поддерживать этот элемент.

Формы в HTML5 изменились до неузнаваемости. Примитивные процедуры заполнения и отправки формы, описанные в прежних версиях HTML, уже сейчас никого не устраивают, поэтому разработчики сайтов выдумывают собственные расширения интерфейса, средства проверки, самодельные элементы управления. В HTML5 эта самодеятельность урегулирована стандартными элементами, атрибутами и интерфейсами DOM. В дополнение к обычным текстовым полям, появились поля для ввода определённых данных. Например, input type="number" -- это поле для ввода числа, а input type="range" -- ползунок для регулирования громкости или чего-то похожего. Атрибуты min, max и step определяют диапазон и точность допустимых значений в поле. Элемент datalist обеспечивает поле со списком, а элемент output -- область для вывода динамически генерируемых результатов. Атрибут required для элемента управления обозначает, что этот элемент обязателен для заполнения, так что без него форма не будет отправлена. Атрибут autofocus позволяет установить фокус ввода в данный элемент. Метод checkValidity() проверяет правильность заполнения полей. До сих пор эти возможности имитировались на сайтах с помощью кустарных сценариев JavaScript.

В стандарте предлагается элемент datagrid для организации динамических структур данных, элемент command для вызова пользовательских команд, элемент progress -- индикатор хода выполнения операции, а также средства DOM для редактирования содержания прямо на веб-странице, перетаскивания, выделения, работы с буфером обмена и многого другого. Это отвечает общей тенденции развития Всемирной Паутины: если раньше сайты были чем-то вроде публикаций, то теперь они превратились в полноценные приложения, требующие функционального и удобного пользовательского интерфейса. Соответственно, новый HTML также должен стать не столько языком публикаций, сколько языком описания приложений. [4]

3. Отличия HTML5 от предыдущих версий. Сравнительный анализ плюсов и минусов

3.1 Преимущества HTML5

1) Повышенная безопасность

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

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

2) Ввод данных

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

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

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

Суть такого мощного нововведения как canvas состоит в том, что для браузеров на экране выделяется специальное пространство, положение которого на веб-странице определяется разработчиком сайта. В этой области с помощью целого набора специальных графических HTML5 команд можно составлять графические изображения, в том числе и анимированные, практически любой сложности. Более того, для 3-D графики разрабатывается специальный набор команд аналогичных всемирно известному стандарту трехмерной графики OpenGL Open Graphics Library -- (открытая графическая библиотека, графическое API) -- спецификация, определяющая независимый от языка программирования платформонезависимый программный интерфейс для написания приложений, использующих двумерную и трёхмерную компьютерную графику.. Теперь браузер будет способен воспроизводить не только красивые двухмерные интерактивные приложения, но и полноценные трехмерные игры.

Если для HTML5 и дальше продолжат развивать направление трехмерных игр, в недалеком будущем мы имеем все шансы получить игровые проекты с современной шейдерной графикой Шейдер (англ. Shader) -- это программа для одной из ступеней графического конвейера, используемая в трёхмерной графике для определения окончательных параметров объекта или изображения. Она может включать в себя произвольной сложности описание поглощения и рассеяния света, наложения текстуры, отражение и преломление, затенение, смещение поверхности и эффекты пост-обработки. и соответствующими спецэффектами для нее. Как только графику браузеров полностью переведут на вычислительную поддержку от видеокарт, в сети будут размещены ресурсы с он-лайн играми практически ничем не отличающимися от сегодняшних графически красивых, но отдельно устанавливаемых клиентов игровых приложений.[5]

3) Видео и аудио

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

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

HTML5 призван наконец избавить браузеры от этих дополнительных программ и дать им возможность полноценного воспроизведения аудио и видео контента своими силами. Для этого в HTML5 коде предусмотрены специальные теги, такие как <video> и <audio>. Впрочем, у этого нововведения имеются и свои недостатки, например отсутствие единого стандарта для видеокодеков Видеокодек -- программа/алгоритм сжатия (то есть уменьшения размера) видеоданных (видеофайла, видеопотока) и восстановления сжатых данных. Кодек -- файл-формула, которая определяет, каким образом можно «упаковать» видеоконтент и, соответственно, проиграть видео. Также возможно кодирование кроме видео и аудиоинформации, добавления субтитров, векторных эффектов и т. п., что не способствует пока широкому распространению этой удобной для пользователя и веб-разработчиков технологии. [5]

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

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

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

5) Технология Web Storage

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

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

6) Структурные возможности 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]

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

http://www.apple.com/iphone/

http://www.nikebetterworld.com/

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

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

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

· Не требуется установка многочисленных дополнительных программ;

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

3.2 Недостатки 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]

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

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

Galactians 2 [8 ]

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

Sand trap [9 ]

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

HTML5 Chess [10]

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

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

Google Body Browser [11]

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

DeviantART Muro [12]

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

CSSWarp [13]

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

5. Примеры российских сайтов на HTML5

1) 17 февраля 2011 года в Москве прошла конференция HTML5 Camp. Это первая из серии международных конференций Microsoft, посвященных теме современных веб-стандартов и будущего веб. Мероприятие посетили около 400 веб-профессионалов и свыше 24000 присоединились к онлайн-трансляции.

Отчеты и видео-доклады с мероприятия выложены на сайте: http://www.microsoft.com/ru-ru/events/html5camp/ (см. Приложение №2)

2) Все об iPhone http://www.ru-iphone.com/node/4794 (см. Приложение №3)

3) «Аська» переходит на HTML5

Компания Mail.ru объявила о выпуске агента ICQ, написанного на HTML5 и JavaScript, его может разместить на своем сайте любой партнер компании. Функционал получил название ICQ On-Site и предназначен для сайтов, которые хотят использовать инфраструктуру уже готовой системы мгновенных сообщений для взаимодействия своих посетителей друг с другом. Новый JavaScript-агент дает пользователю ICQ возможность общаться с посетителями сайта прямо в веб-интерфейсе, передавать им ссылки на страницы сайта и обсуждать их. Подобный функционал позволит владельцам сайтов расширить аудиторию, сделать ее более лояльной и не писать собственных клиентов для обмена мгновенными сообщениями.

Выпуск On-Site позволит Mail. ru привлечь к ICQ новых клиентов, а старым дать новые функциональные возможности для общения. Компания стремится подстроиться под новую парадигму, в центре которой стоит браузер. Это связано с тем, что уже сейчас около 20% запросов к сервису генерируют пользователи альтернативных операционных систем, куда входят и мобильные платформы, такие как iOS и Android. Хотя компания разработала для этих платформ специализированные клиенты, тем не менее иногда пользователям неудобно устанавливать дополнительные программы. В этом случае можно воспользоваться веб-клиентом, который может быть размещен на партнерском сайте.

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

Для самой компании Mail.ru новый продукт является попыткой увеличить число пользователей ICQ путем привлечения постоянных посетителей сайтов-партнеров. Компания в начале года провела «очистку» среди своих пользователей, заблокировав учетные записи роботов. Для этого была использована технология борьбы со спамом, которая разрабатывалась не только для системы мгновенных сообщений Mail.Ru Агент, но и для других проектов компании. Кроме того, компания уменьшила число рекламных баннеров -- теперь под сообщением может появиться один баннер, а не три, как раньше. Все это делается, чтобы повысить привлекательность ICQ и улучшить отношение к ней со стороны пользователей. Основным методом монетизации пользователей ICQ по-прежнему остается реклама, поэтому компания всеми силами старается увеличить количество пользователей.

Между тем Mail.ru Group уже имеет три системы мгновенных сообщений: кроме ICQ, у компании есть собственный Mail.Ru-Агент, а также система сообщений в социальной сети «Одноклассники». Александр Горный, руководитель проекта ICQ в компании Mail.ru, хочет создать единую среду передачи сообщений, однако он пока не раскрывает планов по интеграции указанных сервисов.

В то же время у ICQ есть проблема однократного входа, которая связана с появлением веб-модуля и приложений для мобильных платформ. Когда протокол создавался, то допускалось только единственное подключение от одного пользователя, который работает за компьютером. Однако сейчас вполне возможно, что человек одновременно подключается к ICQ с агента, работающего на настольном компьютере, с модуля On-Site на планшетном компьютере и с Java-клиента на мобильном телефоне. Сейчас такое подключение сделать нельзя -- при аутентификации в модуле On-Site агент теряет связь с сервером, даже если они работают на одном компьютере. Горный считает проблему однократного входа наиболее актуальной, поэтому возможно, что в ближайших версиях агента эта функциональность все-таки появится. [14]

6. Сравнение браузеров (HTML5)

В сети появился сайт html5test.com, который, как это и следует из названия, проверяет, насколько тот или иной браузер готов работать с новым и чрезвычайно перспективным веб-стандартом HTML5.

По версии html5test.com (по состоянию на январь 2012г.) браузеры показывают следующие результаты в тестах (максимально можно набрать 500 очков):

Браузер	Версия	Очки	Бонус-очки
Internet Explorer	9	138	5
Safari	5.1	317	8
Firefox	12	345	9
Opera	11.60	338	9
Chrome	18	400	13
Maxthon	3.3.7	437	15

По результатам тестов больше всего очков набрал браузер Maxthon 3.3.7 - 437 очков из возможных 500. Maxthon 3 -- это браузер построенный на основе сразу 2-х движков: Webkit (используется в Google Chrome) и Trident (используется в Internet Explorer). Основным движком является Webkit, а Trident считается дополнительным и используется для особых случаев. Наличие движка от Internet Explorer обусловлено тем, что Maxthon разрабатывается, в первую очередь, для аудитории из Китая, а в тех краях Internet Explorer до сих пор остается самым популярным браузером и под него оптимизировано множество сайтов, которые могут неправильно отображаться в новых браузерах.

В настоящее время можно выделить 3 лидирующих браузера - это Maxthon3.3.7, Chrome18 и Firefox12.

Подробные результаты их испытаний представлены в Приложении 4.



Предыдущие версии браузеров:

Браузер	Версия	Очки	Бонус-очки
Chrome	16	396	13
Chrome	14	389	13
Chrome	10	373	13
Firefox	11	345	9
Firefox	10	342	9
Firefox	8	338	9
Firefox	4	298	9
Opera	11.50	296	7
Chrome	6	291	10
Opera	11.10	288	7
Safari	5.0	265	6
Opera	10.60	240	7
Opera	10.50	195	4
Firefox	3.6	188	4
Opera	10.00	126	0
Firefox	3.0	76	0
Internet Explorer	8	42	0
Internet Explorer	7	27	0
Internet Explorer	6	26	0

html сайт браузер версия

На рис.1 представленно в виде графика сравнение популярных браузеров на протяжении 2009 - 2012г.



Рис.1

Результаты мобильных браузеров по тому же источнику:

Платформа	Очки	Бонус-очки
Opera Mobile 12.00	369	11
Firefox Mobile 10	325	9
iOS 5.1	324	9
MeeGo/Harmattan	284	14
Android 4.0	273	3
BlackBerry OS 7	273	3
Bada 2.0	268	9
Nokia Belle FP1	226	9
WebOS 2.2	210	5
Android 2.3	189	1
Windows Phone 7.5	138	5



На рис.2 представленно в виде графика сравнение популярных мобильных браузеров на протяжении 2009 - 2012г.

Рис.2



Заключение

HTML5 становится все популярнее с выходом очередных версий браузеров. Никто не осмелится отрицать, что внедрение HTML5 в браузеры идет ускоренными темпами.

Язык HTML5, очередная глобальная переработка HTML, языка Интернета, создан для того, чтобы коренным образом поменять способ создания веб-страниц разработчиками и дизайнерами, а также образ взаимодействия их с посетителями. Он редактируется Яном Хиксоном (Ian Hickson) из Google и Дэвидом Хайяттом (David Hyatt) из Apple, двумя самыми креативными умами Интернета.

Кроме того что веб-разработчики и дизайнеры могут использовать более «чистый», более простой и последовательный код, HTML5 поможет освободиться от тех ограничений, которые накладывает использование сторонних плагинов, например, Adobe Flash. Впервые можно будет достичь согласованности между интерфейсом видео-плеера и остальным дизайном сайта. Пользователи смогут поворачивать и перемещать видео, менять его размер и даже фиксировать ползунок прокрутки видео, пока оно проигрывается, используя встроенные инструменты управления. [16]

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

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



Использованные источники

1) http://it-zametki.ru/it-novosti/wordpress-i-html5.html

2) http://ldalab.ru/post/istoriya_poavleniya_html5.html

3) http://htmlbook.ru/html5

4) www.optimism.ru/agency/articles/270/

5) http://inetedu.ru/articles/21-technology/44-html5.html

6) http://e.mars-development.com/2012/03/normal-0-false-false-false_22.html

7) www.takein.ru

8) http://www.spacemonsters.co.uk/games/mobile/galactians2/

9) http://gopherwoodstudios.com/sandtrap/sand-trap.htm

10) http://htmlchess.sourceforge.net/demo/example.html

11) http://www.zygotebody.com/

12) http://muro.deviantart.com/

13) http://csswarp.eleqtriq.com/

14) http://www.icq.com/download/onsite/ru

15) http://lenta.ru/columns/2010/04/15/html/

16) http://www.coolwebmasters.com/reviews/622-25-ultra-modern-websites-html5.html

17) http://html5test.com/

18) http://www.microsoft.com/ru-ru/events/html5camp/

19) http://www.ru-iphone.com/node/4794

20) http://ru.wikipedia.org/wiki/ (HTML5)#cite_note-0

21) www.html5-blog.ru

22) www.wb-styling.ru (примеры реализаций)

23) http://www.apple.com/iphone/

24) http://www.nikebetterworld.com/

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

26) http://www.slo.ru/news/entry/1796



Приложение №1



Приложение №2



Приложение №3



Приложение №4

Сравнение браузеров (HTML5)

	Chrome18 400 13 bonus points	Maxthon3.3.7 437 15 bonus points	Firefox12 345 9 bonus points
Parsing rules	11	11	11
<!DOCTYPE html> triggers standards mode »	Yes ?	Yes ?	Yes ?
HTML5 tokenizer »	Yes ?	Yes ?	Yes ?
HTML5 tree building »	Yes ?	Yes ?	Yes ?
SVG in text/html »	Yes ?	Yes ?	Yes ?
MathML in text/html »	Yes ?	Yes ?	Yes ?
Canvas	20	20	20
canvas element »	Yes ?	Yes ?	Yes ?
2D context »	Yes ?	Yes ?	Yes ?
Text »	Yes ?	Yes ?	Yes ?
Video	21	31	21
video element »	Yes ?	Yes ?	Yes ?
Subtitle support »	No ?	Yes ?	No ?
Poster image support »	Yes ?	Yes ?	Yes ?
MPEG-4 support »	No ?	Yes ?	No ?
H.264 support »	Yes ?	Yes ?	No ?
Ogg Theora support »	Yes ?	Yes ?	Yes ?
WebM support »	Yes ?	Yes ?	Yes ?
Audio	20	20	20
audio element »	Yes ?	Yes ?	Yes ?
PCM audio support »	Yes ?	Yes ?	Yes ?
AAC support »	Yes ?	Yes ?	No ?
MP3 support »	Yes ?	Yes ?	No ?
Ogg Vorbis support »	Yes ?	Yes ?	Yes ?
WebM support »	Yes ?	Yes ?	Yes ?
Elements	25	24	21
Embedding custom non-visible data »	Yes ?	Yes ?	Yes ?
New or modified elements
Section elements	Yes ?	Yes ?	Yes ?
Grouping content elements	Yes ?	Partial _	Partial _
Text-level semantic elements	Partial _	Partial _	Partial _
Interactive elements	Partial _	Partial _	Partial _
Global attributes or methods
hidden attribute »	Yes ?	Yes ?	Yes ?
Dynamic markup insertion	Yes ?	Yes ?	Yes ?
Forms	74	86	56
Field types
input type=text	Yes ?	Yes ?	Yes ?
input type=search	Yes ?	Yes ?	Yes ?
input type=tel	Yes ?	Yes ?	Yes ?
input type=url	Yes ?	Yes ?	Yes ?
input type=email	Yes ?	Yes ?	Yes ?
input type=datetime	No ?	Partial _	No ?
input type=date	No ?	Partial _	No ?
input type=month	No ?	Partial _	No ?
input type=week	No ?	Partial _	No ?
input type=time	No ?	Partial _	No ?
input type=datetime-local	No ?	Partial _	No ?
input type=number	Yes ?	Yes ?	No ?
input type=range	Yes ?	Yes ?	No ?
input type=color	No ?	Partial _	No ?
input type=checkbox	Yes ?	Yes ?	Yes ?
input type=image	Partial _	Partial _	Partial _
input type=file	Yes ?	Yes ?	Yes ?
textarea	Yes ?	Yes ?	Yes ?
select	Yes ?	Yes ?	Yes ?
fieldset	Partial _	Partial _	Yes ?
datalist	No ?	Partial _	Yes ?
keygen	Yes ?	Yes ?	No ?
output	Yes ?	Yes ?	Yes ?
progress	Yes ?	Yes ?	Yes ?
meter	Yes ?	Yes ?	No ?
Fields
Field validation	Yes ?	Yes ?	Yes ?
Association of controls and forms	Yes ?	Yes ?	Partial _
Other attributes	Yes ?	Yes ?	Partial _
CSS selectors	Yes ?	Yes ?	Partial _
Events	Yes ?	Yes ?	Yes ?
Forms
Form validation	Yes ?	Yes ?	Yes ?
User interaction	37	37	35
Drag and drop
Attributes	Yes ?	Yes ?	Partial _
Events	Yes ?	Yes ?	Yes ?
HTML editing
Editing elements	Yes ?	Yes ?	Yes ?
Editing documents	Yes ?	Yes ?	Yes ?
APIs	Yes ?	Yes ?	Yes ?
Spellcheck
spellcheck attribute »	Yes ?	Yes ?	Yes ?
History and navigation	5	5	5
Session history »	Yes ?	Yes ?	Yes ?
Microdata	0	0	0
Microdata »	No ?	No ?	No ?
Web applications	18	17	20
Application Cache »	Yes ?	Yes ?	Yes ?
Custom scheme handlers »	Yes ?	Yes ?	Yes ?
Custom content handlers »	No ?	No ?	Yes ?
Custom search providers »	Yes ?	No ?	Yes ?
Security	5	5	0
Sandboxed iframe »	Yes ?	Yes ?	No ?
Seamless iframe »	No ?	No ?	No ?
iframe with inline contents »	No ?	No ?	No ?
Various	4	4	4
Scoped style element »	No ?	No ?	No ?
Asyncronous script execution »	Yes ?	Yes ?	Yes ?
Runtime script error reporting »	Yes ?	Yes ?	Yes ?
Base64 encoding and decoding »	Yes ?	Yes ?	Yes ?
related specifications
Location and Orientation	20	20	20
Geolocation »	Yes ?	Yes ?	Yes ?
Device Orientation »	Yes ?	Yes ?	Yes ?
WebGL	25	25	24
3D context »	Yes ?	Yes ?	Yes ?
Native binary data	Yes ?	Yes ?	Partial _
Communication	35	37	37
Cross-document messaging »	Yes ?	Yes ?	Yes ?
Server-Sent Events »	Yes ?	Yes ?	Yes ?
XMLHttpRequest Level 2	Partial _	Yes ?	Yes ?
WebSocket »	Yes ?	Yes ?	Yes ?
Files	20	20	10
FileReader API »	Yes ?	Yes ?	Yes ?
FileSystem API »	Yes ?	Yes ?	No ?
Storage	20	20	20
Session Storage »	Yes ?	Yes ?	Yes ?
Local Storage »	Yes ?	Yes ?	Yes ?
IndexedDB »	Yes ?	Yes ?	Yes ?
Web SQL Database »	Yes ?	Yes ?	No ?
Workers	15	10	10
Web Workers »	Yes ?	Yes ?	Yes ?
Shared Workers »	Yes ?	No ?	No ?
Local multimedia	0	20	0
Access the webcam »	No ?	Yes ?	No ?
Notifications	10	10	0
Web Notifications »	Yes ?	Yes ?	No ?
Other	7	7	7
Page Visibility »	Yes ?	Yes ?	Yes ?
Text selection »	Yes ?	Yes ?	Yes ?
Scroll into view »	Yes ?	Yes ?	Yes ?
experimental
Audio	4	4	0
Web Audio API »	Yes ?	Yes ?	No ?
Video and Animation	4	4	4
Full screen support »	Yes ?	Yes ?	Yes ?
window.requestAnimationFrame »	Yes ?	Yes ?	Yes ?

Размещено на Allbest.ru