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

Это руководство предназначено для совсем зеленых новичков, которых вдруг посетила мысль стать более просвещенными в сфере интернета или даже создать свою собственную веб-страничку. Стоит заметить, что часть программ работает исключительно в операционной системе Windows и для Unix подобных применим другой набор программных средств. Но, как бы то ни было, речь пойдет о редакторах, браузерах, утилитах и онлайн-сервисах , которыми мы тоже сможем воспользоваться.

Руководство по созданию сайта

Любое руководство по созданию сайта в разделе знакомства с HTML (язык разметки гипертекста) чаще всего содержит что-то вроде «..откройте программу «блокнот»..» или «..запустите браузер «Internet Explorer (IE)..», но не спешите привыкать к этому безобразию.

 

Плюс есть: эти средства уже встроены в операционные системы Windows, но это совсем не значит, что они нам подходят. Если вы решили заняться созданием сайта и читаете этот материал, то у вас уже есть доступ к сети Интернет, следовательно, есть и возможность скачать более удобные обозреватели веб содержимого (интернет-браузеры) и другой полезный софт. Приступим.

Браузеры (browsers)

Инструменты для веб-мастера

Скачайте и установите себе несколько различных веб-обозревателей. Ваш сайт должен быть кроссбраузерным, что означает – сайт должен хорошо просматриваться в любом из популярных веб-обозревателей, при этом без искажения дизайна и не в ущерб производительности и функционалу. Предлагаю вам скачать в первую очередь Mozilla Firefox, Opera и Google Chrome.

Для начала этого будет вполне достаточно. Затем можно скачать еще портабельный Internet Explorer младших версий, чтобы корректировать сайт и под них тоже. Нашим фаворитом и основным браузером станет, несомненно, Firefox и позже вы поймете почему. Как настроить должным образом Mozilla Firefox вы узнаете из статьи «Превращаем Mozilla Firefox в супер-комбайн для веб-мастера».

Скачали и установили? Я уже давно не пользуюсь установочными пакетами, так как в сети можно найти портабельные (переносные) версии почти любой программы. Это избавляет меня от установки, да и еще я могу пользоваться ими на любой персоналке, будь то компьютер интернет-клуба или ноутбук друга. Ношу всегда программы с собой на съемном жестком диске или флешке. USB-жестяк быстрее, и загрузка программ выполняется гораздо раньше, чем с флеш-памяти. Советую и вам об этом задуматься.

Текстовые редакторы

Инструменты веб-мастера

Еще потребуется обязательно текстовый редактор. Простой виндовозный блокнот нам не подходит. Качаем Notepad++ — очень удобный и легко расширяемый редактор. Среди его преимуществ не только подсветка кода и нумерация строк, но и возможность ведения статистики, доступа к файлам по FTP, автоматического завершения слов, конвертирования текста в различные кодировки, а также куча других вкусностей. Позже вы научитесь их использовать на реальных примерах, а пока просто установите его себе. О настройке Notepad++ читать здесь.

Среди других редакторов, которые вам просто будут не нужны, если есть Notepad приплюснутый, можно отметить SciTE, созданный на основе открытого проекта Scintilla. Это представляет собой быстрый текстовый редактор, предназначенный, в первую очередь, для редактирования исходного кода. Но он как-то не прижился у меня, если честно.

Веб-сервер+MySQL+php+PhpMyAdmin

Инструменты для веб-мастера

Подошло время для развертывания веб-сервера. Руководство по установке полноценного веб-сервера в эту статью я запихивать не буду, хотя в первую очередь, помню, я научился настройке связки Apache+MySQL+PHP. Об этом в другой раз.

Для создания сайта на локальной машинке вас устроит (меня и многих других вполне устраивает) джентльменский набор веб-разработчика Денвер. Скачать его самую свежую версию вы можете с сайта denwer.ru. Для этого нужно будет указать свой адрес электронной почты (у вас ведь он уже есть!?) и Имя с Фамилией. На данный момент доступна сборка с PHP версии 5.3, но лучше скачайте с v.5.2 тоже, так как некоторые системы управления контентом не совсем корректно работают с последними версиями PHP. Кстати, денвер тоже работает портабельно. На флешку! Если не разобрались, почитайте о денвере здесь.

Средства работы с графикой

Руководство по созданию сайта

Для работы с изображениями я использую сразу несколько инструментов. Вне конкуренции Photoshop для растровой графики и Corel Draw для векторной графики. Флеш-анимация на мой взгляд стала не столь популярна, чаще встречается анимация с использованием Java-script, а теперь с приходом CSS3 HTML5 и вовсе уйдет за кулисы.

inkscape-gimp

Пересмотрел я свои взгляды на эту проприетарщину (говорит во мне ГНУ/Дебианщик) и советую работать в gimp и inkscape. Это свободные пакеты, которые теперь очень удобны и через пару недель стираются привычки корела и фотошопа. И надо это дело использовать под линуксом - я заметил, что работает стабильнее (особенно inkscape). Теперь исключительно на этом сижу и "в ВУЗ не дую"..

 

Для массовой оптимизации изображений использовать такой навороченный комбайн, как Photoshop, просто нецелесообразно. FSResizer идеально подходит для пакетного сжатия графических файлов. Часть функций умеет делать Picasa от Google, например быструю обрезку и корректировку. Даже Office Picture Manager , входящий с поставку MS Office, иногда мне быстро помогает, если нет ничего другого под рукой. Замечательное средство IrfanView с его многочисленными плагинами. Обязательно ознакомьтесь со статьей «Оптимизация изображений»

Онлайн-сервисы

Руководство по созданию сайтов

Среди онлайн-сервисов стоит отметить punypng.com – инструмент для сжатия графических файлов без потери качества. Очень хорошо жмет формат PNG. Однако теперь он совсем бесплатно бесполезен, увы...

htmlbook.ru — великий справочник по HTML/CSS нет смысла его дублировать, проще указать вам обратиться туда и найти подробное описание любого тега или конструкции.

iconsearch.ru — здесь ищу иконки для кнопок или оформления. Большинство иконок уже имеют узнаваемый вид и задуматься стоит только о стилизации и декорировании, а за основу взять уже существующие.

favicon.ru — создание иконки сайта. Очень нужная штука. Ну или же можно скачать архив с кучей готовых иконок, но я сторонник уникальности.

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

diffchecker.com - простой сервис сравнения текстов, пригодится в поиске багов после каких-либо неадекватных действий.

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

Добавить комментарий

Защитный код

Введите код с картинки в текстовое поле

Комментарии   

Начинающий
0 # Начинающий 11.11.2014 10:40
Хотелось бы увидеть урок по нарезке простенького макета сайта в Gimp.
Ответить | Ответить с цитатой | Цитировать
Юрий Деменский
0 # Юрий Деменский 11.11.2014 18:26
К сожалению, никогда не практиковал нарезку макетов вообще, пробовал, но не практиковал. По Гимпу сказать ничего не могу. Когда-то нарвался на статейку незамысловатую: savepearlharbor.com/?p=209622, с тех пор как-то не доводилось
Ответить | Ответить с цитатой | Цитировать