Создание веб–сайта для муниципального общеобразовательного учреждения средней общеобразовательной школы №2 г. Ростова

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

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

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

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

? Функции ввода и отображения данных.

? Прикладные функции, характерные для данной предметной области (для банковской системы - открытие счета, перевод денег и т.д.).

? Функции хранения и управления информационно-вычислительными ресурсами (базами данных, файловыми системами и т.д.).

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

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

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

На основе выше сказанного можно сделать вывод, что данная технология имеет как достоинства, так и недостатки.

К недостаткам можно отнести:

? дорогое техническое обеспечение;

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

К достоинствам системы клиент/сервер следует отнести:

? сильную централизованную защиту;

? центральное хранилище файлов;

? возможность совместного использования серверами доступного технического и программного обеспечения;

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

Все технологии делятся на 2 большие группы:

1. Технологии, действующие на стороне клиента.

2. Технологии, действующие на стороне сервера.

Проанализируем более подробно технологии, работающие на стороне клиента

1. Язык гипертекстовой разметки HTML. Все веб-страницы создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, удобном для человека. HTML является приложением SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам отображения. В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащенностью.

Позже, когда появилась необходимость интерактивности веб-страниц, в HTML появились формы для введения пользователем данных, которые позднее подвергаются обработке. Формы и другую информацию можно обрабатывать с помощью специальных серверных программ (например, на языках PHP или Perl). Открытие мультимедийных файлов, выводимых как непосредственно браузером (например, изображения в форматах JPEG, GIF или PNG; аудиофайлы и др.), так и внешними приложениями, "встраиваевыми" в окно браузера (Flash-анимация, Java-апплеты и прочее).

2. Расширенный язык разметки гипертекста XHTML. Этот язык предназначен для замены HTML и считается более строгой его версией[15]. XHTML, сохраняя все особенности HTML, вносит более строгие правила создания страниц, чтобы приблизиться к "идеальному" коду. Это позволяет делать сайты независимыми от устройства отображения и браузера. Иными словами, сайт будет корректно показываться во всех современных браузерах и платформах вроде компьютеров, смартфонов, наладонниках и т.д.

3. DHTML. В самом общем виде можно сказать, что Dynamic HTML - это набор технологий, работающих на стороне клиента и призванных преодолеть статичность традиционных Веб-страниц. Точнее говоря, это технологии, которые обеспечивают: динамическое формирование Веб-страницы в процессе ее загрузки, и динамическое изменение Веб-страницы в ответ на действия пользователя. Для достижения перечисленных целей используются следующие методы:

? динамическое изменение атрибутов и стилей элементов, составляющих HTML-документ;

? динамическое извлечение данных из внешних источников и включение их в Веб-страницу;

? использование динамически загружаемых шрифтов;

? поддержка визуальных и мультимедийных эффектов при отображении страниц;

? механизмы сохранения информации на компьютере-клиенте между сессиями работы.

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

Преимущества DHTML:

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

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

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

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

Минусы DHTML:

? Dynamic HTML не стандартизован, и под каждый из популярных Веб-обозревателей нужно писать свою версию HTML-документа.

? С появлением DHTML разработка динамической страницы потребовала программирования на сценарном языке, владения основами пользовательского интерфейса и т. п.

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

5. Каскадные таблицы стилей CSS. Это технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

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

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

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

Преимущества CSS вёрстки:

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

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

Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS-файл.

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

6. ЯзыкиJavaScriptиJQuery

JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако, наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

К возможностям JavaScript можно, например, отнести следующее:

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

программировать переменное содержание в зависимости от даты, браузера пользователя или других условий;

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

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

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

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

JQuery помогает легко получать доступ к любому элементу (набору элементов) объектной модели документа (DOM), обращаться к атрибутам и содержимому элементов DOM и конечно манипулировать ими. Причем благодаря своему интуитивно понятному синтаксису, схожему в чем-то с CSS1, CSS2 и XPath, эта работа становится не просто легкой, а даже приятной.

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

Код апплета загружается с веб-сервера, и браузер либо вставляет апплет в веб-страницу, либо открывает отдельное окно с собственным пользовательским интерфейсом апплета.Апплет может быть внедрен в веб-страницу с помощью использования HTML тэга <applet>, или (что рекомендуется) тега <object>.

Можно назвать следующие преимущества Java-апплетов:

работают практически на большинстве операционных платформ;

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

кэшируются в большинстве браузеров, что существенно ускоряет их загрузку при возвращении на веб-страницу;

после первого запуска апплета, когда Java-машина уже выполняется и быстро запускается, выполнение апплетов происходит существенно быстрее;

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

При этом у Java-апплетов имеются и недостатки:

требуется установка Java-расширения, которые доступны по умолчанию не во всех браузерах;

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

разработка пользовательского интерфейса с использованием апплетов является более сложной задачей по сравнению с HTML;

не имеют прямого доступа к локальным ресурсам клиентского компьютера.

Рассмотрим технологии, работающие на стороне сервера.

1. Практический язык извлечений и отчетов Perl (Practical Extraction and Report Language - практический язык).Это интерпретируемый язык, оптимизированный для просмотра содержимого текстовых файлов, выделения из них информации и генерирования отчетов на основе этой информации, а также просто хороший язык для выполнения многих задач системного администрирования UNIX. Он обладает большим набором преимуществ как язык сценариев общего назначения, которые проявляются через его характерные черты и возможности. Он также удобен для написания различных системных программ. Этот язык прост в использовании, эффективен, но про него трудно сказать, что он элегантен и компактен.

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

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

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

· полнотой;

· простотой использования;

· эффективностью.

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

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

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

2. Язык программирования общего назначения с открытым исходным кодом PHP. PHP сконструирован специально для ведения web-разработок и может внедряться в HTML-код.

PHP лучше всего охарактеризовать как работающий на стороне сервера встроенный язык сценариев Web, позволяющий разработчикам быстро и эффективно строить динамические web-приложения. С позиций грамматики и синтаксиса PHP напоминает язык программирования С, хотя разработчики не постеснялись включить в него средства из других языков, в том числе из Perl, Java и C++. Среди ценных заимствованных возможностей - поддержка регулярных выражений, мощные средства работы с массивами, объектно-ориентированная методология и обширная поддержка работы с базами данных.

При написании приложений, выходящих за рамки традиционной, статической методологии разработки web-страниц (то есть HTML), PHP также может послужить ценным инструментом для создания и управления динамическим содержанием, который используется наряду с JavaScript и другими языками. Благодаря наличию сотен стандартных функций PHP в состоянии решить практически любую задачу, которая может придти в голову разработчику. В нем имеется обширная поддержка создания графики и операций с ней, математических вычислений, средств электронной коммерции и таких популярных технологий, как XML (Extensible Markup Language), ODBC (Open Database Connectivity) и Macromedia Shockwave. Широкий выбор возможностей избавляет от необходимости рутинной и непростой работы по подключению сторонних модулей, поэтому многие разработчики со всего мира останавливают свой выбор на PHP.

Одним из главных достоинств PHP является тот факт, что он внедряется прямо в HTML-код, поэтому программисту не приходится писать программу с множеством команд для простого вывода HTML. Код HTML и PHP можно чередовать по мере необходимости.

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

· традиционностью;

· простотой;

· эффективностью;

· безопасностью;

· гибкостью.

Существует еще одна "характеристика", которая делает PHP особенно привлекательным: он распространяется бесплатно.

3. Ruby - интерпретируемый скриптовый язык высокого уровня для быстрого и удобного объектно-ориентированного программирования. Ruby имеет большое количество средств для обработки текстов, для решения системных задач. Ruby является полностью свободным языком программирования с возможностью копирования, модификации и распространения. Ruby перенесён на множество платформ. Он разрабатывался на Linux, но работает на многих версиях Unix, DOS, Windows 95/98/ NT/2000/XP, Mac OS, OS/2, и т.д. Целью создания Ruby был настоящий объектно-ориентированный интерпретируемый язык программирования. Название отсылает к языку Perl, наследником которого является Ruby (драгоценные камни: англ. pearl -- жемчужина, англ. ruby -- рубин).

Ruby имеет простой и понятный синтаксис, позволяет обрабатывать исключения в стиле Java и Python, позволяет легко переопределять операторы, которые на самом деле являются методами. Ruby -- полностью объектно-ориентированный язык программирования. Все данные в Ruby являются объектами. Также поддерживается добавление методов в класс и даже в конкретный экземпляр во время исполнения программы. Ruby сознательно не поддерживает множественное наследование, вместо которого существует концепция модулей. Ruby содержит автоматический сборщик мусора. Он работает для всех объектов Ruby, так что не надо заботиться о подсчёте ссылок даже во внешних библиотеках. Ruby не требует объявления переменных. Язык использует простые соглашения для обозначения области видимости. Ruby имеет независимую от ОС поддержку многопоточности.

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

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

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

Python -- активно развивающийся язык программирования, новые версии (с добавлением/изменением языковых свойств) выходят примерно раз в два с половиной года. Вследствие этого и некоторых других причин на Python отсутствуют ANSI, ISO или другие официальные стандарты, их роль выполняет Cpython.

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

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

В настоящее время существует огромное количество систем управления контентом, которые могут отличаться своими функциональными возможностями и простотой управления. Наиболее богатой функциональностью обладают такие распространенные CMS на русскоязычном пространстве интернета: Joomla, Drupal, 1С-Битрикс. Рассмотрим их более подробно.

1С-Битрикс - чрезвычайно удобная система для решения типовых задач. Модернизировать сайты на этой системе достаточно просто, но при условии, что сайт сделан профессиональным разработчиком Все технические задачи, связанные с SEO оптимизацией сайта на 1С-Битрикс, тоже даются легко. Нельзя назвать систему интуитивно понятной для контент-менеджера. Но, после прохождения короткого онлайн-курса всё встаёт на свои места и приходит понимание, что сайтом управлять действительно удобно. В целом система даёт ту гибкость управления контентом, которая необходима в 90% случаев.

Еще одна система управления контентом - UMI.CMS. Несмотря на то, что система входит в тройку лидеров коммерческих CMS по версии http://www.ratingruneta.ru/cms, встречается довольно редко. Архитектура системы и ограничения, которые она накладывает на разработчиков, создают довольно большой порог входа для программиста. Программист либо полностью понимает принципы её работы и может сделать всё, либо не понимает ничего. Модернизация и доработка функционала на этой системе тяжелее для выполнения и требуют больше времени. Даже при решении, казалось бы, совершенно типовых задач приходится использовать нетривиальные решения. UMI.CMS в базе предлагает достаточно четкий функционал, и при желании что-либо изменить нужно не собирать готовый функционал, а разрабатывать, причем вся разработка выполняется гораздо сложнее и не гибко. То же самое и с SEO оптимизацией на сайтах с этой системой. Дизайн админки и интерфейса элементов управления сайтом оставляет желать лучшего.

Shop-Script (WebAsyst) - нетребовательная к ресурсам система. Обычно используется когда нужно минимальными затратами развернуть интернет-магазин «здесь и сейчас». Очень неудобная при разработке дополнительного функционала. Достаточно проблемно «заточить» систему под бизнес-логику клиента -- добавить какие-то новые сущности, изменить процесс оформления заказа. Что касается SEO оптимизированности и пригодности для оптимизации -- впечатление, к сожалению, тоже отрицательное. Наиболее часто встречающаяся проблема -- дубли страниц.
При управлении небольшим интернет-магазином на базе этой системы контент-менеджер будет чувствовать себя достаточно комфортно. Но при росте ассортимента, внедрении какой-то дополнительной бизнес-логики всё усложняется.

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

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

Таблица 3.1. Сводная оценка систем

	1С-Битрикс	UMI.CMS	Shop-Script (WebAsyst)	Joomla	Drupal
Решение типовых задач	5	4	4	3	5
Решение нетиповых задач	3	3	2	2	5
Удобство повседневного управления сайтом	4	4	3	3	4
Пригодность для SEO-оптимизации, изначальная оптимизированность	5	3	2	1	5
Итого:	17	14	11	9	19

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

3.3 Программирование и тестирование сайта образовательной организации

На основании требований и структуры, представленной в п.3.1. был разработан сайт МОУ СОШ №2г. Ростова. Рассмотрим основные страницы сайта. Главная страница сайта представлна на рисунках 3.3 и 3.4.

Рисунок 3.3 Верхняя часть главной страницы сайта

Рисунок 3.4 Нижняя часть главной страницы сайта

Для оформления элементов страницы использован стиль. Описание стиля для оформления всей страницы приведено ниже:

element.style {

}

body, html {

height: 100%;

font-family: Verdana;

}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

user agent stylesheet

html {

display: block;

}

Описание стиля для оформления тела страницы (содержания, описанного внутри тэгов <body>) приведено ниже:

element.style {

}

body, html {

height: 100%;

font-family: Verdana;

}

body {

line-height: 1;

}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent;

}

user agent stylesheet

body {

display: block;

}

Inherited from

html

body, html {

height: 100%;

}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {

margin: 0;

padding: 0;

border: 0;

outline: 0;

vertical-align: baseline;

background: transparent;

}

Структура главной страницы соответствует схеме, представленной в п.3.1. Так, страница содержит название и фото организации, меню, новости, полезные ссылки.

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

<div id="content" class="clearfix">

<div id="navigation">

<ul class="tree_menu"><li class=" active"><span>

<ahref="http://school2rostov.edu.yar.ru/index.html">Главная страница</a>

</span></li>

<liclass=" "><span>

<ahref="http://school2rostov.edu.yar.ru/ svedeniya_ob_ obrazovatelnoy_ organizat_42/osnovnie_svedeniya.html">Сведенияобобразовательнойорганизации

</a>

</span>

<ulclass="sub_menu">

<li>

<span>

<ahref="http://school2rostov.edu.yar.ru /svedeniya_ob_obrazovatelnoy _organizat_42 /osnovnie_svedeniya.html">Основныесведения</a>

</span>

</li>

<li>

<span>

<ahref="http://school2rostov.edu.yar.ru/ svedeniya_ob_obrazovatelnoy_ organizat_42/struktura_i_organi_upravleniya_obrazovatelnoy_organizatsiey.html">Структура и органы управления образовательной организацией </a>

</span>

</li>

…..

</ul>

<div id="emblema">

<img src="http://school2rostov.edu.yar.ru/ foto_shkoli/ p136_ emblema_2jpg_w273_h173.jpg">

</div>

</div>

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

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

<scripttype="text/javascript">

requirejs(['jquery'],function($){

var tabs = $('.slide-tabs a');

var active = tabs.get(0);

$(active).addClass('active');

function animate(page1) {

$(page1.parentNode).animate({left: -(page1.offsetLeft) + 'px'}, 1200);

}

function swap(x) {

$(active).removeClass('active');

active = x;

$(active).addClass('active');

animate($($(x).attr('href')).get(0));

}

tabs.click(function () {

clearInterval(ID);

animateTime();

swap(this);

return false;

});

var ID;

function animateTime() {

ID = setInterval(function () {

var id = tabs.index(active);

if (id >= tabs.length - 1) {

id = 0;

} else {

id++;

}

swap(tabs.get(id));

}, 5000);

}

animateTime();

});

</script>

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

<div id="YMapsID" style="width:400px;height:400px">

<ymaps class="ymaps-map ymaps-i-ua_js_yes" style="z-index: 0; width: 400px; height: 400px;">

<ymaps class="ymaps-glass-pane ymaps-events-pane" unselectable="on" style="z-index: 500; position: absolute; width: 400px; height: 400px; left: 0px; top: 0px; user-select: none; transform: translate3d(0px, 0px, 0px) scale(1, 1); cursor: url(&quot;https://api-maps.yandex.ru/2.0.44 /release/../images/ ef50ac9e93aaebe3299791c79f277f8e.cur&quot;) 16 16, url(&quot;https://api-maps.yandex.ru/2.0.44/release/../images ef50ac9e93aaebe3299791c79f277f8e.cur&quot;), move;">

</ymaps>

<ymaps class="ymaps-layers-pane" style="z-index: 100; position: absolute; left: 200px; top: 200px;">

<ymaps style="z-index: 150; position: absolute; transform: translate3d(0px, 0px, 0px) scale(1, 1);">

<canvas height="656" width="656" style="position: absolute; width: 656px; height: 656px; left: -328px; top: -328px;">

</canvas>

</ymaps>

</ymaps>

…..

</ymaps>

</div>

Для отображения организации на карте использовался код JavaScript:

<script type="text/javascript">

require(['ymaps', 'maps/map'], function (ymaps, maps) {

ymaps.ready(function () {

var map = maps.makeMap("YMapsID", 16);

maps.showLocation(map, "\u0420\u043e\u0441\u0441\u0438\u044f \u042f\u0440\u043e\u0441\u043b\u0430\u0432\u0441\u043a\u0430\u044f \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u0433. \u0420\u043e\u0441\u0442\u043e\u0432, \u0443\u043b. \u0420\u0435\u0432\u043e\u043b\u044e\u0446\u0438\u0438 12\u0430");

});

});

</script>

На странице «Нормативные документы» представлены сканы лицензий, а также ссылки на необходимые документы.

Для отображения лицензий используется следующий код:

<a href="../litsenziya.pdf">

<img alt="" src="../litsenziya_001_w200_h275.jpg" style="width: 200px; height: 275px;">

</a>

Все документы представлены в формате pdf и при выборе документа в списке осуществляется его просмотр в браузере. Для этого используется такой код:

<ahref="../dokumenti_po_shkole/ustav_mou_soh_2.pdf" style="font-size: 18px; font-family: 'timesnewroman', times, serif;">

<spanstyle="color:#0000FF;">УставМОУСОШ №2 г.Ростова;

</span>

</a>

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

При выборе определенной группы осуществляется переход на страницу с документами. Так, при выборе группы «Положения» выполняется переход на страницу с положениями.

Для перехода по ссылке написан такой код:

<p style="text-align: center;">

<a href="../polozheniya.html">

<img alt="" src="../polozheniya.png">

</a>

</p>

Для создания таблицы использовался такой код:

table align="center" border="1" cellpadding="1" cellspacing="1" style="width: 500px;">

<tbody>

<tr>

<td style="text-align: center;">

<span style="font-family:times new roman,times,serif;">

<span style="font-size:16px;">

<span style="line-height: 18.2399997711182px; text-align: center;">Уровни образования</span>

</span>

</span>

</td>

<td>

<div style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 15px; vertical-align: baseline; font-family: Verdana; line-height: 16px; text-align: center; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">

<span style="font-family:times new roman,times,serif;">

<span style="font-size:16px;">

<span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">Школа реализует&nbsp;<strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">общеобразовательные </strong>

</span>

</span>

</span>

</div>

<div style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 15px; vertical-align: baseline; font-family: Verdana; line-height: 16px; text-align: center; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="font-family:times new roman,times,serif;"><span style="font-size:16px;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">программы</strong>&nbsp;начального общего,&nbsp;<span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; line-height: 18.2399997711182px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">основного общего&nbsp;и</span></span></span></span></div>

<div style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 15px; vertical-align: baseline; font-family: Verdana; line-height: 16px; text-align: center; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="font-family:times new roman,times,serif;"><span style="font-size:16px;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; line-height: 18.2399997711182px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">среднего общего образования в соответствии&nbsp;<strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">с уровнями&nbsp;</strong></span><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; line-height: 18.2399997711182px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"> общеобразовательных программ </strong>:&nbsp;</span></span></span></span></div>

<div style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 15px; vertical-align: baseline; font-family: Verdana; line-height: 18.2399997711182px; text-align: center; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="font-family:times new roman,times,serif;"><span style="font-size:16px;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">- начальное общее образование ;&nbsp;</span></span></span></div>

<div style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 15px; vertical-align: baseline; font-family: Verdana; line-height: 18.2399997711182px; text-align: center; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="font-family:times new roman,times,serif;"><span style="font-size:16px;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">- основное общее образование ;&nbsp;</span></span></span></div>

<div style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 15px; vertical-align: baseline; font-family: Verdana; line-height: 18.2399997711182px; text-align: center; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="font-family:times new roman,times,serif;"><span style="font-size:16px;"><span style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">- &nbsp;среднее &nbsp;общее образование;</span></span></span></div>

</td>

</tr>

<tr>

….

</tr>

</tbody>

</table>

Важную роль на любом сайте играет наличие обратной связи. На сайте МОУ СОШ №2 г. Ростова также предусмотрена форма обратной связи.

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

<form class="form_base form_edit" method="post" action="?save=ok">

<input name="id_form" type="hidden" value="1">

<dl>

<dt><label for="f_1_label">Представьтесь</label>:<span class="require">*</span></dt>

<dd><input type="edit" class="edit" name="f_1" id="f_1_label">

<div class="description"></div></dd>

<dt><label for="f_2_label">Ваш E-mail </label> :

<span class="require">*</span></dt>

<dd><input type="edit" class="edit" name="f_2" id="f_2_label">

<div class="description"></div></dd>

<dt><label for="f_3_label">Сообщение </label> :

<span class="require">*</span></dt>

<dd><textarea name="f_3" id="f_3_label"></textarea>

<div class="description"></div></dd>

<dtclass="captcha"><br> Введите код, указанный на картинке: </dt>

<dd class = "captcha">

<img src="http://school2rostov.edu.yar.ru //admin/captcha.php?time =1481037584">

<input name="captcha" class="edit"></dd></dl>

<div class="buttons"><button type="submit">

<div>

<img src="http://cms2.edu.yar.ru/public/components /forms /templates /modern/images/enter.png">&nbsp;отправить

</div></button>

</div>

</form>

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

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

Наиболее актуально создание сайтов «одностраничников». Одностраничники -- это сайты, состоящие из одной страницы. Их основная задача это демонстрация различной информации, о каком либо объекте.

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

1. С помощью CMS, таких как WordPress,AdobeMuse и прочие инструменты по созданию сайтов.

2. Сайт на чистом Html. Преимущества такого сайта в том, что он гораздо быстрее и его трудно «сломать».

3. Генератор сайтов. Это самый простой способ, но польза от таких сайтов будет на порядок ниже.

Отличия сайта - одностраничника:

- количество страниц;

- легкость продвижения;

- удобство поиска и просмотра;

- дешевизна разработки;

В ходе поиска инструмента для создания сайтов-одностраничников было рассмотрено большое количество конструкторов сайтов. Главными критериями выбора инструмента были:

- Доступность (возможность использования в «бесплатном»);

- Наличие обучающего материала по работе;

- Простота в освоении;

- Наличие русификации;

- Хороший функционал;

Опираясь на рассмотренные критерии, был выделен и рассмотрен ряд конструкторов:Wix, Tobiz, AdobeMuse, WordPress

В результате тестирования были сделаны следующие выводы:

1)КонструкторыWix и Tobiz

- плохо индексируются;

- все виджеты расширения для коммерции являются платными;

- без VIP аккаунта предоставляют скудный функционал;

2) CMSWordPress

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

3) Программа AdobeMuse.

Adobe Muse CC - это визуальный редактор от известной компании Adobe,с помощью которого можно создавать сайты различной сложности: Landing Page, сайты-визитки, портфолио,многостраничные сайты и т.д;

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

Данный конструктор не требует специальных навыков. Также она примечательна тем, что на освоение всех возможностей программы Adobe Muse у вас уйдет не более 1-2х дней. Можно выделить ряд преимуществ по отношению к другим конструкторам:

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

- в Adobe Muse можно сделать отдельные версии сайтов под планшетные устройства и телефоны;

- Adobe Muse осуществляет поддержку последних стандартов кода: HTML5 и CSS3. Это значит, что на создаваемых страницах можно размещать различные интерактивные элементы;

- можно скачать и установить программу Adobe Muse бесплатно.

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

Для начала создания сайта учащимся необходимо ознакомиться с этой системой. Поэтому на сайте МОУ СОШ №2 г. Ростова представлены материала по данному конструктору:

1.).Инструкция с иллюстрационным материалом.

2).Обучающий видеоролик с пошаговым созданием сайта на конкретном примере.

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

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

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

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

Для начала работы с Adobe Muse CC учащимся необходимо было выполнить дома следующие действия на своем ПК: