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

2

Від автора: без сумнівів за останні п’ять років 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, який можна використовувати, якщо виникне необхідність.