HTML5

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

Перевод статьи 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 до сих пор является основой веба ссылок и контента, но теперь он — еще и часть целой вычислительной платформы, отвечающая за пользовательский интерфейс. Теперь каждую страничку можно программировать, как компьютер. Это великая перемена, и мы можем лишь воображать, что будет создано в будущем на базе открытой веб-платформы.

(далее…)

Почему viewport — метатег?

Адам Брэдли спросил:

Брюс, <meta> — это ведь данные о данных, так почему же viewport — метатег, если он командует браузеру, что делать, а не описывает себя?

Маркос Касерес ответил:

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

HTML никогда не требовал наличия элементов <html>, <head> и <body> (только валидатор XHTML требовал этого). Так что если открыть тест 1 в любом браузере и просмотреть исходник, вы увидите, что этих трех элементов там нет. Но если изучить DOM в любом соотв. инспекторе, вы увидите, что браузер вставил эти элементы.

(далее…)

Руководство по SVG-анимациям (SMIL)

Перевод статьи A Guide to SVG Animations (SMIL) с сайта css-tricks.com, автор — Сара Суэйдан. Публикуется с разрешения автора.

Перед вами гостевой постинг Сары Суэйдан. Сара — мастер докапываться до самых глубин классных веб-новинок, подробно и понятно разбирая их до основания. Здесь она погружается в недра SMIL (и смежных технологий) и синтаксиса анимаций, встроенного в сам SVG, и делится с нами этим внушительным руководством.

Введение

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

  • <animate> — позволяющий анимировать скалярные атрибуты и свойства в течение периода времени;
  • <set> — являющийся удобным сокращением для animate, что удобно для задания анимаций для нечисловых атрибутов и свойств, наподобие свойства visibility;
  • <animateMotion> — позволяющий двигать элемент по заданной траектории;
  • <animateColor> — изменяющий значение цвета каких-либо атрибутов или свойств с течением времени. Заметьте, что элемент <animateColor> устарел, и вместо него рекомендуется использовать обычный элемент animate для свойств, принимающих значения цвета. Тем не менее, он всё еще есть в спецификации SVG 1.1, где он явно помечен как устаревший; из спецификации SVG 2 он удален полностью.

В дополнение к анимационным элементам, определенным в спецификации SMIL, SVG включает расширения, совместимые со спецификацией SMIL animations; эти расширения включают атрибуты, расширяющие функциональность элемента <animateMotion>, и дополнительные анимационные элементы. В расширения SVG входят:

(далее…)

Посередине с элементом <center>

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

Элемент <center> — это потрясающе. Почему я избегал его все эти годы?

Это легче

Допустим, я собираюсь отцентрировать некий текст. В процессе поиска решения мой мозг сталкивается с «вилкой»:

  1. Я использую элемент <center>.
  2. Я не использую элемент <center>, а выбираю решение из множества вариантов на базе CSS.

(далее…)

«Блочные» Сcылки в HTML5

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

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

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

(далее…)

10 популярных мифов о валидности и валидации

Миф 1. Валидность — некая единая, универсальная характеристика для любого кода

Примеры употребления: «Поменяй доктайп с X на Y, а то невалидно».

Реальность: валидность — понятие конкретное и относительное. Валидность документа на языке разметки означает соответствие определенной схеме. Указанной (напр. DTD в доктайпе) или подразумеваемой (в HTML5). Схемы бывают разные, и требования у них тоже (аналог из жизни: к строительству жилых домов и атомных электростанций применяются разные СНиПы), поэтому документ, валидный по одной схеме, наверняка будет невалидным по другой (хороша была бы АЭС, построенная по нормативам жилого дома!).

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

(далее…)

Блок-схема алгоритма выбора структурных (секционных) элементов HTML5

Лёгкая для понимания блок-схема алгоритма выбора структурных (секционных) элементов HTML5. Она сможет помочь вам разобраться в предназначении некоторых новых элементов HTML5.

Здесь можно увидеть эту схему «в полный рост».

Источник схемы

Два мира, две спецификации HTML5: кто станет царем горы?

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

А что собственно случилось?

Иэн Хиксон (или попросту Хикси), работающий до этого момента "на два фронта" (WHATWG и W3C), решил покинуть один из них, а точнее W3C. Причиной этому явились многие расхождения, которые постепенно образовывались между двумя рабочими группами. Поначалу они старались, чтобы у них получалось одно и то же, но по факту W3C-версия всегда плелась в хвосте у WHATWG, а один раз отстала чуть ли не на год. 

(далее…)

Адаптивные изображения и веб-стандарты на распутье

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

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

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

(далее…)

«Блочных и строчных элементов» в HTML больше нет

Для тех, кому лень читать всю статью: в HTML нет «блочных» и «строчных» элементов. Это деление — историческая ошибка, чистая условность и анахронизм времен конца 90-х. Элементы HTML различаются между собой не формой и внешним видом, а смыслом и предназначением (структурные, текстовые, интерактивные и т.п.), именно оно определяет, что во что можно вкладывать. А «блочностью», «инлайновостью», любыми их комбинациями и др. чисто внешними чертами заведует исключительно CSS.

Остальное — для тех, кто до сих пор не верит или просто желает разобраться до конца.

(далее…)

Адаптивные изображения в HTML5: конец первого раунда

Брюс Лоусон, среда, 16 мая 2012

После Великого Апрельского Браузерно-Префиксного Тарарама пришла Великая Майская Адаптивно-Картиночная Шумиха 2012-го.

Адаптивные изображения — очередная неразгаданная загадка «отзывчивого» веб-дизайна. Вы отдаете большие картинки высокого разрешения, подходящие для экранов типа «ретины», которые устройства с меньшим разрешением показывают уменьшенными, зря расходуя трафик? Или вы отдаете картинки низкого разрешения, которые мерзко выглядят, будучи растянутыми на большом экране? Вебмастерам приходится рассчитывать на искусные хаки, чтобы отдавать различные контентные картинки (т.е. <img> в HTML, а не CSS-фоны) для разных типов устройств.

(далее…)

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

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

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

В ближайшее время W3C представит три новых элемента HTML5, поддерживающих интерфейсы для других органов чувств:

  • <texture> для осязания
  • <aroma> для обоняния
  • <flavor> для вкуса

(далее…)

Кроссбраузерный <progress>-бар

Недавно по работе появилось одно интересное заданьице. Сделать прогресс-бар, который мало того, что будет стилизоваться так, как нужно, да ещё и к тому же должен быть кроссбраузерным, начиная с IE7.  

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

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

(далее…)

О семантике HTML и архитектуре веб-фронтенда

Перевод статьи Николаса Галлахера «About HTML semantics and front-end architecture», переводчик — SelenIT

Собрание мыслей, опыта, идей, которые мне нравятся и идей, с которыми я экспериментировал последний год. Они охватывают семантику HTML, компоненты и подходы в архитектуре веб-фронтенда, способы именования классов и HTTP-сжатие.

Мы не прервем своих исканий,
И под конец всех странствий наших
Придем туда, откуда вышли,
Узнав впервые этот край.

Т. С. Элиот — «Маленький Гиддинг»

(далее…)