Архив тегов: HTML5

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

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

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

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

(далее…)

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

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

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

(далее…)

«Готов» ли 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 W3C и WHATWG — документированные различия

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

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

(далее…)

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

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

Вперёд

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

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

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

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

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

(далее…)

W3C HTML5 вышел на финишную прямую

Прошедшая неделя в W3C выдалась довольно богатой на новости, сразу несколько рабочих групп «разродились» новыми спецификациями либо существенными обновлениями старых. В частности, «первая очередь» спецификации HTML5 по версии W3C — HTML5.0 — обновила свой статус до предложенной рекомендации (Proposed Rec., PR). Это означает, что спецификация теоретически готова, реализована как минимум в двух браузерах и только простая формальность (в виде положенного по процедуре месячного «испытательного срока») отделяет ее от окончательного утверждения в статусе рекомендации (что в W3C соответствует понятию «стандарт»).

Таким образом, планы W3C по поэтапному утверждению HTML5 — первой части до конца 2014 года, а оставшейся части до конца 2016-го — имеют все шансы выполниться в намеченный срок, и старые страхи о том, что «HTML5 не будет готов до 2022-го», можно забыть.

Стоит отметить, что, хотя почти завершенный статус спецификации производит впечатление стабильности и «солидности», на самом деле ни для разработчиков браузеров, ни для веб-разработчиков этот статус не так уж важен. Стабильные «отпечатки» (snapshots) спецификаций нужны главным образом патентным юристам, как требует патентная политика W3C. Фактически же еще в момент публикации эти документы являются устаревшими. Важные для разработчиков реализаций новинки содержатся в текущем редакторском черновике W3C, а также в «живом стандарте» WHATWG. Кстати, последний недавно как раз переехал на новый адрес — https://html.spec.whatwg.org/. К сожалению, последнее время редакторы обеих ветвей HTML5 не особо ладили друг  с другом, и расхождения между спецификациями всё накапливаются.

В дополнение к HTML5.0 W3C выпустил первый черновик отдельной спецификации для отличий HTML5 от HTML4. Прежде это был небольшой раздел в HTML5. В частности, одна глава новой спецификации посвящена новой классификации моделей содержимого и ее отличиям от устаревшего и вечно вызывавшего путаницу деления элементов на «блочные и строчные». Возможно, в W3C прочитали нашу давнюю статью?:)

Inspiration #13

Сегодня среда, а значит время посмотреть тринадцатый выпуск нашей (почти) еженедельной рубрики Inspiration. Мы поменяли название рубрики на более короткое, понятное и вдохновляющее. :) Это рубрика, в которой мы публикуем интересные, необыкновенные, поразительные, потрясающие, пробуждающие вдохновение… ух! сайты.

Простые сайты с интересными решениями.

Друзья, предлагаю сегодня новую подборку красивых сайтов. В веб-дизайне постоянно появляется невероятное количество новых сайтов, поражающие своей креативностью нетрадиционным подходом к созданию интерфейса.
Устойчивым трендом продолжают оставаться сайты одностраничники, большие фоновые изображения для веб-сайтов. Остаются актуальными на своих позициях типографика, минимализм и адаптивный веб-дизайн, который обусловлен массовым использованием мобильного интернета. Пользуется популярностью плавная анимация с использованием HTML5, CSS3 и jQuery. Относительно новые тенденции — это плоский дизайн. Ко всему прочему — для творческих людей нужно постоянно находить новые идеи, решения, поэтому здесь вы сможете почерпнуть массу интересного для себя.

(далее…)

Inspiration #12

Сегодня среда, а значит время посмотреть двенадцатый выпуск нашей еженедельной рубрики Inspiration. Это рубрика, в которой мы публикуем интересные, необыкновенные, поразительные, потрясающие, пробуждающие вдохновение… ух! сайты.

Большие заголовки для сайта

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

(далее…)

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

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

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

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

(далее…)

Путь верстальщика

Основано на реальных событиях…

Будучи администратором одного из известных форумов, я часто сталкиваюсь с тем, что начинающие веб-технологи не знают, с чего начать своё обучение, какую читать литературу и в каком направлении им двигаться. Периодически мне доводится слышать один и тот же вопрос — «Как стать хорошим верстальщиком?». Краткий ответ может оставить у новичка ещё больше вопросов, поэтому одного или нескольких постов с ответами на форуме недостаточно, чтобы полностью описать все необходимые, на мой взгляд, пункты. 

В этой статье я решил исправить ситуацию и описать свой путь обучения, который считаю наиболее правильным и эффективным.

(далее…)

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

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

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

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

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

(далее…)

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

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

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

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