Разработка web-сайта Языковая школа

ВВЕДЕНИЕ
Информационно-образовательные представительские веб-сайты сегодня являются одними из наиболее активно развивающихся меди- средств для практически всех категорий людей. Особенностью информационно-образовательного сайта, в отличие от новостного сайта является его многофункциональность, т.е. посетители не только получают информацию практически по любой из интересующих тем в любой удобной форме, например, аудио, видео, а не просто текст, но еще и имеют доступ до целого ряда напрямую или опосредственно, связанному с данной информацией перечню услуг. Например, при просмотре материалов к урокам по иностранному языку, пользователь имеет возможность просмотреть учебный материал, отправить домашнее задание или задать вопрос учителю. Еще одной особенностью информационно-образовательных представительских сайтов является наличие коммуникации, обратной связи с посетителем, где сам посетитель может обсудить новость с другими посетителями, отправить свою новость и т.д. В этом случае сайт создает впечатление некой живой разумной сущности, что значительно интереснее, чем однонаправленная информация из телевизора даже с попытками эмулирования разных взглядов и мнений. Ну и, конечно, различные функции, которые присущи были ранее только интернет-магазинам, которые помогают пользователю в той или иной степени удовлетворять свои потребности в получении информации по структуре учебных курсов, их стоимости, предварительном знакомстве с учителем, проведении различных акций, системы скидок на учебные курсы, а это основная позиция маркетинга и развития экономики в целом, из одной точки входа
Исходя из этого и мировой практики направлений развития информационных технологий можно утверждать, что информационно-образовательные представительские сайты ожидает большое будущие и данный вид интернет-ресурсов будет развиваться как во всем мире, так и в России, в частности.
Информационн0-образовательный представительский сайт является системой, которая предоставляет доступ с помощью браузера к широкому спектру источников данных и сервисов - электронной почты, СУБД, систем анализа информации, приложений, электронной коммерции, Internet-хранилищам и др.
Развитие интернет-технологий позволяют расширять сферу использования приложений определяя для них веб-интерфейсы. С развитием новых технологий появилась еще одна возможность разработка клиент-серверных приложений для языковых школ, выполняющих информационно-образовательные функции с элементами маркетинга.
Решение задачи представительского, образовательного сайта невозможно без использования различных подходов, форм, методов, в том числе и современных компьютерных технологий, среди которых особое место занимает корпоративный многофункциональный сайт - представительский сайт узкопрофильного учебного заведения, такого, как языковая школа.
Предмет исследования – информационно-образовательные сайты
Объект исследования: сайт языковой школы.
Цель исследования: Проектирование и разработка сайта языковой школы.
Задачи исследования.
1. Проанализировать предприятие, структуру, бизнес-процессы, информационные процессы.
2. Определить цель создания информационной системы
3. Проанализировать современные технологии разработки для веб-интерфейсов информационных систем учебного направления, а именно, образовательных веб-порталов и определить современные требования к образовательным веб-порталам.
4. Изучить существующие технологии разработки веб-интерфейсов и мотивировать выбор технологии разработки.
5. Определить требования к дизайну программного продукта.
6. Описать основные элементы клиент-серверной разработки.
7. Определить структуру программного продукта и выполнить его прототипирование с использованием современных инструментов веб-разработки.
8. Выполнить проектирование базы данных
9. Разработать программный продукт и описать основные этапы процесса разработки.
10. Протестировать программный продукт и определить требования к нему.
Авторский вклад: Разработка информационного образовательного клиент-серверного приложения с веб-интерфейсом на базе современных технологий веб-разработки.

 
1 ОБЗОР ИСПОЛЬЗУЕМЫХ ТЕХНОЛОГИЙ
Всемирная сеть (англ. World Wide Web, сокращенно WWW) - крупнейшее всемирное многоязычное хранилище информации в электронном виде: десятки миллионов, связанных между собой документов, расположенных на компьютерах, расположенных на всей земному шару.
WWW - гипертекстовая, гипермедийная, распределенная, интегрирующая, глобальная информационная система.
WWW работает по принципу клиент-сервер: существует большое количество серверов, которые по запросу клиента предоставляют ему гипермедийный документ.
Основные термины, используемые в WWW.
Гипертекст – специально форматированная страница в пространстве WWW, размеченная средствами языка HTML. Может содержать гиперссылки c указанием URL, которые переадресовывают пользователя на другие страницы по протоколу HTTP. Посредством гиперссылок осуществляется связь между ресурсами WWW.
HTML - формат гипермедийных документов, используемых в WWW для представления информации. Представление документа на экране пользователя определяется навигатором - если пользователь работает с графическим или текстовым терминалом, в каждом случае документ на экране будет разный вид.
URL (uniform resource locator, универсальный указатель на ресурс). Такое название носят словесные ссылки на любые информационные ресурсы Internet.
Веб-страница (англ. Web-page) - информационный ресурс, доступный в сети World Wide Web (Всемирная паутина), который можно просмотреть в браузере. Обычно, информация веб-страницы записана в формате HTML, XHTML, или реже Wml (для wap-страниц).
Веб-страницы могут объединяться в сайты с помощью гипертекста с навигационными гиперссылками на другие страницы. Процесс создания веб-страницы называется версткой.
Веб-страницы могут храниться на локальном компьютере или получаться с удаленного веб-сервера. Веб-сервер может накладывать ограничения на доступ к веб-страницам, например, разрешать просмотр только из локальной сети (интранет), или открывать доступ к страницам в сети Интернет. Запросы на получение и передача веб-страниц с веб-серверов происходит по протоколу HTTP.
Критерии веб-станицы:
• кросс-браузерность;
• блочность;
• валидность исходного кода;
• оптимизированнось текстовой и графической информации;
• удобство навигации между страницами.
Веб-страницы по отношению к формированию содержания делятся на статические и динамические.
Статическая веб-страница, страница отформатированная средствами языка разметки HTML с использованием каскадных таблиц стилей.
Динамическая веб-страница (англ. Dynamic web page) - веб-страница, содержание которой может меняться.
Сначала развития сети интернет гипертекстовая навигация происходила между «статическими» документами. Позже, к веб-страницам добавили возможность отображать мультимедийный контент, взаимодействие с пользователями, и такие страницы стали называть динамическими. Еще позже веб-страницы стали формироваться средствами программирования и стали полностью динамическими с динамическим контентом. Наполнение (контент) такой веб-страницы может заменяться в зависимости от определенных условий и / или действий.
Результат использования любой техники серверного или клиентского программирования может быть описан как динамическая веб-страница.
Сайтом или веб-сайтом называют совокупность веб-страниц, которые доступны в сети Интернет. Эти страницы объединяются по содержанию, навигацией и имеют единую точку доступа, которую называют доменным именем. Физически сайт может размещаться как на одном, так и на нескольких серверах, но точка доступа к содержимому будет одна.
С точки зрения аппаратного обеспечения сайтом называют узел сети Интернет, реальный компьютер с уникальным IP-адресом, идентифицирующим его в сети (FTP-site, WWW-site и т.д.) .
1.1 Языки форматирования
Для разработки прототипов сайта существуют специальные редакторы прототипов. К наиболее известным можно отнести Balsamiq Mosquito, Serena, Axure Pro. Каждый из перечисленных редакторов обладает своими достоинствами и недостатками. Мы не будем их рассматривать. В работе прототипа интерфейса разрабатывался средствами Axure RP Pro, который был определен в качестве основного редактора прототипов.
Чтобы система работала так, как надо и смогла реализации всех потребностей, решено было использовать следующие инструменты.
Клиентские технологии (HTML5, CSS, Bootstrap, JavaScript)
HTML5 - следующая версия языка HTML. В состав рабочей группы по HTML5 вошли AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera и несколько сотен других производителей. Существует некоторая путаница относительно версионности, поскольку существуют две независимые группы разработчиков - WHATWG и W3C. WHATWG отказались от принципа 'версионности», в пользу «вечной разработки» при принятии HTML спецификации. Такое решение было вызвано попыткой ускорить воплощение стандарта в жизни, то есть разработчикам веб браузеров не нужно ждать пока выйдет официальная утверждена версия спецификации (спецификация перейдет в состояние recomendation), они могут воплощать определенные части спецификации уже сейчас. Поэтому по версии WHATWG существует только одна спецификация, которая постоянно развивается - HTML. Эти две группы работали в тандеме, WHATWG писал спецификации в режиме «живого стандарта», а W3C принимал эти спецификации как «снимки», и внедрял их в четкие версии своей спецификации. W3C работал гораздо медленнее, потому что должен обеспечивать требования большего спектра пользователей, а не только веб-браузеров. 28 октября 2014 консорциум W3C объявил о предоставлении набора спецификаций HTML5 статуса рекомендуемого стандарта. На время стандартизации HTML5 уже давно стал стандартом де-факто и активно используется в веб-приложениях.
1.2 Клиентский и серверный языки разработки
JavaScript - это особый язык программирования, основанный на объектном представлении браузера. Он нужен для того, чтобы предоставить сайта больше интерактивности по сравнению с обычным статическим HTML документом. Отличие JavaScript состоит в том, что текст программы встраивается в документ HTML и анализируется самым браузером. JavaScript - это язык программирования сценариев на веб-страницах.
В JavaScript программа обрабатывается строка за строкой, и информация об ошибках выдается после каждой прочитанной строки, если они есть.
Преимущества JavaScript.
 С помощью JavaScript создаются динамические документы HTML.
 JavaScript осуществляет проверку полей форм HTML до того, как они передались на сервер.
 Управление программой в данном языке программирования идет через локальный ввода информации.
jQuery - популярная JavaScript-библиотека с открытым исходным кодом. Она была представлена в январе 2006 года в BarCamp NYC Джоном Ресиґом (John Resig). jQuery является самой популярной библиотекой JavaScript, которая усиленно используется на сегодняшний день. jQuery является свободным программным обеспечением под лицензией MIT. Синтаксис jQuery разработан, чтобы сделать ориентирования в навигации удобнее благодаря выбору элементов DOM, созданию анимации, обработки событий и разработки AJAX-приложений. jQuery также предоставляет возможности для разработчиков, для создания плагина верхней части библиотеки JavaScript. Используя эти объекты, разработчики могут создавать абстракции для низкоуровневого взаимодействия и создавать анимацию для эффектов высокого уровня. Это способствует созданию мощных и динамических веб-страниц. jQuery UI построен на базе фреймворка и направлен на оформление основных элементов интерфейсной части сайта (меню, текстовые блоки, галереи и т.д.). Использование фреймворков в разработке является характерным признаком современного сайта и, в настоящее время, является необходимым элементом. На базе jQuery разработан фреймворк управляющий динамичным оформлением клиентской части сайта Bootstrap - популярный фреймворк, который позволяет быстро и качественно создавать статические веб-сайты и веб-приложения. По сути, это бесплатный набор инструментов, что позволяет использовать Html, CSS и JavaScript «крупными мазками». Brackets - текстовый редактор от компании Adobe, предназначенный для редактирования JavaScript, HTML и CSS. Исходный код написан с использованием веб-технологий (JavaScript, HTML и CSS) и распространяется под лицензией MIT. Редактор оформлен в виде отдельного настольного приложения, для установки которого подготовлены deb-, dmg- и msi- для Linux, OS X и Windows. Brackets поддерживает режим Live-разработки, при котором редактируемый контент (JavaScript, HTML и CSS) по мере изменения сразу отображается в синхронизирована с редактором окне браузера - разработчик может изменять содержание и сразу наблюдать к каким последствиям приводят данные изменения. Налаживание также может выполняться синхронно с браузером, разработчик может установить точку останова или откатиться на шаг назад при просмотре результатов. Есть встроенная поддержка препроцессоров LESS и SCSS. В интерфейсе применяется система контекстно-зависимых инструментов, появляются по мере необходимости в основном окне разработки. Для расширения возможностей редактора развивается система дополнений.
PHP 7 используется 82,4% всех сайтов. PHP 7 тренд веб-разработки 2018 года. В выпуске PHP 7 появились новые функции, функции, классы, интерфейсы и глобальные константы. Более того, он внес изменения в функции и модули SAPI. Излишне говорить, что некоторые из устаревших функций PHP теперь не используются и заменены другими.
Не зацикливаясь на особенностях новой версии, опишем, какие преимущества предлагает PHP 7:
Во-первых, PHP 7 обладает значительно улучшенной производительностью. Он компилирует код на машинный язык, используя молниеносный движок Just In Time (JIT). С этим движком он в 2 раза быстрее, чем PHP 5.6. В то же время, с PHP 7 кодовая база приложения использует меньше памяти.
Во-вторых, он охватывает новые объявления типов. Реализация новых объявлений облегчает чтение и понимание кода.
В-третьих, теперь PHP 7 не дает пользователям сайта белый экран, если он сталкивается с фатальной ошибкой. Вместо этого он выдает исключение, не останавливая весь сценарий.
Более того, PHP 7 предлагает вам новые операторы и функции. Вывод из этого заключается в том, что PHP 7 является хорошим выбором при разработке веб ориентированного приложения.
Инструменты веб-разработки прошли долгий путь всего за несколько коротких лет. Благодаря этому прогрессу мы можем использовать возможности проверенных библиотек, чтобы улучшить наш рабочий процесс и воспользоваться более широкими возможностями, когда речь идет о адаптивном дизайне. Мало того, мы можем создавать вещи вместе с постоянно совершенствующимися системами контроля версий. От надстроек и плагинов для браузера до процессоров, которые оптимизируют ваш код, никогда не было больше возможностей для создания потрясающих веб-приложений.
Но с ростом числа инструментов для веб-разработки, которые растут почти ежедневно, поиск лучшего программного обеспечения для выполнения работы иногда может показаться сложным. Чтобы помочь вам, мы создали список основных инструментов для разработки внешнего интерфейса, чтобы вы могли начать работу. Если вы заинтересованы в том, чтобы узнать что-то конкретное, просто выберите его из списка ниже.
Sublime Text. Отличный редактор кода, отличающегося хорошо разработанным, очень эффективным и сверхскоростным пользовательским интерфейсом. Есть несколько редакторов, например NetBeans 10, которые делают это хорошо, но, пожалуй, лучшим (и самым популярным) является Sublime Text. Sublime имеет огромное количество сочетаний клавиш в программе, таких как возможность одновременного редактирования (внесение одних и тех же интерактивных изменений в несколько выбранных областей), а также быстрая навигация к файлам, символы и строки.
Chrome Developer Tools. Позволяет редактировать свои HTML и CSS в режиме реального времени или отлаживать JavaScript, одновременно просматривая тщательный анализ производительности вашего веб-сайта. Google Chrome Developer Tools позволяет это сделать. В комплекте есть доступные инструменты как в Chrome, так и в Safari, они позволяют разработчикам получить доступ к внутренним компонентам своего веб-приложения. Кроме того, палитра сетевых инструментов может помочь оптимизировать потоки загрузки сайта, а временная шкала дает более глубокое понимание того, что делает браузер в любой данный момент.
jQuery. Разработчики уже давно считают, что JavaScript является важным интерфейсным языком, хотя и не без проблем: из-за несоответствия браузеров его несколько сложный и недоступный синтаксис означал, что функциональность часто страдала. jQuery - быстрая, небольшая, кроссплатформенная библиотека JavaScript, призванная упростить интерфейсный процесс. Абстрагируя большую часть функциональности, которую обычно оставляют разработчикам решать самостоятельно, jQuery предоставляет больше возможностей для создания анимаций, добавления плагинов или даже просто навигации по документам. jQuery сегодня безусловно самая популярная библиотека JavaScript, существовавшая с 2015 года, с установкой на 65% из 10 миллионов сайтов с наибольшим количеством посещений в Интернете.
GitHub. Для сохранения различных модификаций информационной системы по поддержке жизненного цикла технологического оборудования используем систему контроля версий (VCS) - а точнее, GitHub. Развернув свой проект с помощью сервиса, можно просматривать любые сделанные изменения или даже возвращаться к своему предыдущему состоянию (делая досадные ошибки в прошлом). Служба хостинга репозитория также может похвастаться богатым сообществом разработчиков с открытым исходным кодом (что делает сотрудничество между командами простым), а также предоставляет несколько других компонентов, таких как отслеживание ошибок, запросы функций, управление задачами и вики для каждого проекта.
Twitter Bootstrap. Позволяет использовать стандартные шаблоны для отображения типичных элементов на веб странице. Как только потребуется регулярно создавать внешние приложения, вы начнете замечать появление тех же шаблонов. Каркасы пользовательского интерфейса - это попытка решить эти проблемы путем абстрагирования общих элементов в модули многократного использования - это позволяет нам оптимизировать работу по созданию дизайна веб страницы.