Web-дизайн информационного сайта на основе современных средств разработки

7 этап -- заполнение сайта контентом (информацией)

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

8 этап -- тестирование сайта и исправление ошибок

Тестирование сайта может проводить как разработчик, так и заказчик. Наилучший вариант -- это совместное тестирование.

Учитывая поставленные выше задачи, разработчик счел наиболее оптимальную базу для разработки такого рода Web-сайта - HTML+система управления содержимым CMS Joomla v.1.5.8.

CMS Joomla v.1.5.8 -- система управления содержанием (Control Management System), написанная на языке PHP и использующая в качестве хранилища содержания базу данных MySQL. CMS Joomla v.1.5.8 является свободным программным обеспечением, защищённым лицензией GPL. Одной из главных особенностей данной системы является относительная простота управления при практически безграничных возможностях и гибкости при изготовлении сайтов.

Система управления содержанием CMS Joomla v.1.5.8 является ответвлением широко известной CMS Mambo. Команда независимых разработчиков отделилась от проекта Mambo по причине несогласия в экономической политике. И 16 сентября 2005 года в свет вышла первая версия Joomla, являющаяся по сути переименованной Mambo 4.5.2.3 и включающая в себя исправления найденных на тот момент ошибок и уязвимостей.

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

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

Достоинства CMS Joomla:- CMS Joomla содержит в себе модуль безопасности для уровневой идентификации пользователей/администраторов. - Полностью продуманная структура добавления и редактирования новостей- Возможность публиковаться авторам- Поддержка многопользовательского режима (именно благодаря этому авторов может быть достаточно много)- Работа под Linux- Возможности администрирования.- Форум опросы голосования для действенной обратной связи.- Предварительный просмотр перед окончательным размещением.- Создание огромного числа страниц- Заранее продуманная организация конструкции сайта- Большое количество модулей и компонентов, делающих CMS Joomla достаточно гибкой.- Возможность создания уникального дизайна.- Возможность самому писать расширения для Joomla.- Ограничение доступа сайта для незарегистрированных пользователей.- Управление всеми модулями сайта из панели администратора одним движением.

Недостатки CMS Joomla:

- Слабая безопасность от взлома;- Есть некоторые недочёты в иерархии элементов движка. - В CMS Joomla нельзя управлять одновременно несколькими сайтами. Для каждого нового web-ресурса необходимо устанавливать отдельную CMS. Хотя для некоторых пользователей это может и не являться проблемой;- Наличие большого количество лишнего кода, как в самом движке, так и шаблонах. Лишний программный код - это ненужные расширения, плагины, незадействованные скрипты, ссылки на сайты разработчиков. Более того, весь этот мусор сгруппирован не лучшим образом;- Медленная загрузка web-страниц по сравнению с другими некоторыми CMS и тем более классическими сайтами. - Отвратительная индексация поисковыми системами. Обусловлена сложной иерархией элементов.

1.2 Разработка базы данных MySQL

MySQL - это система управления базами данных.

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

MySQL - это система управления реляционными базами данных.

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

Программное обеспечение MySQL - это ПО с открытым кодом.

ПО с открытым кодом означает, что применять и модифицировать его может любой желающий. Такое ПО можно получать по Internet и использовать бесплатно. При этом каждый пользователь может изучить исходный код и изменить его в соответствии со своими потребностями. Использование программного обеспечения MySQL регламентируется лицензией GPL (GNU General Public License), http://www.gnu.org/licenses/, в которой указано, что можно и чего нельзя делать с этим программным обеспечением в различных ситуациях. Если работа в рамках GPL вас не устраивает или планируется встраивание MySQL-кода в коммерческое приложение, есть возможность купить коммерческую лицензированную версию у компании MySQL AB.

В каких случаях следует отдавать предпочтение СУБД MySQL?

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

Технические возможности СУБД MySQL

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

1.2.1 Связь с базами данных MySQL

СУБД MySQL - одна из множества баз данных, поддерживаемых в PHP. Система MySQL распространяется бесплатно и обладает достаточной мощностью для решения реальных задач.

SQL - это аббревиатура от слов Structured Query Language, что означает структурированный язык запросов. Этот язык является стандартным средством для доступа к различным базам данных.

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

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

В MySQL определены три базовых типа данных: числовой, дата и время и строчный. Каждая из этих категорий подразделяется на множество типов.

Основные из них приведены в таблице 1:

Таблица 1. Типы данных в MySQL

Создание новой базы данных MySQL осуществляется при помощи SQL-команды CREATE DATABASE.

CREATE DATABASE IF NOT EXISTS `base`

DEFAULT CHARACTER SET cp1251 COLLATE cp1251_bin

Создание новой таблицы осуществляется при помощи SQL-команды CREATE TABLE. Например, таблица books для книжного магазина будет содержать пять полей: ISBN, автор, название, цена и количество экземпляров:

CREATE TABLE books (ISBN CHAR(13) NOT NULL,

PRIMARY KEY (ISBN),

author VARCHAR(30),

title VARCHAR(60),

price FLOAT(4,2),

quantity TINYINT UNSIGNED);

Каждый столбец после своего типа данных содержит и другие спецификаторы:

Таблица 2. Спецификаторы в MySQL

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

1.2.2 Хранение данных в реляционных базах данных

Представьте себе самую простую таблицу имен, номеров телефонов, адресов и т.д. Именно так и хранятся данные реляционных БД - в таблице, организуются посредствам столбцов и строк. Каждому столбцу присвоено имя, которое отображается в названии, все значения в этом столбце принадлежат к переменным только одного типа. Столбцы расположены в определенном строгом порядке, в то время как строки неупорядочены. Зачастую данные некоторых ячеек в одной таблице связаны со значением ячеек другой таблицы и так далее. Запросы к БД возвращают результат в виде таблицы.Данные в БД делятся на уникальные или неуникальные. Неуникальные - это имя, год рождения, время и т.д., в то время, как уникальные - номер кредитки, договора хостинг-услуг. Уникальные значения присутствуют в списках так называемого «уникального индекса»Большим достоинством MySQL является возможность работы с интерфейсом программного приложения API (Application Program Interface). API может обеспечить простой доступ из программы пользователя к СУБД. Пусть даже эти программы будут написаны на на Perl, C и т.д.Самой популярной «связкой» для управления сайтами считается MySQL с языком PHP. Многие CMS написаны на PHP в связке с БД MySQL. Одним из самых ярких примеров данного «союза» может служить движок для сайтов и блогов Joomla, завоевавший огромную популярность в мире. Взаимодействие с MySQL в данном случае ведется посредством совокупности функций. Примером такой функции может служить «mysql_connect», которая соединяется с сервером БД и возвращает дескриптор соединения с ней.Существует множество СУБД поддерживающих SQL язык запросов: MySQL, mSQL, PostgreSQL, MSSQL и многие другие. Каждая из них имеет преимущества в определенной сфере. И все же именно MySQL завоевала широкое признание и популярность в Интернете благодаря своей гибкости и универсальности.

1.3 Разработка административной части сайта

Административная часть сайта представлена в виде системы управления содержимым.

Система управления содержимым (англ. Content management system, CMS) -- программа, используемая для управления содержимым чего-либо (обычно это содержимое рассматривается как неструктурированные данные предметной задачи в противоположность структурированным данным, обычно находящимися под управлением СУБД). Обычно такие системы используются для хранения и публикации большого количества документов, изображений, музыки или видео.

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

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

Генерация страниц по запросу. Системы такого типа работают на основе связки «Модуль редактирования > База данных > Модуль представления». Модуль представления генерирует страницу с содержанием при запросе на него, на основе информации из базы данных. Информация в базе данных изменяется с помощью модуля редактирования. Страницы заново создаются сервером при каждом запросе, а это создаёт нагрузку на системные ресурсы. Нагрузка может быть многократно снижена при использовании средств кэширования, которые имеются в современных web-серверах.

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

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

Обоснование выбора CMS (Content Management System) необходима развитая гипертекстовая структура - HTML создан именно для этого; необходимо обеспечить гибкую структуру управления материалом - управлять HTML-содержанием удобно с помощью PHP+MySQL. Именно эта связка позволяет генерировать динамические HTML-страницы; необходимо реализовать вариативность представления материала - в этом случае использование HTML+CSS более чем обоснованно. Именно эта комбинация средств позволяет создавать мультимедийные документы; необходимо обеспечить поддержку внутренней обратной связи web-сайта.

1.4 Язык PHP

PHP - язык создания сценариев, который давно перерос свое название. Дело в том, что PHP - это аббревиатура от слов Personal Home Page. Первая версия PHP была создана Расмусом Лердорфом в 1994 г. и представляла собой набор инструментов для отслеживания посетителей Web-страницы. Со временем PHP из набора инструментов превратился в полноценный язык программирования, а его название было изменено как рекурсивное образование PHP HyperText Preprocessor (препроцессор гипертекста PHP).

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

Существуют два основных конкурента PHP: Active Server Pages (ASP) компании Microsoft и ColdFusion компании Allaire. По сравнению с ними PHP обладает рядом преимуществ, в числе которых:

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

· Функциональность. Разработку PHP-программы можно отделить от собственно разработки Web-страницы, что упростит жизнь и программисту, и дизайнеру.

· Цена. PHP абсолютно бесплатен.

· Простота в использовании. Имеющие опыт программирования на распространенных языках найдут синтаксис PHP хорошо знакомым.

· Переносимость. Один и тот же PHP-код можно использовать как в среде NT, так и на платформах UNIX.

1.4.1 Общие правила построения PHP-программы

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

Расширение файлов PHP-программ по умолчанию в PHP4 - .php. На основании этого расширения сервер распознает файл как PHP-программу и запускает интерпретатор.

PHP-программа должна быть отделена от обычного HTML-текста. Существует четыре стиля обрамления PHP-кода:

Таблица 3. Стили обрамления PHP-кода

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

Константы определяются в PHP-программе с помощью функции define( ).

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

PHP имеет ряд предопределенных констант. Например:

· _FILE_ содержит имя файла, который в данный момент читает PHP;

· _LINE_ содержит номер строки этого файла.

Переменные

Имя любой переменной в PHP начинается со знака $. Имена переменных чувствительны к регистру символов.

1.5 Основы CSS

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

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

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

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

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

· использование различных расширений HTML;

· применение изображений вместо текста;

· использование рисунков для контроля пустого пространства, так называемые распорки;

· использование таблиц для верстки веб-страниц;

· написание программных скриптов вместо использования HTML.

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

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

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется тег <font>, задающий свойства шрифта, но стили обладают большими возможностями и позволяют сократить код HTML.

Свойства шрифта

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

Таблица 4. Атрибуты CSS для управления шрифтами

2. Разработка и создание Web-сайта «Детский Хоккейный Клуб»

2.1 Постановка задачи при проектировании web- сайта

Перед разработчиком были поставлены следующие задачи по созданию Web-сайта «Детский Хоккейный Клуб»:

§ Web-сайт должен обладать следующими особенностями:

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

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

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

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

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

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

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

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

§ Затраты на разработку и создание Web-сайта не должны превышать поставленный лимит.

2.2 Общая структура Web-сайта

Рисунок 1. Общая структура Web-сайта «Детский Хоккейный Клуб»

Представленная общая структура сайта, которая учитывает всю специфику разрабатываемого Web-сайта «Детский Хоккейный клуб», данная структура утверждена заказчиком.

2.2.1 Каталоги в CMS Joomla v.1.5.8

Принцип работы CMS Joomla v.1.5.8таков: когда пользователь вводит в своем браузере адрес вашего сайта? Браузер обращается к операционной системе с просьбой разрешить адрес сайта, т.е. преобразовать его в IP-адрес. Когда IP-адрес сайта получен, браузер подключается, используя этот адрес, к удаленному серверу. Web-сервер передает файл index.php на выполнение интерпретатору РНР. В процессе выполнения кода Joomla, контент сайта получается из базы данных MySQL. Результат работы интерпретатора РНР передается Web-серверу, а он, в свою очередь, передает его в браузер пользователя.

Содержание каталогов CMS Joomla v.1.5.8

· Корневой каталог -- в нем вы найдете самый главный файл index. php. Именно этот файл запускает Joomla при обращении пользователя к серверу. Этот же файл запускает программу установки Joomla, если она еще не была установлена. Если вам нужно переустановить Joomla, удалите файл configuration.php, загрузите снова на сервер каталог installation и запустите файл index .php.

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

· Каталог cache -- используется для кеширования страниц, что позволяет повысить производительность Joomla-сайта. Чуть позже вы узнаете, как включить кеширование страниц сайта и чем это чревато. Но в любом случае в этот каталог вы не будете заглядывать -- тут вам делать нечего.

· Каталог components -- сюда устанавливаются компоненты Joomla. По умолчанию Joomla уже содержит некоторые предустановленные компоненты: голосования, новостную ленту и т.д.

· Каталог images -- здесь находятся почти все картинки сайта. В под каталоге stories хранятся картинки, связанные с материалами сайта, в smilies -- смайлики, в banners -- баннеры.

· Каталог includes -- содержит служебные PHP-файлы, вы не будете изменять эти файлы, и, вообще, как и в каталоге cache, вам тут делать нечего. Хотя, если вы отлично владеете РНР, возможно, вы захотите изменить некоторые файлы, и тогда у вас уже получится своя собственная версия Joomla. Правда, в этой книге мы не будем изменять файлы из этого каталога -- в 99,9% случаев это не нужно.

· Каталог installation -- содержит файлы инсталлятора. Этот каталог нужно удалить сразу после установки системы, чтобы никто другой не смог запустить установку заново без вашего согласия.

· Каталог language -- содержит языковые файлы системы, которые используются для перевода вашего сайта на другие языки. В большинстве случаев нужно установить только два языка -- английский и русский. Языковые файлы используют популярный формат IN1 -файлов, но все строковые значения сохраняются в кодировке UTF-8.

· Каталог libraries -- здесь находятся файлы библиотек функций, которые используются системой. Как и файлы из каталога includes, вы не будете редактировать эти файлы, если не собираетесь выпустить свою собственную версию Joomla.

· Каталог media -- тут хранятся мультимедиа файлы (звуки, Flash-ролики), которые вы загружаете на сайт.

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

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

· Каталог templates -- внешний вид вашего сайта зависит от выбранного шаблона. Установленные шаблоны сайта содержатся в этом каталоге. Имя шаблона обычно совпадает с именем каталога.

· Каталог tmp -- содержит временные файлы, тут вам делать нечего.

· Каталог xmlrpc -- содержит библиотеку ХМL- RPC (extensible Markup Language Remote Procedure Call, XML-RPC), которая позволяет посылать Joomla-серверу запросы на удаленный вызов процедур.

Joomla представляет собой набор скриптов, написанных на языке программирования PHP. Этот язык был специально разработан для написания вэб-приложений.В Web-приложениях существуют две "стороны" выполнения кода - серверная и клиентская. К клиентской части относятся HTML, CSS, Javascript, а к серверной ASP, JAVA, PHP и т.д. Исходя из этого, для работы (выполнения) скриптов Joomla, необходимо наличие Web-сервера с поддержкой PHP и MySQL и Web-браузера у пользователя.

2.2.2 Работа с базами данных в CMS Joomla v.1.5.8