Awebdesign's Blog

Онлайн демонстрация возможностей HTML5

Posted in HTML5, HTML5 уроки, jQuery by awebdesign on 11.05.2010

Здесь представлена презентация возможностей HTML5: http://apirocks.com/html5/html5.html#slide1

Откройте презентацию в отдельном окне и читайте перевод послайдово — номера слайдов написаны в адресной строке браузера.

Это необходимо, так как все возможности демонстрируются наглядно на самом сайте.

В Firefox почти все работает.

Итак, перевод:

Слайд 1

Эта презентация – сайт, написанный на HTML5

Нажимайте стрелку на клавиатуре, чтобы листать страницы.

Некоторые функции могут не работать, так как сайт написан под Google Chrome. Так что вы будете плакать от счастья, когда увидите работу в полном объеме на вашем IE после загрузки и установки Google Frame!

Слайд 2

HTML5 – Веб-развитие нового уровня

(включая следующие поколения других веб-технологий)

Слайд 3

Развитие Web-технологий по годам:

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5

Слайд 4

HTML5 ~= HTML + CSS + JS APIs

JS API:

Слайд 6

Новые селекторы

Нахождение элементов по классу (DOM API)

var el = document.getElementById('section1');
el.focus();

var els = document.getElementsByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();

Нахождение элементов по синтаксису CSS (Селекторы API)

var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");

Слайд 7

Web хранение

// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

Пример использования: Сохраните e-mail на стороне клиента (защищено от взлома)

Слайд 8

Web SQL база данных

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

«Сделать» «Построить таблицу» «Удалить таблицу»

Слайд 9

Кэш

<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);
CACHE MANIFEST

# version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

Отключите интернет-соединение и обновите страницу!

(как известно, HTML5 позволит гораздо больше данных хранить на стороне клиента, так что многие приложения, например, gmail, будут работать и в автономном режиме, по крайней мере, в плане доступа к уже имеющейся информации, письмам – прим. переводчика)

Слайд 10

Web Worker-ы

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); }; 

extra_work.js:
  // do some work; when done post message.
  postMessage(some_data);

Web Worker-ы позволяют ява-скриптам исполняться параллельно работе остальной страницы, поэтому с worker-ами ява-скрипты работают гораздо быстрее и эффективнее. Чтобы увидеть разницу, нажмите сначала на кнопку “Find Route with Workers” (найти маршрут с помощью worker-ов) и “Find Route without Workers” (найти маршрут без worker-ов).

Слайд 11

Web Сокеты

var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

Позволяют серверам передавать информацию браузерам.

Слайд 12

Уведомления

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title,
      tweet.text).show();
} else {
  window.webkitNotifications.requestPermission();
}

«Установить разрешение на получение уведомлений»

Нажать, если вы хотите также переустановить настройки

Используйте свое имя на Twitter-е, чтобы показать ваше последние сообщение в качестве уведомления.

(Push Notification позволяет приложениям получать напоминания, обновления и оповещения из сети даже тогда, когда они не запущены. Подробнее на Push notification – прим. переводчика)

Слайд 13

Перетаскивание и бросание

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

Первое окно: «Выделите текст и перебросьте, выделенный вами текст появится в окне»

Второе окно: «Выделите текст и перебросьте, текст сменится на другой»

(Перетаскивать нужно в окно “Drop Area”, в окне “Source Data” будут выведены html-разметка и сам текст — прим. переводчика).

Ожидается в ближайшее время: перетаскивание файлов с вашего рабочего стола. (Фантастика! Прим. переводчика).

Слайд 14

Геолокация

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    map.setCenter(new GLatLng(lat, lng), 13);
    map.addOverlay(new GMarker(new GLatLng(lat, lng)));
  });
}

«Показать местоположение»

(apirocks.com запросит ваше местоположение и сохранит его на вашем компьютере, чтобы отображать на карте)

Слайд 15

Итого по JS API:

Хранение на стороне клиента (База данных Web SQL, кэш, Web-хранение данных)

Общение (веб-сокеты, worker-ы)

Новые возможности десктопа (Уведомления, перетаскивание и бросание)

Геолокация

HTML

Слайд 17

Новые семантические тэги

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2009.
  </footer>
</body>

Слайд 18

Новые link relations

<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...

<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>
...

(Link relations объясняют браузеру, какого типа ссылка прописана в тексте. Link rel встречались в HTML4 в элементе header. Теперь будут использоваться в тэге <a href=”#”>#</a> — прим. переводчика)

Слайд 19

Микродата

<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop='name'>Neil</span>.</p>
 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
 <p>I am <span itemprop='nationality'>British</span>.</p>
</div>

(Отдельная тема – прим. переводчика)

Слайд 20

Доступные Rich Internet Приложения

(Как я поняла – примочки для слабовидящих пользователей интернета – детальные пояснения, что именно показывает страница, читаются скрин-ридерами и понятны людям – прим. переводчика).

<ul id="tree1"
      role="tree"
      tabindex="0"
      aria-labelledby="label_1"
      >
  <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
  <li role="group">
    <ul>
      <li role="treeitem" tabindex="-1">Oranges</li>
      <li role="treeitem" tabindex="-1">Pineapples</li>
      ...
    </ul>
  </li>
  </ul>

Слайд 21

Новые типы полей в формах

  1. Что уже внедрено
    <input type='range' min='0' max='50' value='0'>  
    
    <input autofocus type='search'>  
    
    <input type='text' placeholder='Search inside'>
  2. Что ожидается
    <menu>
    <progress>
    
    <input type='color'>
    <input type='number'>
    <input type='email'>
    <input type='tel'> 
    
    <input type='time'>
    <input type='date'>
    <input type='month'>
    <input type='week'>
    <input type='datetime'>

Слайд 22

Тэги audio и video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;

<video src='movie.mp4' autoplay controls ></video>
document.getElementById("video").play();

Слайд 23

Canvas (в переводе – холст, рисование векторных элементов, графиков и прочего средствами HTML5 – прим. переводчика)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

Слайд 24

Пример использования Canvas

Кнопки:

«Экспортировать в JPEG»

«Экспортировать в PNG (тяжелый файл)»

Фото: без рамки, с рамкой, рамка Полароид.

Показать углы

Слайд 25

Canvas 3D (Web GL)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var gl = document.getElementById("canvas").getContext("experimental-webgl");
  gl.viewport(0, 0, canvas.width, canvas.height);
  ...
</script>

Демо требует браузера с поддержкой WebGL

Слайд 26

Итого по HTML:

  1. Семантика (Новые тэги, link relations, Микродата)
  2. Доступность (ARIA)
  3. Веб-формы (новые поля)
  4. Мультимедиа (Тэги Audio и Video)
  5. Рисование 2D и 3D (Canvas, WebGL)

CSS

Слайд 28

CSS-селекторы

Селекторы

.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}

Отображение контента наподобие отображения картинок

div {
  display: inline-block;
}

Специальные аттрибуты

input[type="text"] {
  background: #eee;
}

Отрицание (условие выполняется при отрицательном результате, т.е является true при результате false – прим. переводчика)

:not(.box) {
  color: #00c;
}
:not(span) {
  display: block;
}

Более точечный таргетинг

h2:first-child { ... }

div.text > div { ... }
h2 + header { ... }

Слайд 29

Поддержка новых шрифтов

@font-face {
  font-family: 'Junction';
  src: url(Junction02.otf);
}
@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}
@font-face {
  font-family: 'GG250';
  src: url(General250.otf);
}

header {
  font-family: 'LeagueGothic';
}

LeagueGothic без замены на картинки

Слайд 30

Сворачивание текста (Text Wrapping)

div {
  text-overflow: ellipsis;
}

Попробуйте ввести разные цифры в поле под текстом и нажать Enter – увидите результат!

То же самое касается следующих страниц.

Слайд 31

Колонки

-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Слайд 32

Обводка текста

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px;
}

Слайд 33

Прозрачность

  color: rgba(255, 0, 0, 0.75);
  background: rgba(0, 0, 255, 0.75);

(Тоже измените цифры в полях color и background, изменится прозрачность текста и подложки – прим. переводчика).

Слайд 34

То же самое, но в цветовой модели Hue/saturation/luminance

color: hsla(
  128,
  75%,
  33%,
  1.00);

Слайд 35

Скругленные углы

  border-radius: 0px;

Слайд 36

Градиенты

background: -webkit-gradient(linear, left top, left bottom,
                             from(#00abeb), to(white),
                             color-stop(0.5, white), color-stop(0.5, #66cc00))
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))

Слайд 37

Тени

text-shadow:
  rgba(64, 64, 64, 0.5)
  0px
  0px
  0px;
box-shadow:
  rgba(0, 0, 128, 0.25)
  0px
  0px
  0px;

Слайд 38

Мгновенный Web 2.0 (только поменяйте цифры)

text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;  

background:
  -webkit-gradient(linear, left top, left bottom,
                   from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); 

border-radius: 0px;  

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom,
                   from(transparent), to(rgba(255, 255, 255, 0)));

Слайд 39

Расширение возможностей бэкграунда

  1. Изменение размеров бэкграунда:
    #logo {
      background: url(logo.gif) center center no-repeat;
      background-size: 
    
          auto
          contain
          cover
          100%
        ;
    }
  2. Несколько бэкграундов
    div {
      background: url(src/zippy-plus.png) 10px center no-repeat,
                  url(src/gray_lines_bg.png) 10px center repeat-x;
    }

Слайд 40

Перемещения

#box.left {
  margin-left: 0;
}
#box.right {
  margin-left: 1000px;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 
#box {
  -webkit-transition: margin-left 1s ease-in-out;
}  

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 

Слайд 41

Трансформации

«Проведи надо мной мышью»

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}

«А теперь нажми цифру 3!»

Слайд 42

Анимация

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

Слайд 43

Итого по CSS:

  1. Шрифты
  2. Визуальные эффекты
  3. Перемещения, трансформации и анимация

Слайд 44

Где уже работает?

  1. В современных браузерах
  2. В мобильных браузерах
  3. В Google Chrome / Firefox

Слайд 45

Chrome Frame:

  1. Это самый простой способ апгрейдить IE6, 7 и 8 до уровня современных технологий HTML5
  2. Два способа сделать ваш сайт готовым для Chrome Frame:

на стороне клиента

<meta http-equiv="X-UA-Compatible" content="chrome=1">

на стороне сервера

X-UA-Compatible: chrome=1

Попробуйте загрузить эту презентацию в IE!

Слайд 46

HTML5 ~= HTML + CSS + JS APIs


Галерея сайтов на HTML5

Posted in HTML5, HTML5 уроки by awebdesign on 04.04.2010

Здесь подборка сайтов, собранных на HTML5:

HTML5 Gallery

HTML5 уже можно использовать!

Уроки HTML5 – создаем макет

Перевод Виктории Шидловской статьи из журнала Smashing Magazine — Coding A HTML 5 Layout From Scratch

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

Поэтому сегодня мы научимся применять эти две техники. После этого урока вы сможете:

  1. Использовать Вежливое ухудшение для того, чтобы вещи оставались на своих местах при отображении в действующих браузерах.
  2. Использовать Прогрессивное улучшение, чтобы оставаться на острие событий.
  3. Использовать HTML5 вместе с быстро-растущей технологией Microformats.
  4. Иметь четкое представление о самых замечательных возможностях, которые обещает нам появление HTML5 и CSS3.

Для начала лучше прочитать следующие статьи:

HTML5 – введение в новый язык разметки

Что такое HTML5 SHIV

HTML5 SHIV теперь в виде скрипта!

Я также расчитываю на то, что вы знаете основы HTML, CSS, включая все «старые» тэги и свойства.

До того, как мы начнем…

Есть пара вещей, которые вы должны знать о HTML5. Дело в том, что этот язык не для всех. Поэтому вы должны тщательно выбирать, где и когда его применять. Думайте о всех способах разметки, как об инструментах, которые находятся в вашем распоряжении и используйте нужный инструмент в нужном месте. Так что если, предположим, ваш документ написан на XHTML strict, то нет никакой необходимости переписывать его на HTML5.

Также необходимо помнить, что использование HTML5 прямо сейчас ввергает вас в состояние неопределенности, потому что даже если ваш браузер обрабатывает HTML5, это не значит, что он его понимает. То же самое касается скринридеров и поисковых роботов.

Так что если вы готовы сделать шаг вперед, не боитесь использовать новые технологии, то продолжайте читать.

Несколько слов о Прогрессивном улучшении и Вежливом ухудшении

Итак, что означают эти термины? Вежливое ухудшение – широко распространенная техника, когда сначала используют новейшую технологию, а потом подгоняют ее под старые браузеры. Мы делаем это ежедневно. Большинство из нас сначала пишут код под Firefox, а потом фиксируют и исправляют ошибки под Explorer. Это и есть Вежливое ухудшение в действии.

Прогрессивное улучшение – это манера сначала строить документ для менее развитого браузера, а потом подтягивать под новейшие технологии. Мы также используем этот прием каждый день. К примеру, мы начинаем с разметки документа в HTML, а потом применяем к нему листы стилей. Это Прогрессивное улучшение в действии.

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

1. Дизайн

Это шаблон, который мы сейчас будем собирать:

дизайн шаблона на HTML5

Данный шаблон включает все элементы, которые мы будем изучать в этом уроке, а именно: название страницы и ее слоган (name & slogan), рекламный блок (в оригинале featured block, не смогла подобрать аналог на русском, у нас обычно блоки «Новости» или «Акции» – прим. переводчика), список постов (post listing), экстра-раздел с линками (extras section), подвал с описанием страницы (about box) и, наконец, копирайт (copiright).

2. Разметка страницы

Стартовая разметка страницы, HTML5-скелет:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" />
<!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
        <script src="js/IE8.js"></script><![endif]-->
<!--[if lt IE 7]>
        <link rel="stylesheet" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body>
</body>
</html>

Несколько замечаний:

  • 3 помеченных комментариями записи для IE. Первая встраивает html5 shiv из Google Code (читайте HTML5 SHIV теперь в виде скрипта!). Вторая включает IE8.js для лучшей обратной совместимости с IE7 и ниже. Третья – это файл CSS, который исправляет баги в IE6.
  • Использование id “index” и class “home” в тэге <body>. Это просто привычка, которую я выработал за последний год, она упростила сборку сложных макетов.
  • Упрощенный charset для лучшей обратной совместимости с действующими браузерами.
  • Я использую синтаксис XHTML 1.0 при сборке шаблона на HTML5. Так как я МОГУ использовать этот синтаксис, то так я и делаю. Однако вы можете использовать обычный HTML. Отличия от HTML – закрывание самозакрывающихся тэгов (<br />, например) и отсутствие кавычек в размерных атрибутах (width = 200). Но это на ваш выбор.

Это основа для нашего будущего шаблона в HTML5. Теперь мы можем прописывать тэги в различных разделах сайта.

Если бы существовал рентген-аппарат для вебсайтов, то вот такой скелет вы бы увидели:

основа для HTML5 - шаблон

Шапка (header)

шапка шаблона на HTML5

Понятие header так же элементарно, как его перевод с английского. В спецификации написано:

«Элемент header отображает группу презентационных элементов и навигацию».

Также мы будем использовать элемент <nav>.

Спецификация о nav:

«Элемент nav отображает часть страницы со ссылками на другие страницы или части в пределах страницы. Не все группы ссылок обязаны быть заключенными в тэги nav, только те, которые представляют собой главные навигационные блоки».

Было много бурчанья по поводу спецификации элемента nav, так как фраза «главные навигационные блоки» слишком раплывчата. Но так как сейчас мы говорим о главной навигации всего сайта, то ничего главнее быть не может. Так что после пары id и классов наш header выглядит так:

<header>
        <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
        <nav><ul>
               <li><a href="#">home</a></li>
               <li><a href="#">portfolio</a></li>
               <li><a href="#">blog</a></li>
               <li><a href="#">contact</a></li>
        </ul></nav>
</header><!-- /#banner -->

Рекламный блок (featured)

рекламный блок - шаблон HTML5

Его лучше всего разметить как <aside>, так как спецификация aside гласит:

«Элемент aside отображает раздел страницы, содержимое которого поверхностно касается основного содержимого страницы вне элемента aside, и который может существовать отдельно от этого содержимого. Такие разделы в печатной продукции обычно являются боковыми колонками».

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

У нас также есть два последовательных заголовка: «Featured Article» и «HTML5 in Smashing Magazine!», так что мы будем использовать еще один элемент — <hgroup>. Это прекрасный тэг, предназначенный для группирования тэгов <h#>, — как раз наш случай. Он существует для маскирования элемента h2 (заголовка второго уровня), что спасет разработчиков от лишней головной боли в будущем.

И последний элемент в этом блоке – логотип журнала Smashing Magazine. Для этого у нас есть еще один элемент разметки — <figure>. Этот тэг предназначен для включения контента, обычно с заголовком, который самодостаточен и отделен от остального содержимого. Мы также могли бы использовать тэг <legend> для заголовка. К сожалению, он не работает в некоторых браузерах, которые пытаются добавить <fieldset>, и этот баг невозможно преодолеть силам простого CSS (читайте Что такое HTML5 SHIV – уроки HTML5). Поэтому я предлагаю обойтись без <legend>, остановимся пока на использовании <figure>.

Код рекламного блока будет выглядеть так:

<aside><article>
        <figure>
               <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
        </figure>
        <hgroup>
               <h2>Featured Article</h2>
               <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
        </hgroup>
        <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->

Основное содержимое (body)

Основное содержимое шаблона HTML5

Следующий этап – создание «тела» нашего документа. Так как этот блок отображает главное содержимое, а оно представляет собой группу тематических сообщений, то без сомнения здесь можно применить тэг <section>.

Для постов мы используем элемент <ol>, так как это обычный список статей. Каждый <li> будет содержать <article>, а внутри у нас будут располагаться <header> для заголовка поста, <footer> для информации о посте и <div> для содержимого поста. Да, <div>. Причина использования <div> очень проста: мы будем использовать hAtom 0.1 Microformat, а он требует div-а для того, чтобы контент растягивался. Так как никакой другой элемент не подходит для этого (это не section, не article и не footer), то мы возьмем <div> — он не несет никакой семантической нагрузки и отобразит разметку максимально чисто.

Со всеми этими тэгами и вставленным hAtom microformat код будет выглядеть так:

<section>
        <ol>
               <li><article>
                       <header>
                               <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
                       </header>
                       <footer>
                               <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
                                      10th October 2005
                               </abbr>
                               <address>
                                      By <a href="#">Enrique Ramírez</a>
                               </address>
                       </footer><!-- /.post-info -->
                       <div>
                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
                       </div><!-- /.entry-content -->
               </article></li>
               <li><article>
                       ...
               </article></li>
               <li><article>
                       ...
               </article></li>
        </ol><!-- /#posts-list -->
</section><!-- /#content -->

Для продвинутых: да, я не использовал элемент <time>. Этот тэг сравнительно новый и несовместим с текущим microformat. Так как я в самом деле использую hAtom, то вместе ни microformat, ни новый тэг не будут работать. Если вы не используете microformat, то можно использовать <time>.

Экстра-раздел

раздел Экстра шаблона HTML5

Экстра-блок – еще один раздел нашего сайта. Вы можете посомневаться немного, какой тэг лучше сюда подойдет: <aside> или <section>. В конце концов, так как раздел не совсем тематически отделен от основного содержимого (все же это тематические линки и социальная сеть), то лучше используем тэг <section>.

Здесь мы найдем другое применение тэгу <div>. В целях стилизации и разделения на группы мы добавим два дива: один для блогролла и один для социального раздела.

Что касается остального, то здесь нечего решать: используем наш обычный <ul> для списка ссылок в обоих разделах. Выглядит это так:

<section>
        <div>
               <h2>blogroll</h2>
               <ul>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
               </ul>
        </div><!-- /.blogroll -->
        <div>
               <h2>social</h2>
               <ul>
                       <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
                       <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
                       <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
                       <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
                       <li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
                       <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
               </ul>
        </div><!-- /.social -->
</section><!-- /#extras -->

Описание страницы и копирайт (about box & copyright)

подвал (футер) шаблона HTML5

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

«Элемент footer отображает контент, относящийся к ближайшему «родителю». Обычно footer содержит информацию о разделе, такую как: кто его написал, ссылки на относящиеся к нему статьи, копирайт и все в таком духе».

Так как ближайшим «родителем» нашего <footer> является <body>, то более чем правильно разместить оба элемента здесь, указывая автора и владельца сайта.

Для блока «о сайте» мы используем тэг <address>, который будет содержать контактную информацию о своем ближайшем «родителе» — элементов <article> или <body>. Мы также используем hCard Microformat (для того, чтобы роботы и люди могли иметь более полное представление о контактной информации; о микроформатах будет написано позже – прим. переводчика). Для копирайта мы используем обычный тэг <p>. Так что в конце концов подвал выглядит так:

<footer>
        <address>
               <span>
                       <strong><a href="#">Smashing Magazine</a></strong>
                       <span>Amazing Magazine</span>
               </span><!-- /.primary -->
               <img src="images/avatar.gif" alt="Smashing Magazine Logo" />
               <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
        </address><!-- /#about -->
        <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->

Собираем все вместе

Итак, после всех этих манипуляций код выглядит так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Smashing HTML5!</title>
<link rel="stylesheet" href="css/main.css" />
<!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]>
        <script src="js/IE8.js"></script><![endif]-->
<!--[if lt IE 7]>
        <link rel="stylesheet" media="all" href="css/ie6.css"/><![endif]-->
</head>
<body>
<header>
        <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
        <nav><ul>
               <li><a href="#">home</a></li>
               <li><a href="#">portfolio</a></li>
               <li><a href="#">blog</a></li>
               <li><a href="#">contact</a></li>
        </ul></nav>
</header><!-- /#banner -->
<aside><article>
        <figure>
               <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" />
        </figure>
        <hgroup>
               <h2>Featured Article</h2>
               <h3><a href="#">HTML5 in Smashing Magazine!</a></h3>
        </hgroup>
        <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p>
</article></aside><!-- /#featured -->
<section>
        <ol>
               <li><article>
                       <header>
                               <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2>
                       </header>
                       <footer>
                               <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ -->
                                      10th October 2005
                               </abbr>
                               <address>
                                      By <a href="#">Enrique Ramírez</a>
                               </address>
                       </footer><!-- /.post-info -->
                       <div>
                               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p>
                       </div><!-- /.entry-content -->
               </article></li>
               <li><article>
                       ...
               </article></li>
               <li><article>
                       ...
               </article></li>
        </ol><!-- /#posts-list -->
</section><!-- /#content -->
<section>
        <div>
               <h2>blogroll</h2>
               <ul>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
                       <li><a href="#" rel="external">HTML5 Doctor</a></li>
                       <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li>
                       <li><a href="#" rel="external">Smashing Magazine</a></li>
                       <li><a href="#" rel="external">W3C</a></li>
                       <li><a href="#" rel="external">Wordpress</a></li>
                       <li><a href="#" rel="external">Wikipedia</a></li>
               </ul>
        </div><!-- /.blogroll -->
        <div>
               <h2>social</h2>
               <ul>
                       <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li>
                       <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li>
                       <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li>
                       <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li>
                       <li><a href="http://website.com/feed/" rel="alternate">rss</a></li>
                       <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li>
               </ul>
        </div><!-- /.social -->
</section><!-- /#extras -->
<footer>
        <address>
               <span>
                       <strong><a href="#">Smashing Magazine</a></strong>
                       <span>Amazing Magazine</span>
               </span><!-- /.primary -->
               <img src="images/avatar.gif" alt="Smashing Magazine Logo" />
               <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span>
        </address><!-- /#about -->
        <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p>
</footer><!-- /#contentinfo -->
</body>
</html>

3. CSS

Как и основной код, наш CSS сначала выглядит очень просто. Это шаблон, который я открываю в начале работы над любым проектом:

/*
        Name: Smashing HTML5
        Date: July 2009
        Description: Sample layout for HTML5 and CSS3 goodness.
        Version: 1.0
        Author: Enrique Ramírez
        Autor URI: http://enrique-ramirez.com
*/

/* Imports */
@import url("reset.css");
@import url("global-forms.css");
/***** Global *****/
/* Body */
        body {
               background: #F5F4EF url('../images/bg.png');
               color: #000305;
               font-size: 87.5%; /* Base font size: 14px */
               font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
               line-height: 1.429;
               margin: 0;
               padding: 0;
               text-align: left;
        }
/* Headings */
h2 {font-size: 1.571em}        /* 22px */
h3 {font-size: 1.429em}        /* 20px */
h4 {font-size: 1.286em}        /* 18px */
h5 {font-size: 1.143em}        /* 16px */
h6 {font-size: 1em}    /* 14px */
h2, h3, h4, h5, h6 {
        font-weight: 400;
        line-height: 1.1;
        margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
        color: #C74350;
        padding: 0 1px;
        text-decoration: underline;
}
a:hover, a:active {
        background-color: #C74350;
        color: #fff;
        text-decoration: none;
        text-shadow: 1px 1px 1px #333;
}
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
/* Lists */
ul {
        list-style: outside disc;
        margin: 1em 0 1.5em 1.5em;
}
ol {
        list-style: outside decimal;
        margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
/* Quotes */
blockquote {font-style: italic;}
cite {}
q {}
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
        /* Thead */
        thead th {padding: .5em .4em; text-align: left;}
        thead td {}
        /* Tbody */
        tbody td {padding: .5em .4em;}
        tbody th {}
        tbody .alt td {}
        tbody .alt th {}
        /* Tfoot */
        tfoot th {}
        tfoot td {}

Это наш первый шаг на пути приведения макета в порядок. Мы можем применить стили к большинству базовых элементов, так мы и поступим. Несколько замечаний:

  • Для оптимального кодирования некоторая информация обо мне в начале файла.
  • 2 импорта в начале файла. Первый — Eric Meyer’s CSS reset. Второй – персонализированные глобальные формы, смысл которых я объясню позже.
  • Базовые стили для основных тэгов.

Объяснение некоторых свойств

Во-первых, я использую свойство CSS3 text-shadow. Для объяснения прилагаю пример:

text-shadow: 1px 5px 2px #333;

Благодаря этому мы получим тень цветом #333, отбрасываемую текстом на 1 пиксель вправо, 5 пикселей вниз и с размытием в два пикселя. Просто, не так ли? Вы можете использовать значения hex и rgba плюс CSS unit (кроме %).

Также у нас в распоряжении эта крошка:

* p:last-child {margin-bottom: 0;}

Эта строка удалит margin вниз в тэге <p>, если он является последним дочерним элементом (child) у своего «родителя» (parent). Дя тех, кто незнаком с ООП: пример – child таблицы – это <tr> или <td>; соответственно, <table> — их родитель. Последний child таблицы – это последний tr, то есть – последняя строка. То, что мы сделали в нашем примере — полезно для избежания слишком больших вертикальных расстояний между параграфом (текстом) и нижней границей таблицы.

Наконец, у нас есть пара селекторов:

::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}

::selection – это CSS3 selector, который позволяет нам задавать стиль выделяемого текста. Имеет только две возможности – задавать цвет фона и цвет шрифта. ::-moz-selection тоже должен быть прописан, так как Мозилла не распознает селектор ::selection.

Запускаем HTML5

Как я уже говорил ранее, HTML5 пока еще не распознается браузерами. А если браузер не распознает элемент, он не может применить к нему стили.

Справедливо предположить, что все браузеры будут применять что-то вроде display:inline для нераспознанных элементов. Это не тот стиль, который мы хотели бы видеть в действии для таких элементов, как <section>, поэтому мы должны объяснить браузеру, как он должен отображать эти элементы:

/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
        display: block;
}

Ну вот! Теперь мы можем стилизовать наши элементы так, как если бы они были обычными div-элементами!

Некоторые из вас наверное заметили, что я добавил атрибут class=”body” в главном разделе нашего макета. Я хочу, чтобы «тело» моего сайта было определенной ширины – 800 пикселей. И я никогда не был фанатом использования огромных растянутых div-ов для этих целей. Поэтому мы используем базовую технику центрирования с помощью margin-ов. Также я добавлю пару общих классов, которые будут использованы для второстепенного контента.

/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}

Стилизозвание header

Начнем с header. Это просто. Мы всего лишь зададим отступы и кое-какое стилизование текста. Ничего такого, чего мы не делали до сих пор.

/*
        Header
*****************/
#banner {
        margin: 0 auto;
        padding: 2.5em 0 0 0;
}
        /* Banner */
        #banner h1 {font-size: 3.571em; line-height: .6;}
        #banner h1 a:link, #banner h1 a:visited {
               color: #000305;
               display: block;
               font-weight: bold;
               margin: 0 0 .6em .2em;
               text-decoration: none;
               width: 427px;
        }
        #banner h1 a:hover, #banner h1 a:active {
               background: none;
               color: #C74350;
               text-shadow: none;
        }
        #banner h1 strong {font-size: 0.36em; font-weight: normal;}

Сейчас стилизуем навигацию. Опять ничего особенного:

/* Main Nav */
#banner nav {
        background: #000305;
        font-size: 1.143em;
        height: 40px;
        line-height: 30px;
        margin: 0 auto 2em auto;
        padding: 0;
        text-align: center;
        width: 800px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
}

#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
        color: #fff;
        display: inline-block;
        height: 30px;
        padding: 5px 1.5em;
        text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
        background: #C74451;
        color: #fff;
        text-shadow: none !important;
}
#banner nav li:first-child a {
        border-top-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
}

Здесь мы используем новую возможность CSS3: border-radius. Это новое свойство CSS3 позволяет нам создавать скругленные углы для блоков без необходимости использовать семантически-неверные тэги, которые превращают в хаос весь наш код, миллионы изображений или фоновое расположение картинок. Нет, это все в прошлом. Теперь мы просто задаем радиус скругления угла обводки и все.

Конечно, border-radius еще не широко распространен, поэтому мы будем применять эквиваленты для браузеров Mozilla и Webkit. Существует несколько вариантов этого свойства, и ваш код может стать слишком длинным, но если вы хотите получить скругленные углы в большинстве браузеров, то добавляйте все.

Вы могли также заметить !important. Используется для отмены стиля по умолчанию (text-shadow) без сложных уточнений. В данном примере — больше в обучающих целях.

Стилизование блоков Featured и Body

Далее – CSS для обоих блоков. Заметьте, там нет стилей для постов, только для основного контента.

/*
        Featured
*****************/
#featured {
        background: #fff;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 20px;
        width: 760px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}
#featured figure {
        border: 2px solid #eee;
        float: right;
        margin: 0.786em 2em 0 5em;
        width: 248px;
}
#featured figure img {display: block; float: right;}
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
/*
        Body
*****************/
#content {
        background: #fff;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 20px 20px;
        width: 760px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}

Опять-таки, — ничего нового, обычные стили: margin, background, color и text. Повторяю это для того, чтобы вы поняли, что стили в HTML5 такие же простые как были до этого.

Стили для блока Extra

Наконец что-то интересное. Но начнем с базового стилизования.

/*
        Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
        color: #C74350;
        font-size: 1.429em;
        margin-bottom: .25em;
        padding: 0 3px;
}
#extras a:link, #extras a:visited {
        color: #444;
        display: block;
        border-bottom: 1px solid #F4E3E3;
        text-decoration: none;
        padding: .3em .25em;
}
        /* Blogroll */
        #extras .blogroll {
               float: left;
               width: 615px;
        }
        #extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
        /* Social */
        #extras .social {
               float: right;
               width: 175px;
        }

Как вы видите на картинке, у меня трехколоночный макет для блока blogroll с плавающими <li>, и последняя колонка с социальной информацией гораздо Уже двух остальных. Макет хорош и так, но меня беспокоит одна вещь: я про border под каждой строкой.

CSS3 для HTML5

Голубым выделена область, которая мне не нравится. Я добавил по одному border-у под каждым элементом: <li> и <a> тэги имеют подчеркивание снизу шириной в один пиксель, но разного цвета, и я не хочу этого подчеркивания в самой последней строке. Так что мы удалим border у последних двух элементов в блогролле и одного в социалке.

Сначала удалим подчеркивание у последних <li> каждого блока. С использованием селектора CSS3 :last-child, мы можем вычленить последний <li> у родительского <ul>.

#extras li:last-child, /* last <li>*/
#extras li:last-child a /* <a> of last <li> */
{border: 0}

Таким образом мы удалили подчеркивание для ‘li’ и ‘li a’ в последнем элементе. Но как удалить его для двух предыдущих?

CSS3 для HTML5

Встречайте :nth-last-child().

#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}

Выглядит сложно? На самом деле мы просто указываем на последние два элемента с конца, как раз те, где я хочу удалить border.

Как и следовало ожидать, этот прием не работает в IE, хотя IE8.js поддерживает :last-child, он не поддерживает :nth-last-child, так что подчеркивание в нем появится. Но это не главная дизайнерская проблема, так как информация на сайте все равно доступна. Так что не будем заострять внимание на удалении border-ов в IE.

Добавление иконок в социальный раздел
Добавим немного специй. Мы все знаем, как здорово выглядят маленькие иконки напротив каждой ссылки. Мы везде встречаем этот дизайнерский прием. Существует миллион способов сделать это, но мы воспользуемся новым селектором CSS3.

Знакомьтесь: a[n='b'] выделит все <a> с атрибутом n значения b. Например, если мы используем a[href='picture.jpg'], то мы укажем CSS3 на элемент <a href="picture.jpg">. Это здорово, но не свовсем то, чего мы хотим добиться, так как в нашем случае URL-ы картинок могут различаться. Вот несколько селекторов, которые могут нам пригодиться:

  • a[n] выделит все <a> с атрибутом n, независимо от его значения.
  • a[n='b'] выделит все <a> с атрибутом n значения b.
  • a[n~='b'] выделит все <a> с атрибутом n, который равен b, а b в свою очередь – одно из значений в списке разделенных пробелами чисел (или букв).
  • a[n^='b'] выделит все <a> с атрибутом n который начинается со значения b.
  • a[n*='b'] выделит все <a> с атрибутом n со значением b где-либо в пределах имени (или значения).

Последний вариант подходит нам как нельзя лучше. Так что мы будем выделять все <a> тэги с кусочком текста где-нибудь в пределах URL. Вот наш код:

#extras div[class='social'] a {
        background-repeat: no-repeat;
        background-position: 3px 6px;
        padding-left: 25px;
}

/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}

Первый кусок кода добавит отступ (padding) к социальным ссылкам, чтобы появилось место для иконок. Он также добавит фон по умолчанию, чтобы мы не делали этого потом. Вам наверное интересно, почему я написал div[class='social']вместо того, чтобы написать div.social. Просто потому, что некоторые браузеры (IE, как всегда) не поддерживают этот вид селектора, а мы не хотим появление белого зазора перед сдвинутыми ссылками. Поэтому прописывание того же фона, что и для фона иконок, будет нашей страховкой. IE в таком случае не выполнит ни padding, ни background image, а все остальные браузеры выполнят.

Второй раздел кода использует объясненный выше селектор, чтобы выделить каждую ссылку социальной сети и добавить к ним иконки. Эта техника CSS не представляет собой ничего нового, она не так часто используется (я даже видел использование ява-скриптов для достижения тех же целей), хотя заслуживает вашего внимания.

Стилизуем footer

И наконец – footer. Как и прежде – обычный CSS, ничего нового, кроме border radius:

/*
        About
*****************/
#about {
        background: #fff;
        font-style: normal;
        margin-bottom: 2em;
        overflow: hidden;
        padding: 20px;
        text-align: left;
        width: 760px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
}
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}
/*
        Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}

Список постов

Остался последний элемент, требующий стилизования. Опять базовый CSS, но на этот раз добавим быстрый эффект, который проявляется, когда пользователь проводит мышкой над постами.

/* Blog */
.hentry {
        border-bottom: 1px solid #eee;
        padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
.hentry .post-info * {font-style: normal;}
        /* Content */
        .hentry footer {margin-bottom: 2em;}
        .hentry footer address {display: inline;}
        #posts-list footer address {display: block;}
        /* Blog Index */
        #posts-list {list-style: none; margin: 0;}
        #posts-list .hentry {padding-left: 200px; position: relative;}
        #posts-list footer {
               left: 10px;
               position: absolute;
               top: 1.5em;
               width: 190px;
        }

Я удаляю все margin и padding для последнего поста (чтобы исчез большой зазор внизу блока). Также я использую селектор ‘>’, который указывает на конкретный дочерний элемент (child). Например #content > .hentry укажет на элемент a.hentry, находящийся прямо внутри #content. Если бы .hentry находился, к примеру, в списке, то это правило уже бы не сработало, так как .hentry в таком случае был бы «внуком» (grandchild), а не прямым наследником (child) элемента #content. Так что мы указываем именно на пост.

Продолжаем код:

#posts-list .hentry:hover {
        background: #C64350;
        color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
        color: #F6CF74;
        text-shadow: 1px 1px 1px #333;
}

Этот код изменит фон <li>, цвет текста и цвет ссылок, когда мышка находится над <li>.

HTML5 позволяет пользователям заключать в тэг <a> целые блоки информации. Так что мы можем заставить весь элемент <hentry> вести себя как единая ссылка. Но после нескольких тестов я выяснил, что Firefox 3.5.1 не готов к таким экспериментам, возможно, от слишком большого количества неизвестных эелементов внутри .hentry. Safari, Opera и даже IE6 вели себя правильно. Взгляните на тестовую страницу. Ниже несколько скриншотов, если у вас есть только один браузер.

Opera 9.64:

HTML5+CSS3 Opera

Safari 4.0.2:
Превью HTML5+CSS3 Safari

Internet Explorer 6:

HTML5+CSS3 Internet Explorer

Firefox 3.5.1:

HTML5+CSS3 Firefox

Так что в Firefox выделение блоков информации в качестве ссылок не работает. Однако мы можем добавить хороший эффект элементу <li>.

Оптимизация под IE6

Наконец, мы должны как-то довести все это до IE6. Ниже файлы ie.css и ie6.css, каждая строка имеет комментарий справа или сверху, который объясняет, что происходит.

Это код для ie.css:

#banner h1 {line-height: 1;} /* Fixes Logo overlapping */

Этот для ie6.css

#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */

/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}

Итак, как выглядит теперь наш макет? Взгляните на финальный продукт. Он был протестирован на IE6, Firefox 3, Firefox 3.5, Opera 9.64 и Safari 4.0.2, везде отображается правильно.

Теперь можно сказать, что с помощью HTML5 и CSS3 вы можете уже сегодня достичь результатов, которые будут без проблем работать в устаревших, текущих и будущих версиях браузеров. Мы все еще далеки от полного использования крутых возможностей HTML5, но мы можем использовать его уже сейчас.

Читать далее:

Новинка! Презентация HTML5 Тестирование новых возможностей HTML5 онлайн!

HTML5 – введение в новый язык разметки

Что такое HTML5 SHIV

HTML5 SHIV теперь в виде скрипта!

Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать».

HTML5 SHIV теперь в виде скрипта!

Автор Remy Sharp, перевод Виктории Шидловской

Все заняты решением проблемы, как применять листы стилей к HTML5. Единственный способ заставить IE признавать новые элементы, такие как <article>, например, — это использовать HTML5 shiv. Я быстренько состряпал новый ява-скрипт, который помогает применить стили ко ВСЕМ элементам.

Загрузка и применение

Вот он – сам скрипт: html5.js.

Он должен быть прописан в <head>, так как IE должен сначала знать об элементе, прежде чем обрабатывать его, так что скрипт не может сидеть где-то в подвале страницы.

Я переместил HTML5 shiv на Google-хостинг (Google code project), так что если вас устраивает экстра HTTP запрос, то можете просто добавить ссылку на скрипт: http://html5shiv.googlecode.com/svn/trunk/html5.js

Пример:

<!—[if IE]>
<script src=»http://html5shiv.googlecode.com/svn/trunk/html5.js»></script&gt;
<![endif]—>

Читать далее:

HTML5 – введение в новый язык разметки
Уроки HTML5 – создаем макет
Что такое HTML5 SHIV


Что такое HTML5 SHIV – уроки HTML5

Автор John Resig, перевод Виктории Шидловской

Так как многие браузеры некоторое время не будут распознавать HTML5, нам нужно придумать способ строить страницы на HTML5 и заставить браузеры «видеть» его обходным путем. Для этого прибегнем к помощи JavaScript и CSS.

Итак, Internet Explorer не в состоянии применить стили к элементам, которые он не распознает. К примеру, следующий элемент — “blah” – не будет никак стилизован:

<html>
<head>
<style>blah { color: red; }</style>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>

Результат:

HTML5 shiv - учебник HTML5

Благодаря Sjoerd Visscher у нас теперь есть одна интересная техника, с помощью которой можно заставить IE применять стили к необходимым элементам. Если вы создадите новый DOM-элемент (с тем же именем, что и восновном документе), то листы стилей заработают. Вам даже не нужно вставлять этот элемент в документ для того, чтобы стили сработали. Пример:

<html>
<head>
<style>blah { color: red; }</style>
<script>document.createElement(«blah»)</script>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>

Результат:

HTML5 shiv - учебник HTML5

Это очень важно. Это значит, что мы теперь можем применять стили к элементам HTML5, не распознанным Интернет Эксплорером.

Элемент <figure/>

Взгляните на простой пример. Претворимся, что хотим применить HTML 5 figure element. Элемент очень простой, только требует небольшой стилизации. (Не уверен, как элемент figure должен конкретно выглядеть, просто беру картинку для примера):

<html>
<head>
<style>
figure { border: 1px inset #AAA; padding: 4px; }
</style>
<script>document.createElement(«figure»);</script>
</head>
<body>
<figure>
<img src=»http://ejohn.org/files/jeresig-wordpress-sm.jpg»/>
</figure>
</body>
</html>

Результат:

HTML5 shiv - учебник HTML5

С помощью CSS и простой JavaScript DOM формулы мы смогли внедрить хотя бы часть спецификации HTML5. Хоть это и не решение всех проблем, но уже многообещающая техника.

Я попытался применить ее к некоторым элементам, уже определенным в IE. К примеру, я решил создать legend child element. Применить стили к нему было действительно трудно, так как функциональность и применение стилей к легендам уже определены для элементов fieldset в Internet Explorer. В моих простых тестах, если legend element находился вне полей формы, он никак не стилизовался.

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

Читайте далее

HTML5 SHIV теперь в виде скрипта!

HTML5 – введение в новый язык разметки

Уроки HTML5 – создаем макет

Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать»

HTML5 учебник – введение в новый язык разметки

Posted in Перевод Виктории Шидловской, HTML5 by awebdesign on 17.03.2010

(Статья из журнала Smashing Magazineперевод Виктории Шидловской)

HTML5 и CSS3 только «прибыли», а очередная гонка на приз за лучшую сборку в новом формате уже началась. Сказать по правде, все это – лишь инструменты, ждущие хорошего разработчика, готового создать првильный проект. Как хорошие разработчики, мы не должны тратить драгоценное время на выяснение отношений между собой — какой язык разметки лучше. Такой путь ведет в никуда. Вместо этого мы должны принять абсолютно новую идеологию и расширить наши навыки в программировании, чтобы сделать Веб еще более доступным.

И ничто не должно мешать нам начать прямо сейчас.

Добро пожаловать в HTML5

HTML5 - логотип

HTML5 логотип - HTML5 учебник

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

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

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

База

Когда несколько месяцев назад я начал изучать HTML5, первая вещь, которую я пытался найти, это DOCTYPE. Вроде бы простая вещь, которая должна быть везде, нигде не проявляла себя, и после полного краха своих попыток я наконец откопал ее в недрах W3C. Вот она:

<!DOCTYPE html>

Мне было также любопытно, почему они выбрали DOCTYPE html а не DOCTYPE html5, что было бы более логично и сразу сообщало браузерам, с документом какого формата они работают. Но оказалось, что DOCTYPE HTML5 не принимается Internet Explorer 6, тогда как сам документ, составленный в HTML5 и с правильным DOCTYPE отображается правильно.

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

Новые элементы, которые вы должны знать

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

Новые структурные элементы

<header>

Элемент header предназначен для отображения всей вводной информации, типа лготипа, названия сайта и тому подобное.

<nav>

Элемент nav содержит ссылки на другие разделы сайта или страницы. Не нужно все ссылки заключать в эти тэги, только основную навигацию.

<section>

Этот тэг заключает в себе динамический контент или программное приложение. То же самое делает div, но section отделяет целый кусок документа.

<article>

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

<aside>

Элемент aside содержит контент, относящийся к основному содержимому страницы. Как правило, это боковые колонки, где размещаются ссылки на похожие материалы, облака тэгов и т.п. Могут также содержать выносы – цитаты из текста.

<footer>

Используется для отделения «подвала», не только всей страницы, но и любого ее раздела. Так что этот элемент вы, скорее всего, будете использовать на странице несколько раз.

На первый взгляд кажется, что эти новые элементы делают то же самое, что обычные <div id>, но если div id с уникальным именем может использоваться на странице только один раз, эти элементы ведут себя также, как привычные нам тэги <p>, <h1> и прочие, и их можно использовать на странице столько раз, сколько необходимо.

Элементы header и footer не просто отделяют шапку и подвал страницы, но определяют шапку и подвал каждого элемента на ней, как делают в таблицах thead и tfoot.

Преимущество новой разметки в том, что она семантически определяет элементы страницы (легче ориентироваться в коде). Однако, использовать ее нужно с умом, иначе легко переборщить.

Облегчение перехода с XHTML5

Хотя HTML 4.01, XHTML 1.0, & HTML5 очень похожи, существуют небольшие синтаксические различия, которые могут привести к коллапсу страницы. Чтобы этого не происходило, в HTML5 заложено некоторое «послабление» для заядлых XHTML-кодеров.

Например, при построении формы в HTML5 правильный синтаксис для input text будет таким:

<input type=”text” id=”name”>

Но не будет ошибкой написать и так:

<input type=”text” id=”name”/>

То есть, с закрывающим слэшем.

То же самое относится к <meta> и другим самозакрывающимся тэгам.

Такие элементы как <i> и <b> перешли из HTML4.

В чем преимущество?

У любой новой технологии должно быть преимущество, иначе зачем вы будете ею пользоваться. HTML5 «упакован» целым рядом преимуществ. Большинство из них касается API и DOM.

Расширяем API

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

HTML5 использует «легкую» кодировку, чтобы сосредоточить свое внимание на Вебе; впервые, кроме jQuery, одна передовая технология полностью поглощает другую. Конечно, мы связываем HTML5 и Ява-скрипты с помощью классов и ID, но до этого момента они воспринимались как отдельные блоки, приставляемые один к другому. Теперь же, с ростом Веба, нам необходимо такого рода объединение двух технологий.

html5 luvs API

HTML5 luvs API - HTML5 учебник

Хранение данных оффлайн

Самая крутая фишка HTML5 – определенно его оффлайн возможности. Thunderbird и Outlook (вскоре и GMail) позволяют загрузить вашу старую информацию, находясь оффлайн. С HTML5 у вас будет такая же функциональность, только в браузере. Это первый серьезный шаг на пути сокращения пропасти между десктопом и Вебом, который позволяет открыть множество дверей в будущее веб-приложениям.

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

Другие API

Drag & Drop (перетащить и поставить)

Drag & Drop API определяет само событие по переносу и вставке, чего именно – не указано. Этот API требует Ява-скрипта для нормальной работы по переносу и вставке.

Video & Audio (видео и аудио)

Эти API – большой апгрэйд в сфере отображения медиа-файлов. Хотя функциональность пока ограничена, вставка видео на страницу никогда не была проще:

<video width=»400″ height=»360″ src=»vid.mp4″>

Геолокация

Потрясающий API – позволяет средствами HTML5 определить местонахождение подключенного к Интернету устройства (мобильного телефона).

Где я могу это использовать?

Не смотря на малую поддержку HTML5 браузерами, веб развивается слишком быстро, чтобы медлить и не отрабатывать свои навыки на тестовых страницах. В данный момент Safari – лучшая платформа для тестирования, он поддерживает большинство новых элементов и API. Конечно, ситуация может измениться в любой момент, так что следите за развитием Opera, Chrome и Firefox.

Как нам двигаться дальше?

Несмотря на кипишь вокруг HTML5 и наше нетерпение его использовать, переход с HTML4.01 и XHTML1.0 на HTML5 – это длительный процесс. Пройдет много времени, прежде чем разработчики протестируют все функции, а браузеры смогут их выполнять, но больше всего времени займет переход пользователей со старых версий браузеров на новые. Мы все это понимаем, все читаем эту статью, и мы знаем, что нужно найти какой-то путь, чтобы продолжать свое движение вперед, не навредив при этом прошлому.

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

Семантическое наименование div-ов

Давать div-ам имена header, footer и т.п., которые потом будут использоваться в качестве элементов разметки напрямую, хорошая практика для того, чтобы привыкнуть к названиям.

Хитрое использование JavaScript

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

Создание элементов с помощью Ява-скрипта.

Работа с jQuery – это круто и все такое, но, как выяснилось, в Ява-скрипте есть встроенная функция для создания новых элементов.

document.createElement(‘header’);

document.createElement(‘footer’);

document.createElement(‘section’);

document.createElement(‘aside’);

document.createElement(‘nav’);

document.createElement(‘article’);

document.createElement(‘figure’);

document.createElement(‘time’);

И далее в том же духе.

Этот прием позволит вам стилизовать элементы в Internet Explorer. Обратная сторона медали в том, что без всех необходимых Ява-скриптов сайт не только останется без стилей, но и любые не распознанные элементы будут игнорированы. То есть ваш сайт будет разрушен.

Ява-скрипты на стороне клиента – это не решение при использовании HTML5, Ява-скрипты на стороне сервера – это уже совсем другое дело…

Создание приложений под определенные браузеры

Я всегда призывал людей создавать сайты для своей аудитории, и написание приложений под определенные браузеры – это в самом деле фишка. Как я уже говорил ранее, все упирается в создание и контроль среды. Если мы сможем управлять средой, то предоставлять новые услуги нашим клиентам будет гораздо легче. Google пытается сделать это со своим продуктом Google Wave.

Основная идея, стоящая за продуктом Google, — произвести революцию в сфере общения и сделать это с помощью новейшей технологии. Google Wave построен на HTML5 и пока не отображается всеми браузерами. Но это не проблема, так как Google контролирует свою аудиторию, и выпустил продукт, чтобы отобрать из этой аудитории разработчиков для его тестирования.

Google Wave inbox - HTML5 учебник

С помощью Wave Google продвигает HTML5 так далеко, как только можно (и даже немного дальше). Они переводят блоги, wiki, мгновенные сообщения, e-mail и синхронное общение на новый уровень, так как собирают все в один флакон.

Вот как выглядит Google Wave:

Google Wave - HTML5 учебник

Google Wave на HTML5 – это самый большой прорыв в данной области. Они провели феноменальную работу, совместив творчество и инновационную технологию.

Сфокусируемся на мобильных устройствах

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

Это, конечно, не лучшее решение при дизайне для мобильных устройств вообще, но если вы хотите сосредоточиться на определенном приборе, таком как iPhone, Pre или Google’s Android, то вполне приемлемый способ реализовать свои возможности.

В данный момент самой лучшей платформой для тестирования обладает iPhone (сейчас уже iPad – прим. переводчика). Но если вы хотите протестировать только новые элементы, то все три крупнейшие платформы подойдут с таким же успехом.

Читать далее:

Новинка! Презентация HTML5 Тестирование новых возможностей HTML5 онлайн!

Уроки HTML5 – создаем макет

Что такое HTML5 SHIV

HTML5 SHIV теперь в виде скрипта!

Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать»

%d такие блоггеры, как: