WEB-программирование Лекция 4 RSS ATOM SVG HTML 5 CSS 3 Item

WEB-программирование Лекция 4 RSS/ATOM/SVG/HTML 5/CSS 3

Item • <title> или <description> должны присутствовать • <title> заголовок сообщения (статьи) </title> • <link> URL сообщения (статьи) </link> • <description> краткое описание статьи </description> • <author> email автора статьи </author> • <category> категории сообщения </category> • <comments> url страницы с комментариями </comments> • <enclosure> описывает медиа объект </enclosure> • <guid> идентификатор сообщения <guid> Если атрибут is. Perma. Link имеет значение true, то идентификатор рассматривается как постоянная ссылка

Item • <pub. Date> указывает, на дату публикации сообщения. </pub. Date> • <source> канал RSS, из которого получено сообщение </source>

Enclosure Обязательные атрибуты: • url - адрес приложения, обязательно http url • length - размер объекта в байтах • type - тип MIME объекта <enclosure url="http: //www. site. com/mp 3/yes. mp 3" length="12216320" type="audio/mpeg" />

Atom • Atom Syndication Format — это основанный на XML язык, используемый для описания каналов новостей; • Atom Publishing Protocol (Atom. Pub, APP) — это простой, основанный на HTTP протокол создания и обновления веб -ресурсов.

Atom <feed xmlns="http: //www. w 3. org/2005/Atom"> <title>Example Feed</title> <link href="http: //example. org/"/> <updated>2003 -12 -13 T 18: 30: 02 Z</updated> <author> <name>John Doe</name> </author> <id>urn: uuid: 60 a 76 c 80 -d 399 -11 d 9 -b 93 C-0003939 e 0 af 6</id> <entry> <title>Atom-Powered Robots Run Amok</title> <link href="http: //example. org/2003/12/13/atom 03"/> <id>urn: uuid: 1225 c 695 -cfb 8 -4 ebb-aaaa-80 da 344 efa 6 a</id> <updated>2003 -12 -13 T 18: 30: 02 Z</updated> <summary>Some text</summary> </entry> </feed>

Структура и элементы Atom • Элемент <feed> Обязательные элементы <id> — Идентификатор фида, постоянный URI. <title> — Название канала. Не может быть пустым. <updated> — Дата последнего обновления в формате RFC 3339. <updated>2003 -12 -13 T 18: 30: 02 Z</updated>

Структура и элементы Atom • Элемент <feed> Рекомендуемые элементы <author> — Имя автора. Множественное авторство может быть указано в элементах entry <author> <name>Serj</name> <email>Serj@example. com</email> <uri>http: //example. com/~johndoe</uri> </author>

Структура и элементы Atom • Элемент <feed> Рекомендуемые элементы <link> — Адрес связанного сайта. Тип связи определяется в атрибуте rel. <link rel="self" href="http: //example. org/" />

Структура и элементы Atom • Элемент <feed> Необязательные элементы <category> — Задает категории, к которым относится канал. Элемент feed может включать несколько элементов category. <category term="networking"/> <generator> — Название программы, с помощью которой собран канал. Атрибуты uri и version необязательные. <generator uri="/myblog. php“ version="1. 0"> Example Toolkit </generator>

Структура и элементы Atom • Элемент <feed> Необязательные элементы <icon> — Маленькое изображение, пиктограмма канала. <icon>/icon. jpg</icon> <logo> — Большое изображение, логотип канала. <logo>/logo. jpg</logo>

Структура и элементы Atom • Элемент <feed> Необязательные элементы <rights> — Информация об авторском и смежных правах. <rights> © 2005 John Doe </rights> <subtitle> — Человеко-читаемое описание или подзаголовок канала. <subtitle>all your examples are belong to us</subtitle>

Структура и элементы Atom • Элемент <entry> Обязательные элементы <id> — Уникальный и постоянный идентификатор сообщения. Два сообщения могут иметь одинаковый идентификатор, если они представляют одну и ту же новость, но в разное время. <id>http: //example. com/blog/1234</id>

Структура и элементы Atom • Элемент <entry> Обязательные элементы <title> — Заголовок сообщения. Не может быть пустым. <title>Atom-Powered Robots Run Amok</title> <updated> — Дата последней модификации сообщения. <updated>2003 -12 -13 T 18: 30: 02 -05: 00</updated>

Структура и элементы Atom • Элемент <entry> Рекоменуемые элементы <author> — Имя автора (авторов) сообщения. <author> <name>John Doe</name> </author> <content> — Текст сообщения или ссылка на полный текст. <content>complete story here</content> <link> — Страница, связанная с текстом сообщения. <link rel="alternate" href="/blog/1234"/>

Структура и элементы Atom • Элемент <entry> Необязательные элементы <category> — Одна или несколько категорий, к которым относится сообщение. <category term="technology"/> <contributor> — Имя соавтора новости. Может быть несколько элементов contributor <contributor> <name>Jane Doe</name></contributor>

Структура и элементы Atom • Элемент <entry> Необязательные элементы <published> — Дата и время создания сообщения. <published>2003 -12 -13 T 09: 17: 51 -08: 00</published>

Структура и элементы Atom • Элемент <entry> Необязательные элементы <source> — Источник сообщения. Если entry копируется из одного канала в другой, то все дочерние элементы entry копируются также. <source> <id>http: //example. org/</id> <title>Fourty-Two</title> <updated>2003 -12 -13 T 18: 30: 02 Z</updated> <rights>© 2005 Example, Inc. </rights> </source>

Дополнительные возможности • Модель содержания Atom представляет возможность собирать и представлять информацию в различных форматах, таких как обчный текст, HTML, XML, двоичные данные в формате Base 64 и ссылки на внешнее содержание в документов (например, . pdf), видеофайлов, аудиопотоков и еще ряда других. • Представление даты и времени (RFC 3339)

Дополнительные возможности • Интернационализация Atom имеет возможность объединить в одном канале информацию на различных языках. Это обеспечивается стандартным атрибутом xml: lang • Модульность Спецификация Atom изначально разрабатывалась как открытая и модульная. Это позволяет расширять формат путем подключения внешних модулей, с одной стороны, а с другой — экспортировать возможности Atom во внешние приложения и другие форматы.

Дополнительные возможности • Публикация информации Atom Publishing Protocol (Atom. Pub) — протокол прикладного уровня для публикации и редактирования веб-ресурсов. Он базируется на представлении данных в формате Atom, в качестве транспорта использует протокол HTTP. Atom. Pub может использоваться в rich-клиентах (например, в системах управления контентом) или самостоятельных приложениях для управления информацией на веб-сайтах.

Сравнение RSS и Atom • • Распространенность Авторские права Публикация информации (протоколы) Обязательное содержание Типы внутреннего содержания Полное или частичное содержание Сбор информации и агрегация

Сравнение RSS и Atom • • Расширяемость / пространства имен Адресация (base) Теги интернационализации Цифровая подпись и шифрование

SVG • SVG (Scalable Vector Graphics, в переводе масштабируемая векторная графика) - это язык для описания двухмерной графики в формате XML. векторную графику (линии, окружности, кривые) текст (с форматированием, заданием стилей и эффектов) • растровые изображения (внедряемые в SVG– документ). • •

Возможности SVG произвольные заливки, штриховки, градиенты, разнообразные стили линий возможность использования кривых Безье поддержка прозрачности возможность применения фильтров (размытие, попиксельное смешивание, наложение) • поддержка Unicode • расположение текстовых строк вдоль произвольных кривых, • • •

Возможности SVG встроенные развитые средства анимации, встроенные средства для создания интерактивности, а также поддержка Java. Script и DOM, • поддержка каскадных таблиц стилей (CSS) • •

Преимущества SVG • SVG–документы могут быть отображены на самых различных устройствах • SVG–документы представляются в векторном формате (масштабирование без потери качества) • SVG–графика может быть создана "на лету" при помощи любого языка программирования.

Поддержка SVG • Internet Explorer 7, Opera 8+, Mozilla • Adobe SVG Viewer или Corel SVG Viewer • Adobe Acrobat Reader 6+ • Для мобильных устройств, телефонов, PDA: SVG Tiny (SVGT) и SVG Basic (SVGB) • Macromedia Flash Lite 1. 1+

SVG и Flash Критерий Flash SVG Открытый стандарт, спецификация - + Тип данных Двоичный Текстовый Интерактивность. + + Сжатие Есть, zlib Есть, gzip Поддержка браузерами + - IE 6 Индексация поисковыми системами. +/- + Поддержка графических фильтров +, начиная с v 8+ + Динамическая поддержка библиотек + кода (PHP, XSLT, JSP) + Поддержка CSS, XSL, XPath + +/-

Другие векторные форматы • SVF (Simple Vector Format), CAD-системы(Auto. CAD, Archi. CAD). Нет анимации, интерактивности. • DWF (Drawing Web Format), Auto. Desk, нет анимации. Для воспроизведения графики плагины Auto. Desk WHIP 4 (он же. Volo View) • PGML (Precision Graphics Markup Language), Adobe, для Post. Script и PDF. • Web. CGM (Web Computer Graphics Metafile, или CGM) является стандартом ISO бинарного графического формата с древовидной структурой. Применяется в основном в технической промышленности.

Другие векторные форматы • VML (Vector Markup Language), Microsoft близок по концепции и возможностям к SVG, но был отвергнут в его пользу. Используется в MS Office. • PDF (Portable Document Format), Adobe с использованием ряда возможностей Post. Script. • VRML (Virtual Reality Modeling Language) предназначен для описания трехмерных изображений и оперирует объектами, описывающими геометрические фигуры и их расположение в пространстве. • HGML (Hyper Graphics Markup Language) Был представлен в июне 1998 в качестве компактного формата для веб-графики. Не был реализован. • Draw. ML (Draw Markup Language) двухмерный формат векторной графики предназначенной для описания технической графики.

Шаблон SVG-документа <? xml version="1. 0" encoding="utf-8"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 1. 1//EN « "http: //www. w 3. org/Graphics/SVG/1. 1/DTD/svg 11. dtd"> <svg width="200" height="100" xmlns="http: //www. w 3. org/2000/svg" version="1. 1"> <rect x="50" y="40" width="100" height="30" fill="blue"/> </svg>

Вставка SVG в HTML • При помощи тега <embed> Фрагмент HTML – страницы: <body bgcolor = "#6699 FF"> <embed src="butterfly. svg" width="500" height="300" type="image/svg+xml" name="mybutterfly" pluginspage=“…" wmode="transparent"> </body>

Вставка SVG в HTML • При помощи тега <object>. Фрагмент HTML - страницы: <body bgcolor = "#6699 FF"> <object type="image/svg+xml" name="mybutterfly" data="butterfly. svg" width="500" height="300"> Вам необходимо обновить браузер </object> </body>

Вставка SVG в HTML • При помощи тега <iframe>. Фрагмент HTML – кода страницы: <body bgcolor = "#6699 FF"> <iframe src="butterfly. svg" width="500" height="300" name="mybutterfly" frameborder="0" marginwidth="0" marginheight="0"> Вам необходимо обновить браузер </iframe> </body>

Элементы SVG • • • Прямогульник (rect) x, y width, height rx, ry fill=“…" stroke-width="2" • <rect x="50" y="40" width="100" height="30" fill="yellow" stroke="green" stroke-width="5" rx="10" ry="10"/>

Элементы SVG • Окружность (circle) • • cx, cy r fill=“…" stroke-width="2" • <circle cx="100" cy="50" r="40" fill=“red" stroke=“blue" stroke-width="4"/>

Элементы SVG • Эллипс (ellipse) • • cx, cy rx, ry fill=“…" stroke-width="2" • <ellipse cx="100" cy="50" rx="60" ry="40" fill=“red" stroke=“green" stroke-width="4"/>

Элементы SVG • Линия (line) • x 1, y 2 • x 2, y 2 • stroke=“…" stroke-width="2" • <line x 1="20" y 1="10" x 2="190" y 2="90" stroke="black" stroke-width="0. 1" />

Элементы SVG • Ломанная (polyline) • points • fill • stroke=“…" stroke-width="2" • <polyline points="20, 10 180, 10 20, 90 180, 90" stroke="red" stroke-width="3" fill="lightpink" />

Элементы SVG • Многоугольник (polygone) • <polygon points="20, 10 180, 10 20, 90 180, 90" stroke="red" stroke-width="3" fill="lightpink"/>

Стили в SVG • Применение атрибутов внутри определения элемента. • Применение каскадных таблиц стилей (CSS, Cascading Style Sheets) внутри определения элемента. • Применение каскадных таблиц стилей внутри SVG документа. • Применение внешних каскадных таблиц стилей. <? xml-stylesheet href="Style. css" type="text/css"? > «Вертикальный» порядок элементов.

Стили в SVG <svg width="200" height="100" > <defs> <style type="text/css"> <![CDATA[ rect { fill: red; stroke: green; stroke-width: 2 } ]]> </style> </defs> <rect x="50" y="40" width="100" height="30"/> </svg>

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

Группы элементов в SVG <defs> <g id="my. Group" style="stroke: blue; stroke-width: 2"> <rect x="10" y="10" width="180" height="80" /> <polygon points="20, 20 180, 20 20, 90" /> <circle cx="90" cy="60" r="25" /> </g> </defs> <use x="10" y="10" width="180" height="80" xlink: href="#my. Group" /> </svg>

Основные типы SVG Тип данных Описание <integer> Целые числа ([0 -9]*) <number> Вещественные числа <length> <number> + em, ex, px, %; + in, cm, mm, pt, pc; по умолчанию приняты px. <coordinate> расстояние от начала координат <angle> Угол (deg, rad) <color> Цвет, имя или RGB <paint> Рисование, возможные значения: fill, stroke <transform-list> Список преобразований (например: scale(2) translate(100, 100)). <uri> Уникальный идентификатор ресурса <time> Время, ms или s. > 0

Свойство View. Box в SVG <svg width="200" height="100" view. Box="0 0 200 100"> <rect x="50" y="40" width="100" height="30" fill="skyblue" stroke="red" stroke-width="2"/> </svg>

Текст в SVG • text, tspan <defs> <text id="my. Text" > Простой текст </text> </defs> <text> <tref xlink: href="#my. Text" x="50" y="50"></tref> </text>

HTML 5 • <!DOCTYPE html> • <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> • <meta charset="utf-8" /> • • <link rel="stylesheet" …/> <link rel="alternate" …/>

HTML 5 • <section cite=“…”> </section> Тематическая группировка содержания. • <nav></nav> Навигация по сайту, не может содержаться внутри <address>. • <article></article> Задает содержание сайта.

HTML 5 • <aside> </aside> Блок для размещения рубрик. • <hgroup> </hgroup> Группирование заголовков. • <header></header> ; <footer></footet> «Шапка» и «Подвал» сайта.

HTML 5 • <time datetime=“<дата и время>”> </time> Значение Формат Пример Год ГГГГ 2012 Месяц и год ГГГГ-ММ 2012 -12 Полная дата ГГГГ-ММ-ДД 2012 -12 -23 Дата и время с минутами ГГГГ-ММ-ДДTчч: мм 2004 -07 -24 T 18: 18 Дата и время с секундами ГГГГ-ММ-ДДTчч: мм: сс 2004 -07 -24 T 18: 18 Дата и время с часовым поясом ГГГГ-ММ-ДДTчч: мм: сс±чч: мм 2004 -07 -24 T 18: 18+04: 00

HTML 5 • <mark> </mark> Выделение текста. • <menu></menu> Задает список меню

HTML 5

HTML 5 • <video src="video. ogv" poster="poster. jpg" width="320" height="240"> <a href="video. ogv">Скачать ролик</a> </video> • <audio src="music. oga" controls> <a href="music. oga">Скачать песню</a> </audio>

HTML 5 <video poster="poster. jpg"> <source src="video. 3 gp" type="video/3 gpp“> <source src="video. ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video. mp 4" type="video/mp 4"> </video> <audio> <source src="music. oga" type="audio/ogg"> <source src="music. mp 3" type="audio/mpeg"> </audio>

Формы в HTML 5 • Атрибут autofocus • Атрибут required • Атрибут placeholder (текст input’a) • <keygen></keygen> challenge - определяет, должно ли значение изменяться при отправке формы. form - идентификатор формы к которой применяется шифрование. keytype - задает алгоритм шифрования ключа.

Формы в HTML 5 • <input list="идентификатор" /> <datalist id="идентификатор"> <option value="Текст1"> <option value="Текст2"> </datalist> Создает список вариантов, которые можно выбирать при наборе в текстовом поле.

Формы в HTML 5 • • • <input type="color"> <input type="email"> <input type="number"> <input type="search"> <input type="tel"> <input type="url"> <input type="date"> <input type="time"> <input type="datetime">

HTML 5 • <canvas id="идентификатор"> </canvas>

HTML 5 • <details> <summary>Текст</summary> </details>(спойлер)

HTML 5 • <progress value="<число>" max="<число>"> Текст </progress> </ Отображения прогресса завершенности задачи. • <wbr> указывает браузеру место, где допускается делать перенос строки в тексте

CSS 3 border-radius: <радиус>{1, 4} [ / <радиус>{1, 4}] box-shadow: 0 0 5 px black; box-shadow: 0 0 10 px rgba(0, 0, 0, 0. 5); -moz-box-shadow: 0 0 10 px rgba(0, 0, 0, 0. 5); -webkit-box-shadow: 0 0 10 px rgba(0, 0, 0, 0. 5); opacity: значение resize: none | both | horizontal | vertical | inherit