HTML5 учебник – введение в новый язык разметки
(Статья из журнала Smashing Magazine — перевод Виктории Шидловской)
HTML5 и CSS3 только «прибыли», а очередная гонка на приз за лучшую сборку в новом формате уже началась. Сказать по правде, все это – лишь инструменты, ждущие хорошего разработчика, готового создать првильный проект. Как хорошие разработчики, мы не должны тратить драгоценное время на выяснение отношений между собой — какой язык разметки лучше. Такой путь ведет в никуда. Вместо этого мы должны принять абсолютно новую идеологию и расширить наши навыки в программировании, чтобы сделать Веб еще более доступным.
И ничто не должно мешать нам начать прямо сейчас.
Добро пожаловать в 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 учебник
Хранение данных оффлайн
Самая крутая фишка HTML5 – определенно его оффлайн возможности. Thunderbird и Outlook (вскоре и GMail) позволяют загрузить вашу старую информацию, находясь оффлайн. С HTML5 у вас будет такая же функциональность, только в браузере. Это первый серьезный шаг на пути сокращения пропасти между десктопом и Вебом, который позволяет открыть множество дверей в будущее веб-приложениям.
W3C позаимствовал лучшие наработки у различных веб-технологий, что сделало его самым мощным программным языком на сегодняшний день.
Другие API
Drag & Drop (перетащить и поставить)
Drag & Drop API определяет само событие по переносу и вставке, чего именно – не указано. Этот API требует Ява-скрипта для нормальной работы по переносу и вставке.
Эти 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 контролирует свою аудиторию, и выпустил продукт, чтобы отобрать из этой аудитории разработчиков для его тестирования.
С помощью Wave Google продвигает HTML5 так далеко, как только можно (и даже немного дальше). Они переводят блоги, wiki, мгновенные сообщения, e-mail и синхронное общение на новый уровень, так как собирают все в один флакон.
Вот как выглядит Google Wave:
Google Wave на HTML5 – это самый большой прорыв в данной области. Они провели феноменальную работу, совместив творчество и инновационную технологию.
Сфокусируемся на мобильных устройствах
Точно так же, как Google ведет себя с Google Wave, мы можем вести себя с мобильными устройствами, то есть разрабатывать в HTML5 приложения для устройств, которые его поддерживают.
Это, конечно, не лучшее решение при дизайне для мобильных устройств вообще, но если вы хотите сосредоточиться на определенном приборе, таком как iPhone, Pre или Google’s Android, то вполне приемлемый способ реализовать свои возможности.
В данный момент самой лучшей платформой для тестирования обладает iPhone (сейчас уже iPad – прим. переводчика). Но если вы хотите протестировать только новые элементы, то все три крупнейшие платформы подойдут с таким же успехом.
Читать далее:
Новинка! Презентация HTML5 Тестирование новых возможностей HTML5 онлайн!
HTML5 SHIV теперь в виде скрипта!
Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать»
Awebdesign's Blog 
Спасибо за познавательную статью)
Я собственно хотел посоветовать Вам неплохую партнерскую программу по регистрации доменов от UANIC http://partners.uanic.name/ , которой я сам пользуюсь. С помощью ПП можно неплохо монетизировать сайт, и она подходит под тематику Вашего сайта в самый раз. Если будут какие-то вопросы по работе с данной партнерской обращайтесь, буду рад помочь14)
НравитсяНравится
i couldn’t agreee more with your thoughts on smokeless cigarette cartridges. I’ve used various sorts of
e cig usually the cheapest i really could find however i thought obtaining flavored cigarette smoking
liquid in your mouth was a normal part of employing these.
We foudn the green smoek thanks to this web page and can’t belive teh diofference. The high quality is obvious make up the this seem but its the amount of vapor that really make you discover how good they are. I feels like you are smoking a real cigarette. i guess for this reason they refer to it as the steam monster.
НравитсяНравится
Hi, of course this post is in fact nice and I have learned lot of things from it about blogging.
thanks.
НравитсяНравится
document.createElement(‘header’);
document.createElement(‘footer’);
document.createElement(‘section’);
document.createElement(‘aside’);
document.createElement(‘nav’);
document.createElement(‘article’);
document.createElement(‘figure’);
document.createElement(‘time’);
Это далеко нехитрое использование JS. Вот похитрее будет:
И всё! А каждый раз добавлять новый элемент даже глупо …
А так хорошая статья!
НравитсяНравится
Извиняюсь код не прописался. Вот ссылка: http://www.sdcvoy.ru/html5/css_ie_html5.php
НравитсяНравится
Буду улучшать свой сайт. Пора прогрессировать.
НравитсяНравится
«Новинка! Презентация HTML5 Тестирование новых возможностей HTML5 онлайн!»
тут битая ссылка =(
НравитсяНравится
Спасибо большое! Все ссылки оказались битыми — ужас. Все поменяла, можете продолжить чтение 🙂
НравитсяНравится
По моему это кошмар. По сути предлагается по сети загружать себе на машину и запускать не проверенные приложения. Думаю это тупиковый путь, от него откажутся, есть долее простые и проверенные решения, зачем все это в рамках языка разметки?
НравитсяНравится
Ну это не так. Explorer 10 полностью готовят к HTML5, потом, как это? Ну был HTML, потом HTML2, потом третий и четвертый, теперь пятый. И какие приложения? Ты просто сам пишешь страницу на новом языке разметки, который частично поддерживается нынешними браузерами, неподдерживаемое пока поведение корректируется с помощью тобой же написанных jQuery и CSS, но все в расчете потом на HTML5. Это просто неизбежный путь развития веба, хотим мы этого или нет.
НравитсяНравится
Да статья действительно хорошая. Большое спасибо автору. Я узнал много нового для себя.
НравитсяНравится
Раскрутка сайта на любом HTML одинакова. Если сделаете сайт — высылайте ссылку, поставлю на блог, людям интересно смотреть примеры использования новой технологии, сделаете доброе дело для людей, заодно и сайт чуть «подкрутите».
НравитсяНравится
Большое спасибо за отличный перевод. Буду заходить к Вам на сайт почаще.
Кстати, у Вас в тексте пара ошибочек закралась: в первом абзаце «создать прАвильный проект», далее по тексту «со страницу на страницу», «вроде и и заканчивая и». Есть еще, рекомендую вычитать текст получше.
НравитсяНравится
Спасибо! Постараюсь вычитать. Этот новый Ворд почему-то ошибки не показывает, может, кто-то знает, как спелинг настроить?
НравитсяНравится
Ниче се, я и не знал
НравитсяНравится
Всем привет! Блольшое спасибо автору за такой материал очень интересно. Буду пробывать, как говорится труд сделал из человека волосатого человека=))) Еще раз респект. Автор можем поменяться постовыми=)
НравитсяНравится
интересно было бы с вами лично пообщаться )) вы в аське бываете? или в скайпе?…
НравитсяНравится
Зашла к вам на блог :)) в ливджорнал. Че-то мы, по-моему, слишком по возрасту разные :), если только это не сугубо коммерческий проект, типа как когда я в «Хакере» работала, «Советы бывалого» писал под 16-летнего пацана дядечка лет 30-35-ти.
НравитсяНравится
Как вам идея выпустить электронный каталог по вашему ресурсу? могли бы все интересные статьи собрать в zip и давать возможность скачать людям?! Я бы воспользовалась!
НравитсяНравится
Интересно! А более подробно — что вы имеете в виду? Какие бы статьи хотели скачать? И ведь можно просто сделать закладку на статью, хотя закладки имеют свойство теряться :))
Напишите, какие вам интересны, сделаю каталог :)!
НравитсяНравится
Извините что как в игре побывал 🙂 /
НравитсяНравится