Бойко В.П. Л.Р. 4 по информатике
.docМИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ
РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное бюджетное образовательное учреждение
высшего профессионального образования
МОСКОВСКИЙ ГОСУДАРСТВЕННЫЙ МАШИНОСТРОИТЕЛЬНЫЙ
УНИВЕРСИТЕТ (МАМИ)
/ УНИВЕРСИТЕТ МАШИНОСТРОЕНИЯ /
Кафедра: «Автоматика и процессы управления»
Факультет: «Автоматизация и управление»
Дисциплина: «Информационные технологии»
Лабораторная работа №4.
Тема:
«Работа с векторным графическим изображением в HTML5»
Группа: 1-ЗУТСн-1
Студент: Бойко Владислав Павлович
Преподаватель: Поповкин Александр Викторович
Москва
2013
Вариант 16
Цель работы: ознакомиться с методами работы с векторными графическими изображениями в HTML5
Теоретическая часть:
HTML5 является перспективным, но в тоже время, уже очень востребованным языком для структурирования и представления содержимого во всемирной паутине.
Под HTML5 разные люди подразумевают разные вещи. Для некоторых это просто новые теги вроде <header> и <footer> и масса новых атрибутов, доступных в разметке. Для других это все новое и интересное в Web, в том числе технологии, реализованные всего в одном из браузеров, или какие-то спецификации, официально не включенные в HTML5. Поэтому для начала нужно разобраться в том, чем на самом деле является HTML5.
И, если честно, такому разнообразию толкований можно найти оправдание. HTML5 огромен! Формально определенный организацией международных стандартов World Wide Web Consortium (W3C), HTML5 состоит из более чем 100 спецификаций, относящихся к веб-технологиям нового поколения. Хотя охватить разом столь широкое понятие, как HTML5, и недвусмысленно определить его очень трудно, я считаю, что W3C пыталась ввести HTML5 как обобщающую концепцию перемен, происходящих в Web.
По сути, HTML5 — широкий термин, описывающий набор спецификаций HTML, CSS и JavaScript, разработанных для создания веб-сайтов и приложений нового поколения. Примечательно, что в этом определении есть три части: HTML, CSS и JavaScript. Они определяют, как разработчики должны использовать улучшенную разметку, более богатые стилевые возможности и новые JavaScript API. Проще говоря, HTML5 = HTML + CSS + JavaScript
HTML5 — это совокупные изменения в HTML, CSS, JavaScript. Эти три термина описывают всю широту и масштаб HTML5. Вы по-прежнему думаете, что это некоторое упрощение? Возможно, но, как вы вскоре увидите, исчерпывающее определение HTML5 не столь значимо по сравнению с технологиями, которые вы выбираете и считаете заслуживающими вашего времени и сил в освоении.
Перейдем ближе к новшествам, которые привносит HTML5 в построение современных сайтов.
В таблице 1 показаны некоторые изменения касательно самой структуры документа HTML5
Таблица 1 – Структура документа HTML5
|
Упрощенный DOCTYPE |
<!doctype html> |
|
Разрешены перекрывающиеся теги |
<b><i>Да, так можно, но не нужно!</b></i> |
|
Не обязательны кавычки атрибутов |
<div class=myClass>Можно, но …</div> |
|
Атрибуты без значений (binary) |
<video controls>Наличие присутствия видео</video> |
|
Не обязательны структурные теги… |
<!doctype html> <meta charset=utf-8> <title>Моя Страница</title> <p>Да, это корректный документ, но…</p> |
|
Документ может быть XML |
- Формат ―XHTML5‖, совместимый с XHTML1 - Документ ~ сериализованный объект |
Убрали полностью из описание из DOCTYPE, достаточно написать <!doctype html>, значит это уже документ HTML. Никаких указаний версий, пространств имен. Ввели перекрывание тэгов. В стандарте HTML 4.01 она не поддерживалась, эта ситуация должна корректно обрабатываться браузером, хотя необходимость применения перекрывания тэгов HTML под сомнением. Не обязательны кавычки атрибутов: раньше они были обязательны – их кто-то не ставил, теперь они обязательны – их обязательно будут все ставить. Особенно для тех, кто пишет парсеры HTML страниц - это будет особенно радостно. Ввели такое понятие как бинарный элемент, т.е. бинарный атрибут, атрибуты без значений. Достаточно указать сам атрибут, нет необходимости писать атрибут = 1, если просто указан атрибут, это считается, что по умолчанию значение 1 (true – атрибут включен). Структурные теги с точки зрения стандарта HTML5 не являются обязательными.
Пример:
<!doctype html>
<meta charset=utf-8>
<title>Моя Страница</title>
<p>Да, это корректный документ, но…</p>
Документ может быть XML
Формат ―XHTML5‖, совместимый с XHTML1
Документ ~ сериализованный объект
В документе могут отсутствовать тэги <head>, <body> и это будет валидный документ HTML5. HTML5 идет на пути интеграции с системами обмена данных. В принципе, документом HTML5 может являться любой XML документ. Например, у вас есть какой-то объект, после сериализации в XML – это валидный документ HTML5. Получается документ XHTML5 совместимый с HTML5, поскольку не нарушает конвенции, которые там описаны. Но фактически это валидный документ.
Немного об устаревших элементах. Часть элементов помечена, как устаревшие. Они поддерживаются стандартом, но крайне не рекомендуются к использованию, поскольку в дальнейшем они не будут использоваться. В основном такие изменения коснулись тех элементов, которые либо редко используются, либо могут быть заменены на какие-то другие элементы, что показано в таблице 2. Часть элементов можно заменить при использовании CSS.
Таблица 2 - Устаревшие элементы
|
<applet> |
следует использовать <embed> |
|
<acronym> |
использовать <abbr> |
|
<bgsound> |
использовать <audio> |
|
<dir> |
использовать <ul> |
|
<isindex> |
использовать <form> и текстовое поле |
|
<big> |
следует использовать CSS |
|
<basefont> |
следует использовать CSS |
|
<blink> |
следует использовать CSS/JS |
|
<center> |
следует использовать CSS |
|
<font> |
следует использовать CSS |
|
<marquee> |
дурацкая затея ранних IE… |
|
<strike> |
вместо этого <del> |
|
<u> |
следует использовать CSS |
|
<tt> |
следует использовать CSS |
Элемент <blink> использовали при создании веб-страниц для Internet Explorer 4 для привлечения внимания пользователя, особенно в бизнес-приложениях. Элемент <marquee> изначально поддерживался только в Internet Explorer, его не было в стандарте (далее помечался, что его в дальнейшем не будут поддерживать).
Есть такие элементы, которые отменены в стандарте HTML5:
-
<frame>, <frameset> и <noframe>
-
Не поддерживаются из-за проблем с удобством использования страницы
-
Рекомендуется использование <iframe> либо Ajax/JS
Они не рекомендуются к использованию. Фрэймы нарушают целостность документа и делают документ сложным в восприятии, навигации. Рекомендуется использовать <iframe>, а если веб-разработчику необходимы <iframe>, чтобы обновлять содержимое страницы и отдельно поддерживать статическое меню, тогда лучше использовать AJAX. Контент вытягивать с сервера, помещать его на страницу через JavaScript без использованию фрэймов, тогда будет целостность одной веб-страницы. Это хорошо для поисковых систем при индексации.
В стандарте HTML5 очень много отмененных атрибутов, вот некоторые из них:
-
shape и coords для тега a
-
longdesc для тегов img и iframe
-
target для тега link
-
nohref для тега area
-
profile для тега head
-
version для тега html
-
name для тега img (рекомендуется id)
-
scheme для тега meta
-
archive, classid, codebase, codetype, declare и stиby для тега object
-
valuetype и type для тега param
-
align для тегов caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead и tr и т.д.
Это в основном те элементы, которые можно заменить с помощью CSS. Развитие HTML идет к разделению кода, отвечающего за содержание документа и структуры документа, отделения его от оформления, которое можно сделать в CSS. Идет тенденция к разделению оформления и контента. Таким образом, нет необходимости при смене оформления, менять часть содержащую контент. А также за счет этого упрощается работа парсеров.
В стандарте HTML5 были добавлены новые семантические элементы. Поскольку HTML-тэги все чаще используются также для поисковых систем при ранжировании документов, системами чтения документов, то появилась необходимость выделения этих элементов. Поэтому были введены семантические тэги, которые показаны в таблице 3.
Таблица 3 - Новые семантические элменты
|
<article> |
самостоятельный блок контента |
|
<section> |
группировка контента |
|
<nav> |
элементы навигации |
|
<aside> |
врезка |
|
<hgroup> |
группирует заголовки <hX> |
|
<header> |
заголовок страницы |
|
<footer> |
«подвал» страницы |
|
<figure> |
иллюстрация, диаграмма, изображение (выделенная область) |
|
<figcaption> |
подпись к иллюстрации |
|
<mark> |
выделение текста |
Например, тэг <article> указывает о наличии самостоятельного блока контента на странице. Тэг <article> может использоваться для выделения записей в блогах для отделения его от оформительской части. Тэг <nav> позволяет указать элементы навигации, тогда ссылки, помеченные <nav> будут для поисковых систем ссылками переходов между документами (отделение контентной части от навигационной). Тэг <figure> может отмечать любую иллюстрацию в документе (текст, таблица, график, диаграмма). Элемент <figure> поддерживает элемент figcaption, который позволяет указать подписи, что позволяет при выдаче поисковых систем по запросу изображений указать точную подпись, именно такую, какую хочет веб-разработчик, либо заказчик, а не такую, какую решит поисковая система на основании текста на странице. Семантические элементы позволяют выделить блоки документа и по ним построить меню.
Контентные элементы привносят новую функциональность на веб-страницы.
Таблица 4 - Новые контентные элементы
|
<audio> |
аудио без плагинов |
|
<video> |
видео без плагинов |
|
<svg> |
векторные изображения в XML - Отдельный стандарт, в HTML5 включен тег |
|
<math> |
математические формулы в формате MathML |
|
<canvas> |
поверхность «для рисования» |
Тэг <svg> позволяет включать векторные изображения на веб-странице. При этом необходимо отметить, что SVG, также как и MathML не входят в стандарт HTML5, они включены просто как тэги. Всѐ, что описано внутри этих тэгов – это отдельные стандарты, которые разрабатываются в отдельных группах. Тэг <math> позволяет включать на веб-страницу математические формулы в формате MathML. Теперь нет необходимости экспортировать в gif изображения из LaTeX. Элемент <canvas> представляет собой некую поверхность «для рисования», где можно с помощью JavaScript производить манипуляции с различными объектами, например, создавать динамические элементы, и даже создавать браузерные игры.
С точки зрения удобства пользователя всѐ должно быть встроено в браузер. При использовании элементов Audio и Video:
-
Не требуются плагины
-
Управление JavaScript
-
Простое добавление тегов на страницу
-
Нет DRM
-
Нет простых средств управления загрузкой канала (привет, Silverlight!)
Видео становится полноправным элементом веб-страницы, как JavaScript-вставки. Но эти тэги HTML5 не поддерживают того, что поддерживают плагины. Например, в Silverlight есть технология, которая позволяет автоматически переключать битрейт в зависимости от ширины канала. Если нет необходимости использовать дополнительную функциональность, то можно использовать стандартный тэг HTML5. С помощью JavaScript можно взаимодействовать с видео и аудио.
Инструменты разработки:
-
Visual Studio 2010 Service Pack 1
-
Visual Studio HTML & SVG Extensions
-
Internet Explorer 9 Developer Tools
-
Modernizer
-
ai2Canvas
-
HTML5 Boilerplate
-
BlueGriffon
В Microsoft Visual Studio 2010 Service Pack 1 поддерживаются все тэги HTML5, подсказки IntelliSense (выпадающие списки со значениями атрибутов, тэгами). Для Visual Studio есть пакет расширения Visual Studio HTML & SVG Extensions для повышения удобства работы с SVG-графикой.
Internet Explorer 9 Developer Tools – это встроенный в Internet Explorer, начиная с 8-ой версии, который поддерживает динамическую работу с DOM-деревом документа, свободный аналог – Firebug в Mozilla Firefox, там есть поддержка Canvas, SVG. Портал Modernizer позволяет внести поддержку HTML5 в более старые браузеры. Это набор JavaScript кода, который можно использовать для того, чтобы включить поддержку аналогичных элементов в предыдущих версиях браузеров. HTML5 Boilerplate – портал, который позволяет реализовать некоторую поддержку HTML5 в более ранних версиях браузеров. ai2Canvas – бесплатный инструмент, который позволяет файлы Adobe Illustrator (AI) автоматически сконвертировать в Canvas. BlueGriffon — свободный WYSIWYG HTML-редактор, который поддерживает стандарты HTML 5 и XHTML5. Кроме того, BlueGriffon содержит встроенную систему анализа DOM-дерева, редактор векторных SVG-изображений и интерфейс для настройки CSS-стилей, реализована поддержка MathML.
Ход работы:
-
Создал файл index.htm и скопировал в тег <svg> код изображения.
Исходный код до внесения изменений:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая HTML5 веб-страница</title>
</head>
<body>
<header>
<h1><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="744.09448"
height="1052.3622"
id="svg2"
inkscape:version="0.48.2 r9819"
sodipodi:docname="risunok.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="706"
id="namedview10"
showgrid="false"
inkscape:zoom="0.47041492"
inkscape:cx="7.4754735"
inkscape:cy="526.18109"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="matrix(1,0,0,0.78138469,-23.383612,40.164568)">
<g
id="g3762">
<path
d="M 390,57.3125 C 208.90589,57.3125 62.09375,270.6334 62.09375,533.78125 62.09375,796.9291 208.90589,1010.25 390,1010.25 571.09411,1010.25 717.90625,796.9291 717.90625,533.78125 717.90625,270.6334 571.09411,57.3125 390,57.3125 z M 417.15625,144 C 565.36495,144 685.5,310.85214 685.5,516.65625 c 0,205.80411 -120.13505,372.625 -268.34375,372.625 -148.2087,0 -268.375,-166.82089 -268.375,-372.625 C 148.78125,310.85214 268.94755,144 417.15625,144 z"
id="path2985"
style="fill:#ffff00;fill-opacity:0.91363639;stroke:none"
inkscape:connector-curvature="0" />
<text
x="330.83032"
y="371.47327"
transform="scale(0.54530204,1.8338461)"
id="text3758"
xml:space="preserve"
style="font-size:67.33257294px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#00ff00;fill-opacity:1;stroke:none;font-family:Tekton Pro;-inkscape-font-specification:Tekton Pro Bold"
sodipodi:linespacing="125%"><tspan
x="330.83032"
y="371.47327"
id="tspan3760"
style="font-size:269.33029175px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#00ff00;font-family:Tekton Pro;-inkscape-font-specification:Tekton Pro Bold">HTML 5</tspan></text>
</g>
</g>
</svg>
</h1>
</header>
<footer>
<p>Web-designer Владислав Бойко, © Copyright, 2011</p>
</footer>
</body>
</html>
-
Внес изменения в код, изменив цвет и размер шрифта, а так же цвет окружности. Изменения в коде выделены.
Исходный код после внесения изменений:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая HTML5 веб-страница</title>
</head>
<body>
<header>
<h1><svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="744.09448"
height="1052.3622"
id="svg2"
inkscape:version="0.48.2 r9819"
sodipodi:docname="risunok.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="706"
id="namedview10"
showgrid="false"
inkscape:zoom="0.47041492"
inkscape:cx="7.4754735"
inkscape:cy="526.18109"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
transform="matrix(1,0,0,0.78138469,-23.383612,40.164568)">
<g
id="g3762">
<path
d="M 390,57.3125 C 208.90589,57.3125 62.09375,270.6334 62.09375,533.78125 62.09375,796.9291 208.90589,1010.25 390,1010.25 571.09411,1010.25 717.90625,796.9291 717.90625,533.78125 717.90625,270.6334 571.09411,57.3125 390,57.3125 z M 417.15625,144 C 565.36495,144 685.5,310.85214 685.5,516.65625 c 0,205.80411 -120.13505,372.625 -268.34375,372.625 -148.2087,0 -268.375,-166.82089 -268.375,-372.625 C 148.78125,310.85214 268.94755,144 417.15625,144 z"
id="path2985"
style="fill:#8B4513;fill-opacity:0.91363639;stroke:none"
inkscape:connector-curvature="0" />
<text
x="330.83032"
y="371.47327"
transform="scale(0.54530204,1.8338461)"
id="text3758"
xml:space="preserve"
style="font-size:67.33257294px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#00ff00;fill-opacity:1;stroke:none;font-family:Tekton Pro;-inkscape-font-specification:Tekton Pro Bold"
sodipodi:linespacing="125%"><tspan
x="330.83032"
y="371.47327"
id="tspan3760"
style="font-size:255px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#D2691E;font-family:Tekton Pro;-inkscape-font-specification:Tekton Pro Bold">HTML 5</tspan></text>
</g>
</g>
</svg>
</h1>
</header>
<footer>
<p>Web-designer Владислав Бойко, © Copyright, 2011</p>
</footer>
</body>
</html>
Вывод: в данной лабораторной работе мною были изучены нововведения HTML 5, я так же узнал об устаревших элементах, элементах которые не рекомендуется использовать и методах их замены, а также о программных средствах, предназначенных для работы с HTML 5. В практической части были приобретены начальные навыки работы с векторными изображениями в HTML 5.