Разметка документов - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Разметка документов. Доклад-сообщение содержит 38 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

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

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

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

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

Микроразметка - подробная информация о видах разметки shema.org

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

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

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

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

Слайд 19

Описание слайда:

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

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

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

Слайд 22

Описание слайда:

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

Слайд 23

Описание слайда:

Работа с мультимедиа Аудио и видео Для работы с аудио HTML5 использует одноименный тег .

Слайд 24

Описание слайда:

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

Слайд 25

Описание слайда:

Работа с мультимедиа. Аудио и видео Для работы с видео используется одноименный элемент

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

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

Слайд 29

Описание слайда:

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

Слайд 30

Описание слайда:

Canvas

Слайд 31

Описание слайда:

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

Слайд 32

Описание слайда:

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

Слайд 33

Описание слайда:

Canvas Создание холста доступно с помощью теги Элементу canvas необходимо присваивать id, потому что в дальнейшем ообращение в JS будет происходить по id.

Слайд 34

Описание слайда:

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

Слайд 35

Описание слайда:

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);

Слайд 36

Описание слайда:

Canvas

Слайд 37

Описание слайда:

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