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

Подготовка к разработке сайта

Большинство начинающих web-мастеров считают, что данный вопрос не имеет большого значения для успешного продвижения ресурса. Но по моему мнению, это далеко не так — от грамотной организации работы будет зависеть ваше желание и стремление в дальнейшем заниматься проектом. Я не говорю о том, чтобы ваш сайт состоял просто из белого фона и текста, я имею в виду необходимость создания простой и удобной структуры страничек для дальнейшей ее модификации. Настоятельно советую вам позаботиться о комфортных условиях работы.

Структура проекта

Если вы задумали заняться разработкой собственного сайта, даже если это будет ваша домашняя страничка, выделите на жестком диске определенное место для нового проекта. Создайте папку (имя проекта) с еще тремя вложенными (имя проекта, материалы, инфо). Давайте обсудим назначение каждой из них:

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

Материалы — тут, как вы уже поняли, необходимо разместить все необходимые подсобные материалы для вашего проекта. Удобно, когда все под рукой...

Инфо — значение данной папки трудно переоценить. Тут будет храниться вся важная информация, связанная с вашим проектом, такая как пароли от аккаунтов почтовых ящиков, хостинга, баннерных сетей, сведения о партнерах проекта и многое другое. Следует создать бекап этой папки или распечатать ее содержимое на бумаге. В случае потери или «утечки» этой информации, могут возникнуть большие проблемы.

Структура каталогов проекта

При разработке web-проектов зачастую формируют структуру сайта в виде «дерева каталогов». Большинство начинающих web-мастеров пренебрегают этим советом, а потому в дальнейшем, при разработке проекта, они вынуждены разбирать огромные завалы разнообразных файлов (хтмл, графики, скриптов) из главного каталога сайта. Так или иначе, им приходится заниматься структурной переработкой ресурса.

Имена файлов

Имена файлов вашего сайта должны быть написаны только латиницей, так как интернет-хостинги не поддерживают кириллицу!

Начало разработки web-проекта

Мелкие недочеты

Закончив предварительную подготовку, можно приступить к разработке самого сайта. Давайте рассмотрим некоторые проблемы, которые могут у вас возникнуть.

Почему не работает ссылка?

Случается, что загрузив сайт на хостинг, вы пытаетесь перейти по одной из ссылок в меню, но она оказывается неправильной. Почему? Все очень просто, когда вы устанавливаете линки через некий html-редактор, они порой ведут к файлу на локальном диске и имеют вид: file:///..//С/Мой сайт/index.htm. Поэтому, перед тем как закачивать сайт на хостинг, обязательно проверить правильность ссылок. Для этого просто скопируйте сайт в другой каталог жесткого диска и перепроверьте все линки заново.

Ссылка правильная, но страничка не находится.

Еще одна знакомая ситуация. А все из-за того, что большинство начинающих разработчиков работают под платформой Windows, для которой имена файлов вида Index.htm и index.htm — это одно, в то время как для Unix, Linux и прочих платформ-хостингов это 2 разных файла, и ссылка index.html для документа Index.htm работать не будет.

Совет. В названиях файлов не используйте заглавных букв.

Навигационная система

Руль на 35° вправо! Вперед! Ой, это не то :-)! В целом данная тема очень важна, сайт без хорошей навигационной системы — это неудачный сайт. Зачем тогда заходить на него, если найти нужную информацию практически невозможно.

Как же сделать так, чтобы система навигации (СН) получилась удобной, несложной и легко настраиваемой? Более продвинутые разработчики решают эту проблему с помощью технологий SSI, вставляя в каждую страницу раздела сайта код загрузки (СН) меню. То есть для того чтобы добавить раздел, нужно просто изменить файл, в котором находится меню. В противном случае пришлось бы вручную вносить изменения в меню всех страниц проекта (а представьте, что у вас их будет 500!)

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

Многие советуют избегать использования фреймов, так как возможны курьезные случаи. Например, в один из фреймов загрузится другой сайт с фреймами, в него еще один, и в конце мы получим «матрешку» (кучу вложенных в друг друга фреймов) и маленькое окошко, в котором будет отображаться кусочек последнего сайта. Поэтому следует ставить в свойствах ссылок, в строку «кадр назначения» слово «_blank», что при нажатии на линк приводит к открытию очередной странички в новом окне.

Выходит, что при правильном использовании фреймов никаких проблем не возникнет. Дерзайте!

Цветовая гамма, шрифты или дизайн в общем

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

Делайте однотипный дизайн на всех страницах сайта — в противном случае посетителю будет трудно ориентироваться.

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

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

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

Старайтесь сделать сайт удобным для просмотра в трех разрешениях экрана: 640х480, 800х600, 1024х768. Ведь у посетителя может оказаться старый монитор, поддерживающий только одно низкое разрешение экрана, или, наоборот, суперновый, работающий лишь с высокими разрешениями.

Примерное соотношение используемых разрешений экрана: 640х480 — 2%; 800х600 — 48%; 1024х768 — 50%.

Структура разметки гипертекста

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

Касательно размеров страниц

Очень многие сталкиваются с проблемой долгой загрузки своих страниц. А ведь зачастую посетители, не дождавшись закачки в течение 20–30 секунд, просто покидают сайт. Решение этой проблемы существует — необходимо найти оптимальный размер для страничек ресурса. По моему мнению, он составляет 30 Кб, максимум — до 50 Кб.

Собственно преодолеть эту проблему возможно, оптимизируя html-код и графику. Хотя от последней можно отказаться вообще, используя в качестве альтернативы различные скрипты, таблицы и цветные палитры.

Контент, сэр!

Самая важная часть сайта. Что по-настоящему способно привлечь пользователей на ваш сайт, так это полезная информация. Приятный дизайн без хорошего наполнения — это ноль. Поэтому, кроме внешнего и структурного оформления сайта, следует позаботиться о контенте.

Быстро и оперативно

Информация, размещенная на вашем сайте, должна обновляться в считанные часы или, исходя из темы проекта и количества людей, его разрабатывающих, минимум раз в 2–3 дня. Услышав о чем-то интересном, пользователь будет искать эту информацию через поисковую машину, и если в списке ваш сайт окажется на самом верху, будьте уверены, постоянный посетитель вам обеспечен. Если у вас средний по размерам ресурс, то обновление должно проходить минимум 1–3 раза в неделю. Посетители, видя такое усердие, будут приходить к вам чаще, в противном случае, у них не возникнет желания наведываться к вам. Не обновляющийся сайт — мертвый сайт!

Информация и орфография

Старайтесь избежать ошибок и опечаток. Это настолько вредит вашему имиджу, что вам и в страшном сне не снилось. Думаю, стоит установить программу проверки орфографии или пользоваться словарем.

Стиль изложения информации

Выберите для вашего сайта подходящий стиль изложения информации. Старайтесь не использовать таких сленговых выражений, как, например, «типа ваще крутой чувак и т.п.» :-).

Достоверность информации

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

Использование чужой информации

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

Я сюда еще вернусь, мне бы только выбрать дом…

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

Пространство под файлы

Один из самых важных и значимых атрибутов для web-мастера. Ведь для размещения и дальнейшего пополнения сайта должно быть достаточно места. Поэтому большой популярностью пользуются бесплатные хостинги, которые предоставляют от 50 Мб и больше. В большинстве случаев расплатой за подобную услугу является требование разместить на каждой странице сайта рекламный баннер. Хотя, по большому счету, это пункт зависит от того, как вы умеете договариваться с хостинг-провайдерами :-).

Доменное имя

При выборе сервера, на котором будет размещаться ваш проект, посмотрите, какое доменное имя вам предоставляют. Почти всегда это домен 3-го уровня, например, «ваше_имя.narod.ru». Надо помнить тот факт, что на посещаемость сайта в значительной степени влияет длина, читабельность и запоминаемость :-) доменного имени, — чем оно короче, тем лучше.

Иногда все условия хостинга вас устраивают — за исключением доменного имени, например, такого «ваше_имя.ubitiyniger.nigeriya.ng». В этом случае можно воспользоваться услугами сервиса переадресации, за что придется заплатить полоской рекламы. Альтернативный вариант — покупка собственного доменного имени и переадресация на бесплатный хостинг.

Надежность

Иногда при обращении к сайту, размещенному на «левом» сервере, выдается ошибка, и после этого его просто-напросто могут удалить, если он не исчезнет сам по себе :-). Чтобы избавиться от таких проблем, заранее обратите внимание на популярность и надежность выбранного вами сервера.

Поддержка скриптов и расширенных возможностей.

Если сервер поддерживает скрипты, это огромный плюс, который дает web-мастеру возможность использовать собственные «сценарии» форумов, гостевых книг и других дополнительных элементов.

Автор: А. В. Кириллов


Команда разработчиков браузера Firefox не обошла своим вниманием задачу веб-разработки. И несмотря на то что это несколько разные процессы - показать содержимое веб-страницы и создать эту самую страницу, - Firefox предлагает всем пользователям свою помощь также и в создании веб-сайтов. Достаточно осведомленный о проекте Mozilla читатель скажет, что один из продуктов, разрабатываемых в рамках проекта Mozilla, как раз и предназначен для редактирования веб-содержимого (речь идет про HTML-редактор NVU). Да, NVU развивается, однако и встроенные в браузер инструменты редактирования также не помешают. Сегодня речь пойдет о возможностях внешнего расширения для Mozilla Firefox WebDeveloper, которое сделано с прицелом на веб-дизайнеров и разрабатывается в рамках проекта Mozilla.


Установка расширения WebDeveloper похожа на процедуру, применяемую для установки внешних расширений во всех приложениях, входящих в проект Mozilla. Установка как всегда выполняется с помощью пары щелчков кнопки мыши. Самый простой путь установить это расширение - выбрать в меню веб-браузера пункт "Инструменты - Расширения". Далее следует перейти по ссылке "Установить другие расширения" внизу этого окна на веб-сайт с плагинами к Firefox и найти там нужное расширение (оно находится в группе Developer Tools). После чего следует нажать на ссылку Install в "коробочке" с расширением WebDeveloper (находится на второй странице указанного раздела). В ответ на запрос, который выдаст Firefox, следует подтвердить установку расширения и дождаться окончания его загрузки. Размер расширения составляет менее 100 Кб, поэтому долго ждать вам не придется. После установки следует перезапустить "огненную лису" (выключите все запущенные копии Firefox и запустите браузер снова). После всех выполненных манипуляций вам станет доступна новая панель инструментов Web Developer Toolbar. Вы можете в любой момент сделать эту панель видимой или скрыть ее с помощью меню браузера "Вид - Панели инструментов - Web Developer Toolbar".

В случае если вы уже имеете установленный WebDeveloper, возможно, вам придется обновить ранее установленную версию. Этот процесс в Firefox оптимизирован по количеству операций и максимально упрощен для удобства пользователя. Обновление версии плагина выполняется прямо из окна "Расширения" браузера с помощью функциональной клавиши "Обновить" данного окна. Вначале, конечно, следует найти WebDeveloper в списке уже установленных расширений. Следует также учесть, что для использования новой версии расширения после операции обновления следует перезапустить браузер.

Панель расширения

Установка и настройка

Приведем возможности этого расширения в том порядке, в котором расположены активирующие их ссылки на самой панели инструментов WebDeveloper:


    * Disable - отключение отдельных возможностей браузера;

    * CSS - работа с таблицами стилей;

    * Forms - расширенное управление HTML-формами;

    * Images - управление картинками;

    * Information - получение вспомогательной информации о веб-странице;

    * Miscellaneous - различные по функциональности дополнения;

    * Outline - обрисовка определенных частей веб-дизайна контурными линиями;

    * Resize - изменение размера окна браузера;

    * Tools - инструменты для разработчика;

    * View source - просмотр исходных кодов страницы;

    * Options - тонкая настройка возможностей расширения.



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

Вкладка меню Disable позволяет просмотреть, как выглядела бы веб-страница без использования тех или иных элементов в веб-дизайне. Вы можете увидеть ваш веб-сайт глазами пользователя, отключившего java-скрипты или пользующегося отключением графики для ускорения загрузки страниц при работе с Интернетом через модемное соединение. Также вы можете проверить схему защиты вашего веб-сайта, основанную на анализе рефереров*. Для этого есть возможность отключения передачи веб-браузером данных о веб-странице, с которой вы зашли на веб-сайт, серверу.



Вкладка Disable предоставляет пользователям плагина следующие возможности:


    * отключение куков;

    * выключение анимации в картинках;

    * отключение показа самих рисунков;

    * отключение возможности выполнения скриптов Java на веб-страницах;

    * выключение схем раскраски сайта;

    * отключение отправления серверу данных о веб-сайте, с которого вы зашли на страницу (отключение рефереров);

    * отключение стилей веб-страницы. Вы сможете отключать встроенные, подключенные и прочие стили веб-страницы. Можно отключать использование только одного из нескольких подключенных одновременно CSS-файлов.



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

Плагин WebDeveloper имеет массу возможностей для упрощения процесса разработки CSS-таблиц. Все возможности расширения доступны как из панели плагина, так и из контекстного меню (опциональная возможность - контекстное меню расширения можно выключить). В контексте работы с таблицами стилей расширение позволяет:


    * подключать к просматриваемой странице пользовательскую таблицу стилей (Add user style sheet);

    * отключать стили браузера по умолчанию;

    * отключать стили по их типу (например, вы можете отключить только стили, используемые при печати);

    * редактировать CSS-таблицы;

    * просматривать используемую таблицу стилей в виде веб-страницы прямо во вкладке Firefox;

    * выводить дополнительную информацию о таблицах стилей, используемых в одном из элементов оформления веб-страницы.




Управление стилями с помощью функции редактирования CSS позволяет примерить выбранный вами дизайн прямо во время работы веб-сайта. Вы просто изменяете таблицу стилей и видите, как бы выглядел веб-сайт с отредактированными таблицами стилей. Также очень полезной является возможность просмотра стилей элементов веб-страницы. При активации режима просмотра стилей (View Style Information) появляется курсор, с помощью которого следует выбрать элемент оформления веб-страницы. После выбора этого элемента веб-дизайна во вкладке браузера выводится информация об используемых им стилях оформления. Таким образом, очень просто просмотреть стиль абзаца или гиперссылки, когда произходит наезд частей дизайна или видны какие-либо диспропорции размещения элементов на вашей веб-странице.

Расширение WebDeveloper имеет довольно большие возможности по управлению HTML-формами. Вы имеете возможность выполнять следующие операции над HTML- формами:


    * очищать радиокнопки (Clear Radio Buttons);

    * конвертировать переменные запросов GET в POST и наоборот;

    * выводить данные про поля ввода и прочие элементы веб-форм (Display form details);

    * отменять режим "Только просмотр" для полей ввода (Make form fields writable);

    * убирать ограничение на максимальную длину поля ввода формы (Remove maximum length);

    * показывать пароли (в полях ввода со звездочками);

    * просматривать информацию о формах HTML-страницы (View form information).




Набор функций WebDeveloper позволяет очень комфортно работать как c HTML-формами, так и с CSS-таблицами. Наверное, для первоначальной разработки таблиц для сайта более подойдут другие инструменты. Например, вы можете использовать одну из программ, рассмотренных в этой статье. Но, несмотря на неполный спектр возможностей по работе с CSS-таблицами, встроенных возможностей вполне достаточно для окончательной доводки, например, цветового решения вашего сайта. Возможности управления HTML-формами позволяют достаточно широко оперировать с переменными, передаваемыми в HTML-запросах. Для обеспечения тестирования вашего сайта на предмет корректности обработки HTML-форм возможности плагина чрезвычайно полезны. Например, вы можете удостовериться в том, что ваш PHP-скрипт обработает только переменные GET-запроса.

Плагин не предназначен для создания веб-страниц, для этого существует специальный вид программного обеспечения - HTML-редакторы. WebDeveloper не позволяет отредактировать веб-страницу, а разрешает только подогнать стили ее оформления под выбранный вами дизайн. Хотя в случае с настолько быстро развивающимся программным продуктом, как Firefox, можно ожидать всякого...

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

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