Разработка веб-cайта для школы

Все же обеспечение связи не является основной функцией персонального сервера. Он разработан как инструмент исследования ваших документов Web после их создания. Сразу вслед за созданием нескольких страниц вам захочется их посмотреть с помощью вашей программы просмотра (Netscape, Internet Explorer, Mosaic, Opera и т. д.). Все, что нужно сделать для этого, -- просто запустить персональный сервер Web, установить его в локальный режим, затем загрузить программу просмотра (браузер) и убедиться, что все работа¬ет. Пока компьютер подключен к Internet, можете проверить внутренние и внешние связи и убедиться, что страницы Web выглядят точно так, как вы хотели.

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

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

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

Использование FrontPage Editor для создания страниц. Если проводник FrontPage выполняет функции организатора строящегося документа Web, то редактор FrontPage является той программой, при работе с которой вы тратите большую часть творческой энергии. Это полноценный редактор страниц Web с большим количеством дополнительных возможностей сверх стандарта HTML 2.0. Он предоставляет совершенную среду WYSIWYG -- редкое свойство для современных редакторов HTML. С помощью редактора можно переходить по связям от одной страницы к другой даже в процессе редактирования, что на практике превращает FrontPage Editor в мини-браузер, поэтому вы можете открыть в редакторе страницы World Wide Web для изучения кодов HTML.

Редактор FrontPage во многом напоминает текстовый процессор. Можно одновременно открыть несколько страниц и переключаться между ними, можно вырезать, копировать и вставлять фрагменты страниц, выполнять проверку орфографии, задавать размер и внешний вид символов. Он поддерживает работу с таблицами аналогично Word и WordPerfect, но варианты форматирования таблиц здесь несколько сужены из-за ограничений, обусловленных языком HTML. Включение графических объектов осуществляется так же, как в текстовом процессоре. Связывание -- всего лишь дополнительная строка в меню Edit (Правка). Для первого знакомства с редактором FrontPage начните с команды проводника Tools, Show FrontPage Editor (Сервис, Показать редактор). Почти сразу появляется окно редактора.

Теперь поместите в рабочую зону редактора исходную страницу нового документа Web, чтобы иметь возможность ее просматривать. Для этого выберите команду File, Open from Web (Файл, Открыть из Web); появляется диалоговое окно Current Web (Текущий Web) с единственным именем в списке страниц Web: Normal Page. Это ваша новая исходная страница.

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

1.5 Обзор и сравнительный анализ HTML-редакторов

Macromedia Flash. Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad). Текстовые редакторы, возможно, использовать только для создания небольших страниц, так как у них есть много минусов (не поддерживаются проекты, отсутствует «подсветка» текста, в общем, работать с ними может только профессионал, знающий язык HTML).

Рассмотрим визуальный HTML-редактор DreamWeaver. Этот программный продукт рассчитан на тех, кто плохо, или почти не знает язык HTML, хотя в нем можно создавать сайты, даже не обладая данными знаниями. DreamWeaver содержит все, что необходимо как для визуальной компоновки web-страниц, так и для работы с HTML-кодом. Интерфейс DreamWeaver настолько прост, что даже начинающий дизайнер сможет быстро создать профессиональный Web-сайт. Непосредственно в DreamWeaver можно создавать анимации в формате Macromedia Flash, использовать данные из Microsoft Office, легко импортировать rollover-графику, меню и кнопки из Fireworks. Компания Macromedia считается лидером по производству программ для создания wеb-сайтов, а также законодателем моды в этой области. В последнее время она начала выпускать версию за версией данного продукта, тем самым все, более совершенствуя его. DreamWeaver-3,-4,-6 и это еще не предел. Причем в каждой новой версии добавляется всё больше и больше функциональных возможностей, не по одной и не по две, а чуть ли не десятками.

Одна из последних версий HTML-редактора компании Macromedia-DreamWeaver 9, который относится к категории WYSIWYG-редакторов (то есть What You See Is What You Get), и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и упрощается преимущество технологии WYSIWYG - что вижу, то и получаю).

Macromedia DreamWeaver - профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Нравится ли вам вручную писать код HTML или вы предпочитаете работать в визуальной среде, DreamWeaver облегчает эту работу и обеспечивает полезными инструментами и средствами, чтобы сделать свои собственные проекты непревзойденными. DreamWeaver включает в себя много инструментов и средств, для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать различные текстовые документы, которые поддерживаются в DreamWeaver. Также вы можете настроить DreamWeaver, чтобы он наводил порядок и переформатировал HTML, как вы этого хотите.

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

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

Компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов-техник Web-дизайна. Существуют plug-in'ы (подключаемые модули), которые встраиваются в браузер, и служат для просмотра Flash страниц. Называются они Flash Player. Причем в последних версиях Netscape Navigator и Internet Explorer эти модули уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются.

В пользу Flash приведу его основные достоинства и статистку использования Macromedia профессиональными разработчиками:

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

2) устранение проблем совместимости между браузерами. В отличие от

HTML, Flash одинаково работает как в Internet Explorer, так и в Netscape Navigator. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player);

3) мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать «интеллект» для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название «ActionScript») - это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать;

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

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

Подключаемые модули распространяются бесплатно, в то время как за программу создания Flash файлов приходится платить. Последняя, 5-я версия продукта стоит $399. Пользователям старых версий это удовольствие достанется за $149.

Здесь делается основной акцент на нестандартные интерфейсы. Нестандартные интерфейсы имеют ряд отличий от стандартных (под стандартными подразумеваются привычные интерфейсы HTML):

1) Специальные управляющие объекты (кнопки, панели, блоки). Для примера, рулетка в Microsoft Word - нестандартный объект. Ее практически невозможно реализовать в HTML, только картинку, но не интерактивную функциональность;

2) Независимое размещение объектов, другими словами, не размещение объектов относительно друг друга, а расположение по координатам и уровням. В DHTML такая возможность существует, но в DHTML надежно реализовать можно только совсем простые вещи;

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

В результате подобной «нестандартности» появляется полная свобода в создании интерактивного интерфейса, более удобного, более наглядного, более функционального. Это реально повышает уровень предоставляемого сервиса. А значит, достигается «customer satisfaction» (удовлетворение требований клиента), и, в конечном итоге, система становится более конкурентоспособной.

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

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

Существует два принципиальных условия применения Flash:

1) Нужно аккуратно выбирать область применения Flash за пределами анимации

2) Этим инструментом нужно уметь грамотно пользоваться.

С первым условием достаточно просто: Flash нужен там, где нестандартный интерфейс дает много новых возможностей, где нужна интерактивность, где не подходит «спартанская» внешность. При совпадении всех этих требований имеет смысл задуматься об использовании Flash 5 в качестве инструмента для построения системы.

Основные плюсы и минусы программирования в среде Flash 5 - в процессе разработки:

1) Почти каждая аккуратно запрограммированная функция сразу очевидно полезна во многих местах;

2) Возможно построение универсального сервера;

3) Легко переносится часть логики с серверной на клиентскую часть;

4) Свобода в верстке и в наборе control-элементов (кнопок, меню, списков, таблиц).

Однако, есть и недостатки, что-то работает не лучшим образом, а потому, если в системе важны определенные компоненты, Flash использовать пока нецелесообразно. Вот список тех компонентов, которые на данный момент «не дружат» с Flash:

1) Сложные математические операции на клиентской части;

2) Работа с очень сложными структурами данных на клиентской части;

3) Мелкие тексты, написанные по-русски, из-за проблемы с кодировкой;

4) Сайты со сверхсложной бизнес - логикой, требующие мгновенной загрузки;

5) Механизмы, требующие работы с файловой системой клиента или его устройствами (например, Web-камерой или микрофоном).

HTML-редактор FrontPage

Одним из первых редакторов является FrontPage. Редактор входит в программный пакет MS Office. Этот программный продукт упрощает работу с HTML-языком. Microsoft FrontPage призван облегчить нам задачу достойно представить себя в WWW или создать Web-сайт для сети вашей организации. FrontPage органично вписывающийся в пакет приложений Microsoft Office, стал первым продуктом широкого использования для Internet, сочетающим в себе клиентскую и серверную части и обеспечивающим возможность разработки сайта в целом и установки его на большинство популярных серверов. Если вы хотите создать свой Web-сайт, но с программированием знакомы только понаслышке, не беспокойтесь -- FrontPage способен взять на себя всю необходимую работу по программированию. Однако FrontPage станет достаточно серьезным помощником и для профессиональных разработчиков, предпочитающих держать в руках полный контроль над творческим процессом.

FrontPage поставляется с несколькими дополнительными утилитами, вместе составляющими так называемый FrontPage Bonus Pack. Уникальность FrontPage еще и в том, что он базируется на клиент-серверной модели разработки, что неимоверно облегчает интеграцию с большинством компьютерных систем. Давайте разберемся в этом получше. В клиент - серверных системах, сервер -- это компьютер (или приложение), обеспечивающий удаленным пользователям доступ по сети к своим данным или ресурсам. Клиент -- это компьютер (или приложение), который запрашивает эти данные или ресурсы. Чаще всего сервер -- мощная машина, а клиент -- обычный настольный компьютер. Предположим, например, что все счета, выставленные компанией Cascade Coffee Roasters, хранятся в базе данных на сервере. В клиент-серверной платежной системе вы вводите информацию на компьютере-клиенте, а заполнив счет, сохраняете информацию на сервере, централизованно. Таким образом, вы можете подключить к серверу неограниченное количество клиентских компьютеров, и все они будут иметь доступ к одним и тем же данным. FrontPage работает аналогичным образом, фактически он включает и сервер, и клиента. Его клиентское программное обеспечение состоит из Проводника (FrontPage Explorer) и Редактора (FrontPage Editor). Проводник позволяет просматривать и администрировать сайты несколькими различными способами. Для создания новых страниц и редактирования существующих предназначен Редактор.

Для серверной стороны FrontPage можно использовать FrontPage Personal Web Server или Microsoft Personal Web Server под управлением Windows 95, Windows 98 или Windows NT Workstation. При установке на Windows NT Server FrontPage автоматически определяет наличие Microsoft Internet Information Server (IIS), и если он установлен, то в дальнейшем с ним и работает. Вы можете установить один из персональных Web-серверов на компьютер в локальной (Local Area Network, LAN) или глобальной (Wide Area Network, WAN) сети на базе TCP/IP и тем самым превратить эту сеть в intranet. Вы даже можете разместить персональный Web-сервер на том же компьютере, на котором установлено клиентское обеспечение. Редактировать страницы вашего сайта и создавать новые вы можете на любом клиентском компьютере, подключенном к серверу -- даже если они находятся в противоположных точках земного шара. В состав FrontPage также входят Серверные расширения (FrontPage Server Extensions), обеспечивающие интеграцию FrontPage со всеми наиболее популярными Web-серверами. Если в вашей организации уже есть качественный Web-сервер, то серверные расширения помогут гладко решить проблемы взаимодействия между ним и FrontPage.

В состав Microsoft Office входят Microsoft Word, Excel, PowerPoint и Access. Microsoft Office -- это самый популярный сегодня на рынке пакет офисных приложений. Мощность Office в создании информационного наполнения в сочетании со средствами управления сайтом и средствами генерации страниц FrontPage дает вам в руки непревзойденные возможности конструирования Web-сайтов. Вот лишь несколько аспектов их тесного взаимодействия:

1) документы Office во всех режимах обзора сайта в Проводнике FrontPage обозначаются теми же значками, что и в проводнике Windows;

2) Возможности FrontPage по проверке и восстановлению ссылок распространяются на любые расположенные на вашем сайте документы Office, содержащие ссылки

3) Материал из файлов Office очень просто перенести в Web-страницы FrontPage. Например, рабочие листы Excel можно частично или полностью скопировать в Редакторе на вашу страницу с помощью буфера обмена (Clipboard) или механизма drag-and-drop, и FrontPage автоматически преобразует их в таблицу HTML

4) Вы можете перетаскивать документы Office из Проводника Windows в Проводник FrontPage, и эти документы будут автоматически импортироваться в ваш сайт.

Основным недостатком MS FrontPage, является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator).

1.6 Оценка экономической целесообразности использования HTML-редакторов

В данном разделе мы хотели бы рассмотреть вопрос о целесообразности и экономичности использования HTML-редакторов, на примере Macromedia DreamWeaver и MS Front Page.

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

На сегодняшний день цена HTML-редактора и полного пакета прикладных программ для Macromedia DreamWeaver 8.0 KZ составляет от 300$ , а цена MS Front Page 2003 составляет от 60$ .

Любая программа не может работать без операционной системы. В настоящее время наиболее распространенной операционной системой является Windows XP Professional. Данная операционная система наиболее оптимизирована для работы с прикладными программами, имеет удобный интерфейс. На данный момент единственной достойной ОС, способной конкурировать с ХР, является Windows Vista. Но на данном этапе своего развития Vista еще не успела заслужить доверия среди пользователей. Причиной тому является недостаток программного обеспечения для нее, наличие больших системных требований, а также многочисленные недоработки.

Таблица 1. Стоимость операционной системы

Операционная система	Стоимость, тг.
Windows XP Home Edition Russian SP2	5952
Windows XP Professional Russian SP3	7410
Windows Vista Ultimate Russian SP1	31920
Windows Vista Ultimate English SP1	29716

Таблица 2. Системные требования HTML-редакторов

Редакторы	Macromedia DreamWeaver 8	MS FrontPage 2003
Процессор	Не менее 800 МГц Intel Pentium III процессор (или эквивалентный)	Pentium 133 МГц или выше, рекомендуемый Pentium III
RAM	128 MB RAM (256 MB желательно, 1 Гб рекомендовано для работы больше, чем с одним продуктом Studio 8 одновременно)	16 Мб оперативной памяти (рекомендуется 32 Мб)
HD	доступное дисковое пространство 650 Мб.	165 Мбайт свободного места на диске, 115 Мбайт на диске, на котором установлена ОС
CD-ROM	Нет	Да
Дисплей	1024x768, 16-бит видеорежим (32-бита рекомендовано), 256 цветов	Super VGA (800Ѕ600) и выше, 256 цветов
ОС	Windows 98 SE, Windows 2000, Windows XP или Windows Server TM 2003.	Windows 98 SE, Windows 2000, Windows XP или Windows Server TM 2003.
Периферия	Мышь Microsoft Mouse, Microsoft IntelliMouse или совместимое устройство	Мышь Microsoft Mouse, Microsoft IntelliMouse или совместимое устройство

Рекомендованные: компьютер, работающий под управлением Microsoft Windows XP Professional на базе Pentium III и 256 Мбайт RAM

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

Таблица 3. Минимальные требования и расходы

Товар	Описание	Цена
Процессор	Intel Celeron 2000/128 Socket 478 BOX	6781
Материнская плата	SOLTEK SL-85DRV-5: Socket 478, VIA P4X266E+VT8235, ATX, 3 DDR 266, FSB 533/400MHz, UATA/133, AGP 4x	5864
RAM	DDR 128Mb, 333 MHz	1463
Видео-адаптер	PCI-E: ATI X550 SAPPHIRE 128MB/128bit/TV/DVI	4648
Жесткий диск	IDE 80.0g 7200 ATA100 Samsung 2Mb	6330
CD-ROM	CD-ROM LG 52х (Black)	1235
Корпус	ATX Midi Tower Storm 2202-LX, P4 PSU 300W	2888
Клавиатура	PS/2 SVEN Slim 300	1000
Мышь	SVEN L-30 PS/2, Scroll	500
Монитор	17" SAMTRON 76E	10830
Итого		41539

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

Таблица 4. Соотношение цены и производительности

Товар	Описание	Цена
Процессор	Pentium Dual-Core E2180 2.0ГГц (800МГц,1MB,Conroe,S775) BOX	7923
Материнская плата	ASUS P5B SE (LGA775, P965, PCI-E, 4xDDR-II(800),1xIDE,5xSATA-II, 3xPCI, ATX)	7448
RAM	DDR II 1024Mb, 800MHz Hynix	3135
Видео-адаптер	PCI-E: GEFORCE-PCX 8500GT Sonic DirectX 10/ 256MB DDR3(128bit) +TV XPERTVISION	8018
Жесткий диск	IDE 160.0g 7200 ATA133 Samsung 8Mb	6061
CD-ROM	DVD-RW/+RW LG Black	2900
Корпус	ATX Midle Tower ASUS TA-891, 350W	4712
Клавиатура	PS/2 A-4 Tech KB-28G Game Master	1200
Мышь	A-4 Tech X710 OPTICAL PS/2 1000 dpi	800
Монитор	17" SAMSUNG 794 MB	13091
Итого		66088

А теперь определим оптимальный вариант для работы с HTML-редакторами и прочим программным обеспечением.

Таблица 5. Наилучшая производительность

Товар	Описание	Цена
Процессор	Pentium Dual-Core E2200 2.2ГГц (800МГц,1MB,Conroe,S775) BOX	7900
Материнская плата	ASUS P5K SE (Socket775/P35/PCI-E+GbLAN/SATA/U133/ATX/4DDR-II/PC-6400)	9975
RAM	DDR II 2x2048Mb, 800 MHz TEAM алюминиевый радиатор, Retail	9120
Видео - адаптер	PCI-E: GEFORCE-PCX 8800GTS DirectX 10/ 512MB DDR3(256bit) +TV LEADTEK	38760
Жесткий диск	SATA II 250.0g 7200 WD 16 Mb (2500AAKS)	6555
CD-ROM	DVD-RW/+RW LG LightScribe	4332
Корпус	ATX Midle Tower Microlab M4810 Silver 420W	5396
Клавиатура	PS/2 SVEN 733 Multimedia	605
Мышь	A-4 Tech SWOP-48UP OPTICAL 800 dpi PS/2	600
Монитор	CRT 19" LG SW900B	14383
Итого		97627

Исходя из полученных данных, для нормальной работы с HTML-редакторами мы рекомендуем использовать конфигурацию ПК, приведенную в таблице 4. Данная конфигурация экономична со стороны материальных затрат и пригодна для оптимальной работы с данным программным обеспечением. Установлено, что наиболее удобно для создания сайта пользоваться html-редактором FrontPage.

Следовательно, вывод: Преимущества FrontPage перед другими редакторами очевидны:

FrontPage имеет мощную поддержку в Интернете. Существует много Web-узлов, групп новостей, конференций, ориентированных на пользователей FrontPage. Также к FrontPage существует масса платных и бесплатных плагинов (plug-ins), расширяющих его возможности. Например, самые лучшие, на сегодняшний день, оптимизаторы графики Ulead SmartSaver и Ulead SmartSaver Pro от компании Ulead встраиваются плагинами не только в Photoshop, но и в FrontPage. Интерфейс FrontPage схож с интерфейсом программ, входящих в Microsoft Office, что облегчает его освоение. К тому же между программами, входящими в Microsoft Office, существует полная интеграция, что позволяет использовать во FrontPage информацию, созданную в других приложениях.

2. Проектирование web-сайта образовательного учреждения и размещение его в сети Интернет

2.1Методика разработки веб-сайта школы

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

Формирование целей и задач сайта

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

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

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

Проектирование структуры сайта

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

Существует несколько видов структурирования информационного материала на Web-сайте: линейная, иерархическая узкая глубокая и широкая не глубокая, смешанная структура.

Линейная структура

Линейная структура материал весь располагается последовательно друг за другом рисунок 1.

Рисунок 1. Линейная структура

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

Рисунок 2. Иерархическая структура

Широкая неглубокая иерархия

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

Рисунок 3. Широкая неглубокая иерархия

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

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

Смешанная структура

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

Рисунок 4. Смешанная структура

Существуют ситуации, когда представить информацию одним из описанных выше методов не представляется возможным. В этом случае применяют несколько схем одновременно. Однако такой подход имеет недостаток - он требует от пользователя концентрации внимания и дополнительных усилий. Чтобы помочь пользователю, составляют карту Web-сайта (site-map). Наш сайт будет представлять собой широкую иерархию с элементами нелинейной структуры. Первый уровень иерархии составляют основные рубрики «Главная страница», «Информация о сайте», «Каталог статей», «Блог», «Форум», «Гостевая книга», «Администрация», «Фотоальбом», «Информатика», «Начальные классы», «Страничка психолога».

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

Разработка дизайна, функциональности страниц и программных решений образовательного сайта. Этот этап не такой простой, как может показаться на первый взгляд. Особенно, если анализ ситуации в Интернете показал наличие жёсткой конкуренции в борьбе за целевую аудиторию. Кроме решений задач по достижению имиджевой индивидуальности сайта, необходимо учитывать множество дополнительных (иногда, чисто технических) требований - usability (практичность) сайта, «прозрачность» (понятность) навигации, применение различных технологий оформления, скорость загрузки страниц, качество графики, а также требования эргономики.

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

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

1) информационные - расширение информационной базы за счет свободного доступа к информации;

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

3) методические - знакомство с разными формами представления информации, организация самостоятельной деятельности.

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

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

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

2.2 Разработка структуры сайта

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

Мы воспользуемся специализированным HTML-редактором FrontPage. Возьмём лист бумаги и напишите основные идеи сайта. Определим информационную часть сайта (статическая составляющая) и активную часть, которая требует от пользователя выполнения действий, например, заполнения форм, просмотр ресурсов:

1) Сгруппируем идеи по содержанию;

2) Сгруппируем идеи по возможностям;

3) Определим приоритет каждой из идей;

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

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



Рисунок 5. Карта сайта

3. Разработка веб-сайта КГУ «Средней школы №15 села Трудовое».

КГУ «Средняя школа №15 села Трудовое» акимата Осакаровского района создана в 1934 году. Действующий в настоящее время руководитель, директор школы: Куковская Светлана Анатольевна, учитель высшей квалификационной категории, высшего уровня квалификации учителя географии и естествознания. Кадровый состав педагогических работников составляет 21 человек. Школа является государственным учреждением, площадь которой составляет 1000 кв.м. Имеются 16 кабинетов из них: лингафонный кабинет, мультимедийный кабинет, кабинет физики новой модификации, кабинет информатики. Вместимость ученических мест 504 учащихся. На данный момент в школе обучается 75 человек.

3.1 Задачи и цели сайта

Перед разработкой веб-сайта определимся с задачами, которые должен решать веб-сайт:

1) Предоставить информацию о школе, истории создания, основной деятельности, её руководителях и преподавателях;

2) Публикация новостей школы;

3) Информация о расписании школы;

4) Публикация информации о будущих и прошедших соревнованиях с дополнительной информацией;

5) Информация о достижениях школы: наградах, завоеванных на соревнованиях;

6) Фотоальбом, где можно добавить и посмотреть фотографии школы, учеников и учителей, а также фоторепортажи с соревнований;

7) Форум, на котором посетитель сайта сможет почерпнуть полезную информацию, а также пообщаться с руководителями и преподавателями школы;

8) Контактные данные, для того, чтобы заинтересованные родители смогли связаться со школой.

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

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

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

Третья задача: публикация материала школы. Решается созданием раздела «Главная страница». Здесь будут публиковаться новости школы. Нужно предоставить возможность добавлять новости без редактирования HTML-кода странички. Наилучшим образом с этим справляются специальные новостные скрипты, написанные на языке PHP. С одной стороны, это накладывает ограничения на выбор хостинга (требуется поддержка PHP), а с другое - позволяет неподготовленному пользователю (например, администратору школы) добавлять новости, не разбираясь в технологиях FTP и HTML. Также нужно предоставить возможность посетителям сайта комментировать новости, т.е. выражать свое мнение по этим событиям.

Четвёртая задача: информация о преподавателях школы, личных данных, поурочные разработки и так далее.

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

Шестая задача: публикация материала школьного психолога

Седьмая задача: гостевая книга, посетители сайта оставляют сообщения.

Проанализировав и обобщив эти данные, создадим структуру веб-сайта КГУ «Средней школы №15 села Трудовое».

Структура веб-сайта:

1) Главная страница - информация о школе;

2) Администрация - информация об администрации школы: директор, завуч по воспитательной работе;

3) Фотоальбом - фотографии выпускников, фоторепортажи с мероприятий и соревнований информация о заслугах, грамотах школы;

4) Гостевая книга - место, где можно оставить отзыв, сообщение школе;

5) Каталог статей - о докладах, статьях, мероприятиях, планах школы;

6) Психолог - публикация работы психолога.

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

3.2 Использование FrontPage для запуска Web

Возможно, вам не терпится узнать, что в действительности означает создание собственного Web, поэтому начнем. Здесь мы сделаем обзор, чтобы привыкнуть к поведению проводника, поскольку детальное изучение процесса создания Web. Войдите в меню Start (Старт), откройте подменю Microsoft FrontPage и выберите программу FrontPage2003. После короткой паузы появится окно FrontPage2003 рисунок 6.

Рисунок 6.Окно редактора FrontPage

Выберите команду File, New Web (Файл, Создать ОдностраничныйWeb-узел) из меню проводника. Вы сразу увидите диалоговое окно со списком шаблонов веб-узлов рисунок 7



Рисунок 7.Шаблон веб-узлов в редакторе

(Одностраничный Web) - создает документ Web с единственной пустой страницей, которая будет исходной, домашней страницей рисунок 8,9.

Рисунок 8. Домашняя страница



Рисунок 9.Домашняя страница

Для переименования нашей страницы в КГУ «СШ№15 с.Трудовое», необходимо выполнить следующие функции. Щёлкнуть по гланой странице index.htm правой кнопкой мыши, после чего выходит динамическое меню и выбрать вкладку Переименовать рисунок 10. После результат наших действий на рисунке 11.

Рисунок 10.Переименование домашней страницы



Рисунок 11. Домашняя страница КГУ «СШ №15 с.Трудовое»

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

Рисунок 12. Создание страниц

В правой панели может быть два варианта изображения: Summary View (Общая панель) или Link View (Панель связей). Общая панель предоставля-ет список всех графических объектов и страниц текущего документа Web (открытого). Панель связей отображает значки для каждой страницы, образа или World Wide Web URL (Uniform Resource Locator -- универсальный идентификатор ресурсов) с линиями, показывающими связи между ними. Переключение от одной панели к другой осуществляется по командам View, Link View (Вид, Панель связей) и View, Summary View (Вид, Общая панель). Обе панели исключительно полезны для управления структурой документа Web и для передачи страниц в редактор FrontPage рисунок 13.

Рисунок 13.Общая панель (Summary View)

3.3 Программирование дизайна веб-сайта

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

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

В верхней части веб-сайта обычно помещается так называемая «шапка» - логотип организации в сочетании с текстом. Текстом может быть название этой организации или её слоган. Для школы он выглядит следующим образом. рисунок 16.



Рисунок 16. Логотип школы

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

Наконец, дизайн веб-сайта был украшен, в качестве логотипа использовалась тема редактора «Школа».

Рисунок 17. Тема шаблона сайта «Школа»

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

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



Рисунок 18.Редактор HTML-кода FrontPage

В результате дизайн веб-сайта получился следующим рисунок 19.

Стилевое оформление сайта. Сайт выполнен с использованием технологий HTML и CSS. При проектировании были выбраны нейтральные цвета, так как сайт просматривают люди разного возраста. Размеры сайта выполнены таким образом, что он одинаково смотрится на разрешениях 800x600 и выше. В верхней части расположен логотип и название сайта. Меню расположено в левой части сайта и стилизовано в белом цвете. По центру экрана расположен основной текст страницы. В нижней части сайта расположена информация о разработчике сайта и предупреждение о соблюдении авторских прав.

Рисунок 19. Дизайн веб-сайта

Дополнительные страницы нашего сайта

Страница «Администрация» представляет администрацию школы, которая делится на три подстраницы: «Директор», «Зам по УВР», «Зам по ВР» на страницах размещается информация о работе администрации рисунок 19.

Рисунок 20.Администрация сайта

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

Рисунок 21.Фотоальбомы

Страница «Информатика» эта страница делится на несколько подстраниц: «Портфолио»- страница служит для размещения: личных данных учителя информатики: заслуг, методических разработок, «Поурочные разработки»- страница, где будет размещены личные поурочные разработки.



Рисунок 22.Информатика

Страница « Информация о сайте» на этой странице размещён паспорт школы (все о школе) рисунок 23.

Рисунок 23.Информация о сайте

3.4 Создание гостевой книги и форума

При создании гостевой книги и форума использовался бесплатный готовый шаблон FrontPage. Страница «Гостевая книга» - это место на сайте, где ваши посетители могут оставлять свои сообщения: отзывы на сайт, замечания, пожелания и т. д. Здесь же хранятся и ранее опубликованные сообщения. Посетители гостевой книги не могут отвечать на сообщения, оставленные другими посетителями, и тем самым завязывать дискуссию или полемику по какому-то вопросу. Однако владелец сайта имеет возможность прокомментировать любое из сообщений гостевой книги рисунок 24.

Рисунок 24.Гостевая книга

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

Рисунок 25.Форум

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



Рисунок 26.Панель управления

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

Рисунок 27 Управление материалами

4. Проверка web-сайта, просмотр его в браузере, реализация, размещение на web-сервере

4.1 Реализация и размещение web-сайта

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

- платный хостинг, который продается за деньги;

- бесплатный хостинг;

- бонусный хостинг, который предоставляется бесплатно, т.е. в качестве бонуса поощрения в случае покупки контрактного dial-up доступа в Интернет. К примеру, можно купить карточку для доступа в Интернет, на которой четко и ясно написано, что ее владелец может бесплатно получить на сервере провайдера почтовый ящик размером 10 МБ и место под веб-сайт, также объемом 10 МБ. Тем не менее, последний вид хостинга является наименее распространенным, так как понятно, что смена провайдера Dial-Up доступа автоматически означает потерю сайта. Поэтому мало кто рискует сайты на таких хостингах заводить. На самом деле, веб-хостинг, это не только «место на диске», но еще и:

- трафик, который стоит денег;

- дорогостоящее программное обеспечение, в том числе и то, которое разрабатывается специалистами фирмы - хостинг-провайдера;

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

Рассмотрим, чем отличается платный хостинг от бесплатного:

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

- Отсутствие баннеров на страницах размещенного сайта и в почтовом ящике;

- Присутствие полноценного FTP- доступа;

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

- Круглосуточная техническая поддержка;

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

- Доступ к базам данных (например, MySQL), что очень важно при использовании скриптов;

- Предоставление быстрого счетчика и подробной статистики веб-сайта;

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

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

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

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

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

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

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

...