Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Скачать исходники к 3 бонусному видеоуроку по CSS Размер: 529.21 kB, скачали: 414 раз.
Скачать браузер Mozilla Firefox 4 Размер: 12.26 MB, скачали: 552 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
7 полезных дополнений для браузера Mozilla Firefox разработчику
Переходя на страницу дополнений, мы можем либо отсортировать их по категориям, либо посмотреть самые популярные, либо рекомендованные дополнения. Мы не будем сейчас ходить по этому сайту, потому что я уже отобрал 7 самых полезных, на мой взгляд, расширений для Mozilla Firefox.
Установка расширений. Список расширений.
Итак, первое расширение — Firebug. Чтобы его установить, нужно нажать «Добавить в Firefox», подождать пару секунд и нажать кнопку «Установить сейчас». Следующее расширение — WebDeveloper. Добавляем в Firefox аналогичным методом. Следующее расширение — ColorZilla. Четвертое — MeasureIt. Пятое — RDS bar. Шестое — Page Promote bar. Жмем «Загрузить», после чего открывается новая страница, и перед нами появляется выбор: загрузка для Microsoft IE и загрузка для Mozilla Firefox3.3. Мы жмем на ссылку «Page Promote Bar бесплатно», и у нас открывается новая страница на которой мы выбираем браузер , для которого нужно загрузить это расширение. Так как мы работаем сейчас с Mozilla Firefox, то мы жмем на Mozilla Firefox. Мы попадаем на новую страницу, жмем «установить», «разрешить», и у нас происходит загрузка дополнения. Затем нажимаем «установить сейчас». Следующее дополнение, оно же и последнее — это SeoQuake. После установки жмем «Перезапустить сейчас». У нас перезапустится браузер Mozilla Firefox, чтобы расширения вступили в силу. Возможно, придется подождать некоторое время. Закрываем вкладку SeoQuake.
Расширение Firebug
Теперь давайте начинать разбираться с расширениями. Приступим к первому. Оно будет напоминать панель разработчика в браузере Opera. Это расширение Firebug. Его можно вызвать, нажав на его кнопку либо посредством нажатия клавиши F12. Появится окошко. Чтобы анализировать элемент, щелкаем на вторую кнопку, а потом выбираем элемент на странице. Справа как обычно идут стили. Чтобы заблокировать какой-нибудь стиль и посмотреть работу веб-страницы без него, мы жмем на кнопку блокировки. Чтобы посмотреть скомпилированный стиль (это стили текста, фона, блочной модели, макета — все по отдельности), то нужно перейти на страницу «скомпилированный стиль». Макет — здесь все просто. Это наша блочная модель, которая нам уже широко известна вдоль поперек. Около меню, кстати, появляется линейка. Мы можем передвигаться от родителей к потомкам и наоборот с помощью навигации. Кстати говоря, как мы видим, когда я навожу мышку на эемент «ul id» с идентификатором menu, то слева появляется желтое пространство. Это пространство означает свойство margin. Если мы его отключим, то видим, что пространства нет. Если появляется фиолетовое пространство, то это свойство padding. Его тоже можно отключить, и оно не будет показываться. Если вы хотите отредактировать текст, то вы можете это сделать двумя способами: двойным щелчком мыши на участке кода и нажатием кнопки «редактировать». Давайте перейдем в CSS. Здесь показываются импортированные файлы, а дальше идут перечисления всех стилей. Как мы видим, это документ st.css. Перейти в другой документ мы можем нажав на другой документ в верхнем меню либо нажав на импортируемый документ. Также здесь возможна правка кода. При нажатии возникает удобное поле для редактирования текста. Справа, как обычно, поиск (можно учитывать или не учитывать регистр). Остальные функции этой программы нам пока не нужны. В опциях можно увеличить, уменьшить или сбросить размер текста, анализировать текст и другие функции. Также мы можем открыть Firebug в отдельном окне и вернуть его, нажав на ту же кнопку. Чтобы свернуть Firebug, мы нажимаем на «Свернуть». Чтобы закрыть его, мы нажимаем на кнопку закрытия. С первым расширением разобрались.
Расширение Web Developer
Следующее расширение, которое мы разберем — Web Developer. Мы переходим во вкладку Firefox->Настройки и ставим галочку около панели Web Developer. У нас показывается панель этого расширения. Давайте разбирать ее по порядку. Мы уже разбирали аналогичное расширение для браузера Opera, но здесь оно еще и на русском языке, поэтому объяснять, в принципе, нечего. Итак, кнопка «Отключить». Отключить можем кэш, JavaScript, Meta-переадресацию, цвета страницы и другие функции. Cookies. Мы можем их отключить, удалить, получить информацию. Ошибки CSS. Можем отключить стили, все стили, стили браузера по умолчанию, встроенные стили или стили элементов. У нас почти все стили были подключенные, поэтому при их отключении, сайт выглядит, как без стилей. Возвращаем на место. Идем дальше. Можно узнать информацию о CSS (буквально, ваш исходный код), посмотреть стиль элемента (это можно сделать и с помощью Firebug). Формы. Здесь можно получить информацию о формах либо заполнить поля форм, изменить метод форм (это уже ближе к PHP). Графика. Можно показать атрибуты alt, пути к изображениям, отключить изображения. В информации мы можем получить разную информацию, например, показать якоря (фактически наши идентификаторы, которые работают в данном случае как якоря), показать порядок Div (мы видим, что идет элемент Div, затем номер порядка: 1,2,3,4,5,6,7,8), есть и другие информации — можете с ними поэкспериментировать. Разное. Первый пункт — удалить личные данные, также есть пункт редактора HTML, показать комментарии, показать скрытые элементы. Мы нажимаем «показать комментарии» и в левом верхнем углу появляется восклицательный знак, при нажатии на который показываются комментарии. Это условные комментарии для IE версии ниже 7-й. Мы их прячем. Нажимаем на «Показать скрытые элементы». Мы помним, что в форме поиска у нас был скрытый элемент с type hidden. Обновляем страницу, чтобы убрать этот элемент. Контуры — это контуры фреймов, заголовков, ссылок. Размеры. Здесь можно выбрать размер окна 800×600 или указать размер окна самому, например 900×700. Таким образом, размер окна расширяется. Увеличение. Мы можем увеличить и уменьшить текст. Инструменты. Мы можем проверить CSS, HTML, но эти две проверки производятся, если у вас сайт расположен в интернете. Если это не так, то вы можете использовать три проверки, которые находятся ниже: проверить страницу (проверяется и CSS и HTML, у нас и HTML и CSS пройдено, то есть страница прошла проверку на валидность, хотя, как мы помним, в CSS у нас некоторые элементы неизвестны), проверить локальный стиль CSS и проверить локальную страницу HTML. Код. Здесь можно просто показать код в новом окне. Настройки. Настроек здесь немного. Можете установить профиль CSS3 либо CSS2.1, добавить размеры экрана, указать горячие клавиши (быстрый переход к командам). Далее у нас идут три кнопки. Первая — режим соответствия стандартам. Как вы уже заметили, у нас стоит галочка, поэтому наша страница стандартам соответствует. Следующая кнопка связана с ошибками. В основном в этой общей консоли ошибок высвечиваются ошибки, связанные с внешним видом (CSS ошибки) и ошибки JavaScript. Сейчас вы увидите, что у нас здесь очень много разных предупреждений, но вы не волнуйтесь, они к нашему сайту не относятся. Эти ошибки были установлены до того, как вы открыли эту страницу, поэтому жмем кнопку «Очистить», закрываем окно, обновляем страницу и снова открываем окно ошибок. Ошибок нет, предупреждения есть, но это предупреждения браузеру. Листаем, и у нашей страницы (вы видите url нашей страницы) есть только одна ошибка — неизвестное свойство zoom. Об этом мы уже говорили, поэтому не будем заострять на этом внимание. В сообщениях у нас ошибок нет. Третья кнопка (тоже с галочкой) — это ошибки Javascript. Их нет. Если бы CSS и HTML были бы валидны, то везде стояли бы галочки. Что ж, мы разобрали данное расширение. Оно вовсе не такое страшное, как могло показаться, но его возможности окупают все ваши страхи и опасения. Я уверен, что вы оцените те удобства, которые дает Web Developer. С ним мы пока прощаемся и отключаем.
Расширение ColorZilla
Следующее расширение называется ColorZilla. Оно находится в правом верхнем углу. Мы на него нажимаем. Появляется курсор. На месте пипетки отображается фон, на который мы наводим курсор. Например, мы выбираем цвет буквы «p» и у нас отображается голубой цвет. Помимо этого, HEX-код данного цвета (тот код, который обычно используется в HTML и CSS для указания цветов) копируется в буфер обмена, и мы его можем вставить. Для этого достаточно нажать правой клавишей мыши на поле и выбрать пункт «Вставить». Также можно воспользоваться сочетанием клавиш Ctrl+V. Для того чтобы показать вторую возможность данного расширения, я немного уменьшу экран. Итак, вторая возможность — это Color Picker. Данное приложение позволяет выбрать тот цвет, который вам по душе. Вы можете выбрать любой цвет и скопировать HEX-код, указанный внизу. Также можно указать имя данному цвету, и при помощи кнопки «Add to favorites» добавить его в избранное. В опциях вы можете выбрать цвет данного приложения: либо градиентный Smooth (как сейчас), либо пиксельный Discrete (квадратиками). Вторая вкладка данного расширения — вкладка Pallets. Здесь вы можете выбрать цвет из уже существующих библиотек или создать собственную. Вы можете выбрать цвет из избранных, из истории или, как я уже сказал, из уже существующих библиотек. Жмем ОК. Помимо рассмотренных, данное приложение обладает и рядом других не менее полезных возможностей. Четвертая возможность — это CSS Gradient Generator. Открываем. С помощью открывшегося сайта вы можете создать свой градиент либо выбрать из существующих, а потом скопировать все стили к себе на страницу и, например, создать кнопку. Градиентные кнопки очень красивы. Выберите цвет формата, заменив RGBA на HEX и копируйте (можно нажать на кнопку «copy»). Мы скопировали код. Теперь, добавив эти стили к своей кнопке, например, вы увидите, что у нее появится созданный градиент. Закрываем. Смотрим следующие возможности. Inspect Last Element → In Firebug. Это инспектирование последнего элемента. С помощью той кнопки, которую мы нажали, мы открыли Firebug, который исследует последний инспектируемый элемент. Далее идет лупа — уменьшение или увеличение текста. Потом — добавка цвета в избранное, очищение статус бара и копирование (можно скопировать HEX-код, можно RGB-код). Опции здесь трогать не стоит, так же, как и помощь. Все настроено нормально.
Расширение MeasureIt
Мы благополучно переходим к следующему расширению — MeasureIt. Оно еще проще предыдущего. Находится оно в самом нижнем левом углу. Нужно нажать на линейку. У вас открывается такой же курсор, как и в расширении ColorZilla. Нажимаете и двигаете, потом отпускаете, и у вас указывается ширина и высота выбранной области. Данное расширение позволяет измерить все элементы на странице, которые вам понадобятся, например меню получилось шириной в 422 пикселя и высотой в 62 пикселя. Чтобы отключить расширение, снова нажимаете на линейку.
Расширение RDS bar
Следующее расширение — RDS bar. Мы его уже разбирали в расширениях браузера Opera, и здесь мы его должны включить в настройках. Нам нужно открыть страницу, которая находится в интернете. После открытия, RDS bar указывает индекс Яндекса, ТИЦ Яндекса, PR от Google, возраст сайта, входящие ссылки, количество посетителей за день и прочую информацию. С желтым окном мы уже знакомы. Вы можете исследовать правописание на сайте при помощи соответствующей функции, просмотреть исходный код страницы в новом окне, очистить кэш для текущей страницы при помощи корзины, а также вы можете использовать другие сервисы с помощью последней вкладки (здесь есть и проверка на валидность, и анализ текста на advego, и др.). Самое главное, что я хотел бы объяснить в данном расширении — это настройки. Я забыл рассказать про одну вещь в прошлом видеоуроке. Открываем настройки и выбираем третью вкладку — SEO теги. Здесь есть «Подсветка на страницах». Вы можете указать галочки, например, напротив noindex. В настройках отображаются стили для этого элемента. То есть, элемент noindex будет подсвечиваться выбранным цветом. Возможно, у вас все галочки будут стоять по умолчанию как в Mozilla, так и в браузере Opera. Вторая строка — rel="nofollow". Если данный атрибут будет иметь место, то он будет подсвечивать зачеркнутым. Третья строка — «Внешние ссылки». Все они будут показываться в красной рамке. Есть сайты исключения: google.com, google.ru, yandex.ru. Жмем «применить» и давайте обновим страницу и посмотрим на сайт. Почему я вам хочу это показать? Дело в том, что, вы могли с подобным столкнуться и подумать: «Что за ерунда с моим сайтом?». Мы видим, что у нас есть фон и зачеркнутый текст. Эта ссылка идет на википедию. Внизу у нас тоже есть таки ссылки. Справа у нас только зачеркнутый текст, потому что ссылка ведет на мой сайт. Внизу есть две зачеркнутые ссылки с фоном. Об этом я и хотел вам рассказать, чтобы вы не пугались — это всего лишь настройки расширения RDS bar. Вы их всегда можете отключить. Нажимаем «применить», обновляем страницу. Как мы видим, настройки отключены. Я отключаю расширение.
Расширение Page Promoter Bar
Включаю следующее расширение — Page Promoter Bar. Это расширение тоже показывает как ТИЦ, так и PR, популярность, каталоги, информационные услуги. На чем я хотел бы заострить внимание, так это на настройках. Мы можем подсвечивать элемент noindex, но самое главное, о чем я хотел поговорить — это о кнопке «Анализировать результаты выдачи». Нажимаем, и давайте попробуем что-нибудь поискать, например «бесплатные видеоуроки по сайтостроению». У нас происходит поиск в Google, и мы видим, что под каждым результатом поиска отображается панель Page Promoter. Эта панель показывает свойства страницы, которая попала в результаты поиска. Нам показываются PR, ссылки, индекс и прочее. Наш сайт находится на 8-м месте по данному запросу. В настройках вы также можете выбрать те параметры для бара, которые следует выводить, а в параметрах анализа выдачи вы можете выбрать, сколько результатов следует анализировать, возможно, требуется ручной анализ, а также по каким параметрам следует анализировать результаты в разных поисковых машинах. Здесь отмечены все. Вы можете некоторые галочки убрать. Жмем ОК и закрываем расширение.
Расширение SeoQuake
А теперь нам следует разобраться с последним расширением. Оно совмещает в себе два предыдущих. Оно называется SeoQuake. Включить его мы можем в правом нижнем углу. У нас сразу появляется SEO-бар. Кстати, нам опять нужно открыть страницу, которая находится в интернете. У нас показываются PR, индекс, но не показывается индекс и ТИЦ от Яндекса, потому что данное расширение ориентировано больше на англоязычную аудиторию. В настройках вы можете выбрать SEObar или SEOToolbar. Выбираем SEObar, и у нас исчезает панель. Это мы разобрали сходство между расширением SeoQuake и RDSbar. А теперь давайте посмотрим сходства между SeoQuake и Page Promoter Bar. Как мы видим, у нас выводятся параметры для каждого результата поискового запроса. Помимо этого, мы можем выбрать интерфейс Google, например англоязычный, и специфичные параметры для страны. Например, мы хотим проверить поиск для США. Жмем «Reload», после этого мы видим, что под каждым расширением, помимо панели Page Promoter Bar, выводится SeoQuake. Мне кажется, что удобнее панель Page Promoter Bar, так как она выводит и ТИЦ Яндекса, но, к сожалению, она сделана только для Firefox и для IE. В SeoQuake вы можете сохранить свои параметры в файл. Для того, чтобы убрать параметры для соответствующей поисковой машины, вам достаточно нажать на выпадающий список SeoQuake и убрать галочку напротив поискового сервиса (например, Google). Для того, чтобы убрать параметры Page Promoter Bar, мы снова открываем панель Page Promoter Bar и убираем галочку напротив «Анализировать результаты выдачи». После обновления страницы под результатами выдачи не будет никаких параметров. Работу с данными расширениями можно считать законченной и мы можем их отключить.
Разработка с браузером Mozilla Firefox
Все расширения, которые мы сейчас разобрали, я посчитал самыми нужными и полезными. Я их подбирал очень тщательно, потому что моим сайтом пользуются 40% посетителей с браузером Firefox. Помимо этого, я считаю данный браузер самым лучшим для разработки. Я посещаю сайты и общаюсь в браузере Google Chrome, а разрабатываю сайты в браузере Mozilla Firefox. Я думаю, вы выберете нужные вам расширения и будете их использовать. Спасибо за внимание. До встречи в следующем видеоуроке, в котором мы познакомимся с расширениями для браузера Google Chrome!
Info-line.net