Социальный сайт взаимопомощи с функцией форума

Размещено на http://www.allbest.ru/

Министерство образования и науки РФ

ФГБОУ ВПО «Сибирский государственный индустриальный университет»

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

к выпускной квалификационной работе:

Социальный сайт взаимопомощи с функцией форума

Новокузнецк 2012 г.

Содержание

Введение

1. Основная часть

1.1 С чего начинается Web-дизайн?

1.2 Модульная сетка

1.3 Выбор типа сайта

1.4 Позиционирование проекта и сегментация целевой аудитории

1.5 Краткое описание типов навигации

1.6 CMS - выбрать или разработать?

1.7 Кто управляет сайтом

1.8 Дизайнер и оптимизация сайтов

2. Разработка сайта с функцией форума и обратной связью

2.1 Постановка задачи

2.2 Программно-технические средства

2.3 Блочная верстка сайта

2.4 База данных

2.5 Верстка страниц

Заключение

Литература

Введение

Интернет - это Всемирная (Глобальная) Паутина. Это не поэтическая метафора, а расшифровка символов WWW - World Wide Web.

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

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

Произнося сегодня слово «Интернет» большинство не думает о технической стороне дела. Что может дать Интернет человеку? Что такое Интернет в человеческом сознании?

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

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

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

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

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

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

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

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

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

Цель: разработать на основе современных технологий веб-сайт с функцией форума, обратной связью и доской объявлений

Задачи:

1.проанализировать информацию по видам веб-сайтов и способах их создания;

2.систематизировать данные по разработке веб-сайтов и их продвижению в сети Интернет;

3.разработать веб-сайт с функцией форума, обратной связи и доской объявлений.

Метод исследования: изучение документов, литературы, экспериментальная работа.

сегментация сайт модульный верстка

1. Основная часть

1.1 С чего начинается Web-дизайн?

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

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

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

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

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

В зависимости от содержания сайты м.б. презентационные, корпоративные, информационные, интернет-магазины. От типа сайта зависит особенность разработки дизайна страниц.

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

После определения типа будущего проекта нужно проанализировать содержание (его объемы). Информация должна быть структурирована до того как будет нарисован дизайн. Должны быть сформирована информационная структура - разделы, подразделы а так же возможные дополнительные разделы. Должна быть определена важность документов, степень сложности переходов.

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

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

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

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

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

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

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

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

Самый типичный вариант:

Название сайта (название организации),

Логотип, графический знак - уникальный классификатор проекта или организации,

Навигационное меню (как правило один блок, но м.б. несколько в проекте),

Содержание страницы, данные,

Графический баннер, информация о спонсорах (второстепенные данные).

Имеет смысл уделить время для просмотра уже готовых вариантов в интернете, опыт и наблюдения особенно для новичков м.б. просто необходим.

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

1.2 Модульная сетка

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

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

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

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

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

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

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

1.3 Выбор типа сайта

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

Сайт-презентация.

Сайт представляет информацию о компании, услуге, продукте (что ясно видно из названия). Подобный сайт, как правило, имеет некоторое определенное количество страниц, частота обновления подобного сайта реже чем один раз в несколько месяцев. Главная задача подобного сайта - быстро и эффективно донести суть услуги и информации о компании. Дизайн зачастую яркий, множество графического оформления (и преобладание его над текстовой информацией), часто используется flash-анимация (или он полностью выполнен во flash). Модульная сетка, как правило, одноколоночная.

Корпоративный сайт.

Сайт представительство организации/фирмы/корпорации. К оформлению подобных сайтов, и информации в нем (а так же к балансу графики и текста), предъявляются высокие требования. Модульная сетка, обычно, 2-3х колоночная. Сайт должен соответствовать фирменному стилю и в структуре информации и в цветовой гамме.

Информационные ресурсы (Электронные библиотеки, газеты).

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

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

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

Электронный магазин.

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

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

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

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

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

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

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

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

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

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

1.4 Позиционирование проекта и сегментация целевой аудитории

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

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

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

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

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

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

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

Нужно сформировать древовидную структуру и в последствии использовать документ для формирования карты сайта.

После того как собрана информация - для чего, для кого. Как и что Вы собираетесь разрабатывать - настало время подумать об использовании (либо не использовании CMS - Системы Управления Содержанием. Возможно/невозможно существовать и развиваться проекту без CMS?

Некоторые CMS могут оказаться недостаточно гибкими и ограничить дизайнера и в выборе модульной сетки и в размещении (оформлении) блоков навигации и информации.

1.5 Краткое описание типов навигации

Навигационное меню - это простой список, ряд кнопок, меню - выпадающие и/или всплывающие.

Хлебные крошки - это сквозной маршрут по иерархической структуре сайта.

Карта сайта - развернутая иерархическая структура.

Текстовая навигация - перемещение по документам в проекте и по всей сети в произвольном порядке.

Каталог - структура предоставления данных (удобна для электронных магазинов, каталогов сайтов по рубрикам).

Пейджинг - перемещение по страницам (для многостраничных галерей, длинных списков ссылок).

Методы реализации каждого типа - текстовое решение, графическое (иконки, графические картинки с текстом), флешевое, комбинированное.

1.6 CMS - выбрать или разработать?

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

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

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

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

С некоторых пор у заказчиков web-сайтов пользуются популярностью CMS. Нужно выяснить у заказчика, что он хочет от движка. В некоторых случаях требуются несложные скрипты, которые позволят разбить сайт на шаблоны и автоматически добавлять новости (текст) для пары рубрик. И для этого не нужна CMS. Но для более сложного сайта вопрос серьезный - готовое решение либо писать самостоятельно? Если позволяют бюджет и сроки - то возможно написать и свой проект. Но вполне возможно для этого потребуется команда (программисты, дизайнеры) и высока вероятность что кем либо, либо в выборе разработчиков будет допущена ошибка.

Азы сетевых технологий (php, asp, xml) способен освоен студент, начинающий программист. Но для освоения тонкостей и особенностей этих технологий возможно только имея большую практику.

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

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

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

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

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

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

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

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

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

Оценка оптимальности движка всегда будет субъективной.

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

Тут м.б. два подхода распределения:

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

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

Требования собрать и перечислить не так легко. Здесь тоже требуется опыт (и желательно не по одному движку и заказчику).

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

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

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

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

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

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

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

1.7 Кто управляет сайтом

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

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

У администратора сайта (группы администраторов) - полный доступ.

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

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

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

1.8 Дизайнер и оптимизация сайтов

Имеют ли вопросы оптимизации и продвижения сайтя в поисковых системах отношение к разработчикам Web-сайтов?

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

Что требуется для первых шагов в продвижении сайта? Ключевые слова в Title, Keywords (важно для Яндекса), Description, заголовки H1, H2, H..., alt-атрибуты к картинкам, ссылки, выделенные (тегами em и strong), регистрация сайта в необходимых поисковиках, в каталогах - для SEO этого недостаточно.

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

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

Некоторые моменты оптимизации сайта, которые касаются WEB-разработчика от этапа анализа и проектирования до отладки и поддержки:

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

2. Навигация, которая реализована с помощью flash-технологий или java-скриптов усложнит оптимизацию сайта для поисковиков. Сложно найти оптимальное соответствие между эффектами в оформлении меню и функциональностью - между дизайном и оптимизацией.

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

4. Для создания необходимого количества ключевых слов на странице использовать любые элементы сайта. При редизайне - если будет меняться доменное имя сайта - следует учесть анализ семантической базы проекта. Возможно использование и реального и доменного имени сайта в логотипе, дать картинке название, использовать теги заголовков, выделить текст ссылок (например, в теге <strong>.

5. Быть в курсе новинок и рекомендаций от наиболее популярных поисковиков. Отслеживать методы работы и сервисы. Анализировать алгоритмы ранжирования. Пользоваться программами (пакетами программ) для Web-оптимизации.

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

2. Разработка сайта с функцией форума и обратной связью

2.1 Постановка задачи

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

В процессе выполнения данного проекта возникла необходимость добавления на данный сайт компонента «Доска объявлений» для бескорыстной помощи.

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

2.2 Программно-технические средства

Для решения поставленной задачи использовались следующие средства:

Компьютер с ОС Windows 7, с выходом в интернет, на который были установлены

*Сервер Apache 2.2

*Dreamweaver CS5

*MySQL 5.1.49

*Joomla 1.5.

*PHP 5.2.7

* phpBB3

• EasyCaptcha

• JoomlaStats

* PollXT

* Marketplace 2.2

*Графические редакторы Photoshop и CorelDRAW

*Все эти и другие средства использовались в той или иной мере.

2.3 Блочная верстка сайта

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

Для начала, создадим базовую структуру HTML-страницы:

<div id="wrap">

<div id="header"></div>

<div id="nav"></div>

<div id="main"></div>

<div id="sidebar"></div>

<div id="footer"></div>

</div>

После этого наполним секции некоторым содержимым для наглядности.

<div id="wrap">

<div id="header"><h1>Заголовок страницы</h1></div>

<div id="nav">

<ul>

<li><a href="#">Раздел 1</a></li>

<li><a href="#">Раздел 2</a></li>

</ul>

</div>

<div id="main">

<h2>Колонка 1</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

</div>

<div id="sidebar">

<h3>Колонка 2</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

<ul>

<li><a href="#">Ссылка 1</a></li>

<li><a href="#">Ссылка 2</a></li>

</ul>

</div>

<div id="footer">

<p>Подвал</p>

</div>

</div>

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

Параметры тегов <body> и <html>

body, html {margin:0;padding:0;

background:#a7a09a;

color:#000;}

Расположение основного контейнера

Теперь нужно расположить всё содержимое страницы в центре и задать ему ширину. Для этого у нас есть контейнер #wrap. Тут же зададим ему цвет фона.

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

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

body,html {

margin:0;

padding:0;

background:#a7a09a;

color:#000;

}

body {

min-width:750px;

}

#wrap {

background:#99c;

margin:0 auto;

width:750px;

}

Чтобы две колонки (#main и #sidebar) отображались рядом, определим для них фиксированную ширину.

#main {

background:#9c9;

float:left;

width:500px;}

#sidebar {

background:#99c;

float:right;

width:250px;

}

Расположение подвала

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

#footer {

background:#cc9;

clear:both;

}

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

В нашем случае рабочее пространство экрана разбивается на 5 частей:

Верхняя часть - «шапка сайта». В этой части находится логотип компании, название сайта - header.

Вторая часть навигационное меню - top menu.

В центре рабочего пространства экрана - блок вывода основной информации. В этой части находится основной текст - content.

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

Нижняя часть сайта, содержит информацию о правах на интеллектуальную собственность - footer.

Организационное обеспечение, представлено в виде соответствующей схемы.

header
top menu
left menu	content
Footer

Рисунок - 1 Схема главной страницы.

2.4 База данных

В качестве базы данных выбрана самая популярная в интернет-дизайне MySQL из-за её бесплатности и мобильности. После установки пакета программ Denwer и запуска web-сервера, необходимо в адресной строке интернет - браузера ввести следующий адрес: «http://localhost/». На экран будет выведена информация о web-сервере и список необходимых для работы ссылок. Данный список представлен на рисунке 2. Для проектирования базы данных необходимо запустить web - интерфейс phpMyAdmin, («http://localhost/phpmyadmin») .

Рисунок 2 - Список необходимых для работы с web-сервером ссылок

Страница создания базы данных представлено на рисунке 3. Для создания новой базы данных указываем имя базы и нажимаем кнопку «создать». После создания базы данных необходимо создать таблицу. Страница создания таблицы (первый шаг) представлено на рисунке 4. В поле «имя» указывается имя таблицы, в поле «поля» указывается количество полей таблицы. Далее нужно указать имя каждого поля и тип, так же необходимо указать первичный ключ. Страница создания таблицы (второй шаг) представлено на рисунке 5. Сама структура базы данных сайта показана на рисунке 6.

Рисунок 3 - Страница создания базы данных

Рисунок 4 - Страница создания таблицы (первый шаг)

Рисунок 5 - Страница создания таблицы (второй шаг)

Рисунок 6 - Структура базы данных сайта

2.5 Верстка страниц

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

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

Регистрация новых пользователей происходит на форуме.

Общий вид сайта представлен на нижеследующих рисунках.

Рисунок 7 - Главная страница сайта

Рисунок 8 - Вид страницы при первоначальном входе на форум

Раздел «Свяжитесь с нами»

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



Рисунок 9 - Вид страницы с регистрационной формой

Рисунок 10- Раздел «Полезные ссылки»

Рисунок 11 - Статьи



Рисунок 12 - Объявления

Заключение

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

В специальной части ВКР рассмотрена практическая сторона построения социального сайта взаимопомощи, на практике решены поставленные задачи.

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

Для этого было установлено необходимое программное обеспечение, разработана структура сайта, были созданы эскиз страниц и база данных, и была произведена верстка страниц. В результате проделанной работы создан сайт «Добрые люди», со следующими функциями: форумом, обратной связью, доской объявлений.

Список используемых источников

1. Apache - это web-сервер, один из наиболее распространенных, безопасных и удобных во всем мире.

2. PHP - это широко используемый язык программирования с открытым исходным кодом.

3. MySQL - это самый популярный вид управления базой данных, который часто используется в комбинации с PHP.

4. phpMyAdmin - вэб интерфейс для администирования баз данных MySQL.

5. Этапы построения сайтов.

Размещено на Allbest.ru