Awebdesign's Blog

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 – читайте статью «Почему минимализм, или какой сайт делать»

комментарий 21

Subscribe to comments with RSS.

  1. Дмитрий Кронов said, on 15.03.2015 at 10:26 пп

    Спасибо за познавательную статью)
    Я собственно хотел посоветовать Вам неплохую партнерскую программу по регистрации доменов от UANIC http://partners.uanic.name/ , которой я сам пользуюсь. С помощью ПП можно неплохо монетизировать сайт, и она подходит под тематику Вашего сайта в самый раз. Если будут какие-то вопросы по работе с данной партнерской обращайтесь, буду рад помочь14)

    Нравится

  2. Raymond said, on 22.03.2013 at 12:55 пп

    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.

    Нравится

  3. marcus neiman shoes said, on 24.01.2013 at 12:20 пп

    Hi, of course this post is in fact nice and I have learned lot of things from it about blogging.
    thanks.

    Нравится

  4. Александр said, on 15.01.2012 at 11:06 пп

    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. Вот похитрее будет:

    И всё! А каждый раз добавлять новый элемент даже глупо …
    А так хорошая статья!

    Нравится

  5. ЛжеДмитрий said, on 02.05.2011 at 9:36 пп

    Буду улучшать свой сайт. Пора прогрессировать.

    Нравится

  6. Дмитрий said, on 26.01.2011 at 2:22 пп

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

    Нравится

    • awebdesign said, on 26.01.2011 at 11:20 пп

      Спасибо большое! Все ссылки оказались битыми — ужас. Все поменяла, можете продолжить чтение🙂

      Нравится

  7. mixa said, on 25.11.2010 at 12:01 дп

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

    Нравится

    • awebdesign said, on 25.11.2010 at 12:16 дп

      Ну это не так. Explorer 10 полностью готовят к HTML5, потом, как это? Ну был HTML, потом HTML2, потом третий и четвертый, теперь пятый. И какие приложения? Ты просто сам пишешь страницу на новом языке разметки, который частично поддерживается нынешними браузерами, неподдерживаемое пока поведение корректируется с помощью тобой же написанных jQuery и CSS, но все в расчете потом на HTML5. Это просто неизбежный путь развития веба, хотим мы этого или нет.

      Нравится

  8. VITEK said, on 22.11.2010 at 3:04 пп

    Да статья действительно хорошая. Большое спасибо автору. Я узнал много нового для себя.

    Нравится

  9. awebdesign said, on 08.11.2010 at 11:52 дп

    Раскрутка сайта на любом HTML одинакова. Если сделаете сайт — высылайте ссылку, поставлю на блог, людям интересно смотреть примеры использования новой технологии, сделаете доброе дело для людей, заодно и сайт чуть «подкрутите».

    Нравится

  10. unglued said, on 07.07.2010 at 2:37 дп

    Большое спасибо за отличный перевод. Буду заходить к Вам на сайт почаще.
    Кстати, у Вас в тексте пара ошибочек закралась: в первом абзаце «создать прАвильный проект», далее по тексту «со страницу на страницу», «вроде и и заканчивая и». Есть еще, рекомендую вычитать текст получше.

    Нравится

    • awebdesign said, on 07.07.2010 at 10:19 дп

      Спасибо! Постараюсь вычитать. Этот новый Ворд почему-то ошибки не показывает, может, кто-то знает, как спелинг настроить?

      Нравится

  11. quediania said, on 22.05.2010 at 11:42 дп

    Ниче се, я и не знал

    Нравится

  12. Jeckouccera said, on 15.05.2010 at 6:23 пп

    Всем привет! Блольшое спасибо автору за такой материал очень интересно. Буду пробывать, как говорится труд сделал из человека волосатого человека=))) Еще раз респект. Автор можем поменяться постовыми=)

    Нравится

  13. pevaadulafe said, on 09.05.2010 at 7:06 дп

    интересно было бы с вами лично пообщаться )) вы в аське бываете? или в скайпе?…

    Нравится

    • awebdesign said, on 09.05.2010 at 10:07 дп

      Зашла к вам на блог :)) в ливджорнал. Че-то мы, по-моему, слишком по возрасту разные🙂, если только это не сугубо коммерческий проект, типа как когда я в «Хакере» работала, «Советы бывалого» писал под 16-летнего пацана дядечка лет 30-35-ти.

      Нравится

  14. koshka_li said, on 15.04.2010 at 5:41 пп

    Как вам идея выпустить электронный каталог по вашему ресурсу? могли бы все интересные статьи собрать в zip и давать возможность скачать людям?! Я бы воспользовалась!

    Нравится

    • awebdesign said, on 16.04.2010 at 6:44 дп

      Интересно! А более подробно — что вы имеете в виду? Какие бы статьи хотели скачать? И ведь можно просто сделать закладку на статью, хотя закладки имеют свойство теряться :))
      Напишите, какие вам интересны, сделаю каталог :)!

      Нравится

  15. Stencescots said, on 30.03.2010 at 8:20 пп

    Извините что как в игре побывал🙂 /

    Нравится


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

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