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

Item • <title> или <description> должны присутствовать • <title> заголовок сообщения (статьи) </title> •

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

Enclosure Обязательные атрибуты: • url - адрес приложения, обязательно http url • length -

Atom • Atom Syndication Format — это основанный на XML язык, используемый для описания

Example Feed 2003" src="https://present5.com/presentation/328596b92371308f4b1926ef757a708d/image-6.jpg" alt="Atom Example Feed 2003" />

Структура и элементы Atom • Элемент <feed> Обязательные элементы <id> — Идентификатор фида, постоянный

Структура и элементы Atom • Элемент <feed> Рекомендуемые элементы <author> — Имя автора. Множественное

Структура и элементы Atom • Элемент <feed> Рекомендуемые элементы <link> — Адрес связанного сайта.

Структура и элементы Atom • Элемент <feed> Необязательные элементы <category> — Задает категории, к

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

Структура и элементы Atom • Элемент <feed> Необязательные элементы <rights> — Информация об авторском

Структура и элементы Atom • Элемент <entry> Обязательные элементы <id> — Уникальный и постоянный

Структура и элементы Atom • Элемент <entry> Обязательные элементы <title> — Заголовок сообщения. Не

Структура и элементы Atom • Элемент <entry> Рекоменуемые элементы <author> — Имя автора (авторов)

Структура и элементы Atom • Элемент <entry> Необязательные элементы <category> — Одна или несколько

Структура и элементы Atom • Элемент <entry> Необязательные элементы <published> — Дата и время

Структура и элементы Atom • Элемент <entry> Необязательные элементы <source> — Источник сообщения. Если

Дополнительные возможности • Модель содержания Atom представляет возможность собирать и представлять информацию в различных

Дополнительные возможности • Интернационализация Atom имеет возможность объединить в одном канале информацию на различных

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

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

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

SVG • SVG (Scalable Vector Graphics, в переводе масштабируемая векторная графика) - это язык

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

Возможности SVG встроенные развитые средства анимации, встроенные средства для создания интерактивности, а также поддержка

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

Поддержка SVG • Internet Explorer 7, Opera 8+, Mozilla • Adobe SVG Viewer или

SVG и Flash Критерий Flash SVG Открытый стандарт, спецификация - + Тип данных Двоичный

Другие векторные форматы • SVF (Simple Vector Format), CAD-системы(Auto. CAD, Archi. CAD). Нет анимации,

Другие векторные форматы • VML (Vector Markup Language), Microsoft близок по концепции и возможностям

Вставка SVG в HTML • При помощи тега <embed> Фрагмент HTML – страницы: <body

Вставка SVG в HTML • При помощи тега <object>. Фрагмент HTML - страницы: <body

Вставка SVG в HTML • При помощи тега <iframe>. Фрагмент HTML – кода страницы:

Элементы SVG • • • Прямогульник (rect) x, y width, height rx, ry fill=“…

Элементы SVG • Окружность (circle) • • cx, cy r fill=“…

Элементы SVG • Эллипс (ellipse) • • cx, cy rx, ry fill=“…

Элементы SVG • Линия (line) • x 1, y 2 • x 2, y

Элементы SVG • Ломанная (polyline) • points • fill • stroke=“…

Элементы SVG • Многоугольник (polygone) • <polygon points=

Стили в SVG • Применение атрибутов внутри определения элемента. • Применение каскадных таблиц стилей

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

Группы элементов в SVG <defs> <g id= Группы элементов в SVG

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

Свойство View. Box в SVG <svg width= Свойство View. Box в SVG

Текст в SVG • text, tspan <defs> <text id= Простой текст " src="https://present5.com/presentation/328596b92371308f4b1926ef757a708d/image-48.jpg" alt="Текст в SVG • text, tspan Простой текст " /> Текст в SVG • text, tspan Простой текст

HTML 5 • <!DOCTYPE html> • <meta http-equiv= • " src="https://present5.com/presentation/328596b92371308f4b1926ef757a708d/image-49.jpg" alt="HTML 5 • • • " /> HTML 5 • • • • •

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

Тематическая группировка содержания. • Навигация по сайту, не может содержаться внутри

. •

Задает содержание сайта.

HTML 5 • <aside> </aside> Блок для размещения рубрик. • <hgroup> </hgroup> Группирование заголовков. HTML 5 •

Блок для размещения рубрик. • Группирование заголовков. •

;

HTML 5 • <time datetime=“<дата и время>”> </time> Значение Формат Пример Год ГГГГ 2012 HTML 5 • ”> Значение Формат Пример Год ГГГГ 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 HTML 5

HTML 5 • <video src= Скачать ролик" src="https://present5.com/presentation/328596b92371308f4b1926ef757a708d/image-56.jpg" alt="HTML 5 •

HTML 5 <video poster= HTML 5

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

Формы в HTML 5 • <input list=

Формы в HTML 5 • • • <input type= Формы в HTML 5 • • •

HTML 5 • <canvas id= " src="https://present5.com/presentation/328596b92371308f4b1926ef757a708d/image-61.jpg" alt="HTML 5 • " /> HTML 5 •

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

Текст

(спойлер)

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

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