В прошлой статье мы изучили Стили. Теперь посмотрим на то, чем мы больше всего гордимся: Warp6 написан и сверстан на HTML5 и CSS3.
Шаблон полностью основан на HTML5. Разработчики обновили всю верстку основных компонентов WordPress, Joomla 1.5 и Joomla 2.5. В новом фреймворке Warp6 обильно используются селекторы CSS3 и CSS2.1, которые разработчики не могли использовать раньше во времена поддержки IE6. Теперь давайте внимательнее рассмотрим новую «отполированную» разметку.
Макет шаблона
Первое, что обращает на себя внимание - это новый HTML5 доктайп и модифицированные элементы head сайта.
<!DOCTYPE HTML>
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8" /> ...
</head>
В HTML5 введены новые семантические HTML элементы, символизирующие логические секции вашего контента, такие как article, aside, section, footer, nav, header, hgroup, nav и т.д. Это новый набор тегов, обеспечивающих более легкую разметку, благодаря чему шаблон становится более семантически понятным и SEO оптимизированным. В шаблонах Yootheme авторы используют эти элементы надлежащим образом. Если вы хотите больше о HTML5, изучите сайты Погружение в HTML5rus и HTML5 Doctoren.
К сожалению, Internet Explorer поддерживает новые теги только начиная с версии 9. Они не печатаются, и к ним не применяются CSS стили. Для решения этой проблемы разработчики используют скрипт html5shim. Этот js скрипт заставляет старые версии IE интерпретировать новые теги, отображать их в версии для печати и применять к ним стили.
Система разметки Warp6
Огромное количество времени команда разработчиков Yootheme тратит на устранение различий в разметке между WordPress, Joomla! 1.5 и Joomla 2.5. Как вы уже знаете из фреймворка Warp 5.5, стили одинаковы для всех систем. Это великолепно, потому что позволяет очень просто разрабатывать кроссплатформенные шаблоны.
Например, мы используем теги header, article и footer для отображения блога (списка материалов). Одна вещь, которую мы особо хотим выделить - это тег time, который выводит время в формате читаемым машинами, но также отображает его в удобном формате для пользователя.
<time datetime="2011-02-11" pubdate>11 Февраля 2011</time>Атрибут pubdate отмечает что в это время опубликована статья. Это очень важно для поисковых систем.
Не только для блога мы используем новые теги, а для всех элементов на сайте. Например, HTML5 используется для комментариев и виджетов в WordPress, а для Joomla! в модулях и компонентов. Также в Warp6 используются другие HTML5 возможности, такие как: атрибут placeholder в Ajax поиске и в форме входа на сайт. Конечно, мы обеспечиваем поддержку старых браузеров с помощью замещающих эти возможности скриптов.
CSS3 и CSS2.1 на полную катушку
Warp6 - это первый фреймворк Yootheme без поддержки IE6. Так что вы можете себе представить, с каким нетерпением мы ждали разработки нового CSS фундамента для наших шаблонов. Все переписано с нуля, мы использовали на полную катушку возможности CSS2.1 и эффекты CSS3. Конечно, мы имеем введу «плавную деградацию» и «постепенное повышение». В следующей статье мы уделим особое внимание всей мощи CSS фреймворка.
CSS3 PIE
Как вы знаете, в IE7-8 не поддерживаются новые возможности CSS3. Именно поэтому мы включили великолепный CSS3 PIE в наш фреймворк по умолчанию. PIE позволяет старым версиям IE отрисовывать некоторые из основных функций CSS3, такие как мягкие тени, закругленные уголки, градиенты и т.д.
Заключение
Warp6 обеспечивает чистый и легкий HTML5 шаблон, в котором реализуются новые CSS функции. Это позволяет создавать современные темы, которые легко переносятся на различные платформы, например на WordPress и Joomla. В следующей статье мы рассмотрим основы CSS нашего фреймворка.
