HTML5 и CSS3 — наступает время пользоваться

Прогресс на лицо. Веб-программисты и верстальщики  семимильными шагами бегут на встречу новым браузерам с поддержкой современных стандартов — HTML5 и CSS3. Много нового и удобного предлагают они.

Веб-браузер + HTML-страница + CSS + JavaScript + графические файлы + видео = всё что вам нужно, чтобы сделать клиентскую часть веб-сайта красивой, стильной интерактивной и удобной, до краёв полной информацией. Уже не осталось таких задач где-бы ещё потребовалось подключать флеш или другие плагины. Теперь у нас есть и полная поддержка мультимедиа, локальные хранилища данных, поддержка автономных приложений, встроенный API для 2D рисования и т.д. Многие интерактивные вещи реализованы на уровне CSS, такие как: перетаскивание и подравнивание строк и т.д.

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

Проверим, что имеем

Таки надо хоть что-то знать. Если вы ещё не видели голый HTML, CSS и JavaScript, то этот тьюториал пока не для вас. Однако вы можете взяться за него, только при условии, что вас не пугают такие слова как: тег, атрибут, селектор, инструкция или операция. Если после того, что вы успели прочитать у вас волосы встали дыбом, лицо исказила гримаса ужаса, то отвернитесь от “ТВ3” — хватит смотреть триллер, сконцентрируйтесь на статье. 🙂

Вот перечень того, что вам нужно знать.
HTML: тег (элемент HTML), атрибут, HTML-разметка, структура веб-страницы;
CSS: селекторы (идентификаторы, классы), параметры, добавление CSS-кода в веб-страницы;
JavaScript (JS): переменная, функция, условие, цикл, добавление JS-кода в веб-страницы.

Это нам понадобится

Обратите внимание, каким браузером вы пользуетесь. Это должен быть современный браузер. Лучше, если он был рождён в 2010 году, что-нибудь из этого списка:

  • Mozilla Firefox (версии 3.6 +)
  • Apple Safari (версии 5.0 +)
  • Opera (версия 11.0 +)
  • Google Chrome (версия 9.0 +)

Чем младше, тем лучше, так-как количество поддерживаемых пунктов из стандарта растёт с каждой новой версией браузера. Код из этого тьюториала  будет работать во всех перечисленных браузерах. Если будет что-то не так — мы вам скажем.

Кроме браузера вам понадобится удобный редактор, хорошо если он будет с удобной подсказкой по разметке и атрибутам. Есть очень удобный редактор, и не просто редактор а IDE — NetBeans.

Для экспериментов с кодом из этого тьюториала, вам не потребуется размещать файлы на хостинге или устанавливать себе локально веб-сервер. Достаточно будет просто выделить папку для файлов проекта. И затем просматривать результат их работы в браузере.

Что новенького дал HTML5

Семантика, как много в этом слове для сердца web’ова сплелось. Хаос веб-документов когда-то уже надо привести в порядок. Сколько можно плодить бессмысленные страницы блуждающие по просторам интернета? И вот, HTML5 даёт нам инструмент для таких манипуляций, специальные теги которыми можно обозначить части вашей веб-страницы: хедер, футер, панели и т.д.

Кроме этого, вам можно обозначить видео и аудио контент на вашей странице, и это не просто обозначение, это даст вам возможность проигрывания в плеере браузера!
Хотите порисовать на странице? Пожалуйста! Вот вам канва и рисуйте что угодно, правда рисунок будет двухмерный, но это уже большой плюс — не придётся использовать дополнительные плагины. Скажу по секрету, есть разработки браузеров бета версий, где включается возможность рисования трёхмерных картин!

Кроме того, за счёт появления локальных хранилищ данных вы можете использовать веб-приложения и с отключенным интернетом!

Элементы, несущие смысловую нагрузку

Теперь вы можете сказать браузеру пользователя не только “вот тело моего документа”, но ещё — “это моё меню”, “это хедер страницы” и он вас поймёт. Вы конечно можете продолжить использование элементов <div> с идентификаторами для обозначения разделов документа, но это теперь тоже самое как на пальцах объяснять тайскому официанту, что вы хотите блины, а не жаренных кузнечиков. Уж лучше посмотрите как по-тайски блины, а в нашем случае, для хедера, уж извольте использовать тег <header>.

Мы приведём здесь список новых тегов, которые появились в HTML5, позволяющих дать смысловую нагрузку всем частям веб-страницы.

<section>
Данный элемент нужен для обозначения законченной тематической части документа или приложения, так, например, это может быть глава или раздел статьи или учебника. Этот элемент обычно имеет заголовок, хотя и не обязательно. Так, часть тьюториала, которую вы сейчас читаете “Элементы, несущие смысловую нагрузку” можно заключить в теги <section>. Этот элемент не используется для стилизации.

<article>
Это самостоятельный и самодостаточный элемент веб-страницы. Он может быть представлен в виде новости, сообщения в блоге или комментария. Он может быть вложен в другой такой же элемент. Например, запись в блоге это <article>, в которую можно вложить коммент, в свою очередь, являющийся <article>. Информация об авторе записи блога не распространяется на коммент. Со стилизацией тоже не связан.

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

<nav>
Судя по названию — навигация. Прально, используйте этот тег для обозначения всевозможных меню: главных или внутристраничных. Однако, не нужно увлекаться, не вздумайте обозначать этими тегами обычные якоря в контенте. Кроме того, если у вас уже есть на странице тег <footer> с небольшим количеством ссылок, то их не нужно оборачивать в <nav>. И тут у вас возникает вопрос: “Как же мне отличить те меню, которые нужно оборачивать и те, которые не нужно?”. И вот тут вы должны себе дать отчёт — что главнее? То что главнее в данном контексте, то и оборачивайте в <nav>.

<hgroup>
Если у вас на странице встретятся подряд несколько заголовков разного уровня, то вы их можете обернуть в этот тег. Но это не главное, в результате такого оборачивания вы приписываете всему тексту внутри группы уровень значимости, который равен самому главному заголовку. Например, если у вас на сайте есть страница с заголовком <h1> “Лампы” и подзаголовком <h2> “Настольные лампы”, то оба эти заголовка нужно поместить в тег <hgroup>, а текст, который окажется внутри этой группы станет по значимости равен заголовку первого уровня.

<header>
Это как раз то, что вы подумали — заголовок. Однако, не только для всей страницы, он может также использоваться для секции <section> и статьи <article>. Размещайте там вводные данные или меню, заголовки h1-h6 или их группы hgroup.

<footer>
Противоположен элементу <header>. Он завершает некоторую секцию документа. Обычно содержит информацию о том, кто написал эту часть документа, ссылки на связанные документы, может содержать элемент <address> с контактной информацией, и т.д.

<address>
Используется для указания контактной информации для статьи или тела документа, которые являются непосредственными родителями данного элемента.
В примере веб-сайта, который будет в конце нашего тьюториала, мы воспользуемся этими элементами, чтобы сделать наши страницы более осмысленными, для автоматического разбора всевозможными поисковыми системами.

Берём в руки кисть и вперёд к холсту — элемент <canvas>

Исторический экскурс нам говорит от том, что элемент <canvas> был разработан ещё компанией Apple® для использования в Mac OS X Dashboard и в Safari, но впоследствии была взята на вооружение Mozilla® и Opera® для своих веб-браузеров. Потом элемент был стандартизирован и включен в спецификацию HTML5 вместе с набором функций, которые могут быть использованы для рисования фигур, текста, градиентов и создания анимации внутри элемента. Кстати, в IE он попал только в 9-ой версии, но это так к слову.

Отнеситесь серьёзно к этому элементу, не нужно сломя голову бросаться рисовать заголовки и другие элементы страницы, канва не для этого. Для заголовков есть h1-h6 и css — пользуйтесь.

Наиболее полезной канва считается из-за того, что позволяет избавиться теперь от дополнительных плагинов, например Adobe Flash. Однако, здесь стоит упомянуть, что графика на канве всё-таки растровая, а не векторная, как во флеше. Но, хоть она и растровая, она всё же позволяет создавать игры, графические редакторы, и просто служит для построения всевозможных графиков.

Для создания элемента <canvas>, вам достаточно указать ему ширину, высоту, а также идентификатор. Отрисовка на канве идёт уже после того, как веб-страница загрузилась полностью.

Кроме всего прочего API канвы позволяет быть ей интерактивной и отвечать на действия пользователя, такие как мышкины события, и события клавы, всё это способствует созданию игр и веб-приложений на канве. Попозже мы вам покажем незамысловатый вариант — как можно почеркать на канве.

Теперь можно не искать бесплатные плееры.
Проигрываем <audio> и <video>

Если посмотреть объёмы информации блуждающей по сети, то самой многочисленной будет видео и аудио информация. Это наиболее интересный контент сайтов для широкой аудитории.

В сети существуют сайты, на которых можно размещать своё видео и использовать API этих сайтов для его трансляции со страниц уже своих сайтов. Думаем, что все слышали о youtube.com, vimeo.com, tinypic.com

Исторически сложилось (маркетинговая политика некоторых очень известных компаний), что существует сильный перевес в сторону одного из форматов видео. Большое распространение получили файлы в формате Flash Video (.FLV), затем по популярности идёт MP4, затем MOV и WMV. Всё бы ничего, но только это всё проприетарные форматы, а значит их нельзя просто так использовать. Поэтому в свободных браузерах, поддерживающих HTML5, быстрого внедрения проигрывания таких форматов видео не получилось.

Для свободного использования больше бы подошло видео в формате Theora (файлы OGG), однако, оно по своему качеству воспроизведения контента высокой чёткости (HD), не удовлетворило таких гигантов, как Apple и Google. Они предпочитают видео закодированное кодеком H.264, такое видео содержится в файлах MP4, MOV или MKV.

Такая же неразбериха и с аудио. Имеется прекрасный свободный кодек Vorbis (файлы OGG), но нет же, его видите ли не понимают большинство портативных плееров.

Однако, HTML5 всё-таки включает в себя поддержку двух новых элементов, <audio> и <video>, которые позволяют веб-разработчикам включать мультимедийный контент, не рассчитывая на то, что пользователи пойдут бродить по интернету для установки плагинов для браузеров.

Некоторые браузеры, включая Mozilla Firefox, Apple Safari и Google Chrome, поддерживают эти новые элементы и предоставляют браузеру стандартные элементы управления для воспроизведения видео и аудио файлов. Кроме того, они дают JavaScript API, чтобы разработчики создавали собственные элементы управления воспроизведением. Одним из главных плюсов во встроенном мультимедийном управлении является то, что требуется меньше ресурсов компьютера.

Хранение данных у пользователя

Куки (cookies) — печенюшки, для веб-приложения это не кондитерские изделия, это способ сохранения информации на компьютере пользователя. С помощью них сохраняется информация о доступе пользователя к сайту, настройки страницы, и многое другое. Каждая из печенюшек — это файл, в котором хранится некий идентификатор и полезное значение. Это удобно, пока вы не захотели сохранить более чем 20 печенек на веб-сервер, это предел. Так же есть предел для объёма одного такого файла — 4 килобайта. Кроме этих ограничений, у данного механизма есть одна особенность, при каждом HTTP-запросе все куки, полученные от сайта посылаются ему в запросе, если посчитать по максимальным ограничениям 20×4=80 килобайт, а это уже целая веб-страница. Так что хранение данных на компьютере пользователя в печенюшках — it’s not good.

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

Надоело пользоваться сторонними компонентами веб-формы?

В полку прибыло! Теперь у вас появилась возможность разрабатывать формы веб-приложений с крутыми элементами управления. Раньше вы могли использовать только самые простые компоненты — строки или области ввода, флажки, кнопки и т.д. Если вам хотелось чего-то большего, например — календарик, то вам приходилось подключать сторонние библиотеки JavaScript, либо использовать возможности, предоставляемые плагинами.

HTML5 даёт нам богатый выбор для ввода данных:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Для того чтобы узнать, какие браузеры уже поддерживают этот список элементов управления, загляните на страничку, на ней приводятся таблицы в которых сравниваются разные браузеры в плане поддержки стандарта HTML5. Обратите внимание что браузер Opera (движок Presto) оказывается самым продвинутым из всех, поддерживая, например, элементы для ввода даты.

Кроме новых элементов, HTML5 поддерживает две новые функции для полей форм. Первая — авто заполнитель. Он позволяет, не записывая дополнительный код JavaScript, указывать для поля ввода текст, который будет показан пользователю, пока он ничего не ввёл. Например, в поле, где вводится строка для поиска, можно вывести текст “введите текст для поиска”.

Вторая — это автофокус, с помощью него можно определить, какой элемент формы будет активным непосредственно после открытия формы.

Ещё немного новшеств

Сама по себе спецификация HTML5 содержит много разных нововведений, мы здесь приведём ещё несколько, особенно нам понравившиеся.

Drag and Drop
Многие привыкли, что могут на рабочем столе перетаскивать файлы или папки, и бросать их в корзину или другую папку. Теперь такая возможность, на уровне движка, появилась и в браузерах. Называется она Drag and Drop. До сих пор, её нельзя было сделать без плагинов, или JavaScript-библиотеки.

Geolocation
Появилось API, позволяющее веб-приложению определять Ваше текущее географическое положение. Этот механизм задействует различные пути для выяснения где находится клиент. Начиная от серверов, которые хранят информацию о расположении и устройств GPS, которые могут быть встроены в ваш гаджет, заканчивая точками доступа для беспроводного подключения.

Web workers
Веб-работнички, полезная вещь. Это специальная технология JavaScript, которая реализует многопоточность, которую так долго ждали. Она снимает тормоза с пользовательского интерфейса, так как некоторые задачи теперь могут выполняться в фоновом режиме в дополнительных потоках.

Кроссдокументные сообщения
Эта технология позволяет работать веб-приложениям, которые обмениваются данными на стороне пользователя, с другими сайтами. Взломщики веб-сайтов потирают руки, в ожидании появления таких сайтов, разработанных невнимательными программистами. Но если здесь не забывать про проверку отправителя, то всё будет в порядке.

И многое другое
Существует множество и других полезных функций, появившихся в HTML5. Например, это регистрация типов MIME и протокола обработчика, так что веб-приложения может быть зарегистрировано в качестве приложения по умолчанию для определенного типа файла или протокола; управление историей браузера, что до сих пор делалось вручную или с помощью внешних фреймворков JavaScript; и множество других новых элементов и атрибутов, которые облегчат жизнь разработчикам.

Это была первая часть статьи. Продолжение следует … Чем нас радует CSS3

Понравилась статья? Посоветуйте другу

Количество коментариев: 5

  1. Спасибо за статью! Приход HTML5 и его возможностей в веб-разработку действительно радует.

    • Дмитрий Артанов Дмитрий Артанов

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

  2. Игорь

    Поверьте обновляют. Даже сейчас можно посмотреть на приоткрывающиеся возможности HTML5.
    http://www.chromeexperiments.com/ очень впечатляет даже не знаю, что мы будем видеть в будущем. Скорее всего очень необычные браузеры с необычными возможностями.

  3. Будущее уже наступило ) Красота

Добавить комментарий



[ Ctrl + Enter ]