Тег: HTML

Фирменный стиль HTML5

Покажите мне хоть одного веб-дева который не отписался сегодня в своём уютном о новом логотипе HTML5:

Логотип HTML5

Мощь! Внушает. Но… зачем? :)

Очевидно же — хотят заработать на футболках и стикерах. ;)

Также были нарисованы иконки для семейства HTML5-технологий:

Логотип HTML5

А вот эти уже и правда могут пригодиться…

Например, для членомерной кнопочки, которую можно сгенерить на этом же сайте:

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

Хм, действительно, выглядит довольно фаллично :D

Я не буду ставить этот шильдик у себя в блоге, хотя некоторые его части уже используют новые теги и CSS3. Потому что это мне чем-то это напоминает время когда все ставили картинки «Valid XHTML», «Valid CSS» (некоторые и до сих пор ставят), а ещё в более давнее время «Best viewed in Internet Explorer 6». Who cares?

P.S. Эх, немного саркастичный пост получился, на самом деле круто это всё. И сайт приятный и типографика. И вообще — нраица.

5

Советы, хитрости и приёмы вёрстки CSS и HTML

Иконка CSS Edit 2

Это иконка CSS Edit 2, хотя в статье не будет ни слова о CSS Edit 2 :)

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

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

Для начала, пара провокационных советов:

1. Пришло время прекратить поддержку Internet Explorer 6

Возможно, меня закидают камнями, но, сколько можно? Этому браузеру 9… Да, девять лет! Сейчас им пользуется около пяти процентов пользователей рунета, Microsoft делает всё возможное для уменьшения этой цифры. К сожалению, предлагая скачать не намного более современную 8-ю версию своего браузера.
Нет, я не ратую за отказ в доступе к сайтам с устаревших браузеров. Лучшим решением представляется уведомление пользователя, например: «ваш браузер устарел и не поддерживается — функциональность данного сайта может быть ограничена» и ниже привести список рекомендуемых современных браузеров. Так уже сделали на YouTube, Google Docs (к концу 2010 года планируют прекратить поддержку в Google Mail и Calendar) и на многих других популярных сайтах и порталах. Я думаю, это очень хороший повод для того чтобы начать делать так же. А время, которое было бы потрачено на поддержку IE6, лучше потратить на разработку новой полезной функциональности.

2. CSS3

Большинство расценивает CSS3 только как возможность сделать закруглённые уголки и добавить тень. Но, на самом деле, возможностей гораздо больше: загружаемые шрифты, outline, транформации, flexible box layout, многоколоночная вёрстка, текстуры для контуров, медиа-апросы и многие-многие другие чрезвычайно полезные штуки.

Хотя CSS3 ещё в разработке, большинство современных браузеров уже поддерживают основные возможности, зачастую с префиксами (например: -moz-border-radius и -webkit-border-radius для Firefox и Safari/Chrome соотвественно).
Не стоит забывать, что по статистике большая часть пользователей до сих пор пользуется браузерами, не поддерживающими CSS3 (все версии Internet Explorer). Но начинать применять CSS3 стоит уже сейчас.
Ещё 39 приёмов и советов по CSS

14

Семантическая разметка в HTML

В последнее время стало очень модным такое понятие как семантика.

Википедия даёт следующее определение: «Семантика — система правил определения поведения отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.» Это применительно к языку.

Ну а применительно к HTML, простыми словами — теги, названия ID и классов элементов должны соответствовать их содержимому по смыслу.

Приведу простейший пример — у нас есть следующее определение:

Капитан Очевидность (англ. Captain Obvious)
— уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.

Как напишет код верстальщик не знакомый с понятием «семантика»:

<p><strong>Капитан Очевидность (англ. Captain Obvious)</strong><br /> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</p>

А вот как напишет этот код верстальщик, с ним знакомый:

<dl><dt>Капитан Очевидность (англ. Captain Obvious)</dt><dd> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</dd></dl>

Здесь использованы подходящие по смыслу элементы HTML: <dl> — это Definition List (список определений), <dt> — Definition Term (имя определяемого термина), <dd> — Definition Description (определение термина). А выделение жирным имени термина задано с помощью CSS.

Ну и ещё как пример — классическое меню, сделанное с помощью неупорядоченного списка:

<ul id="nav">
	<li><a href="/about/" title="О компании">О компании</a></li>
	<li><a href="/services/" title="Услуги">Услуги</a></li>
	<li><a href="/contacts/" title="Контактная информация">Контактная информация</a></li>
</ul>

Такую разметку будет потом очень просто оформить с помощью CSS.

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

Что использовать, ID или class?

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

ID — это имя уникального элемента на странице, я использую его для структурной разметки (#header, #content, #aside, #footer), для элементов формы и для элементов, к которым в дальнейшем планирую обращаться через jQuery. В последнем случае, конечно, можно использовать и классы… Но грамотней использовать ID, так как селектор $("#id") работает гораздо быстрее, чем $(".class"), по причине того, что используется DOM-функция getElementById(). А если элемент не уникален на странице (их несколько), то желательно положить его в блок с ID и обращаться к нему так: $("#id .class"). Такой селектор будет работать быстрее чем $(".class"), так как поиск элемента будет производиться только в блоке #id, а не во всём документе. Отвлёкся немного в сторону jQuery, но это тоже полезно знать. :!:

Регулярно в чужом коде встречаю названия классов привязанные к отображению, например: class="column-red-150-border-black". Это семантически некорректно, и в таком коде разбираться гораздо тяжелее. Не рекомендую такой код. :)

Ещё пример — в моём блоге, в разделе Эбаут используется микроформат hCard (микроформаты вообще интересная штука):

<div class="vcard">
	<span class="n"><span class="fn"><span class="family-name">Коромыслов</span> <span class="given-name">Алексей</span></span> <span class="additional-name">Георгиевич</span></span>
	<p>Родился <abbr class="bday" title="1987-04-14">14 апреля 1987 года</abbr>. Работаю <abbr title="разработчик ПО" class="role">разработчиком ПО</abbr> в компании «<a href="http://profit-labs.ru/" class="org">ProfIT Labs Ltd</a>».</p>
	<p>В сети «известен» под ником «<span class="nickname">lazymozzy</span>».</p>
	<h3>Контактные данные</h3>
	E-mail: <a class="email" href="mailto:alexey@koromyslov.ru">alexey@koromyslov.ru</a>
	Skype: <a class="skype" href="skype:lazymozzy">lazymozzy</a>
</div>

Используемые здесь полное имя (fn), организация (org), адрес электронной почты (email) и пр. определены с использованием определённых имён классов, а для всего блока задан class="vcard", который показывает, что вложенные классы принадлежат hCard. Например Яндекс уже начал поддерживать микроформаты.

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

Структура HTML

Так, блог ведь о дизайне, вёрстке и фотографии. О фотографии есть, о дизайне совсем мало, о вёрстке вообще ничего. :) Исправляемся!

Структура HTML

За всё время моей «карьеры верстальщика» у меня накопилось огромное количество велосипедов сниппетов, хаков и всяческих идей. Решил посвятить им несколько «статей». Вообще, в интернетах по данной тематике можно найти очень много информации. Но большинство того, что выдают поисковики устарело.
Начну с основ — с чего обычно начинается процесс вёрстки