Рубрика «html5» - 44

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

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

image

Всем привет! На основе нашего предыдущего поста решили продолжить распродажу книг.
Читать полностью »

Mozilla с гордостью объявила о начале продаж смартфона Cloud FX, работающего под операционной системой Firefox OS. Смартфон производства Intex Technologies доступен для покупателей эксклюзивно через сайт Snapdeal.com по цене 1999 рупий (33 доллара США).

Смартфон под Firefox OS поступил в продажу за $33 (в Индии)
Читать полностью »

Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов HTML5 — contenteditable, Jquery, Ajax и PHP создадим простой редактор текста HTML5 сайта.

Наш редактор будет обладать следующими свойствами:
— при клике мышкой на тексте предназначенном для редактирования этот текст сразу можно редактировать;
— при нажатии клавиши Escape после редактирования текста, все изменения в текущий текст отменяются;
— при потере фокуса, либо клике для редактирования другого текста, измененный текст отправляется на сервер, выводится сообщение о статусе отправки и ответа сервера.
Читать полностью »

Перевод статьи «3 New JavaScript APIs You May Want to Follow», Aurelio De Rosa из портала SitePoint.

Если вы постоянный читатель SitePoint, и возможно, читаете мои заметки, то вы знаете, что я написал множество статей о новых HTML5 и JavaScript API. До сих пор я писал заметки об API, которые вы можете использовать прямо сейчас, в том числе с использованием полифилов.

Сегодня я решил нарушить это правило и описать вам несколько API на ранней стадии разработки. Эти технологии настолько свежи, что 2 из 3 были представлены всего несколько дней назад. Поэтому они пока не могут быть использованы. Однако, если вам интересно, что они позволят сделать, вы можете почитать спецификации и написать, что бы вы хотели в них улучшить.

Давайте же, без лишних церемоний, начнем!
Читать полностью »

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

Ссылка на первую часть перевода.

Предоставление веб-компонентов

HTML-импорт упрощает загрузку и повторное использование кода. В частности, это хороший способ распространения веб-компонентов. Это касается как простых HTML <template>, так и полноценных кастомных элементов с теневым DOM [1, 2, 3]. Когда эти технологии работают вместе, импорт становится инструментом для подключения веб-компонентов.
Читать полностью »

Node.js + HTML5 + js = online action game

Давно задавался вопросом, а почему же написание онлайн игр на node.js является таким редким явлением, особенно на хабре?
Ведь какие дифирамбы пели ноде при ее появлении, и сколько пророчили хорошего (или нехорошего) сей платформе, а новых продуктов что-то не сильно прибавляется.

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

После выхода Intel XDK (обзорная статья на habrahabr здесь ) нас часто просили предоставить возможность пользоваться сторонними плагинами для Cordova и возможность монетизировать созданные приложения с помощью Google AdMob и In-App Purchases. И мы это сделали в обновлении Intel XDK (по прежнему доступном для бесплатного скачивания и использования здесь, русскоязычное обзорное видео здесь).

Intel XDK, обновление за июль 2014 г. – плагины для Cordova и монетизация!
Читать полностью »

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

От переводчика

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

Для чего нужен HTML-импорт?

Давайте поговорим о том, как мы загружаем различные ресурсы. JavaScript мы загружаем при помощи <script src>. Для CSS у нас есть <link rel="stylesheet">. Для изображений <img>. Для видео есть <video>. Для аудио — <audio>… Давайте ближе к сути! Для большинства видов контента есть простые способы его подгрузки. Но не для HTML. Для HTML у нас есть следующие варианты:

  1. <iframe> — испробованный и рабочий, но тяжеловесный способ. Контент iframe'а живет в отдельном от главной страницы контексте. Хоть это и хорошая особенность, она также создает дополнительные трудности: подгонка размера айфрейма к его содержимому, работа с внутренними скриптами и стилями.
  2. AJAX — мне нравится xhr.responseType="document", но загрузка HTML при помощи JS не кажется хорошей идеей.
  3. КривыеКостылиTM — html код в виде JS строк или комментариев, например <script type="text/html">.

HTML код, это самый простой тип контента, но в этом плане, он требует наибольших усилий. Хорошо, что у нас есть Web Components, они помогут нам справиться с этой и другими проблемами.
Читать полностью »

Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.

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

Введение в HTML импорт

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

Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js