В рамках цієї рубрики хочу сьогодні поговорити про розширення для Firefox і доповнення для Opera, допомагають при верстании сайту, а так само при роботі по його просуванню в пошукових системах.
Сам я є давнім шанувальником Opera, ще з тих часів, коли вона була платною. На мою думку, кращого браузера для серфінгу по мережі не знайти.
Але для роботи над сайтом Opera підходить набагато менше, ніж усім відомий браузер Firefox. Оперу, звичайно ж, теж можна заточити під верстку сайтів, але у неї, як не крути, немає такої штуки, як Firebug, а це для початківця верстальника ой як важливо. Хоча час летить і з моменту написання цієї статті розробники браузерів, мабуть мене почувши, додали в усі свої творіння базові можливості героя сьогоднішньої статті, але оригінал то все одно залишається кращим з кращих. ІМХО.
Плагіни для браузерів, що допомагають вебмайстрам
Файрбаг спочатку був розширенням тільки для Mozilla Firefox і він дозволяв істотно знизити час на знаходження та виправлення потрібного фрагмента в Html коді, а якщо ви початківець веб-майстер або структура файлів движка CMS (системи управління контентом) вам зовсім незнайома, то я взагалі не уявляю, як можна обійтися без нього.
Так, звичайно, можна відкривати вихідний код потрібної сторінки і шукати так потрібне місце, але це час і рутина, яку легко та невимушено дозволяє уникнути наш герой. Зручна і незамінна річ, при чому аналога йому раніше навіть і не було.
От і доводилося мені раніше жити на два будинки. В Opera я бродив по інтернету, а в Firefox — працював над своїми проектами, постійно використовуючи можливості розширення, про який сьогодні піде мова.
Але крім верстальных доповнень для браузерів вам, напевно, при роботі з вашими проектами можуть знадобитися і SEO розширення, що дозволяють оперативно відстежити PR і ТИЦ відкриваються в браузері сторінок, подивитися закриті або немає для індексації пошуковими системами зовнішні посилання на цих сторінках (особливо це цікаво при коментуванні блогів і пошуку так званих Dofollow блогів) і багато іншого (посилання на них дивіться на самому початку статті).
Якщо вже мова зайшла про браузерах, то мені дуже сподобався новий новий набір інструментів для розробників Chrome — швидкий, навіть в порівняння з Opera, зручний і красивий, але поки я ще не розібрався, чи є до нього розширення подібні тим, що я опишу нижче.
Firebug — це не просто додаток, що додає якоїсь розширений функціонал вашого Фаерфоксу. Дуже вірно про це написано на сторінці розробників — це еволюція web-розробки.
Так, це саме так. Еволюція — це коли ви переходите від палки-копалки до екскаватору. Ефект приголомшливий і ви відразу відчуєте, почавши використовувати цей плагін. Ну, мабуть, вистачить співати дифірамби, пора розповісти про його можливості. Скачати Фаербаг ви можете зі сторінки аддонов. На даний момент актуальною версією є 1.11.4.
Природно, що встановлювати це розширення потрібно, перебуваючи саме в Фаєрфокс, бо там буде набагато простіше. Якщо ж ви клацнули на кнопці скачування цього розширення в якому-небудь іншому браузері, то відкриється стандартне вікно завантаження, в якому ви збережете цей дистрибутив на своєму жорсткому диску.
Потім вам потрібно буде зайти в Мазілу, з верхнього меню вибрати «Файл» — «Відкрити файл» і знайти на вашому жорсткому диску скачаний файл. В результаті знову ж почнеться процес установки.
Після перезавантаження браузера ви побачите у правому нижньому куті вікна значок Firebug у вигляді жука — це означає, що дане доповнення успішно встановилося і чекає ваших наказів. Спочатку розгляну ті можливості, які використовую сам при роботі з сайтами, а потім коротко розповім про те, що ще ви можете робити з допомогою нього взагалі.
Буває, що вам потрібно щось поміняти, доробити, виправити, просто подивитися як це реалізовано і працює на своєму або чужому ресурсі. Так, так, ви не помилилися, саме на чужому ресурсі. Сподобалося вам те або інше рішення вебмастера і ви хочете зробити у себе так само — Фаербаг вам допоможе.
В принципі, я вже говорив, що подивитися вихідний код сторінки можна і без цього розширення (клацаєте правою кнопкою миші по сторінці в будь-якому браузері і вибрати з контекстного меню щось на кшталт «Вихідний код сторінки» або «Вихідний код»), але цього коду буде багато, а для того, щоб знайти потрібне місце, буде потрібно час. Що нам пропонує в цьому випадку вогненний жук?
Як користуватися Firebug при верстании сайту
А він пропонує вам клацнути по питанню місцем вебсторінки, знову ж правою кнопкою миші і вибрати з контекстного меню — «Аналізувати елемент» (в англомовній версії плагіна це буде «Inspect»). І вам, о диво, відкриється в його вікні тільки ту ділянку коду сторінки, який відповідає за формування саме того елемента, який вам цікавий. Зручно?
Безумовно. Тільки за одне це варто полюбити цей плагін. Але ж він може багато чого ще. Код потрібного вам елемента ви побачите у вікні внизу сторінки вікні цього доповнення, показаному на малюнку вище. Той ділянку коду, який відповідає за зацікавив вас елемент веб сторінки, буде підсвічений синім.
Так само зверніть увагу на підкреслене мною на малюнку червоною лінією рядок, що починається з слова «Редагувати» у вікні Фаербага. Якщо ви клацніть по цьому слову, то зможете внести зміни в виділений фрагмент Html-коду, які тут же відображаються на сторінці.
Поміняйте, наприклад, у вікні плагіна url картинки на має намір неіснуючий і картинка зникне з вебсторінки, повернете все назад і картинка з’явиться. Але зверніть увагу — ці зміни ніяк не позначаться на вашому ресурсі, всі зміни побачите лише ви і тільки на цій веб, підпорядкованої всемогутньому вогненному жука. Як тільки ви поновіть сторінку, то всі внесені плагіном зміни зникнуть.
З допомогою Firebug можна змоделювати те, що може статися при зміні Html або CSS коду веб-сторінки. Ви можете таким чином, з допомогою його можливостей, подивитися (не витрачаючи часу на пошук файлу движка вашої CMS, що відповідає за висновок цієї ділянки) різні варіанти і вибрати потрібний, або ж взагалі відмовитися від зміни, якщо поточний варіант виявиться не так вже й поганий.
Але от якщо ви все ж зрозуміли, що зміни в Html код вносити потрібно і вони приведуть до поліпшення виду вашої веб-сторінки, то ось тут і настає той складний момент, в якому вам, на жаль, не допоможе розібратися навіть вогненний жук (він, на жаль, не всесильний).
Проблема пошуку потрібного ділянки коду у файлах движка
Вам доведеться самостійно відшукувати той файл в движку вашого сайту, форуму або блогу, який генерує даний ділянку Html коду. Файл цей, скоріше за все, буде з розширенням .php, тобто написаним на мові серверного програмування PHP і, відповідно, ця ділянка в ньому може виглядати зовсім несхоже на те, що ви бачите у вихідному коді веб-сторінки.
У цьому, на мій погляд, і полягає основна складність редагування зовнішнього вигляду і змісту сторінок веб-сайтів, побудованих на якому-небудь движку (CMS). Якщо ви початківець веб-майстер або ніколи не стикалися з таким движком, то з ходу визначити в якому файлі формується вам цікавий фрагмент вебсторінки навряд чи зможете.
Потім, згодом, набравшись досвіду, для вас не буде становити праці, а поки я пропоную вам діяти за такою схемою. Палю тему, як люблять говорити на SEO форумах і блогах — жарт, ніякого секрету тут, звичайно ж, немає.
Вам потрібно буде для початку за що зачепитися в тому коді, який відкрив для вас люб’язний Firebug. Знайти щось унікальне або рідко зустрічається, що, напевно, повинно виглядати так само і у файлі PHP вашого движка.
Я раджу чіплятися за CSS класи або ID тих чи інших Html тегів. Припустимо, в контейнері (контейнером називають ділянку коду, укладений теги DIV, c прописаними класами або ID), в якому знаходиться тег потрібного вам елемента веб-сторінки, прописаний якийсь CSS клас або ID (наприклад, так div class=»xxtoolbox»).
Тепер вам потрібно здійснити пошук по вмісту файлів движка вашого сайту в пошуках тих файлів, в яких є згадка даного класу. Правда, таких файлів може виявитися занадто багато і тоді для звуження області пошуку доведеться зачепитися за що-небудь, але для початку потрібно зрозуміти: а як, власне, можна вести пошук по вмісту файлів движка.
Пошук по вмісту файлів движка за допомогою Total commander
А все дуже просто: потрібно завантажити всі файли движка на свій комп’ютер, підключившись до сервера хостингу по FTP, і скористатися можливістю шукати по вмісту файлів такої чудової програми, як файловий менеджер Total commander. Ви відкриваєте папку з усіма файлами движка в Тотал Коммандере і вибираєте з верхнього меню програми «Інструменти» — «Пошук файлів» або просто натискаєте Alt+F7 на клавіатурі.
У вікні, ви ставите галочку в полі «З текстом», переконуєтеся, що в полі «Місце» вказано правильне місце розташування ваших файлів движка сайту, а поле «Шукати» не повинно бути заповненим. В результаті, Total commander видасть вам список всіх файлів движка, в яких зустрівся потрібний нам CSS клас. Цей клас або ID ви вибрали раніше як маячка при перегляді фрагмента вебсторінки через Firebug.
Якщо файлів, в яких зустрічається цей CSS клас не дуже багато, то можна відкрити їх усі по черзі в кращому Html редактор Notepad і, за допомогою його пошуку, знайти місця, де зустрічається даний клас.
Якщо файлів движка, де зустрічається шуканий маячок занадто багато, то треба взяти інший ключ (маячок) для пошуку, вивчивши уважніше потрібне місце вебсторінки з допомогою все того ж Фаербага. Якщо ж все склалося вдало і ви не тільки знайшли, але і виправили потрібну ділянку Html коду, то вам потрібно буде завантажити цей виправлений файл движка назад на сервер в ту папку, де він і повинен лежати, замінивши існуючий на сервері.
Або ж, як роблю я, відразу відкрити потрібний файл з сервера на редагування і вносити зміни відразу в нього за допомогою програми Файлзила.
При здійсненні пошуку по вмісту файлів в Тотал Коммандере, може виникнути проблема з російськими словами, а точніше їх кодуванням. Якщо Total commander нічого не знайшов за вашим запитом російською, поставте галочку навпроти «UTF-8» у вікні пошуку і все знайдеться.
Можливості та принципи використання Firebug
Давайте продовжимо розгляд можливостей вогняного жука, який розпочали в цій статті. Ми вже в загальних рисах торкнулися його роботи, а саме того, як можна використовувати цей плагін для визначення фрагмента вебсторінки, що відповідає за той чи інший елемент дизайну.
Крім описаного трохи вище способу (клацнути по питанню місцем вебсторінки правою кнопкою миші і вибрати з контекстного меню — «Аналізувати елемент») це розширення можна викликати до життя і простим натисканням на іконку павучка в правому нижньому кутку вікна браузера або ж за допомогою клавіші F12. Повторне натискання цієї клавіші призведе до закриття вікна Фаербага.
Якщо ви хочете, щоб плагін відкрився в окремому вікні, то клікайте по павучки утримуючи Shift на клавіатурі або за допомогою сполучення клавіш Ctrl+F12. Ви самі виберіть найбільш зручний для вас варіант виклику до життя цього шедевра інженерної думки. Вікно буде виглядати приблизно так:
Зверху будуть розташовані кнопки панелі управління, а основна частина вікна поділена на ліву і праву половину. У лівій половині ви можете спостерігати структуру HTML коду відкритої в браузері сторінки, а в правій половині — стилі CSS, які використовуються для завдання того чи іншого виду цього веб документа.
Як я вже говорив раніше, в тсовременной блокової верстки прийнято використовувати HTML лише для завдання наповнення контентом сторінок, а для завдання потрібного зовнішнього вигляду наповнення цього використовуються властивості таблиці стилів CSS.
Як використовувати Фаербаг для вивчення HTML
Firebug ж дозволяє реалізувати дві дуже цікаві можливості, що допомагають розібратися з пристроєм коду відкритої в браузері сторінки. Можна водити мишкою по самому HTML тегу у вікні цього плагіна, а на вебстраничке будуть виділятися ті елементи, за формування яких цей тег відповідає (клацаєте, наприклад, за Div контейнерів і тут же побачите вгорі підсвічування цього контейнера в дизайні веб-сторінки).
А можна, навпаки, активувати такий хитрий режим в цьому розширенні, що при цьому, мишею ви будете водити по самій вебстраничке, а HTML-код, відповідний тегам (що знаходиться під курсором миші), буде в реальному часі відображатися у вікні Фаербага. Просто незамінна річ при вивченні будови того чи іншого веб ресурсу, особливо для початківців.
Для здійснення всього того, що я тільки що описав, нам знадобиться інформація, що відображається в лівій половині вікна плагіна, де відображаються теги даної відкритої веб-сторінки в браузері. Там Ви можете наочно бачити вкладеність один в одного тих чи інших тегів, наприклад, контейнерів DIV.
Для розкриття вмісту тега можна натиснути на плюсик поруч з ним. Підводячи мишку до того чи іншого контейнера DIV у лівій частині вікна Firebug ви можете спостерігати, які елементи веб-сторінки входять в даний DIV контейнер.
Вміст DIV-контейнера плагіном буде зафарбовано синім муаром на вебсторінці, через який ви зможете бачити, які саме з елементів дизайну знаходяться в цьому DIV контейнері. Правда відкрита вами веб-сторінка може бути дуже великий і тоді доведеться використовувати прокрутку для пошуку виділеного синім муаром фрагмента дизайну.
Як видно з наведеного вище скріншота, контейнер
відповідає за виведення блоку з заголовком і описом мого WordPress блогу.
Але можна піти від зворотного для отримання через Firebug інформації про те, який тег за виведення якогось блоку на даній веб-відповідає. У цьому випадку, ми будемо підводити миша не до DIV блокам з кодом, а безпосередньо до цікавлять нас елементів відкритої в веб-браузері. При цьому у вікні плагіна, в області для показу HTML коду, синім фоном будуть підсвічуватися ті теги (наприклад, DIV контейнери), які відповідають за формування даного блоку.
Все це буде динамічно відображати у вікні даного розширення у відповідності з переміщенням миші по вебсторінці. Дуже наочний і зручний спосіб використання вогняного жука для вивчення особливостей побудови свого або чужого веб проекту.
Для реалізації цього способу треба буде тільки активувати відповідний режим, натиснувши на показану на малюнку кнопку панелі:
Після того, як ви натиснули цю кнопку, ведіть мишею над потрібними ділянками веб-сторінки, а в лівій частині вікна плагіна зможете спостерігати ділянки Html коду, що відповідають за формування даних елементів дизайну (вони будуть виділені синім фоном). При цьому фрагмент сторінки, над яким знаходиться вказівник миші, буде укладено в синю рамочку:
Після того, як потрібний фрагмент знайдений, ви можете клацнути по ньому лівою кнопкою миші і перейти в ліве поле вікна Фаербага для подальшої роботи з тегами цього елемента дизайну. З тегами у вікні плагіна можна проводити будь-які маніпуляції і результат ви побачите відразу ж на відкритій у браузері сторінці.
При цьому, природно, ніяких змін у реальних файлах движка сайту проводитися не буде. Але зате, ви зможете в реальному часі промоделювати різні варіанти побудови дизайну веб-сторінки. Якщо ж новий, змодельований за допомогою Firebug варіант вас влаштує, то доведеться вносити зміни вже в реальні файли движка, знайти які ви зможете,використовуючи описаний трохи вище спосіб з участю Total commander.
Як використовувати Firebug для роботи з CSS
У правому вікні цього розширення відображаються всі властивості CSS, які відповідають за оформлення виділеного в лівому вікні фрагмента коду. Ці CSS властивості будуть визначати зовнішній вигляд даного Html блоку. Це може бути його становище щодо інших блоків даної сторінки, розмір, тип і колір шрифту, використовуваного в даному блоці для відображення кольору або посилань і багато іншого.
Для наочної демонстрації можливостей CSS в оформленні якого-небудь елемента веб-сторінки, ви можете підвести курсор миші до будь-якого стильового правилом, наведеним у правій частині вікна. Поряд з цим правилом з’явиться сірий перекреслений кружечок. Клацнувши по ньому мишею ви відключите цю властивість CSS на цій веб-і поряд з ним з’явиться червоний кружечок.
При цьому ви зможете спостерігати на відкритій сторінці сайту в реальному часі сталися зміни. Т. о. вогненний жук допомагає розібратися в тому, яке правило у файлі таблиці каскадних стилів за що відповідає в оформленні даного елементу дизайну. Для того, щоб знову включити неактивний CSS властивість, потрібно буде знову клацнути по червоному перечеркнутому кухоль поруч з ним.
Розташовані в правій частині властивості можна редагувати точно так само, як ми редагували теги в лівій частині вікна цього розширення. Всі внесені зміни у властивості з правої області будуть відразу відображатися на відкритій Мазілу вебсторінці, але ні як не вплинуть на реальні властивості CSS, прописані в файлі таблиць каскадних стилів, ім’я якого ви можете бачити над даним блоком:
У вікні Фаербага буде вказана рядок у файлі таблиць каскадних стилів, на якій прописано дана властивість CSS. Тому, якщо промоделированные зміни в оформленні вебсайту вам сподобаються, то для внесення цих змін в таблиці стилів вашого сайту потрібно буде лише відкрити потрібний файлик і знайти там підказану у вікні плагіна рядок. Все набагато простіше, ніж у випадку з внесенням змін в HTML-код сторінки.
Як виміряти швидкість завантаження сайту Фаербаге
Ну і наостанок, хотів би розповісти про те, як з допомогою цього розширення вимірювати швидкість сайту (не плутайте з вимірюванням швидкості інтернету в Спидтесте або 2IP).
Швидкість, з якою завантажується ваш ресурс, є дуже важливим показником, що впливає на успішність і безпроблемність його пошукового просування. Якщо у вашого проекту зі швидкістю завантаження не все в порядку, то це може спричинити за собою досить неприємні наслідки, як з боку пошукових систем, так і з боку лояльності відвідувачів.
І найважливіше те, що відвідувачі можуть відмовитися від роботи з вашим ресурсом, т. к. дуже довго завантажуються веб-сторінки. Крім цього пошукові системи, в особливості Google, враховують швидкість завантаження при загальній оцінці корисності того чи іншого ресурсу, а так само вона може впливати на стан вашого веб-проекту в пошуковій видачі.
Щоб виявити і усунути вузькі місця в швидкості завантаження елементів вашого ресурсу можна скористатися спеціальними сервісами, що дозволяють це справа виміряти. Про це я розповідав у першій статті про визначення і збільшення швидкості завантаження сайту (тут з нею можна ознайомитися).
Вам досить буде ввести адресу потрібної веб-сторінки і через деякий час ви отримаєте повну разблюдовку того, який елемент за скільки часу завантажується. Таким чином можна виявити явно гальмують елементи і вжити заходів до прискорення їх завантаження.
Але те ж саме можна зробити і не звертаючись до сторонніх сервісів. У нашого улюбленого плагіна Firebug є така можливість. Досить просто натиснути кнопку «Мережа» і оновити відкриту вебсторінку.
В результаті, вам буде надана повна інформація щодо завантаження всіх елементів веб-сторінки. Аналізуйте і приймайте при необхідності заходи по прискоренню завантаження. На сьогодні, мабуть, всі. У наступній статті я хочу продовжити тему, а так само розповісти про ще одному чудовому плагіні для браузера Firefox, який допоможе нам при роботі з оформленням сторінок сайту.
Цей плагін називається Web Developer і має просто величезну кількість всіляких інструментів, що дозволяють спростити роботу з верстки або коригування шаблону вашого веб-ресурсу. Ну, а далі ми перейдемо до розгляду SEO плагінів для FireFox і Opera.
Можете також подивитися відео по темі, яке зайвим вже, напевно, не буде:
«alt=»»>
Удачі вам! До зустрічей на сторінках блогу
