Все потоки

HTML *

Стандартный язык разметки web-страниц

СтатьиПостыНовостиАвторыКомпании

m1rko 6 июн 2019 в 06:20

Создаём максимально недоступный сайт с идеальной оценкой Lighthouse

6 мин

50K

CSS * HTML * Ненормальное программирование * Веб-разработка *

Перевод

Встроенный инструмент тестирования Google Lighthouse оценивает доступность (accessibility) сайтов по шкале от 0 до 100. Похвально стремиться к максимальной читаемости контента, но оценка 100 не означает, что сайт идеально доступен. Для доказательства я провёл небольшой эксперимент.

Всегда приятно видеть, как люди хвастаются в твиттере своими оценками Lighthouse: это значит, что они заботятся о качестве.

Lighthouse награждает лучшие сайты зелёным кружочком с цифрой 100, которую вы с гордостью показываете клиентам и друзьям.

Читать дальше →

+133

alizar 14 авг 2013 в 10:43

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

1 мин

67K

Веб-разработка * Open source * HTML *

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

Особенности:

Полная совместимость со спецификациями HTML5.
Устойчивость к некачественным входным данным.
Простые API, которые могут быть легко обработаны программами на других ЯП.
Поддержка исходных позиций и указателей в оригинальном коде, при навигации по дереву зависимостей.
Проходит все тесты html5lib-0.95.
Проверен на более чем 2,5 млрд страниц в индексе Google.

Читать дальше →

+129

amorphius 10 фев 2013 в 10:38

8 типов сайтов, которые делать не стоит

1 мин

137K

Recovery Mode

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

Читать дальше →

+128

alizar 2 окт 2013 в 10:06

В Firefox добавили флэш-плеер Shumway, написанный на HTML5

1 мин

90K

FirefoxAdobe FlashHTML *

Флэш-плеер Shumway, написанный на HTML5, сегодня добавлен в кодовую базу Firefox. С помощью Shumway можно воспроизводить флэш-файлы (в формате SWF) без Adobe Flash Player, см. демки. Для просмотра демок не нужно даже ставить расширение, Shumway загружается как JS-файл.

Читать дальше →

+126

barmaley_exe 27 июл 2011 в 19:17

Избегаем распространенных ошибок в HTML5 разметке

8 мин

120K

Перевод

HTML5

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

Читать дальше →

+119

Armin 9 июн 2011 в 17:21

Завершен конкурс HTML5 игр

6 мин

4.6K

Microsoft наконец-то огласила результаты конкурса HTML5 приложений dev:unplugged с задержкой на 2 с половиной недели от первоначальных сроков. А ведь я чуть ли не каждый час обновлял браузер начиная с 23-его мая в надежде узнать результаты =) но статья не об этом…

Наш проект браузерной стратегии The Fate of Nation получил место среди «Honorable Mentions». Топовых победителей можно посмотреть на сайте конкурса.

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

Читать дальше →

+119

kichik 4 мая 2011 в 08:01

Погружение в HTML5 Test

23 мин

17K

Веб-разработка * IT-стандарты * HTML *

(Это вторая статья из серии статей, посвященных обзору различных тестов браузеров. Ранее в серии: Погружение в ACID3.)

Если судить по большинству упоминаний HTML5Test (далее h5t), то большинство пользователей данного теста более заинтересованы в конечном результате (сумме баллов), как некотором показателе, на который можно ссылаться и по которому можно сравнивать, нежели во внутренней сути получаемого результата.

В простонародье это зовется пузомерками, а как метко подметили примерно год назад в Lenta.ru (см. ниже) — «у кого HTML5 длинее».

Читать дальше →

+118

Sinister 29 мар 2013 в 00:09

Игры с физикой благодаря HTML5 и JS. Программист симулирует движение ткани

1 мин

74K

Canvas * HTML * JavaScript *

Программист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.

Есть возможность испытать код прямо на Codepen
Если потянуть мышкой очень сильно, полотно может и порваться. Впечатляет простота кода, которому для работы нужен только браузер. Дает представление о том, в каком направлении будут развиваться веб-игры. Staffit уже создал несколько подобных игрушек.

Перевод с чешского источника

+117

horpia 9 окт в 06:55

Упаковка проекта с большой анимацией в один HTML файл или как кодировка Windows-1251 избавила от лишних 52МБ

Средний

12 мин

12K

JavaScript * HTML * Сжатие данных *

Кейс

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

Читать далее

+113

kichik 25 апр 2011 в 07:36

Погружение в ACID3

13 мин

4.1K

Веб-разработка * HTML * IT-стандарты *

(Это первая статья из серии статей, посвященных обзору различных тестов браузеров.)

Что такое Acid3? Кто его придумал? Как он устроен и как он работает? Что он измеряет на самом деле? Этими и другими вопросами мы зададимся в данной статье и попробуем найти ответы.

Что такое Acid3?

Acid3 — это третий из серии специальных тестов (до этого были Acid1 и Acid2), написанных «в помощь производителям браузеров, чтобы те могли проверить поддержку стандартов в своих продуктах». Конкретно ACID3 нацелен на тестирование спецификаций, связаных с разработкой динамичных «Web 2.0»-приложений.

Acid3 включает 100 специальных тестов, проверяющих 19 различных спецификаций.

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

Читать дальше →

+113

parapetof 19 окт 2015 в 08:50

Детективная история — Что общего между auto.ru и brazzers?

1 мин

87K

Из песочницы

Недавно полез я на сайт auto.ru, в поисках авто. И в друг увидел очень интересный виджет галереи ~~который я уже где-то видел~~, выглядит он примерно так:

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

Читать дальше →

+112

xnim 24 ноя 2013 в 16:20

Верстка для самых маленьких. Верстаем страницу по БЭМу

14 мин

395K

Туториал

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

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

BEM
Собственно пример — как сверстать страницу

Читать дальше →

+111

dgrigorov 17 янв 2018 в 15:10

Недокументированные приемы CSS

8 мин

56K

Блог компании Райффайзен БанкВеб-разработка * Программирование * HTML * CSS *

Туториал

Всем привет! Зовут меня Дмитрий Григоров. Работаю фронтедером в Райффайзенбанке в команде RBO PRO. Я расскажу и покажу вам, как можно творчески применять данные возможности CSS. В статье мы рассмотрим следующие темы:

Фоны и рамки;
Фигуры;
Визуальные эффекты.

+109

lolmaus 29 окт 2013 в 01:08

Слово в защиту пиксельных значений media queries

8 мин

36K

Веб-разработка * CSS * HTML *

Я покажу тебе, глубока ли кроличья нора.

Читая публикации о верстке для вэба, вы не раз натыкались на рекомендацию не использовать пикселы в media queries. Например, вот цитата из совсем недавней статьи на Хабре:

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

Что, если я скажу вам, что использование пикселов в media queries не только не причиняет никакого вреда верстке, но и имеет преимущества над использованием em'ов?

Читать дальше →

+109

neuotq 16 сен 2012 в 11:07

Сниппеты для Twitter Bootstrap

1 мин

97K

Фреймворк Twitter Bootstrap уже давно стал одним из самых любимых средств ~~ленивых~~ сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail

Читать дальше →

+109

ilusha_sergeevich 5 мар 2014 в 14:31

Только разработчики 90-х помнят это

5 мин

70K

Веб-разработка * HTML *

Перевод

Часто ли ты вставлял <blink> в <marquee> тег? Это сейчас Pixar получает все награды, а тогда в 90-х именно этот метод был наивысшим искусством в анимации. Ты был новатором, если совмещал эти теги; личностью, создающей инновацию; человеком, которому все подражали.

Ты был разработчиком в 1990-х.

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

Отложим jQuery в сторону, отвлечемся от нереляционных баз данных… У нас есть более важные вещи, о которых и пойдет разговор.

Читать дальше →

+108

melnik909 6 мая в 09:01

Как фронтендеру сделать интерфейс дружелюбнее к пользователю. Коллекция HTML/CSS лайфхаков

Средний

6 мин

19K

Блог компании RUVDS.comCSS * HTML * Веб-разработка * Интерфейсы *

Обзор

Привет, Хабр.

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

Сегодня хочу поделиться с вами некоторыми практиками из него. Я постарался собрать наиболее простые, чтобы вы могли быстро и безболезненно внедрить их.

Давайте посмотрим, что я вам подготовил.

Читать дальше →

+107

alizar 27 авг 2021 в 08:50

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

3 мин

47K

HTML * Open source * Карьера в IT-индустрииWindows * Софт

Перевод

В 2013 году я начал писать конвертер mammoth.js для экспорта вордовских документов в HTML. Это небольшая библиотека на 3000 строк кода. И хотя в ней ничего выдающегося, меня не покидает ощущение, что простенький проект важнее и принёс больше пользы, чем десять лет работы в индустрии программного обеспечения.

Первую версию я написал в пятницу днём на работе, когда обратил внимание, как много времени коллеги тратят на копипаст текста из Word в CMS и последующее форматирование. Такие однотипные действия еженедельно забирают часы рабочего времени. Я написал утилиту для автоматизации этого процесса, с учётом нашей стройной рабочей системы конвертации стилей Word в нужные классы CSS вместо мешанины HTML-тегов, которые выдаёт нативный экспорт Word. Программка получилась не идеальной — коллегам всё равно приходилось что-то поправлять, но ускорила рутинные операции примерно на порядок.

Читать дальше →

+107

kichik 7 авг 2011 в 14:33

Визуализация аудио в HTML5

7 мин

20K

Блог компании MicrosoftВеб-разработка * HTML *

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

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

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

Читать дальше →

+107

Diokuz 19 фев 2013 в 05:57

Кроссбраузерная кастомизация системного скроллбара

8 мин

146K

Блог компании 2ГИСJavaScript * HTML *

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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.

Подробности

+105

2

3 4 ...