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

Эффективная веб разработка 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 — я от него в восторге :)

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

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

Под аккаунтом Mozilla на github стартовала разработка open source проекта Shumway — это технологический эксперимент, в рамках которого исследуются возможности рендеринга SWF без использования нативного кода, то есть средствами HTML5 и JavaScript.

Mozilla надеется, что подобный инструмент всё-таки будет создан и будет использоваться повсеместно как всеобщий открытый стандарт для парсинга и рендернига Flash-анимации. Интеграция с Firefox возможна, если эксперимент окажется успешным.
Читать полностью »

HTML5 Адаптивные изображения

Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением.Читать полностью »

Интерактивная книга «Радугоны» на HTML5 и JavaScript для Windows 8 (неделя в Store)Уважаемый хаброчитатель, поведаем тебе сегодня об опыте практической разработки приложений для Windows 8, подготовке, отладке и публикации проектов под этой платформой, и про применение одного из методов метопрограммирования (о чем мы писали раньше) для анимации в стеке технологий HTML5 + JavaScript + Metro style apps. Ведь теперь в Windows 8 можно применять JavaScript не только в браузере, но и для создания нативных «оконных» приложений. И вот, мы уже 6 дней в сторе, приложение можно установить бесплатно, более того, мы не приводим тут код, т.к. его можно свободно посмотреть после установки приложения прямо по папочкам js, css, html, fonts, images. Можно качать и смотреть, обфускацию мы не применяли. Пока HTML5 приложения ни как не защищены в маркете, но Microsoft обещает в самое ближайшее время реализовать защиту.
Читать полностью »

Загрузка и инициализация JavaScript
С появлением мобильного веба наш интернет стал снова плохим, а устройства медленными. 3G, 4G, Wi-Fi… — они, конечно, где-то есть, но когда очень надо, то как правило скорость падает до околомодемной и получается, что наши мобильный устройства «каменного века» попадают в условия современного объема информации. Даже в центре города (правда на 15-м этаже) значек мобильного интернета может показывать волшебную букву Е, намекающую о том, что уж лучше не тратить нервы и потерпеть. Лучше уж использовать нативную версию какого-то веб-сервиса, чем каждый раз ждать, загружать по мегабайту, чтобы отправить короткое сообщение. Нативную версию веб-сервиса... Понятное дело маркетинг, гонка приложений. Однако, же пользователи выбирают нативные веб-приложения, которые работают быстрее, не качают кучу ресурсов, хотя им приходится периодически его обновлять.

Эта статья о том какими путями можно оптимизировать загрузку и инициализацию JavaScript.
Читать полностью »

WebGL-2d — весьма интересная javascript библиотека, реализующая стандартные методы для работы с 2d контекстом Canvas на WebGL контексте.

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

Подключив WebGL-2d и добавив всего пару строчек, мы можем существенно ускорить отрисовку графики, реализованную с средствами Canvas 2d API в браузерах, поддерживающих WebGL и обеспечить fallback к обычному 2d контексту.

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

На днях команда HTML5-карт Nokia представила API карт под смартфоны и планшетники.

С места — в карьер!

Попробовать можно по ссылке: bit.ly/html5map
На данный момент поддерживаются Webkit-браузеры.

Достоинства и возможности

  • Компоненты
    Карты, пробки, поиск, геолокация, информация об интересных местах, навигация, пешеходные маршруты, избранное.
  • Вес
    80 KB Javascript + 10 KB CSS
  • Производительность
    Быстрая загрузка и плавные эффекты.
  • Готовность
    Можно легко поменять цвета, обернуть в PhoneGap или QtWebkit и получить готовое приложение.
  • WYSIWYG-помощник
    Помогает настроить конфигурацию под себя.

HTML5 карты для мобильных платформЧитать полностью »


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