Day #609

Введение

Я являюсь фрилансером. Раньше я не особо задумывался над тем, как и что делают верстальщики. Я делал серверную часть, а мой друг верстал и набивал контент. Совсем недавно мне захотелось попробовать «что и как». Пару дней назад мне на глаза попался материал, который мне очень понравился. Он наглядно обЪяснял, что и как нужно писать. К сожалению, сылку дать не могу, так как я не запаомнил, где располагался сей мануал, но… Казалось бы, можно это и запомнить, но я пошёл ещё одним путём — законспектировал это дело. Собственно, добро пожаловать в мою записку.

Новый Doctype

Вы ещё используете этот старый, дряхлый, покрытый морщинами доктайп?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

Если да, то почему? Пора бы уже перейти к новому доктайпу, который пришёл к нам вместе с HTML5:

<!DOCTYPE html> 

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

Элемент figure

Ранее вы не раз использовали подобную разметку:

 <img src="path/to/image" alt="Не видно? Включите просмотр изображений в настройках!" /> <p>Image of Mars. </p> 

Но, к сожалению, здесь мы не видим лёгкого способа добавить заголовок к нашему изображению. При разработке стандарта HTML5 это учли и решили эту проблему путём добавления элемента figure. В сочетании с figcaption мы можем легко присвоить заголовок или подпись к нашему изображению без дополнительных танцев с бубном. Вот так, например:

 <figure> <img src="path/to/image" alt="Не видно? Включите просмотр изображений в настройках!" /> <figcaption> <p>Здесь изображено что-то очень интересное.</p> </figcaption> </figure> 

Поехали дальше.

Больше никаких типов для элементов script и link

Раньше многие писали следующую разметку:

 <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script> 

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

 <link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script> 

Кавычки или без кавычек — вот в чём вопрос

Действительно, вопрос. Помните, HTML5 — не XHTML. Вам не следует оборачивать ваши атрибуты в кавычки, если вы не хотите этого делать. В этом нет ничего постыдного и неправильного, если вы чувствуете себя в таком коде, «как рыба в воде»:

<p class = myClass id= someId>Что, чёрт возьми, вы здесь делаете?</p> 

Сделаете ваш контент редактируемым на ходу

HTML5 представляет web-разработчикам новую, не менее прекрасную возможность. Такой возможностью является изменяемый контент. Представьте, мы читаемВикипедию и вдруг замечаем, что кто-то из авторов ошибся (ну, с кем не бывает). С использованием сей возможности у нас появляется возможность просто тапнуть по тексту и буквально «в два щелчка» в два клика этот текст исправить. Вот пример разметки:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Проснуться. </li> <li> Выпить кофе. </li> <li> Пойти куда-нибудь наконец! </li> </ul> </body> </html> 

Или сделать это в таблицах стиля:

 <ul contenteditable = true> 

Вуаля:

Поле для ввода E-mail

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html> 

И выглядеть это будет так:

Или вот так. Пфф…

Данное поле сразу предупредит вас о том, что вы ввели не валидный e-mail адрес. В случае же, если всё хорошо (а у IE всегда всё хорошо), данные отправляются к нам на сервер.

Тёмная лошадка aka placeholders

Опять же, ранее мы путём дикого скриптования на JavaScript делали подсказку в текстбоксе. По нажатию на этот текстбокс подсказка исчезала. Сегодня нам не нужно об этом заботиться — ведь у нас есть placeholders.
Использовать, нельзя помиловать. Вот так:

<input name="email" type="email" placeholder="Здесь можно что-то написать!" /> 

А что?

Заголовок и подвал

Теперь нам не нужно городить огороды с id, чтобы указать, где находится шапка нашго сайта (или же заголовок, что одно и то же), а где — подвал. По типу таких:

 <div id="header"> <p>Ничего</p> </div> <div id="footer"> <p>Всё ещё ничего</p> </div> 

Даёшь легальный, грамотный с точки зрения семантики и, соответственно, валидныйбизнес код. А почему бы и нет.

 <header> 3000 км над землёй. </header> <footer> -3000 км под. Под землёй. </footer> 

Постарайтесь не перепутать однажды эти элементы на вашем сайте. Ну, мало ли, всякое бывает.

Internet Explorer и HTML5 — реальность или выдумка

Старые версии IE не хотят дружить с HTML5. Хоть убей, чем сейчас и заняты в Microsoft. Наша задача — их подружить.
Первый способ — испольовать для этого JavaScript и CSS. Сначала нужно стилизовать новые элементы. Вот так, например:

header, footer, article, section, nav, menu, hgroup { display: block; } 

Но сейчас, к сожалению, IE по-прежнему не поддадится дрессировке здравому смыслубудет игнорировать эти теги. Что же, ты сам напросился. Мы создадим их сами с помощью JavaScript:

document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document.createElement("menu"); 

Вот и всё, Сид. Ты попался Теперь мы можем использовать данные теги где нашей душе захочется. Чтобы не повторять написание этого велосипеда от раза к разу, Реми Шарп предложил это, чтобы упростить процесс обучения строптивого IE. Включать данный скрипт в наш проект следует следующим способом:

<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 

На данный момент IE обновляется и уже в некоторых Developer Preview версиях, вы можете тестировать поддержку HTML5 в Internet Explorer. Да, да, вы не ослышались — именно HTML5.

Элемент hgroup

Опять семантика. Представьте, что у вас на сайте есть блок с категориями блога, а ниже сами темы. Разумеется, при нажатии блока с категориями вылезают существующие темы. Легко заметить, что эти самые блоки находятся в роственных отношениях. Да, да — семейка Адамсов.
Теперь, на уровне семантики, мы можем это доказать. Вот так:

 <header> <hgroup> <h1> Пфф... </h1> <h2> Как я провёл это лето. </h2> </hgroup> </header> 

Комментарии излишни.

Атрибут Required

Представьте, что мы имеем форму регистрации. Нам непременно нужно дать пользователю понять, что есть поля ввода, которые обязательно нужно заполнить.
Ранее это делалось так: пользователь вводил данные, отправлял их на сервер путём нажатия на кнопку «Пуск», а дальше за дело брался скрипт, который проверял валидность формата введённых данных и если какое-либо из обязательных полей заполнено не было, то мы выдавали пользователю ошибку.
Теперь же это легко осуществляется на клиентской стороне клиента. Просто добавьте атрибут required к текстбоксу. Так, например:

 <form method="post" action=""> <label for="someInput">Ваше имя: </label> <input type="text" id="someInput" name="someInput" placeholder="Bill" required> <button type="submit">Оке</button> </form> 

А что я? Я ничего!

Заключение

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: