Html5 и скрипты – что дает новая технология


Содержание материала:

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Новые теги HTML5

Какие теги добавили в язык HTML5?

В язык HTML5 добавили множество новых тегов:

— теги семантически описывающие структуру страницы,
— теги описывающие новые технологии,
— теги обогащающие язык HTML.

Семантическое описание структуры страницы в HTML5

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

Семантика HTML5 на уровне структуры страницы

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение структуры страницы:

— теги обрамляющие элементы дизайна верхней части сайта, так называемая «шапка страницы». Также теги header можно использовать как верхнюю часть тега section .

— теги обрамляющие основное меню на сайте.

— теги обрамляющие нижнюю часть сайта, так называемый «подвал страницы», который может содержать имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно использовать как нижнюю часть тега section , т.е. сами теги footer будут находиться между тегами section

— теги обрамляющие повторяющиеся части страницы или основного контента, например если на странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики) , то появится страница на которой будут ссылки с описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами section , а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.

Естественно, всё это пока находится лишь на уровне рекомендаций, и вы можете вставлять данные теги куда угодно, используя их вместо тегов

Семантика HTML5 на уровне текста

Рассмотрим список новых тегов HTML5, отвечающих за семантическое разделение текста страницы:

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

— теги предназначены для создания дат и/или времени в формате
ISO вида: YYYY-MM-DDThh:mm:ss , такой формат понятен компьютерным программам. Теги time могут обрамлять дату или текст, если тег обрамляет текст, то в него добавляют атрибут datetime , значением которого выступает дата и/или время в формате ISO.

— теги предназначены для хранения информации, которая либо скрыта, либо отображена (работает наподобие спойлера) .

— теги обрамляют заголовок, если по нему щелкнуть то появится текст (можно использовать в качестве спойлера) , находятся между тегами details .

Дополнительные теги языка HTML5

Список новых тегов HTML5, обогощающих язык:

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

— теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки файла), при котором результат измерения меняется в реальном времени.

— тег должен находиться между тегами menu , используется при создании сценариев на JavaScript.

— между этими тегами помещают тег command .

— теги предназначены для вывода работы скрипта.

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

— теги обрамляют описание какого-либо объекта (например изображения) , находятся между тегами figure . .

— теги группируют различные объекты страницы имеющие свои описания, например изображения с описанием, товары с описанием и т.д.

— теги предназначены для группировки заголовков h*

— тег используется для генерации открытых/закрытых пар ключей, шифрования/расшифровки данных, создания/проверки цифровой подписи.

— теги обрамляют текст и аннотацию к нему.

— теги находятся между тегами ruby , предназначены для обрамления аннотации.

— теги предназначены для браузеров которые не поддерживают теги ruby .

— тег указывает браузеру в каком месте переносить слово, если это слово не вмещается в окно браузера.

Теги HTML5 описывающие новые технологии

В HTML5 появилась возможность использования множества технологий и API, которые являются частью языка HTML5, а не сторонними плагинами, вот некоторые из них:

— теги предназначены для воспроизведения видеофайлов, без использования сторонних программ (плагинов, расширений) .

— тег предназначен для указания пути к аудио/видео файлам, находится внутри тегов audio и video .

— теги предназначены для создания специальной области на сайте, в которой можно создавать векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен заменить Flash-технологию (угу в теории…).

Мы верстаем сайты в HTML5

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

Целью разработки нового стандарта стала более простая, гибкая возможность создания динамических c технологиями сегодняшнего дня, а был разработан в и предназначался, по большей части, для статических страниц. В наше время на сайтах присутствует множество различного динамического контента, в частности: видео, аудио, обновляемая информация в определенном блоке без перезагрузки всей страницы Хотя данные вещи мы видели на сайтах и до разработки HTML5, но данный функционал приходилось реализовывать при помощи скриптов и сторонних плагинов. Посетитель сайта визуально может и не заметит отличий от HTML4, но для разработчиков сайтов существенно упрощается сам процесс создания .

Например, для воспроизведения видео на HTML4 требуется плагин Adobe Flash Player. Работа данной технологии сильно зависела от производительности процессора, поэтому на слабых компьютерах и различных устройствах заметно падала производительность. Так же без наличия данного плагина не представляется возможным воспроизведение видео в принципе. А в HTML5 воспроизведение видео может происходить без сторонних плагинов, при помощи самого браузера, что позволило убить сразу двух зайцев: отказаться от ресурсоемкого плагина и сделать возможным воспроизведение видео на любых устройствах. Это всего лишь один пример реализации данного стандарта, так что HTML5 дал много новых возможностей для создания необходимого функционала на .

Поддержка HTML5 браузерами

На данный момент в для тэгов HTML5 необходимо прописывать «display: block;», чтобы браузеры их правильно обрабатывали.

Как обычно, для браузера Internet Explorer до девятой версии не так все просто. Для того, чтобы новые тэги отображались как надо, необходимо подключить специальный скрипт в следующим кодом:

Этот плагин основан на простом решении: он создает необходимый элемент в DOM браузера Internet Explorer, в результате чего он без ошибок отображает стилизацию тэгов HTML5, за исключением , и .

HTML5 — минимальная структура страницы

Разметка страницы начинается с «DOCTYPE» — при помощи него мы сообщаем браузеру тип разметки кода и ее версию. Для HTML4 доктайп достаточно длинный, а для HTML5 доктайп имеет единый вид и его достаточно легко запомнить:

Такие изменения по минимизации кода претерпели и другие тэги, вот некоторые из них:

И так, шаблон пустой страницы на HTML5 будет выглядеть следующим образом:

Основные тэги HTML5 для верстки страницы

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

Перейдем к разбору новых тэгов и для чего они предназначены.

Используется для обозначения «шапки» сайта, так и для заголовков разделов.
Используется для обозначения «подвала» сайта, так и для разделения второстепенной информации в разделе от главной.
Группировка тэгов

, когда они логически используются вместе. Например, название компании и слоган.

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

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

Применение новых технологий в сайтостроении. HTML5, CSS3 в современном веб-программировании.

По мере совершенствования и применения современных технологий в браузерах (программы для работы с интернетом), программирование в сайтостроении имеет возможность продолжать своё развитие и выходить на новый уровень развития. Или наоборот, браузерам приходится постоянно обновляться при появлении новых технологий в веб-программировании. Как бы там ни было, сегодня веб-программирование шагнуло намного вперёд благодаря новым обновлённым версиям HTML5 и CSS3.

Благодаря усовершенствованному языку разметки гипертекста HTML5 веб-мастера получили возможность создавать веб-приложения, которые помогают по новому использовать и оптимально внедрять аудио и видео файлы, графику и анимацию на страницы сайтов. HTML5 позволяет максимально структурировать веб-документ, опираясь на основную технологию семантического веба RDF. Новая разметка HTML5 заставляет веб-приложения ускорять свою работу за счёт использования кэша. Иногда веб-ресурс может продолжать работать при кратковременном отключении Интернета.

При наполнении сайта контентом, технологии веб-программирования WebGL CSS3 3D позволяют применять трехмерную графику при использовании браузеров. Технология Canvas API предоставляет возможность пользователям интернета рисовать онлайн на веб-страницах. Теперь, сайты могут предлагать своим посетителям просматривать видео и слушать аудио файлы без установки на компьютере плагинов типа Adobe Flash Player.

В комплекте с HTML5 отлично чувствует себя, как его неотъемлемая часть, XMLHttpRequest 2. Данная технология (сокращенно XHR2) помогает браузеру производить запросы к серверу не перезагружая при этом страницы сайта.

Ну и конечно, разве может HTML5 обойтись без CSS3. Эти два неразлучных друга способны управлять практически всеми элементами страниц сайта. Создавая чудесные дизайнерские эффекты на веб-страницах, они не приносят вреда семантической структуре проекта, от них не страдает производительность и скорость работы веб-ресурса. Используя технологии HTML5 и CSS3 можно вполне обойтись без сторонних скриптов.

Сегодня в основном все популярные браузеры поддерживают новые технологии сайтостроения. Те элементы HTML5 и CSS3, которые не могут воспроизвестись браузером, в любом случае не наносят вред веб-документам сайта, ведь они всего лишь расширенное продолжение своих прародителей HTML и CSS.

При заказе своего нового интернет проекта в какой-либо веб-студии обязательно обращайте внимание на используемую технологию при создании сайта. Профессиональная разработка сайтов подразумевает использование новых технологий в сайтостроении и её яркие представители находятся здесь.
Учитывая стремительное развитие современных технологий веб-программирования языки разметки HTML5, CSS3 станут неотъемлемой частью любого сайта.


Автор: Saah | Просмотров: 1 223 | 25-12-2015,Пт, 19:41

Html5 и скрипты – что дает новая технология?

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

Я не буду рассказывать о каждом новом элементе в пятой версии HTML, но эти девять являются одними из самых важных.

Введение в семантические элементы

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

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

1. (Статья)

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

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

2. (Раздел)

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

Вы можете даже иметь разделы в разделах, если они соответствуют вашей странице. Помните, что раздел — это просто «тематическая группировка контента», и вы найдете множество мест для его использования.

3. (Заголовок)

Этот элемент «должен использоваться как контейнер для вводного контента. Короче говоря, это часть вашей страницы, которая помогает людям понять, что они собираются читать.

Но не обманывайте себя — вы можете использовать этот контейнер более одного раза. Например, вы можете использовать его для определения названия страницы и вводного абзаца вашего сообщения в блоге. Но вы также можете использовать его, чтобы отметить вводный контент для каждого раздела.

Разделы обычно содержат по крайней мере один тег заголовка — H1, H2 и т. д. Это не обязательно, но если вы используете тег хуже не станет.

4. (Нижний колонтитул)

W3 говорит, что теги нижнего колонтитула обычно содержат «автора документа, информацию об авторских правах, ссылки на условия использования, контактную информацию и т. д.». Вы можете думать о нем как о «домашнем» материале.

В документации также указано, что на вашей странице может быть более одного нижнего колонтитула. Но, по-моему, всю эту информацию лучше держать в одном месте.

5. (Навигация)

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

Это очень простой тег — вот и все. Используйте его для определения раздела навигации и не используйте его снова на своей странице.

6. (Дополнительная «побочная» информация)

Один из самых интересных новых элементов в HTML5 — это aside. W3 дает ему несколько бесполезное определение «некоторое содержание, кроме содержания, в которое оно помещено».

Короче говоря, aside есть все, что связано с (но отдельно от) окружающей информацией. Это может быть боковая панель, которая добавляет детали к вашему контенту. Когда он используется в теге , он предоставляет дополнительную информацию, которая не является необходимой для понимания основного контента.

Например, если бы я включил боковую панель в этой статье, дающую информацию об истории HTML5, это было бы «Дополнительной информацией».

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

7. (Детали)

На многих веб-сайтах есть информация, которая должна отображаться, но не заметно. Возможно, это информация об авторских правах для фотографии. Или мелкий шрифт перед или после статьи. Эта информация является именно тем, для чего предназначен тег деталей.

Когда вы используете тег details, вы создаете скрытый текст, который можно легко отобразить. Вот пример:

Нажмите здесь, чтобы просмотреть информацию.

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

Тег определяет предложение, которое будет показано, а другое содержимое скрыто. Обратите внимание, что вы можете использовать другие теги в разделе сведений: заголовки, разделы и т. д.

Есть и другие интересные вещи, которые вы можете сделать с HTML, даже если вы не владеете CSS или JSON.

8-9. и (Рисунок и его описание)

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

Если фигура удалена со страницы, она не повлияет на поток содержимого.

входит в тег рисунка и указывает подпись для изображения. Это может выглядеть примерно так:

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

Воспользуйтесь преимуществами HTML5

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

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

Вы начали использовать HTML5? Какие новые элементы вы считаете наиболее полезными? Поделитесь своими мыслями в комментариях ниже!

HTML5 простыми словами

3 октября 2011 | Опубликовано в статьюшечки | 12 Комментариев »

Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.

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

Поможет нам в этом HTML5 DOCTOR, сообщество активных последователей HTML5, проповедующих его использование, и в частности, Брюс Лоусон:

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

Вот перечень наиболее часто задаваемых нам вопросов, на которые мы дали ответы неспециализированным языком. Журналисты, пользуйтесь на здоровье! цитирование приветствуется, но не является обязательным )))»

Что такое HTML5?

Зто зависит от того, о чем идет речь. Выражение «HTML5» используют в трех разных значениях:

Наиболее точным определением понятия «HTML5» будет следующее: это спецификация, разработанная совместно двумя группами, W3C и WHATWG. Существуют разные версии спецификации HTML5.

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

  • Его разработали для обеспечения взаимодействия страниц в разных браузерах. Сегодня мы используем различные браузеры (к примеру, на работе у нас может стоят IE, в телефоне — Safari или Opera, а дома -Firefox) и было бы неразумно и досадно, если бы сайт не работал бы в чем-то из них.
  • Все производители браузеров — – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) — все они сотрудничают между собой, равно как и с еще кучей органицазий и частных лиц: с Netflix, Adobe, IBM, HP, BBC и многим другими.
  • Он разработан, чтобы расширить возможности современного веба, не нарушая при этом работы уже существующих веб-страниц.
  • Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.
  • HTML5 и его друзья

    в дополнение к самому ядру HTML5, WHATWG разработали другие спецификации, такие как Web Workers, Web Sockets, Web Database. Все они дополняют его новыми свойствами и функциями, полезными для приложений, игр и тому подобного.

    Многое из их содержимого изначально было частью самого ядра, но по некоторым производственным и организационным причинам было выведено из него. Вся группа вместе называется Web Applications 1.0.

    3. Новые «супер-веб-технологии»

    Часто большинство людей, налеких от веб-разработки (а часто и не очень сведущие разработчики), говоря «HTML5», подразумевают целый ряд технологий: ядро HTML5, его дополнения — и еще уйму вообще никак не связанных с ними технологий, таких как геолокация (способность вашего браузера «распознавать» ваше местонахождение), ориенацию устройства, события касания, анимацию CSS3 (которая может заменять несложную Flash-анимацию), SVG (способ отображения графики четко и гладко на экране любого размера), и недавно вошедший сюда WebGL, позволяющий использовать популярные библиотеки 3D-графики в веб, внося трехмерность в веб-гарфику и браузерные игры.

    Многое из этого разработано W3C, а WebGL, к примеру, создан Khronos Group.


    Также важно не забывать, что так называемые «демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

    Зачем придумали HTML5?

    HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

    Как много браузеров поддерживают HTML5?

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

    А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.

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

    Кто является движущей силой HTML5?

    Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

    Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

    Кто пользуется HTML5?

    Множество людей и компаний: Boston Globe Newspaper; Nationwide Building Society, Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

    Когда будет завершена работа над HTML5?

    Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

    Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

    Правда ли, что HTML5 несовместим с Internet Explorer?

    Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

    Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

    Правда ли, что HTML5 предназначен для мобильных устройств?

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

    «Элементы должны разрабатываться для повсеместного использования. Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

    С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

    Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.

    Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

    Вытеснит ли HTML5 Adobe Flash?

    Нет — по крайней мере, я на это надеюсь. Многие годы Flash оставался единственной возможностью внедрить видео на страницу. Теперь, с появлением HTML5, появилось соперничество, в котором будут развиваться обе технологии, что просто замечательно для разработчиков.

    Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

    Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.

    Перевод — Дежурка. Автор оригинальной статьи — Bruce Lawson, один из соавторов книги Introducing HTML5.

    Разработка сайтов на HTML5. Что нового в HTML5?

    Поговорим об отличиях HTML5 от HTML, новых возможностях и поддержке HTML5 браузерами сегодня. Расскажу куда заглянуть, чтобы быстро освоиться в HTML5 и как изучить с нуля.

    Поддержка браузерами HTML5

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

    На какие браузеры будем обращать внимание? Заглянем на минутку на GlobalStats от StatCounter и узнаем статистику за последнее время. Вот такая статистика была на момент написания этой статьи.

    На первой картинке видна мировая статистика, на второй — данные по России.

    Хорошо видно, что Chrome по популярности среди пользователей уже несколько лет вне конкуренции. На втором месте — Firefox. IE с каждым годом теряет позиции. В России хорошее место также занимает Opera и Yandex Browser, у которого позиции только растут. Не стоит забывать и про Safari, который неплохо смотрится в общей динамике. Вот пожалуй и все браузеры, которые сегодня стоит учитывать при верстке страниц, в частности на HTML5.

    Чтобы узнать, насколько хорошо каждый браузер поддерживает HTML5, есть 2 отличных сервиса caniuse.com и html5test.com. Только следует сразу поправиться, — нужно говорить не о поддержке браузерами HTML5, а о поддержке различных возможностей, которые стали доступны при переходе на HTML5.

    С помощью сервиса caniuse.com можно увидеть, что сегодня поддержка основными браузерами уже около 86 — 87%, у Safari чуть хуже. Воспользовавшись поиском на этом сервисе, вы можете быстро получить интересующую вас информацию.

    Не нужно думать, что 86% — это не 100%, этого может никогда не произойдет. Все браузеры будут отображать HTML5-страницы, но в каждом браузере пока что не все новые возможности одинаково хорошо реализованы. При переходе к HTML5 вы ничего не теряете, а наоборот, только выигрываете. Правда есть некоторые особенности, которые стоит иметь ввиду при новой верстке страниц.

    Сервис html5test.com также очень удобен. Он позволяет протестировать ваш браузер и посмотреть, сколько очков он наберет. Таблица результатов очень наглядная.

    Я протестировал свой Chrome (он набрал 521 очко из возможных 555) и заметил, что не поддерживается: input type=datetime в полях формы, элементы: time, menu (в toolbar и popup), видео формата MPEG-4 ASP и прочее.

    Здесь очень удобно получить информацию по каждой позиции. Картинку приводить не буду, вы лучше сами перейдите по этой ссылке и посмотрите, что будет у вас.

    А вот результаты тестов в других браузерах:

    — Firefox — 478 очков (не очень поддерживает новые элементы форм и потоки),

    — Opera — 520 очков.

    Что нового в HTML5? Отличия между HTML и HTML5

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

    Что появилось нового:

    • Рисование в реальном времени на прямоугольном холсте с помощью JavaScript
    • Расширенные возможности проигрывания видео — и аудио —
    • Локальное хранилище — стало доступным хранить большие объемы информации прямо в браузере пользователя
    • Многопоточность
    • Геолокация — можно узнать местонахождение пользователя
    • Управление историей браузера
    • Drag-and-drop
    • Микроданные
    • Редактирование

    Чтобы узнать, какие из новых возможностей HTML5 и CSS3 поддерживает браузер пользователя, поможет JavaScript-библиотека Modernizr.

    Подробнее об этих возможностях смотрите здесь и здесь .

    Также HTML5 поддерживает MathML (математическая разметка для формул) и SVG (форма изображений, масштабируемая векторная графика).

    Упрощения элементов страницы HTML5. Что нового?

    • Доктайп: , его легко запомнить
    • Корневой элемент:
    • Кодировка симоволов:
    • В некоторых ссылках можно не указывать тип:

    Новые теги HTML5

    В HTML5 появились новые теги для разметки страниц. Это логические блоки для удобства формирования структуры страниц, они ничем не отличаются от блоков

    Вот основные из новых:

    • — шапка/заголовок, может быть несколько на странице в разных разделах
    • — основной контент
    • — подвал страницы

    Html5 и скрипты – что дает новая технология?

    От переводчика: Сотрудники Adlogic Systems внимательно следят за новыми тенденциями в области веб-разработки. Представляем вниманию читателей обзор 7 удивительных технологий, обещающих изменить как процесс разработки сайтов, так и их обличие. Английский оригинал статьи доступен на сайте elated.com.

    Мир сайтостроения стремительно меняется. Кажется, будто новые фреймворки и дизайнерские приложения выходят каждый день! В настоящей статье кратко описаны 7 фантастических новых инструментов веб-дизайна и программирования, обещающих значительно упростить создание красивых, функциональных сайтов и веб-приложений. Наслаждайтесь!

    Meteor: все для клиента

    Meteor новая платформа для разработки и публикации веб-приложений. Авторы сулят ей популярность на десятилетия! Звучит чрезвычайно смело, но они могут оказаться правы.

    Исторически сложилось, что веб-сайты в основном строятся по принципу «сделать все на сервере и отправить HTML в бессловесный браузер». Разработчики Meteor утверждают, что этот метод устарел. Современные браузеры поумнели и способны самостоятельно выполнять основной код приложения, забирать данные с сервера и множества сторонних веб-сервисов. В этой связи не имеет смысла строить веб по-старому, гораздо удобнее браузеру забирать только необходимые данные, если нужно из нескольких источников, и самостоятельно формировать разметку.

    Приложения Meteor пишутся на старых добрых HTML, CSS и JavaScript. Ключевой момент JavaScript может выполняться на сервере (поверх Meteor + Node.js) и/или в браузере. Серверный Meteor пакует скрипты и другие нужные ресурсы и отправляет их в браузер в сжатом виде.


    В Meteor используется парадигма реактивного программирования, согласно которой элементы на странице автоматически обновляются при изменении данных приложения. Это сокращает объем работы программиста и потенциально приводит к более надежным пользовательским интерфейсам.

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

    Похоже, Meteor превосходный способ разработки современных веб-приложений; автору не терпится самому его попробовать. В настоящее время проект находится в стадии «предпросмотра», а версия 1.0 появится через несколько месяцев. Между тем, Саша Грейф (Sacha Greif) написал отличную статью (EN) о том, как создать приложение на Meteor всего за 45 минут.

    Tumult Hype 2.0: до свидания, флеш

    Mac-приложение Hype от Tumult вышло пару лет назад, но его последняя версия 2.0 наконец-то заняла свою нишу. Hype позволяет конструировать интерактивный анимированный веб-контент по ключевым кадрам с помощью инструментов рисования и временной шкалы. А затем экспортировать результат парой щелчков мыши в стандартные HTML5, CSS и JavaScript с картинками, работающие во всех настольных и — что немаловажно — мобильных браузерах. Это как аналог Flash Professional (приложение от Adobe), но для HTML5 и гораздо дешевле.

    Автор изучал Hype 2.0 несколько недель и уверен, что хотя приложению не хватает многих продвинутых функций Flash Professional, оно вполне пригодно для создания профессионального интерактивного веб-контента. Оцените игры и инфографику, сделанные на Hype.

    Главное в новой версии 2.0: бесплатное приложение Hype Reflect для моментального предпросмотра на iPhone и iPad, значительно улучшенная поддержка мобильного контента, улучшенная поддержка аудио, а также движения по кривой траектории. В Macworld есть неплохой обзор (EN) новых возможностей приложения.

    Sketch: мечта веб-дизайнера

    Хотя популярность фотошопа среди веб-дизайнеров трудно пошатнуть, многие ищут более рациональные и доступные решения, лучше приспособленные конкретно для веб-дизайна.

    Sketch от Bohemian Coding предназначен именно для этой роли. Как и Hype, приложение Sketch работает под Mac и прошло путь от относительно простого дизайнерского инструмента до красивой, полнофункциональной программы, чрезвычайно удобной для интерфейсных дизайнеров. Sketch может похвастаться:

    Векторной графикой для неразрушающего редактирования и независимости от разрешения

    — Встроенной поддержкой типографской сетки

    — Поддержкой нескольких страниц и рабочих областей в одном документе

    — Удобной нарезкой и обрезкой изображений

    Стилями слоев для простого добавления эффектов, например заливки, границ и теней

    Саймон (Simon) в команде Elated Communications использует эту программу почти для всей своей веб-дизайнерской работы. Его статья (EN) о Sketch — отличный обзор ее возможностей.

    LiveStyle: моментальное редактирование CSS в обе стороны

    LiveStyle от Emmet — волшебное дополнение Chrome и Safari для моментального редактирования CSS.

    Может быть вы слышали о дополнениях вроде LiveReload, отслеживающих изменения в локальных CSS-файлах и автоматически обновляющих стили в браузере без перезагрузки страницы?

    LiveStyle еще круче. С ним вам даже не нужно ничего сохранять! При изменении CSS в редакторе дополнение мгновенно обновляет стили в браузере, а при изменении в браузере (встроенными средствами) меняется код в редакторе.

    С этим дополнением можно редактировать любые стили даже без локальной копии файла, а также сжатый CSS! Например, видео на главной странице сайта дополнения показывает прямое редактирование страниц Facebook и Google.

    Секрет волшебства в анализе изменений CSS на структурном уровне и передаче только этих изменений из браузера в редактор и обратно. В настоящее время доступна бесплатная бета-версия, работающая с популярным редактором Sublime Text, но разработчики обещают вскоре выпустить платную версию с более широкой поддержкой редакторов.

    Bootstrap 3: современный клиентский фреймворк с подходом «от мобильного»

    Bootstrap — это фреймворк клиентской части веб-приложений, быстро набирающий популярность в последнее время. Изначально разработанный под Твиттер, он превратился в стремительно растущий проект с открытым исходным кодом.

    Вышедшая в августе 3 версия может похвастаться в том числе такими инновациями:

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

    Одна из лучших типографских сеток: сетка очень приятна в использовании, в ней есть контрольные точки для телефонов, планшетов, узких и широких настольных экранов.

    Красивая базовая тема: по умолчанию Bootstrap использует минималистичные стили, но теперь есть возможность подключить в качестве основы привлекательную новую тему с великолепной подборкой цветов.

    Отличная программа настройки: с ее помощью можно настроить почти любой аспект фреймворка и создать версию на свой вкус. Результат мгновенно компилируется в браузере, загружается и готов для быстрого развертывания.

    Автору очень нравится Bootstrap; пока что это его главный фреймворк для новых веб-сайтов. Оцените возможности Bootstrap на примерах.

    Macaw: умная программа-верстальщик

    Сегодня каждый веб-дизайнер должен хотя бы немного разбираться в HTML и CSS, но большинство предпочло бы заниматься дизайном, а не версткой. Было бы здорово, если бы дизайнерская программа могла из результатов их труда автоматически создавать код.

    Многие графические редакторы, Fireworks к примеру, поддерживают экспорт в веб-страницу но результат обычно плачевен: уродливый многострочный HTML и бессмысленные CSS-классы.

    Пришло время Macaw. По словам разработчиков приложения, оно распознает элементы дизайна на семантическом уровне, выдавая четкие, сжатые и понятные HTML и CSS, близкие к результату работы верстальщика.

    Основные особенности программы:

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

    Соединение селекторов: умный движок Alchemy организует CSS-селекторы наиболее быстрым и эффективным способом, создавая красивый, удобный для чтения код.

    Преобразование абсолютного расположения в статическое: дизайнер может нарисовать страницу в Macaw как если бы он использовал абсолютное позиционирование. Редактор сам преобразует расположение в статическое со всеми необходимыми полями, отступами и смещениями.

    Резиновые типографские сетки и адаптивные макеты: в Macaw к документу произвольного размера применяется резиновая типографская сетка. Дизайнер может задавать контрольные точки для адаптивных переходов, а затем настраивать стили для разных размеров страницы.

    Экспорт руководств по оформлению: Macaw может даже сам создать страницу, показывающую использованные в дизайне цвета, шрифтовое оформление, сетки и классы. Невероятно!

    Пока что Macaw еще не доступен в продаже, но есть видео, демонстрирующее фантастические возможности приложения.

    Famo.us: плавный веб и 3D

    И последняя, но не менее удивительная технология в обзоре — JavaScript-движок Famo.us, обещающий полностью перевернуть веб-интерфейсы. По сути, Famo.us обходит традиционные способы отрисовки 3D-анимаций в браузерах и общается с графическим процессором напрямую, давая сверхплавную графику с аппаратным ускорением.

    На самом деле замечательно то, что все это делается с помощью JavaScript, позволяя интегрировать эту мощь с более традиционными CSS и DOM. Движок также бесплатен для разработчиков (авторы собираются заработать на сделках с производителями аппаратуры). Он быстро и без проблем работает в широком диапазоне браузеров, от современных настольных до iPhone 3GS, что действительно впечатляет.

    Автор должен предупредить не судить книгу по 3D-обложке и ознакомиться с ее возможностями для двумерных интерфейсов. Вероятно, именно для них Famo.us и будет использоваться в ближайшее время. Представьте «игровые», тактильные мультимедиа-интерфейсы наподобие некоторых в iOS 7. Из видео ниже (на примере iPad) можно понять, что реализуемо на этом движке:

    Автору не терпится увидеть, как разработчики создадут на основе этой технологии веб-приложения, конкурирующие по плавности работы интерфейсов с традиционными скомпилированными.

    А какие новые веб-технологии вдохновляют вас?

    Расскажите какие перспективные веб-технологии, фреймворки и приложения вы с нетерпением ждете. Возможно, вы уже используете что-то из описанного в этом обзоре? Поделитесь своим мнением в комментариях!

    «Технологии», которые перечислены в данной статье не являются технологиями, а скорее инструментами для разработчиков. И отображают 2 основных тренда в развитии веба: повышение доступности разработки, и совершенствование инструментов и адаптивность веб-приложений. Оба тренда не новы и имеют место быть с самого начала появления веба. Первый ведет как к снижению стоимости разработки и порога входа, так и к разнообразию контента. Второй — просто эволюция веба, попытка донести контент до потребителя независимо от устройства потребления контента.

    25 шаблонов, 45 лучших логотипов, 100 сайтов, которые изменили web.

    Важно понимать, что web не меняют технологии, web не изменится, благодаря очередному сайту, логотипу, программисту, маркетологу и т.д. Web меняют простые пользователи, а конкретно их потребности. Web это амёба, бесформенная масса, которая будет принимать форму того, что нужно конечному потребителю. Вам важно как и на чём написан facebook? Вы задумывались о том, какой алгоритм шифрования использует ваш мобильный телефон при разговоре? Вы много знаете, сколько памяти в вашей микроволновке? Нет, потому как важен результат, а не решение. Важно приготовить еду, а не увлечённо смотреть на дисплей микроволновки «ваше блюдо готово» в поисках ответа — а как же оно сделано?

    Если брать «сайтостроение», как отдельное направление, то именно пользователи требуют необходимые технологии:

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

    — Параллакс, адаптив, сайтскролл, сайт-игра. Это всё инструменты удержания посетителей, а как следствие привлечение потенциальных клиентов.

    — Е-commerce проекты, с полной системой интеграции с 1C и автоматизацией заказа сайт программа на предприятии. Да, я уже и сам забыл, когда ходил на рынок за техникой. Не за горами «шмотки» и еда.

    Если рассмотреть в разрезе web, как нечто абстрактное, то пока наблюдается тенденция решения проблем и закрытие «дыр» в разработанных ранее технологиях. Например:

    — массовый переход на ipv6;

    — мы очень остро ощутим в ближайшем десятилетии проблему роста скорости пользователя в интернет и на фоне этого практически отсутствием роста скорости на серверах. Представьте целую сеть ботнетов из пользователей интернет с 50 мегабитным каналом у каждого — web можно закрывать. Решением этого может служить переход от системы сервер клиент, к системе клиент клиент (p2p). Торрент-браузер? Чёрт, это звучит клево!

    — интеграция с другими платформами. Если 5 лет назад «интернет на мобильном» звучало дико, то через 5 лет интернет будет подведён ко всему, что имеет дисплей. Скинули ссылку на фильм, и через пару минут она уже на телевизоре.

    Резюмируя, хочется сказать, что не важно как делать и с помощью чего новый web 10.0. Важно, чтобы пользователь получал удовольствие от вашей программы, от вашего сайта и приходил ещё, ещё и ещё.

    HTML 5 Что нового?

    HTML 5 — это новая версия самого популярного языка разметки.

    Уже более 10-ти лет язык гипертекстовой разметки HTML практически не менялся, что было очень странно, учитывая огромную скорость развития Web-технологий, и вот, наконец-то, изменение случилось и появился HTML 5.

    В HTML 5 добавлены несколько новых элементов и атрибутов, а также убраны несколько старых (например, font и center).

    Добавлены следующие элементы:

    В остальном осталось всё без изменений. То есть никаких проблем с освоением HTML 5 не возникнет, при условии, что Вы знакомы со стандартным HTML. Собственно, всё осталось как прежде, только добавились новые возможности.

    Благодаря нововедениям HTML 5 можно существенно облегчить труд Web-мастеров по созданию веб сайтов, упростив ту же самую разметку.

    Наверняка, Вы задаётесь вопросом: «А будет ли работать HTML 5 со старыми браузерами?». Ответ таков: «Конечно, да, но новые элементы, разумеется, отображаться не будут». Или другими словами, новые страницы увидят все, но обладатели современных версий браузеров увидят немного больше и по-другому.


    Я уверен, что в ближайшие время HTML 5 смогут увидеть такой же процент пользователей, как сейчас видят HTML 4, которому уже более 10-ти лет.

    А об использовании новых возможностей HTML 5 мы поговорим с Вами в следующих статьях.

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 8 ):

    Михаил, большой ли толк в данный момент во всю использовать HTML5? На вашем сайте я что-то не нашёл теги из HTML5.

    Ещё рановато, учитывая что не все браузеры его полностью поддерживают, и много пользователей пользуются устаревшими версиями браузеров.

    Михаил, будете ли Вы освещать тему технологии drag-a-drop

    40 важных вопросов и ответов по HTML5

    Введение

    Я, разработчик ASP.NET MVC , недавно искал работу, и на собеседовании много вопросов из тех, что мне задавали, касались HTML5 и его особенностей.

    Поэтому ниже приводятся 40 важных вопросов, которые помогут вам блеснуть знаниями по HTML5 .

    Эти вопросы не являются ключом к успеху при поиске работы, но они, несомненно, помогут вам ориентироваться в теме.

    Какая связь между SGML, HTML, XML и XHTML?

    SGML ( Standard generalized markup language — стандартный обобщённый язык разметки) – это стандарт, который определяет разметку документа.

    HTML – это язык разметки, который описывается с помощью SGML.

    Итак, с помощью SGML было создано DTD (определение типа документа), на которое ссылается и которого должен придерживаться HTML. Поэтому вы всегда можете найти декларацию « DOCTYPE » в начале страницы HTML, которая определяет, какое DTD будет использовать браузер при разборе кода страницы.

    Разбор кода по стандарту SGML был связан с определёнными трудностями, поэтому был создан XML, чтобы облегчить эту процедуру. XML использует SGML.

    Например, в SGML вы должны использовать открывающие и закрывающие теги, тогда как в XML вы можете использовать самозакрывающиеся теги, которые закрываются автоматически (например, “” ).

    XHML был создан из XML и использовался в HTML 4.0 . Поэтому, например, в HTML, основанном на SGML, тег
    недопустим, а в XHTML он допускается. Вы можете использовать XML определение документа, как показано в следующем примере:

    Вкратце, SGML стоит в основе всего. Старые версии HTML основаны на SGML, а HTML 4.0 использует XHTML, построенный на основе XML.

    Что такое HTML 5?

    HTML 5 – это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего.

    HTML5 – это результат совместной работы World Wide Web Consortium (W3C) и Web Hypertext Application Technology Working Group (WHATWG).

    В HTML 5 нам не нужно DTD. Почему?

    HTML 5 не использует SGML или XHTML. Это полностью новая разработка, поэтому вам не нужно ссылаться на DTD. В HTML 5 вам нужно использовать следующую декларацию doctype, которая позволяет браузеру идентифицировать документ как HTML 5.

    Если я не вставлю в документ , будет ли работать HTML 5?
    Нет, браузер не сможет идентифицировать документ как HTML 5, и теги HTML 5 не будут работать корректно.

    Какие браузеры поддерживают HTML 5?

    Практически все браузеры, как Safari, Google Chrome, Firefox, Opera, Internet Explorer поддерживают HTML 5.

    Как изменилась структура страницы при переходе с HTML 4 или предыдущих версий на HTML 5?

    Обычно веб-страница содержит заголовки, подвал, навигацию, основной контент и боковой блок. Поэтому когда мы хотим представить эти блоки в HTML 4 с подходящим наименованием, мы, скорее всего, будем использовать теги DIV . Но в HTML 5 введены более понятные элементы для этих блоков, что позволило сделать код HTML более читаемым.

    Ниже приведено описание этих элементов HTML 5 из разметки на рисунке:

    • : Представляет блок заголовка страницы;
    • : Подвал страницы;

    HTML 5 Что нового?

    HTML 5 — это новая версия самого популярного языка разметки.

    Уже более 10-ти лет язык гипертекстовой разметки HTML практически не менялся, что было очень странно, учитывая огромную скорость развития Web-технологий, и вот, наконец-то, изменение случилось и появился HTML 5.

    В HTML 5 добавлены несколько новых элементов и атрибутов, а также убраны несколько старых (например, font и center).

    Добавлены следующие элементы:

    В остальном осталось всё без изменений. То есть никаких проблем с освоением HTML 5 не возникнет, при условии, что Вы знакомы со стандартным HTML. Собственно, всё осталось как прежде, только добавились новые возможности.

    Благодаря нововедениям HTML 5 можно существенно облегчить труд Web-мастеров по созданию веб сайтов, упростив ту же самую разметку.

    Наверняка, Вы задаётесь вопросом: «А будет ли работать HTML 5 со старыми браузерами?». Ответ таков: «Конечно, да, но новые элементы, разумеется, отображаться не будут». Или другими словами, новые страницы увидят все, но обладатели современных версий браузеров увидят немного больше и по-другому.

    Я уверен, что в ближайшие время HTML 5 смогут увидеть такой же процент пользователей, как сейчас видят HTML 4, которому уже более 10-ти лет.

    А об использовании новых возможностей HTML 5 мы поговорим с Вами в следующих статьях.

    Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

    Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 8 ):

    Михаил, большой ли толк в данный момент во всю использовать HTML5? На вашем сайте я что-то не нашёл теги из HTML5.

    Ещё рановато, учитывая что не все браузеры его полностью поддерживают, и много пользователей пользуются устаревшими версиями браузеров.

    Михаил, будете ли Вы освещать тему технологии drag-a-drop

    Топ-пост этого месяца:  Интегрированный в Angular поиск пользовательский интерфейс, виджеты и настройка API
    Добавить комментарий