Несмотря на мягкие критические замечания Цукерберга в отношении HTML5 , остальной мир с радостью воспользовался популярностью HTML5 — и не без причины. Новый стандарт предоставил дизайнерам целый ряд инструментов, которые помогают нам преобразовывать потребности клиентов в функциональные, совместимые с браузером решения.
Как и многие другие разработчики, я обнаружил, что я работаю с несколькими избранными, когда работаю с клиентами. Недавно я разработал систему электронных медицинских карт на платформе WordPress, которая требовала ввода всех форм, которые только можно себе представить. Я ушел, осознав, насколько я полагаюсь на последние стандарты HTML5, а не только на обработку форм.
Итак, вот некоторые из моих любимых элементов и атрибутов HTML5, которые я использую почти каждый день. От форм до видео, от семантической разметки до рендеров холста — вот некоторые из моих любимых вещей.
Ввод формы HTML
До HTML5 я сильно полагался на JavaScript и другие инструменты, чтобы мои формы работали так, как я хотел. Теперь, есть некоторые инструменты, чтобы сделать мою жизнь, и жизнь пользователей моего сайта намного проще.
Автозаполнение
Мне нравится опция автозаполнения формы, но в основном потому, что я могу ее отключить! Существует множество примеров, когда я оставляю автозаполнение в состоянии по умолчанию для форм комментариев, контактных форм и основных инструментов сбора информации, подобных этому.
Но многие формы, которые мне пришлось создавать в последнее время, предназначены для сбора данных, когда пользователь не захочет иметь дело с автозаполнением, пытаясь заполнить для них информацию. Один из примеров — система электронного управления записями, когда врач или медсестра добавляют информацию о пациенте. В 99% случаев они не будут вводить одну и ту же информацию о пациенте одинаково, поэтому функция автозаполнения бессмысленна и отвлекает. Хуже того, мы обнаружили, что некоторые сотрудники случайно использовали информацию автозаполнения, потому что они думали, что она была точной.
Это просто реализовать, но вы должны использовать его в теге формы, а не в отдельных элементах формы:
[sourcecode language = ”html”]
<form autocomplete = «on»> <input type = «text» /> </ form>
[/исходный код]
необходимые
Вы когда-нибудь пытались создать валидацию формы? Ну, в какой-то момент вы это сделаете, и большинству из нас пришлось создать или использовать JavaScript, чтобы сделать эту работу. Имея обязательный атрибут в форме, вы можете указать, чтобы браузер автоматически проверял наличие данных в этих обязательных входных данных.
Хотя это еще не работает для всех браузеров, на улице говорят, что даже Safari будет поддерживать необходимую опцию. Они утверждают, что поддерживают это, но я еще не видел, чтобы это имело место. Поэтому, хотя вы не можете использовать это для всего, но если у клиента есть посетители сайта, которые используют Firefox, Chrome или Opera, то это работает как шарм. IE и Safari имеют более ограниченную поддержку и могут полагаться на проверку формы JavaScript.
Чтобы использовать этот инструмент проверки, вы должны поместить код в отдельные входные данные:
[sourcecode language = ”html”]
<form> <input type = «text» обязательный = «обязательный» /> </ form>
[/исходный код]
Обратите внимание, что использование требуемого оператора не ставит одну из этих маленьких красных звездочек на входе. Если пользователь попытается отправить форму с пустым полем, браузер предложит ему заполнить поле. Каждый браузер выглядит немного по-своему, и некоторые браузеры имеют разные предупреждения в зависимости от типа ввода — флажок, например, выдает предупреждение, отличное от поля электронной почты. Возможно, вы захотите создать свою собственную визуальную индикацию того, что поле формы на самом деле «обязательно».
Эл. адрес
Говоря об электронной почте, еще одним инструментом проверки форм, который я регулярно использую, является атрибут электронной почты. Когда я размещаю форму на странице, для которой требуется адрес электронной почты, я добавляю атрибут электронной почты, чтобы позволить браузеру выполнять свою работу. Это означает, что мне не нужно создавать валидатор или валидатор на основе JavaScript для этого поля.
Тип ввода электронной почты проверяется не всеми браузерами — IE и Safari не проверяются. Но даже Safari преобразует клавиатуры iPhone и iPad для ввода по умолчанию «@» и «.com», поэтому пользователю проще вводить их адрес.
[sourcecode language = ”html”]
<form> <input type = «email» /> </ form>
[/исходный код]
телефон
В любое время, когда я хочу получить от пользователя только серию цифр, мне нравится использовать тип ввода «tel». Это немного ниже в моем списке, потому что никакой реальной проверки не происходит. Но если вы разрабатываете для мобильных пользователей вообще, вы хотите, чтобы это уловить ваш рукав.
Когда мобильный пользователь начинает вводить данные, их устройство запрашивает их только с помощью цифровой клавиатуры, когда вы используете этот ввод. Конечно, это ничего не делает для пользователей настольных компьютеров, но делает ввод данных для мобильных посетителей намного проще. Опять же, проверка формы не выполняется по умолчанию.
[sourcecode language = ”html”]
<form> <input type = «tel» /> </ form>
[/исходный код]
Ассортимент
Последним из моих любимых функций формы HTML5 является тип ввода «диапазон». Мне нравится использовать это для опросов, поскольку это дает пользователю ползунок как способ ввода их ответа. Мы все видели типичные варианты ответа 1-5 или 1-10. Но это хорошо, потому что вы можете создать 1-100 или более, и пользователь видит только положение ползунка. С небольшим CSS-градиентом, вы можете начать с красного и постепенно переходить в зеленый, чтобы дать пользователям дополнительную визуальную подсказку о том, какое направление «хорошо»:
[sourcecode language = ”html”]
<form> <input type = «range» /> </ form>
[/исходный код]
видео
Я даже не знаю, с чего начать, когда речь заходит об элементе видео в HTML5, за исключением того, что он спасает жизнь! Мне регулярно приходится добавлять видео на страницы для клиентов на разных платформах. Мало что сделало мою жизнь проще, чем возможность загружать, перетаскивать элемент видео на страницу, изменять размер и т. Д., И все готово.
Он прост в использовании и предоставляет вам иерархию альтернативных вариантов. Так как многие из моих клиентов хотят размещать собственные видео (по разным причинам, от безопасности до брендинга), тег видео дает мне множество вариантов. Я обычно использую два формата видео. Я не могу вдаваться во все детали моей логики / опыта с этим решением, но я обнаружил, что использование MP4 и WEBM охватывает большинство моих основ. Если вы хотите получить еще больше освещения, опустите формат OGG. Наконец, вы можете создать запасной вариант для видео на YouTube в худшем случае.
Конечно, есть все виды атрибутов в элементе видео, в которые я мог бы войти. (Функции плаката и управления также замечательны.) Но пока самый базовый формат для воспроизведения ваших видео сегодня в большинстве браузеров, без использования каких-либо внешних JavaScript, flash или плагинов, выглядел бы так :
[sourcecode language = ”html”]
<video width = «320» height = «240»> <source src = «yourmovie.mp4» type = «video / mp4» />
<source src = «yourmovie.webm» type = «video / webm» /> <source src = «yourmovie.ogg» type = «video / ogg» />
<object width = «320» height = «240» classid = «clsid: d27cdb6e-ae6d-11cf-96b8-444553540000»
кодовая = «http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0»>
<param name = «src» value = «http://www.sitepoint.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf» />
<param name = «flashvars» value = «url = / wp-admin / yourmovie.mp4 & poster = / wp-admin /» />
<param name = «allowfullscreen» value = «true» />
<param name = «allowcriptaccess» value = «true» />
<embed width = «320» height = «240» type = «application / x-shockwave-flash»
SRC = «http://www.sitepoint.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf»
FlashVars = «URL = / сор-админ / yourmovie.mp4 и плакат = / сор-админ /»
allowfullscreen = «true» allowcriptaccess = «true» />
</ Объект>
</ Видео>
[/исходный код]
Нужно конвертировать видео вашего клиента? Я использую бесплатный Miro Video Converter .
Семантическая разметка
Итак, я знаю, что около 92% читателей встретились, когда увидели слово «семантический», но на самом деле это не так уж и плохо. Главное, что нужно понять, это то, что семантическая разметка не обязательно является тем, что читатели видят, но вы можете использовать разметку, чтобы помочь вам с CSS и другими функциями на вашем сайте.
Семантическая разметка в основном помогает поисковым системам. Если ваши клиенты хотят лучшего маркетинга в поисковых системах (одна из моих специализаций), то вам лучше начать интегрировать семантическую разметку в свои дизайны. Это не обязательно, конечно, но это помогает. Причина, по которой я перечисляю их как избранные, заключается в том, что они оказали положительное влияние на моих клиентов. Семантическая разметка оказала огромное влияние на видимость моих клиентов в поисковых системах. Независимо от того, насколько круты ваши проекты, если вы не можете отправить поисковый трафик своим клиентам, они потерпят неудачу.
Статья
Я проверяю, стоит ли оборачивать раздел в элементе article, если он может стоять отдельно и иметь смысл для человека. Будет ли смысл читателя в содержании статьи, если он виден сам по себе? Если это так, то это хороший кандидат на элемент <article>. Отдельные комментарии, содержание поста, включающее заголовки и т. П., — вот некоторые естественные соответствия для элемента статьи.
Затем вы можете разбить статью на элементы детали. Это может быть любое подмножество статьи. От заголовков к подразделам в пределах части. Для комментариев информация о комментаторе и отдельный комментарий могут быть двумя отдельными деталями. Вот как это может выглядеть в вашем коде:
[sourcecode language = ”html”]
<Статья>
Название вашего произведения
Куча контента тут
Ваш авторский профиль здесь
</ Статьи>
[/исходный код]
заголовок
Я использую заголовок для вложения заголовка и / или субтитров контента. Поисковые системы просматривают эту информацию, чтобы увидеть заголовок. Всегда используйте заголовочные элементы внутри тега заголовка. Вы можете использовать текст абзаца и графику, но я не нашел их полезными.
[sourcecode language = ”html”]
<Статья>
<Заголовок>
<h1> Название вашего произведения </ h1>
<h2> И некоторые субтитры, если хотите, </ h2>
</ Заголовок>
Куча контента тут
Ваш авторский профиль здесь
</ Статьи>
[/исходный код]
нижний колонтитул
Элемент нижнего колонтитула имеет решающее значение по одной очень важной причине — он показывает поисковым системам блок контента, который он может увидеть снова и снова. Поисковые системы все более чувствительны к дублированию контента на ваших страницах. Постоянно определяя раздел нижнего колонтитула в своих проектах, вы помогаете поисковым системам знать, почему этот контент повторяется. Вы могли бы подумать, что они поймут это, но некоторые нижние колонтитулы содержат ссылки на социальные сети, другие — просто заявление об авторском праве, а другие — полнофункциональные виджеты.
[sourcecode language = ”html”]
<Колонтитул>
Copyright 2012 SomeSite.com, ВСЕ права защищены
</ Колонтитул>
[/исходный код]
Rich Snippets
Также огромным благом для успеха поисковой системы является богатая разметка фрагмента . Я не могу вдаваться в подробности в этой статье, но если будет достаточно интереса, я создам пример кода разметки для различных распространенных форматов фрагментов кода (<hint> <hint> Дайте мне знать в комментариях, если хотите кусок с более подробной информацией).
Итак, я буду придерживаться авторского фрагмента, поскольку он становится все более популярным и мощным для защиты контента. Существует множество свойств, которые можно связать с человеком с помощью богатых фрагментов, в том числе:
- имя
- Фото
- Должность (владелец, аналитик, дизайнер и т. Д.)
- URL
- присоединение
- Адрес
- Еще больше!
Поисковые системы видят обширные данные фрагмента в статье и знают, кто автор, и могут начать связывать автора с другими частями. Поисковые системы также могут отображать содержание автора в результатах поиска, что делает обширные фрагменты автора мощным инструментом брендинга. Вот как может выглядеть раздел автора в статье.
[sourcecode language = ”html”]
<DIV>
<h3> Название: <span> Sr. Редактор </ SPAN> </ h3>
Сайт: <a href=»http://www.example.com»> www.example.com </a>.
<span> Город: <span> Альбукерке </ span>,
Состояние: <span> NM </ span> </ span>
</ DIV>
[/исходный код]
Вывод
И эти элементы HTML5 — мои лучшие 10, которые оказали наибольшее влияние на меня … Мои личные фавориты, если хотите.
А что насчет тебя? Какие элементы и атрибуты HTML5 вы нашли незаменимыми?