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

Введение

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

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

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

Перенос веб-ресурса «РадиоВТУЗ МАИ» на виртуальный хостинг, добавление новых данных и функциональных возможностей позволит организовать работу полноценного сайта, ориентированного на студентов и преподавателей института, а так же абитуриентов.

Разработка нового веб-сайта РадиоВТУЗ МАИс использованием БД обеспечит: динамичность, удобство в использовании и навигации,масштабируемость, удобный административный интерфейс для редактирования структуры и добавления новой информации.

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



1. Разработка ТЗ на проектирование

Программа «WEB-сайт института РадиоВТУЗ» предназначена для совместного использования студентами, преподавателями и другими пользователями, в информационных и иных целях.

1.1 Назначение разработки

Функциональное назначение

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

Эксплуатационное назначение

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

1.1.1 Системные требования к программе

Система состоит из 3х основных компонентов:

-Программа (сайт)

-Администратор сайта

-Пользователь

Для разработки, администрирования и возможности дальнейшей модернизации сайта, администратор предъявляет к системе следующие требования:

Программа выполняется под управлением семейства серверных операционных систем GNU/Linux, ОС FreeBSD или MicrosoftWindowsServer на любой серверной платформе. На сервере должен быть развернут HTTP сервер, среда для выполнения серверных скриптов, сервер баз данных и FTP-сервер.

Минимальные требования к платформе следующие:

1) Дисковое пространство - 3000Мб

2) Почтовые домены и FTP аккаунты - 1

3) Поддержка PHP, Perl, Python

4) Использование собственных CGI-скриптов

5) Базы данных MySQL - не ограничено

6) PhpMyAdmin

7) Оперативная память (МБ) - 64

8) неограниченный трафик;

9) ежедневное резервное копирование

Требования, предъявляемые к администратору - знание языков разметки страниц HTML и каскадных таблиц стилей CSS, базовые знания PHP и JavaScript, знания программных средств разработки сайтов, принципов работы БД MySQL, оптимизации сайта.

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

Требования, предъявляемые пользователем к системе - простая и удобная визуализация сайта в стиле WEB 2.0, простота навигации, наличие искомой информации, высокая скорость загрузки веб-страниц.

Требования к функциональным характеристикам

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

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

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

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

В качестве клиентской части используется графический веб-браузер.

Требования к обеспечению надежного функционирования программы.

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

а) Организацией бесперебойного питания технических средств;

б) Использованием лицензионного программного обеспечения;

в) Регулярным выполнением рекомендаций Министерства труда и социального развития РФ, изложенных в Постановлении от 23 июля 1998 г. «Об утверждении межотраслевых типовых норм времени на работы по сервисному обслуживанию ПЭВМ и оргтехники и сопровождению программных средств»;

г) Регулярным выполнением требований ГОСТ 51188-98 «Защита информации. Испытания программных средств на наличие компьютерных вирусов».

Время восстановления после отказа.

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

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

Климатические условия эксплуатации

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

Требования к квалификации и численности персонала

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

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

б) Задачи установки (инсталляции) и поддержания работоспособности программных средств необходимых для работы с сайтом;

в) Задача учета предложений по улучшению сайта от его пользователей;

г) Задача SEO-оптимизации сайта.

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

Требования к информационной и программной совместимости

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

Для обеспечения совместимости с клиентскими веб-браузерами программа должна генерировать код HTML в соответствии со стандартами W3C.

1.1.2 Требования к программной документации

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

а) Техническое задание в соответствии с ГОСТ 19.201-78 «ЕСПД. Техническое задание. Требования к содержанию и оформлению»;

б) Текст программы в соответствии с ГОСТ 19.401-78 «ЕСПД. Текст программы. Требования к содержанию и оформлению»;

в) Руководство пользователя в соответствии с ГОСТ 19.505-79 «ЕСПД. Руководство оператора. Требования к содержанию и оформлению».

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

1.2 Обоснование необходимости WEB-сайта

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

Сайт института РадиоВТУЗ позволит решить следующие задачи:

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

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

1.3 Обоснование технических требований

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

Размещение сайта на недорогом и стабильном хостинге, поддерживающим БД MySQL, PHP 5, а так же Perlи возможность использования CGIскриптов (в случае модернизации сайта с их использованием). С помощью MySQLи PHP будет размещаться информация на сайте, с возможностью быстрого и удобного добавления, редактирования и удаления информации, в отличии от статического HTML. Хостинг должен иметь удобную панель управления базами данных, например PHPMyAdmin, это позволит с легкостью создавать таблицы в БД, редактировать в них информацию, делать резервные копии БД. Объем дискового пространства должен быть порядка 2х ГБ, для первоначального этапа развития сайта, этого будет даже много, но в дальнейшем планируется добавления видео и флэш контента на страницы сайта.

Для администрирования сайта необходимо следующее программное обеспечение: FTP-клиент - для загрузки материалов сайта на сервер хостинга, виртуальный веб-сервер на локальной машине - чтобы не вносить изменения в строение сайта «онлайн», веб-редактор для редактирования кода HTMLи CSS, и естественно нормальный браузер - Opera, Firefox, Chrome.

2. Расчетно-теоретическая часть

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

2.1 Структурная схема системы

Система состоит из 3х основных компонентов:

-Программа (сайт)

-Администратор сайта

-Пользователь

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

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

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



Рисунок 1. Структурная схема системы

Структурная схема программы представлена на графическом листе 2.

Рисунок 2. Структурная схема программы



2.1.1 Понятие веб-сайта

Сайт (от англ. website: web -- «паутина, сеть» и site -- «место», буквально «место, сегмент, часть в сети») -- совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённая под одним адресом (доменным именем или IP-адресом). По умолчанию подразумевается, что сайт располагается в сети Интернет. [1]

Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое -- базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP.[1]

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

Страницы сайтов -- это файлы с текстом, размеченным на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, обрабатываются браузером и выводятся на его средство отображения (монитор, экран КПК, принтер). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением в неё таблицы стилей на языке CSS или сценариев на языке JavaScript.[1]

Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерной программой на сервере -- так называемым движком сайта. Движок может быть либо сделан на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из движков могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте. Такие движки называются системами управления содержимым (CMS). [1]

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

По доступности сервисов:

· Открытые -- все сервисы полностью доступны для любых посетителей и пользователей.

· Полуоткрытые -- для доступа необходимо зарегистрироваться (обычно бесплатно).

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

По природе содержимого:

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

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

По физическому расположению:

· Общедоступные сайты сети Интернет.

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

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

· Интернет-представительства владельцев бизнеса (торговля и услуги, не всегда связанные напрямую с Интернетом):

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

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

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

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

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

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

· Информационные ресурсы:

o Тематический сайт -- сайт, предоставляющий специфическую узкотематическую информацию о какой-либо теме.

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

· Веб-сервис -- услуга созданная для выполнения каких либо задач в рамках сети WORLD WIDE WEB:

o Доска объявлений.

o Каталогсайтов -- например, Open Directory Project.

o Поисковые сервисы -- например, Yahoo!, Google.

o Почтовый сервис.

o Веб-форумы.

o Блоговый сервис.

o Файлообменный Пиринговый сервис -- например, Bittorrent.

o Датахостинговый (хранение данных) сервиc -- например, Skydrive.

o Датаэдиторинговый (редактирование данных) сервиc -- например, Google Docs.

o Фотохостинг -- например, Picnik, ImageShack, Panoramio,

o Хранение видео -- например, YouTube, Dailymotion.

o Социальные Медиа -- например, Buzz.

· Комбинированные Веб сервисы (Социальные сети) -- например, Facebook, Twitter. [1]

2.1.3 Хостинг

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

Обычно под понятием услуги хостинга подразумевают как минимум услугу размещения файлов сайта на сервере, на котором запущено ПО, необходимое для обработки запросов к этим файлам (веб-сервер). Как правило, в услугу хостинга уже входит предоставление места для почтовой корреспонденции, баз данных, DNS, файлового хранилища и т. п., а также поддержка функционирования соответствующих сервисов. [1]

Хостинг баз данных, размещение файлов, хостинг электронной почты, услуги DNS могут предоставляться отдельно как самостоятельная услуга, либо входить в понятие услуги.[1]

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

· поддержка CGI: Perl, PHP, Python, ASP, Ruby, JSP

· поддержка .htaccess/.htpasswd (для Apache)

· поддержка баз данных

А также установленные модули и фреймворки для каждой из возможностей. [1]



2.1.4 Web серверы

Веб-сервер -- это сервер, принимающий HTTP-запросы от клиентов, обычно веб-браузеров, и выдающий им HTTP-ответы, обычно вместе с HTML-страницей, изображением, файлом, медиа-потоком или другими данными. Веб-серверы -- основа Всемирной паутины. [1]

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

Клиент, которым обычно является веб-браузер, передаёт веб-серверу запросы на получение ресурсов, обозначенных URL-адресами. Ресурсы -- это HTML-страницы, изображения, файлы, медиа-потоки или другие данные, которые необходимы клиенту. В ответ веб-сервер передаёт клиенту запрошенные данные. Этот обмен происходит по протоколу HTTP.[1]

2.2 Обоснование выбора средств разработки

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

Конечно, сайт можно было бы «сделать» на CMS. ContentManageSystem - это набор файлов, который, после своего размещения на сайте, позволяет изменять содержимое ресурса при помощи браузера.На сегодняшний день во Всемирной Сети существует множество различных систем управления, стоит отметить, что многие из них бесплатны. Если ознакомиться с общим описанием всех этих систем, то создается впечатлении относительно того, что все эти CMS просто идеальны, но это далеко не так.

Основные недостатки CMS:

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

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

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

Итак, для создания сайта РадиоВТУЗ я буду использовать стандартные, универсальные средства разработки, без использования CMS.

2.2.1 HTML и XHTML

HTML (от англ. HyperTextMarkupLanguage -- «язык разметки гипертекста») -- стандартный язык разметки документов во Всемирной паутине. Любой сайт имеет хотя бы несколько строк HTML (или XHTML) кода. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.[1]

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

Каждый 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>) документа.

Различия между XHTML и HTML:

· Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br>) должны иметь на конце / (например, <br />).

· Булевы атрибуты записываются в развёрнутой форме. Например, следуетписать<option selected="selected">или<td nowrap="nowrap">.

· Имена тегов и атрибутов должны быть записаны строчными буквами (например, <imgalt="" /> вместо <IMG ALT="" />).

· XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться &lt; и &amp; соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор.

· Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).[3]

Итак, XHTML - это более современный стандарт, расширяющий возможности HTML, упрощающий разработку браузеров и призывающий к синтаксической корректности структурной разметки.

На сайте РадиоВТУЗ я использовал тип DTD документов стандарта XHTML 1.0transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.2.2 Таблицы стилей CSS

CSS (англ.CascadingStyleSheets -- каскадные таблицы стилей) -- язык описания внешнего вида документа, написанного с использованием языка разметки. [1]

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

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

body

{

font-family: Tahoma, Arial, Helvetica, Sans-Serif;

font-size: 12px;

font-style: normal;

font-weight: normal;

color: #000000;

}

PostContent

{

font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;

font-size: 12px;

text-align: justify;

line-height: 1.5;

color: #000000;

}

Гдеfont-family - семействостилятекста,

sans-serifозначаетчтотекстбеззасечек (какнапримерtimesnewroman),

font-size - размер шрифта 12 пикселей,

text-align: justify - Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю,

line-height 1.5 - межстрочный интервал полторы высоты шрифта,

color: #000000 - цвет текста черный.

CSS можно добавить к HTML - документу тремя способами:

1. Ссылка в HTML на внешний файл, содержащий CSS:

<linkrel="stylesheet"type="text/css"href="style.css">

2. РазмещениеCSSвэлементеstyleHTML-документа:

<styletype="text/css">

body {

color: red;

}

</style>

3. Размещение CSS в атрибуте style конкретного элемента HTML-документа:

<pstyle="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>

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



2.2.3 PHP

С выбором первых двух средств для создания каркаса сайта РадиоВТУЗ - HTMLи CSS, было все понятно, так как альтернатив этим средствам в принципе нет. Теперь необходимо выбрать скриптовый язык для наполнения сайта контентом посредством связи с базой данных, подключения страниц и элементов навигации, защиты администраторской части сайта и других функций.

Существуют известные акронимы веб технологий:

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

Linux -- операционная система Linux;

Apache -- веб-сервер;

MySQL -- СУБД;

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

Так же существуют варианты

LNMP -- Nginx вместо Apache

BAMP -- BSD вместо Linux

MAMP -- Mac OS X вместо Linux.

WAMP -- под Microsoft Windows вместо Linux

WASP -- Windows, Apache, SQL Server и PHP

WIMP -- Windows, IIS, MySQLиPHP и другие.

Иногда букву P в аббревиатуре расшифровывают как Perl и Python, другие возможные языки веб-разработки. Итак, PHP, Perlили Python - в этом и будет заключаться выбор языка разработки.

Немного о каждых из них:

PHP (также известный как PHP:HypertextPreprocessor) - это скриптовый язык, который отлично подходит для web-разработки. PHP - не что иное, как оболочка вокруг языка С, с управлением памятью (подсчет ссылок) и гибкой системой типов. Обычно PHP выполняется на web-сервере, обрабатывая код на входе и генерируя web-страницы на выходе. Так же, как и во многих других интерпретируемых языках программирования, PHP-скрипты обычно хранятся в исходниках даже на производственных web-серверах. Это увеличивает время их выполнения за счет компиляции на лету.[4]

PHP выполняет код, заключенный в тэг <?php ... ?> и его подвиды, а остальное содержимое файла выводится прямо на страницу. Переменные предваряются знаком $ и не требуют указания типа. Ключевые слова и синтаксис языка похожи на большинство высокоуровневых языков программирования, следующих синтаксису языка C. [4]

Python - это один из языков высокого уровня, общего назначения. Базовый синтаксис и семантика Python'аминималистичны, а стандартные библиотеки, напротив, огромны и сложны. Python поддерживает несколько парадигм программирования (ООП, императивное и функциональное) и обладает такимифичами, как полностью динамическая система типов и автоматическое управление памятью. [4]

Python разрабатывался как легко читаемый язык. Его ключевая идея: «Должен быть только один, и лучше всего очевидный, способ сделать это». Отсюда следует, что код, написанный одним разработчиком, может легко развиваться и поддерживаться другим. Кроме того, Python «навязывает» программистам дисциплину (использованием отступов и синтаксисом кода). Это позволяет легко поддерживать крупные приложения. [4]

Perl относится к языкам программирования общего назначения. Разработан он для рутинной обработки текстов и составления отчетов и сейчас используется для решения широкого круга задач, включая системное администрирование, web-разработку, сетевое программирование, игры и создание GUI. [4]

Perl, скорее, призван быть практичным (легким в использовании, эффективным и полным), чем красивым. Он поддерживает несколько парадигм программирования (впрочем, как и Python с PHP), управление памятью (подсчет ссылок), встроенную обработку текста и кучу сторонних модулей. [4]

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

Плюс ко всему все три языка:

· кроссплатформенные;

· имеют открытый код;

· хорошо документированы;

· имеют огромные сообщества пользователей;

· имеют огромное количество написанного кода и библиотек;

· имеют развитые фреймворки (PHP - Symfony, php.MVC; Python-Django, CherryPy, Pylons; Perl -Catalyst, CGI::Application, Gantry);

Составим множество Парето для 3х языков разработки с несколькими положительными критериями и определим весовые коэффициенты.

Таблица принятия решений для выбора наилучшего из трех объектов PHP, Python, Perl имеет следующий вид:

Таблица 1. Таблица принятия решений

Языки веб разработки	Критерии
	Поддержка на хостинге	Простота	Фрэймворки	Уязвимость	Примеры и библиотеки
PHP	10	10	6	5	9
Python	2	5	8	10	9
Perl	2	3	4	9	5

Нормируем значения приведённые в таблице и получаем таблицу следующего вида:



Таблица 2. Нормированная таблица

Языки веб разработки	Критерии
	Поддержка на хостинге	Простота	Фреймворки	Уязвимость	Примеры и библиотеки
PHP	1	1	0.75	0.5	1
Python	0.2	0.5	1	1	1
Perl	0.2	0.3	0.5	0.9	0.55

Приоритеты определим так

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

, т.к. приоритет критериев F3и F5одинаковый.

Применяя аддитивный критерий, получим лучший объект:

Таким образом, для разработки сайта выбран скриптовый язык PHP.

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

Огромное количество сайтов (около 20 млн.) в Сети написано на PHP, включая такие гиганты, как Wikipedia, Yahoo!, Facebook, Digg, WordPress, YouTube. Популярность PHP основана на том, что его легко использовать, и вставки легко читаемы в HTML-документах. Использование PHP в паре с HTML-редактором -- это отличный путь к созданию динамического контента при минимуме затрат на программирование.

Критерии выбора средств разработки представлены на графическом листе №3.

Рисунок 3. Выбор языка программирования

2.2.4 JavaScript

JavaScript -- объектно-ориентированный скриптовый язык программирования.JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. [1]

На сайте РадиоВТУЗ JavaScriptиспользуется только для обеспечения кроссбраузерности с такими браузерами как InternetExplorerверсий 6 и 7.

Скрипт был автоматически сгенерирован программой Artisteer 2.

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

В ближайшем будущем предполагается добавление Java-скрипта для фотогалереи.

2.2.5 MySQL

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

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

MySQL - свободная система управления базами данных (СУБД).MySQL является собственностью компании OracleCorporation, получившей её вместе с поглощённой SunMicrosystems, осуществляющей разработку и поддержку приложения.MySQL является решением для малых и средних приложений. Входит в состав серверов WAMP, LAMP и в портативные сборки серверов Денвер, XAMPP.[1]

Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов таблиц: пользователи могут выбрать как таблицы типа MyISAM (используются в БД РадиоВТУЗ), поддерживающие полнотекстовый поиск, так и таблицы InnoDB, поддерживающие транзакции на уровне отдельных записей. Более того, СУБД MySQL поставляется со специальным типом таблиц EXAMPLE, демонстрирующим принципы создания новых типов таблиц. Благодаря открытой архитектуре и GPL-лицензированию, в СУБД MySQL постоянно появляются новые типы таблиц.

MySQL имеет API для языков Delphi, C, C++, Эйфель, Java, Лисп, Perl, PHP, Python, Ruby, Smalltalk и Tcl, библиотеки для языков платформы .NET, а также обеспечивает поддержку для ODBC посредством ODBC-драйвера MyODBC.[1]

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

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

Рисунок 4. Интерфейс phpMyAdmin

2.3 Обоснование выбора программных средств

В этой главе будут рассмотрены программные средства, которые применялись для создания сайта РадиоВТУЗ. В состав программных средств для разработки сайта входят базовые программы (такие как интернет браузеры), различные webредакторы и Фреймворки, графические редакторы (AdobePhotoshop), а также локальные сборки веб серверов.

2.3.1 Базовое программное обеспечение

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

· Opera/9.80 (Windows NT 6.1; U; ru) Presto/2.7.62 Version/11.01

· Opera AC 3.7.7 Final [10.10.1893.9] (Full Installer)

· IE 8.0.7600

· Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.2) Gecko/20100115 Firefox/3.6

· Google Chrome 10.0.648.204

· Netscape navigator Firefox/2.0.0.12 Navigator/9.0.0.6

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

2.3.2 WEB-редакторы

Существует много инструментов для верстки веб-страниц, все webредакторы можно разделить на 2 типа - визуальные и текстовые.

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

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

Наиболее популярные редакторы:

Macromedia Dreamweaver

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

Разработчики утверждают, что Macromedia Dreamweaver MX предназначена для проектирования, разработки и администрирования профессиональных web-сайтов и приложений. Кроме того Dreamweaver легко интегрируется с другими программами от Macromedia, например, такими, как Flash. Т.е. Dreamweaver гораздо больше, чем просто визуальный редактор, это достаточно мощный и сложный инструмент, а всякий сложный инструмент требует, чтобы на его освоение было потрачено какое-то время, прежде, чем пользователь сможет работать в нем.

сайт хостинг программный



Рисунок 5. Интерфейс DreamweaverCS3

Adobe GoLive и LiveMotion

Возможно, Adobe GoLive понравится тем, кто любит программы от Adobe, и много с ними работал: знакомая среда, достаточно легко разобраться, что к чему. Кроме того, еще один плюс для любителей Adobe - все программы от Adobe прекрасно взаимодействуют друг с другом и дополняют друг друга, GoLive не исключение, он прекрасно дружит с собратьями. Однако, GoLive не более, чем визуальный редактор для верстки веб-страниц, больше чем поддержки таких технологий, как Html, Dhtml, CSS, XML и нескольких готовых Javascript`ов не стоит ждать от этой программы. Однако, следует отметить, что встроенный редактор кода (текстовой) в этой программе очень хороший.

Т.е. возможно, GoLive оптимальное сочетание визуального и текстового редактора (два в одном).

Microsoft FrontPage

Если верить разработчикам, то программа FrontPage позволяет создавать веб-узлы, обладающие широкими возможностями, а также предоставляет средства управления ими. На деле, FrontPage дружит с Html, Css, Dhtml, JavaScript. Дает достаточно широкие возможности по управлению изображениями и flash-ролликами. Кроме того FrontPage дружит с такими технологиями, как ASP, XML, VBScript, XSL. Также разработчики утверждают, что в последней версии FrontPage теперь борется за чистоту кода, что ж, остается надеяться, что это так, т.к. раньше данный пункт был не на высоте. [5]

Homesite

Этот редактор, пожалуй, самый популярный и мощный среди текстовых, и не зря. Кроме того, что в нем достаточно легко работать не только с Html-кодом (есть все, от списка всевозможных атрибутов ко всем тегам вплоть до проверки кода (правильность проверяется с точки зрения W3C.org)), но также есть поддержка XHTML, CSS-редактор, и так далее. [5]

HTML Pad (PSPad)

Эта программа тоже пользуется большой любовью пользователей. Помимо всего стандартного HTMLPad поддерживает JavaScript, VBScript, SSI, ASP and Perl, умеет создавать макросы (наподобие Word и Excel), включает в себя кучу различных справочных материалов по CSS и Html, и многое другое. [5]

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

Так же использовались редакторы PSPadи NamoWebEditor 2006.



2.3.3 Средства создания дизайна страниц

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

1. Artisteer -- проприетарная компьютерная программа для создания шаблонов (тем) для CMS WordPress, Joomla!, Drupal, DotNetNuke, для блогов Blogger, шаблонов для приложений ASP.NET, CodeChargeStudio, а также HTML страниц.[1]

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

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

3. AdobePhotoshop - многофункциональный графический редактор, разработанный и распространяемый фирмой AdobeSystems. В основном, работает с растровыми изображениям, однако имеет некоторые векторные инструменты. Продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Несмотря на то, что изначально программа была разработана как редактор изображений для полиграфии, в данное время она широко используется и в веб-дизайне.[1]

Этапы проектирования дизайна:

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

При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.

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

HTML-верстка

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

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

2.3.3.1 Верстка

Вёрстка веб-страниц -- процесс формирования веб-страниц в текстовом, либо WYSIWYG-редакторе, а также результат этого процесса, то есть собственно веб-страницы.[1]

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

Фреймы, ввиду их некоторых проблем, уходят в прошлое: например, стандарт HTML 5 более не включает в себя поддержку фреймов.[1]

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

Некоторые рекомендательные правила верстки:

1. Отступы, отбивки, межстрочное расстояние, и размер шрифта должны совпадать с этими же элементами эскиза (макета, выполненного в графическом редакторе)

2. Название папки должно быть переведено на английский язык

3. Папка с графикой для интерфейса сайта имеет название i

4. Папка с таблицами стилей для сайта имеет название css

5. Папка с ява-скриптами для сайта имеет название js

6. Папка с графикой заказчика (фотографии в каталоге, схемы проезда, иллюстрации к новостям и т.д.) имеет название images

7. Прозрачный gif размером 1 на 1 пиксель имеет название spacer.gif

8. Макет предоставляемый менеджерам проекта должен иметь связи с указанием главного файла папки about/index.html

9. Завершенный макет предоставляемый программистам должен иметь связи без указания головного файла папки about

10. На странице недопустима ссылка на саму себя

11. Все alt`ы на сайте должны начинаться либо c заглавной буквы либо с прописной и должны быть написаны на одном языке

12. Надписи на кнопках должны быть написаны либо c все заглавной буквы либо все с прописной и на одном языке

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

14. Логотип должен быть ссылкой на главную страницу сайта и иметь alt="на главную | название компании"

15. Аlt на заголовке раздела должен совпадать с названием раздела

16. Тitle должен иметь следующий вид: Название подраздела | Название раздела | Название компании

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

18. В таблицах стилей первыми определяются стандартные элементы
p {margin: 0; font-family:Verdana, Tahoma, Arial, Helvetica, sans-serif;},
а только затем элементы подклассов

19. В таблицах стилей все величины должны иметь одинаковые единицы измерения px или pt

20. При использовании таблиц стилей конструкции в теле html-документа типа font-size и bgcolor недопустимы.

21. Значение атрибутов тегов должны быть заключены в кавычки <p class="head">

22. Контактная информация на всех страницах сайта указывается в порядке: адрес, телефон, факс, электронная почта.

23. Авторские права (copyright) должны быть указаны в следующем порядке: Copyright © 1998-2002 Название_компании

2.3.4 Локальные WEB серверы

Для разработки и отладки сайта РадиоВТУЗ использовался набор Денвер. Денвер (от сокр. Д.н.w.р -- джентльменский набор Web-разработчика) -- набор дистрибутивов и программная оболочка, предназначенные для создания и отладки сайтов (веб-приложений, прочего динамического содержимого интернет-страниц) на локальном ПК (без необходимости подключения к сети Интернет) под управлением ОС Windows.[6]

Базовый пакет включает в себя:

· Веб-сервер Apache с поддержкой SSI, SSL, mod_rewrite, mod_php.

· Интерпретатор PHP с поддержкой GD, MySQL, SQLite.

· СУБД MySQL с поддержкой транзакций (mysqld-max).

· Система управления виртуальными хостами, основанная на шаблонах.

· Система управления запуском и завершением.

· Панель phpMyAdmin для администрирования СУБД.

· Ядро интерпретатора Perl без стандартных библиотек (поставляются отдельно).

· Эмулятор sendmail и сервера SMTP с поддержкой работы совместно с PHP, Perl, Parser и др.

· Установщик.

В качестве альтернативы Денверу существуют так же наборы HTTP FileServer, XAMPP, LAMP, WAMP, AppServ и другие.

2.4 Разработка дизайна страниц

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

Для всех страниц сайта РадиоВТУЗ используется единый дизайн, созданный с помощью htmlи cssв несколько этапов:

1. Создание каркаса страницы в программе Artisteer 2.1. Это программное обеспечение позволяет визуально создать простой шаблон, выбрать цвет фона background, стиль текста, ссылок и заголовок, меню, кнопок и таблиц. Программа автоматически генерирует код htmlи cssи изображения, которые используются на странице, сгенерированной с помощью div.

После первого этапа имеем файлы:

· Page.html

· Style.css

· Style.ie6.css

· Script.js

Style.ie6.cssнужен для корректного отображения страницы в браузере IE6.Припередачи информации о браузере и ОС, интерпретатор PHPна webсервере проверяет с какого браузера пользователь пытается получить доступ к сайту и если это IE6, то подключается вышеуказанная таблица стилей. Это позволяет сделать строка в коде каждой страницы