🗊Презентация Разметка документов

Разметка документов

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

Plain Old Semantic HTML (POSH) Семантическая разметка требует избегать таких элементов, как font и table.

Устаревшие элементы

Выбор синтаксического стиля кода Необходимо учитывать верхний регистр в названии тегов Необязательны кавычки для атрибутов Необязательны значения для атрибутов Необязательны закрывающие теги для пустых элементов Однако, это не обязательно!

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

Микроразметка Для того, чтобы добавить данные микроразметки используют атрибуты itemscope и itemprop.

Микроразметка Itemscope применяется для определения области действий микроданных, т.е. набора – имя/значение. Значение itemprop устанавливает имена свойств и связанную с ним информацию. Имеем следующие пары имя/значение: Изобретатель/Тим Бернерс-Ли Изобретение/Всемирная паутина

Микроразметка При использовании shema.org необходимо не только указать дополнительный атрибут itemtype, но еще и назначать имена исключительно в соответствии с лексикой Shema.org

Микроразметка http://ruschema.org/docs/schemas - подробная информация о видах разметки shema.org

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

Доступность Работоспособность — гарантирует, что посетители смогут взаимодействовать между собой и пользоваться сайтом через навигацию, контент, формы и динамический контроль.

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

Доступность Надежность — определяет разметку страницы и программирует работу с различными пользовательскими агентами и вспомогательными технологиями.

Работа с мультимедиа

Работа с мультимедиа. Графика Впервые изображение в html-файлах стало возможно добавлять в 1997 году. Современные браузеры поддерживают следующие форматы растровых изображений: jpg, gif, bmp, tiff, png, psd

Работа с мультимедиа. Графика Также браузеры поддерживают векторную графику. Такие форматы могут отображаться: swf, cdr, max, ai

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

Работа с мультимедиа. Графика. Для добавления изображения на страницу используется тег <img>, который содержит обязательный атрибут src, в котором указан путь к файлу. <img src=“1.jpg”>

Работа с мультимедиа. Графика К числу необязательных атрибутов <img> относятся: align – задает тип выравнивания изображения; alt – задает текст, отображаемый в случае, если картинка не загрузилась; border – определяет толщину рамки вокруг изображения; height – задает высоту изображения; hspace – задает величину горизонтального отступа от изображения до ближайшего контента; ismap – определяет, является ли изображение картой (т.е. к различным частям изображения "привязаны" разные ссылки); vspace – задает величину вертикального отступа от изображения до ближайшего контента; width – задает ширину изображения; usemap – определяет ссылку на <map>, содержащий координаты клиентской карты - изображения.

Работа с мультимедиа. Аудио и видео HTML5 не используют никаких дополнительных инстурментов для воспроизведения аудио или видео. Это повышает безопасность, увеличивает интеграцию, позволяет задействовать меньше аппаратных ресурсов.

Работа с мультимедиа. Аудио и видео В качестве основных недостатков – поддержка далеко не всех кодеков.

Работа с мультимедиа Аудио и видео Для работы с аудио HTML5 использует одноименный тег <audio>. <audio src=“1.mp3”></audio>

Работа с мультимедиа. Аудио и видео Тег <audio> содержит следующие атрибуты: autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы; controls – добавляет панель управления к аудио; loop – воспроизведение аудио повторяется с начала, после его завершения; preload – используется для загрузки файла вместе с загрузкой самой страницы, игнорируется, если использован autoplay; src – задает путь к файлу для воспроизведения.

Работа с мультимедиа. Аудио и видео Для работы с видео используется одноименный элемент <video> <video src=“2.mp4”></video>

Работа с мультимедиа. Аудио и видео Атрибуты тега <video>: autoplay – при его добавлении, воспроизведение файла начинается сразу же после загрузки страницы; controls – добавляет панель управления к видео; height – задает высоту области, для воспроизведения видео. loop – воспроизведение аудио повторяется с начала, после его завершения; poster – указывает путь к изображению, пока видео не воспроизводится, или недоступно; preload – используется для загрузки видеофайла вместе с загрузкой самой страницы, игнорируется, если использован autoplay; src – задает путь к файлу для воспроизведения. width – задает ширину области, для воспроизведения видео.

Работа с мультимедиа. Аудио и видео Спецификацией HTML5 не поддерживаются следующие возможности элементов <audio> и <video>: Воспроизведение потокового мультимедиа. В настоящий момент есть только приложения, предусматривающие поддержку воспроизведения потоковой мультимедиа. Потоковое воспроизведение – это непрерывное воспроизведение.

Работа с мультимедиа. Аудио и видео Ограничения кроссдоменного разделения ресурсов (CORS). Технология разделения ресурсов предусматривает предоставление веб-странице доступ к ресурсам другого домена.

Работа с мультимедиа. Аудио и видео Невозможность воспроизведения из сценариев полноэкранного видео, из-за соображений обеспечения безопасности. Как правило, это ограничение компенсируется предоставлениям дополнительных элементов управления браузера. Отсутствие спецификации доступности элементов <audio> и <video> для людей с ограниченными возможностями. Создается спецификация WebSTR, которая должна регламентировать поддержку субтитров формата STR.

Canvas

Canvas Благодаря спецификации языка HTML5 появился элемент canavs, благодаря которому появляется мощный инструментарий для рисования с использованием JavScript. Для каждого элемента canvas можно использовать "контекст" (представьте страницу в альбоме для рисования), в который можно выполнять команды JavaScript для рисования. Браузеры могут реализовать несколько контекстов холстов и различные API предоставляют функции для рисования.

Canvas В основном реализация в современных браузерах производится в 2D-функциях холста.

Canvas Создание холста доступно с помощью теги <canvas> <canvas id="myCanvas" width="200" height="150"> </canvas> Элементу canvas необходимо присваивать id, потому что в дальнейшем ообращение в JS будет происходить по id.

Canvas Создан холст для рисования, теперь необходимо начать рисование с помощью JS сценариев.

Canvas context.fillStyle = '#00f'; // синий context.strokeStyle = '#f00'; // красный context.lineWidth = 4; // Рисуем несколько прямоугольников. context.fillRect (0, 0, 150, 50); context.strokeRect(0, 60, 150, 50); context.clearRect (30, 25, 90, 60); context.strokeRect(30, 25, 90, 60);

Canvas

Canvas Метод drawImage позволяет вставлять другие изображения (элементы img и canvas ) в контекст холста. В браузере Opera можно также рисовать изображения SVG внутри холста. Это достаточно сложный метод, который получает три, пять или девять аргументов: Три аргумента: Базовый вариант drawImage использует один аргумент для указания на включаемое изображение, и два для определения координат места назначения внутри контекста холста. Пять аргументов: Второй вариант использования drawImage включает приведенные выше три аргумента, плюс два для определения ширины и высоты вставляемого изображения (если вы захотите изменить его размер). Девять аргументов: Самый развитый вариант использования drawImage включает кроме пяти аргументов два значения для координат внутри исходного изображения, и два значения для ширины и высоты внутри исходного изображения. Эти значения позволяют динамически обрезать исходное изображение перед вставкой в контекст холста.

Canvas