Разработка Web-сайта образовательного учреждения на примере МОУ СОШ с. Политово

 

На этапе постановки задачи разработчик  сайта решает следующие вопросы:

целевая аудитория, на которую рассчитывается создание данного проекта;

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

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

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

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

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

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

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

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

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

Функциональность сайта важный элемент, от которого зависит понравится ли посетителю система управления сайтом. Если Вы сделаете слишком сложную систему управления, тем меньшее количество посетителей захочет вернуться на ваш сайт. В данной ситуации работает правило: «Будьте проще и люди к Вам потянуться!»

Что касается дизайна сайта, то здесь  не существует каких-либо жестких правил. Дизайн сайта во многом зависит от целевого назначения сайта. Например, корпоративный сайт должен отображать фирменный стиль компании. Таким образом, дизайн корпоративного сайта будет выполнен в корпоративных цветах компании. Возьмем, простой пример. Банк имеет логотип, выполненный из нескольких элементов бардового и золотого цвета. Т.е. будет логичным использование в дизайне сайта именно этих цветов. Кроме того, дизайнеры не рекомендуют использовать в дизайне сайта более 2-3 цветов. Практика показывает, что во многом успех некоторых сайтов совершенно не зависит от их дизайна. Здесь простым примером может служить поисковая система Яндекс, которая пользуется огромной популярностью, несмотря на достаточно простой дизайн.

 

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

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

 

Обоснование выбора и описание программного средства в разработке Web-сайта.

Для  разработки web-страниц  сайта  можно  использовать  следующие  инструментальные средства.

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

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

 

3)  Специализированные  программные  средства -  web-редакторы, предназначенные  специально  для  разработки web-сайтов.  Современные  требования, предъявляемые к web-редакторам, включают в себя: 

−  Поддержку  каскадных таблиц стилей. 

−  Использование  современных скриптовых языков, таких  как JavaScript и т.д. 

−  Генерацию Dynamic HTML для различных браузеров. 

−  Средства наглядного дизайна: вставка изображений, таблиц и фреймов. 

−  Динамическое отображение создаваемой страницы в браузере. 

−  Шаблоны WWW-страниц или специальные программы  - "мастера" по их созданию. 

−  Средства  по  управлению web-сайтом (создание  файловой  структуры  сайта,

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

Разработчик сайта должен использовать разумное сочетание всех методов создания HTML-документов. При использовании этих методов следует учесть следующее:

создание различных эффектов в  простом текстовом редакторе - громоздкая и сложная задача;

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

текстовые редакторы можно использовать для очистки от "мусора" HTML-документов, созданных с помощью специализированных программ;

при создании эффектов с помощью  специальных программ (например, Microsoft FrontPage) следует предусмотреть поддержку этих эффектов на web-сервере.

 

Одним из лидеров в области разработки программного обеспечения для подготовки web-публикаций является компания Macromedia. Очень популярны пакеты Macromedia: Dreamweaver, HomeSite (до версии 5 этот пакет выходил под названием Allaire HomeSite), а также специализированные пакеты для создания компьютерной графики и анимации.

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

Разработка структуры Web-сайта.

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

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

Структурность – многоплановое  понятие, которое применяется как  к информации (контенту), так и  к визуальным элементам.

 

Структура информационная.

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

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

Index (Главная страница – т.е.  та которая загружается при  наборе доменного имени сайта в строке браузера. В подавляющем большинстве сайтов, главная страница содержит колонку News)

About (О нас, О компании, ect.)

News (Новости - периодически дополняемая  информация)

Products (Наши услуги, Наши продукты, Наши туры)

Price (Цены, прайс-лист)

Support (Техническая и/или сервисная поддержка, горячая линия и/или e-mail связь)

Search (Поиск – модуль поиска  по введенному слову)

 

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

Выбор компоновки Web-сайта.

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

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

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

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

В сайте проекта структура проста, вверху ссылки и название, внутри основная инфо, ниже контакты, кнопки навигации  и т.п.

Разработка контента и оформление Web-сайта.

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

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

 

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

 

К основным этапам наполнения относятся:

1. Подготовка текстовой информации (копирайт).

2. Обработка текстовой информации (проверка орфографии, синтаксиса и пунктуации).

3. Обработка графической информации (подготовка изображений).

4. Пополнение сайта подготовленными  текстами и фотографиями.

Структура и компоненты HTML-документа.

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

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

HTML-код (или HTML-документ) состоит  из нескольких разделов. Все элементы  страницы описываются специальными  командами — тегами. Поэтому и структура документа определяется какой-либо командой.

Прежде всего, надо определить, как  выглядит команда HTML. Это какой-либо набор символов, заключенный в угловые скобки. Например: <HTML>, <BODY>. Регистр символов не имеет значения (большие и маленькие буквы не различаются). Теги делятся на парные (блоковые) и непарные. Блоковый тег может содержать в себе некоторый фрагмент документа, влияя на его отображение. Для такого тега в большинстве случаев требуется парный тег, указывающий конец зоны влияния. Такие теги записываются так же, как и теги, открывающие описание, но с добавлением символа "/" Например:

<Р> Фрагмент текста страницы. В данном случае - текст абзаца.

<

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

 

<IMG SRC="images/pl.jpg" WIDTH=120 HEIGHT=110>