Особенности стандарта HTML5
И каждый — показан в DOM самостоятельным объектом (есть также глобальные объекты, вроде window или element, но они слишком специфичны). Перед тем, как отображать веб-страницу, браузер формирует древовидную структуру её элементов и других объектов. Предыдущие стандарты стыдливо замалчивали этот этап, а HTML5, наоборот, во многом опирается именно на такое представление документа. Это позволяет… Читать ещё >
Особенности стандарта HTML5 (реферат, курсовая, диплом, контрольная)
Байкальский государственный университет экономики и права Кафедра информатики и кибернетики КУРСОВАЯ РАБОТА
«Особенности стандарта 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-элементами на странице. Каждый элемент — каждый
каждый
и каждый — показан в DOM самостоятельным объектом (есть также глобальные объекты, вроде window или element, но они слишком специфичны). Перед тем, как отображать веб-страницу, браузер формирует древовидную структуру её элементов и других объектов. Предыдущие стандарты стыдливо замалчивали этот этап, а HTML5, наоборот, во многом опирается именно на такое представление документа. Это позволяет включить в спецификацию объекты, свойства и методы DOM, которые широко используются с незапамятных времён, однако никогда не были стандартизованы: window. open (), alert (), prompt (), document. links, document. images, innerHTML, contentEditable и так далее. Наконец, в HTML 5 официально включён элемент 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 коде предусмотрены специальные теги, такие как