Создание Веб-сайта. Этапы проектирования

• 1 слайд

  Этапы проектирования сайта
  Преподаватель Закревская Е.М.
  

• 2 слайд

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

• 3 слайд

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

• 4 слайд

  Файловая структура сайта
  Если сайт состоит из нескольких страниц, то не имеет смысла тщательно продумывать, как называть и размещать файлы на сайте. Чем больше сайт, тем сложнее управлять расположенной на нем информацией. Бывает так, что уже никто не помнит, что находится на страничке с названием page54a.htm и где находятся иллюстрации к прошлогодней презентации. Можно избежать подобной ситуации, если сделать ряд подготовительных шагов. Самый простой способ разделения файлов — разделение по выполняемым функциям. В простом статическом сайте можно выделить несколько групп файлов:
  странички сайта, файлы с расширением HTML;
  таблицы стилей, файлы с расширением CSS;
  клиентские скрипты, обычно написанные на JavaScript, файлы с расширением JS;
  графические файлы, используемые в дизайне сайта, файлы с расширением JPG, GIF, PNG, SWF;
  файлы для скачивания посетителями, файлы с расширением ZIP, RAR, МРЗ, PDF< DOC и т. п.
  
  

• 5 слайд

  Не стоит все файлы размещать в одном каталоге. Лучше сделать для каждой группы файлов свой каталог, тогда сразу станет ясно, где и что лежит. Ниже приведен один из возможных примеров файловой структуры сайта.
  / — корневой каталог сайта, в котором находится запускаемый файл сайта index.html
  /img/ — иллюстрирующая графика
  /css/ — таблицы стилей
  /js/ — функции и программы на JavaScript
  /download/ — файлы, предназначенные для скачивания
  Для динамических сайтов обычно добавляются также следующие каталоги:
  /admin/ — административные скрипты /includes/ — разнообразные включаемые файлы
  /data/ — файлы данных, например отзывы в гостевой книге или поисковый индекс
  /templates/ — шаблоны с дизайном сайта
  

• 6 слайд

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

• 7 слайд

  Имена файлов
  Логично и понятно названный файл позволит сэкономить время при обновлении сайта. Кроме того, при передаче поддержки сайта другому человеку будет гораздо легче объяснить, что и где находится. Не рекомендуется называть файлы безликими именами (pagel.htm, 123.htm и т. п.). Необходимо, чтобы при взгляде на список файлов сразу было понятно, что в них находится. Другими словами, называть файлы следует, исходя из смысла странички. Если страничка содержит общую информацию о компании, то ее можно назвать, к примеру, about.html, а страничку с контактной информацией — contacts.html.В некоторых случаях для группы файлов могут использоваться похожие имена, состоящие из базового имени и цифры. Например, article__l.htm, article_2.htm, article_3.htm и т. д. Заметьте, что в качестве разделителя базового имени и цифры используется знак подчеркивания (пробелы в именах файлов запрещены).
  

• 8 слайд

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

• 9 слайд

  Люди не читают web-страницы, а просматривают. Вместо подробного чтения текста посетители бегло его просматривают, задерживаясь на словах и выражениях, которые привлекают их внимание, важны для них. Поэтому важно грамотно оформить текст и заголовки, чтобы максимально быстро донести основную мысль статьи до посетителя сайта, заинтересовать его.
  Пользователи избегают медленно загружающих сайтов. В большинстве случаев посетители не дожидаются полной загрузки медленных сайтом и уходят, так как есть возможность найти другой, :<быстрый», сайт с той же направленностью. Сайт может загружаться медленно по разным причинам: страницы перегружены графикой или Flash-содержимым, он расположен на web-сервере c узкой пропускной способностью, возникли проблемы на линии связи. Web-дизайнер может решить только первую проблему — делать дизайн сайта более легким, свести графическое оформление к минимуму.
  

• 10 слайд

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

• 11 слайд

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

• 12 слайд

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

• 13 слайд

  Концептуальное проектирование
  Порой бывает сложно 0ценить эффективность сайта. Действительно, какими критериями воспользоваться, чтобы понять, что сайт, над которым столько работали, действительно хорош? Разумеется, можно использовать количество посетителей как некоторое мерило. Но этот показатель относителен и зависит от множества внешних параметров. То же самое обстоит и с другими способами оценки сайта.
  Однако универсальным критерием эффективности сайта является достижение разработчиками сайта поставленных перед ними целей. В этом случае сайт превращается в действенный инструмент, который выполняет возложенные на него функции.
  
  

• 14 слайд

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

• 15 слайд

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

• 16 слайд

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

• 17 слайд

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