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

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

Решетчатая структура

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

Файловая и гипертекстовая структуры

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

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

---

Каталог 1 (Раздел 1)

Подкаталог 1.1 (подраздел 1.1).

Подкаталог 1.1.1 (подраздел 1.1.1).

Подкаталог 1.1.2 (подраздел 1.1.2).

Подкаталог 1.2 (подраздел 1.2).

Подкаталог 1.3 (подраздел 1.3).

Каталог 2 (Раздел 2)

Подкаталог 2.1 (подраздел 2.1).

Подкаталог 2.2 (подраздел 2.2).

Подкаталог 2.3 (подраздел 2.3).

.....

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

Карта сайта

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

Существуют два типа карт сайта:

• файлы Sitemaps.xml (в формате XML), известные также как Google sitemaps, и предназначенные для использования роботами поисковых систем;

• карты сайта в формате HTML,представляющие собой упорядоченный список ссылок на все страницы сайта,

предназначенный для обычных пользователей-людей.

Первый тип, файлы Sitemaps.xml служат для поисковой оптимизации (поисковые системы, в частности Google и Яндекс, используют их для индексации страниц сайта).

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

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

---

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

Элементы структуры страницы, для которых требуется заранее спланировать выделение места. Это:

• HEADER ("шапка" сайта) - блок (часто графический), повторяющийся на каждой странице. Включает (или может включать) в себя:

---

Веб-разработка — процесс создания веб-сайта или веб-приложения.

Этапы разработки веб-сайта

На сегодняшний день существуют несколько этапов разработки веб-сайта:

• Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания, проектирование интерфейсов);

• Разработка креативной концепции сайта;

• Создание дизайн-концепции сайта;

• Создание макетов страниц;

• Создание мультимедиа и FLASH-элементов;

• Вёрстка страниц и шаблонов;

• Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS);

• Оптимизация и размещение[материалов сайта;

• Тестирование и внесение корректировок;

• Открытие проекта на публичной площадке;

• Обслуживание работающего сайта или его программной основы.

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

Создание технического задания

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

Дизайн основной и типовых страниц сайта

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

---

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

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

HTML-верстка

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

Программирование

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».

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

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

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

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

Размещение сайта в Интернет

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

Наполнение контентом и публикация

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

Внутренняя SEO-оптимизация

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

---

Смотрите также файлы

• Техническое задание.doc

• Техническое задание_пример.doc

• Art-direction.pdf

• Введение в профессию. Основные понятия веб-разработки - занятие 1.pdf

• КЛАССЫ, ИДЕНТИФИКАТОРЫ, СЕЛЕКТОРЫ - занятие 2.pdf.pdf