Регистрация / Вход

Повторная децентрализация веба. На этот раз навсегда

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

Программа ColorMania для Windows

 

 ColorMania — незаменимая утилита для дизайнеров, художников и веб-разработчиков работающих с операционной системой Windows. Представляет собой цветовую палитру с пипеткой, которая позволяет бра...

10 лучших веб-сайтов, чтобы найти бесплатные одноразовые номера телефонов.

 

 

 

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

Европа глазами снежного льва

Кхенпо Кьосанг Ринпоче - тибетский лама, который много лет прожил в цивилизованном европейском государстве, сумел поездить по миру и увидел его с разных сторон. Аудиокнига "Европа глазами снежного...

DWeb: что такое децентрализованный интернет и что он изменит

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

Интернет — это одна из сфер нашей жизни, площадка для общения. Загнать совсем его в прокрустово ложе и невозможно технически, и неправильно морально !

Бесплатная информация

Виджет показывает полезную и бесплатную информацию.

добавить на Яндекс

HTML5 - будущее Интернета

Рейтинг:   / 3
ПлохоОтлично 

Об HTML 5 широкая общественность впервые узнала в апреле 2010 года после открытого письма Стива Джобса - тогдашнего генерального директора компании Apple. В своем послании «Мысли о Flash» Джобе писал о том, что «Flash больше не нужен для того, чтобы смотреть видео и работать с любым другим веб-содержимым», а также о том, что «новые открытые стандарты, созданные в мобильную эру, такие как HTML 5, победят на мобильных устройствах (и на ПК тоже)». Кроме того, он советовал компании Adobe обратить внимание на создание инструментов HTML 5 для будущего.

HTML5, Opera Software

Уже после смерти Стива Джобса, в ноябре прошлого года, оказалось, что его слова были пророческими. Компания Adobe действительно сообщила о своем решении прекратить разработку Flash ( Технология компании Adobe, широко используемая для создания веб- приложений и воспроизведения анимации в интернет-браузере. С появлением HTML5 может потерять свое значение в Интернете. ) для мобильных устройств и сосредоточиться на создании инструментов, использующих HTML5 и другие открытые технологии. Работа над HTML5 началась еще в 2004 году. У истоков этой новой технологии стоит компания Opera Software, которая хорошо нам известна своей любовью к инновациям и открытым стандартам. Главная цель, которая преследуется разработчиками HTML5, - улучшить язык разметки, добавив в него поддержку современных средств мультимедиа, но при этом сохранив легкость восприятия для пользователей и средства для исполнения компьютерами и устройствами. HTML5 улучшает практически все аспекты работы в Сети как для создателей сайтов, так и для обычных пользователей.

Видео и музыка

Одно из важнейших улучшений, связанных с HTML 5, касается работы с мультимедийным контентом: видео и музыкой. Именно об этом применении новой технологии писал Стив Джобе в своем открытом письме. Используемый сегодня повсеместно язык разметки HTML 4 определяет расположение на странице графических материалов, изображений, аудио и видеороликов, а также информирует браузер, какие дополнительные программы нужно установить для отображения контента.

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

Графика

HTML5 также упрощает работу с изображениями. На сегодняшних сайтах для создания красивых веб-галерей с эффектами перехода и трехмерным представлением эскизов нам нужно использовать Flash и другие дополнения. На веб-страницах будущего, основанных на HTML5, галереи будут создаваться средствами CSS - ( Cascading Style Sheets - технология описания внешнего вида документа, используемая на большинстве современных веб-сайтов для верстки и определения параметров текста. В настоящее время разрабатывается новая версия CSS3 ) и, соответственно, сторонние приложения для их отображения уже не понадобятся.

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

Анимация

Одной из самых интересных возможностей HTML5 является новая функция Canvas. С ее помощью можно создавать разнообразную графику: интерактивные изображения, графики и диаграммы, игры, симуляции, любую другую анимацию или приложения в веб-браузере. Такое содержимое размещается непосредственно на веб-странице и так же, как и воспроизведение видео, не требует Flash или других дополнительных приложений.

 

Интеграция текста и изображений

HTML5 предлагает такие возможности по управлению внешним видом текста, о каких веб-разработчики прошлого десятилетия могли только мечтать. С их помощью можно управлять прозрачностью шрифта, интервалом между буквами, градусом поворота, наличием тени. Благодаря использованию масштабируемой векторной графики и CSS3, можно, например, применять на интернет- страницах векторные шрифты, которые отлично масштабируются рис. 10. Таким образом, для создания красивых логотипов рис. 11 больше не нужно будет обращаться к про-граммам вроде Adobe Photoshop, а затем сохранять результат в виде объемного графического файла. HTML5 расширяет возможности по взаимодействию текста и графики - обычные веб-страницы могут выглядеть так же красиво, как глянцевые журналы с профессиональной версткой.

текста и графики - обычные веб-страницы могут выглядеть так же красиво

 

ADOBE EDGE - ВЕБ-РАЗРАБОТКА НА HTML5
Работа над спецификацией HTML5, как предполагается, будет завершена только к 201Д году. Однако уже сейчас имеется множество приложений, которые дают возможность работать с этим набором технологий. Одно изних- Adobe Edge. С его помощью разработчики могут создавать веб-анимацию и приложения, аналогичные Flash, но при этом использующие стандарты HTML5, JavaScript и CSS. Открытое бета-тестирование Adobe Edge началось в августе прошлого 2011 года. Пока что работать с программой можно совершенно бесплатно - для этого нужно скачать ее с сайта Adobe Labs.

 

Ввод данных

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

 

Выход в офлайн

Веб-приложения, которые сегодня приходят на замену обычным настольным программам, имеют важный недостаток - многие из них не могут работать без подключения к Интернету. Но в скором будущем это изменится. Функция HTML5 AppCache дает возможность сохранять на жестком диске все данные, которые могут понадобиться веб-приложениям для работы в офлайне - файлы HTML ( Hypertext Markup Language. Язык программирования для описания формата электронных документов, широко применяемый для создания интернет-страниц, а с недавнего времени используемый и для решения других задач. ), CSS ( Cascading Style Sheets - технология описания внешнего вида документа, используемая на большинстве современных веб-сайтов для верстки и определения параметров текста. В настоящее время разрабатывается новая версия CSS3. ), JavaScript ( Язык программирования, используемый для написания сценариев поведения браузера, встраиваемых в веб-страницы. С его помощью можно, например, создавать меню, всплывающие окна и пр. Является диалектом языка ECMAScript. )  и любые другие.

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

HTML5 и мобильные платформы

Одно из главных преимуществ HTML5 перед его предшественником - намного более компактный код. Благодаря этому веб-страницы получаются меньшего размера и, как результат, быстрее загружа-ются. HTML5 гораздо менее требователен к аппаратным ресурсам устройства, на котором визуализируется страница, поэтому созданные с его помощью сайты и приложения прекрасно подходят для просмотра на современных мобильных устройствах. Таким образом, HTML5 очень привлекателен для разработчиков мобильных приложений. Созданные с его помощью программы запускаются непосредственно в веб-браузере, поэтому могут работать на любых портативных устройствах - использующих Apple iOS, Android или Windows Phone. Пока что, правда, далеко не все мобильные браузеры могут похвастаться поддержкой HTML5, однако с каждым месяцем эта ситуация исправляется. Наилучшим образом новый стандарт поддерживает браузер Safari, который предустанавливается на все устройства Apple, от него немного отстают Firefox 10 для Android и Opera Mobile 11.5. Последние данные о совместимости мобильных браузеров со стандартом HTML5 можно почерпнуть на сайте http:// mobilehtmB.org . рис. 12

    

 

Тест на совместимость с HTML5

Какой браузер сегодня поддерживает все возможности HTML5 ? Пока что такого не существует. Но совместимость веб-обозревателей с новым пакетом технологий постоянно совершенствуется, поэтому, чтобы оценить возможности сайтов, созданных на HTML5, лучше всего использовать самые свежие версии Google Chrome, Mozilla Firefox, Opera, Apple Safari или Internet Explorer.

Оценить поддержку HTML5 можно при помощи широко известного теста, доступного по адресу: www.html5test.com. В настоящее время он умеет проверять совместимость с 475 функциями нового стандарта. Самую лучшую поддержку HTML5 демонстрирует Google Chrome: восемнадцатая версия обозревателя набирает 377 баллов. Браузеры Firefox 9 и Opera 11.60 традиционно идут нога в ногу, удерживая законное второе место - у них 330 и 329 баллов соответственно. Кстати, альфа-версия Opera 12 показывает намного лучший результат - 344 балла, так как в ней, в частности, уже реализована поддержка WebGL.

Apple Safari 5.1 набирает в тесте всего 302 балла. Что же касается Internet Explorer, то для апробации HTML5 этот браузер подходит хуже всего: девятая версия приложения набирает лишь 141 балл. Несмотря на то что в HTML5 уже реализовано множество улучшений, для поддержки которых потребуются новые версии интернет-браузеров, новый стандарт совместим с общепринятым HTML 4. А это означает, что страницы, созданные на HTML5, вполне корректно отображаются и в старых браузерах.

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

 

 

 

Геопозиционирование

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

В этом случае для определения точных координат пользователя могут задействоваться точки доступа Wi-Fi, выполняющие роль опознавательных «маяков». Идентификация пользователя выполняется по уникальному МАС-адресу, а уровень сигнала указывает, насколько далеко от него находится точка доступа. Функция геопозиционирования в интернет-браузере может влиять на предоставляемый пользователю контент. С ее помощью он получает актуальную информацию любого типа - сведения о погоде в данном регионе, данные о ближайших ресторанах, магазинах, транспорте и т.д.

Геопозиционирование уже реализовано в Google Chrome, Safari и Opera (включая версию Opera Mobile). Причем в норвежском браузере программой задействуются оба метода геопозиционирования - как с помощью интегрированного модуля GPS, так и с помощью базы данных известных точек доступа Wi-Fi.

ПЯТЬ ГЛАВНЫХ ОСОБЕННОСТЕЙ HTML5

 

  1. Открытый код - каждый желающий может получить к нему доступ и принять участие в его улучшении.
  2. Распространяется бесплатно, без ограничений.
  3. Совместим со всеми платформами.
  4. Не требует использования дополнительных программ для браузеров (плагинов).
  5. Не требует компилирования.

 

 

WebGL - трехмерная графика в браузере


Благодаря элементу Canvas в браузере возможна работа WebGL - технологии, которая дает возможность создавать трехмерные игры, презентации и прочий 3D - контент, используя веб-обозреватель как платформу. Новый стандарт WebGL был окончательно утвержден в 2010 году и в настоящее время поддерживается браузерами Google Chrome, Firefox и альфаверсией Opera 12. Одной из особенностей WebGL является поддержка аппаратного ускорения. Иными словами, для визуализации сложной трехмерной анимации используются возможности видеокарты, а не ресурсы центрального процессора.

Трехмерные трансформации 3D CSS


На веб-страницах, созданных с помощью HTML5, можно использовать трехмерные трансформации - 3D CSS. Они позволяют располагать элементы веб-страниц в трехмерном пространстве, например вписывать текст в цилиндр. Трехмерные трансформации можно использовать вместе с дру-гими возможностями CSS, в частности с анимацией. Пример ис-пользования 3D CSS можно увидеть на странице www.webkit. org/blog-files/3d-transforms/ morphing-cubes.html рис. 14Внимание! Несмотря на то что все элементы этой анимации вращаются в трехмерном пространстве, их можно выделить, как обычный текст. В современных браузерах поддержка трехмерной трансформа-ции 3D CSS реализована с задействованием возможностей видео-карты, поэтому анимация воспроизводится плавно.

 

 

Opera Reader - перелистывание вместо прокрутки


За многие годы использования Интернета мы привыкли к тому, что страницы нужно «перематывать» вниз. Наличие горизонтальной прокрутки на странице, напротив, всегда воспринималось как недостаток сайта, а одним из достоинств браузера Opera был специальный алгоритм масштабирования, благодаря которому пользователям никогда не приходилось использовать горизонтальный скроллинг.

Спустя много лет, когда диагонали мониторов растянулись и все давно забыли о проблеме горизонтальной прокрутки, именно Opera Software показала новую технологию, которая в будущем, как предполагается, уберет с интернет-страниц даже вертикальную прокрутку. Основная мысль, стоящая за новым набором инструментов Opera Reader, в том, что привычное пролистывание длинных страниц сайтов лишь кажется нам удобным. На самом деле оно идет вразрез с привычкой, столетиями укоренявшейся в человеке, листать страницы бумажных книг. Новые технологии сенсорных экранов и появление планшетов вернули мир к идее «пейджинга», но уже на новом технологическом уровне. Создатель CSS и технический директор Opera Software Хокон Виум Ли, который является главным идеологом и разработчиком проекта Opera Reader, считает, что именно «пейджинг в ближайшие годы подпишет смертный приговор скролл-бару». Постраничный просмотр документов гораздо удобнее для человеческого восприятия, и многие передовые сайты уже начали перестраивать свою структуру под новый формат, очень похожий на тот, который мы сегодня имеем в электронных книгах. Например, веб-сайт Wired предлагает приложение для iPad именно в таком, журнальном формате рис. 15 . Возможность разбиения длинных веб-полотен на отдельные веб-сайт Wired предлагает приложение для iPad именно в таком

страницы реализуется уже на уровне определения самой ее структуры - посредством CSS и HTML. Именно поэтому добавление элементов перелистывания в код никак не влечет за собой утяжеление страницы, а для пользо-вателя переход к следующей части происходит без задержек. Кроме того, технология Opera Reader содержит дополнительные инструменты для верстки: такие, как расстановка переносов и расположение «плавающих» элементов веб-страницы поверх нескольких колонок  текста Opera Reader уже поддерживается браузером Opera 12. На специально созданном демосайте http: //people, opera, com/how- come/2011/reader пользователи альфа-версии браузера могут по-листать новости, «Википедию» рис. 16 или «Алису в Стране чудес» Льюиса Кэрролла.

 Opera TV Store: веб- приложения в гостиной
В начале января этого года неугомонные парни из Opera Software представили еще одну новинку, которая хотя и похожа на сказку, но уже очень скоро станет реальностью. Речь идет об открытии каталога приложений Opera TV Store (www. opera, com/business/tv/ store) для телевизоров. Да-да, именно так - после того, как каталог заработает в полную силу, мы сможем прочитать ленту сообщений на Facebook или просмотреть ролики от Vimeo прямо на экране телевизора рис. 17.  При этом приложения смогут работать в фоновом режиме и выводить на экран различные уведомления (скажем, о появлении новых сообщений в социальной сети), когда пользователь смотрит телевизор. Управлять приложениями можно будет при помощи обычного пульта дистанционного управления. Все приложения в каталоге Opera TV Store, естественно, будут создаваться на основе HTML5. просмотреть ролики от Vimeo прямо на экране телевизора Opera Software сейчас ведет переговоры с производителями телевизоров относительно внедрения этой технологии в новые модели. А для разработчиков уже создан эмулятор opera.com/ business/tv/emulator, при помощи которого они могут выполнять свои первые телевизионные приложения рис. 18

 

 

САЙТЫ БУДУЩЕГО: СМОТРИТЕ УЖЕ СЕГОДНЯ

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

Chrome Experiments - веб-эксперименты от Google
Что сейчас можно сделать при по-мощи HTML5, JavaScript, SVG и других современных технологий? Чтобы быстрее всего найти ответ на этот вопрос, стоит посетить сайт Chrome Experiments (www.chromeexperiments.com). Этот ресурс был специально сделан для демонстрации твор-ческих проектов, созданных с использованием новых средств веб-разработки. Кстати, когда сайт был запущен в марте 2009 года, на нем было 19 экспериментальных примеров - сейчас число этих проектов приближается к цифре 400.

WebGL Bookcase

Один из самых захватывающих проектов на сайте Chrome Experiments Один из самых захватывающих проектов на сайте Chrome Experiments - это виртуальная библиотека, созданная с использованием WebGL. Загрузив веб-страницу проекта, пользователь оказывается перед огромным книжным шкафом, выполненным в виде трехмерной спирали и вмещающим 10 тысяч книг, доступных на сервисе Google Books. При помощи мыши можно вращать спираль, а также перемещаться по ней вверх и вниз. При выборе книги она «достается» из шкафа, и ее ЗР-модель располагается посередине экрана. Можно просмотреть информацию об авторе, краткое содержание, а также перейти на посвященную ей страницу на Google Books.
www.chromeexperiments.com/ detail/webgl-bookcase

 

Sketchpad


Sketchpad - это новый графический редактор для рисования Sketchpad - это новый графический редактор для рисования, созданный исключительно средствами HTML и JavaScript. Несмотря на то что это веб-приложение размещено на проекте экспериментов, оно является полностью работоспособным. Sketchpad дает вам возможность использовать такие инструменты рисования, как кисти, карандаш, текст, векторные формы, заливку, штамп и т.д. В создаваемых проектах можно работать с разными вариантами градиентов и текстур. Но самое поразительное, что в Sketchpad работают многие привычные сочетания клавиш: скажем, Ctrl+Z отменяет последнее действие.
www.chromeexperiments.com/ detail/sketchpad

 

WebGL Water Simulation

Для того чтобы сделать убедительную имитацию поведения воды в ЗD-редакторе Для того чтобы сделать убедительную имитацию поведения воды в ЗD-редакторе, нередко приходится ждать помногу часов. Проект WebGLWaterSimulation показывает, что в будущем 30-визуализация будет осуществляться в браузере практически мгновенно. В бассейн, наполненный водой, помещена сфера, которую можно перемещать, погружать в воду или же, наоборот, поднимать над поверхностью. При этом сфера ведет себя вполне реалистично: создает рябь, волны и пр., а вода визуализируется с учетом отражения и преломления света, солнечных зайчиков на дне бассейна и так далее.
www.chromeexperiments.com/ detail/webgl-water-simulation

 

The Planetarium

Самый популярный проект на Mozilla Demo Studio Самый популярный проект на Mozilla Demo Studio - это, конечно же, The Planetarium, приглашающий в путешествие по Солнечной системе. Созданный с использованием SVG, JavaScript, HTML5 и CSS3 ресурс предоставляет информацию обо всех планетах, а заодно демонстрирует, как можно средствами HTML5 строить красивые графики и диаграммы, располагать на странице текст и изображения.
https://devetoper.mozilla.org/ en-US/demos/detail/the-planetarium

 

 

 

 

 

Mozilla Demo Studio - эксперименты от создателей Firefox

Свой проект, демонстрирующий возможности HTML, CSS и Java-Script, имеет не только Google, но и Mozilla. Ресурс Mozilla Demo Studio (http://developer.mozilla. org/demos) был открыт около го¬да тому назад. Его запуск был при-урочен к выходу четвертой вер¬сии Firefox, одним из основных нововведений которой стала улучшенная поддержка HTML5. Представленные проекты, кото¬рых уже около 200, работают не только в Firefox, но и во всех других современных браузерах с поддержкой HTML5. Boтличие от TChromeExperiments сайт Mozilla больше ориентирован на разработчиков. Тут можно найти документацию по использованию стандартов будущего, а для каждого проекта доступен исходный код.

HTML5 для просмотра видео

Одно из важнейших преимуществ HTML5 - воспроизведение видео в веб-браузере без использования дополнений (плагинов). Поэтому нет ничего удивительного в том, что новый набор этих технологий берут на вооружение популярные видеохостинги.

Vimeo - каждому свое видео

Популярный видеохостинг Vimeo начал тестирование HTML5-вeepсии примерно тогда же, когда это сделал YouTube, - в январе 2010 года. Около года назад HTML5-плеер избавился от приставки «бета» и наконец-то стал полноправной частью Vimeo. Для перехода в новый режим достаточно перейти по ссылке ''на странице с любым видеороликом. После этого все следующие клипы будуттакже воспроизводиться с использованием HTML5. Правда, работает этот режим только в новых браузерах Chrome и Safari - пользователи других обозревателей просто не увидят ссылки для переключения. Главное отличие HTML5-Bepcии веб-ресурса Vimeo от Flash-вэрианта - более плавное воспроизведение. Крометого, переход к произвольному фрагменту видео происходит здесь гораздо быстрее, чем во Flash-версии. Полноэкранный режим просмотра также поддерживается. Режим HTML5 используется и при встраивании видеоролика в веб-страницу, хотя Vimeo применила тут более гибкий подход, чем тот же YouTube. Новый сервис генерирует универсальный код для добавления на веб-страницу. Когда посетитель ее загружает, плеер автоматически подбирает наилучший вариант воспроизведения. Так, если страница просматривается с помощью iPad или iPhone, видео будет воспроизводиться в режиме HTML5. Крометого, HTML5-плеер для устройств Apple с iOS 4.3 и выше поддерживает быструю отправку видео для просмотра на AppleTV.

 

YouTube на HTML5
НТМL5-версия YouTube была открыта в бета-режиме еще два года назад, в январе 2010 года. Для того чтобы стать участником тестирования, вам достаточно зайти на страницу youtube.com/html5, уточнить, что интернет-браузер поддерживает необходимые технологии и щелкнуть по ссылке Join the HTML5 Trial . После этого заходите на страницу с любым видео. Чтобы убедиться в том, что воспроизведение идетсредствами HTML5, щелкните правой кнопкой мыши по плееру. В появившемся контекстном меню можно будет увидеть строку About HTML5. При помощи данного меню можно просмотреть информацию о видео, скопировать ссылку на него, получить код для встраивания в веб-страницу и т.д. Приятно, что меню практически идентичнотому, которое можно видеть в обычном режиме на «старом» YouTube. На сегодняшний день бета-тестирование HTML5-версии еще не завершено, однако на сайте уже можно встретить ролики, которые по умолчанию воспроизводятся без Flash даже для тех пользователей, которые не участвуют в тестировании. И, несмотря на то что улучшения HTML5-версии видеохостинга особо не афишируются его разработчиками, по возможностям она уже мало чем уступает стандартному YouTube. В ней поддерживаются комментарии  воспроизведение видео в HD-качестве атакже полноэкранный просмотр в браузерах Firefox и Chrome. Пожалуй, единственный важный недостаток HTML5-версии, который пока что не дает YouTube вывести ее из стадии «бета», - в ней не поддерживается реклама. Из-за этого при просмотре роликов с рекламой идет принудительное переключение на Flash-версию.

ВИДЕОКВЕСТЫ: ИНТЕРАКТИВ НА YOUTUBE

Появление на YouTube интерактивных титров в свое время вызвало волну недовольства среди его пользователей. Многие говорили, что данная функция не нужна никому, кроме рекламодателей. Однако время показало, что ее можно использовать и в других целях. Например, благодаря аннотациям стало возможным появление видеоквестов - серий роликов, на определенном моменте которых пользователь должен выбрать дальнейший ход событий. Таким образом, из простого зрителя можно превратиться в полноправного создателя видеоклипа. Интересно, что первым видеоквестом стал социальный проект от лондонской полиции Choose A Different Ending (www.youtube.com/ watch?v=JFVkzYDNJqo], целью которого было показать молодым людям, к чему может привести ношение оружия. Широкую известность также получила популярнейшая видеоигра Youtube Street Fighter (www.youtube.com/watch?v=LPQ1XrllZmA), в которой можно управлять поведением героя во время драки при помощи интерактивных кнопок.

Google MapsGL - карты будущего

В октябре 2011 года заработала бета-версия MapsGL (http://maps. google.com/gl) - специального варианта картографического сервиса компании Google, в котором была реализована поддержка графики WebGL. С задействованием новой технологии бродить по Земле стало гораздо приятнее: при перемещении карты или изменении ее масштаба переходы между изображениями здесь более плавные, чем в обычной версии Google Maps. 3D-здания и панорамы можно просматривать под углом 45° прямо в самих «Картах», а переход к просмотру улиц и навигация в этом режиме осуществляются практически мгновенно. Сервис Google MapsGL использует аппаратное ускорение и не требует установки никакого дополнительного ПО. Google MapsGL работает только в Google Chrome и Firefox последних версий. Чтобы переключиться к новому бета-режиму, просто загрузите главную страницу сервиса maps.google.com, щелкните по ссылке » Исследуйте карты в режиме MapsGL и нажмите на кнопку . Через несколько секунд произойдет переключение в новый режим Для возврата в обычный режим просмотра щелкните по ссылке просмотра щелкните.

 

Tinkercad - создание ЗD-моделей в браузере

Технология работы с трехмерной графикой WebGL в веб-браузере сделала возможным появление проекта Tinkercad (http://tinker- cad.com). Этот сайт представляет для нас особый интерес, поскольку WebGL здесь используется не для зрелищности, а для вполне серьезных целей. С помощью Tinkercad прямо в окне браузера можно со-здавать трехмерные модели. В распоряжении пользователя есть все основные геометрические фигуры, а также трехмерные буквы, цифры и другие часто используемые символы. Проекты могут быть сохранены в формате STL и распечатаны на ЗD-принтере. Кроме того, здесь можно обмениваться созданными моделями с другими людьми.

Zygote Body - WebGL для изучения анатомии
Еще один замечательный пример использования возможностей WebGL - проект Zygote Body (www. zygotebody.com). Разработанный инженерами Google в свободное время, раньше он назывался Google Body Browser. Теперь же этот проект был передан под крыло Zygote, и его исходный код открыт для разработчиков.
Zygote Body - это трехмерная модель человека, предназначенная для изучения анатомии. 3D-модель можно вращать, рассматривая со всех сторон, а также накладывать на нее различные слои - мышечную массу, внутренние органы, кости и т.д. Если воспользоваться окошком для поиска и начать вводить начальные буквы названия части тела, она тут же будет показана крупным планом. Еще одна привлекательная возможность Zygote Body - это установка меток. Стоит щелкнуть по любому органу или части тела - и название появится па экране в виде метки. Нажмите на кнопку - и метка будет закреплена на экране, а щелчок по ней позволит быстро вернуться к просмотру части тела.

 

Mugeda - создание анимации на HTML5

HTML5 открывает широчайшие возможности для создания раз-личных онлайновых сервисов. Прекрасный пример - Mugeda (www.mugeda.com), сайт для создания 20-анимации. Сервис полностью создан на HTML5, поэтому не требует никаких дополнительных приложений для работы, кроме совместимого веб-браузера. Интерфейс Mugeda будет понятен каждому, кто хотя бы раз работал с программами для создания flash-анимации. Mugeda позволяет добавлять слои и определять для каждого из них ключевые кадры, а положение объектов между этими кадрами будет просчитываться автоматически. Mu-geda поддерживает создание анимационных объектов при помощи простых инструментов (линия, кривая, карандаш, прямоугольник и прочее), а также загрузку изображений и добавление камер. Здесь также можно загрузить аудиофайл для звукового сопровождения. Готовая анимация может быть сохранена как Java-Script и в виде последовательности кадров в формате PNG. Зарегистрированные пользователи могут сохранять проекты прямо на сервере Mugeda и, конечно, публиковать их для всеобщего обозрения и критики.

 

ANGRY BIRDS НА HTML5

Angry Birds можно увидеть почти на каждом втором смартфоне, который может справиться с подобной графикой и просчетом физики. Однако не все знают, что эту культовую игру можно запустить прямо в окне браузера, без установки. Angry Birds, написанная с использованием HTML5, оптимизирована для Google Chrome, однако может работать и в других веб-браузерах. До сих пор технология Flash широко использовалась для создания браузерных игр. Однако HTML5 ничем не хуже, и существование HTMLS-версии Angry Birds (http:// chrome.angrybirds.com - лучшее тому доказательство.

 

SkyDrive - отказ от Silverlight в пользу HTML5

Корпорация Microsoft, еще недавно активно продвигавшая свою платформу Silverlight, теперь почти полностью отказалась от нее в пользу HTML5 и CSS3. Облачный сервис Microsoft для хранения файлов SkyDrive (https://skydrive.live.com) с ноября 2011 года активно использует возможности стандарта HTML5. Для того чтобы убедиться в этом, достаточно загрузить на SkyDrive какой-нибудь файл. При работе с Internet Explorer 10, Google Chrome, Mozilla Firefox или Apple Safari для загрузки файла нужно просто перетащить его в окно браузера. Загрузка при этом происходит в фоновом режиме, и пользователь параллельно может выполнять любые действия в окне сервиса. За ходом закачки можно наблюдать в специальном окне. HTML5 также используется на SkyDrive для показа фотографий. Папку с изображениями можно просматривать в виде веб-галереи, используя для навигации эскизы фотографий. На HTML5 работает и режим слайд-шоу, при переходе в который можно оценить плавные эффекты перехода. Наконец, новая технология задействуется и для сохраненных на сервисе видеофайлов в формате Н.264 - они воспроизводятся непосредственно в браузере без использования дополнительных плагинов.