Шаг 1. Устанавливаем последнюю версию
Английскую, при этом самую свежую, версию приложения Web Developer в Firefox или в Chrom можно установить через настройки браузера. Для Firefox: открываем в опции " Дополнения" (можно открыть нажатием комбинации трёх клавиш Ctrl+Shift+A ) раздел " Расширения" — см. Рис. 1 или Рис. 2.
В поисковой строке вводим запрос:
При установке приложения выполняем предлагаемые в Диалоге действия. Если все выполнили последовательно, то в списке расширений у вас появится ещё одно дополнение — Web Developer (Рис. 3).
На панели инструментов браузера появится полный спектр инструментов Web Developer, только в английской версии. О руссификации поговорим в следующем шаге.
Шаг 2. Руссифицируем Web Developer
Для «перевода» названий опция Web Developer на русский язык придется «понизить» установленную версию до 1.1.9. На момент написания данного блога ни одна более «высокая» версия не поддерживала возможность перехода на русский. Поэтому придется отдельно скачать расширение и самим его загрузить в браузер. Переходим по ссылке:
Наведите мышь чуть правее от названия нужной нам версии 1.1.9. Высветится опция «Добавить в Firefox».
Небольшое дополнение: Статья была написана в 2013 году. В середине 2016 года Mozilla Firefox ограничила доступ к некоторым более ранним расширениям и дополнениям. Поэтому, если у вас установлена самая последняя версия Mozilla Firefox, то напротив расширения Web Developer версии 1.1.9 будет как бы неактивная кнопка «Добавить в Firefox» (ниже комментарий, что не доступно для данной версии Mozilla Firefox). Не пугайтесь! Всё равно нажимайте на «серую» кнопку «добавить». Подтвердите желание установить и установка пройдет.
Mozilla попросит перезагрузки. Сделать ее сразу после установки приложения или отложить на следующий раз, решать вам. Принципиального значения не имеет, так как приложение Web Developer перейдёт на русский язык только после перезагрузки и займет свое место в панели инструментов.
В этой статье я хочу познакомить вас с очень полезным инструментом для вебмастера -- дополнением для браузера Firefox, плагином Web Developer. Название плагина говорит само за себя: Web Developer – вебразработчик. Понятно, что плагин создан для вебразработчиков, то есть для нас с вами. Предназначен плагин Web Developer для получения информации и тестирования сайта. Какие возможности предоставляют инструменты плагина? Вы сможете включить и выключить изображения, обнаружить все элементы ссылок, просмотреть формы, проверить страницы сайта на соответствие стандартам и многое другое. Сведения, полученные в результате тестирования, помогут вам не только в разработке сайта, с помощью плагина вы сможете найти скрытые ссылки, повреждённые изображения и т.п. Рассмотрим установку плагина Web Developer в браузер Firefox.
Установка плагина Web Developer в Firefox
Хотелось бы отметить, что ранние версии плагина имели русскую локализацию. Обновлённая версия русской локализации не имеет. Однако этот факт не столь важен, так как инструменты плагина сгруппированы таким образом, что становится интуитивно понятно предназначение каждого инструмента даже с базовым знанием языка. Web Developer предоставляет визуальную информацию и для анализа сведений, полученные с помощью плагина Web Developer, в большей степени нужно иметь знания вебразработчика, а не переводчика. Если вам всё-же комфортнее работать с русифицированной версией плагина Web Developer, установите более раннюю версию , имеющую русскую локализацию.
Последнюю версию плагина Web Developer для Firefox можно скачать с домашней страницы разработчика . Установить Web Developer, как и любой другой плагин, можно также через встроенные инструменты Firefox. Для этого откройте браузер Firefox и в меню выберите «Инструменты» - «Дополнения»
1 - В строку поиска скопируйте название нужного дополнения. В открывшемся списке выберите необходимый плагин для установки и запустите установку.
2 - Если же вы уже скачали дополнение на свой компьютер, откройте меню инструментов и выберите «Установить дополнение из файла».
Панель инструментов плагина Web Developer
После успешной установки Web Developer вы начнёте работать с инструментами плагина. Для работы удобнее всего использовать встроенную в браузер панель инструментов Web Developer. Можно использовать и альтернативные варианты доступа к инструментам плагина:
Возможности плагина Web Developer
Инструменты плагина Web Developer сгруппированы по типу выполняемых операций, что удобно и позволяет интуитивно понимать работу того или иного инструмента.
Давайте рассмотрим панель инструментов Web Developer. На схеме ниже показаны варианты панели инструментов плагина Web Developer с разной языковой локализацией.
На панель инструментов плагина вынесены названия групп инструментов. Если вы кликните по названию группы, откроется вкладка с вложенными в эту группу инструментами. Инструментов в плагине довольно много, но когда вы начнёте работать с Web Developer, поймёте, насколько легко разобраться в работе каждого инструмента. Для того, чтобы включить инструмент, кликните по инструменту, напротив появится галочка. Для выключения – галочку убираем. Рассмотрим каждую группу инструментов плагина Web Developer.
«Отключить» (Disable). С помощью инструментов этой группы можно посмотреть, как будет выглядеть сайт, если пользователь в настройках браузера отключит некоторые элементы веб-дизайна.
«Cookies» . Проверка работоспособности сайта в условиях ограниченной способности браузера.
«Ошибок CSS нет» (CSS). Группа инструментов для работы с таблицами стилей. Позволяет подключать, отключать и редактировать стили, просматривая результаты редактирования в браузере, выводить дополнительную информацию о таблицах стилей.
«Формы» (Forms). Можно просматривать элементы форм с их атрибутами, включить показ паролей в полях ввода со звёздочками, очищать радиокнопки, конвертировать переменные запросов и др.
«Графика» (Images). Управление изображениями. Можно получить информацию о размере, весе изображений, найти повреждённые изображения и многое другое.
«Инфо» (Information). Получаем дополнительную информацию о сайте. Можно просмотреть порядок расположения и величину блоков Div, параметры ссылок и объектов, атрибуты Title, значения атрибутов Id и Class, получить подробную информацию об элементах, таблицах, цветах, якорях и многое другое.
«Разное» (Miscellaneous). Здесь находятся разные по функциональности инструменты. Например, инструмент «Линейка», с помощью которого можно измерять объекты. Для этого нужно нажать правую кнопку мыши и выделить нужный объект. Выделение будет иметь форму прямоугольника. Для изменения размера, прямоугольник нужно потянуть за уголок или ввести данные в пикселях на панели инструментов плагина.
«Контуры» (Outline). Выделяет элементы вебдизайна контурными линиями. Хочу обратить особое внимание на пункт «Контур ссылок» - «Внешних ссылок». Этот инструмент поможет вам найти спрятанные и закодированные ссылки.
«Размеры» (Resize). Можно посмотреть размер окна и области просмотра. Также можно изменить размеры окна браузера, увеличить или уменьшить разрешение, что позволить проверить работу сайта при различных значениях разрешения экрана.
«Инструменты» (Tools). Инструменты для вебразработчика. Можно проверить на валидность код HTML, CSS, RSS-ленту с помощью бесплатных сетевых сервисов. Также можно проверить наличие двойных якорей, битых ссылок, просмотреть Консоль ошибок.
«Код» (View Source). Можно посмотреть исходный код страницы. Показывает список фреймов с возможностью просмотра их исходного кода. Показывает сгенерированный код так, как его видит браузер.
«Настройки» (Options). Настройки программы. Запоминает выбор пользователя для разных меню. Сброс и возврат, изменённой в результате работы страницы, к исходному состоянию.
У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.
Итак, вы решили стать Веб разработчиком . Вы знаете три магических термина HTML / CSS / JS и полагаете, что станете востребованным специалистом, как только освоите все три в совершенстве. Вы представляете, как будете учить их последовательно, один за другим. Заполните портфолио. Найдёте вакансию Junior. Утрёте нос сомневавшимся.
На самом деле, даже Фронтенд разработчик – вымирающий вид. Но не потому, что работы становится меньше:) Скорее – наоборот. Ежедневно растущая сумма знаний не оставляет шансов для широких категорий. Абстрактные «программисты» существуют только в фильмах о хакерах и в народном представлении. Так и фронтенд разработчики, постепенно, становятся абстракцией, разделяясь на всё более узкие специальности.
К сожалению, большинство рекрутеров плохо представляют специфику работы людей, которых они трудоустраивают. Сделаем скидку на то, что IT-рекрутинг тоже молодая дисциплина. Вольно или невольно – рекрутеры создают своего рода «дезинформационное поле».
Если у вас есть опыт аренды жилья, вы, вероятно, сталкивались с фразой «Интернет Wi-Fi». Риэлторы обожают это словосочетание. Не пытайтесь объяснить им, что Wi-Fi это способ раздачи от подведённого источника, и вас интересует именно последний. «Интернет Wi-Fi» может оказаться чем угодно: ADSL, 3G, оптоволокном...
Фундаментальное непонимание ничуть не мешает риэлторам тиражировать бессмысленную фразу. Та же история с рекрутерами.
Давайте разберёмся, какие титулы вакансий, подходящие под определение «веб-разработки», популярны сегодня. Сразу отмечу, что данный гайд не претендует на полноту и отражает точку зрения человека, использующего JS как основной язык.
Синонимы: веб-разработчик , веб-инженер
Обычно, подразумевает использование каких-либо CMS. Некоторые люди на полном серьёзе считают, что начинающие используют «простые CMS», а эксперты – «продвинутые CMS». Хинт: если человек спрашивает – Какую CMS используете? у компании программистов в конференц-зале – вероятно, он полный нуб. И это не обвинение, а констатация факта. Серьёзные современные проекты не используют CMS, ну разве что в качестве вспомогательного инструмента. Wordpress для ведения блога компании – да, возможно. Wordpress в качестве магазина – уже сомнительно. «Социальная сеть на Joomla» – фантазии подростка. CMS имеют свое место на рынке, но они давно перестали быть «государствообразующим» элементом.
«Делать сайт на CMS» примерно тоже самое, что «клепать дизайны под ThemeForest». «Копейка рубль бережёт!» – Nuff Said.
Веб-инженер занимается контентом, «правит» вёрстку, делает разное и (occasionally) программирует. Web Developer – это низший уровень из всех возможных «веб-разработчиков». В случае с фрилансом, под веб-разработчиком , обычно, подразумевается «человек-оркестр», а точнее – «человек-батрак».
Срчно!!! Ищем терпеливого веба-разработчека!
Синонимы: верстальщик
Должность, на которой требуется верстать дизайн. Требования к знанию JS и программирования минимальные или отсутствуют. Желательно необходимо знание основ дизайна, т.к. дизайн почти никогда не переводится из PSD в HTML один-к-одному. «Pixel-Perfect» – фраза-«звоночек». Маркер менеджера-самодура, ни имеющего ни малейшего понятия о том, как работает браузер и замеряющего качество работы попиксельным (с зумом!) сравнением PSD макета и HTML страницы. Попытки объяснить разницу между рендерингом шрифта в фотошопе и в браузере, обычно, воспринимаются как «споры вместо работы». Избегайте «попиксельных» вакансий всеми силами.
Верстальщик всегда дорабатывает за дизайнером. Веб-программист всегда дорабатывает за верстальщиком. Соседние пары в этой цепочке почти всегда недолюбливают друг-друга по этой причине.
Иван не только знает всё о профессиях из этой статьи, но и поможет их освоить, составить правильное резюме и подготовиться к собеседованию.
Синонимы: веб-дизайнер
Самизнаетекто™. От специалиста требуется знание визуального дизайна (возможно, дизайна интерфейсов), знание типографики, владение Photoshop. Знание JS, обычно, не требуется.
На западном рынке, дизайнеры обычно занимаются и вёрсткой. Во-первых современная вёрстка, с учётом респонсив- и адаптив- приставок и анимаций посредственно описывается статической картинкой. Вы часто видели дизайнера показывающего анимацию и мобильную версию? Я тоже. Обычно, их возможности ограничиваются выбором из библиотечных анимаций (подобранных программистом!). Во-вторых (но по той же причине), настоящему специалисту часто оказывается проще сделать дизайн сразу в виде вёрстки. Зачем делать работу X + Y, если можно обойтись Y?
На нашем рынке, ввиду технологического отставания, дизайнеры и верстальщики – разные люди.
Похоже на предыдущий вариант, но с упором на дизайн интеракций. Специалисты на этой должности, обычно, много общаются с программистами, с клиентами, с менеджерами, потом опять с программистами... По этой причине, желательно знание основ разработки ПО и коммуникативные навыки. Очень часто, вакансия также требует знания специфики мобильной разработки, т.к. двух UI/UX экспертов нанимают довольно редко. Имейте в виду, что по этому направлению сложно найти материал для самообучения, что может идти как в плюс (меньше конкуренция) так и в минус (сложнее освоить). Если же вы способны учиться на примерах – проблем быть не должно.
Должность для разработчика, специализирующегося на мобильных устройствах. Требуется знание специфики платформ IOS и Android. React Native – современный вариант этой специализации, позволяющий использовать веб-технологии для создания нативных приложений. Хинт: веб-приложения, гибридные приложения, нативные приложения и нативные приложения на веб-технологиях – это всё разные вещи.
Синонимы: фронтендщик, фронтенд-разработчик
Обобщённое название должности для разработчика, владеющего HTML / JS / CSS. Обычно встречается в небольших компаниях, где на одного человека возлагается широкий спектр задач. Знание дизайна, вероятно, не требуется, но будет идти как бонус. В современных условиях, всё чаще заменяется на титул конкретной технологии: jQuery Developer , Backbone Developer , React Developer , Angular Developer ... Умения программировать и верстать входят в пакет требований.
Синонимы: JS разработчик * / JS программист
То же, что и предыдущее, с большим упором на программирование и меньшим на вёрстку и дизайн. Вообще, термин Developer (Engineer в меньшей степени) вместо Programmer , может означать что программирования будет меньше, а «всякой всячины» – больше. Кроме случаев, когда язык программирования указан явно (JS developer ~= JS programmer).
JS Developer может означать и FullStack (см. ниже). В этом случае, компания, вероятно, планирует определиться с вашей специализацией позже – когда будут ясны ваши сильные и слабые стороны. Или же когда иные рабочие места распределятся. Поэтому, JS Developer почти всегда идёт в паре с Junior или Senior / Middle .
Редкая должность, на которой требуется оптимизировать HTML код согласно требованиям и пожеланиям поисковых систем (Google / Yandex). Специфические знания: микро-форматы, микро-разметка. Учитывая, что SEO вымирает и заменяется классическим маркетингом – рекомендую избегать всего, что содержит данный акроним. Если поиск работы не ваше хобби, конечно.
Упор на оптимизацию сайта под специальные ридеры (например, для людей с ограниченным зрением). Исключительно редкая должность. Занесена в Красную книгу. Встречается только на крупных проектах.
Должность для специалиста по вопросам сборки, автоматизации, интеграции фронт-енд приложений. Встречается, преимущественно, в крупных компаниях, т.к. подразумевает довольно узкий спектр задач. Актуальные знания: Webpack / Gulp / Grunt. Со временем, у вас начнут спрашивать чем вы, собственно, занимаетесь...
Должность для специалиста по тестированию / контролю качества фронтенд приложений. Встречается в крупных и средних компаниях. Актуальные знания: юнит-тесты, функциональные тесты, A/B тесты, ручное тестирование и автоматизация. Коммуникативные способности входят в список требований.
Многие люди ошибочно полагают, что «тестировщик» – более простая работа, чем «программист». Да, иногда встречаются вакансии где можно «кликать по ссылкам» и «составлять отчёты». Но это исключения.
Заставить Selenium NightmareJS гулять по приложению, создавая скриншоты и выполняя регресионные тесты не так уж и просто. Ведь это, по сути, фуллстек разработка. Работа ведётся сразу в нескольких средах (Electron + Chromium) и требует хороших фундаментальных знаний.
Должность для эксперта по полному стеку веб-технологий. Подразумевает понимание клиент-серверного взаимодействия, опыт работы с базами данных, знание асинхронного программирования и др. Выбор серьёзно настроенных людей.
FullStack делится на две категории: FullStack-JS и всё остальное . В первом случае, как несложно догадаться, на сервере и на клиенте используется JS. Во втором случае – на сервере используется Ruby / Python / PHP.
Для начинающих, чтобы не распыляться между разными языками и платформами, настоятельно рекомендую отдавать предпочтение первому варианту (по возможности). Учить сразу несколько языков – работа на износ.
FullStack JS предполагает использование феб-фреймворков на базе NodeJS. Это может быть монолитный фуллстек фреймворк (типа MeteorJS), реактивный бекенд с минималистичным клиентом (типа HorizonIO) или сборка из независимых библиотек (типа KoaJS + ReactJS). Все они имеют свои преимущества и недостатки.
FullStack JS часто используется в приложениях реального времени: чаты (а-ля Slack / Gitter), финансовые приложения (масштабируемость, PayPal...), игровые сервера. Возможность пушить информацию на клиент (создавая риал-тайм) практически «из коробки» – основной двигатель роста этой технологии.
Высший градус классического программирования. Любая вакансия со словом Architect предполагает Senior специалиста и, вероятно, не представляет интереса в краткосрочной перспективе для вас, дорогой читатель.
Вакансии лида бывают очень разные. Сколько компаний – столько разных лидов. С другой стороны, этот тот случай, когда человек определяет место, а не место – человека. Для начинающих – интереса не представляет, т.к. Junior Lead – такой же нонсенс как Junior Architect.
JS бекендщик. «Великий и ужасный» NodeJS – что только не говорили по его поводу. Восхваления, обвинения в «хипстерстве» – было всё...
Я постоянно пользовался Firefox. Он меня вполне устраивал, особенно в процессе разработки и тестирования сайта. я попробовал сразу же после его выхода. Понравилась скорость рендеринга страниц.
Но через небольшое отрезок времени вернулся к Firefox, по причине отсутствия расширений и дополнений таких как Google Page Rank и панель веб-разработчика Webdev. Теперь с проблем нет, их уже существует большое множество.
Это основной плагин веб-разработчика. Вы можете редактировать, выполнять отладку, просматривать CSS, HTML и JavaScript. Результат внесенных изменений отображается мгновенно. Плагин FireBug очень удобен для поиска фрагмента кода, отвечающего за вывод того или иного блока на странице, и, соответствующего ему CSS-стиля.
Плагин имеет замечательную функцию Inspect, с помощью которой можно посмотреть какие тэги и свойства определяют положение отдельного элемента на странице. Кроме того, во вкладке Layout можно посмотреть какие поля и отступы заданы для этого элемента.
Этот плагин является дополнением к FireBug. C помощью него можно легко разместить в вашем макете изображения и посмотреть на эскиз как бы в уже готовом виде. Для этого надо выбрать картинки и разместить их прямо на странице. Картинки полупрозрачные, легко перетаскиваются мышкой.
Скачать плагин Pixel Perfect для Firefox.
HTML Validator упростит процесс создания валидной HTML разметки в соответствии с веб-стандартами. Теперь нет необходимости не нужно заходить на официальную страницу валидатора.
Плагин подробно показывает ошибки и точное место, а также объяснит, как эту ошибку исправить. Работает в фоновом режиме и встроен в страницу просмотра исходного кода. Очень экономит время.
В данный момент, одним из лидирующих направлений разработки ПО является веб-разработка. Под веб-разработкой подразумевается разработка интернет сервиса или веб-приложения, его обслуживание, поддержка, а также оптимизация под поисковые системы (SEO).
Junior веб-разработчики занимаются собственно созданием несложных веб-приложений, причем преимущественно клиентской разработкой и частично серверным программированием, хотя серверная часть в таких приложениях обычно не очень сложная. Более опытные веб-девелоперы работают еще над сложными частями серверной логики и интеграцией с внешними системами. Для SEO часто нанимают отдельного человека или целую команду специалистов.
Для подтверждения квалификации Junior Web Developer, нужны такие знания:
В этот перечень не включены знания серверных веб-технологий, таких как PHP, Python или Java. Они будут включены в более сложную квалификацию Web Developer со специализациями. Для проверки базовых знаний в области программирования серверной логики в квалификацию добавлен тест по основам программирования.
Поскольку от Junior"а требуется знание JavaScript, ему необходимо знать азы программирования. В этом тесте собраны довольно элементарные вопросы по булевой алгебре, системам счисления (особенно двоичной и шестнадцатиричной), простым алгоритмам.
Тест HTML проверяет знания Junior"ом основных тегов и элементов языка, которые будут необходимы в работе. Также в тесте есть вопросы по некоторым аббревиатурам, браузерам и косвенно о XML.
Junior"у необходимо наряду с HTML знать и CSS, так как иначе разработка более-менее серьезного сайта будет сопряжена с трудностями. Тест покрывает знания основных свойств и атрибутов, box-модели, селекторов.
Знание XML не настолько критично для Junior"а как знание HTML/CSS, но требуется больше как базовое, которое пригодится Junior"у в будущем. Кроме того, нельзя забывать, что на XML основаны большинство других форматов разметки: тот же XHTML, WSDL или набирающий популярность со стандартизацией HTML 5 SVG. Вопросы теста в основном теоретические, покрывающие знание базовой спецификации XML.
Если, в начале 2000-х годов знание JavaScript Junior"ом было необязательным, то сейчас, спустя 10 лет, это одно из первоочередных требований. Знание JavaScript, помимо динамических возможностей в браузере клиента, открывает путь к изучению более сложных технологий, таких как AJAX, которые позволяют создавать насыщенные интернет приложения (Rich Internet Applications, RIA). Вопросы теста проверяют синтаксис, основные функции и объекты JavaScript.
Тематика статьи предлагается администрации и либо принимается либо отвергается с предложением альтернативной. Тематика должна касаться предметной области. Это требование проверяет умение Junior"а быстро вникнуть в суть определенной технологии/подхода/фреймворка. Как вариант можно предложить на рассмотрение администрации 3-4 темы для статьи, а администрация предложит для написания одну из них. Написанная вами статья не должна быть ранее опубликова на других ресурсах.
Необходимость составления вопросов преследует те же цели, что и написание статьи: умение аналитически подходить к освоению нового, отделять важные аспекты от неважных. Тематики вопросов также согласовываются с администрацией (это нужно так как в некоторых тестах довольно много вопросов и при добавлении еще одного высока вероятность, что похожий вопрос уже есть).
Важно: Вопросы на счет статьи можно задавать в комментариях на странице Вашей квалификации (не перепутайте с публичной страницей описания), на которую можно зайти из ссылки на профиле в блоке Квалификации.
Ждем Ваших комментариев и отзывов.
