Легковесные инструменты для веб-дизайна в Mozilla

Легковесные инструменты для веб-дизайна в Mozilla

От автора: без сомнений за последние пять лет Google Chrome стал доминирующей силой в браузерных войнах для десктопных и (очевидно) мобильных пользователей. Разработчики же более технически подкованы и больше заботятся о безопасности, поэтому предпочитают Firefox. Все дистрибутивы ОС с уклоном в безопасность содержат в себе Firefox, а не браузер на Chromium, хотя последний также имеет открытый исходный код и полностью бесплатный.

К нашему счастью, соблюдение веб-стандартов означает, что браузеры, которые используют разработчики, по большей части совместимы с браузерами, которыми пользуется большая часть обычных пользователей. И это очень важно, так как все, что разработано для Firefox в 99% случаев будет работать в Chrome. IE больше не приоритет для большинства разработчиков. Он устарел и используется для загрузки других браузеров. Edge сейчас тоже никто в серьез не воспринимает.

Firefox любят не только из-за безопасности и конфиденциальности. Firefox, всегда был, по большей части, проектом, продвигаемым сообществом пользователей (хотя на примере Wikipedia «сообщество» стало слишком высокомерным). Сердцем модели разработки сообщества является повышение качества пользовательского опыта. Говоря по-другому, проекты, движимые сообществом, зачастую ставят нужды пользователей на первое место. Корпоративные же проекты ставят в приоритет корпоративные нужды. Для разработчиков это значит, что в сети можно найти множество бесплатных инструментов для упрощения своей работы. По большей части эти инструменты намного легче, чем большинство платных вариантов.

THIMBLE

Thimble изначально предназначен для изучения HTML. В нем есть полноценный HTML и CSS редактор, что делает его крайне полезным инструментом для нахождения быстрых решений и копирования конечного HTML для загрузки файла на сервер. Он работает лучше редактора кода в CPanel, потому что не делает ничего лишнего и не распознает каждый апостроф в тексте, как разделитель строки.

Легковесные инструменты для веб-дизайна в Mozilla

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Интерфейс делится на две панели. Стандартно панель с кодом расположена слева, панель предварительного просмотра – справа. Доступно три режима просмотра:

десктоп;

мобильный вид;

полноэкранный вид.

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

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

Недостаток очевиден – инструмент требует подключения к сети (если вы, конечно, не смогли клонировать платформу Thimble на локальный сервер). Второй недостаток – на нем нельзя публиковать свои коммерческие проекты, так как платформа не рассчитана для профессионалов.

Вместо этого можно копировать HTML код и вставлять его в редактор кода в CPanel или в текстовый файл, после чего сохранять на своем сервере. Дерево файлов полностью сохранится.

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

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

X-RAY GOGGLES

Дети всегда хотели заполучить рентгеновские очки, но увы такие технологии (по крайней мере, реально работающие) слишком дороги для обычных детей. X-Ray Goggles от Mozilla не покажут вам, что носит школьная медсестра под верхней одеждой, или что у шотландского садовника под его килтом, но с помощью этого инструмента можно увидеть, как работает веб-страница, а также отредактировать код, чтобы он работал по-другому. Это намного круче, чем всякие извращения, правда?

Легковесные инструменты для веб-дизайна в Mozilla

Первичное назначение инструмента с профессиональной точки зрения – песочное моделирование для тестирования изменений в существующих дизайнах без необходимости вносить моментальные изменения. Все очень просто, для установки достаточно перетащить кнопку X-Ray Goggles на панель закладок. Для активации нажмите кнопку, для выхода нажмите ESC.

WEBMAKER

Не самый полезный инструмент для большинства разработчиков, так как он спроектирован только для Android. Webmaker не предлагает почти ничего, что нельзя найти в социальных сетях. Mozilla отказались от довольно полезного онлайн видеоредактора (Popcorn) и заменили его этим инструментом. Webmaker подходит для новичков, так как он использует подход mobile-first в дизайне, который стал обязательным для современных сайтов.

Тем не менее, экспертов смутят те ограничения, которые связаны с разработкой только под мобильную инфраструктуру. Этот инструмент в основном нацелен на привлечение подростков к бренду Mozilla, а также призван помочь учителям выглядеть круто (учит их разговаривать на языке мобильной веб-разработки).

Легковесные инструменты для веб-дизайна в Mozilla

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

EDITOR

Editor – это дедушка панели разработки в Mozilla и изначально назывался Composer. Предположительно название сменили, чтобы не путать с KompoZer, потомком Composer. До KompoZer был Nvu, и вы не захотите пользоваться ни тем, ни другим, так как они оба не поддерживают HTML5. Можно попробовать BlueGriffon, сводного брата KompoZer. Он поддерживает HTML5. Однако вы получите только CSS редактор, если заплатите за плагин. Все эти инструменты до сих пор можно использовать за исключением, может быть, Nvu. Editor/Composer до сих пор есть в браузере Mozilla SeaMonkey.

SCRATCHPAD

Инструмент для написания и тестирования кода JS. Консоль позволяет за раз выполнять только одну строку скрипта, что сильно ограничивает возможности. В то же время в scratchpad можно вводить сколько угодно строк. Активируется в любой вкладке Firefox нажатием Shift + F4.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

RESPONSIVE DESIGN MODE

Эта функция встроена прямо в Firefox (она так же есть в Chromium и Google Chrome). С ее помощью можно проверять макеты страниц под разными разрешениями на одном экране. Инструмент неидеальный (для всех браузеров), но подойдет для большинства сценариев, чтобы проверить одинаковое отображение сайта. Режим адаптивности в Firefox активируется простым нажатием Ctrl + Shift + M. Вернуться в обычный режим можно повторным нажатием.

Изменять макет можно с помощью ряда кнопок, расположенных над макетом. Первая кнопка слева похожа на «закрыть окно», с ее помощью можно выйти из адаптивного режима. Далее идет выпадающий список, где можно выбрать шаблоны разрешений, задать новое или (не рекомендуется) удалить существующий шаблон разрешения из списка. Справа от выпадающего списка расположена кнопка переключения между портретным и альбомным режимом. Далее идет кнопка симуляции событий касания экрана. Последняя кнопка делает скриншот.

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

WEB DEVELOPER TOOLS EXTENSION

По умолчанию этого инструмента в Mozilla нет, это расширение для Firefox Криса Педерика. В расширении запакован огромный ассортимент инструментов, подходящих под все ваши нужды. С его помощью можно:

включать и выключать что-либо;

контролировать куки;

изменять CSS страницы;

изменять поля форм на странице;

снимать маски с полей типа password;

вытягивать подробную информацию о изображениях;

исследовать DOM элементы;

подчеркивать элементы;

изменять размер экрана;

просматривать макеты в адаптивном режиме лучше, чем во встроенных методах;

и много чего еще.

Легковесные инструменты для веб-дизайна в Mozilla

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

FIREFOX DEVELOPER TOOLS

Большая часть функционала Firebug теперь доступна напрямую во встроенной панели разработчика, в которой также есть консоль. Панель похожа и работает по принципу панели в Chromium и Google Chrome. Интерфейс неинтуитивный, и пока вы освоите и поймете все функции, вы наделаете кучу ошибок.

Неопытные пользователи могут не заметить одну из функций – командную строку JS внизу консоли, она никак не помечена. Она работает лучше версий в Chromium/Chrome, но их реализация, добавляющая мигающий курсор прямо в консоль, намного очевиднее.

MEASUREIT EXTENSION

Проще установить прекрасный Screen Ruler от Ian McIntosh, но у расширения Measureit от Kevin Freitas есть преимущество. Он умеет одновременно измерять ширину и высоту, и он более точный. Полезный инструмент для измерения чего-либо в окне браузера. В некоторых версиях Firefox инструмент не работает, это может быть из-за конфликта с другими расширениями. Попробуйте отключить расширения перед установкой.

COLORZILLA EXTENSION И EYEDROPPER

Оба или один из инструментов должны быть у каждого дизайнера, потому что с их помощью можно быстро найти цвет по любому пикселю в браузере. Также можно использовать GColor — Gnome инструмент, который делает то же самое, но в нем есть возможность получить образец цвета из любого окна, не только из браузера. Преимущество ColorZilla и Eyedropper перед GColor в том, что они показывают увеличенный вид пикселя, от которого получен цвет.

Активируется инструмент кликом по иконке eyedropper, после чего курсор меняется на шаблон в виде крестика (ColorZilla) или большую лупу (Eyedropper). Наведите курсор на окно и найдите пиксель, цвет которого хотите получить. Кликните левой кнопкой мыши для копирования цвета в буфер обмена (в формате hex), после чего расширение автоматически закроется.

Это лишь помощники, они не сделают все за вас

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

Источник: http://inspiredm.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree