HTML5

Понимание семантики

Перевод статьи Understanding semantics с сайта tink.uk, опубликовано на css-live.ru с разрешения автора — Леони Уотсон.

Слово «семантический» уже слилось с веб-разработкой. Мы произносим «семантический код» и «семантика» элемента, но что это значит на самом деле и почему так важно?

Слово семантика происходит от французского «semantique» — «несопоставимый». А в английском у него есть три значения:

(далее…)

Регрессивные веб-приложения

Перевод статьи Regressive Web Apps с сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита.

На конференции Google I/O в этом году было немало докладов о разработке для веба. Приятная перемена по сравнению с прошлыми годами, когда о вебе едва вспоминали и можно было скорей подумать, что  Google I/O — конференция для разработчиков приложений под Андроид.

Последняя конференция показала, что Гугл очень большой и у него нет какой-то единой генеральной линии по поводу веба и нативных приложений. Хотя были доклады о сервис-воркерах и производительности для веба, были также представлены «Мгновенные Андроид-приложения» — неприкрытая атака на веб. Если вас раздражало, что сайты назойливо тыкали вам под нос всплывающие окошки с предложением установить их приложения, то подождите, скоро они смогут и не спрашивать.

(далее…)

БЭМантика: пишите осмысленные стили без повторов

Перевод статьи BEMantic: DRY Like You Mean It с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Мэтта Стоу.

Недавняя статья Тима Бакстера на A List Apart, «Осмысленный CSS: описывайте стилями свою логику», подбросила дровишек в костер тому мнению, будто фронтендеры, предпочитающие объектно-ориентированный подход к CSS (БЭМ или что-то вроде), как-то напрочь забывают о семантической разметке и доступности.

Лично я считаю, что так думать просто обидно. Не понимаю, почему БЭМ и семантику HTML считают взаимоисключающими. Я тешу себя надеждой, что я хороший разработчик: я горжусь как своим HTML (включая семантику и ARIA-атрибуты), так и своим CSS, где вовсю используются Sass и БЭМ.

(далее…)

Заблуждения разработчиков

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга.

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

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

(далее…)

Легкая организация контента с HTML5

Перевод статьи Easy content organisation with HTML5  с сайта paciellogroup.com, опубликовано на css-live.ru с разрешения автора — Стива Фолкнера.

Чаще всего дизайнеры и веб-разработчики делят страницы на крупные области контента (будем называть их регионами). Поиск по картинкам на запрос «типовая структура страницы в HTML5» выдает множество примеров схематических изображений страниц, на которых обозначены похожие регионы:

(далее…)

О моратории на новые браузерные функции, предложенном PPK

Перевод статьи On PPK’s moratorium on new browser features с сайта https://dev.opera.com/, с разрешения автора — Брюса Лоусона

Знаменитый разработчик и автор множества статей Питер Пол Кох (PPK) недавно призвал к «мораторию на новые браузерные функции на год или около того». Если вы не читали его статью «Хватит толкать веб вперед», просмотрите ее: он выдвигает интересные тезисы, как всегда.

(далее…)

«Готов» ли HTML?

Перевод статьи Is HTML «complete»? с сайта brucelawson.co.uk, автор — Брюс Лоусон.

Не так давно Тим Брей написал интересный пост под названием </html>, в котором он заявляет:

Никто, похоже, не заинтересован в работе над «словарем» (под которым понимаются те штуковины в угловых скобках, из которых состоит HTML).

На мой взгляд, HTML готов. Это ни в коем случае не означает, что я считаю, будто вся платформа веб-программирования находится в надлежащем состоянии…

Давайте отложим инструменты и сосредоточимся на более важных проблемах.

(далее…)

Когда <button> не лучший выбор (она медленнее создается, отображается и с трудом стилизуется)

Перевод статьи When <button> isn’t the best choice (it’s slow to create and render and problematic to style) с сайта benfrain.com, автор — Бен Фрейн.

Элемент <button> значительно медленнее при создании в JavaScript, он медленнее отображается в браузере и крайне трудно стилизуется кроссбраузерно. Несмотря на то, что <button>, это «правильный» выбор для задач кнопки, это не обязательно должен быть «лучший» выбор.

Представьте картину. Я пытаюсь убедить главного инженера программного обеспечения использовать более семантические элементы в разметке, а не только общие элементы, типа div  и span. Такие семантические элементы, как sectionheaderfooter и nav. Разговор выглядел примерно следующим образом. «Нам нужно проверить, что они не медленнее при создании в JavaScript», — говорит он. «Конечно, нет проблем», — отвечаю я, с полной уверенностью.

(далее…)

Про пояса HTML и подтяжки ARIA: неявная ARIA-семантика по умолчанию, которую от вас хотели скрыть

Перевод статьи Стива Фолкнера «On HTML belts and ARIA braces» с сайта html5doctor.com

Надо ли добавлять HTML-элементам атрибуты ARIA role, чтобы раскрыть их семантику — один из тех вопросов, что всплывают с завидным постоянством. Ответ — «может быть» для некоторой части элементов, но обычно (и чем дальше, тем больше) — «нет».

(далее…)

Создание аудиоплеера при помощи HTML5. Часть 3: микроданные и внешний вид

Перевод статьи Making An Audio Player With HTML5, Part 3: Microdata and Skinning с сайта demosthenes.info, c разрешения автора — Дадли Стори.

В первых двух статьях этого цикла я представил концепцию и код для собственного аудиоплеера. Прототип, который сконструирован к этому моменту – «сырой», без какого-либо оформления: HTML5 и JavaScript был написан на скорую руку, чтобы убедиться, что базовая концепция работает. В этой статье я сосредоточусь на улучшении внешнего вида плеера и добавлении микроданных, прежде чем вводить дополнительные функции в четвёртой статье.

(далее…)

Создание аудиоплеера при помощи HTML5. Часть 2: прототипирование

Перевод статьи Making An Audio Player With HTML5, Part 2: Prototyping с сайта demosthenes.info, c разрешения автора — Дадли Стори.

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

(далее…)

Создание аудиоплеера при помощи HTML5. Часть 1: функции и дизайн

Перевод статьи Making An Audio Player With HTML5, Part 1: Features and Design с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Возможно, вы не настолько стары, чтобы помнить дни WinAmp-а, который был (в своём первноначальном воплощении) основной программой для проигрывания MP3 с "киллер-фичей" в виде настраиваемых тем. Сегодня у вас есть возможность создать свой собственный плеер, используя  HTML5 и JavaScript, и настроить его внешний вид при помощи CSS. Планирование и разработка этого плеера позволит разработчикам познакомиться с HTML5-мультимедиа, JavaScript DataViews и WebAudio API.

(далее…)

Спецификации HTML5 W3C и WHATWG — документированные различия

Перевод статьи W3C vs. WHATWG HTML5 Specs — The Differences Documented с сайта developer.telerik.com, c разрешения автора — Аурелио Де Роса.

Несколько недель назад HTML5 получил статус W3C-рекомендации. Я воспользовался этим событием, чтобы обсудить на SitePoint пять интересных, но уже устаревших вещей. Проблема в том, что W3C-спецификации — это лишь одна сторона медали. Начиная с этой версии HTML, разработчики и производители браузеров могут выбирать между двумя разновидностями одного и того же языка разметки: спецификациями, разработанными консорциумом W3C, и тех, что разработаны WHATWG.

(далее…)

Долговременная веб-семантика

Перевод статьи Long Term Web Semantics с сайта infrequently.org, c разрешения автора — Алекса Рассела.

Что-то раздражает меня во фразе «семантичный HTML».

Подразумеваемый смысл вполне ясен: использование HTML так, чтобы он был читаемым, описание вещей простым языком. Но «семантика» означает совсем не это. Можно было сказать просто «хорошо написанный» или «проверенный редактором». Это подошло бы лучше. Разметка, которую мы сегодня называем «несемантичной», на самом деле не такова: для конечных пользователей-то смысл есть, просто он передается слишком многословной разметкой. Рассусолено, но не «несемантично» (т.е. не «бессмысленно»).

Замысловатое и ускользающее от понимания — вроде того, что выходит из-под моего пера — плохо. Простое и ясное — хорошо. Сложно определить, что такое «просто» и «ясно», поскольку здесь замешаны вопросы значения и то, чего авторы (веб-разработчики) могут ожидать от читателей (браузеров). Для этого есть специальные фразы, напр. «Чтение на уровне 8 класса». Расчет на продвинутого читателя позволяет писать кратко и передавать тонкие оттенки. Знатокам не нужно разъяснять термины. Есть реальная польза в повышении общей грамотности в сообществе.

Употребление слова «семантичный», при котором речь идет о простоте, и подразумеваемое при этом значение этого слова говорят о глубокой путанице насчет того, как работает язык, роли разработчиков в донесении этого значения и реального потенциала смыслового развития для веба. Почему это важно? И чем плох «семантичный HTML»?

(далее…)

Дорога к «пятерке» (о статусе W3C Recommendation для HTML5)

Перевод статьи Стива Фолкнера «The ride to 5» с сайта html5doctor.com

Вперёд

В последние недели я обращался к примерно 40 людям из числа тех, кто без устали трудился над HTML5 и/или без умолку рассказывал о нем. Я поинтересовался их точкой зрения на то, что HTML5 стал рекомендацией W3C. Ниже слова 28 ответивших, в основном в порядке попадания их ответов в мой почтовый ящик.

HTML5 стал рекомендацией W3C. Ваши мысли?

Тим Бернерс-Ли:

Директор Консорциума Всемирной сети (W3C), места, где согласуются веб-стандарты

HTML начался 25 лет тому назад, предоставив контент и ссылки, изначальные «плоть» и «скелет» веба. HTML5 до сих пор является основой веба ссылок и контента, но теперь он — еще и часть целой вычислительной платформы, отвечающая за пользовательский интерфейс. Теперь каждую страничку можно программировать, как компьютер. Это великая перемена, и мы можем лишь воображать, что будет создано в будущем на базе открытой веб-платформы.

(далее…)