Веб-дизайн и интернет-программирование. Лекция № 3.

Веб-дизайн и интернет-программирование. Лекция № 3.
Веб-дизайн и интернет-программирование. Лекция № 3.

Особенности HTML5

Полезные ссылки:

  1. HTML 5. Основы клиентской разработки.
  2. Введение в HTML 5.
  3. HTMLBOOK
На страницу урока →

Особенности HTML 5

  1. Новые семантические элементы.
  2. Собственная поддержка видео и аудио.
  3. API рисования на холсте.
  4. Сокеты Веб.
  5. Автономные веб-приложения
  6. Хранилища Web.
  7. Web Workers.
  8. Геолокация.

Новые семантические элементы HTML 5

<header> 
<footer>
<nav>
<article>
<section>
<time>
<aside>
<hgroup>
<figure> и <figcaption>

Собственная поддержка видео и аудио

Контейнеры видео:


Кодеки видео
Кодеки аудио










<video src=myVideo.ogv
  width=320
  height=240
  controls
  poster=image.jpg>
</video>




Рисование на холсте


<span><canvas id="myCanvas" width="200" height="150">
"Резервный контент на случай отсутствия поддержки холста в браузере."
<span style="display:block; width:150px; height:100px; background:#00f"> </span>
</canvas>

Методы:

  • fillRect(x, y, width, height)
  • moveTo(х, у)
  • lineTo(х, у)
  • drawImage(image, dx, dy)

Пример

Автономные приложения web









Геолокация

Пример

Опубликовано: 24.02.2015 г.

комментариев 16

  1. Юлия Сергеевна Пономарева · 24.02.2015

    Необходимо ответить на вопрос и задать свой по материалу лекции. Вот первый вопрос.

    Какие элементы в HTML 5 определяют колонтитулы?

  2. Петров Валерий · 25.02.2015

    — верхний колонтитул
    — нижний колонтитул

    Особенности сокетов веб?

  3. Петров Валерий · 25.02.2015

    header — верхний колонтитул
    footer — нижний колонтитул
    __________________________________
    Особенности сокетов веб?

  4. Петров Валерий · 25.02.2015

    header — верхний колонтитул
    footer — нижний колонтитул
    __________________________________
    Особенности сокетов веб?

  5. Кононов Леонид · 25.02.2015

    Особенность сокетов Веб – позволяет открывать постоянное соединение между сервером и клиентом на определенном порте. И посылать в обоих направлениях, пока порт не будет закрыт. В этом случае нет необходимости для постоянной перезагрузки страниц, и проверке обновлений на сервере.

    Как работает тег ?

  6. Ирина Кучина · 11.03.2015

    Тег задает навигацию по сайту. Если на странице несколько блоков ссылок, то в обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов в документе. Запрещается вкладывать внутрь .

    Синтаксис
    ссылки

    Как работает тег time?

  7. Дмитрий Бекешев · 13.03.2015

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

    Что такое web хранилище?

  8. Екатерина Шатохина · 14.05.2015

    Веб хранилища представляют собой более функциональную альтернативу cookie.

    Преимущества веб хранилищ:

    Можно хранить неограниченные объемы информации;
    Информация, сохраненная в хранилищах, доступна даже без подключения к интернету;
    Данные, находящиеся в хранилище, не отсылаются при каждом запросе страниц;
    Информацию более удобно сохранять и извлекать;
    Хранилища более безопасны чем cookie.

    контейнеры видео?

  9. Минаев Алексей · 28.05.2015

    AVI (Audio Video Interleaved)
    MKV (Matroska, «Матрёшка»)
    QuickTime (расширения файлов — *.mov или *.qt)
    ASF/WMV/WMA (Advanced Stream Format/Windows Media Video)
    FLV — Adobe Flash Video
    MP4

    Кодеки видео и аудио?

  10. Кузнецов Андрей · 31.05.2015

    Кодеки видео: Theora, H.264, vp8
    Кодеки аудио: mp3, ACC, vorbis
    Автономные приложения web?

  11. Турсунбой Хибатуллоев · 11.06.2015

    Автономные приложения Web.

    AppCache demo.manifest
    CACHE MANIFEST
    Style.css
    Script.js
    index.html

    Назовите Методы ?

  12. Турсунбой Хибатуллоев · 11.06.2015

    Автономные приложения Web.

    AppCache
    demo.manifest
    CACHE MANIFEST
    Style.css
    Script.js
    index.html

    Назовите Методы ?

  13. Турсунбой Хибатуллоев · 11.06.2015

    Автономные приложения Web.

    AppCache
    demo.manifest
    CACHE MANIFEST
    Style.css
    Script.js
    index.html
    ()

    Назовите Методы ?

  14. Семичкин Максим · 23.06.2015

    Я привёл 2 метода:
    — pushState(state, title, url). Этот метод создает новую запись в истории сеанса. Атрибут state объявляет значение состояния записи. Он используется для идентификации записи впоследствии и может содержать строку или JSON-объект. Атрибут title представляет собой заголовок записи, а атрибут url — это URL-адрес создаваемой записи (он заменит текущий URL-адрес на панели Location (Местоположение));
    — replaceState(state, title, url). Этот метод работает аналогично pushState(), но не создает новую запись. Вместо этого он заменяет информацию в текущей записи.

    Возможности HTML5?

  15. Александр Данилко · 23.06.2015

    Поддержка видео и аудио (элементы video и audio);
    Возможности рисования на веб-страницах произвольных объектов (элемент canvas);
    Улучшение форм (новые значения type для и множество новых элементов и атрибутов);
    Добавление семантических тэгов, позволяющих сделать веб-страницы более понятными для поисковых систем, браузеров и других программ и устройств читающих веб-страницы (элементы footer, header, nav, article);
    DOM хранилища — более функциональная альтернатива cookie.