Open Web Tools Directory::Журнал СА 102009

ИГОРЬ ШТОМПЕЛЬ, инженер, системный администратор. Сфера профессиональных интересов – GNU/Linux, функциональное программирование

Open Web Tools Directory

Собрать все значимые инструменты для веб-разработчика в одном месте всегда являлось привлекательной идеей. Недавно такую попытку предприняла компания Mozilla.

Новый проект Mozilla Labs

6 июля 2009 года в блоге Mozilla Labs появилась информация о запуске нового проекта – Open Web Tools Directory. Основной целью реализации каталога стало желание произвести централизованное индексирование средств веб-разработчика. Как писал в сообщении от имени команды разработчиков Бен Гэлбрэйт (Ben Galbraith): «Есть огромное количество инструментов, которые были созданы, чтобы помочь веб-разработчикам. К сожалению, вам сложно узнать обо всех них, так как нет их централизованного индексирования» [1]. Новый каталог стал доступен по адресу http://tools.mozilla.com. Данная страница, как показано на рис. 1, отличается оригинальным дизайном, хотя и может вызывать определенные задержки в отображении даже у пользователей, использующих ADSL-соединение (64, 128 Кбит/сек). Впрочем, внизу страницы имеется ссылка «Plain HTML Version», которая отобразит «облегченный» вариант каталога, как показано на рис. 2, без дополнительных эффектов.

Рисунок 1. Сайт проекта Open Web Tools Directory

Рисунок 2. «Облегченный» вариант Open Web Tools Directory

Также в нижней части главной страницы каталога доступен поисковый инструмент. Он имеет шесть тематических вкладок: Design, Code, Debug, Test, Deploy, Docs. Design.

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

Рисунок 3. Отображение краткой информации об инструменте каталога

Сам поисковый механизм отличается продуманной реализацией. Так, по мере ввода букв в строке поиска автоматически отбираются соответствующие текущему запросу проекты. Например, осуществим поиск инструмента Aptana, вводя в строку поиска буквы постепенно, наблюдая за изменениями каталога. На рис. 4 показано как изменилось отображение каталога после ввода apt, а на рис. 5 – после ввода aptana.

Рисунок 4. Состояние каталога после ввода в строке поиска apt

Рисунок 5. Изменение состояние каталога после ввода в строке поиска aptana

В Mozilla не собираются останавливаться на достигнутом и продолжают развитие проекта. Еще во время его запуска были очерчены ближайшие перспективы развития. Так, планируется исследование возможности реализации различных социальных аспектов (social participation features) для входящих в каталог средств разработки. Например, ранжирование и комментарии. Кроме того, ведется работа над усовершенствованием механизма поиска Open Web Tools Directory, который был рассмотрен выше.

Помочь развитию проекта могут все желающие. Для этого, если вам известен какой-либо инструмент, отсутствующий в каталоге, вы можете заполнить специальную форму [2].

Инструменты Open Web Tools Directory

Рассмотрим, какие средства доступны для разработчиков веб-проектов. Начнем обзор с такого инструмента, как ajaxload.info (http://www.ajaxload.info). Данный проект ориентирован на создание иконки – индикатора загрузки на базе технологии Ajax. Ajaxload.info дает возможность выбора цвета иконки и ее фона. Инструмент доступен бесплатно.

Aptana Studio (http://www.aptana.com/studio) – среда веб-разработки, основанная на Eclipse с поддержкой HTML, CSS, JavaScript и DOM. Дополнительные плагины позволяют добавить в Aptana Studio возможность работы с PHP, Python, Ruby on Rails, Jaxer, Adobe AIR, Apple iPhone и Nokia S60. Данная среда разработки имеет поддержку следующих AJAX-библиотек: jQuery, Prototype, script.aculo.us, Dojo, Ext, YUI, MochiKit, MooTools, SPRY и Aflax.

Baseline Checker (http://scribu.net/util/baseline-checker-bookmarklet.html) представляет собой специальную закладку, осуществляющую проверку расположения базовых линий (baseline rythm of a page) на веб-странице. При использовании утилиты страница становится похожа на «тетрадь в линию». Под линиями, расположенными на определенном расстоянии друг от друга, видны все элементы веб-страницы.

Bespin (http://bespin.mozilla.com) является основанным на веб-технологиях расширяемым редактором кода, разработанным с использованием технологий HTML 5. Данный продукт является детищем Mozilla Labs. Для работы с Bespin требуется регистрация.

Color Scheme Designer (http://colorschemedesigner.com) – это инструмент c богатыми возможностями, который поможет подобрать цветовую схему. Среди последних, например, имеется возможность экспорта созданной цветовой схемы в HTML+CSS, XML, Text, ACO (палитра Photoshop), GPL (палитра GIMP).

CSS Sprite Generator (http://spritegen.website-performance.org) позволяет автоматизировать процесс создания css-спрайтов. Напомню, css-спрайты – это механизм, ориентированный на сокращение количества HTTP-запросов для графических ресурсов. Утилите указывается расположение двух или более графических файлов (в форматах .png, .gif или .jpeg), а она генерирует sprite-изображения и соответствующий css-код для их отображения. Исходный код инструмента доступен для загрузки под лицензией BSD, а сайт доступен на русском языке.

CSS Text Wrapper (http://www.csstextwrap.com) дает возможность работать с обтеканием HTML-текста. Можно добиться того, чтобы текст обтекал кривые, зигзаги или другие формы. Для этого разработчик управляет левой и правой линией инструмента, а последний генерирует соответствующий код. Пример управления обтеканием текста показан на рис. 6.

Рисунок 6. Управление обтеканием текста с использованием CSS Text Wrapper

DHTMLX Suite (http://dhtmlx.com) представляет собой набор компонентов для создания «богатых» интерфейсов на базе технологии Ajax. Последний включает наиболее часто используемые компоненты пользовательского интерфейса: grid, treegrid, treeview, combobox, tabbar, menu, windows, calendar, layout и другие. Все компоненты набора написаны на чистом JavaScript. Они совместимы с таким браузерами, как Mozilla Firefox, Google Chrome. Opera, Safari, Internet Explorer. Набор доступен под GPL (Standart Edition), коммерческой и enterprise (Professional Edition) лицензиями. В коммерческой лицензии в отличие от enterprise имееются ограничения – например, максимальное число разработчиков равно пяти.

Doodle.js (http://www.lamberta.org/blog/doodle) – это проект, реализующий спрайт-библиотеку для Canvas. Библиотека содержит ряд примитивов, реализующих полноценное API для рисования (a full-fledged drawing api), а также, является основой для создания спрайтов и взаимодействия с ними. Doodle.js лицензирована под MIT License.

Ряд инструментов из Open Web Tools Directory ориентирован на создание иконок (favicons) – специальных значков, которые отображаются в адресной строке (могут быть анимированными). Среди них – Favicon.cc (http://www.favicon.cc) и Favicon Generator (http://favicon-generator.org/editor). Оба инструмента обладают возможностью импорта изображения (первый из форматов .png, .jpg, .jpeg, .gif, .bmp, .ico, а второй – .png, .jpeg и .gif) и содержат галереи уже созданных иконок.

Firebug (http://getfirebug.com) представляет собой утилиту, которая выполнена в виде расширения для Mozilla Firefox (последняя версия Firebug на сегодняшний день 1.4.2, работает с данным браузером версии 3.*). Она позволяет редактировать, производить отладку и контролировать код CSS, HTML, JavaScript на веб-страницах.

Кроме того, имеется ряд утилит расширяющих функциональные возможности Firebug. Это и FirePython (http://firepython.binaryage.com), предоставляющий возможность работы с кодом на языке Python; и FireQuery (http://firequery.binaryage.com) – специализированный набор для работы с Jquery; и FireRainbow (http://firerainbow.binaryage.com), обеспечивающий подсветку синтаксиса Java Script; и FireUnit (http://fireunit.org), который предназначен для тестирования приложений JavaScript. Firebug распространяется по лицензии BSD.

Ряд разработок Google также вошли в каталог от Mozilla. Google Plugin for Eclipse (http://code.google.com/eclipse) позволяет осуществлять разработку с использованием Google Web Toolkit и приложений App Engine.

Google Web Toolkit или GWT (http://code.google.com/webtoolkit) ориентирован на создание высокопроизводительных приложений AJAX. Разработчик создает код интерфейса на Java, а GWT компилирует исходный код в оптимизированный JavaScript.

PageSpeed (http://code.google.com/speed/page-speed) представляет собой дополнение для Firefox/Firebug. Веб-разработчики могут использовать PageSpeed с целью оценки эффективности своих веб-страницах, а также получения рекомендаций по их улучшению.

JQuery (http://jquery.com) – это библиотека JavaScript, которая упрощает обработку событий, работу с анимацией и взаимодействие с AJAX для быстрой веб-разработки. Библиотека имеет двойное лицензирование под MIT и GPL.

Возможности работы с jQuery расширяют jQuery Tools (http://flowplayer.org/tools/index.html) – набор наиболее важных компонентов пользовательского интерфейса для веб-сайтов и JQuery Values (http://code.google.com/p/jquery-values) – инструмент, который позволяет использовать HTML как синтаксис для двунаправленных (bi-directional) шаблонов JavaScript.

OpenKomodo (http://www.openkomodo.com) – среда разработки с использованием динамических языков. Она основана на веб-технологиях и легко расширяется с использованием XML, JavaScript, Python и C++.

Pencil (http://www.evolus.vn/Pencil) – это инструмент, который используется для создания диаграмм и прототипирования GUI. Он доступен под лицензией GPL. Может быть установлен как расширение для Mozilla Firefox 3.*, а также как самостоятельное приложение на базе XULRunner.

Prototype (http://prototypejs.org) представляет собой фреймворк JavaScript, созданный с целью упрощения разработки динамических веб-приложений. Фреймворк отличается простотой в использовании. Prototype доступен под лицензией MIT для исходного кода и CC BY-SA для документации.

Pylot (http://www.pylot.org) ориентирован на тестирование производительности и масштабируемости веб-сервисов и является свободным программным обеспечением (лицензия GPL). Pylot генерирует для обеспечения требуемой нагрузки HTTP-запросы, проверяет ответы сервера, и создает отчеты с метриками. Набор тестов может выполняться и контролироваться с использованием графического интерфейса или shell.

SpourtCore (http://www.sproutcore.com) – это Open Source-фреймворк для создания облачных приложений на базе стандартов HTML 5 и JavaScript. Он включает в себя фреймворк JavaScript, набор утилит для сборки.

Web Developer (http://chrispederick.com/work/web-developer) представляет собой плагин для Mozilla Firefox/Flock/Seamonkey c большим количеством полезных инструментов для веб-разработчиков. Например, разметка документов, отображение разнообразной информации (CSS, о стилях CSS и другой), валидация. Web Developer – это свободное программное обеспечение, лицензированное под GPL.

***

Были рассмотрены наиболее интересные из инструментов на субъективный взгляд автора. Стоит отметить, что проект отличает широта представленного программного обеспечения, а также простота использования. Приятное впечатление производит и реализованный механизм поиска. Как представляется, данный каталог ждет дальнейшее развитие и расширение, в том числе при участии сообщества. Хочется пожелать увеличения количества инструментов, представляющих собой свободное программное обеспечение.