Не следует делать яркие, кричащие цвета, синий фон и красный текст.

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

2.4 Анализ существующих средств управления Web-сайтами

2.4.1 Система управления контентом Joomla

Joomla относится к портальной системе управления содержимым, она строится на модульно-компонентной системе: к сайту подключаются дополнительные модули, компоненты и плагины, которые расширяют функционал ресурса. С распространением Joomla появилось большое количество различных модулей и компонентов для этой системы и найти что-то нужное может каждый. В сети существуют два портала русскоязычной поддержки, где можно найти практически все. Собственно с помощью модулей сайт на основе Joomla можно сделать все задуманное - от простого блога до сложного web-портала. Шаблонов (тем оформления) в Интернете огромное количество, хотя даже при таком разнообразии уже часто встречаются сайты с открыто одинаковым оформлением. Из-за такой многоцелевой направленности Joomla теряет в удобстве администрирования - это уже негативные стороны - административная панель Joomla крайне неудобна и очень сильно запутана. Переходим к минусам, Joomla тяжелая система, тяжела в разрезе нагрузки на сервер, также сложна в доработке. Некоторые пользователи этой системы утверждают, что Joomla «система с непрозрачной и запутанной логикой», действительно, если необходимо что-то дополнить или изменить часто бывает сделать эти изменения сложнее, чем в других системах. В целом чтобы успешно, не задумываясь, пользоваться CMS Joomla нужно время для обучения и понимания системы и при этом Joomla одна из лучших CMS на сегодняшний день. В соответствии с рисунком 6 показан пример сайта сделанный на Joomla.

Особенности Joomla:

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

- Имеется модуль безопасности для многоуровневой аутентификации пользователей и администраторов.

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

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

- Начиная с версии 1.6 встроена многоязычность.

- Начиная с версии 2.5 расширена поддержка баз данных. Реализована поддержка Microsoft SQL Server, а с версии 3.0 -- PostgreSQL

Замена оформления для Joomla - не заметная проблема. На данный момент образовано большое количество готовых шаблонов, которые подойдут практически для каждого web-сайта. А для любителей редкостного оформления здесь также всё правильно обдумано: шаблон для CMS Joomla формируется очень легко.

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

Рисунок 6. Сайт на Joomla

2.4.2 Система управления контентом Drupal

Очень неоднозначная CMS. Начнем с того, что данная система что-то среднее между блого-CMS и новостной CMS. Главное преимущество друпала -- очень развитая и продуманная система хуков, позволяющая переопределять практически любое событие системы. Плюс два самых популярных модуля, cck и views, позволяющих конструировать произвольные типы данных и их отображение. В данной CMS административная панель устроена так, что в ней нет четкого разделения между самим сайтом и разделом административной панели. Панель управления расположена прямо на сайте - кому то это нравится, а кому то это совсем не нужно. Далее, в установочной версии нет визуального редактора, его, конечно можно установить (FCKEditor или TinyMCE), но это уже минус. Возможность комментирования есть, она называется «отзывы». Функционал работы с изображениями, по сравнению с другими CMS, очень простой и имеет мало настроек. Работа с блоками также не самая лучшая и местами очень неудобна. Но все же есть плюсы, например имеется встроенный форум, он может порадовать пользователей системы. Потому что он достаточный для жизни среднего по размерам сообщества, по некоторым данным он может вместить в себя 300000 сообщений. Не смотря на некоторые недостатки этой системы, на ней делают большие ресурсы, удобные в работе, их немного, но все же они есть. В соответствии с рисунком 7 показан пример сайта сделанный на Drupal. Сравнивая Drupal с Joomla и Wordpress можно однозначно сказать следующее - эта CMS не для тех, кто хочет создать сайт легко и быстро, установив и сразу же получив готовое. Drupal удобнее для тех, кто готов сидеть и тщательно выстраивать структуру сайта, чтобы получить то, что ему нужно, но не для привыкших к простым решениям новичков. Эта особенность заставляет начинающих задуматься о правильности выбора Drupal. Однако привлекает тех, кто любит гибкость и любит поэкспериментировать.

Рисунок 7. Сайт на Drupal

2.4.3 Система управления контентом MODX

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

Преимущества MODx CMS

1. Пользователь который выбрал данную CMS имеет возможность настраивать META-контент для каждой страницы web-сайта. И ещё может с легкостью создать/настроить дружественные URL для всех страниц web-ресурса. Благодаря всему этому, поисковики хорошо отнесутся к web-сайту и позволят получить хорошие позиции в выдаче результатов. За это многие разработчики прозвали MODx как «SEO-ориентированная система управления сайтом»

2. Гибкость для дизайна. С помощью MODx пользователь может применить абсолютно любой дизайн, без каких бы то ни было ограничений (принудительных колонок, блоков и так далее). Все, что нужно сделать, это вставить XHTML и CSS код и все. Дизайнеру предоставляется полная свобода творчества. Ему не нужно беспокоиться о том, как позднее дизайн будет интегрироваться в систему управления.

3. Соответствие Web-стандартам. Да, это означает, что у вас появилась возможность создать свой сайт с помощью CSS и XHTML, который будет соответствовать web-стандартам и отлично смотрится во всех браузерах.

4. Гибкий, мощный API и модель событий. Эта та особенность, которая делает MODx не просто системой управления, но и системой разработки CMF. Это даст полный контроль и свободу в разработке, вы сможете переопределять события, изменять функциональность ядра MODx не вмешиваясь в исходный код c помощью API.

5. MODx была признана самой перспективной CMS с открытым кодом в 2007 году, так же заняла второе место в номинации «Самая лучшая Open Source CMS 2009» и «Народный выбор лучшей Open Source CMS» в 2013 году.

Недостатком этой CMS является её система, она достаточно сложная, и для полноценной работы с ней желательно иметь хотя бы базовые знания в HTML и CSS. Отсутствие русскоязычной документации. Документация хоть и есть, но далеко не по всем дополнениям. В соответствии с рисунком 8 показан пример сайта сделанный на MODx.

Рисунок 8. Сайт на MODx

2.4.4 Система управления контентом MaxSite CMS

MaxSite CMS -- универсальная система. Это значит, что на её базе можно создать практически любой сайт с любыми задачами. Достигается это в первую очередь за счет внутренней архитектуры, которая позволяет произвольно расширять систему.

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

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

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

- Виджеты (widgets) -- это плагины, которые выводятся на сайте в сайдбаре (боковой колонке). API виджетов позволяет создавать их без особых усилий.

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

- В комплекте 79 плагинов, многие плагины универсальные.

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

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

Каждый вход на сайт сопровождается задержкой, что позволяет снизить риск подбора пароля (защита от brute force).

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

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

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

Рисунок 9. Сайт на MaxSite

2.4.5 Система управления контентом WordPress

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

При выборе для создания сайта системы «Wordpress», необходимо обратить внимание на следующие ее преимущества:

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

- Наличие удобного, настраиваемого административного интерфейса;

- Легкость при непосредственном создании проека;

- В дальнейшем, простое управление проектом и его редактирование;

- Наличие простого и удобного консоля;

- Поддержка «тем», позволяющих легко менять внешний вид, и способы вывода данных;

- Наличие больших библиотек «тем» и «плагинов»;

- Наличие системы контроля безопасности сайта;

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

- Наличие инструмента автоматического обновления до более новой версии;

WordPress был номинирован и выиграл награду «Лучшая Бесплатная CMS» в 2013 году.

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

В соответствии с рисунком 10 показан пример сайта сделанный на Wordpress.

Рисунок 10. Сайт на Wordpress

2.5 Выбор программного обеспечения для проектирования web-сайта «Информатика в школе»

Одной из наиболее востребованных CMS является WordPress. Почему WordPress является столь популярным продуктом веб-мастеров разного уровня, рассматривается в данной главе. Логотип WordPress показан на рисунке 11.

Рисунок 11. Логотип WordPress

В первую очередь стоит отметить гибкость данной системы, посредством Wordpress, можно создавать блоги, порталы, магазины, а так же ресурсы под узкую специализацию. Такая многофункциональность есть в ассортименте возможностей не в каждой системе. CMS Wordpress удалось достичь гибкости с помощью большого числа плагинов и тем оформления, которых с каждый днём становится всё больше и больше. Благодаря большому числу плагинов можно создать довольно сложный функционал на сайте, сделать его уникальным и интересным. При наличии необходимых знаний можно написать собственный плагин или PHP-код для того, чтобы реализовать новую возможность. Общее количество плагинов для WordPress 29000. А самый популярный является Akismet.

Рисунок 12. Плагинов Akismet

Из всех 29 000 плагинов Akismet скачивается чаще других. На сегодняшний день он скачан 18 207 118 раз. Что более чем удивительно, учитывая, что он входит в стандартную комплектацию WordPress и отдельно скачивать его нет необходимости. В соответствии с рисунком 12 показан принцип работы плагина Akismet.

CMS WordPress является абсолютно бесплатной и со временем не потребует покупки лицензии, как это бывает у ближайших конкурентов.

Если опираться на статистику, то на сегодняшний день более 60 миллионов сайтов различного уровня основываются именно на Wordpress. Каждую секунду на WordPress.com публикуется 6 новых постов. Если быть точным, то пять целых семь десятых поста появляются на блогах WordPress.com каждую секунду. Исходя из этих показателей, значит на WordPress.com выходит 342 поста в минуту, 20 000 в день, 7,49 млн. за год.

Если WordPress.org - самая популярная CMS в мире, то вот WordPress.com немного уступает в популярности среди бесплатных блогоплатформ Blogger от Google. На рисунке показана карта активности пользователей WordPress.com. В соответствии с рисунком 13 показана карта активности пользователей WordPress.

Рисунок 13. Карта активности

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

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

Интеграция SEO-продвижение сайта и WordPress -это еще одно очень важное преимущество рассматриваемого продукта. SEO-оптимизации контента, можно воспользоваться после установки CMS. Помимо того, что у владельца web-сайта на Wordpress есть возможность тесно интегрировать его с социальными сервисами и сетям, наладить активное комментирование статей, так же возможно воспользоваться плагином All in One SEO Pack, который облегчит оптимизацию сайта.

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

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

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

Популярность данной CMS подтверждает рейтинг Technorati, 48% из ТОП 100 блогов зарубежного рейтинга работают на WordPress. В соответствии с рисунком 14 показан пример сайта Technorati.

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

Рисунок 14. Сайт Technorati

2.6 Информационная безопасность web-сайта «Информатика в школе»

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

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

Чтобы попасть в администраторскую часть, необходимо открыть в браузере адрес http://helpofinformatik:2082 и указать логин и пароль для доступа.

В административной панели сайта была произведена замена администратора с admin на darhan. Большинство взломщиков первым делом пытаются открыть пользователя с логином admin.

3. Разработка web-сайта «Информатика в школе»

3.1 Разработка структуры web-сайта «Информатика в школе»

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

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

Процесс создания структуры происходит в два этапа:

- структуризация информации, содержащейся на сайте;

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

Структуризация информации сайта

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

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

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

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

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

Структуризация информации.

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

Далее приводится описание общей структуры web-сайта:

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

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

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

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

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

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

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

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

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

3.2 Разработка web-дизайна

Хорошо оформленный сайт - одно из главных условий в успехе.

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

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

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

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

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

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

При разработке web-сайта «Информатика в школе» большое внимание уделялось его цвету. Так как одним из факторов привлекательности сайта является его дизайн.

Синий является тем цветом, который сохраняет характер вне зависимости от своего тона. Различные тона синего цвета показаны в соответствии с рисунком 15.

Рисунок 15. Тона синего цвета

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

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

Темно синий цвет имеет усиленные свойства синего цвета. Это цвет глубокой веры: религиозной, научной, социальной деятельности, но не фанатизм, потому что вера темно синего цвета тесно связана с интеллектом и трезвой оценкой. Он склоняет к размышлениям и этическим оценкам [8].

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

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

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

Размер основного шрифта документа был установлен 12 пт. На данном web-ресурсе не применялось сглаживания и эффекты для шрифтов размером менее 14 пт. Для основного текста сайта, заголовков и ссылок используются безопасные шрифты Tahoma и Geneva.

Список безопасных шрифтов: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Geneva, Impact, Lucida Console, Lucida Sans Unicode, Palatino Linotype, Book Antiqua, Tahoma, Geneva, Times New Roman, TTrebuchet MS, Verdana, Symbol, Webdings.

Цвет шрифта. Чем контрастнее цвет шрифта и фон, тем легче читать текст. На web-сайте привычный цвет шрифта - черный. При использовании темного шрифта фон является светлым.

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

Выровненные строки по левому краю или по центру, читаются легче, чем выровненные по ширине. Выравнивание по правому краю допустимо только как специальный прием. Лучше не располагать строки вертикально. При горизонтальном расположении строк допустим небольшой (не более 20 градусов) наклон. Именно этих рекомендации придерживались при размещении материала на web-сайте [8].

На данном web-сайте применяются два основных шрифта это Tahoma и Geneva. Tahoma имеет зауженные символы, небольшие внутри буквенные просветы, узкое расстояние между соседними буквами и большое количество символов стандарта Юникод.

Изначально Tahoma разрабатывался как растровый шрифт. Векторизован он был осторожно, чтобы как можно точнее сохранить его внешний вид. Полужирное начертание в растровом шрифте соответствовало линии толщиной в два пикселя, поэтому полужирное начертание скорее соответствует жирному или сверхжирному. Шрифт выгодно отличается от, например, Arial, поскольку позволяет различать похожие символы при отображении их на мониторе. Например заглавная «I» (лат. и) отличается от строчной «l» (лат. эль).

Geneva шрифт без засечек, похож на Tahoma. Создатель шрифта Сьюзен Кэр. Её наиболее узнаваемые работы для Apple -- шрифты Chicago и Geneva. На сайте текст имеет черный цвет и расположен на белом фоне.

3.3 Установка WordPress на хостинг

Первое что необходимо сделать это скачать CMS WordPress на компьютер. Полученный ZIP-файл необходимо распаковать при помощи любого архиватора.

В соответствии с рисунком 16 показаны разархивированные файлы.

Рисунок 16. Файлы Wordpress

Далее нужно привязать доменное имя к хостингу.

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

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

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

Каждый сервер в сети имеет свой IP-адрес (это определенный набор цифр, к примеру -- 192.168.0.1). Доменное имя не всегда может иметь один и тот же IP, один из примеров -- перенос сайта на другой хостинг. Смена хостинг-провайдера -- фактически переезд на другой сервер. Именно поэтому механизм обнаружения сайта в интернете выглядит таким образом:

http://www.helpofinformatik.kz - DNS-сервер -- 178.89.157.126 -- получение содержимого сайта

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

Рисунок 17. Настройка DNS

Создание базы данных MySQL.

Перед тем, как установить WordPress на хостинг, необходимо создать базу данных MySQL, затем нужно будет создать пользователя и добавить его к базе данных, дав при этом пользователю права администратора. В зависимости от установленных на хостинге панелей управления процесс создания базы данных можно установить разными способами. Было принято решения создания базы данных на одной из самых распространённых панелей управления - cPanel, который показан в соответствии с рисунком 18.

Рисунок 18. Создание базы данных

Загрузка файлов WordPress на хостинг

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

Ввод информации о созданной базе данных

В папке с дистрибутивом WordPress нужно найти файл с именем wp-config-sample.php, и переименовать его в wp-config.php, затем нам необходимо открыть его в текстовом редакторе. В открытом файле найдите строки показанные в соответствии с рисунком 19.

Рисунок 19. Файл wp-config.php

Здесь предстоит ввести информацию о созданной недавно базе данных. База данных называется так же, как и на скриншотах выше «helpofin_helpofin». А пользователя зовут «helpofin_123» с паролем «12345678». Поэтому необходимо изменить код подобным образом:

define(`DB_NAME', `helpofin_helpofin);

define(`DB_USER', `helpofin_123');

define(`DB_PASSWORD', '12345?);

Остальные настройки оставляем без изменении.

Завершение установки WordPress

Теперь нужно набрать в адресной строке браузера «http://www.helpofinformatik.kz/wp-admin/install.php». Далее на экране монитора появляется начальная страница установки WordPress на web-сайт показанная в соответствии с рисунком 20.

Рисунок 20. Начальная страница установки WordPress

Здесь нужно ввести название блога и правильный E-mail адрес, он нужен для получения важной информации о сайте, а так же пароля в том случае, если пароль будет потерян. Нажав на кнопку «Установить WordPress» переходим на страницу, где будет показана информация необходимая для входа в администрирование сайта, в соответствии с рисунком 21.

Рисунок 21. Завершение установки

Установка завершена, CMS установлена и необходимо ввести данные для входа в административную часть сайта, которая предназначена для управления сайтом. Она показана на рисунке 22.

Рисунок 22. Вход в административную часть

Для доступа в административную часть в последующем нужно будет ввести в адресную строку вашего браузера «http://helpofinformatik/wp-admin». На этом инструкция по установке WordPress закончена и теперь нужно наполнять и развивать сайт.

3.4 Знакомство с консолью wordpress

Общее описание функционала консоли в wordpress.

Самая первая задача была войти в консоль wordpress. Для этого необходимо ввести в адресную строку название сайта, а затем поставить слеш и дописать wp-admin. В итоге получится такой адрес: www.helpofinformatik.kz/wp-admin/.

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

Консоль администрирования wordpress.

Первое, что было показано в браузере это консоль администрирования wordpress. Стартовая страница wordpress показана в соответствии с рисунком 23. Также здесь имеется возможность настроить администрирования консоли Wordpress по своему вкусу.

Рисунок 23. Консоль Wordpress

Для того что бы настроить консоль, надо нажать на кнопку «Опции отображения», и там проставить галочки что стоит отображать в консоли на главной странице администрирования Wordpress. В консоли были настроены такие функции как: текущее состояние блога, вывод последних комментариев на сайте, входящие ссылки, быстрая публикация записей, последние черновики и информация о блоге Wordpress. Все настройки показаны в соответствии с рисунком 24.

Рисунок 24. Опции отображения

Следующий пункт это пункт меню «Записи в администрировании Wordpress» показанный в соответствии с рисунком 25.

Рисунок 25. Меню «Записи»

меню «Записи» предоставляют функционал для добавления новых записей на сайт, редактирования существующих записей, добавления рубрик для сайта, а также управлением метками web-сайта. Учителя при добавлении своего материала используют данное меню, также администратором web-сайта были созданы такие рубрики как «Нормативные документы», «Материалы к уроку», «Презентации», «Разработка уроков», «Тесты». Данные рубрики позволяют легче ориентироваться на web-сайте.

Следующий компонент «Медиафайлы» показан в соответствии с рисунком 26.

Рисунок 26. Меню «Медиафайлы»

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

Пункт меню «Страницы» в администрировании wordpress показан в соответствии с рисунком 27.

Рисунок 27. Меню «Страницы»

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

Комментарии в администрировании wordpress показан в соответствии с рисунком 28.

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

Рисунок 28. Модерация комментариев

Комментарии можно отключить для записей и страниц, а может потребоваться и обратная процедура - добавить комментарии к страницам wordpress.

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

Рисунок 29. Меню «Плагины»

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

Пользователи в администрировании wordpress - предоставляет управление всеми пользователями на сайте. Здесь можно просмотреть всех пользователей на сайте, добавить нового пользователя, и просмотреть профиль администратора. В данном разделе были изменены статусы учителей в администрации сайта с «Пользователь» на «Автор». Статус «Автор» дает право учителям добавлять свой материал, а также ставить ограничения для просмотра незарегистрированным пользователям. Данный пункт показан в соответствии с рисунком 30.

Рисунок 30. Меню «Пользователи»

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

Рисунок 31. Меню «Параметры»

В общих настройках обязательно нужно прописать:

- название сайта;

- краткое описание;

- адрес WordPress;

- адрес сайта.

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

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

Рисунок 32. Настройка меню «Чтение»

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

Рисунок 33. Настройка комментариев

Последний пункт - это Медиафайлы. Тут можно указать стандартные размеры для миниатюр, обрезать или не обрезать миниатюры, а также размеры загружаемых изображений [6]. Данный пункт показан в соответствии с рисунком 34.

Рисунок 34. Настройка медиафайлов

3.5 Описание темы Intrepidity

Тема Intrepidity понравится тем, кто ведет какой-нибудь серьезный блог. Например, блог о программах, или блог интернет-магазина, в котором рекламирует свои товары. Серьезность оформления как бы подчеркивает предназначение. Кроме того тема Intrepidity обладает рядом собственных настроек, максимально облегчающих ее использование. Пример сайта показан в соответствии с рисунком 35.

Рисунок 35. Пример сайта с темой «Intrepidity»

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

Рисунок 36. Цвета темы

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

Рисунок 37. Логотип

Рисунок 38. Настройка логотипа

Меняется не только фон, логотип и картинка в шапке, но и изображение в подвале.

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

Рисунок 39. Настройка размера шрифта

Так как в тему интегрированы кнопки социальных сетей, то интеграция с Twitter, Facebook и YouTube тоже настраивается в администрировании - просто указываете свой ник. Так же можно указать адрес RSS, если он отличен от стандартного. На данном web-ресурсе, была сделана интеграция с двумя социальными сетями, такими как Twitter и Facebook. Ниже показаны настройки в соответствии с рисунком 40.

Рисунок 40. Настройка интеграции

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

Рисунок 41. Настройка шаблона

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

Рисунок 42. Настройка слайдера

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

Рисунок 43. Пример комментариев

Обобщая все это, можно сделать вывод: Intrepidity - мощная и удобная тема, в которой все сделано для удобства использования даже самыми неискушенными пользователями. Php-код шаблона страницы показан в приложении А.

3.6 Создание форума с помощью плагина Mingle Forum

Почему именно Mingle Forum.

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

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

В-третьих, легко и быстро устанавливается на блог. Необходимо создать страницу и вставить туда шорткод и форум для WordPress работает.

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

Установка форума на сайт.

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

Начнем с того, что данный плагин есть на wordpress.org, следовательно его достаточно легко установить, для этого: заходим в панель управления сайтом, в левом меню выбираем пункт «Плагины», далее подпункт «Добавить новый» и в строку поиска прописываем Mingle Forum, нажимаем на ссылку установить и активизировать.

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

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

Рисунок 44. Меню «Mingle Forum»

Подготовка сайта к работе форума

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

Для этого в левом меню панели управления вашим сайтом заходим в пункт «Настройки» и выбираем подпункт «Общие».

Здесь находим строчку «Членство» и ставим галочку напротив предложения «Любой может зарегистрироваться».

Далее нам необходимо создать страничку, где будет размещаться наш форум.

Для этого заходим в левом меню панели управления вашим сайтом в пункт «Странички» и выбираем подпункт «Добавить новую», заходим в редактор странички, выбираем вкладку «Текст» и вписываем тег [mingleforum], в соответствии с рисунком 45.

Рисунок 45. Добавление форума

Создание категорий и подкатегорий.

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

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

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

Создание форума

Категории и подкатегории (форумы) создаются в панели управления, а темы создаются непосредственно на сайте (на страничке форума) [15].

Рассмотрим создание форума на примере. На сайте создана категория под названием «Уроки информатики», а в ней создадим подкатегории (форумы): «Как сделать урок интересным» и «Как правильно вести уроки».

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

Рисунок 46. Новый форум

В открывшемся окне необходимо указать имя категории и ее описание (его можно оставить пустым), далее нажимаем кнопку «Сохранить категорию», в соответствии с рисунком 47.

Рисунок 47. Добавление категорий

И первая категория создана. Но для полного понимания функционала форума необходимо создать несколько категории.

Была создана ещё одна категория: «Что такое информатика?» - для этого нужно нажать на кнопку «Добавить новый», а далее ввести имя и описание новой категории.

Рисунок 48. Порядок категории

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

Рисунок 49. Добавление форума

В категории «Уроки информатики» будут следующие подрубрики (форумы): «Как сделать урок интересным» и «Как правильно вести уроки» - для этого нажимаем на ссылку «Добавить форум», в соответствии с рисунком 49.

И в открывшемся окне вводим имя подрубрики «Как сделать урок интересным» и ее описание «Методы и приемы для проведения интересного урока», а потом нажимаем на кнопку «Сохранить форум», в соответствии с рисунком 50. Данные форумы может создавать только администратор web-сайта, а темы для форума создаются пользователями.

Рисунок 50. Сохранение форума

Аналогично добавляем еще одну подкатегорию «Как правильно вести уроки» в категории «Уроки информатики». После всех изменении страница выглядела в соответствии с рисунком 51.

Рисунок 51. Страница с форумами

Создаем темы на форуме.

Теперь нам осталось создать темы в данных подкатегориях (форумах).

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

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

Если вы не авторизовались, то в соответствии с рисунком 52 вы увидите на страничке форума следующее:

Рисунок 52. Не авторизованный пользователь

А если авторизовались, то страничка с форумом будет выглядеть в соответствии с рисунком 53.

Рисунок 53. Авторизованный пользователь

Чтобы добавить тему входим в подкатегорию (форум) «Как сделать урок интересным» и нажимаем на ссылку «Новая тема», в соответствии с рисунком 54.

Рисунок 54. Новая тема форума

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

Рисунок 55. Добавление новой темы

Далее жмем на кнопку «Отправить». Откроется следующее окно, в нем стоит отметить меню, которая расположена вверху справа. С помощью нее можно ответить на сообщение, подписаться через e-mail или RSS фид, прикрепить и закрыть сообщение. На странице указывается, кто автор темы, а также сколько сообщении написал данный пользователь на форуме. Если данная тема не интересует пользователя, то он может быстро перейти в другую рубрику с помощью ссылок, которые расположены в самом вверху форума. Данное писание в соответствии с рисунком 56.