ГлавнаяБлог им. Reveller › 10 Причин использовать HTML5

10 Причин использовать HTML5

Вы до сих пор не используете HTML5? Возможно у вас есть на то причины, да и он не адаптирован до конца, не совместим с IE, а возможно вы просто преданы обычному XHTML коду. HTML5 – это эволюция, которая уже давно необходима Интернету и именно за ним будущее, хотите вы того или нет. HTML5 не является сложным языком и хотя он все еще не адаптирован до конца, есть много причин, чтобы начать использовать его прямо сейчас (конечно после прочтения этого поста.
В сети опубликовано огромное количество постов о HTML5, его использовании и преимуществах, да это еще один такой же пост. Но я все еще считаю целесообразным писать об этом языке и делиться с другими дизайнерами и разработчиками, так как его активно внедряют такие гиганты как Apple и Adobe. Именно на этом языке Adobe создает новые продукты. Главной проблемой этого языка пока является то, что многие думают о нем как о мистике. Для них это как летающая машина, как некая великолепная идея, о которой стоит подумать, но ее осуществление не практично. Однако они ошибаются, ведь именно сейчас и есть то время, когда использование HTML5 очень актуально!

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

10 – Доступность

HTML5 облегчает создание полностью доступных сайтов по 2 главным причинам: семантической и ARIA.Новые HTML заголовки как , , , , и другие, дают пользователям легкий доступ к контенту. До этого ваши пользователи не могли определить то, что дает тот или иной , так как к нему бл приписан ID или класс. А с новыми тегами, пользователи могут легко изучить HTML документ и получить лучшее представление о его строении.

ARIA – это W3C спецификация, которая в основном используется для присвоения специальных “ролей” элементам HTML документа, изначально создавая важные отметки на странице: хэдер, футер, навигацию. Данная спецификация была переработана и практически не использовалась, так как она не была валидна, однако HTML5 сделает данные атрибуты валидными. Для того, чтобы узнать больше о спецификации ARIA вы можете посетить эту страницу http://www.w3.org/WAI/intro/ariahttp://www.w3.org/WAI/intro/aria.

9 – Поддержка аудио и видео

Забудьте о Flash плеере и других сторонних мультимедиа приложений, теперь ваши аудио и видео записи будут доступны при помощи простых HTML5 тегов и . Раньше, для того, чтобы ваши мультимедиа записи воспроизводились корректно, вам нужно было использовать и настраивать параметры тегов и . И зачастую они перерастали в огромные непонятные коды. HTML5 теги видео и аудио рассматривают все как изображение и выводятся следующим образом: . А что же с параметрами высоты, ширины и автоматического воспроизведения? Не беспокойтесь, их параметры вы также можете легко прописать: .

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

<video poster="myvideo.jpg" controls>
<source src="myvideo.m4v" type="video/mp4" />
<source src="myvideo.ogg" type="video/ogg" />
<embed src="/to/my/video/player"></embed>

8 – Тип документа
html5

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


7 – Более чистый код

Если вы заботитесь о простоте и легкости кода, тогда HTML5 – это лучший выбор. HTML5 позволяет вам писать чистый, информативный и семантический код, который позволяет разделять значение от стиля и контента. Взгляните на этот просто код навигации:

<div id="header">
<h1>Header Text</h1>
<div id="nav">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>

Этот код довольно чистый и простой, не так ли? Однако с HTML5 вы можете сделать его еще проще, придав разметке больше значения:

<header>
<h1>Header Text</h1>
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</header>

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

6 – Более продвинутое хранение данных

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

Локальное хранение это просто отлично с точки зрения многих аспектов, именно это позволяет HTML5 инструментам запускать приложения без сторонних плагинов. Имея возможность хранить данные в пользовательском браузере, вы легко сможете реализовывать следующее: хранить пользовательскую информацию, кэшировать данные, загружать предыдущее состояние приложения пользователя. Если вы заинтересованы в локальном хранении, то вы можете познакомиться с прошлогодней статьей Кристиана Хейлмана (статья)

5 – Улучшенное взаимодействие (использование)

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

Кроме , HTML5 предлагает ряд API, которые также позволяют создавать веб приложения:

* Drag and Drop (DnD)
* Офлайн база хранения данных
* Управление историей браузера
* Окончание документа
* Воспроизведение мультимедиа по времени

За более подробной информацией по API вы можете обратиться сюда html5doctor

4 – Разработка игр

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

Совсем недавно вышли уроки по тому, как разрабатывать игры на HTML5, прочесть их вы можете тут:

http://www.script-tutorials.com/html5-game-development-lesson-1/

http://www.script-tutorials.com/html5-game-development-lesson-2/

http://www.script-tutorials.com/html5-game-development-lesson-3/

http://www.script-tutorials.com/html5-game-development-lesson-4/

3 – кроссбраузерность

Все современные браузеры поддерживают HTML5 (Chrome, Firefox, Safari IE9 и Opera), а doctype в HTML5 был сделан таким образом, что его могут понимать все даже самые старые браузеры. Однако, не смотря на то, что они понимают doctype, это не означает, что они понимают все теги HTML5. Все это было сделано для простоты и кроссбраузерности. Что касается других версий IE, то тут мы можем использовать Javacript:

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

2 – Мобильные устройства

Мобильная технология становится все популярнее с каждым днем. Я знаю, что это может звучать сумасшедше, но мобильные устройства захватывают весь мир. Происходит массовая адаптация мобильных сервисов, а это означает, что мобильными браузерами и приложениями будет пользоваться все больше и больше людей. Для такого развития как раз отлично подходит HTML5. Adobe объявил о “смерти” мобильной технологии Flash, а у вас теперь есть возможность разрабатывать мобильные веб приложения при помощи HTML5.

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

- Viewport: позволяет вам определить размеры и настройку увеличения в окне браузера.

- Full Screen Browsing: специальные значения, которые позволяют вашим девайсам Apple производить просмотр в полноэкранном режиме.

- Home Screen Icons: это как иконки на рабочем столе, эти иконки используются для добавления закладок на рабочий стол мобильных устройств на Android.

Для получения большей информации по оптимизации под мобильные устройства вы можете посетить эту страницу: http://www.html5rocks.com/en/mobile/mobifying.html

1 – Это Будущее, не отставайте от него!

Причина №1 – будущее, начните использовать HTML5 сейчас и вы будете впереди. Он ни куда не денется, а со временем адаптируют все больше и больше новых элементов, все больше и больше компаний начнут использовать и развивать его. HTML5 это просто HTML, не нужно его бояться, его не нужно будет учить заново. Если вызнаете как писать на XHTML, то значит вы знаете как писать и на HTML5, почему бы тогда не использовать все его преимущества?

Если честно, то я предпочитаю писать на HTML5 потому, что мой код становится меньше и чище, всеми остальными преимуществами данного языка я пока не пользовался. Вы можете использовать его прямо сейчас, не меняя существующего дизайна сайта, но упрощая и облегчая семантическую разметку сайта. А может быть, вы сделаете мобильную игру, которая перевернет мир? – кто знает…

Источник

Отзывы

vrang 09.02.12 15:25
А бралось этого где-то отсюда? (там как раз по поводу перепостов внизу)
PS мне лично, как-бы пофиг, но не хочется чтобы у владельцев блога потом были проблемы и возня с удалением материалов, т.к. господа сеошники часто эти самые перепосты своих материалов мониторят
Reveller 09.02.12 15:28
так лучше)) просто маткриальчик хороший
vrang 09.02.12 15:29
Так отлично :)
А материальчик да, но пока ие не поддерживает приходится один фиг пляски с бубном устраивать персонально под него.. так что ждем 10 версии ослика... ну или 11, или 12...
или пока издохнет )
Reveller 09.02.12 16:04
ничего, уже итак даже ие6 похоронили, дело вроде бы идет на поправку и скоро ибаццо меньше нужно будет
vrang 09.02.12 16:07
Ну вот 6 только-только похоронили, а уже 9 версия как бы есть.
А фф или опера, или хром... кто там вообще эти старые версии считает и под них подстраивается-то?
Если проект изначально странен и работает не по общепринятым стандартам, а "как захотелось", то ожидать что-то хорошее уже надежды нет :(
Reveller 09.02.12 16:17
у меня такое было, захожу к клиенту, мне клиент этот моцк весь совокупил, что у него в админке объявления не удаляются, я себе на виртуалку XP поставил туда эксплорер 6, все работает всё удаляется, яж тогда к ним в офис а у там вапще песдетс, на древнеримском компе посыпанном нафталином стоит себе винда "Милениум" та которая в народе линолиумом звалась за "гибкость" и браузер Нетскейп хуйзнаеткакой, наверное от старого бородатого сисьадмина остался... С такими хуй похорониш устаревшую технологию! Потом я узнал что у них 60 летний дедушко админил)))
Reveller 09.02.12 16:19
И пол сайта на этом динозавре ваще нихуя не работает (забыл добавить)
vrang 09.02.12 16:41
Да у нас такое сплошь и рядом. Так сдашь проект, вроде все ок, а потом звонки, мол у нашей бухгалтерши ваш сайт не пашет. И оказыватеся что у бухгалтерши тот же миллениум, и осел пятый... Так и живем, век нанотехнологий, блин :(
Павел Моценко 09.02.12 23:38
Линолеум с нетскейпом )))))) да блин. Были времена и были люди. Аж ностальгия взяла. Хотя и ие и навигатор я не признавал. Пользовался оперой а сейчас честно говоря очень расстроен, что она стала тормозом похлеще лысыци. Прерывание модема... Зедержка... Коннект на 33,6 кб/с яхооооооууу!!!
Николай Моценко 10.02.12 09:07
она стала тормозом похлеще лысыци
лысыцо 9 еще ничего по сравнению с ёпперой)))
vrang 10.02.12 13:28
странно... у меня опера по-прежнему быстрее лисы работает
Николай Моценко 10.02.12 22:16
а с хромом сравнивала?
vrang 13.02.12 10:48
сравнивала... хром хорош, но навязчив :), то через дорогу перевести предлагает, то еще чего.. задолбал через три дня, я умаялась по настройкам лазить фигню всякую отключать, да и по скорости на глаз без разницы, так что смысла переходить пока не вижу
Павел Моценко 13.02.12 16:54
странно... у меня опера по-прежнему быстрее лисы работает
а тут задрочка есть! Нельзя их обобщать. Вот в винде опера тормоз ужасный, хром летает, фокс чуть медленней. В убунте все три работают сравнимо по скорости. )))
Чтобы оставить отзыв авторизируйтесь на блоге или войдите через социальную сеть
© Харьковблог - блог города Харькова
Напишите нам
create by motsenko.com
Харьковблог в