Создание школьных сайтов

Создание школьных сайтов.

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

Мы написали реферат, с целью рассмотения данных проблем на примере сайта средней школы №369.

Можно выделить некоторые основные этапы создания и развития сайта:

1. организация творческой группы создателей сайта;
2. подбор информации;
3. создание дизайна сайта;
4. размещение сайта в Интернете;
5. увеличение посещаемости сайта;
6. обновление сайта;

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

Словарь.

· ASP (Active Server Pages) - Смесь средств программирования с использованием HTML(гипертекст), чтение и запись в базу данных посредством ODBC (Открытое подключение к базе данных), масса других возможностей не требующих применения, но похожих на такие средства программирования как CGI, JavaScript, Perl, ActiveX и ISAPI. Активные страницы не требуют специфичных броузеров (browser). Все скрипты (программы) запускаются и выполняются на сервере, причем броузер получает только результирующие HTML-файлы и не требует от броузера чего-то особенного.

· CGI(Common Gateway Interface) - интерфейс, позволяющий взаимодействовать программам клиента с программами, запущенными на сервере.

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

· CSS (Cascading Style Sheets)- -язык иерархических стилевых спецификаций. Главная цель CSS - отделить структуру документа от его оформления и позволить автору страницы самому решать, как должен выглядеть тот или иной элемент содержания. CSS не только освобождает от "обязательного" форматирования тех или иных тегов (например, полужирного начертания заголовков), но и добавляет множество новых степеней свободы, о которых раньше не приходилось и мечтать (например, возможность изменения интерлиньяжа - расстояния между строками текста).

· DHTML (Dynamic HyperText Markup Language) - язык, являющийся расширением HTML и CSS. Основную идею динамического HTML можно сформулировать очень просто: полный контроль языка сценариев над всеми без исключения элементами документа, параметрами их оформления и размещения (как подразумеваемыми в HTML, так и задаваемыми с помощью CSS) и даже над самим текстом страницы. Благодаря этому любой элемент HTML-документа сможет двигаться в произвольном направлении, как угодно изменять свое форматирование и буквально переписываться - как в ответ на действия пользователя, так и по собственной инициативе.

· E-mail (Электронная почта) - основной способ связи в Internet. Каждый абонент электронной почты имеет свой личный почтовый адрес, состоящий из имени пользователя в системе и названия компьютера, на котором запущен почтовый сервер, разделенных знаком @. С точки зрения пользователя, электронная почта представляет собой программу, позволяющую отправлять сообщения, прямо набирая их на компьютере, и получать письма, отправленные другими.

· FAQ (Frequently Asked Questions) - список часто задаваемых вопросов по какой-то определенной теме. Составляется либо отдельным человеком, либо группой людей, как правило, специалистами в данной области. Обычно их можно найти на WEB-сайтах и в группах новостей.

· FTP (File Transfer Protocol) - протокол передачи файлов, а также программа, его реализующая. Протокол был разработан для передачи файлов между компьютерами, использующими сеть на основе TCP/IP, в том числе и в Internet. Для доступа к некоторой информации посредством FTP на компьютере, c которого осуществляют доступ, должен быть установлен т.н. FTP-клиент, а на другом, соответственно, FTP-сервер. В WEB-практике FTP-доступ используется для доступа к страничкам WEB-сайта, обычно расположенным на сервере провайдера.

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

· Гостевая книга (Guest Book) - программа, запущенная на стороне клиента. Позволяет посетителям высказать свое мнение о страничках и послать его авторам. Некоторые странички позволяют ознакомиться с комментариями других посетителей.

· Глубина цвета (Color Depth) - количество бит, приходящихся на один пиксел (bpp); чем больше это число, тем больше цветов может использовать изображение. Наиболее популярны следующие разрешения: 8bpp (256 цветов), 16bpp (65536 цветов), 24bpp (больее 16,7 млн. цветов). Чем больше глубина цвета, тем больше размер изображения.

· HTML-документ (страничка) - документ, написанный на языке разметки гипертекста (HTML). Заключается между флагами <HTML> и </HTML>.

· HTML (HyperText Markup Language) - язык разметки гипертекстовых документов - основной способ хранения и передачи документов в Internet. Представляет собой обычный текстовый файл. В качестве элементов форматирования используются так называемые тэги (tag). Главной особенностью HTML является способность использовать гиперсвязи (links), благодаря которым возможны ссылки на другие документы, как локальные, так и находящиеся на другом конце земного шара, а также внедрение в документы изображений, звука, видео и т.д.

· HTTP (Hyper Text Transfer Protocol) - протокол передачи файлов, подобный FTP, но со встроенным идентификатором типа передаваемой информации (MIME - формат). Главным образом используется в WWW.

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

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

· JAVAScript - язык программирования, основанный на объектном представлении броузера. Текст программы встроен непосредственно в HTML-документ и интерпретируется самим броузером. Применяется в основном для создания таких эффектов, как: бегущая строка, рисунки, изменяющие свой вид при подведении курсора и т.д.

· JPEG (Joint Photographic Expert Group) - второй по популярности графический формат для использования в Internet. Для хранения использует метод сжатия с потерей информации, благодаря чему позволяет достигать фантастических уровней сжатия. Применяется в основном для хранения высококачественных фотографий.

· Perl - язык программирования. Программы, написанные на Perl, запускаются на стороне сервера. В основном применяется на UNIX-ориентированных WEB-серверах. Применяется для обеспечения доступа к базам данным, создания динамических страничек и т.п.

· Plug-In (Встраиваемый модуль) - программа, расширяющая возможности какого-нибудь программного пакета. Обычно встраивается в тело пакета и вызывается непосредственно из программы, для которой предназначен. Например: Kai’s Power Tools - Plug-In для графического редактора Photoshop, добавляющий некоторые специальные эффекты. Или: Cosmo Player: Plug-In для броузера Netscape Navigator, позволяющий просматривать VRML-миры.

· PNG (Portable Network Graphic) - новый графический формат (читается: пинг), введенный для замены формата GIF после того, как с последним возникли патентные проблемы. Так как формат новый, то поддерживается очень небольшим количеством броузеров и лишь некоторыми видами программного обеспечения. Практически не распространен в WEB. В отличие от GIF, позволяет хранить изображения, имеющие глубину цвета до 64 бит на пиксел, поддерживает отдельный альфа-канал, несколько улучшенное сжатие.

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

· Script - программа, написанная на каком-либо языке программирования для взаимодействия клиента с сервером. Например: Script на Perl для подсчета количества посещений.

· Tag (Тэг) - элемент НТМL, представляет из себя текст, заключенный в угловые скобки <>, является активным элементом, изменяющим представление следующей за ним информации. Может иметь некоторые атрибуты. Обычно имеются два тэга - открывающий и закрывающий. Например <b> и </b> - данные тэги описывают текст, находящийся между ними, как полужирный.

· URL (Uniform Resource Locator) - универсальный адрес ресурса - уникальное имя, однозначно определяющее документ в сети Internet. Наиболее широко используется в WEB. Когда Вы хотите cослаться на какой-то документ в сети, то пользуетесь стандартным соглашением по написанию URL, например http://www.microsoft.com/index.htm.

· VRML (Virtual Reality Modeling Language) - язык моделирования виртуальной реальности. Подобен HTML, только описывает графические трехмерные объекты путем перечисления используемых в сцене примитивов и их координат. Позволяет создавать сложные сцены с наложением текстур, установкой источников цвета и камер. Сам файл представляет собой либо обычный ASCII-файл, либо сжатый бинарный.

· Броузер (Browser) - программа, позволяющая просматривать ресурсы Всемирной паутины.

· Виртуальные сервера (Virtual Servers) - используются для присвоения одному компьютеру нескольких доменных имен. Например, microsoft.com, www.microsoft.com, ftp.microsoft.com - это виртуальные адреса одного и того же компьютера. Обычно реальный WEB-сервер поддерживает несколько разных виртуальных серверов.

· Доменное имя (Domain Name) - уникальный идентификатор, который назначается определенному IP-адресу. Доменное имя дает возможность обращаться к компьютеру по имени типа www.company.com, вместо запоминания его числового эквивалента.

· Клиент (Client) - компьютер, с которого осуществляется доступ к серверу с целью обмена или получения информации.

· Кодовая таблица - таблица соответствий символов и их положений в таблице. Исторически сложилось так, что в России есть несколько несовместимых кодировок, т.е. одинаковые символы имеют различные коды в разных кодировках. Это приводит к тому, что при просмотре страничек не в той кодировке, на которую настроен броузер, экран засоряется непонятными символами. В России распространены следующие кодировки: WIN1251 (Windows), KOI-8 (Unix), СP866 (DOS), Macintosh, ISO-8859-5 (Unix).

· Поисковая система (Search Engine) - система, предназначенная для поиска и доставки информации. Организована с целью каталогизации информации. Обычно использует индексацию HTML-страниц, чтобы в дальнейшем было легко находить данную информацию.

· Разрешение экрана (Screen Resolution) - размер экрана монитора по ширине и высоте в пикселах. Самыми популярными являются разрешения 640x480, 800x600, 1024x768. Чем более высокое разрешение имеет компьютер, тем более качественное изображение он способен выводить на экран.

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

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

· Фреймы (Frames) - элементы HTML, появившиеся в броузерах версий 3.0. Позволяют разделить страницу на несколько независимых окон и в каждом из них размещать свою собственную WEB-страничку. Возможна ссылка из одного окна в другое. Применяется в основном для организации постоянно находящихся на экране меню, в то время как в другом окне располагается непосредственно сама информация.

· Web-сайт, Web-сервер - цепочка логически связанных документов, написанных на языке HTML.

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

Программа обработки растровой графики.

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

· Сканирование фотографий;

· Коррекция отсканированных и готовых фотографий, в том числе - тоновая и цветовая коррекция;

· Ретушь фотографий;

· Умение кадрировать;

· Понимание различий в форматах графических файлов;

· Грамотное использование фильтров;

· Работа со слоями.

В качестве конкретных программ можно привести следующие:

· Adobe PhotoShop 3.0-5.5 - данная программа является лидером в области графических программ такого рода, но она требует и соответствующих ресурсов от компьютера.

· Paint Shop Pro 4.0-5.0 - по нашему мнению, лучшая shareware-программа, которая, к тому же, поддерживает фильтры от Adobe PhotoShop и очень быстро работает с объемными (>20M) фотографиями. Может импортировать и экспортировать изображения в 40-50 разных форматов.

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

Программа обработки векторной графики.

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

· Умение работать с графическими объектами (группировка, наложение, получение нестандартных объектов);

· Умение работать с кривыми и узлами кривых;

· Умение работать с направляющими и сеткой;

· Умение разбираться в цветовых моделях (RGB, CMYK, HSB);

· Работа с текстом - умение разместить его на любой кривой;

· Грамотное использование градиентов и заливок (включая фрактальные);

· Грамотное использование эффектов.

Типичными представителями данного класса являются Corel DRAW 7.0-8.0 и Adobe Illustrator - они обе являются лидерами в своих областях и, соответственно, располагают самыми последними достижениями в области векторной графики.

Программы просмотра web-страничек или броузеры.

В настоящее время имеется только два броузера, заслуживающих упоминания - это "Microsoft Internet Explorer" и "Netscape Navigator". Сейчас приближаются уже пятые версии данных программ, но, по статистике, наиболее используемыми являются их 4-ые версии. Поэтому для контроля внешнего вида наших страничек нам пришлось использовать их. Хорошая WEB-страничка должна одинаково выглядеть в любом из этих броузеров.

Простой текстовый редактор.

Понадобился для ручного исправления и добавления HTML-кода, т.к. существующие визуальные редакторы не могут полностью контролировать процесс создания web-странички. В качестве примера подойдет обычный "Блокнот" из стандартной поставки Windows или один из HTML-редакторов, которые имеют встроенные команды на проверку правильности тэгов и структуры документов, например, HomeSite.

Текстовый процессор.

С возможностью проверки орфографии - очень полезен для набора текста и исправления ошибок в распознанных текстах. Как пример - обычный "Microsoft Word".

Программы распознавания текста.

Помогли нам сэкономить массу времени, избавляя от ручного набора напечатанных текстов. Программ по распознаванию русского языка всего две - это CuneiForm и FineReader.

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

Теперь мы перейдем к подробному описанию этапов создания сайта нашей школы.

1. Организация творческой группы создателей сайта.

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

2. Подбор информации для школьного сайта.

Информация для размещения на школьном сайте подбирается творческой группой (если над сайтом работает один ученик – руководителем и другими учителями) и должна удовлетворять следующим критериям:

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

· использование фотоматериалов;

· по возможности, создать периодику на образовательную тему;

· размещение страничек школьников - каждому ученику данной школы предоставляется возможность разместить свою страничку в Интернете, условия размещения определяются в зависимости от конкретной ситуации;

· обязательное наличие контактной информации (e-mail, телефон, адрес).

3. Каким должен быть дизайн школьного сайта?

Это наиболее важная проблема. Обычно ученики, занимающиеся созданием сайта имели опыт по созданию "Домашних страничек". Но школьный сайт, в отличие от "домашней странички" должен выглядеть профессионально, следовательно дизайн должен соответствовать следующим требованиям:

· сайт должен правильно отображаться, независимо от типа браузера и разрешения экрана посетителя;

· сайт не должен содержать ничего, что может затруднять его просмотр.

· Повторение навигации на каждой странице сайта.

Не рекомендуется:

· использование java скриптов, которые могут затруднить просмотр сайта. Это может быть неудачное сочетание цвета фона и текста, использование пестрого фона, java скрипты типа “Вращающиеся ссылки меню”, “Переливающиеся ссылки”, “Летающий текст”, блокирующие правую кнопку мыши, окошки типа alert при загрузке страницы, или при переходе по ссылке;

· использование большого количества графики, flash-анимации, т.к. это существенно увеличивает время загрузки сайта. Исходя из этих соображений, размер одной загружаемой страницы не должен превышать 40 КБ, а если сайт сделан во flash, то необходимо сделать альтернативную HTML версию сайта;

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

· Использование для создания страниц HTML редакторов типа Front Page.

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

4. Размещение школьного сайта в Интернет.

Когда сайт готов, то естественно возникает вопрос, где его разместить. Есть несколько требований, предъявляемых к хостингу для школьного сайта:

1. Надежность сервера.

2. Короткое имя сайта.

3. Не менее 10 МБ дискового пространства.

4. Возможность загрузки файлов по FTP.

5. Допольнительные возможности SSI, PHP, CGI - необязательно, но желательно.

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

Мы исследовали достаточно большое количество серверов бесплатного хостинга и остановили свой выбор на http://www.holm.ru/ - на наш взгляд это хороший хостинг: 60 МБ дискового пространства, короткое имя сайта www.сайт.h1.ru, FTP доступ, есть поддержка SSI директив, CGI и PHP скриптов.

5. Увеличение посещаемости школьного сайта.

Если сайт создан и размещен в сети Интернет, следует задуматься о увеличении посещаемости сайта. Для того, чтобы сайт был посещаемым, пользователи Интернета должны узнть о нем. Сделать это можно несколькими способами.

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

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

6. Обновление школьного сайта.

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