Pull to refresh

Браузер Opera: XXI век

Reading time 11 min
Views 1.3K
После всех мероприятий, проводимых компанией Opera Software в России в последнее время, где разработчики рассказывали о новых технологиях и возможностях, планируемых к включению в браузер в ближайшем будущем, многие пользователи Opera, которые по тем или иным причинам не смогли присутствовать на встречах, просили выложить где-нибудь презентацию, чтобы посмотреть на новшества. Сделать это было довольно затруднительно, т.к. каждое выступление норвежских разработчиков было своего рода импровизацией, а не скучным перелистыванием слайдов. Но вопросы оставались, поэтому я решил попробовать сделать статью, основанную на тех выступлениях разработчиков Opera, которую вам сейчас и представляю.

Браузер Opera: XXI век

Несмотря на то, что уже подходит к концу первый десяток лет воспетого фантастами XXI века, в плане интернет-технологий мы до сих пор пользуемся в основном разработками прошлого столетия. Причин тому множество, начиная от необходимости поддержки веб-сайтов, созданных много лет назад и заканчивая периодом застоя в процессе разработки всем известной некогда монопольной компании. И это вдвойне грустно, учитывая космические скорости развития новых технологий в смежных IT-отраслях. Впрочем, сегодня уже всем ясно, что пришло время создавать новый интернет, в котором станет проще и лучше жить не только пользователям, но и разработчикам: поиск новых решений и технологий ведётся практически всеми ведущими игроками рынка. Естественно, компания Opera Software тоже не стоит на месте и вносит посильный вклад в общее дело, причём, не только добавляя в свои браузеры новые функции, но и продвигая в ранг международных открытых стандартов технологии, способные сделать даже сам интернет проще, быстрее и функциональней.

Совсем недавно норвежская компания представила тестовую версию своего браузера Opera-9.52, в котором реализована поддержка новшеств, активно популяризируемых разработчиками Opera Software. В частности, данный экспериментальный экземпляр обладает расширенной поддержкой векторной графики в формате SVG, HTML-тэга video и технологии Canvas. Людям, далёким от технической стороны вопроса, трудно понять, что же хотят добавить в интернет норвежские разработчики, поэтому в данной статье мы попробуем на наглядных примерах посмотреть, каков эффект от использования новых технологий. Если вы хотите не только посмотреть скриншоты, но и попробовать новые разработки своими руками, вам следует установить на свой компьютер ту самую тестовую версию, загрузив её с официального веб-сайта компании (вы должны помнить, что это тестовая версия, поэтому лучше всего установить её в другой каталог, отдельно от постоянно используемой версии Opera). Ссылки на файлы примеров будут помещаться в тексте статьи, таким образом вы сможете не только читать, но и экспериментировать с технологиями, которые, возможно, станут широко используемыми лишь через несколько лет. Итак, вы уже хотите заглянуть в будущее? Тогда начнём.

SVG

Аббревиатура SVG расшифровывается, как «Scalable Vector Graphics», другими словами — масштабируемая векторная графика. Основное отличие данного формата изображений от привычных PNG или JPG в том, что он не содержит попиксельный бинарный слепок рисунка, а состоит из описаний, согласно которым компьютер пользователя генерирует графические объекты. Один из наиболее наглядных примеров выгодного отличия SVG может служить трюк с увеличением размера изображения в окне браузера. Сравните два скриншота:

image

Как видите, при увеличении изображения не появляется никаких «ступенек» и «квадратиков», какой бы масштаб мы ни выбрали (открыть пример в браузере). При этом в качестве собственно рисунка используется лишь один небольшой файл в формате SVG. На самом деле это лишь цветочки — потенциал векторных изображений гораздо выше. Посмотрим на второй пример (открыть пример в браузере).

image

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

image

Получилось? Более того, теперь вы можете даже скопировать этот текст в буфер обмена и вставить в любой документ (естественно — без сохранения волнистости). С обычными изображениями, включающими в себя не только рисунок, но и текст, такие штуки не проходят. А теперь разоблачение фокуса. Как я уже сказал выше, векторная графика представлена файлом описания (вы можете открыть данный пример даже в текстовом редакторе). Таким образом, волнистый текст на изображении (а это именно изображение) вписан в тело файла описания обычной строкой. Думаю, вы уже догадались: данные строки могут индексироваться поисковыми сервисами и вы сможете искать картинки, например, по тексту на них. Одновременно выясняется и ещё один плюс: если вы когда-либо занимались заменой или переводом на другой язык надписей на рисунках, то теперь можете забыть про утомительную возню с Photoshop или Gimp — достаточно лишь заменить соответствующие строки в описании SVG-файла с помощью любого текстового редактора. Есть и третий плюс — каким бы огромным данный SVG-файл ни отображался на странице, его размер останется неизменным — меньше килобайта (в данном примере — 761 байт). Ведь это обычный текстовый файл в пару десятков строк. Учитывая, что до 90% содержимого веб-страниц составляют графические элементы, нетрудно представить, насколько быстрее будет осуществляться загрузка страниц в браузер, если использовать для графики формат SVG. Плюс — высокое качество при любом масштабе. При этом SVG графика может легко совмещаться и с обычными растровыми изображениями, привнося в дизайн страниц массу дополнительных и, что самое главное, легко реализуемых декоративных украшений (открыть пример в браузере).

image

Идём дальше. Статические изображения формата SVG мы уже изучили, но на самом деле мы легко можем анимировать эти рисунки и даже добавлять интерактивности. Делается это очень просто — с помощью скриптовых языков на основе спецификации ECMAScript, т.е. — в том числе используя и широко распространённый JavaScript. Для ознакомления с возможностями анимации в SVG изображениях можно посмотреть пример с вращающимися вложенными кольцами и внедрённым текстом (открыть пример в браузере):

image

Или другой вариант — упрощённая модель Солнечной системы. Данный пример также интересен тем, что помимо анимации в SVG файле имеется и внедрённое растровое изображение в формате PNG — это собственно звёздное небо, используемое в качестве фонового рисунка. Согласитесь, что аналогичной гибкости мы не получим ни с одним из других популярных графических форматов (открыть пример в браузере).

image

И напоследок — немного об интерактивности. Она также достигается с помощью скриптов и позволяет значительно расширить возможности управления различными объектами веб-страниц, да и просто открывает новые просторы для полёта фантазии веб-разработчиков. Примечательно, что по традиции обилие анимации и уж тем более интерактивные «рюшечки» всегда заставляют пользователей мириться с различными неудобствами, начиная от непомерного трафика и заканчивая необходимостью установки всевозможных плагинов к браузеру, но данный пример показывает, что всего этого можно легко избежать — достаточно лишь веб-разработчикам воспользоваться потенциалом SVG формата (открыть пример в браузере):

image

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

Тэг video

Прежде всего давайте посмотрим, как реализация данной технологии выглядит непосредственно в браузере. Для этого откроем файл, содержащий всего одну строку (открыть пример в браузере):

image

На первый взгляд — ничего особенного: интернет просто наводнён аналогичными роликами, встроенными в веб-страницы, существуют даже весьма популярные онлайновые сервисы, предлагающие сотни тысяч видеороликов для просмотра прямо в браузере. Для того, чтобы понять разницу, попробуйте отключить в браузере плагины (в диалоговом окне, открываемом клавишей F12) и открыть любой ролик на том же RuTube. Правильно — не работает. А теперь откройте вышеуказанный пример. И вы увидите, что данный видеоролик будет воспроизводиться как ни в чём ни бывало. На самом деле здесь нет никакого чуда или обмана, и в браузер не встроен медиаплейер. Всё, что сделали разработчики — включили в браузер поддержку тэга video, который, кстати, представлен в черновике спецификаций будущей версии языка HTML-5, а также добавили в Opera небольшой кодек для свободного формата Ogg Theora (который, кстати, рассматривается в качестве международного стандарта для встроенного видео). Таким образом, как только браузер обнаруживает данный тэг в коде веб-страницы, он просто использует встроенный кодек для воспроизведения внедрённого на страницу видеофайла. Также при желании в тэге можно указать использование стандартных элементов управления процессом воспроизведения видеофайла (честно говоря, дизайн у них не ахти какой, но это легко исправляется, об этом — чуть позже).

Итак, мы выяснили, что при использовании тэга video отпадает необходимость в установке дополнительных плагинов в браузер (а их суммарный размер может оказаться даже больше самого браузера), что уже плюс. Но есть и более веский фактор — финансово-правовой. Дело в том, что популярный нынче флэш-формат является технологией проприетарной, права на которую принадлежат компании Adobe (аналогичная ситуация складывается и для чуть менее популярных realvideo и quicktime). Поэтому все, кто использует его в своей профессиональной деятельности, связанной с получением прибыли в том или ином виде, обязаны отчислять правообладателю некоторую сумму в конвертируемой валюте. Конечно, обычный пользователь, просматривающий видеоролики в сети, никому ничего не платит, но все компании или сервисы, использующие данную технологию, выплачивают Adobe «оброк», который, естественно, тем или иным путём всё равно взимается с конечного пользователя. Плюс к этому можно вспомнить и довольно дорогостоящие средства разработки, чтобы получить более-менее ясную картину того, сколько съедает использование флэш-технологии. Для полноты картины остаётся только добавить, что приверженцы свободного ПО вообще вынуждены зачастую отказываться от подобных технологий по причине несовместимости лицензий.

К счастью, тэг video является элементом языка HTML и, следовательно, относится к разряду открытых технологий, спецификации которых общедоступны совершенно бесплатно. Это позволяет более гибко использовать его возможности, и особенно в тандеме с другими технологиями, включая JavaScript, CSS и всё тот же формат SVG. Для примера, вот таким образом можно «прикрутить» к видеоролику собственный вариант всплывающих полупрозрачных элементов управления (открыть пример в браузере).

image

Но, пожалуй, наибольший потенциал данной технологии раскрывается при использовании её совместно с другими авангардными новинками. К примеру, если внедрить данный тэг в SVG файл, то становится возможным производить с изображением различные манипуляции, включая применение фильтров. В данном примере помимо оригинального вида можно переключаться в режим отображения контуров или получать чёрно-белую картинку (открыть пример в браузере).

image

В заключение можно отметить, что данная технология может с успехом применяться в различных популярных онлайновых сервисах. Ещё один пример демонстрирует, как могла бы выглядеть страница из Wikipedia, содержащая видеоролик с использованием тэга video.

image

Исследуем Canvas

Canvas (в переводе — «холст») представляет из себя ещё более интересную технологию, также тесно связанную с графикой. Тэг canvas является элементом HTML-5 и на данный момент поддерживается несколькими популярными браузерами. Если в двух словах, то данная технология позволяет создавать в теле веб-страниц специальные поля для отрисовки графики, что при желании ассоциируется с чистым холстом, на котором художник впоследствии создаст свой шедевр. Только данный холст — виртуальный, а рисовать на нём становится возможным с помощью обычных скриптов. На первый взгляд Canvas очень походит на SVG, но между ними существует одно главное отличие: если формат SVG представляет из себя описание элементов графического объекта, то Canvas обеспечивает попиксельное управление графикой в пределах указанного холста. Но это совсем не означает, что вам придётся рисовать каждую точку на холсте по отдельности: Canvas прекрасно работает со скриптами, а также позволяет выходить на объектный уровень рисования и даже добавлять анимацию или интерактивность. Чтобы наглядно убедиться в возможностях Canvas, можно обратиться к данному примеру (открыть пример в браузере):

image

В чём же преимущество Canvas перед существующими сегодня технологиями, позволяющими реализовать аналогичные графические изыски? Как и в случае с тэгом video, веб-разработчики получают возможность легко внедрять в веб-страницы самые различные по сложности графические объекты без использования каких-либо сторонних плагинов, графических библиотек и прочих видов дополнительного программного обеспечения. При этом размер внедрённых в страницы объектов исключительно мал, а весь код представлен в текстовом виде, что позволяет поисковым ресурсам индексировать содержимое подобных рисунков. И, естественно, имеются в наличии открытые спецификации Canvas, позволяющие гибко интегрировать данную технологию с другими. Как видим — налицо вполне ощутимые плюсы, значение которых трудно переоценить. В качестве примера того, насколько сложные вещи позволяет делать Canvas, можно посмотреть на настоящий графический редактор CanvasPaint (копия известного приложения от компании Microsoft), реализованный благодаря использованию технологии Canvas.

image

Простор для применения возможностей, предоставляемых Canvas, ограничен только фантазией разработчика. Использовать данную технологию можно для самых различных целей, начиная от декоративных украшений веб-страниц и заканчивая добавлением в интерфейс веб-сайта удобных интерактивных элементов управления. Ну и, конечно, для создания развлекательного контента — флэш-анимация во многом стала популярна благодаря появлению множества онлайновых миниатюрных игр, и на этом поприще Canvas ни в чём не уступает своим проприетарным конкурентам — с помощью данной технологии можно создавать приложения любой сложности, используя лишь HTML, CSS и JavaScript (открыть пример в браузере).

image

Заметим, что представленные выше примеры относятся к двухмерной графике, между тем, Canvas обладает достаточным потенциалом для внедрения в веб-страницы и трёхмерных объектов. Никакой особой сложности здесь нет — достаточно добавить в скрипт соответствующие функции, чтобы получить объект, визуально представленный в трёх измерениях (открыть пример в браузере).

image

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

image

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

Вообще, сейчас в мире веб-технологий происходит весьма любопытная вещь — явно прослеживается возврат ко временам начала WEB. Судите сами: первые браузеры были текстовыми, позволяющими просматривать документы без какой-либо графики. И что мы видим сейчас? SVG, Canvas, прочие новейшие разработки — все они по большей части оперируют данными в текстовом виде. Другими словами, браузеры вновь превращаются в текстовые, тем самым начиная новый виток эволюции подобных программ. Но, естественно, на новом уровне: нынешний текст, загружаемый из сети, позволяет генерировать в окне браузеров не только графические объекты, но и трёхмерные анимированные приложения.

Что же, подобную эволюцию можно только приветствовать, ведь в случае широкого распространения вышеописанных технологий интернет станет более быстрым, качественным и красивым. Плюс к этому появятся новые возможности для поиска данных и установления взаимосвязей между самым различным контентом, а это уже отличительные черты интернета следующего поколения. Не останутся в накладе и веб-разработчики: с новыми технологиями они смогут тратить гораздо меньше времени на создание весьма сложных веб-сайтов, при этом сократится число проблем, связанных с необходимостью использовать в работе сложные и дорогостоящие технологии, являющиеся собственностью определённых компаний. Интернет станет более свободным и доступным, и ощутить положительный эффект смогут как разработчики, так и пользователи всемирной сети. Добавляет оптимизма также и то, что внедрением подобных технологий сейчас занимаются практически все разработчики основных браузеров, активно теснящих бывших монополистов в данном секторе рынка. Всё говорит о том, что в скором времени мы сможем получить новый интернет, лишённый атавизмов и пережитков прошлого, наполненный новыми современными сервисами.

Примечание 1
Более подробно о новых технологиях можно почитать в специализированном разделе dev.opera.com.


Примечание 2
Исходный код всех примеров, представленных в данной статье, распространяется под лицензией Creative Commons Attribution.


Оригинал статьи опубликован на www.myopera.net
Tags:
Hubs:
+35
Comments 44
Comments Comments 44

Articles