Поиск по блогу :

    7 декабря 2010 г.

    Ubuntu, как рабочая машина для (X)HTML,CSS,JS-разработчика

    Так как уже лет 5, моим основным заработком является Front-End разработка сайтов ((X)HTML,CSS,JS), а из них около 3-х лет в Ubuntu, я решил поделиться своими наработками по этому вопросу.

    Среда разработки

    За эти три года, чего только не перепробовал из редакторов и IDE. Был и Vim, и Geany (им пользуюсь до сих пор, для мелких задач), и Aptana, но в итоге остановился на Komodo Edit. Бесплатный, удобный и поддерживает систему разработки zen-coding (о нем ниже). Текущая 6-ая версия поддерживает HTML5 теги и CSS3. Update: С октября 2011 перешел на Sublime Text 2, что и вам советую.

    Zen-coding

    Последнее время, я уже даже и не представляю, как раньше обходился без столь удобной вещи, как zen-coding.
    Кто не знает, Zen-coding - это новый способ написания HTML кода с использованием синтаксиса CSS-селекторов, существующий в виде специального плагина для многих популярных редакторов и IDE. Как правильно говорят, лучше один раз увидеть, чем сто раз услышать прочитать :)

    "Отладчики" в браузерах

    Под "отладчиком" я понимаю дополнение или уже встроенный инструмент браузера, который является консолью, отладчиком, а также DOM-инспектором JavaScript, HTML, CSS и т.п.
    Сейчас трудно найти web-кодера, который не пользовался бы в своей работе отладчиком в браузере. Ведь этот инструмент очень сильно сокращает время разработки проекта. Позволяет быстро искать где находятся баги в верстке и стилях. Также помогает визуально посмотреть, как будет выглядеть тот или иной элемент страницы, с использованием того или иного стиля. Консоль позволяет вести отладку JavaScript'а. DOM-инспектор, позволяет добавить, удалить или изменить какой-нибудь тег в коде страницы, на лету, без изменения самого кода в редакторе. И это только малая часть того, что можно делать с помощью отладчика.

    Вот список браузеров с их отладчиками:
    1. Браузер: Firefox.
    1.1. Отладчик: дополнение Firebug. Наверное, один из самых популярных отладчиков, используемый разработчиками.
    1.2. Запуск: иконка на нижней панельке браузера или вызов по клавише F12. А также из контекстного меню: Анализировать элемент.
    2. Браузер: Chromium или Google Chrome.
    2.1. Отладчик: встроенный Developer Tools. Для Chromium в Ubuntu поставляется в виде отдельного пакета chromium-browser-inspector.
    2.2. Запуск: Значок Настройки на главной панели ->'Tools'->'Developer Tools'. Или вызов по комбинации клавиш Ctrl+Shift+I. А также из контекстного меню: Проинспектировать элемент (Inspect Element).
    3. Браузер: Opera.
    3.1. Отладчик: встроенный DragonFly.
    3.2. Запуск: 'Меню'->'Страница'->'Средства разработки'->'Opera Dragonfly'. Или вызов по комбинации клавиш Ctrl+Shift+I. А также из контекстного меню: Проинспектировать элемент.
    4. Браузер: Safari.
    4.1. Отладчик: встроенный.
    4.2. Запуск: Сначала необходимо активировать пункт 'Разработка' в Настройках. Щелкаем по значку Настройки на главной панели ->'Настройки'->'Дополнения'->'Показать меню «Разработка» в строке меню'. После чего можно будет вызвать отладчик через: значок Меню Текущей Страницы на главной панели ->'Разработка'->'Показать веб-инспектор'. Или вызов по комбинации клавиш Ctrl+Alt+I (в MacOS - ⌥⌘I). А также из контекстного меню: Проверить объект.
    5. Браузер: Internet Explorer.
    5.1. Отладчик: утилита IE Developer Toolbar. Могу ошибаться, но по-моему, с версии IE8 отладчик поставляется вместе с браузером. Я считаю, что у IE самый отстойный отладчик, так как умеет совсем немногое.
    5.2. Запуск: иконка на главной панели или вызов по клавише F12.

    Работа с PSD-файлами

    Работа с .psd-файлами - это, наверное, самый проблемный момент для web-верстальщика в Linux. Но в последнее время и этой проблемой стало меньше. Если раньше мне приходилось использовать Photoshop в виртуальной машине VirtualBox, то теперь с запуском Photoshop прекрасно справляется wine. Работает и CS4, и CS5. Правда есть и минусы, если в текстовых слоях используется кириллица, то этот текст невозможно скопировать в буфер обмена. Это связанно с тем, что в фотошопе используется собственный буфер обмена, который даже под виндой не всегда корректно работает.

    1. Для запуска CS5(я использую portable версию) в Ubuntu 10.10, необходимо доставить пару библиотек с помощью winetricks:

    $
    winetricks gdiplus vcrun2005sp1 vcrun2008 atmlib

    1.1. Если у вас не установлен winetricks и его нет в репозитории, то проделайте следующее:
    $ $
    sudo add-apt-repository ppa:ubuntu-wine/ppa
    sudo apt-get update && sudo apt-get install winetricks


    2. Чтобы иметь возможность просматривать файлы формата .psd в стандартном приложении просмотра изображений (eog) или др. приложениях, советую установить приложение gloobus-preview
    $ $ $ $
    sudo add-apt-repository ppa:gloobus-dev/gloobus-preview
    sudo apt-get update
    sudo apt-get install gloobus-preview
    nautilus -q

    А что же Gimp? Gimp - отличный графический редактор в linux, но, к сожалению, с файлами .psd, созданными в Photoshop, особенно в последних версиях, он справляется из рук вон плохо :( Но для быстрой обработки картинок - это незаменимый помощник.
    Есть множество других графических редакторов, но я ими не пользуюсь.

    Менеджер буфера обмена

    Еще одной незаменимой вещью для web-кодера является менеджер буфера обмена. Согласитесь, намного удобней иметь возможность вставить из буфера кусок кода, который часто используется во время верстки текущего проекта, чем по сто раз, по новой, его копировать/вставлять в/из буфер(а) обмена.
    Я пользуюсь Parcellite:
    $
    sudo apt-get install parcellite

    Есть и другие менеджеры, к примеру, Glipper:
    $
    sudo apt-get install glipper

    а для KDE существует Klipper
    $
    sudo apt-get install klipper



    Программа для снятия скриншотов

    Частенько бывает нужно показать клиенту, тестировщику или другому кодеру: какие изменения нужно сделать на странице; пометить где что не ясно на сайте; объяснить тестеру, что это не бага, а фича :) Обычно это делается прямо на скрине, чтобы было понятно. Лучше всего, для этих задач, подходит программа Shutter. Она и скрины делать умеет (+ добавлять к ним фильтры, если необходимо), и конечно же имеет возможность добавлять свои отметки и замечания на скрине (стрелочки, текст, попапчики и т.п.)

    Шрифты

    Хотелось бы пару слов сказать о шрифтах, точнее о стандартных шрифтах используемых для верстки сайтов. Так сложилось, что стандартными шрифтами для верстки страниц, являются, преимущественно, шрифты от Microsoft идущие в поставке Windows. И один из самых распространенных шрифтов - Tahoma. Но Tahoma, наряду с Arial Narrow, не входят в стандартную поставку Ubuntu, из-за лицензионных соображений. Больше про шрифты в Ubuntu можно почитать здесь. Чтобы установить эти шрифты в Ubuntu, делаем следующее:
    $
    sudo apt-get install ttf-mscorefonts-installer

    Ну, а так как популярность убунту растет с каждым днем, то уже начинают попадаться проекты, в ТЗ которых, указывают поддержку ОС GNU/Linux, в следствии чего, приходится подключать такие, вроде бы стандартные :) шрифты через @font-face.

    Тестирование на кроссбраузерность

    Если верстку под Google Chrome, Firefox и Opera я могу проверить в нативных версиях этих браузеров под Linux, то для проверки под IE6+ и Safari(Win) я использую винду, установленную на виртуальную машину VirtualBox. Советую использовать полную версию VirtualBox, а не урезанную OSE, которая есть в репозиториях убунты.
    $

    $

    $ $
    sudo add-apt-repository "deb http://download.virtualbox.org/virtualbox/debian non-free"
    wget -q http://download.virtualbox.org/virtualbox/debian/oracle_vbox.asc -O- | sudo apt-key add -
    sudo apt-get update
    sudo apt-get install virtualbox-3.2

    virtualbox-3.2 - последняя версия программы на момент написания статьи.
    Ну, а под Safari(Mac), я проверяю на стареньком MacMini.

    Система управления версиями

    Ну и как же не упомянуть о "Системах управления версиями", ведь при разработке больших проектов, при совместной работе над одним проектом нескольких человек, а так же просто для бекапа измененных версий файлов, без этих систем не обойтись. По части web-разработки, мне в 99% случаев приходится иметь дело с системой управления версиями - Subversion или сокращено SVN. Есть и другие, более развитые системы, но так сложилось, что svn до сих пор является одной из самых популярных.
    В своей работе я использую или консольные утилиты из пакета subversion, или утилиту RabbitVCS(аналог виндового TortoiseSVN), которая интегрируется в gnome'ский Nautilus. Есть множество других программ для работы с svn, но у меня они как-то не прижились.

    Полезные плагины

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

    Firefox:
    Pixel Preview - позволяет верстать сайт, как говориться, пиксел в пиксел;
    MeasureIt - линейка;
    ColorZilla - позволяет узнать код цвета любого пикселя на экране;
    FireFinder - позволяет найти и подсветить элемент на странице с помощью указания пути через css или xpath;
    Web Developer - панель, с кучей полезных вещей для web-разработчика
    Chromium
    Pendule - набор инструментов для web-разработчика;
    Perfect Pixel - позволяет верстать сайт, как говориться, пиксел в пиксел;
    Resize Window - проверка страницы под разные разрешения экрана
    Списочек постепенно буду обновлять.

    Обновлено 27.10.2011г.