Архи раздела ‘opensource’

Очисти свои CSS

Опубликовано декабря 25, 2007 by Jazzina

Еще одна полезная фишка для Набора веб-разработчика на базе FireFox – расширение Dust Me Selectors.

Позволяет очистить каскадные таблицы стилей от неиспользуемых классов.
(more…)

'.

Firebug – уникальный инструмент веб-разработчика

Опубликовано декабря 17, 2007 by Jazzina

Наверное самым мощным инструментом в "Наборе веб-разработчика на базе FireFox" является FireBug – уникальное средство отладки веб-приложений.

Firebug позволяет:

  • Инспектировать и редактировать исходный код страницы
  • Инспектировать объектную модель документа
  • Инспектировать и редактировать каскадные таблицы стилей
  • Инспектировать, запускать, отлаживать и редактировать скрипты
  • и многое другое…
    (more…)

Веб-разработка и тестирование в реальном времени

Опубликовано декабря 17, 2007 by Jazzina

Очередным этапом сборки "Набора веб-разработчика на базе FireFox" является компонент Web Developer.

После установки этого замечательного расширения появляется панель, которая позволяет:

  • отключать кэш, java, javascript, редиректы, поле referrer и многое другое
  • работать с cookies: просматривать, отключать, удалять
  • работать с CSS: отключать разные типы каскадных таблиц, просматривать по типу, редактировать "на лету", что очень полезно при верстке сайта
  • работать с формами
  • работать с изображениями и их свойствами: показывать title, alt, размеры экранные, размеры файлов картинок, скрыть фоновые изображения, скрыть остальные изображения, обвести изображения по признаку наличия или отсутствия alt, title и др.
  • выводить информацию о: расположении анкоров, именах слоев, свойствах ID и CLASS, и пр.
  • протестировать страницу валидаторами: javascript, HTML, CSS, RSS и пр
  • проверить валидность ссылок
  • и многое другое


(more…)

Запомни свои действия

Опубликовано декабря 17, 2007 by Jazzina

Очередной этап построения набора веб-разработчика – автоматизация выполнения повторяющихся действий.

iMacros – расширения для FireFox, позволяющее записывать действия в макросы и потом повторять их самостоятельно. Это напоминает макросы в MSO или OOo. Полезно при отладке пользовательских интерфейсов.
(more…)

Управление и мониторинг HTTP в Firefox

Опубликовано декабря 17, 2007 by Jazzina

Шаг №3 с создании Набора веб-разработчика – расширения для контроля и настройки http в FireFox.

FasterFox – расширение для более тонкой настройки самого firefox:

  • Отображает таймер загрузки страницы
  • Позволяет настраивать объём дискового кэша и кэша памяти браузера
  • Позволяет в фоне предзагружать контент ссылок, что повышает скорость серфинга
  • Настраивает параметры конвейерной обработки данных протокола HTTP
  • Блокирует всплывающие окна из плагинов, например Macromedia Flash
  • Позволяет использовать в настройках несколько готовых предустановок

Live HTTP Headers – расширения для мониторинга всех http запросов (как входящих, так и исходящих) в боковой панели. Полезно будет для веб-мастеров, разработчиков и администраторов веб-проектов. Позволяет просмотреть идут ли запросы к серверу и какие ответы приходят от сервера, с какими заголовками.
(more…)

'.

WYSIWYG-редактор для форм

Опубликовано декабря 17, 2007 by Jazzina

Забудьте о tinyMCE и прочих встроенных в движки визуальных редакторах. У нас есть Xinha here! – замечательное расширение для FireFox, которое представляет из себя WYSIWYG-редактор для форм с богатым набором возможностей.
(more…)

Измерь размеры и цвета в FireFox

Опубликовано декабря 17, 2007 by Jazzina

Шаг №2 в компиляции Набора Веб-разработчика расширения ColorZilla и MeasureIt.

ColorZilla помогает определить цвет любой точки страницы.

eyedropper

В использовании прост: мы жмем на пипетку в нижней панели FF и наводим на элемент цвет, которого нас интересует. Жмем на нем левой клавишей мышки. После чего жмем на пипетке (в нижней панели) правой кнопкой мышки и выбираем в каком формате нам нужно положить в буфер обмена найденный цвет. А вариантов достаточно:

  • функция rgb для языков программирования – rgb(5,5,5)
  • функция rgb для языков программирования (проценты) – rgb(2%,2%,2%)
  • формат для HTML – #RRGGBB
  • формат для HTML (без решетки), AdSense – RRGGBB
  • тип R: 5, G: 5, B: 5

В качестве дополнения есть:

  • Возможность масштабирования страницы
  • Выбор цвета из палитры

MeasureIt – расширение схожее по назначению с ColorZilla – измеряет расстояния на странице. С помощью него мы можем получить точные размеры произвольного прямоугольника.

Оба этих инструмента незаменимы для веб-дизайнера.
(more…)

Бесплатный DreamWeaver в FireFox

Опубликовано декабря 17, 2007 by Jazzina

Да-да. Речь пойдет о замечательном расширении для Firefox под названием Codetch, первом в списке набора веб-разработчика.

Codetch – WYSIWYG-редактор по функциям напоминающий Macromedia (Adobe) DreamWeaver.

WYSYWYG-редактор со вкладками панелями кнопок.

Codetch - WYSIWYG-редактор для FireFox

Менеджер проекта похожий на менеджер проекта в DreamWeaver.

codetch_panels

Замечательная функция: code + design знакомая, всем профессионально работающим с DreamWeaver

codetch_codedesign

Ссылки:

Набор для веб-разработчика

Опубликовано декабря 17, 2007 by Jazzina

Едет веб-мастер в поезде и слышит: <td></td> … <td></td> … <td></td>

В процессе создания сайта часто возникает необходимость его отладки: скриптов, каскадных таблиц стилей, кода. Написано достаточно много расширений для Firefox, которые позволяют это делать “не отходя от кассы”: править и просматривать результат в интерактивном режиме. Но навешивать эти довольно объемные расширения на Firefox для серфинга неразумно из соображений производительности и экономии оперативной памяти. Поэтому разумно собрать в отдельном профиле все необходимые расширения как единый комплекс – Набор для веб-разработчика.
(more…)

FireFox ShowCase

Опубликовано ноября 25, 2007 by Jazzina

Отличное дополнение к FireFox, которое позволяет просматривать уменьшенные копии всех открытых вкладок в сайдбаре (боковой панели), либо на отдельной вкладке, либо в отдельном окне. Очень удобно когда открыто слишком много вкладок и хочется быстро избавиться от лишних.

ShowCase в боковой панели.

thumb-3
(more…)