Обновить
95.77

HTML *

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

Сначала показывать
Период
Уровень сложности

Адаптивное видео как фон шапки сайта

Время на прочтение3 мин
Количество просмотров40K
Недавно столкнулся с интересной задачей: в шапку сайта установить видео в качестве фона. Шапка всегда занимает первый экран и установлена по принципу background-position: 50% 0. Суть в том, что на планшете мы видим видео полностью, а на телефоне оно обрезается по краям и снизу остается только центральная часть.


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

Telegram-like анимированный placeholder для HTML-инпутов

Время на прочтение2 мин
Количество просмотров12K
В качестве улучшения UX/UI я часто сижу и думаю, что можно было бы улучшить в приложении, чтобы пользователю было чуточку веселее пользоваться им.

Как-то раз я заметил интересную анимацию placeholder'a в нативном Desktop приложении Telegram. Подумал, что будет интересным способом использовать такое и в своих проектах.
Читать дальше →

Внедрение премиального медиа-контента с HTML5

Время на прочтение11 мин
Количество просмотров12K


Коммерческая медиа-индустрия проходит через большую трансформацию по мере того, как контент-провайдеры отходят от модели доставки контента с использованием закрытых веб-плагинов (таких, как Flash или Silverlight) и заменяют их едиными бесплагинными видео-плеерами, базирующимися на спецификациях HTML5 и возможностях проигрывания коммерческого контента. Браузеры также двигаются в сторону от использования плагинов, так Chrome отказывается от NPAPI и Microsoft Edge от ActiveX в пользу более защищенных моделей расширения.

Переход к модели проигрывания медиа-контента без использования плагинов становится возможным благодаря недавно разработанным новым спецификациям:


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

Это длинная статья, и мы бы не хотели, чтобы вы упустили интересующую вас тему. Вот краткое содержание:
  • Некоторая информация о Microsoft Edge и Silverlight
  • Обзор состояния совместимых веб-медиа
  • Сложности и варианты их преодоления
    • Простой вариант DASH-стриминга
    • Демонстрация веб-сайта, использующего библиотеку для проигрывания адаптивного контента
    • Сервисы Azure Media Services, которые могут вам помочь
    • Простой способ создания приложения под универсальную Windows-платформу (UWP) на базе кода веб-сайта
    • Демонстрация UWP-приложения с интеграцией проигрывания видео и голосовых команд для Кортаны


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

Как мы делаем лэндинги

Время на прочтение5 мин
Количество просмотров14K
Настало время поприветствовать Хабрахабр от имени стартапа Ecoisme!

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

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

Как придумывать идеи

Время на прочтение3 мин
Количество просмотров45K


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

Этот пост поведает о процессе поиска мной идей для моих игр, но я думаю, что это можно применить также практически к любой творческой работе.
Читать дальше →

CSS GuideLines, часть 2. Комментирование кода

Время на прочтение3 мин
Количество просмотров21K


В каждом проекте есть определенные нюансы и тонкости, которые помнят далеко не все, и худшее, что может случиться с разработчиком — это работа с кодом, который писал не он. Даже запоминание тонкостей своего собственного кода является возможным только до определенной степени, не говоря уже о чужом коде. Именно поэтому CSS надо комментировать.
Читать дальше →

Пишем проигрыватель lossless аудио на JavaScript

Время на прочтение10 мин
Количество просмотров18K
Добрый день, %username%. Сегодня я хотел бы поделится своим опытом разработки прототипа онлайн lossless аудио плеера.

На сегодняшний день, вряд ли можно кого-то удивить аудио или видео плеером, встроенного непосредственно в веб-страницу. Существующие технологии, библиотеки и API позволяют легко наполнить сайт любым медиа-контентом. Но есть такие люди, которым этого недостаточно (в том числе я). Именно поэтому, как истинному любителю музыки в lossless, мне потребовалось сделать браузерный плеер поддерживающий такой формат аудио, как flac.
Читать дальше →

STAN — самый короткий шаблонный движок

Время на прочтение3 мин
Количество просмотров18K
image

Холодным Апрельским днем когда на Урале еще не растаял снег. Смеркалось. Я игрался с микро-шаблонами.
Читать дальше →

Стилизация элементов форм и попытка обойти подводные камни

Время на прочтение3 мин
Количество просмотров6.4K
Приветствую читатели, стилизованные элементы формы на сайтах сейчас прочно вошли в реалии современного дизайна и кто бы что не говорил, во многих случаях смотрятся они действительно приятно.
Многие из вас уже обзавелись плагинчиками типа chosen и прочим добром, некоторые из них весьма качественно написаны. В этой статье я не буду рассказывать про очередной плагин, а лишь хочу обратить ваше внимание на один из способов расширения возможностей плагина, возможно кому-то он поможет.
Я являюсь сторонником того, чтобы подключая плагины для стилизации форм, мы должны продолжать работать с элементами форм в нативном стиле и никак не зависеть от плагина стилизации. Я практически ни у одного (можно сказать ни у одного) плагина не видел корректную обработку изменения поведения элементов при изменении атрибутов DOM элементов, а именно — обработку изменения атрибута disabled (min, max, maxlength), всегда надо было учитывать апи плагины, верстку элемента и тд, а это неудобно если вы в будущем захотите поменять плагин или верстку. Как вариант — подумать заранее и для всего сделать обертки и работать с ними как с внутренним апи. Но есть и альтернативный путь.
Читать дальше →

Используете ли вы Веб Компоненты?

Время на прочтение1 мин
Количество просмотров6.3K
Друзья, просто небольшой опрос, чтобы понять — имеет ли смысл рассказывать об этой теме, и на каком уровне рассказывать.
Если у вас есть опыт использования Веб Компонентов или только Пользовательских Элементов — пожалуйста, расскажите об этом в комментариях.
Буду очень благодарен ответам.

Скидка на книгу «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств»

Время на прочтение1 мин
Количество просмотров19K
Налетай! На днях у нас вышла книга «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств». Для наших преданных поклонников с Хабры мы предлагаем скидку 25% на бумажную и цифровую версию книги. Акция действует до конца сентября! Чтобы получить скидку, при оформлении заказа введите промо-код f1f30831b892c163f476c.


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

Инструменты и примеры кода для разработки ARIA

Время на прочтение1 мин
Количество просмотров4.4K
Подборка инструментов, примеров кода и других ресурсов по теме разработки с использованием WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications), инициативы обеспечения доступности высокофункциональных Интернет-приложений.
Читать дальше →

Пишем HTML-виджет для приложения IBOOK Author

Время на прочтение8 мин
Количество просмотров6.9K
Ни для кого не секрет, что печатные книги уходят в прошлое. Им на смену приходит новое поколение устройств (а вместе с ними и программ), которые позволяют не только прочитать материал, подобно книге, но и разнообразить чтение интерактивными вставками. Это может быть как и некий динамически изменяющийся материал (лента твиттера и т.п.), так и некое интерактивное содержание (анимация работы конденсатора и т.п.)
Компания Apple выпустило приложение IBOOK Author, которое позволяет делать интерактивные книги для приложения IBOOKS устройств IPAD. Сегодня я предлагаю познакомиться с тем, как же создавать HTML-виджеты для данного приложения на примере виджета твиттера.
Для создания виджетов существует множество программ, стоимость которых варьируется от 0 (Dashcode) до 60 (Tumult Hype).
Создавать же свой виджет мы будем «вручную», без использования специализированных программ.
Теперь предлагаю перейти от слов к делу.
Читать дальше →

Ближайшие события

Записи HTML5 Camp и еще несколько плюшек

Время на прочтение1 мин
Количество просмотров2.4K


Как многие хабражители наверняка помнят, не так давно мы проводили в Санкт-Петербурге второй HTML5 Camp.

И, как вы уже могли догадаться из заголовка, записи с мероприятия выложены и доступны для просмотра на сайте конференции и techdays.ru (тут же вы найдете записи первого HTML5 Camp).
Под хабракатом запись открытия и плюшки

Как сделать сайт бесконечно ленивым. Часть 2: Графы зависимостей

Уровень сложностиСложный
Время на прочтение17 мин
Количество просмотров1.7K

Ранее мы обсуждали самые основы ленивой загрузки и то, почему она вообще важна. А в этой статье мы рассмотрим следующее:
- Как бандлеры анализируют файлы исходного кода, строят деревья зависимостей и генерируют файлы для сборки.
- Как они генерируют файлы JavaScript из исходного кода.
- Как браузеры решают, какие сгенерированные файлы следует загружать, чтобы отобразить ленивую страницу/компонент.
- И как мы можем уменьшить размер и количество загружаемых файлов, правильно настроив структуру файлов и корректно используя статический импорт.

Читать далее

Веб. К черту фреймворки! Пишем свой starter-kit с роутером и сторами. Часть 3

Уровень сложностиСложный
Время на прочтение13 мин
Количество просмотров3.3K

Последняя часть по созданию своего starter-kit.

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

Читать далее

Superset deep-linking: как Rison и Jinja превращают сводный дашборд в инструмент фокус-анализа

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров2.5K

За один клик из сводного дашборда — на «дочерний» с уже выставленными фильтрами. Разберём, как в Apache Superset прокидывать выбранные значения через URL-параметр native_filters в формате Rison и собирать ссылку Jinja-макросами.

Читать далее

TMH: как создать музыкальный хаб на PHP, Telegram и виртуальном хостинге

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.3K

Telegram Music Hub (TMH) — это open-source решение, которое превращает ваш Telegram-канал в единое цифровое пространство для музыки, блога и сообщества.
И всё это — на самом обычном виртуальном хостинге, без баз данных, без сложных зависимостей, без дорогих серверов.

👉 github.com/tcse/php-TMH

Читать далее

Организация селекторов для тестирования

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров1K

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

В этой статье мы рассмотрим, как правильно организовать селекторы для тестирования веб-приложений.

🧪🧪🧪 TEST_ID="Читать далее" 🧪🧪🧪