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

Пример работы с getUserMedia и  в Zen Framework по мотивам «HTML5 Exploding Camera Demo»

Начиная с версии 2012.1, в СУБД Caché появился встроенный ZEN-компонент <canvas>.

Примечание: скачать бесплатную однопользовательскую версию СУБД Caché можно здесь.

А в последнем релизе Opera 12 появилась встроенная поддержка функции getUserMedia (WebRTC 1.0: Real-time Communication Between Browsers), которая даёт возможность обращаться к устройствам, генерирующим медиапоток, например к веб-камере.

Примечание: Сводная таблица поддержки getUserMedia/Stream API в настольных и мобильных браузерах.

Для демонстрации обеих этих возможностей, используя встроенный в СУБД Caché фреймворк ZEN, за основу было выбрано демо: HTML5 Exploding Camera Demo.
Читать полностью »

Полгода назад мы рассказывали вам о нашем приложении VK Offline для Google Chrome, которое воплощало концепт E-mail клиента и адресной книги на основе данных ваших профилей ВКонтакте. С тех пор утекло много воды, и приложение доросло до четверой версии, воплотив почти все наши задумки. Сейчас VK Offline — это одно из лучших приложений в российском Chrome Web Store, которое объединяет легкость и простоту диалогов ВКонтакте с удобными и привычными функциями любого E-mail клиента и адресной книги.

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

imageПоследние 5-7 лет мы все наблюдаем явление, которое аналитики называют консьюмеризацией ИТ. Не вдаваясь в историю и подробности этого явления, характерного не только ИТ-отрасли, стоит отметить главное – именно «консьюмеры» сегодня создают львиную долю пресловутой добавленной стоимости – иногда своим большим числом, иногда – способностью и желанием переплачивать за новинки и вообще интересные идеи.
Операционная система Windows, получившая тотальное распространение на волне консьюмеризации середины девяностых годов, планомерно развивалась до середины «нулевых», когда персонализация вычислений получила новый мощный толчок – настоящую мобильность и доступность.
Читать полностью »

На Хабре упоминалось о том, что фонд Mozilla Foundation сменил несколько странное название разрабатываемой мобильной операционной системы Boot to Gecko на Firefox OS и в скором времени планирует выпустить конкурента Android — в начале следующего года — причём стоимостью устройств не будет превышать $100.

К обозревателям сайта TechWeekEurope попал в руки прототип смарфтона на Firefox OS, предоставленный для первого обзора мобильным оператором Telefonica. Фактически подробностей сравнительно мало — смартфон пока не имеет даже кодового названия или видео, на котором было бы продемонстрирована работа операционной системы (в этом смысле разработчики другого проекта Tizen честнее — они уже несколько раз демонстрировали работу своего детища на реальных устройствах от Samsung). Аппарат обладает сенсорной IPS-матрицей и четырьмя сенсорными кнопками — согласно некоторым сведениям, размер экрана будет составлять 4 дюйма.
Читать полностью »

Плакат «Современные веб стандарты»

Готовясь к конференции DevCon'12 и, помня о Тостере по JavaScript, который проходил буквально на следующий день, мы решили, что было бы очень здорово сделать что-то полезное информационное для веб-разработчиков.

Как результат, родился плакат по современным веб-стандартам, вернее, как это принято в мире веб-разработки, черновик плаката, в который мы включили, как нововведения в самой спецификации HTML5:
Читать полностью »

image

Если вы когда-либо загружали видеофайл на сайт, то знаете это чувство когда загрузилось 90% и вы случайно обновляете страницу.

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

Исходные файлы
ДЕМО

Читать полностью »

Эффективная веб разработка c Visual Studio 2012: нововведения в редакторы HTML/CSS и JavaScript

Новая версия Visual Studio 2012 предлагает значительное число нововведений в редакторы HTML/CSS/JavaScript. В этом обзоре я расскажу про основные нововведения, которые позволят веб-разработчикам писать код более быстро, удобнее и эффективнее.

Редактирование HTML5

Visual Studio 2012 полностью поддерживает HTML5 и все новые теги, которые предлагает новый стандарт. Это означает, что разработчики получают автодополнение новых тегов в редакторе (рисунок 1).

clip_image001
Рис.1. Автодополнение HTML5-тегов

Это так же означает встроенную поддержку валидации HTML5-кода в редакторе. Кроме того, для многих тегов механизм автодополнения создает кроссбраузерный код, например, автодополнение <video> на рисунке 1 приведет к автоматической генерации следующего кода (рисунок 2).
Читать полностью »

HTML5 спецификация наполняется и медленно начинают появляться API, позволяющие получать информацию об устройстве, на котором запущено приложение. Одиим из последних является Battery Status API. Как вы уже догадались, API позволяет получить информацию о батареи используя javascript. Так что теперь у вас есть возможность отключиться тяжелую анимацию на вашей странице, предложить пользователю сохранить данные или самому активно ее сохранять в локальное хранилище. Рабочий пример вы можете найти здесь. Следует заметить, что свойство «Battery time left», было недоступно, когда я открыл страницу. Но оно обновилось через пару минут.

Я тестировал это API с последних бета-версий Mozilla и оно пока не работает на Mac (но работает на iOS, Android и Windows). Так же мне не удалось получить положительный результат статуса зарядки, зато время разрядки и уровень батареи работали корректно. В этом мальньком примере мы просто отобразим информацию из API на простенькой странице, как эта (скрин из моей таблетки):

HTML5: Доступ к батареи через javascript

В этой статье мы рассмотрим:

  • Использование Battery API
  • Создание полей, для отображения информации из API
  • Создание картинки для отображение статуса батареи
  • Использование eventListener для обновления информации

Читать полностью »

HTML5 спецификация наполняется и медленно начинают появляться API, позволяющие получать информацию об устройстве, на котором запущено приложение. Одиим из последних является Battery Status API. Как вы уже догадались, API позволяет получить информацию о батареи используя javascript. Так что теперь у вас есть возможность отключиться тяжелую анимацию на вашей странице, предложить пользователю сохранить данные или самому активно ее сохранять в локальное хранилище. Рабочий пример вы можете найти здесь. Следует заметить, что свойство «Battery time left», было недоступно, когда я открыл страницу. Но оно обновилось через пару минут.

Я тестировал это API с последних бета-версий Mozilla и оно пока не работает на Mac (но работает на iOS, Android и Windows). Так же мне не удалось получить положительный результат статуса зарядки, зато время разрядки и уровень батареи работали корректно. В этом маленьком примере мы просто отобразим информацию из API на простенькой странице, как эта (скрин из моей таблетки):

HTML5: Доступ к батарее через javascript

В этой статье мы рассмотрим:

  • Использование Battery API
  • Создание полей, для отображения информации из API
  • Создание картинки для отображение статуса батареи
  • Использование eventListener для обновления информации

Читать полностью »

Хочу представить вашему вниманию библиотеку для удобной работы с Local и Session Storage. Она появилась, как побочный продукт работы над проектом и содержит несколько довольно удобных функций. Библиотека поддерживает все современные браузеры, а именно:

  • Internet Explorer 8+
  • Mozilla Firefox 3.5+
  • Google Chrome 4+
  • Safari 4+
  • Opera 10.5+

Помимо традиционных — set/get/inc/dec, есть набор удобных «вкусностей»:

  • inc работает со строками
  • extend для объектов
  • много методов для работы с массивами
    • обычные append/prepend/takeLast/takeFirst/getLast/getFirst
    • с проверкой уникальности — .appendUnique/.prependUnique
    • во все append/prepend методы можно передавать лимит — удобно для организации MRU списков
  • calls chaining — я от него в восторге :)

Если заинтересовал — прошу под кат за примерами. Мне кажется они достаточно хорошо показывают возможности библиотеки.

Читать полностью »


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