Официальный сайт Федерации Альпинизма и Скалолазания с функцией разграничения доступа к контенту

Размещено на http://www.allbest.ru/

Министерство образования и науки РФ

ФГБОУ ВПО «Сибирский государственный индустриальный университет»

Институт дополнительного профессионального образования

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

к выпускной квалификационной работе:

Официальный сайт Федерации Альпинизма и Скалолазания

с функцией разграничения доступа к контенту

Слушатель Рассомахин Вячеслав Петрович

Новокузнецк 2013 г.

Содержание

Определения, обозначения и сокращения

Введение

1. Теоретическая часть

1.1 Основные этапы разработки Web-сайта

1.2 Классификация сайтов

1.3 Язык разметки HTML

1.4 Каскадные таблицы стилей (CSS)

1.5 Основы программирования на языке PHP

1.6 Системы управления сайтом (CMS)

2. Практическая часть

2.1 Задачи Web-сайта

2.2 Программное обеспечение для реализации сайта

2.3 Выбор концепции дизайна сайта

2.4 Построение базы данных сайта

2.5 Построение основной части сайта

Заключение

Список использованных источников

Приложение А ER-диаграмма базы данных

Определения, обозначения и сокращения

В настоящей ВКР применяют следующие термины с соответствующими определениями:

1. WWW - (англ. World Wide Web) - это единство информационных ресурсов, которые связаны между собой средствами телекоммуникаций и основаны на гипертекстовом представлении данных, разбросанных по всему миру.

2. HTML - (англ. HyperText Mark-up Language) - язык разметки гипертекста, описывающий форму отображения информации на экране компьютера.

3. HTTP - (англ. Hypertext Transport Protocol) - протокол передачи гипертекста. Основой HTTP является технология «клиент-сервер». Обмен сообщениями идёт по схеме «запрос-ответ». Основные методы - GET и POST.

4. URL - (англ. Uniform Resource Locator) - унифицированный адрес ресурса. URL состоит из доменного имени, пути к странице на сайте и имени файла страницы.

5. DNS-сервер - (англ. Domain Name System server) - специальные компьютеры, известные серверы системы доменных имен. Хранят таблицы имен машин с ассоциированными с ними IP-адресами и переводят их в друг в друга для человеческих и компьютерных нужд.

6. FAQ - (англ. Frequently Asked Question(s)) - собрание часто задаваемых вопросов по какой-либо теме и ответов на них.

7. SEO - (англ. Search Engine Optimization) - Поисковая оптимизация. комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей.

8. ФАиС - Федерация Альпинизма и Скалолазания

Введение

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

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

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

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

В рамках данного исследования необходимо решить следующие задачи:

1. проанализировать информацию по видам веб-сайтов и способах их создания для выбора наиболее оптимального варианта применительно к цели нашего исследования;

2. осуществить обзор существующих web-технологий на предмет их использования;

3. разработать сайт ФАиС.

1. Теоретическая часть

1.1 Основные этапы разработки Web-сайта

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

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

2. На второй стадии проекта разрабатываются:

· дизайн (2 макета)

· HTML- верстка

· программная часть и создание панели управления

· наполнение сайта содержимым

· происходит запуск сайта.

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

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

На рисунке 1 показаны шаги, которые способствуют достижению цели. Определенные этапы могут идти одновременно.

Рассмотрим подробнее этапы создания сайта.

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

Рисунок 1 - Этапы разработки Web-сайта

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

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

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

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

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

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

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

Третий этап - продвижение сайта.

Продвижение сайта - это процесс поднятия его рейтинга в поисковых системах. В России основной поисковой системой считается Яndex, Rambler, и Google. Не так важно, какой поисковой системой будет пользоваться потенциальный клиент - процесс продвижения сайтов одинаков для всех поисковых систем. Для этого осуществляется процедура регистрации в поисковых системах, каталогах, рейтингах и т.д. А для увеличения вероятности нахождения его заинтересованным пользователем, используется оптимизация сайта с применением различных средств раскрутки и продвижения его в сети. Результатом данного этапа является то, что сайт начинает приносить прибыль и работать на имидж компании-владельца.

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

1.2 Классификация сайтов

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

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

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

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

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

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

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

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

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

Сайты некоммерческих организаций. Разнообразные некоммерческие организации также стремятся заявить о своём существовании в сети интернет. Многообразие подобных сайтов огромно. Тут и сайты какого-нибудь регионального отделения пенсионного фонда, и сайты политических партий и общественных движений, и сайты научно-исследовательских институтов и т. д. и т. п. Весьма популярны в интернете новостные ресурсы, ресурсы, представляющие онлайновые версии различных СМИ. Для двух особых категорий сайтов некоммерческих организаций, а именно сайтов государственных и образовательных учреждений в интернете даже выделены специальные доменные зоны: .gov и .edu. Причём, в отличие от популярных доменных зон .com, .org, национальных доменных зон и т. п., попасть туда может далеко не каждый желающий. Таким образом, расположение сайта в зоне .edu, например, - это гарантия солидности образовательного учреждения.

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

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

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

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

Сайты, предоставляющие онлайн-сервисы. Тут мы обнаружим также большое разнообразие. Некоторые сервисы можно отнести и к другим группам, например, сервисы, предоставляющие хостинг (как хостинг для сайтов, так и хостинг для гостевых, форумов, чатов, блогов, файлов и т. п.) Весьма распространёнными ещё со времён зарождения интернета являются сервисы бесплатной электронной почты. Вообще, многие онлайн-сервисы трудно классифицировать потому, что при всей их огромной популярности и значимости для интернета, главные сайты, предоставляющие их, существуют всего в нескольких экземплярах. Например, одними из важнейших сервисов, необходимость в которых возникла ещё на заре развития интернета, являются поисковые сервисы. Но при этом достаточно популярных среди них (в Рунете) всего три. Самым первым поисковиком Рунета был Рамблер. Сегодня лучшим и крупнейшим из поисковых сервисов в Рунете является Яндекс, а в мировом интернете лидерство держит Гугл (Google). Другие интересные сервисы - это, например, сервисы, предоставляющие онлайн-перевод веб-страниц (скажем, translate.ru), сервисы, помогающие вам проверить текст на орфографические ошибки (скажем, orfo.ru), сервисы, позволяющие собирать закладки на интересные вам сайты (скажем, memori.ru или Яндекс.Закладки) и т. д. и т. п. В последнее время, особенно в западном интернете появилась тенденция пытаться создавать онлайн-версии популярных оффлайновых программ, таких, как Word, Excel и т. п. Насколько успешной будет эта попытка переноса в онлайн работы с приложениями, покажет время.

1.3 Язык разметки HTML

Основой любой web-страницы является разметка. Технологии разметки, такие как HTML, XHTML и XML, определяют структуру и возможное значение содержимого страницы.

HTML (от англ. HyperText Markup Language -- «язык разметки гипертекста») -- стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа, в удобной для человека форме.

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989--1991 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на данный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени, основная идея платформо-независимости языка HTML была отдана в своеобразную жертву современным потребностям в мультимедийном и графическом оформлении.

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera.

Структура HTML-документа.

HTML -- теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками -- тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

<strong>Текст между двумя тегами -- открывающим и закрывающим.</strong>

<a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>

А вот пример пустого элемента: <br>

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:

<b>

Этот текст будет полужирным,

<i>а этот - ещё и курсивным.</i>

</b>

даст такой результат:

Этот текст будет полужирным, а этот -- ещё и курсивным.

Кроме элементов, в HTML-документах есть и сущности (англ. entities) -- «специальные символы». Сущности начинаются с символа амперсанда и имеют вид &имя; или &#NNNN;, где NNNN -- код символа в Юникоде в десятичной системе счисления.

Например, &copy; -- знак авторского права (©). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: &amp; -- амперсанда (&), &lt; -- символа «меньше» (<) и &gt; -- символа «больше» (>), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

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

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

1.4 Каскадные таблицы стилей (CSS)

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

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

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

Наследование. Каскадирование. Приоритеты стилей CSS.

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

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

1. Наиболее низким приоритетом обладает стиль браузера;

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

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

4. Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;

5. Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;

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

1. количество идентификаторов (#id) в селекторе --- ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);

2. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе --- ((0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS );

3. количество тегов в селекторе --- ((0,0,1) за каждый объявленный тег в селекторе правила CSS). (Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно -- бомльший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.)

7. Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;

8. И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.

Пример таблицы стилей

Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами <style> и размещена в «шапке» той самой web-страницы, на которую она действует):

p {

font-family: Garamond, serif;

}

h2 {

font-size: 110 %;

color: red;

background: white;

}

.note {

color: red;

background: yellow;

font-weight: bold;

}

p#paragraph1 {

margin: 0;

}

a:hover {

text-decoration: none;

}

#news p {

color: blue;

}

Здесь приведено шесть правил CSS с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.

Первое правило присвоено HTML-элементу p (абзацу) -- назначен стиль. Абзацы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»).

Второе правило присвоено HTML-элементу h2 (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем.

Третье правило будет применено к ЛЮБОМУ элементу, атрибут class которого равен 'note'. Например, к параграфу: <p class="note">Этот абзац будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>

Четвёртое правило будет применяться только к элементу p, атрибут id которого равен paragraph1. Такой элемент не будет иметь внешних отступов (margin).

Пятое правило определяет стиль hover для элементов a -- гиперссылок. По умолчанию, в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.

Последнее, шестое правило, применяется для элементов p, которые находятся внутри какого-либо элемента с атрибутом id, равным «news».

1.5 Основы программирования на языке PHP

PHP (англ. PHP: Hypertext Preprocessor -- «PHP: препроцессор гипертекста»; первоначально Personal Home Page Tools -- «Инструменты для создания персональных web-страниц») -- скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов.

Язык и его интерпретатор разрабатываются группой энтузиастов в рамках проекта с открытым кодом. Проект распространяется под собственной лицензией, несовместимой с GNU GPL.

В области программирования для сети Интернет PHP -- один из популярных скриптовых языков (наряду с JSP, Perl и языками, используемыми в ASP.NET) благодаря своей простоте, скорости выполнения, богатой функциональности, кроссплатформенности и распространению исходных кодов на основе лицензии PHP.

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

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

- взаимодействие с большим количеством различных систем управления базами данных (MySQL, MySQLi, SQLite, PostgreSQL, Oracle (OCI8), Oracle, Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II, SESAM, Firebird / InterBase, Paradox File Access, MaxDB, Интерфейс PDO);

- автоматизированная отправка HTTP-заголовков;

- работа с HTTP-авторизацией;

- работа с cookies и сессиями;

- работа с локальными и удалёнными файлами, сокетами.

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

- работа с XForms;

В настоящее время PHP используется сотнями тысяч разработчиков. Согласно рейтингу корпорации TIOBE, базирующемся на данных поисковых систем, в апреле 2011 года PHP находился на 5 месте среди языков программирования.[5] К крупнейшим сайтам, использующим PHP, относятся Facebook, ВКонтакте, Wikipedia и др.

Входит в LAMP -- распространённый набор программного обеспечения для создания и хостинга веб-сайтов (Linux, Apache, MySQL, PHP).

PHP инструкции встраиваются в HTML страницу. Что бы отделить PHP инструкции от остального текста страницы используется следующая конструкция: <? тело инструкции ?>.

Переменные.

Переменные на языке PHP объявляются следующим образом: сначала ставится знак $, а затем указывается имя переменной. Например, создадим переменную name - $name. Присвоим переменной «name» значение «Александр» - $name = “Александр”.

Основы конструкции IF - ELSE

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

Цикл WHILE (DO - WHILE).

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

Массивы.

Массивы позволяют хранить переменные в упорядоченном виде. Массив записывается таким образом: $name[Russia] = “Москва”. Для того чтобы вывести на экран значение определенной ячейки массива необходимо обратиться к данной ячейке: echo $name[Russia].

Функции.

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

Передача данных с помощью метода GET.

Если необходимо из одного PHP - файла передать переменные в другой PHP - файл, то можно воспользоваться передачей данных по методу GET. Метод GET представляет собой передачу переменных через адресную строку браузера. Чтобы передать данные необходимо набрать следующий код: echo “<a href='имя_файла.php?a=77&b=10'>”. В теле ссылки, после названия файла необходимо поставить знак вопроса “?” и после него указывать имя переменной. Если переменная не одна, то после указания одной переменной ставится знак “&” и указывается следующая переменная. Передаваемые переменные записываются в специальный массив $_GET.

Передача данных с помощью метода POST.

Для передачи данных методом POST в первом PHP - файле используется форма. Данные заносятся в форму и после нажатия кнопки «отправить» данные записываются в ассоциативный массив $_POST. изображен пример применения метода передачи данных - POST. Пользователю предлагается ввести в форму свое имя и фамилию. После ввода данных пользователь нажимает кнопку «отправить» и данные записываются в массив $_POST. В ячейке $_POST[name] находится имя пользователя, а в ячейке $_POST[lastname] фамилия. После этого массив передается второму PHP - файлу

Глобальный массив $_SERVER.

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

Инструкция INCLUDE.

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

1.6 Системы управления сайтом (CMS)

CMS (Content Management System) - это система управления контентом (содержимым) сайта. Чаще всего CMS переводят как система управления сайтом или движок сайта. Первые CMS начали появляться в 1995 году, однако распространение создания сайта с помощью системы управления сайтом получило после выхода PHP Nuke в 2000-ом году. Ядро этой CMS послужило платформой для создания новых CMS. Современные CMS позволяют создавать сайты различной сложности, как сайты-визитки, так и многофункциональные порталы.

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

Рассмотрим наиболее популярные CMS.

WordPress -- система управления содержимым сайта (CMS) с открытым исходным кодом, распространяемая под GNU GPL. Написана на PHP, в качестве базы данных использует MySQL. Сфера применения -- от блогов до достаточно сложных новостных ресурсов и даже интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты. WordPress выпущен под лицензией GPL версии 2.

Основные возможности:

- возможность публикации с помощью сторонних программ и сервисов;

- простота установки, настройки;

- поддержка RSS, Atom, trackback, pingback;

- подключаемые модули (плагины) с уникальной простой системой их взаимодействия с кодом;

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

- «темы» реализованы как наборы файлов-шаблонов на PHP, что положительно сказывается на скорости и гибкости;

- громадные библиотеки «тем» и «плагинов»;

- заложенный потенциал архитектуры позволяет легко реализовывать сложные решения;

- наличие ЧПУ (человеко-понятный URL);

- наличие русских переводов.

Требования к ПО:

начиная с версии 3.2:

- PHP версии 5.2.4 или выше

- MySQL версии 5.0 или выше

- (Необязательно (требуется для режима Multisite)) Модуль Apache mod_rewrite (для красивых адресов, называемых постоянными ссылками).

до версии 3.2:

- PHP версии 4.3 или выше

- MySQL версии 4.1.2 или выше.

1С-Битрикс. Система ориентирована на корпоративные сайты, информационные и справочные порталы, социальные сети, интернет-магазины, сайты СМИ, пригодна для создания других видов веб-ресурсов.

Для хранения данных сайта используется файловая система сервера и реляционная СУБД. Поддерживаются следующие СУБД: MySQL, Oracle, MS SQL. Продукт работает на Microsoft Windows и UNIXЃ]подобных платформах, включая Linux.

«1С-Битрикс: Управление сайтом» продаётся в одной из восьми составленных фирмой-разработчиком редакций (Первый сайт, Старт, Стандарт, Эксперт, Малый бизнес, Бизнес, Веб-кластер, Бизнес веб-кластер), определяющих набор модулей и функциональность системы.

Количество модулей в устанавливаемой системе зависит от редакции продукта.

Для корректной работы с системой управления пользователям без знания языков HTML и PHP требуется предварительная настройка системы (создание шаблона на базе графического дизайна, создание структуры разделов и страниц, а также подключение модулей системы). Данную возможность предоставляют партнёры компании «1С-Битрикс».

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

Модули в «1С-Битрикс: Управление сайтом» -- это набор программных компонентов, отвечающих за работу с различными типами баз данных, а также предоставляющих унифицированный API системы.

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

Первая версия системы выпущена в 2001 году. На настоящий момент доступна версия 11.5 в различных редакциях.

Основные возможности.

Одной из самых привлекательных особенностей «1С-Битрикс: Управление сайтом» для разработчика является механизм информационных блоков (инфоблоков).[9] Он позволяет легко создавать пользовательские типы содержания (например для различных каталогов)[10]. При этом способы работы с инфоблоками Битрикс схожи со способами работы со справочниками платформы 1С:Предприятие.

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

Требования к ПО:

1. PHP 5.0.0 и выше

2. Apache 1.3 и выше или MS IIS 5.0 и выше

3. MySQL 4.1.11 и выше.

Joomla! (произносится джуммла) -- система управления содержимым (CMS), написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных MySQL, а начиная с версии 2.5 и MsSQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL. Название «Joomla!» фонетически идентично слову «Jumla», которое в переводе с языка суахили означает «все вместе» или «единое целое», что отражает подход разработчиков и сообщества к развитию системы.

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

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

Основные возможности:

- Joomla! 1.6 -- редактирование материала в Back-End области

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

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

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

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

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

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

- начиная с версии 2.5 расширена поддержка баз данных. Уже реализована поддержка MsSQL, а в ближайшем будущем планируется добавить поддержку PostgreSQL, Oracle, SQLite.

Возможности администрирования:

- пример установки пакета Joomla! на Ubuntu GNU/Linux.

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

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

- возможность ограничить доступ к определённым разделам сайта только для зарегистрированных пользователей, а с выходом Joomla 1.6 доступ как к разделу, так и к определённому материалу с точностью до конкретной связи материал<->пользователь;

- настраиваемые схемы расположения элементов по областям шаблона;

- различные модули (последние новости, счётчик посещений, подробная статистика посещений, гостевая книга, форум и другие);

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

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

- в версии 1.6 появилась возможность определить время начала и завершения публикации модулей. Так же в новой версии Joomla улучшены возможности по управлению отображением содержимого;

- возможность создания не одной, а нескольких форм обратной связи для каждого контакта;

- модуль приёма от удалённых авторов новостей, статей и ссылок;

- иерархия объектов;

- менеджер рассылки новостей. Поддержка более чем 360 служб рассылки новостей по всему миру;

- встроенный визуальный редактор TinyMCE;

- ЧПУ -- «человекопонятный URL», например, «example.com/news/2011/»;

- Более 8800 (по состоянию на 4 января 2012) готовых модулей и компонентов (http://extensions.joomla.org).

Требования к ПО:

для работы Joomla 1.5 требуются:

- PHP 4.3.10 или новее, рекомендуется 4.4.7, если установлен PHP 5.3.x в php.ini рекомендуется использовать директиву error_reporting = E_ALL & ~ E_NOTICE

- MySQL 3.23.x или новее, но не 6.x

- Apache 1.3.x или новее.

для версий 1.6, 1.7 и 2.5 требуются, как минимум, Apache 2.0, PHP 5.2.4 и MySQL 5.0.4.

2. Практическая часть

2.1 Задачи web-сайта

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

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

- более высокая скорость обратной связи;

- привлечь пользователей вступать в федерацию.

2.2 Программное обеспечение для реализации сайта

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

1. Операционная система Windows 7 Ultimate;

2. Программный пакет Denwer 3, включающий в себя:

1. Сервер Apache 2.2.22;

2. PHP 5.3.13;

3. СУБД MySQL 5.1;

4. Web-интерфейс PHPMyAdmin 3.5;

3. Joomla 2.5.9 Stable

4. Верстка и редактирование: Notepad++ 5.9.2

5. Создание графических элементов: Artisteer 4, Adobe Photoshop CS6, Corel Draw X6.

2.3 Выбор концепции дизайна сайта

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

Рисунок 2 - Эскиз расположения основных блоков главной страницы

Остальные страницы построены по примеру главной.

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

2.4 Построение базы данных сайта

После инсталяции программного пакета Denwer 3 и запуска web-сервера, необходимо в адресной строке интернет - браузера ввести следующий адрес: «http://localhost/tools/phpmyadmin». Загрузится web - интерфейс для работы с СУБД MySQL. Сначала необходимо создать базу данных. Для хранения практически всей информации о сайте Joomla! использует базу данных MySQL. Она позволяет хранить значительные объемы данных, при этом предоставляет нам удобный интерфейс для взаимодействия с ней. Для сайта Федерации Альпинизма и Скалолазания необходимо создать базу данных «fais», в которой создаются и хранятся таблицы для четкого разделения хранящейся на сайте информации.