Дек
Инструменты вебмастера
Сегодня я хочу поговорить про инструменты, которыми пользуюсь при работе с сайтом, не путать с seo инструментами. Инструменты я бы разделил на три группы: браузер, фтп клиент и редактор. Так же все эти инструменты бесплатные (кроме одного), так что рекомендую к использованию.
Браузер многогранен, он может, как показывать истинный вид нашего сайта (лучше использовать несколько браузеров, каждый отображает по-разному внешний вид) так и помочь с решением проблемы. К примеру, необходимо передвинуть элемент сайта или изменить размер, и чтобы не на глаз выполнять, для этого достаточно в браузере изменить параметры сайта и все, мы получаем исходный наш вариант и потом просто переносим данные на хостинг в движок файла.
Я рекомендую пользоваться тремя браузерами или хотя бы одним из них с поддержкой нужного инструментария, оперой – хороший браузер со встроенными возможностями, хром – тоже имеет определенный внутренний патронташ и фаерфокс – браузер с большими возможностями, правда их надо еще добавить к браузеру.
Более подробно поговорю про каждый из браузеров. Чтобы в опере перейти в режим моделирования страницы, для этого необходимо всего лишь нажать на нужной нам странице Вашего блога правой мышкой и выбрать изменю «Проинспектировать элемент». После чего появиться внизу браузера подобное окно (см. рисунок, кликай для увеличения).
Теперь при выборе нужного нам элемента, в нижней левой части экрана появиться html код данного элемента, а в правой – css параметры элемента. Тем самым, изменяя данные в левой или правой части, Вы сможете наглядно увидеть, как изменяется Ваш сайт. Позднее, я напишу статью на наглядных примерах, как визуальное изменение на мониторе перенести в реальные на блоге.
Еще в опере, в данной панели, мне нравиться вкладка «инструменты». С её помощь Вы сможете при наведение мышки на понравившийся цветовой элемент, узнать код данного цвета, а позднее вставить его в нужное место у себя на сайте. Более детально останавливаться в этот раз на опере не стану.
В хроме аналогичная функция включается, как и в опере, для этого через правый клик мыши выбираем «Просмотр кода элемента». Внешне панель похожа на аналогичные от других браузеров. С неё я практически не работал, поэтому расписывать про неё не буду (см. рисунок, кликай для увеличения).
Следующий на очереди инструмент вебмастера от фаерфокса, им я в основном и пользуюсь, поэтому в будущем буду отталкиваться от него. Для этого заходим на официальный сайт плагинов фаерфокса и скачиваем плагин отсюда. Устанавливаем, перезагружаем браузер и теперь в нижнем правом углу появляется изображение черного жучка, кликаем и появляется панель (см. рисунок, кликай для увеличения).
Функционал, как и браузерах, про который писал выше. Чтобы посмотреть свойства нужного нам объекта для этого кликаем левой мышкой на вторую иконку слева на панели (в виде курсора на прямоугольнике) и потом выбираем нужный нам элемент. Теперь в панели css или в самом html коде можно изменить настройки элемента. Если Вам необходимо сдвинуть, подвинуть элемент или расширить, удлинить то рекомендую на панели css выбрать вкладку «макет». В правой части появиться пирамида, состоящая из четырех прямоугольников. Самый внутренний задает длину и ширину элемента, второй — отступ внутри элемента (расстояние от стенки элемента до текста в элементе), третий – ширину бордюра, четвертый отступ всего элемента от точки в которой он находиться в данный момент времени. Кликая на число мы изменяем нужный нам параметр, и параллельно на экране браузера объект будет изменяться. Изменения будут прописываться в html коде, что в последствие можно будет отразить непосредственно в файлы на хостинге.
На этом ставлю точку в вопросе браузеров в качестве инструментов вебмастера.
Следующим на очереди стоят фтп программы. Я использую FileZilla и Wincom (windows commander или тотал коммандер).
FileZilla – один из лучших бесплатных FTP менеджеров, который поможет Вам как загрузить файлы на сервер хостинга, так их и скачать. Программа имеет понятный и удобный интерфейс, имеет возможность разрывать соединение, если долго не пользовались ей. Программа имеет как portable версию, так и версии под любые операционки. Если работали с ФТП программами то в этой не заблудитесь.
Total Commander – очень популярная программа, мой друг её пользуется уже более 8 лет постоянно. Она умеет просматривать мультимедию и графические файлы, имеет хороший FTP-клиент скачка, закачка файлов, поддерживается докачка), распаковщики архивов и дополнительные DLL. Умеет даже разрезать и склеивать большие по размеру. Еще через неё можно искать не только нужный нам файл на хостинге для внесения коррективов, но и искать нужную программную строчку. Про это поговорю попозже. Из минусов данная программа платная.
И напоследок к оставшимся инструментам вебмастера, я бы выделил редакторы. К ним я отнесу notepad++ и Adobe Dreamweaver. Вторая программа платная и я с ней фактически не работал, поэтому поговорю про бесплатную отличную программу — notepad++.
Notepad++ — свободный текстовый редактор для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Программу можно расширит за счет дополнительных плагинов, так же она имеет возможность фтп соединения с хостингом, что позволит обходиться без других фтп клиентов.
Рекомендую её ставить не задумываясь. Выкиньте старый свой блокнот.
Вроде бы все, в данной статье я хотел привести короткий список инструментов вебмастера и небольшим показом его функционала. В дальнейшем я покажу как связать все три компонента (браузер, фпт и редактор), чтобы быстро пройтись с напильником по Вашему блогу.
А какими Вы пользуетесь программами или инструментами вебмастера?
06 Дек 2010 в 23:28
Добавлю еще:
— инструмент просмотра веб-страницы в браузере Opera — только он позволяет изменить произвольный кусок кода, нажать «Применить» и увидеть перезагруженную страницу с учетом изменений
— программа WinSCP — клиент для ssh доступа на сервер с интерфейсом фтп (одна панель серверная, другая локального компа), операции с файлами в разы быстрее + на памяти ни разу не было проблем с правами даже на говнохостингах
[Ответить]
Ahawks Reply:
декабря 6, 2010 at 23:39
Спасибо за дельный комментарий, не обращал раньше внимания на данную возможность от оперы.
[Ответить]
07 Дек 2010 в 01:15
total comander, chrome, site auditor, photoshop -мне этого хватает))+текстовые редакторы
[Ответить]
Ahawks Reply:
декабря 7, 2010 at 01:25
site auditor я бы все таки отнес отдельно к сео инструментам, про которые я поговорю позже...
графические инструменты я забыл... хотя я в основном использую только пеинт, ну и ногда лайтрум.
[Ответить]
07 Дек 2010 в 09:59
Давно пользуюсь Оперой и ее функциями просмотра и редактирования исходного кода и Dragonfly (Проэксперементировать элемнт). Очень удобно, и временами проще, когда устраняешь неполадки в верстке, чем лезть в Dream.
P.S. Артур, в форме комментариях, на твоем блоге padding помоему излишен, т.к. когда начинаешь писать, непонятно и кажется, что нажал на «Цитату».
[Ответить]
Ahawks Reply:
декабря 7, 2010 at 10:16
Спасибо Игорь, подправил
[Ответить]
07 Дек 2010 в 10:41
В принципе полный джентльменский набор. тотал командер мне как то не по душе, зато файлзила нравиться. И самое главное правильно сказал, что нужен именно блокнот++ в других версиях текстовых редакторов при работе с вордпресом часто появляются глюки.
[Ответить]
Ahawks Reply:
декабря 7, 2010 at 11:22
Я тоже пользуюсь файлзилой, просто в тотале нравиться, что он сможет найти в каком файле находиться нужный код для редактирования.
[Ответить]
07 Дек 2010 в 17:26
Да, удобные программы и обязательны для любого нормального вебмастера...
[Ответить]
Ahawks Reply:
декабря 7, 2010 at 18:18
А вы пользуетесь такими же программами или в своем ассортименте имеете и другие программы. ?
[Ответить]
Камбар Кенжегалиев Reply:
декабря 8, 2010 at 05:03
В основном этими...
[Ответить]
08 Дек 2010 в 18:35
Использую фаерфок, тотал командер, фотошоп, нотепад ++
[Ответить]
Ahawks Reply:
декабря 8, 2010 at 19:30
а к фаерфоксу какой плагин используете firebug или и другие?
[Ответить]
12 Июл 2011 в 18:39
Не знал, что у Оперы такое есть. Спасибо. Пользовался Firebug'ом в Firefox.
[Ответить]