Дизайн Web- сайта

4 глава. Проектирование

4.1 Вступление

Как мне сродать свой сайт?

Этим вопросом задаются тысячи пользователей сети Интернет каждый день, этим вопросом задаюсь сейчас и я: "Как? Ведь создают же люди самостоятельно себе сайты. Чем я хуже?" Прочь беспокойство, прочь сомнения, ведь чтобы рассказать вам про все этапы создания сайта, я пишу эту дипломную работу.

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

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

Создание сайта можно условно разделить на следующие этапы:

1 - Идея
2 - Разработка структуры сайта
3 - Разработка оформления сайта
4 - Кодинг, Программирование
5 - Тестирование и доработка
6 - Продвижение, реклама
7 - Дальнейшая поддержка и обновление

Первые пять этапов относятся непосредственно к созданию сайта, то чем я и займусь.

4.2 Идея

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

Итак, я для себя решил:

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

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

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

4.3 Разработка структуры

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

Структуру сайта можно условно разделить на внешнюю и внутреннюю.

Давайте для начала поговорим о внутренней структуре сайта. Она зависит от того, какую информацию вы будете размещать, какие у вас есть материалы. Вам предстоит решить, какие у вас будут на сайте разделы, подразделы - вам предстоит продумать древо сайта.

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

     | - Главная страница (логтип, название фирмы)

     | - О нас (рассказ о себе)

     | - Портфолио (лучшые работы фирмы)

     | - Услуги ( что умеет фирма)

     | - Контакты ( адрес, icq, e-mail)

     | - Новости (что нового)

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

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

Примерно такую схему расположения основных значимых элементов мне пришлось нарисовать для себя.

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

4.4 Оформление сайта

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

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

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

Я не верю людям, которые уверяют, что дизайн – это дело вкуса: что хочу, то и ворочу. Это не правда. Дизайн – это целая наука. Чтобы овладеть ей, мне пришлось ознакомиться с такими понятиями, как колористка (теория цвета), композиция, шрифт, и многими другими. Многое в жизни подчинено давно выработанным законам и правилам, дизайн - не исключение.

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

Сейчас вы увидете что у меня получилсь создать используя графический редактор Photoshop и немного фантазии :

Вот такой простенький дизайн я решил нарисовать дял веб-студии.

4.5 Кодинг и программирование

Вот я придумал зачем мне сайт. Решили, что и где будет располагаться на нем. Нарисовали в графическом редакторе, как ваш сайт будет выглядеть. Все это хорошо, но впереди меня ждет еще много работы. Я имею на руках оболочку (макет внешнего вида сайта) и план действий (структуру). Вот вы задумывались, что стоит за оболочкой? А за оболочкой стоит каркас, на котором эта оболочка держится. Кликните правой кнопкой мыши по странице, в выпавшем меню выберите пункт - view source (или "просмотр HTML кода") – появится текстовой редактор с непонятными, возможно, вам символами и значками – это и есть код страницы, ее каркас, то что мне и предстоить сделать.

Этот код отвечает за то, что мы видим в определенной последовательности на странице текст и картинки. Как правило, код этот пишется на языке разметки текстовых документов HTML.

HTML и CSS отвечают только за разметку внешнего вида документа (страницы), а для того, чтобы реализовать более сложные вещи, например, вроде гостевой книги, или поиска по сайту, или форума, нужны уже другие средства. Нужно знать языки программирования для веб – PERL, PHP, ASP или другие. В своем сайте при помощи языка веб-программирования PHP, я напишу скрипт фотогалереии + админку к нему, чтобы человек не знаю язиков веб-программирования мог без затруднейний добавить свою работы в портфолио.

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

Итак, HTML и CSS - это каркас на котором все держится, программы-скрипты (на PERL, PHP, ASP) - это механизм, расположенный внутри этого каркаса.

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

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

4.6 Тестирование и доработка

Ура сайт готов, теперь выкладываем его в сеть (интернет). Для этого я регистрирую для сайта доменное имя (адрес), и хостинг (место для страницы).

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

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

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

Заключение

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

Итак, поняв принцип построения Web-страницы, изучив возможности соединения в ней различных видов информации, мы можем смело сказать, что Web-страницы, с их потенциалом могут применятся   для различных целей.

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

Человек, создающий  Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить – вот что отличает настоящего  Web-дизайнера. Для того чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.

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

Список используемой литературы

6.               Kevin Werbach. Перевод: Станислав Малишев. - Краткое пособие 

         по HTML, Москва 1998.

Список сайтов информация с которых была использована при написании курсовой работы:

www.webschool.narod.ru

www.pronet.ru

www.lib.toxy.cv.ua

www.education.kulichki.net

www.gor.h1.ru

www.infocity.kiev.ua