Тайна переписки, или Полезные инструменты для вебмастера + практический кейс

Доброго дня, друзья!

Как любил поговаривать мой бывший тренер по шахматам, «раз пошла такая пьянка, режь последний огурец» :). Это я к тому, что раз уж решилась однажды опубликовать один гостевой пост, так почему бы и не опубликовать и второй. Тем более, что он просто перенасыщен практической информацией и наглядными примерами, а его автор — блогер, страдающий перфекционизмом и, по совместительству, мой хороший друг, автор блога ArtAbr.ru Артем.

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

Обращу ваше внимание на формат статьи: изначально это выдержка из переписки. Я не сочла нужным и возможным изменять стиль изложения, ни к чем это.  Собеседник Артема на раскрытие тайны переписки согласился, потому передаю слово гостю, а сама по обыкновению сворачиваюсь в клубочек в уголочке…

Начнем с инструментов, как говорил один мой знакомый отделочник: «Хороший инструмент — половина дела!»

Существует несколько инструментов для вебмастера и блогера. Опишу те, которыми пользуюсь я:

1. Самый главный инструмент — браузер
2. Расширения браузера
3. Продвинутый блокнот, типа Notepad++, сей блокнот отлично подсвечивает код, что позволяет хорошо ориентироваться в нем (коде) ориентироваться. Применяется в особо сложных случаях, когда требуется выгрузка файлов с хостинга и правка в данном блокноте

А теперь подробнее по пунктам.

Браузеры

На сегодня существует всего пять(!) браузеров, на которые надо ориентироваться при верстке. Остановлюсь подробнее на каждом.

Safari

Браузер предназначенный для яблочных устройств, то есть для девайсов от Apple. Поддерживает все новомодные штучки из CSS3. Так как у меня все компьютеры на WIndows, особо по нему сказать не могу ничего, не пользовался. (Добавлю от себя — на самом деле для винды есть версия Сафари, но смысл пользоваться этим браузером? Эта портированная версия ничем особенно не примечательна и популярностью у поклонников мелкомягких не пользуется. Разве только у тех, кто хочет приобщится к мак-культуре, но не имеет возможности 🙂 )

 

Firefox

В простонародье — Огнелис))) Отличный браузер с массой расширений и возможностей. Поддерживает все современные стандарты верстки. На мой взгляд, тормознутый слегка и нет толковой поддержки Evernote Web Clipper. Для меня этот нюанс важен, потому использую Огнелиса только при настройке стилей собственного и дружественных блогов. Ну и еще для других действий, о чем напишу ниже. (Кошачье примечание: а вот я вообще себе жизни без Огнелиса-Лисохвоста не представляю 🙂 )

Chrome

На сегодня лидер индустрии (результат мощного пиара — я что-то не замечала, чтобы того же огнелиса по телеку рекламировали — простите, не удержалась :)). Иногда смотрю статистику посещений своего сайта по использованию браузеров — 80% принадлежит Хрому. А все потому, что используется открытое программное обеспечение Хромиум. На котором работают некоторые другие не так распространенные браузеры — ЯндексБраузер, Опера 15 и еще некоторые.

Поддерживает все современные стандарты верстки. Мой основной браузер для серфинга и ведения блога. Расширений просто море разливанное. Единственный минус — очень требователен к ресурсам компьютера, ну собственно, как и любой современный браузер. Но Хром с каким-то особым цинизмом жрет ресурсы…

У меня компьютер вот такой конфигурации:

• процессор: Intel core i5;
• память: 8Гб;
• видеокарта: Geforse 630M 2Гб;

То есть, вполне себе неплохая конфигурация, но если открыто 20 вкладок в Хроме, Ворд и Огнелис — компьютер замирает намертво…

Opera

Просто обалденный браузер был раньше, использовал его по полной катушке в течении 5 лет до версии 12. Отличный браузер со встроенным почтовым клиентом. Был.

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

Начиная с версии 15, Опера переходит на движок Хромиум, и теперь я искренне не понимаю, чем она будет отличаться от Хрома или ЯндексБраузера.

Internet Explorer

Пожалуй, самый древний и самый кривой на сегодня браузер от компании Мелкомягких (Microsoft). Единственный плюс этого Ослика ИЕ — встроен в Windows по умолчанию, что позволяет пользоваться интернетом для скачивания других браузеров. На этом все плюсы заканчиваются…

Начиная с версии 9, поддерживает продвинутые стили и оригинальные решения по верстке и то, не все.

Например, если смотреть внимательно мой блог, то можно заметить что в Хроме и Огнелисе, когда нажимаешь на поле подписки, то появляется такая красноватая моргающая рамка, так называемая анимация. Так вот, даже в версии 11 такая возможность не поддерживается.

Можно, конечно, путем хватания правой ногой за левое ухо и здесь добиться результата, но зачем это делать, когда Хром замечательно все поддерживает.

Потому я не заморачиваюсь на тему правильного отображения в ослике ИЕ. Это важно для коммерческих сайтов, а для личных блогов не настолько критично. Но я отвлекся. Вот такие браузеры на сегодня используются в Рунете.

А теперь посмотрим вебмастерские расширения для Хром и Файрфокс

Расширения

Расширения для Хрома

Честно говоря, из расширений у меня стоит только статистика стоит. Потому как у Хрома замечательное решение по просмотру кода встроено, правая кнопка мыши и можно смотреть код.

В левом окне хтмл-код страницы, слева — CSS. Причем этот просмотрщик позволяет просматривать даже Hover-эффекты, что не во всех расширениях встречается. Но по использованию сего замечательного инструмента напишу ниже, а сейчас…

Расширения для Огнелиса

Самое главное расширение — Firebug.

Аналогичен «Просмотр кода элемента» от Хром, но у него есть интересная возможность в виде стрелки. Нажимаешь на стрелку, а стрелку наводишь на интересующий элемент. Вуаля! Тебе показывают все стили, примененные к этому элементу. Например:

Потом наводишь, ну допустим, на заголовок сайта:

Что видим? А видим следующее:

Правое окно

Данной надписи присвоен заголовок H1, который сидит в контейнере masthead, который, в свою очередь, вложен в контейнер header.

Левое окно

Применены следующие стили:

Размер шрифта — 45 пикселей. Заметь, не пунктов, а пикселей!

Толщина шрифта — нормальная. Еще может быть тонкая или жирная.

Интервал между буквами — минус 2 пикселя, то есть название можно «растянуть» до нормального, но об этом чуть ниже.

Внешние отступы — по нолям.

Внутренние отступы — все по нолям, кроме верхнего. Внутренний отступ сверху — 10 пикселей.

И так можно рассмотреть каждый элемент сайта или блога.

Чтобы было понятнее, меняю размер, цвет и семейство шрифтов. Смотри, что получается:

Правда, цвет шрифта меняется в другом селекторе (в ссылке), но это уже не важно. Главное, понимать сам принцип использования этого инструмента. В итоге получаем то, что хотим изменить. Полученный код необходимо будет скопировать в файл style.css, сохранить и наслаждаться полученным результатом.

Другое полезное расширение для Огнелиса:

Page Speed

Скорее, это расширение для Firebug, этакое расширение расширения. Есть, кстати, аналогичное решение и в Хроме, но там оно работает криво, да к тому же не по-русски все пишет.

Позволяет замерять скорость загрузки сайта и выискивать, что мешает быстрой загрузке блога. Анализ загрузки показывает по 100-бальной шкале. Нормальные показатели загрузки должны стремиться к сотне, но на вордпрессных блогах — 93-95 нормальный показатель. По этому инструменту в Рунете написана масса статей, потому не буду надолго на нем останавливаться. Просто посмотрим, что показывает сей инстрУмент по твоему блогу.

На главной странице неплохие показатели:

94 из 100. Это очень неплохо. В данном случае, Пейджспид рекомендует подключить тебе сжатие и настроить кеширование. Ну, кеширование он всем рекомендует, а вот сжатие подключить не мешает.

Как это сделать, поищи у Дмитрия Ктонановенького, у него очень подробные серии статей есть, на тему ускорения блога. Я по его статьям делал себе.

Смотрим внутреннюю страницу.

Вот здесь не все гладко. 89 из 100 — не есть гут.

Что-то надо делать с кешированием, плохо работает. Видимо, надо в настройках плагина поковыряться, поднастроить. Картинки в статье не оптимизированы. Кстати, пейджспид позволяет оптимизировать картинки, прямо не отходя от него — открываем стрелочку и смотрим, какие картинки не мешает оптимизировать. Ага, вот такие:

Нажимаем Save as (сохранить как), сохраняем уже оптимизированное изображение и закидываем его по новой в статью.

Яваскрипты тоже неплохо бы оптимизировать, но здесь это описывать долго (но можно попробовать опустить скрипты вниз — это опять Web-Кошка влезла) и без знания нужных действий лучше ничего не делать, а вот по CSS-спрайтам и небольшим ява-скриптам имеет смысл что-то сделать.

Но CSS-спрайты у тебя не получиться сделать, так как педжспид ругается на фавикон, можно попробовать картинку фавикона переоптимизировать. Может, и поможет…

Присмотревшись к ошибке небольших ява-скриптов:

видно, что эти скрипты относятся к плагинам. Первый скрипт — плагин автоматических меток, второй кнопок социальных сетей, а третий — плагин пересылки ответа на комментарии.

И если с первым и третьим ничего не сделать, кроме замены или удаления данных плагинов, то с кнопками социалок решать можно кардинально, полной заменой плагина на код. Благо, сейчас появилась масса сервисов по таким кнопкам (Опять влезу, чтобы добавить ссылочку на статью про UpToLike — красивые кнопочки без плагина).

Вот такое полезное расширение.

Есть для Огнелиса еще расширения, тот же RDSBar или Web Developer, но ими толком не пользуюсь. Потому и не буду их описывать.

Зато расскажу об одной надстройке… Аналог Firebug, но с одной интересной фишкой, с помощью которой я смог найти скрытую ссылку у себя в шаблоне. Это надо видеть, нажимаем правую клавишу мыши и выбираем Исследовать элемент:

А теперь, нажимаем на вот эту кнопку:

и смотрим на свой шаблон в 3D(!)

Вот смотри, это и есть та скрытая ссылка, которую можно увидеть только так или просматривая исходный код строку за строкой:

Вот такими расширениями я и пользуюсь.

 

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

Полагаю, и вам эта статья окажется полезна. Потому что в теории можно объяснять сто раз, но вот один такой практический кейс стоит куда больше. Так что дружно благодарим в комментариях Артема и подписываемся на его блог artabr.ru. Ну и конечно, задаем вопросы в комментариях, если что-то осталось осталось непонятным.

Ну а я пока с вами прощаюсь, дорогие друзья… Возможно, что надолго…