Проектирование и разработка сайта | Дипломные работы

Выпускная квалификационная работа «Сайт основной общеобразовательной школы п. Журавли»

Проектирование и разработка сайта. Веб-сайт. Технологии создания сайта. База данных. Оптимизация.

Оглавление

Введение

1. СОВРЕМЕННЫЕ ТЕХНОЛОГИИ СОЗДАНИЯ САЙТОВ

1.2 Анализ современных инструментов и средств для создания сайтов

1.2 Статические и динамические сайты, особенности и отличия

1.3 Системы управления контентом в автоматизации управления сайтом

2. ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА САЙТА ШКОЛЫ

2.2 Выбор СУБД для разработки сайта

2.3 Проектирование и средства проектирования базы данных     

2.4 Среда разработки сайта, ее особенности и возможности        

2.5 Проектирование информационной структуры сайта     

2.6 Создание сайта школы    

2.6.1 Язык программирования сайта       

2.6.2 Организация внешнего вида сайта  

2.6.3 Размещение сайта на хостинге        

3. ОПТИМИЗАЦИЯ И СОВЕРШЕНСТВОВАНИЕ СОЗДАННОГО САЙТА 

3.1 Инструменты для анализа сайта        

3.2 Оптимизация страниц сайта     

3.3 Разработка и внедрение формы обратной связи на сайт

3.3.1 Создание формы для обратной связи       

3.3.2 Организация подключения и записи данных из формы в базу данных  

3.3.3 Вывод данных из формы обратной связи на экран     

3.4 Проверка функционирования формы обратной связи   

Заключение        

Список использованной литературы      

Приложение А   

Приложение Б    

Приложение В    

Введение

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

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

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

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

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

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

Целью работы является создание сайта образовательного учреждения.

Исходя из вышеописанной цели составим следующие задачи:

— изучить современные технология создания сайтов;

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

— создать сайт школы.

Объект работы: технологии создания сайтов.

Предмет работы: сайт школы.

Структура работы. Работа состоит из введения, трех глав, заключения, списка использованных источников.

1. СОВРЕМЕННЫЕ ТЕХНОЛОГИИ СОЗДАНИЯ САЙТОВ

1.2 Анализ современных инструментов и средств для создания сайтов

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

Первое, что необходимо определить на самом раннем этапе, — это на каком языке будет реализована серверная часть сайта. PHP — один из самых распространённых языков программирования общего назначения, который был создан специально для создания динамических веб-сайтов. Однако для некоторых веб-проектов может быть более уместно использовать такие языки программирования, как Java, C#, Python, Ruby и множество других.

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

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

2. Готовые системы управления контентом — это относительно быстрое и недорогое решение. Существует огромное количество популярных CMS с большими сообществами разработчиков, готовыми плагинами и модулями. Как правило, стандартная настройка таких систем не требует никаких знаний языков программирования и обычно сводится лишь к заполнению нескольких полей в пошаговой установке. Готовые CMS можно смело использовать в случаях, если веб-проект стандартный, и намного проще и быстрее воспользоваться уже не единожды опробованными и проверенными решениями в этой области.

3. Фреймворк управления контентом — это каркас для создания системы управления контентом. Основное различие CMS и CMF в том, что CMS — это, по сути, готовая система, которая зачастую даже не требует вмешательства программиста, тогда как CMF — конструктор CMS (в том числе и узкоспециализированных) непосредственно для программиста. Сайт, реализованный на CMF, может иметь более простую архитектуру и административную часть и быть менее требовательным к ресурсам сервера. Грамотно спроектированный фреймворк, который был выбран в соответствии с требованиями конкретного веб-проекта при наличии уже готовых модулей, требует от разработчика лишь правильной установки и настройки.

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

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

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

CSS 3 — это новый стандарт оформления HTML-документов, значительно расширяющий возможности предыдущего стандарта. Многие возможности, которые были труднодоступны в CSS 2.1, т. е. требовали использования дополнительных внешних программ при создании дизайна (например, графических редакторов), скриптов (таких как JavaScript) или специальных «хитростей», могут легко достигаться в CSS 3 за счет использования новых свойств оформления. Спецификация CSS 3 официально еще не появилась, хотя значительную часть ее элементов уже поддерживают многие последние версии браузеров [22].

Валидность и соответствие исходного кода страниц стандартам W3C — важнейшие составляющие поисковой оптимизации сайта. Большое количество ошибок и невалидный, плохо оптимизированный код могут заметно снизить скорость загрузки сайта и затруднить доступ к информации на сайте. Корректность кода HTML [28] помогает достигнуть такой важной части оптимизации сайта как кроссбраузерность, т. е. одинаковое отображение ресурса во всех популярных браузерах. Абсолютное большинство сайтов имеют программные ошибки и невалидный код. Многим сайтам желательно провести оптимизацию скорости загрузки страниц.

1.2    Статические и динамические сайты, особенности и отличия

Все методы разработки веб-сайтов можно условно поделить на две группы. К первой группе относятся методы создания сайтов ручного написания с использованием языка разметки HTML и различных языков программирования. Для написания статического сайта достаточно сочетания HTML и CSS. Но если необходим более сложный, динамический сайт, то тут подключают языки программирования. Основными языками программирования, которые наиболее часто используются для разработки сайтов, являются PHP, Javascript, APS.NET [13].

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

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

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

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

Все статические сайты созданы с помощью языка гипертекстовой разметки HTML. Язык гипертекстовой разметки HTML служит для наглядного и хорошо структурированного представления информации в сети Интернет [10].

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

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

— уменьшение роли вмешательства администратора путем автоматизации создания контента сайта и предоставления структурированной информации по запросу;

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

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

— выполнение различных пользовательских действий: размещение заказов, вычисление сложных арифметических действий и работа с информацией из базы данных;

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

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

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

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

Структура динамического веб-сайта
Рисунок 1.1 — Структура динамического веб-сайта

База данных — структурированный упорядоченный набор данных. Система управления базами данных (СУБД) — программа, предназначенная для организации и ведения базы данных.

MySQL — бесплатная свободно-распространяемая СУБД. Данные в базе MySQL хранятся в форме таблиц. При создании таблицы задаются ее столбцы, дальнейшие манипуляции (добавление, изменение, удаление) производятся со строками. Для управления базой данных используется язык SQL.

Язык PHP имеет встроенные функции для работы с MySQL и многими другими базами данных. Это позволяет хранить в базе данных пользователей, сообщения, содержание страниц, статистику сайта и т.п. При запросе страницы PHP обращается к базе данных, получает необходимые данные и на основе их формирует ответ пользователю (чаще всего это HTML страница) (рис. 1.2) [8].

Схема работы сервера СУБД
Рисунок 1.2 – Схема работы сервера СУБД

PHP — скриптовый язык, работающий на стороне сервера и представляющий своеобразное дополнение к нему. Этот язык позволяет не просто отправлять браузерам точные копии запрашиваемых файлов, но и запускать небольшие программки для выполнения разных задач — PHP-скрипты [19].

PHP код может быть внедрен в HTML- страницу и будет выполняться при каждом ее посещении. Код PHP интерпретируется веб-сервером и генерирует HTML-код или другой вывод (например, графику), который отсылается браузеру пользователя (рис. 1.3). Так как PHP интерпретируемый язык, он не требует компиляции (преобразования в машинный код в файле .exe) — программы хранятся на веб-сервере как обычные текстовые файлы.

Трехкомпонентная архитектура веб-приложений, реализуемых на языке PHP
Рисунок 1.3 — Трехкомпонентная архитектура веб-приложений, реализуемых на языке PHP

1.3    Системы управления контентом в автоматизации управления сайтом

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

В таблице 1.1 приведена статистика использования CMS в мировом Интернете согласно исследованию компании Q-Success (Software Quality Management Consulting) на сайте World Wide Web Technology Surveys.

Таблица 1.1 — Самые распространенные CMS

НаименованиеИспользование
WordPress24,1%
Joomla2,8%
Drupal2,1%
Blogger1,1%
Magento1,1%
Другие67,7%
Самые распространенные CMS

Как видно из таблицы 1, самыми распространенными CMS в мировой практике Интернета являются WordPress, Joomla и Drupal.

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

Таблица 1.2 — Самые распространенные языки программирования на web-серверах

НаименованиеИспользование
PHP80,5%
ASP.NET15,3%
Java2,7%
ColdFusion0,7%
Другие0,8%
Самые распространенные языки программирования на web-серверах

Из таблицы 1.2 видно, что самым популярным языком программирование является PHP, который оставляет далеко позади прочие языки программирования web-приложений.

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

Таблица 1.3 — Самые распространенные web-сервера

НаименованиеИспользование
Apache57,1%
Nginx24,6%
Microsoft-IIS13,2%
LiteSpeed2,2%
Google Servers1,3%
Другие1,6%
Самые распространенные web-сервера

Если провести анализ отечественного Интернета, то получим подобные результаты. Результаты рейтинга CMS по версии компании iTrack [16] представлены в таблице 1.4.

Таблица 1.4 — Рейтинг CMS в доменной зоне ru по версии компании iTrack

НаименованиеИспользование
WordPress31,06%
Joomla24,40%
1С-Битрикс8,20%
Drupal5,56%
MODx4,90%
DataLife Engine4,37%
uCoz3,38%
OpenCart2,82%
WebAsyst Shop-Script1,56%
UMI.CMS1,22%
Другие12,53%
Рейтинг CMS в доменной зоне ru по версии компании iTrack

Как видно из таблицы, популярность WordPress и Joomla в отечественном Интернете в отличие от мирового почти одинаковая.

Основным языком реализации и программирования WordPress и Joomla является широко используемый PHP, что позволяет использовать как обычное, так и объектно-ориентированное программирование для web-приложений, и что с успехом позволяет использовать современные подходы в программировании к разработке web-приложений.

Обе системы используют хорошо зарекомендовавшую СУБД MySQL. В тоже время список поддерживаемых СУБД у Joomla шире, чем у WordPress. СУБД являются реляционными и используют язык программирования SQL. Стоит также отметить тот факт, что Joomla в отличие от WordPress позволяет работать с PostgreSQL, что позволяет студентам получать практические навыки по применению объектно-ориентированных СУБД в Интернете.

Используемая в процессе разработки сайтов теория и практика проектирования автоматизированных систем обработки и управления информации [9] хорошо применима в случае использования Joomla и WordPress.

Немаловажным фактором является то, что WordPress и Joomla являются системами с открытыми кодами и масштабированными. Плюс они дают возможность использования пользовательского кода для реализации web-приложений. Это позволяет пользователям не только использовать стандартный функционал, но возможность разработки собственного кода для функционирования приложений.

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

2. ПРОЕКТИРОВАНИЕ И РАЗРАБОТКА САЙТА ШКОЛЫ

2.2 Выбор СУБД для разработки сайта

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

Выделяют ряд факторов выбора СУБД для реализации задачи, в частности [4]:

– требования к применению (это ограничение, которые вводятся в базу данных в приложении);

– функции и инструменты СУБД (встроенный набор инструментов, который помогает облегчить задачу разработки приложений);

– модели СУБД (иерархические, сетевые, реляционные, объектно–ориентированные);

– переносимость СУБД (системы и языки программирования, платформы)

– требования СУБД к оборудованию (минимальная скорость процессора, объем оперативной памяти, дискового пространства и т.д.);

– стоимость СУБД (затраты на приобретение и обслуживание, эксплуатационные расходы, стоимость лицензий, затраты на установку, стоимость обучения и преобразования расходов);

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

СУБД MySQL (Structured Query Language) является одной из самых популярных СУБД на сегодняшний день. СУБД MySQL рационально подходит к решению сложных задач. С помощью СУБД MySQL можно реализовать высоко функциональные системы.

К преимуществам СУБД MySQL относится:

– упрощение ввода записей;

– упрощение поиска записей;

– гибкость поиска записей;

– гибкость вывода записей;

– доступ к записям многопользовательский;

– возможность передачи записей в электронном виде.

MySQL представляет собой высокопроизводительную многопоточную и многопользовательскую систему управления реляционными базами данных, основанную на архитектуре «клиент–сервер». За последние годы эта мощная, надежная и дружественная к пользователю система управления базами данных стала стандартом для использования как в деловой, так и в личной сфере во многом благодаря ее продвинутому набору инструментов для управления данными, мягкой политике лицензирования и общемировой поддержке со стороны сообщества, куда входят как простые пользователи, так и серьезные разработчики [4].

Популярность MySQL обусловлена определенным сочетанием уникальных особенностей, к которым относятся скорость, надежность, расширяемость и открытость исходного кода [21].

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

MySQL поддерживает большинство важных требований стандарта ANSI SQL и часто позволяет дополнять его пользовательскими расширениями, функциями и типами данных, которые призваны улучшить переносимость и обеспечить расширенную функциональность для потребителей. MySQL поддерживается как операционными системами UNIX, так и отличными от них, включая Linux, Solaris, FreeBSD, OS/2, MacOS, Windows 95, 98, Me, 2000, XP, NT и Vista, и может функционировать на различных архитектурах, среди которых Intel x86, Alpha, SPARC, PowerPC и IA64.

MySQL является полноценной многопользовательской системой, а это означает, что множество клиентов могут одновременно получать доступ и использовать одну (или более) базу данных MySQL. Это особенно важно при разработке веб–приложений, которые должны поддерживать одновременное подключение множества удаленных клиентов. MySQL включает также мощную и гибкую систему привилегий, позволяющую администраторам защищать доступ к критическим данным, используя комбинацию из схем проверки подлинности пользователей и хостов [12].

MySQL предусматривает наличие интерфейсов программирования приложений API (Application Programming Interfaces) на множестве языков, что дает возможность создавать управляемые базами данных приложения на множестве языков программирования. В настоящее время MySQL позволяет работать с такими языками, как C, C++, Eiffel, Java, Perl, PHP, Python, Ruby и Tcl, имеются также коннекторы для JDBC–, ODBC– и .NET–приложений.

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

2.3    Проектирование и средства проектирования базы данных

Разработка базы данных ведется в три этапа [7]:

1) Концептуальное проектирование – представляет собой сбор, анализ и редактирование требований к данным, которое состоит из следующих пунктов:

– исследование предметной области, актуализация ее информационной структуры;

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

– моделирование и интеграция всех пользовательских представлений.

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

2) Логическое проектирование– процесс преобразования требований к данным в структуре данных. На выходе получается СУБД–ориентированная структура базы данных и спецификации прикладных программ. На этом этапе могут моделироваться базы данных относительно различных СУБД и производиться сравнительный анализ моделей.

3) Физическое проектирование – определение особенностей хранения данных, методов доступа и т.д.

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

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

Концептуальная модель изучаемой предметной области, должна представлять собой модель, в которой в содержательной форме описывается состав системы, ее компоненты и их взаимосвязи, перечень основных показателей, переменных, как контролируемых, так и неконтролируемых внешних факторов. А также их взаимосвязей с показателями качества системы, перечень решений, которые необходимо определить в результате решения поставленной задачи [14].

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

Большинство современных подходов к проектированию баз данных базируется на использовании разновидностей так называемой ER–модели. Моделирование предметной области основывается на использовании графических диаграмм, которые включают небольшое число компонентов разного рода [3].

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

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

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

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

Физическая модель данных должна соответствовать описанию данных в базе данных конкретной системы управления базами данных, то есть схеме данных. Специфика конкретной системы управления базами данных включает в себя ограничения на именование объектов базы данных, ограничения на поддерживаемые типы данных. Помимо этого, специфика конкретной системы управления базами данных при физическом проектировании включает выбор решений, которые связанны с физической средой хранения данных (выбор методов управления дисковой памятью, разделение БД по файлам и устройствам, методов доступа к данным), создание индексов [1].

Для проектирования базы данных справочной системы предназначена среда MySQL Workbench. Она используется для визуального проектирования баз данных и управления сервером MySQL.

Функционал программы:

−    программа позволяет наглядно представить модель базы данных в графическом виде;

−    наглядный, функциональный механизм установки связей между таблицами, в том числе «многие ко многим» с созданием таблицы связей;

−    восстановление структуры таблиц из уже существующей на сервере БД (связи восстанавливаются в Inno DB, при использовании My ISAM – связи необходимо устанавливать вручную);

−    удобный редактор SQL запросов, позволяющий сразу же отправлять их серверу и получать ответ в виде таблицы;

−       возможность редактирования данных в таблице в визуальном режиме.

2.4    Среда разработки сайта, ее особенности и возможности

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

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

В программе поддерживаются передовые технологии веб-разработки, включая PHP, HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMA Script Harmony, шаблоны Jade, ZenCoding, Emmet, JavaScript.

PhpStorm включает в себя всю функциональность среды WebStorm (HTML/CSS редактор, JavaScript редактор) и добавляет полнофункциональную поддержку PHP и баз данных / SQL.

Основные функции PhpStorm 10:

  • интеллектуальный редактор PHP кода с подсветкой синтаксиса, автодополнением кода, расширенными настройками форматирования кода, предотвращением ошибок на лету;
  • поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3, генераторы, сопрограммы и все синтаксические улучшения;
  • PHP рефакторинги, code (re)arranger, детектор дублируемого кода;
  • поддержка Vagrant, Composer, встроенный REST клиент, Command Line Tools, SSH консоль;
  • поддержка фреймворков (MVC view для Symfony2, Yii) и специализированные плагины для ведущих PHP фреймворков (Symfony, Magento, Drupal, Yii, CakePHP и многие другие);
  • визуальный отладчик для PHP приложений, валидация конфигурации отладчика, PHPUnit с покрытием кода (поддержка PHPUnit 5), а также интеграция с профилировщиком;
  • HTML, CSS, JavaScript редактор; отладка и модульное тестирование для JS; поддержка HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, Emmet и других технологий веб-разработки;
  • полный набор инструментов для фронтенд-разработки;
  • поддержка стилей кода, встроенные стили PSR1/PSR2, Symfony2, Zend, Drupal и другие;
  • интеграция с системами управления версиями, включая унифицированный интерфейс;
  • удалённое развёртывание приложений и автоматическая синхронизация с использованием FTP, SFTP, FTPS и др.;
  • LiveEdit: изменения в коде можно мгновенно просмотреть в браузере без перезагрузки страницы;
  • PHP UML;
  • интеграция с баг-трекерами;
  • инструменты работы с базами данных, SQL редактор;
  • кроссплатформенность (Windows, Mac OS X, Linux).

PhpStorm 10 обеспечивает расширенную поддержку PHP 7, включая инспекции совместимости. Возможность работы с:

  • безымянными классами;
  • декларациями типов возвращаемого значения;
  • операторами объединения со значением «ноль»;
  • декларациями группового использования;
  • лексическими анализаторами, учитывающими контекст,

а также много других возможностей, раскрывающих все возможности PHP 7.

При реорганизации кода в PhpStorm 10 можно локально переименовать переменные, параметры, классы, методы, константы или метки команд перехода прямо в редакторе.

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

Другие улучшения PHP:

  • дублирование поиска по выделению метода;
  • интеллектуальное копирование/добавление в последовательности;
  • возможность конфигурации значений date() или time() в шаблонах Live Templates в качестве временных отметок Unix.

Интерактивная консоль отладки для PHP (REPL) – эта новейшая возможность PhpStorm 10 позволяет преобразовывать переменные, вызывать функции PHP и определять дополнительные функции – и всё в процессе работы.

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

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

Отслеживание потока данных особенно полезно при работе со сторонним кодом или работе с общим кодом в больших группах разработчиков.

PhpStorm 10 поддерживает все новые функции и улучшения, выпущенные в PHPUnit 5, широко используемой тестовой платформе для PHP. Среди возможностей также есть:

  • новый принцип действия аннотации @depends;
  • тесты, помеченные @small, могут быть также помечены в качестве рискованных, если они осуществляют ввод-вывод;
  • добавленные подтверждения assertFinite(), assertInfinite() и assertNan().

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

Также есть возможность отладки веб-приложений в Xdebug или Zend Debugger.

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

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

Поддержка Angular 2 в PhpStorm включает в себя автоматическое завершение кода и навигацию по директивам и связкам и распознает новые атрибуты событий для TypeScript или ECMAScript 2015.

PhpStorm обеспечивает интеграцию с TSLint, анализатором для кода TypeScript. Позволяет увидеть предупреждения и ошибки прямо в редакторе по мере ввода кода.

Все функции и улучшения WebStorm доступны в PhpStorm, встроенные по умолчанию или доступные в качестве бесплатных плагинов в репозитории. Другие заслуживающие упоминания функции включают в себя улучшенную поддержку ECMAScript 2015, TypeScript 1.5 и 1.6, обновлённую поддержку React, форматирование связанных вызовов метода, новые инспекции Node.js, графики в CPU-профайлере Node.js, возможность запуска отдельных тестирований Mocha и т.д.

PhpStorm 10 помогает кодировать специальные символы в HTML-коде, заменяя их HTML-элементами, начинающимися с &. Также можно выбрать символы или блок кода и применить кодировку специальных символов XML/HTML.

Чтобы сделать команду FindinPath более эффективной, разработчики добавили вкладку предпросмотра, которая отображает первые 100 результатов в режиме реального времени. Теперь для того, чтобы найти всё необходимое, не нужно выходить из диалога.

Конфигурация стиля кода стала ещё проще. Нужно выбрать фрагмент кода, нажать Alt+Enter и выбрать действие настройки стиля. Можно просмотреть и настроить стиль кода, который может быть применён к данной части кода, в доступном режиме предварительного просмотра.

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

Обновлённые инструменты базы данных:

  • исходная самодиагностика для MySQL, PostgreSQL, MS SQL;
  • настраиваемая форма поведения действия Execute;
  • новое окно преобразования таблиц.

Другие улучшения:

  • обновлённые регулярные выражения в действии поиска с заменой;
  • настройки для пользователей с нарушением цветового зрения;
  • совместимость с SVN 1.9.

Поддерживаемые операционные системы:

  • Windows 10;
  • Windows 8;
  • Windows 7;
  • Windows Vista;
  • Windows 2003;
  • Windows XP (вкл. 64-бит);
  • MacOSX 10.5 и выше;
  • Linux.

Требования к компьютеру:

  • объём оперативной памяти: 1 Гб (минимум);
  • объём оперативной памяти: 2 Гб (рекомендуется);
  • минимальное разрешение экрана: 1024х768.

Сайт программы — http://www.jetbrains.com/phpstorm. На рис. 2.1 показано рабочее окно программы PHPStorm.

Окно программы PhpStorm 10
Рисунок 2.1 – Окно программы PhpStorm 10

2.5    Проектирование информационной структуры сайта

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

Схематическое изображение иерархической структуры
Рисунок 2.2 — Схематическое изображение иерархической структуры
Структура школьного сайта
Рисунок 2.3 — Структура школьного сайта

2.6    Создание сайта школы

2.6.1 Язык программирования сайта

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

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

— автоматическое извлечение POST- и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

— файловые функции, успешно обрабатывающие как локальные, так и удалённые файлы;

— автоматическая отправка HTTP-заголовков, информирующих обозреватель о начале передачи HTML-документа;

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

— обработка файлов, загружаемых на сервер.

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

Синтаксис PHP подобен синтаксису языка JavaScript.

Простейшая программа на PHP выглядит следующим образом:

<?php echo ‘Привет, мир!’; ?>

PHP исполняет код, находящийся внутри таких ограничителей, как <?php и ?>. Всё, что находится вне ограничителей, выводится без изменений. В основном это используется для вставки PHP-кода в HTML-документ.

Помимо ограничителей <?php?>, допускается использование сокращенных ограничителей <? и ?>.

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

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

PHP поддерживает три типа комментариев: в стиле языка JavaScript: ограниченные /* */, начинающиеся с // и идущие до конца строки и оболочки UNIX, начинающиеся с # до конца строки [2, 14].

Все операции и операторы полностью аналогичны Javascript за одним отличием: для сложения строковых переменных используется операция «.» (точка).

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

  • include(«имя_файла») — текст внешнего файла помещается в место вызова функции, после чего сразу исполняется. В случае помещения в условный оператор выполняется только при требуемом условии.
  • гequire(«имя_файла») — текст внешнего файла подключается заранее и определенные в нем функции доступны в любом месте основного сценария. Не используется для вставки текстовых данных.

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

Функция fopen() открывает файл (расположенный локально или же в Интернет) для целей, которые определяются режимами, обозначенными в табл. 2.1.

Таблица 2.1 – Список режимов функции fopen()

ModeОписание
‘г’Открывает файл только для чтения; помещает указатель в начало файла
‘г+’Окрывает файл для чтения и записи; помещает указатель в начало файла
ModeОписание
‘w’Открывает файл только для записи; помещает указатель в начало файла и обрезает файл до нулевой длинны. Если файл не существует — пробует его создать
‘w+’Открывает файл для чтения и записи; помещает указатель в начало файла и обрезает файл до нулевой длинны. Если файл не существует — пробует его создать
‘a’Открывает файл только для записи; помещает указатель в конец файла. Если файл не существует — пытается его создать
‘a+’Открывает файл для чтения и записи; помещает указатель в конец файла. Если файл не существует — пытается его создать
Список режимов функции fopen()

Функция fwrite() записывает строку в файл.

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

Функция feof() осуществляет проверку — достигнут ли конец читаемого файла/ресурса.

Функция fgets() осуществляет чтение из файла/ресурса определенные порции данных, размер которых задан (рекомендуется для интернет-ресурса). Если величина порций не задана, то функция считывает файл построчно: echo fgets($fd);

Внутри PHP-скрипта существует несколько способов получения доступа к данным, переданным клиентом по протоколу http (из формы методами post и get).

Для обращения к переменным, переданным с помощью HTTP-запросов, используется специальный массив — $_REQUEST. Этот массив содержит данные, переданные методами POST и GET, а также с помощью HTTP cookies. Это суперглобальный ассоциативный массив, т.е. его значения можно получить в любом месте программы, используя в качестве ключа имя соответствующей переменной (элемента формы).

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

  • $_GET[] — содержит все значения, передаваемые в сце­нарий с помощью метода формы GET.
  • $_POST[] — содержит все значения, передаваемые в сценарий с помощью метода формы POST.
  • $_SERVER[] — содержит все значения, получаемые от сервера.

Необходимо отметить, что наиболее часто употребимым в скриптах элементом является куда помещается имя скрипта, начиная от корневой директории виртуального хоста, т.е. если строка запроса представляет собой адрес http://www.mysite.ru/test/index.php?id=1&test=wet&id_theme=512 то элемент $_SERVER[‘PHP_SELF’] будет содержать фрагмент «/test/index.php». Как правило, этот же фрагмент помещается в элемент $_SERVER[’SCRIPT_NAME’].

При необходимости можно передавать параметры прямо в php-скрипт, минуя форму. Для этого следует сформировать следующую ссылку, которая будет передана в скрипт по методу get.

2.6.2 Организация внешнего вида сайта

За внешний вид сайта для пользователя отвечают главным образом технологии HTML и CSS.

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

Сам по себе HTML-документ представляет собой текстовый файл, содержащий набор инструкций для представления информации в требуемом виде в окне браузера. Инструкции записываются в виде тегов (читается тэг, от англ. tag) и имеют следующий синтаксис:

<имя_тега [возможные параметры]>

Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/

<html>

HTML-документ

</html>

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

<img src=»image.gif»> — тег для вывода изображения image.gif в окно браузера;

<input type=»text» value=»»> — тег для ввода значений в окне браузера.

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

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

<!— Это комментарий —>

Имеется ряд тегов, для которых завершающие теги опускаются большинством авторов документов. Например, тег <p> (начало абзаца), как правило, не имеет в документе завершающего тега </p>. Его завершение определяется браузером по «ходу» документа, например, если встретится очередной открывающий тег <p>.

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

При создании HTML-документов рекомендуется соблюдать следующую структуру:

html>

<head>

<!— Раздел заголовка —>

</head>

<body>

<!— Тело документа —>

</body>

</html>

Здесь <html> — это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу. Тег <head> означает раздел заголовка, который обычно включает:

  1. Заголовок страницы

<title>Государственный центр оказания услуг</title>

  • Кодировку, в которой представлен HTML-документ

<meta charset=»utf-8″>

  • Краткое описание содержания документа

<meta name=»description» content=» «>

  • Список ключевых слов документа

<meta name=»keywords» content=»»>

5.      Подключаемые внешние javascript файлы (скрипты)

<script src=»js/bootstrap.min.js»></script>

6.      Внешние таблицы стилей (css) для форматирования документа

<link rel=»stylesheet» href=»css/style.css»>

Раздел тега <head> может содержать и другие конструкции языка HTML. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид [15]:

<head>

<title>Заголовок страницы</title>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<meta name=»description» content=»описание сайта»>

<meta name=»keywords» content=»ключевые слова»>

</head>

В тегах <body>…</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) [15].

HTML-документ рекомендуется всегда завершать закрывающим тегом </html> и тем самым сигнализировать браузеру о завершении документа. Это полезная информация может быть использована, например, при обрыве связи во время загрузки страницы. Тогда отсутствие тега </html> может означать неполную загрузку страницы. На практике встречается и много других случаев, когда важно иметь корректную разметку страницы для исключения неверного отображения содержания документа в исключительных ситуациях.

Текст HTML-документа, как правило, представляет собой непосредственно текст и ссылки, ведущие либо на отдельные фрагменты того же документа, либо на другие документы (рис. 2.4).

Структура документа HTML
Рисунок 2.4 – Структура документа HTML

Пример: простейший HTML-документ (рис. 2.5).

Пример простого HTML-документа
Рисунок 2.5 – Пример простого HTML-документа

Для создания заголовков в HTML используются теги:

<h1></h1> — заголовок 1 уровня;

<h2></h2> — заголовок 2 уровня;

<h3></h3> — заголовок 3 уровня;

<h4></h4> — заголовок 1 уровня;

<h5></h5> — заголовок 1 уровня;

<h6></h6> — заголовок 1 уровня.

На рис. 2.6 показано отображение заголовков разного уровня в браузере.

Отображение заголовков в браузере
Рисунок 2.6 – Отображение заголовков в браузере

HTML есть возможность создавать нумерованные и маркированные списки [19].

Тег <ol>…</ol> — создает нумерованный список элементов/

Атрибуты:

start=»N» — начать нумерацию с числа N;

type=»…» -определяет формат нумерации:

1 — арабские цифры (по умолчанию);

A — прописные буквы (A, B, C);

а — строчные буквы (a, b, c);

I — прописные римские цифры (I, II, III);

i — строчные римские цифры (i, ii, iii).

Тег <ul>…</ul> — создает маркированный список элементов.

Атрибут:

type=»…» — определяет формат маркера:

disk — диск (по умолчанию);

circle – окружность;

square – квадрат.

<li>…</li> — задает элемент списка в нумерованном или маркированном списке

Атрибуты:

type=»…» — формат номера или маркера (см. описание <ol> и <ul>);

value=»N» — задает номер элемента списка.

Примеры создания отображения списка показаны на рис. 2.7 – 2.8.

Создание списка в HTML
Рисунок 2.7 – Создание списка в HTML
Отображение списка в браузере
Рисунок 2.8 – Отображение списка в браузере

Для создания ссылок используется тег <a>…</a>.

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

Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, на пример: http://www.example.com/docs/about.html. С помощью абсолютного адреса можно ссылаться на любой открытый ресурс в Интернете. Если нужно поставить ссылку на главную страницу сайта, указывают его адрес и слеш.

Пример для абсолютного адреса:

HTML-код: <А href=»http://www.yandex.ru»>Яндекс</A>

В браузере ссылка обычно представляется как подчеркнутый текст. При клике по ссылке браузер загружает страницу, указанную в атрибуте href (рис. 2.9).

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

Пример файловой структуры
Рисунок 2.9 — Пример файловой структуры

Например, чтобы поставить ссылку из файла file1.html на файл file2.html (см. рис. 12), необходим следующий HTML-код:

<A href=»folder1/file2.html»>file2.html</A>

А чтобы ссылка в файле file2.html указывала на file1.html:

<А href=»../file1.html»>file1.html</A>

Две точки (..) означают переход к родительскому каталогу.

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

Для открытия ссылки в новом окне используется атрибут target со значением _blank.

Пример: <a href=»http://ya.ru/» target=»_blank»>Яндекс</a>

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

CSS используется применительно к языкам разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.

Ключевое понятие в CSS — селектор — представляет собой правило для использования стиля. Браузер для каждого элемента пытается применить стиль в соответствии с заданным правилом. Стиль содержит набор свойств.

Различают простые селекторы, которые будут использованы для указанного элемента, в приведенном ниже примере — к любому заголовку h1, h2, h3:

  • h1 {font-family:sans-serif}
  • h2 {font-family:sans-serif}
  • h3 {font-family:sans-serif}

Селекторы групп:

h1, h2, h3 {font-family: sans-serif}

Этот фрагмент эквивалентен предыдущему фрагменту, состоящему из трех простых фрагментов [16].

Селекторы класса:

*.firstclass{ color: green } — все элементы, имеющие class=firstclass

или

.firstclass{ color: green } — все элементы, имеющие class=firstclass

а также

Hl.firstclass{ color: green } — только элементы H1, имеющие class=firstclass

Селекторы идентификатора ID:

  • h1#chapter1 { font-family: sans-serif } — для <h1 id=»chapter1″>…</h1>
  • #chapter1 { font-family: sans-serif } — для любого элемента с id=»chapter1″

Селекторы атрибутов:

  • h1[class] { font-family: sans-serif } — элемент имеет class

— h1[class=»fancy»] { font-family: sans-serif } — элемент имеет class=»fancy»

— *[title] { font-family: sans-serif } — любой элемент, имеющий заголовок

Селектор потомков (устанавливает иерархию применения):

tr h1 { font-family: sans-serif } — <tr><td><h1>…</h1></td></tr>

Псевдоклассы (особый вид динамических атрибутов, которые изменяются в зависимости от определенных действий):

  • a:link — ссылки, которые не были посещены
  • a:visited — посещенные ссылки
  • a:hover — выделенная в данный момент ссылка
  • a:active — активные ссылки.

При оформлении страницы доступны следующие семейства (family) шрифтов:

—        Serif — шрифт с засечками. Обычно используется при бумажной печати. Наиболее используемый шрифт — Times;

—        Sans-serif — шрифт без засечек. Подходит для заголовков. Наиболее часто применяемые шрифты этого семейства — Arial, Helvetica, Verdana;

—        Monospace — шрифт, который обеспечивает равную ширину символов. Служит для вывода примеров кода, поскольку внешний вид этого текста будет соответствовать текстовой консоли. Наиболее распространен шрифт Courier;

—        Fantasy, Cursive — декоративные и курсивные шрифты. Не рекомендуются к применению, поскольку шрифты этой группы необязательно присутствуют в компьютере, на котором будут просматривать html-страницу.

Выбор шрифта осуществляется свойством font-family. Пример использования семейств стилей:

  • <p style=”font-family: serif”>Serif: Образец текста</р>
  • <р style=”font-family: sans-serif”>Sans-serif: Образец текста</p>
  • <p style=”font-family: cursive”>Cursive: Образец текста</p>
  • <p style=”font-family: fantasy”>Fantasy: Образец текста</p>
  • <p style=”font-family: monospace”>Monospace: Образец текста</p>

Свойство font-family может содержать перечисление шрифтов:

p{font-family:”Times New Roman”, Times, serif;}

В этом случае браузер последовательно будет пытаться найти соответствующий шрифт в системе. Если конкретный шрифт не будет найден (в примере «Times New Roman”, Times), то будет применен шрифт, назначенный для serif-семейства по умолчанию [19].

Можно указать начертание шрифта с использованием свойства font-style. Допустимые значения этого свойства:

font-style: normal | italic | oblique | inherit

где normal — обычное начертание; italic — курсив (имитация рукописного шрифта); oblique — наклонный шрифт (образован наклоном обычного).

Размер шрифта задается с помощью свойства font-size. Его возможные значения:

— larger и smaller — константы, определяющие относительный размер;

— xx-small, x-small, small, medium, large, x-large, xx-large — константы, определяющие абсолютный размер;

— ЧИСЛО % — число, определяющее размер в процентах от шрифта родительского элемента;

— ЧИСЛО px — число, определяющее размер в пикселах. Кроме того, размер шрифта указывается в специальных единицах: em (высота элемента, равная размеру текущего шрифта), ex (высота символа х), пункты (pt).

Толщина шрифта регулируется с помощью свойства font-weight (рис. 13, 14):

font-weight: normal | bold | bolder | lighter | 100, 200.. 900

Здесь normal — обычная толщина; bold — жирный шрифт; bolder — предельно жирный шрифт; lighter — тонкий шрифт; 100 — тонкий шрифт; 400 — соответствует нормальному; 700 — жирному.

Свойство color задает цвет шрифта (рис. 2.10, 2.11). Можно указать цвет по его названию на английском языке (red, green, lime) или задать точное значение цвета в системах RGB, HSL, а также в RGBA, HSLA, для которых добавлен канал прозрачности. Полный перечень допустимых значений свойства color приведен в спецификации (см. http://www.w3.org/TR/css3-color/).

Определение стилей для текста в блоке body
Рисунок 2.10 – Определение стилей для текста в блоке body
Рисунок 2.11 – Определение стилей для заголовков сайта

Выбор цветовой схемы является очень важным этапом создания дизайна сайта. Фон элементов может быть задан однородным цветом, одиночным или мозаично расположенным.

Используются следующие свойства фона:

— background-color — однородный цвет константой или кодом в одной из допустимых систем цветности. Пример (рис. 2.12):

header .navbar-default { background-color: #fff;}

Определение фонового цвета для навигационного меню верхней части сайта
Рисунок 2.12 – Определение фонового цвета для навигационного меню верхней части сайта

— background-image — фоновое изображение. Пример:

body {background-image:url(‘paper.gif’);}

— background-repeat — флаг мозаичного размножения изображения. Пример:

body {

background-image:url(‘gradient2.png’);

background-repeat:repeat-x;

}

— background-attachment — указание на то, будет ли изображение смещаться при скроллировании или будет оставаться на месте. Пример:

background-attachment:fixed;

— background-position — свойство, определяющее позицию размещения изображения на устройстве отображения. Пример:

body

{

background-image:url(‘img tree.png’); background-repeat:no-repeat; background-position:right top;

}

В соответствии со спецификацией (см. http://www.w3.org/TR/ css3-text/) текст может быть подвергнут преобразованиям при отображении, например, таким как:

— изменение регистра букв (capitalize | uppercase | lowercase);

— изменение пробелов (collapse | preserve | preserve-breaks);

— ограничение длины строки;

— формирование переносов слов;

— форматирование текста;

— выравнивание и разреживание;

— отступы;

— декорирование.

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

В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами.

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

Размер отступа задается свойствами ‘padding-top’, ‘padding-right’, ‘padding-bottom’, ‘padding-left’ или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.

Пример (рис. 2.13):

.container {

padding:0 20px 0 20px;

}

Определение отступов для блока container
Рисунок 2.13 – Определение отступов для блока container

Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: ‘border-top’, ‘border-right’, ‘border-bottom’, ‘border-left’. Указываются толщина, тип начертания границы и цвет.

Пример: header .nav .caret {

border-bottom-color: #f5f5f5;

border-top-color: #f5f5f5;}

При расчете размеров блока необходимо помнить про толщину границы. Внешнее прозрачное поле может быть задано либо единственным свойством ‘margin’ с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств ‘margin-top’, ‘margin-right’, ‘margin-bottom’, ‘margin-left’ для каждой из сторон в отдельности. Пример:

— body { margin: 2em }

— body { margin: 1em 2em }

— body { margin:1em 2em 3em }

— body {margin-top: 1em; margin-right: 2em;}

CSS поддерживает 4 вида позиционирования:

— статическое (static);

— абсолютное (absolute);

— относительное (relative);

— фиксированное (fixed).

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

Статическое позиционирование устанавливается для всех элементов по умолчанию и означает нормальное следование элементов. В явном виде спецификатор static применяется для перекрытия унаследованных стилей.

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

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

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

Например, следующие свойства стиля обеспечат отображение элементов-изображений img в правой части страницы, а все остальные элементы будут размещены в свободном пространстве слева:

img {float: right; padding: 15px;}

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

2.6.3 Размещение сайта на хостинге

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

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

Сервис предлагает готовый сайт. Администратору сайта остается только ввести информацию о своем учреждении и включить сайт.

Возможности хостинга:

— домен третьего уровня;

— сайт частично заполнен и может использоваться уже через несколько минут;

— разнообразные шаблоны от профессиональных дизайнеров;

— все шаблоны содержат разделы, необходимые для сайта образовательного учреждения. Шаблоны соответствуют требованиям статьи 29 Федерального закона «Об образовании в Российской Федерации» (№273-ФЗ от 29.12.2012). В шаблонах уже созданы все необходимые разделы и страницы;

— удобный визуальный редактор;

— легкость добавления текста, видео и фотографий;

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

— удобные подсказки и описания элементов сайта;

— техническая поддержка по электронной почте

— сайт работает под управлением CMS Joomla. Администратор системы может использовать все возможности этой системы, одной из самых распространенных и развитых в российском сегменте интернета.

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

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

3. ОПТИМИЗАЦИЯ И СОВЕРШЕНСТВОВАНИЕ СОЗДАННОГО САЙТА

3.1 Инструменты для анализа сайта

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

Отправка конкурентного сайта на анализ
Рисунок 3.1 – Отправка конкурентного сайта на анализ

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

Далее приведем результаты проверки сайта.

Аренда домена сайта заканчивается: 17.05.2017 (через 5 месяцев 13 дней)

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

Глубина сайта — 3 уровня, начиная с главной страницы. Чем больше глубина сайта, тем больше действий нужно пользователям, чтобы с главной страницы дойти до раздела с интересующей информацией.

Обработаны 12 724 ссылки. Обработанные ссылки – это все внутренние ссылки с сайта, по которым прошёл наш робот и проанализировал соответствующие страницы.

Текстовых ссылок на сайте: 12 567 (98.8 %) из них с alt/title 2 755 (21.9 %). Ссылок-изображений на сайте: 157 (1.2 %) из них с alt/title 0 (0 %). Атрибут «alt» — значимый атрибут для поисковых систем. Это текстовое описание изображения, которое появляется, если пользователь по каким-либо причинам не может загрузить картинку. Атрибут «title» — текст, который будет отображён в качестве всплывающей подсказки при наведении мышкой на картинку. Обычно он допускает более расширенное описание, чем «alt». Следует обязательно заполнять эти атрибуты тега img текстовым содержимым, т.к. они также влияют на ранжирование сайта в поисковых системах.

Дата регистрации домена сайта: 17.05.2016 (1 год 6 месяцев 17 дней назад). Возраст домена — важный фактор для продвижения. Чем он больше, тем больше доверия к сайту у поисковой системы. «Старые» сайты продвигаются гораздо быстрее, чем «молодые», чей возраст не превышает 1 года.

Загружены 150 страниц. Загруженные страницы — это физические страницы сайта, которые были найдены путём обхода всех внутренних ссылок сайта нашим роботом.

Средний размер страницы на вашем сайте: 10.2 Кб (маленький объём). Объём контента на страницах сайта важен и поисковикам, и посетителям. Страницы с маленьким объёмом несут гораздо меньше информации. Они могут быть бесполезны для посетителей и будут отмечены роботом поисковой системы как малоинформативные. Среднестатистический объём контента на странице 30 килобайт.

Найдены ссылки на 26 внешних сайтов. Всего на сайте обнаружено 330 внешних ссылок. Внешние ссылки — это ссылки на другие сайты. Внешние ссылки «забирают» ссылочный «вес» с сайта и по этой причине они крайне нежелательны в больших количествах.

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

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

Индексы ранжирования сайта в поисковых системах: индекс цитирования Яндекса — 90.

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

Найдено 135 страниц с пустыми тегами «meta-keywords». Хотя поисковые системы не придают первоочередное значение мета-тегу «keywords», они учитывают его при ранжировании сайта. Например, поисковый робот Google Adsense использует это поле для подбора рекламы. При правильном подборе ключевых слов заполнение мета-тегов «keywords» будет полезным.

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

На сайте обнаружены страницы с превышением количества заголовочных тегов и списков: на 4 страницах превышено количество тегов «strong». Заголовочные теги должны отображать основную тему контента страницы. Крайне нежелательно использовать их слишком часто. Но нельзя и пренебрегать ими: для поисковой системы они являются наиважнейшими элементами контента страницы.

 На сайте обнаружены дублированные теги «meta-keywords» (всего: 2 тега). Хотя поисковые системы не придают первоочередное значение мета-тегу «keywords», они учитывают его при ранжировании сайта. Например, поисковый робот Google Adsense использует это поле для подбора рекламы. При правильном подборе ключевых слов заполнение мета-тегов «keywords» будет полезным.

Найдено 118 страниц с пустыми тегами «meta-description». Не все поисковые системы используют тег «meta-description» в качестве краткого описания содержания сайта. Однако в некоторых случаях мета-тег «description» имеет вес: он появляется на странице результатов поиска с запросом по целевым ключевым фразам. Особенно это касается flash-сайтов, которые обычно имеют минимальный объём текстового контента. В этих случаях поисковые системы используют в качестве описания теги «meta-description», которые обязательно должны содержать главные ключевые слова и быть интересными для пользователя.

Сайт найден в каталоге Dmoz. Сайт не найден в каталогах Yandex, Mail.ru, Rambler.ru. Наличие сайта в каталоге очень положительно влияет на продвижение в поисковых системах. С каталога можно получить дополнительный целевой клиентский трафик. Необходимо делать сайт более «видимым» в интернете, обязательно размещая его в каталогах и списках сайтов.

На вашем сайте выявлено 125 циклических ссылок — страницы, ссылающиеся сами на себя. Циклические ссылки — это ссылки, направляющие пользователя на ту же страницу, где он находится. Они крайне нежелательны на сайте, поскольку вводят посетителя в заблуждение. Ссылочный вес по таким ссылкам не передаётся, и для продвижения они бесполезны.

Количество страниц сайта, проиндексированных Yandex: 200 Количество страниц сайта, проиндексированных Google: 330. Необходимо стремиться к индексации всех страниц сайта (непроиндексированная страница «не видна» поисковой системе и не появляется по запросам пользователей; сайт фактически не работает с целевой аудиторией). Нужно проставить внутренние ссылки на всех страницах, охватив весь объём сайта. Для лучшей индексации желательно составить карту сайта — sitemap.xml. По ней роботы поисковых систем будут ориентироваться, какие страницы нужно внести в индекс.

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

Дублированных тегов «meta-description» на сайте не обнаружено. Не все поисковые системы используют тег «meta-description» в качестве краткого описания содержания сайта. Однако в некоторых случаях мета-тег «description» имеет вес: он появляется на странице результатов поиска с запросом по целевым ключевым фразам. Особенно это касается flash-сайтов, которые обычно имеют минимальный объём текстового контента. В этих случаях поисковые системы используют в качестве описания теги «meta-description», которые обязательно должны содержать главные ключевые слова и быть интересными для пользователя.

Средняя скорость загрузки страницы роботом: 0.805 сек. (нормальная скорость). Скорость передачи данных от сайта к пользователю — один из важнейших показателей удобства работы. Как правило, пользователей не устраивают «медленные» сайты. Поисковые системы также могут понизить рейтинг сайта за слишком низкую скорость передачи информации. Время открытия страниц может быть разным в зависимости от времени суток, удалённости сервера, на котором расположен сайт, от количества посетителей на вашем сайте и т. д.

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

Сервер, на котором расположен сайт, ответил на все запросы. При выявлении случаев отказа сервера, на котором расположен ваш сайт, следует провести тестирование его работы. Чрезмерная нагрузка на сервер (например, резко возросший трафик или некорректно запрограммированные модули сайта, что создает узкие места для загрузки контента) может серьёзно снизить активность посетителей сайта.

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

Страниц с кодом ответа «4**» (например, «Ошибка 404: страница не найдена») не обнаружено. Код ответа 4** указывает на несуществующую страницу. Возникает по причине ошибки в адресе ссылки или в связи с тем, что страница удалена с сайта. Такие страницы не индексируются поисковой системой. На рассмотренном сайте такие страницы отсутствуют.

Все теги «title» на сайте заполнены. Тег «title» — один из важнейших тегов, оказывающих прямое влияние на продвижение сайта. Он не только сообщает посетителю название страницы, но и привлекает внимание поисковых роботов. Почти все поисковые системы используют тег «title» для того, чтобы понять тематику сайта. Поисковые системы используют теги «title» в процессе определения релевантности страниц сайта. Следует заполнять тег «title» так, чтобы на каждой странице он был уникальным.

Страниц с кодом ответа «5**» (например, «Ошибка 501: невозможно обработать запрос») не обнаружено. Страницы с кодом ответа 5** возникают по причине перегрузки сайта или чрезмерно жёстких ограничений на количество запросов. Следует уделить этому внимание: если поисковый робот не сможет проанализировать страницы, индексируемость сайта будет неполной.

3.2    Оптимизация страниц сайта

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

Поисковая система, ПС – программно-аппаратный комплекс с пользовательским интерфейсом, предназначенный для поиска и выдачи информации по запросу пользователя [26] в котором представлены все данные Интернета, структурированные и сгруппированные [27].

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

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

Наиболее релевантные и важные по значимости страницы перечислены в убывающем порядке. Для поисковых систем релевантность страницы определяется тем, насколько сайт соответствует ключевому запросу. Важность страницы определяется количеством и качеством ссылок, указывающих на данный сайт с других страниц. Ключевой запрос (поисковый запрос) — это слово, словосочетание или целое предложение, которое пользователь вводит в строке поиска поисковой системы чтобы найти интересующую его информацию [8].

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

Согласно данным Forrester Research Inc, посетители Интернета находят сайты через поисковые машины – 81%, по ссылке с другого сайта – 59%, посредством маркетинговых коммуникаций – 56%, через информацию по телевидению – 48%, путем ввода и угадывания адреса – 41 %, из онлайн-рекламы – 20%, по радио – 19%, с помощью директ-мэйл – 10% [1].

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

Оптимизация сайта является первым и основным этапом процесса поискового продвижения сайта, поэтому ее предназначение совпадает с предназначением самого поискового продвижения, а именно: вывод сайта на предварительно определенные позиции в органической выдаче поисковых систем [26].

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

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

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

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

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

4. Оптимизация кода веб-страниц. Следующим важным моментом в процессе оптимизации веб-сайта является оптимизации кода веб-страниц (HTML–верстки).

5. Оптимизационная верстка направлена на увеличение привлекательности страницы сайта для поисковых машин. Грамотно расставленные HTML–теги указывают поисковым роботам на особенности страницы и помогают им правильно проиндексировать страницы, составить описание веб-сайта.

Лучший способ убедиться в том, что HTML–код легок для обработки поисковой машиной – следовать рекомендациям Wide Web Consortium (W3C). Для этого HTML-код страниц сайта проверяют валидатором (Validator): http://validator.w3.org/.

Можно выделить следующие шаги оптимизации кода веб-страницы:

1. Помещение в тег <title> ключевых слов, уникальных для каждой страницы сайта. Поисковые машин просматривают ключевые слова, найденные в этом теге как важные, именно они объясняют ей, что собой представляет страница сайта.

2. Использование тегов <meta name = “description”> и <meta name = “keywords”> для помещения туда описания веб-страниц и ключевых слов.

3. Использование тегов <h1>–<h6>. Поисковые машины индексируют эти теги и придают им значение, они служат для выделения важных заголовков и разделов.

4. Использование атрибута тега <image> alt (добавляет описательный текст для изображений). Большинство поисковых машин не умеют индексировать изображения, атрибут «alt» может повлиять на соответствие сайта определенному запросу.

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

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

7. Наличие карты сайта (SiteMap) упрощает индексацию поисковыми машинами страниц сайта [1].

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

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

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

Имеет значение авторитетность сайта, который ссылается на веб-ресурс. Существуют «сильные» и «слабые» ссылки. Сильная ссылка – ссылка, размещенная на странице с высоким авторитетом. Авторитет ссылающейся страницы определяется, исходя из количества и силы, ведущих на нее ссылок. Различные поисковые системы используют разные показатели, определяющие авторитетность сайта. Это может быть «тематический индекс цитирования» (тИЦ), применяемый в каталоге Яндекса, «PageRank» и «взвешенный индекс цитирования» (вИЦ), применяемый в поисковой системе Google и др.

Любая входящая ссылка имеет свое качество, которое определяется множеством параметров. Наиболее значимыми параметрами качества являются.

1. Возраст домена сайта (желательно от шести месяцев).

2. Количество текста на ссылающейся странице (не менее 2000 символов).

3. Индексация ссылающегося сайта поисковыми машинами.

4. Качество анкора. Важно иметь преимущественно анкоры ссылок которые состоят из чистого вхождения ключевых слов, по которым оптимизируется веб-сайт. В данном случае, предпочтительна следующая структура: чистое вхождение – 80%, морфологическое вхождение (с изменением падежа, склонения, рода и т.п.) – 15%, естественность (любой текст ссылки) – 5%.

Отсутствие тега «nofollow» в коде ссылки, данный тег запрещает индексацию ссылки.

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

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

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

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

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

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

Поисковые роботы стремятся проиндексировать как можно больше информации. Возможность попадания в индекс напрямую зависит от авторитетности ресурса, уровня вложенности страниц, наличия файла sitemap.xml, отсутствия ошибок, мешающих нормальной индексации сайта. Основными инструментами управления индексацией сайтов являются robots.txt, метатеги, теги, атрибуты noindex и nofollow.

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

Во flash-документе индексируется текст, который размещен только в определенных блоках.

На сегодняшний день могут индексироваться следующие типы документов: PDF, Flash (Adobe Systems); DOC/DOCX, XLS/XLSX, PPT/ PPTX (MS Office); ODS, ODP, ODT, ODG (Open Office); RTF, TXT.

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

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

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

Виды запросов по частотности у каждой SEО-компании имеют свои параметры. Вот цифры, которые использует в своей работе один из крупных оптимизаторов – компания Ingate: <1000 низкочастотные запросы; <10 000 среднечастотные запросы; >10 000 высокочастотные запросы

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

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

Желательные доработки помогают сделать сайт более привлекательным для поисковых роботов, чтобы при прочих равных он ранжировался поисковой системой выше других ресурсов [17].

После технической оптимизации особое внимание уделяют наполнению сайта – контенту. Если страниц мало или меньше, чем у конкурентов в ТОПе, то следует создать новые и наполнить их качественным содержанием [25].

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

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

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

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

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

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

Интернет-СМИ помещая в себя множество уникальных текстов в большей степени нуждаются в продвижении в социальных сетях, средствах медийной и контекстной рекламы, а также в ссылочном продвижении [20].

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

Основным направлением продвижения сайта в сети является его раскрутка в поисковых системах. Однако, прежде чем начать раскрутку, нужно выполнить ряд работ по подготовке сайта к продвижению. Эти работы называются внутренней оптимизацией сайта [2].

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

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

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

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

4.      Создание семантического ядра. В это понятие можно включить подбор наиболее важных ключевых слов для продвижения в поисковых системах, составление описаний (description) для каждой страницы и др.

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

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

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

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

Можно предложить следующий список основных методов внешней оптимизации сайта: 1.      Регистрация сайта в поисковых системах. В качестве основных поисковых систем, занявших рынок России можно предложить считать наиболее популярными на основе беглого анализа рынка в порядке уменьшения популярности Яндекс, Google, Mail, Bing.

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

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

2.      Регистрация сайта в каталогах. Этот подход может быть немного устаревшим способом раскрутки сайта, хотя и может применяться в какой-то мере до сих пор. Новички только что вступившие на путь SEO- оптимизаторов и специалистов по продвижению иногда даже могут считать этот способ основным. Однако возможно в ряде случаев, хаотичная регистрация сайта в каталогах может дать отрицательный эффект [2].

Для положительного результата продвижения можно порекомендовать регистрировать сайт лишь в трастовых каталогах с высокой посещаемостью и открытыми внешними ссылками (без тегов noindex и nofollow). Желательно также, чтобы эти сайты-каталоги сами были представлены в 2-ух наиболее популярных каталогах Рунета — каталоге Яндекса и Dmoz.

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

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

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

Помимо грамотного написания рекламного обзора (можно порекомендовать заказывать у специалистов) может потребоваться поиск и публикация (через посредника за оплату соответственно) статьи на сайтах подобного уровня [2].

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

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

7.      Реклама товаров и услуг в специализированных сервисах (Яндекс.Маркет и др.). Охват аудитории здесь может быть небольшим, но более целевым с меньшим процентом разброса аудитории (по региону, возрасту и др.).

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

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

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

3.3    Разработка и внедрение формы обратной связи на сайт

3.3.1 Создание формы для обратной связи

Процесс работы над формой обратной связи показан на рис. 3.2

Создание формы обратной связи
Рисунок 3.2 – Создание формы обратной связи

В приложении А приведен код формы обратной связи. На рис. 3.3 показан внешний вид созданной формы.

Внешний вид формы обратной связи
Рисунок 3.3 – Внешний вид формы обратной связи

3.3.2 Организация подключения и записи данных из формы в базу данных

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

Подключение к базе данных
Рисунок 3.4 – Подключение к базе данных
Создание обработчика для данных из формы
Рисунок 3.5 – Создание обработчика для данных из формы

Код обработчика данных из формы представлен в приложении Б.

3.3.3 Вывод данных из формы обратной связи на экран

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

Вывод списка вопросов на страницу сайта
Рисунок 3.6 — Вывод списка вопросов на страницу сайта

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

Внешний вид таблицы показан на рис. 3.7.

Таблица со списком данных из формы обратной связи
Рисунок 3.7 – Таблица со списком данных из формы обратной связи

3.4    Проверка функционирования формы обратной связи

Для проверки функционирования формы необходимо ввести в нее данные и нажать «Отправить».

На рис. 3.8 показана таблица с внесенными демонстрационными данными. После нажатия кнопки «Отправить» они должны записаться в базу данных.

Форма с тестовыми данными
Рисунок 3.8 — Форма с тестовыми данными

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

Записанная информация в базе данных
Рисунок 3.9 — Записанная информация в базе данных
Таблица с записанными тестовыми данными
Рисунок 3.10 — Таблица с записанными тестовыми данными

Заключение

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

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

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

Для проектирования базы данных была использована среда MySQL Workbench, которая предназначена для визуального проектирования баз данных и управления сервером MySQL. После проектирования базы данных, была создана база данных на сервере MySQL. После этого был разработан веб-сайт школы. В качестве языка программирования приложения был использован – PHP. Как среда разработки приложения была использована программа – PHPStorm.

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

Список использованной литературы

  1. Александрова С. И. Технология оптимизации веб-сайта как составляющая рекламной компании в сети интернет [Электронный ресурс] / С. И. Александрова // URL: http://conf.sfukras.ru/sites/mn2011
    /thesis/s4/s4_120.pdf (18.01.2017).
  2. Бичкуров А. О. Разработка способов внутренней и внешней оптимизации веб-ресурсов [Электронный ресурс] / А. О. Бичкуров, С. А. Румянцев / URL: mgutupenza.ru/mni/content/files/2012_Bichyrova,%20
    Rymyancev.pdf ( 23.01.2017).
  3. Вересников Ю. К. О надежности систем обработки информации / Ю. К. Вересников //Актуальные проблемы современной науки. — 2011. — № 2 (58). — С. 193-195.
  4. Гридина Е. Г. Использование поисковых систем для увеличения посещаемости федеральной системы информационно-образовательных ресурсов / Е. Г. Гридина, Д. С. Лысенко // Открытое образование. 2009. №3. C. 43–48.
  5. Дронов В. А. PHP, MySQL, HTML5 и CSS3. Разработка современных динамических Web–сайтов [Текст] / В. А. Дронов. – СПб.: BHV, 2016. – 688 c.
  6. Дунаев В. HTML, скрипты и стили / В. Дунаев. — СПб: БХВ-Петербург, 2011- 816 с.
  7. Жуков Р. А. СУБД с открытым исходным кодом: возможность применения алгоритмов распараллеливания / Р. А. Жуков // Технические науки. – 2015. – № 1–2 (35–36). – С. 20 – 21.
  8. Зудилова Т. В. Web-программирование HTML / Т. В. Зудилова, М. Л. Буркова — СПб: НИУ ИТМО, 2012. – 70 с.
  9. Кириллов В. В. Введение в реляционные базы данных [Текст] / В. В. Кириллов, Г. Ю. Громов. — М.: Гелиос АРВ. – 2002. – 458 с.
  10. Ключевой запрос: [Электронный ресурс] / URL: http://seo-for-ucoz.com/publ/seo_terminy/kljuchevoj_zapros_poiskovyj_zapros/1-1-0-24 (Дата обращения: 15.01.2017).
  11. Комолова Н. HTML, XHTML и CSS / Н. Комолова, Е. Яковлева. — СПб: Питер, 2012 – 304 с.
  12. Корнилов В. С. Анализ систем управления контентом, используемых в системе образования [Электронный ресурс] / В. С. Коринлов, В. И. Цыганов // Режим доступа: http://www.ido.rudn.ru/vestnik/2013/2013_1/9.pdf (14.01.2017)
  13. Кузнецов, М. В. PHP на примерах [Текст] / М. В. Кузнецов, И. В. Симдянов. – СПб.: BHV, 2012. – 400 c.
  14. Лабберс К. HTML5 для профессионалов: мощные инструменты для разработки современных веб-приложений / К. Лабберс, Н. Олберс, К. Салим. — М.: Вильямс, 2011 – С. 22.
  15. Ласкова Н. А. Школьный сайт как весомой составляющей Единое информационное образовательное пространство учебного заведения / Н. А. Ласкова // Компьютер в школе и дома. – 2012. — № 3. – С. 32 – 35.
  16. Маклафлин Б. PHP и MySQL. Исчерпывающее руководство [Текст] / Б. Маклафлин. – СПб.: Питер, 2014. – 544 с.
  17. Масляк Т. А. Анализ методов разработки сайтов / Т. А. Масляк, Т. А. Колесникова // Информационные технологии: наука, техника, технология, образование, здоровье: Тезисы докладов XXIII Международной научно-практической конференции, Ч.IV (20-22 мая 2015 г., Харьков). – С. 230.
  18. Мирошниченко Г. А. Реляционные базы данных. Практические приемы оптимальных решений / Г. А. Мирошниченко. — «БХВ-Петербург», 2005. – 400 с.
  19. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие/Сост. С. М. Наместников. — Ульяновск: УлГТУ, 2014. – 91 с.
  20. Официальный сайт фирмы iTrack [Электронный ресурс]. Режим доступа: http://itrack.ru/research/cmsrate/ (29.02.2016).
  21. Процессы поисковых систем: [Электронный ресурс] // Энциклопедия поискового продвижения Ingate. URL: http://www.sembook.ru/book/poiskovye_sistemy/protsessy-poiskovykh-sistem/ (24.02.2016).
  22. Процессы поисковых систем: [Электронный ресурс] // Энциклопедия поискового продвижения Ingate. URL: http://www.sembook.ru/book/poiskovye_sistemy/protsessy-poiskovykh-sistem/ (24.01.2017).
  23. Росс В. С. Создание сайтов: HTML, CSS, PHP, MySQL [Текст]. Учебное пособие, ч. 2 / В. С. Росс — МГДД(Ю)Т, М. — 2011 – 68 с.
  24. Самарев Р. С. Создание простейших HTML-страниц, валидаторы кода. Каскадные таблицы стилей CSS: методические указания к выполнению практикума № 1 и лабораторной работы № 1 по дисциплинам «Языки интернет-программирования» и «Практикум по интернет-программированию» / Р. С. Самарев. — Москва: Издательство МГТУ им. Н. Э. Баумана, 2015. — 39 с.
  25. Способы продвижения различных типов сайтов: [Электронный ресурс] / Энциклопедия маркетинга. – URL: http://www.marketing.spb.ru/lib-comm/internet/seo&analytics.htm?printversion (Дата обращения 24.01.2017)
  26. Шварц, Б. MySQL. Оптимизация производительности / Б. Шварц и др., 2-е издание. – Пер. с англ. – СПб.: Символ-Плюс. — 2010. – 832 с.
  27. Шинкевич, А.В. Современные технологии создания web-сайтов / А. В. Шинкевич // Проблемы и перспективы современной науки: сб. ст. участников V Респ. науч.-практ. семинара молодых ученых, Минск, 28 нояб. 2014 г. / редколл: В. В. Гедранович [и др.]; Минский ун-т управления. – Минск: Минский университет управления, 2015. – С. 110–114.
  28. Эндрю Р. CSS: 100 и 1 совет, 3-е издание / Р. Эндрю. – Пер. с англ. – СПб: Символ- Плюс, 2010. – 336 с.
  29. Якубайтис Э. А. Информационные сети и системы / Э. А. Якубайтис. — М.: Финансы и статистика, 1996. — 368 с.
  30. Янк К. РНР и MySQL. От новичка к профессионалу / К. Янк. — М.: Эксмо, 2013. — 384 с.
  31. 3 шага в ТОП: оптимизация без ошибок [Электронный ресурс] / Ingate – URL: http://cdn3.ingate.ru/digital/optimization_without_mistakes.pdf (24.01.2017).
  32. SeoPult. Словарь: [Электронный ресурс] / URL: https://seopult.ru/library/Поисковая_система. (дата обращения: 2.01.2017).
  33. SEO-ВИКИ: [Электронный ресурс] / Rookee – Система автоматического продвижения сайтов / URL:http://wiki.rookee.ru/Poiskovaya-sistema (Дата обращения: 2.01.2017).
  34. The W3C Markup Validation Service [Electronic resource]. – Mode of access: http://validator.w3.org/ (29.01.2017).
  35. WordPress official website, [Электронный ресурс]. Режим доступа: http://wordpress.org/ (29.01.2017).

Купить данную работу или заказать подобную