Давайте порисуем

Марк Пилгрим

Оригинал: http://diveintohtml5.info/canvas.html

Перевод: Влад Мержевич

В HTML5 определен элемент <canvas> как «растровый холст, который может быть использован для отображения диаграмм, игровой графики или изображений на лету». Холст это прямоугольная область на вашей странице, где с помощью JavaScript можно рисовать что пожелаете.

Локальное хранилище

Марк Пилгрим

Оригинал: http://diveintohtml5.info/storage.html

Перевод: Влад Мержевич

Постоянное локальное хранилище это одна из областей, где клиентские приложения имеют преимущества перед серверными. Для приложений, таких как операционная система, обеспечивается уровень абстракции для хранения и извлечения данных вроде настроек или статуса выполнения. Эти значения могут быть сохранены в реестре, INI-файлах, XML-файлах или в другом месте в зависимости от принципов платформы. Если ваше клиентское приложение нуждается в локальном хранилище больше чем просто пара ключ/значение, вы можете вставить свою собственную базу данных, придумать свой формат файлов или любое количество других решений.

Вы здесь

Марк Пилгрим

Оригинал: http://diveintohtml5.info/geolocation.html

Перевод: Влад Мержевич

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

Видео на сайте

Марк Пилгрим

Оригинал: http://diveintohtml5.info/video.html

Перевод: Влад Мержевич

Любой, кто посещал YouTube.com за последние четыре года знает, что можно вставить видео на веб-страницу. До HTML5 не существовало стандартного способа сделать это, фактически, любое видео, что вы видели в Интернете, было добавлено через сторонние плагины вроде QuickTime, RealPlayer или Flash (на YouTube используется именно он). Эти плагины достаточно хорошо интегрированы с браузером, поэтому вы могли даже не знать, что их используете. Но это до тех пор, пока не попытаетесь посмотреть видео на платформе без поддержки плагина.

HTML5 определяет стандартный способ вставки видео на веб-страницу с помощью элемента <video>. Поддержка <video> все еще развивается и это вежливый способ сказать, что он пока не работает, по крайней мере, работает не везде. Но не отчаиваетесь! Есть альтернативные способы добавления, причем в изобилии.

Понятие потока

В HTML формирование элементов на странице происходит сверху вниз согласно схеме документа. Слой, размещенный в самом верху кода, отобразится раньше слоя, который расположен в коде ниже.  Такая логика позволяет легко прогнозировать результат вывода элементов и управлять им. Порядок вывода объектов на странице и называется «потоком». При этом существует несколько возможностей «вырвать» элемент из потока и придать ему почти мифические свойства. Раз он не существует в потоке, то в коде его можно описать где угодно, а также выводить в заданное место окна.

Что всё это значит?

Марк Пилгрим

Оригинал: http://diveintohtml5.info/semantics.html

Перевод: Влад Мержевич

В этой главе мы возьмем веб-страницу и, не делая с ней ничего плохого, улучшим ее. Местами она станет короче, местами длиннее, но она станет семантической. Возрадуемся!

Вот пример страницы. Откройте ее в новой вкладке и не возвращайтесь, пока не посмотрите ее исходный код по меньшей мере один раз.

Добавить в избранное

Одно время на сайтах была популярна ссылка «Добавить сайт в избранное», при нажатии на которую адрес сайта заносился в закладки браузера. Впрочем, почему была? Периодически на сайтах подобная ссылка встречается до сих пор. Беда в том, что используемый для этой цели скрипт не работает во многих браузерах, поэтому его ценность близка к нулю. В HTML5 расширились возможности атрибута rel тега <a> и теперь с его помощью можно легко добавлять в избранное любые сайты и отдельные страницы.

XAMPP

Влад Мержевич

XAMPP

http://www.apachefriends.org/en/xampp.html

Включает в себя: Apache, MySQL, PHP, phpMyAdmin, Perl, FileZilla FTP Server, Mercury Mail Transport System.

Русская версия: нет.

Проверка технологий HTML5

Марк Пилгрим

Когда ваш браузер отображает веб-страницу, он конструирует объектную модель документа (Document Object Model, DOM) — набор объектов, представленных HTML-элементами на странице. Каждый элемент — каждый <p>, каждый <div> и каждый <span> — показан в DOM самостоятельным объектом (есть также глобальные объекты, вроде window или element, но они слишком специфичны).

Ко всем DOM-объектам можно применить основные свойства, но некоторые объекты имеют больше свойств, чем другие. В браузерах, поддерживающих возможности HTML5, отдельные объекты обладают уникальными свойствами. Заглядывание в DOM подскажет вам, какие возможности поддерживаются.

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

Пять вещей, которые надо знать об HTML5

Марк Пилгрим

Оригинал: http://diveintohtml5.info/introduction.html

Перевод: Влад Мержевич

1. Это не одна большая вещь

 Вы можете спросить: «Как я могу использовать HTML5, если старые браузеры его не поддерживают?». На самом деле этот вопрос ошибочен. HTML5 не одна большая вещь, это набор разных возможностей. Вы не можете написать «поддерживается HTML5», потому что это противоречит здравому смыслу, но можете определить поддержку некоторых технологий HTML 5, таких как рисование, видео и геолокация.

Вы можете думать об HTML как о тегах и угловых скобках. Это конечно важная часть, но не вся. Спецификация HTML5 также устанавливает, как эти угловые скобки взаимодействуют с JavaScript посредством объектной модели документа (Document Object Model, DOM). HTML5 не просто определяет тег <video>, он также сообщает DOM обо всех видео-объектах. Вы можете использовать интерфейс прикладного программирования (API) для поддержки разных видеоформатов, проигрывания ролика, его остановки, отключения звука, отслеживания загрузки файла и многого другого построенного на взаимодействии пользователя и тега <video>.