Разработка веб-сайта

Разработка веб-сайта

Подготовительный этап

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

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

Сайт должен обеспечивать:

доступность информации удобство навигации осмысленность оформления быстроту загрузки

При разработке сайта образовательного содержания, необходимо обратить внимание на следующие моменты:

Структура сайта и навигация. Навигация должна быть не сложной, навигационная панель располагается на каждой странице сайта для удобства перемещения по разделам. Основных разделов не должно быть много. Если раздел имеет подменю, то оно также должно быть отображено на каждой странице раздела. Внешние ссылки должны открываться в отдельном окне, для того, чтобы посетитель сайта не «ушел» с рассматриваемого информационного ресурса. Хорошо, если есть карта сайта, с аннотацией к разделам. Адресная направленность. Школьные сайты обычно рекомендуются учителям, родителям и детям – это должно быть отмечено. Интерактивные элементы – гостевая книга, форум, где посетители сайта могли бы общаться между собой, выразить свое мнение, задать вопросы. Что касается гостевых книг, то только активно обновляемый и популярный сайт пользуется авторитетом и поддержкой пользователей. Если не обеспечено развитие сайта, бессмысленно заводить гостевые книги и прочие интерактивные формы общения. Результат будет отрицательным, т. е. в гостевой книге будут накапливаться различные критические замечания, вовсе не придающие значимости информационному ресурсу. Содержание сайта и оформление. Избыток текста на странице считается большим минусом. Лучше разбить большой текст на фрагменты или же разметить его гиперссылками (выделенными в тексте словами, позволяющими перейти на другие страницы). Также плохо смотрятся (да и загружаются) страницы, переполненные графикой. Но и полное отсутствие ее также не допускается. Лучше всего создавать небольшие страницы с маленькими картинками для предварительного просмотра, с которых идет гиперссылка на увеличенное изображение. Причем обязательно должны быть отступы от картинок и фотографий до текста и альтернативные подписи для каждого графического изображения. Проверить наличие такой подписи легко – если навести курсор мыши на изображение. Если альтернативная подпись есть, то вы увидите бледно-желтую рамку с текстом. Выходные данные и контактная информация. Это очень важный момент, на который необходимо обратить внимание. Когда Вы берете в руки книгу, то сразу видите выходные данные. В Интернете же практически отсутствует какая-то ни было цензура, сайт может быть направлен на достижение определенных, и не всегда положительных целей. Зачастую в Сети встречаются сайты, не имеющие никаких сведений об авторах. Да и адрес часто написан не правильно. Что Вы подумаете, прочитав на сайте следующее: «Наша школа находиться на ул. Иванова, д. 10. Приглашаем!»? В каком городе, где телефон, адрес электронной почты? Все это надо обязательно не забывать отражать на сайте.

Технологический этап

Прежде чем приступать к созданию сайта, необходимо разработать его концепцию, в которую будут входить:

Цели и задачи

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

Затем надо точно расписать основные задачи, которые Ваш сайт будет решать.

Программное обеспечение

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

MS FrontPage или Macromedia Dreamweaver

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

Adobe Photoshop (обработка изображений: изменение размера, коррекция качества; создание элементов дизайна – кнопок, заголовков; оптимизация растровых изображений, сканирование и т. д.) Adobe ImageReady (создание анимированных gif и flash-роликов, интерактивной навигации, возможность оптимизации изображения). Macromedia Flash (создание анимации, с возможностью импорта звука и видео. На воспроизведение Flash-анимации требуется меньшее время (при более высоком качестве), чем на воспроизведение растровой GIF-анимации. Для вставки Flash-фильма в веб-страницу генерируется специальный html-код, а сам фильм оптимизируется).

Программа для просмотра графики

ACDSee Browser

Программы для переноса сайта на сервер (для публикации в Интернете)

Global SCAPE Cute FTP или Far Manager или Windows Commander

Для настройки последних трех программ требуется получить от хостинг-провайдера (что это такое, см. ниже) FTP Host Address, имя пользователя и пароль для доступа на FTP-сервер.

Логическая структура

Создание списка содержимого сайта

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

Тематические разделы

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

Подразделы

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

Создание карты сайта

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

Навигация

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

Система имен файлов

Прописывая названия разделов на бумаге, также хорошо сразу прописать будущие имена файлов. Запомните, что имена файлов пишутся маленькими латинскими буквами. В названии файлов можно использовать также цифры и простые знаки: минус «-», подчеркивание «_». При написании названий файлов следует ограничиться форматом имен в стиле DOS, то есть, 8 символов имени и 3 символа в расширении (htm для веб-страниц, jpg и gif для графики). Тем не менее, названия должны быть осмысленными. Например, разделу Образование может соответствовать файл obr. htm, разделу Искусство – isk. htm.

Разработка дизайна сайта

Макетирование на бумаге

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

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

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

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

Таблица 1. Табличный вариант размещения информации на странице.

логотип	название
Разделы: Главная Учителям Ученикам Родителям Контакты Карта сайта _______ © выходные данные	Основное содержание Разделы подменю: Подраздел 1 | Подраздел 2 | Подраздел 3

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

В таблице 2 Вы увидите примеры сайтов, сделанные с применением табличной структуры. Работы 2, 3 и 4 вы можете просмотреть на сайте Московского учебного центра ФИО в разделе «Избранные выпускные работы» http://center. *****/works. asp

Таблица 2. Примеры сайтов

1	2
3	4

3

Компоненты оформления

Реализуя возникшую у Вас идею (которую Вы зафиксировали в виде набросков) нужно рассмотреть по нескольким пунктам:

Композиция (компоновка— общий вид страницы).

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

Цветовая гамма

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

Шрифты

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

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

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

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

Таблица 3. Шрифты, которые можно использовать в Веб.

шрифт с засечками	шрифт без засечек
Times New Roman Georgia Bookman	Arial Verbana

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

Цвет шрифта. Обычно темный текст на светлом фоне читать легче, чем светлый текст на темном фоне. Шрифт приглушенного тона читать легче, чем фосфоресцирующий. Используйте яркие цвета только для заголовков и подзаголовков, а спокойные приглушенные тона – для основного текста. Учтите, цвета шрифтов не должны выбиваться из основной цветовой гамы вашего сайта!

Реализация композиции

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

Навигация и субнавигация

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

Стилевые таблицы

Это не обязательно, но очень удобно для создания единого стиля оформления. К тому же, технология Cascading Style Sheets (CSS) практически полностью поддерживается современными программами просмотра веб-страниц. Особенно удобно это в том случае, если Вы решили изменить дизайн или цветовую гамму сайта – Вам не надо будет изменять каждую страницу в отдельности, а всего лишь один css-файл.

Графика

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

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

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

Под редактированием изображения понимается:

·  Обрезка части изображения;

·  Регулировка контрастности и яркости;

·  Регулировка цветового баланса;

·  Изменение размера изображения;

·  Регулировка объема изображения.

Основная задачи при создании графических элементов для веб-сайта состоит в максимизации качества графики при минимизации размера файла – взаимоисключающие параметры. Чем выше качество изображения и, тем больше размер файла и больше время загрузки. В программе Adobe Photoshop есть возможность достичь компромисса между качеством изображения и его объемом, путем настройки параметров оптимизации в диалоговом окне специальной функции Save for Web (Сохранить для Веб).

Форматы файлов графических объектов

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

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

Сборка сайта

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

Наполнение сайта информацией

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

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

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

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

Сейчас существует большое количество серверов в Интернете, предлагающих разместить сайт бесплатно, например Народ. ру (http://www. *****) , Boom (http://www. *****), http://www. schools. ***** и т. д.

Так же можно разместить сайт на платном сервере у хостиг-провайдеров, таких как http://www. *****, http://***** и др.

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

Короткое доменное имя сайта, например www. ***** можно зарегистрировать в Региональном Сетевом информационном Центре (RU-CENTER) (http://www. *****/) или же у любого другого действующего регистратора (http://www. *****/ru/regdom/reglist. shtml)

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

Реклама сайта

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