Веб-проект "Социальная сеть"

 

Министерство образования Республики Беларусь

Учреждение образования

БелорусскиЙ государственный университет

информатики и радиоэлектроники

Факультет непрерывного и дистанционного обучения

Кафедра программного обеспечения информационных технологий

Пояснительная записка

к дипломному проекту

на тему

Веб-проект «Социальная сеть»

БГУИР ДП 1-40 01 01 038 ПЗ

Студент Е.В. Унгур

Руководитель Е.В. Мельникова

Консультанты

от кафедры ПОИТ Е.В. Мельникова

по экономической части В.Г. Горовой

по охране труда А.М. Прудник

Нормоконтролер С.В. Болтак

Минск 2014

РЕФЕРАТ

Объектом исследования является создание и эксплуатация социальной сети.

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

Разработка данного проекта позволит создать мощный национальный медиа-ресурс направленный на: упрощение социальных взаимоотношений граждан РБ; обеспечение информационной защищенности; поддержку и освещение национально-патриотических проектов пользователей ресурса; предоставление достоверной и актуальной информации о развитии государства.

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

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

ОПРЕДЕЛЕНИЯ И СОКРАЩЕНИЯ

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

СС - социальная сеть.

БД - базы данных.

ПС - программное средство.

ПО - программное обеспечение.

ИТ - интернет технологии.

СУБД - система управления базой данных

e-mail - адрес электронной почты

ЭВМ - электронная вычислительная машина

PHP (PHP: Hypertext Preprocessor) - язык программирования общего назначения, используемый для разработки веб-приложений.

HTML (HyperText Markup Language) - гипертекстовый язык разметки, который используется для создания документов в Интернет.

JavaScript - прототипно-ориентированный сценарный язык программирования.

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

SQL (Structured Query Language - «язык структурированных запросов») - универсальный компьютерный язык <#"justify">MySQL - свободная реляционная система управления базами данных.HTTP Server - свободный веб-сервер.

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

ВВЕДЕНИЕ

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

Социальная сеть (от англ. social networking service) - платформа, онлайн-сервис или веб-сайт, предназначенные для построения, отражения и организации социальных взаимоотношений.

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

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

Популярность в Интернете социальные сети начали завоевывать в 1995 году, с появлением американского портала Classmates.com («Одноклассники» являются его русским аналогом). Проект оказался весьма успешным, что в следующие несколько лет спровоцировало появление не одного десятка аналогичных сервисов.

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

Все социальные сети имеют ряд общих черт:

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

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

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

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

Главное назначение социальных сетей - осуществление социальных взаимоотношений между пользователями Интернет.

1АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

.1Анализ существующих социальных сетей

Как отмечалось выше, социальная сеть - это медиа-ресурс который не только способствует улучшению социальных взаимоотношений пользователей Интернет (в данном случае граждан РБ), но и средство рекламы. Для того чтобы составить представление об уровне существующих социальных сетей была проделана работа по просмотру и анализу достоинств и недостатков СС. Ниже приводится краткое описание нескольких соц. сетей и сравнительный анализ их возможностей. Социальная сеть www.vk.com[1] - знаменитая СС российского разработчика П. Дурова. Открытие сайта происходит быстро, страница регистрации и входа, изображенная на рисунке 1.1, обладает приятной цветовой гаммой, не загружена громоздкими визуальными компонентами. Меню регистрации и аутентификации находится слева, и выполнено в стиле основной страницы.

Рисунок 1.1 - Страница аутентификации и регистрации социальной сети

При нажатии на кнопку «Регистрация» появляется контекстное меню «Моментальной регистрации».

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

Рисунок 1.2 - Меню регистрации социальной сети vk.com

Завершив процесс регистрации, автоматически создается личная страница пользователя с учетом его данных. Страница пользователя, изображенная на рисунке 1.3, социальной сети «В Контакте» выполнена в сине-серо-белых тонах, не загружена визуальными компонентами, весьма эргономична и приятна на вид. Она фактически разделена на 3 зоны: пользовательские ссылки (слева), навигация (сверху) и личная информация пользователя (посередине).

Рисунок 1.3 - Личная страница пользователя социальной сети vk.com

Плюсы социальной сети «В Контакте»:

-Приятный дизайн и эргономичность;

-Большие функциональные возможности: загрузка аудио, видео, фото файлов и т.д.;

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

-Высокая скорость загрузки страниц;

Минусы:

-Посредственная реализация страницы регистрации;

-Большое количество платного контента (подарки, голоса, рейтинг страницы);

-Отсутствие ограничения просмотра контента имеющего возрастной рейтинг +18;

-Отсутствие контроля входящей в СС информации;

Социальная сеть www.facebook.com[2] - международная СС разработанная М. Цукербергом. Страница аутентификации и регистрации, показанная на рисунке 1.4, загружается быстро и выполнена в сине-серых тонах (c градиентом белого), блок регистрации расположен посередине и выделен большим шрифтом, что способствует концентрации внимания пользователя на важной для него информации.

Рисунок 1.4 - Страница аутентификации и регистрации социальной сети

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

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

Рисунок 1.5 - Личная страница пользователя социальной сети facebook.com

Плюсы социальной сети «Фейсбук»:

-Удобная и приятная регистрация;

-Возможность регистрирования организации или публичного лица;

-Большое количество контента и высокая функциональность;

-Наличие отдельного блога;

Минусы:

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

-Небольшой размер шрифта;

-Посредственная эргономичность страницы;

-Отсутствие интуитивно понятного интерфейса;

Социальная сеть www.professionali.ru[3]- российская деловая СС, объединяющая специалистов и бизнесменов по отраслевым, профессиональным и географическим признакам. Регистрационная страница, показанная на рисунке 1.6, выполнена в темно-серых и белых тонах. Наблюдается загромождение визуальными компонентами, из-за чего снижается общая эргономичность веб-страницы, а также отвлечение пользователя от процесса регистрации. Блок регистрации находится в верхнем углу справа, реализован достаточно просто с использованием шрифтов маленького размера. Акцент внимания пользователя на блоке регистрации отсутствует.

Рисунок 1.6 - Страница регистрации и аутентификации социальной сети

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

Рисунок 1.7 - Личная страница пользователя социальной сети

Плюсы социальной сети «Профессионалы.ру»:

-Широкий спектр поиска работы и работников;

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

Минусы:

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

-Низкая эргономичность социальной сети;

Социальная сеть www.odnoklassniki.ru[4] - российский аналог знаменитой зарубежной сети Classmates.com. Открытие сайта происходит медленно, страница аутентификации и регистрации загружена флеш-анимацией, которая препятствует быстрой загрузке. Затруднен поиск настроек языка, копирайта и таких ссылок как: «новости», «о компании» и т.д.

Рисунок 1.8. - Страница аутентификации и регистрации социальной сети

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

Рисунок 1.9. - Страница регистрации социальной сети www.odnoklassniki.ru

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

Рисунок 1.10 - личная страница пользователя социальной сети

Плюсы социальной сети «Одноклассники»:

-Обилие контента;

-Удобный интерфейс регистрации;

Минусы:

-«Кричащая» цветовая гамма дизайна;

-Низкая эргономичность личной страницы пользователя;

-Продолжительная загрузка страницы аутентификации и регистрации;

-Перегруженность визуальными компонентами;

-Наличие флеш-анимации;

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

1.2 Метод шифрования, положенный в основу разработки обеспечения безопасности доступа к данным

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

Среди множества функций РНР есть функция MD5. В ее основе алгоритм MD5 RSA Data Security, Inc, она возвращает так называемые хеш-строки, который представляет собой 32-значное шестнадцатеричное число. Для каждой строки он уникален, вероятность совпадения его у разных строк ничтожно мала.

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

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

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

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

1.3 Алгоритм MD5

MD5 алгоритм используется в приложениях криптографии и электронно-цифровых подписей для генерации ключа шифрования. Алгоритм разработан, что бы быть достаточно быстрым на 32-битных системах и не требовать больших объемов памяти. MD5 является чуть более медленным, чем MD4, но является более устойчивым к криптографическим атакам. Далее под «словом» будет подразумеваться количество информации в 32 бита, а под «байтом» - 8 бит. Последовательность бит интерпретируется в естественной форме - как последовательность байт, где каждая группа из 8 бит является отдельным байтом, причем старший бит байта идет первым. Аналогично представляется последовательность байт, как последовательность слов, только младший байт идет первым. Предполагается, что в качестве входного потока имеется поток данных N бит. N - неотрицательное целое (возможно 0), не обязательно кратное 8. Для вычисления MD5 хеш-функции необходимо выполнить следующие 5 шагов.

Шаг 1: выравнивание потока.

Входной поток выравнивается так, что бы его длина стала конгруэнтной (сравнимой) с 448 по модулю 512. Выравнивание происходит следующим образом: к потоку добавляется один бит «1», а затем биты «0» до тех пор, пока длина потока не будет сравнима с 448 по модулю 512. Выравнивание происходит всегда, даже если длина потока была уже сравнима с 448 по модулю 512. Таким образом, к потоку добавляется минимум 1 бит, максимум -512.

Шаг 2: добавление длины.

битное представление длины входного потока (длины потока до выравнивания) добавляется к результату предыдущего шага. Если длина потока превосходит 2А64, то добавляются младшие 64 бит. Эти биты добавляются как 2 32-битных слова, младшее слово добавляется первым. Таким образом, на этом шаге длина потока становится кратной 512 битам или 16 32-битным словам. Шаг 3: инициализация MD буфера.

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

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

Шаг 5: вывод MD5.

Результат вычисления (хеш) представлен четырьмя 32 битными словами. 128-битный MD5 хеш готов.

.4Анализ программных средств и компонентов, необходимых для разработки программного продукта

Разработка социальной сети это долгий и трудоемкий процесс. В рамках написания дипломной работы, проект будет реализован в демонстрационном виде. Разработка СС «Белорусы» проходит на одной ЭВМ. В целях экономии средств сайт будет проходить тестирование, и «существовать» на локальном сервере. Создание веб-сайтов охватывает широкий ассортимент средств разработки, языков программирования и т.д. В реализации этого проекта будут задействованы следующие языки программирования: HTML, PHP, CSS, Java. Ниже приведен список, краткое описание, назначение ПС и компонентов, которые используются в процессе разработки.

HTML - гипертекстовый язык разметки, который используется для создания документов в Интернет. Любой HTML документ состоит из обычного текста и разметочных тэгов. Текст, как и в любых других файлах, используется для передачи информации, а разметочные тэги используются для ее группировки и оформления. Разметочные тэги HTML представляют собой специальные слова, которые окружены с обеих сторон угловыми скобками, например: <html>. Если HTML документ открыть в браузере, то он будет отображен в соответствии с разметочными тэгами и будет называться веб-страницей. Главная цель любого веб-браузера (такого как IE, Firefox, Chrome и т.д.) прочитать HTML документ и отобразить его как веб-страницу.

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

PHP - язык программирования общего назначения, используемый для разработки веб-приложений. В 1994 году датский программист Расмус Лердорф создал набор скриптов на Perl/CGI для вывода и учета посетителей его онлайн-резюме, обрабатывающий шаблоны HTML-документов. Лердорф назвал набор Personal Home Page (Личная Домашняя Страница). Вскоре функциональности и быстроты Perl - интерпретатора скриптов - перестало хватать, и Лердорф разработал с использованием языка «Cи» новый интерпретатор шаблонов PHP/FI. В области программирования для сети Интернет PHP - один из популярных сценарных языков благодаря своей простоте, скорости выполнения, богатой функциональности, кроссплатформенности и распространению исходных кодов на основе лицензии PHP.

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

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

При создании проекта CSS будет применяться для оформления веб-страниц.- WYSIWYG HTML-редактор компании Adobe.

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

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

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

Для тестирования и демонстрации социальной сети используется локальный сервер.HTTP-сервер - свободный веб-сервер. Apache является кроссплатформенным ПО, поддерживает операционные системы Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS. Основными достоинствами Apache считаются надежность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, использовать СУБД для аутентификации пользователей, модифицировать сообщения об ошибках и т. д.

Применение данного Веб-сервера будет происходить преимущественно в демонстрационных целях.

Также будут применены SQL и MySQL.

страница шифрование светотехнический данные

1.5Постановка задачи для разрабатываемого проекта

Как показал анализ предметной области можно выделить следующее.

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

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

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

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

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

МОДЕЛИРОВАНИЕ ПРЕДМЕТНОЙ ОБЛАСТИ

.1Проектирование и разработка социальной сети

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Безопасность. Защита личной информации пользователя. Укрепление системы безопасности является основополагающим фактором.

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

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

Рисунок 2.1 - Предварительный макет дизайна социальной сети

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

Навигация - содержит список ссылок на страницы системы (новостная лента, поиск, настройки страницы, работа и т.д.).

Имя - фамилия и имя пользователя.

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

Фото - личная фотография пользователя.

Другие фото - загруженные в записи или альбомы фото.

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

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

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

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

традиционностью;

простотой;

эффективностью;

безопасностью;

гибкостью.

Так же стоит учесть то, что PHP распространяется бесплатно вместе с открытыми исходными кодами (Open Source).

Язык РНР будет знаком программистам, которые работают в различных областях. Многие языковые конструкции позаимствованы из Си, Perl. Код РНР схож с кодами, которые используется в С или Pascal. Этот фактор дает преимущество в его быстром изучении. PHP - язык, сочетающий в себе достоинства Perl и Си, и нацеленный на работу в Интернете. Считается языком с универсальным и ясным синтаксисом.

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

Сценарий РНР может быть составлен из 10 000 строк или из одной строки. Все это будет зависеть от специфики задачи программиста. Не нужно подгружать библиотеки, указывать специальные параметры компиляции и т.п. Механизм РНР выполняет код после первой экранирующей последовательности (<?) и выполнение продолжается до момента встречи парной экранирующий последовательности (?>). Код, имеющий правильный синтаксис, исполняется точно.

Огромное количество функций PHP избавляет от написания многострочных пользовательских функций на C или Pascal .

«Движок» PHP обрабатывает многие сценарии быстрее, чем, например, на Perl.

Так же РНР имеет гибкие и эффективные средства безопасности. Условно их можно разделить на две группы: средства системного уровня и средства уровня приложения.

Поскольку язык очень гибок, то он может быть встроен в HTML, JavaScript, WML, XML. Сценарии РНР могут передаваться в браузер любого устройства, а программисты могут запустить через режим командой строки.

РНР работает на серверах Apache, Microsoft IIS, Netscape Enterprise Server, Stronghold и на платформах UNIX, Solaris, FreeBSD и Windows 95/98/NT/2000/XP/2003.

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

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

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

При разработке социальной сети «Белорусы» будут установлены несколько классов пользователей к информации: гость, зарегистрированный пользователь, модератор, администратор.

Гостю доступны просмотр страниц и поиск информации, однако делиться своими новостями он не может.

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

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

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

Рисунок 2.2 - Диаграмма иерархии пользователей

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

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

Рисунок 2.3 - Диаграмма вариантов для класса пользователей Гость

Рисунок 2.4 - Диаграмма вариантов использования для класса пользователей беспроводной пользователь

Рисунок 2.5 - Диаграмма вариантов для класса пользователей модератор

Рисунок 2.6 - Диаграмма вариантов для класса пользователей администратор

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

Рисунок 2.7 - Диаграмма деятельности

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

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

Рисунок 2.8 - Диаграмма состояния

Рисунок 2.9 - Диаграмма развертывания

2.2Сбор информации

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

закрытость данных в СС;

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

Рисунок 2.9 - Схема работы поискового робота

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

.3Запросы к хранимым данным

Поскольку социальная сеть «Белорусы» представляет собой граф, то для анализа требуется специальный декларативный язык для запросов, так как:

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

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

нужно использовать ключевые слова в тексте или в html-тэгах для увеличения количества запросов.

Всем этим требованиям соответствует язык SPARQL. Основные характеристики этого языка:

осуществление поддержки в работе с путями в графе;

функции среднее, минимум, максимум, сумма;

функции дополнение, объединение и пересечение;

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

выполнение поисковых запросов с помощью групп символов.

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

Рисунок 2.10 - Схема работы подсистемы запросов

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

.4Интерактивная визуализация данных

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

Рисунок 2.11 - Процесс интерактивной визуализации

Преимущества данной системы:

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

взаимодействие с объектом с помощью устройства ввода (мышь, клавиатура) на базе основных действий: выбор, перемещение, навигация, масштабирование, вращения, сдвига;

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

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

3ОБОСНОВАНИЕ ВЫБОРА СРЕДСТВ И СРЕДЫ РАЗРАБОТКИ ПРОГРАММНОГО СРЕДСТВА

.1Среда разработки программного средства

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

HTML - гипертекстовый язык разметки, который используется для создания документов в Интернет. С помощью него создается необходимая структура и сетка страницы, внешний вид которой в дальнейшем совершенствуется CSS и JavaScript. В настоящий момент последней версией является HTML5, которой предшествовала HTML4.01. Большинство Web-ресурсов построены на основе именно этого языка.

В отличие от HTML 4, у которого 3 валидатора, у HTML 5 валидатор один: <!DOCTYPE html>. HTML 5 поддерживает MathML и SVG.

Новые теги: section, article, aside, hgroup, header, footer, nav, dialog, figure, video, audio, source, embed для вставки контента с плагином(только), mark, progress, meter, time, ruby, rt, rp, canvas, command, detailes, datalist, keygen, output.

Новые типы input: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color.

Новые атрибуты для тегов: атрибуты ping media для a и area и т. д.

Исчезновение некоторых тегов, по причине того, что их можно заменить CSS: basefont, big, center, font, s, strike, tt, u.

Исчезновение фреймов из-за негативного влияния на всю страницу

Исчезновение некоторых тегов, замененных в обновленной спецификации на более актуальные: acronym(используется abbr), applet(используется object), isindex, dir.

Не поддерживаются некоторые атрибуты у тегов из-за отсутствия необходимости: rev и charset у link и a, shape и coords у a и т. д.

Не поддерживаются некоторые атрибуты у тегов по причине того, что при использовании CSS достигается лучший эффект: align у всех тегов, alink, link, text, vlink у body и так далее.

Новые API: рисование 2D-картинок в реальном времени; контроль над проигрыванием медиафайлов; хранение данных в браузере; редактирование; Drag-and-drop; работа с сетью; MIME; новые элементы в DOM.

CSS - формальный язык описания внешнего вида документа, написанного с помощью языка разметки. CSS это акроним для Cascading Style Sheets/Каскадных таблиц стилей. CSS это язык стилей, определяющий отображение HTML-документов. Например, CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и многими другими вещами. HTML может использоваться для оформления Web-сайтов, но CSS предоставляет большие возможности и более точен и проработан. CSS, на сегодняшний день, поддерживается всеми браузерами.используется для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого. По мере развития Web дизайнеры начали искать возможности форматирования онлайновых документов. Чтобы удовлетворить возросшим требованиям потребителей, производители браузеров (тогда - Netscape и Microsoft) изобрели новые HTML-тэги, такие, например, как <font>, которые отличались от оригинальных HTML-тэгов тем, что они определяли внешний вид, а не структуру. Это также привело к тому, что оригинальные тэги структурирования, такие как <table>, стали все больше применяться для дизайна страниц вместо структурирования текста. Многие новые тэги дизайна, такие как <blink>, поддерживались только одним браузером. «Вам необходим браузер X для просмотра этой страницы» - такой отказ стал обычным явлением на Web-сайтах.был создан для исправления этой ситуации путем предоставления Web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. Одновременно произошло разделение представления и содержимого документа, что значительно упростило работу.

Появление CSS стало революцией в мире Web-дизайна. Конкретные преимущества CSS:

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

-более точный контроль над внешним видом страниц;

-различные представления для разных носителей информации (экран, печать, и т. д.);

-сложная и проработанная техника дизайна.

Существуют способа применить правила CSS к HTML-документу.

Метод 1: Инлайн/In-line (атрибут style). Можно применять CSS к HTML с помощью HTML-атрибута style. Красный цвет фона можно установить так:

<html>

<head>

<title>Example</title>

</head>

<body style="background-color: #FF0000;">

<p>This is a red page</p>

</body>

</html>

Метод 2: Внутренний (тэг style). Второй способ вставки CSS-кодов - HTML-тэг <style>. Например:

<html>

<head>

<title>Example</title>

<style type="text/css">{background-color: #FF0000;}

</style>

</head>

<body>

<p>This is a red page</p>

</body>

</html>

Метод 3: Внешний. Рекомендуемый метод - создание ссылки на так называемую внешнюю таблицу стилей. Внешняя таблица стилей это просто текстовый файл с расширением .css. Например, таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

Рисунок 3.1 - Таблица стилей

Суть состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

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

Необходимо обратить внимание на то, как указан путь к вашей таблице стилей атрибутом href. Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head>. Например, так:

<html>

<head>

<title>My document</title>

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

</head>

<body>

...

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.

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

Рисунок 3.2 - Связь CSS-файла с HTML-документами

C это World Wide Web Consortium, независимая организация по разработке стандартов кодов Internet (например, HTML, CSS, XML и др.). Microsoft, The Mozilla Foundation и многие другие являются членами W3C и работают по соглашению о перспективах развития этих стандартов. Идея стандартизации в том, чтобы заключить соглашение о развитии Web-технологий, это означает, что действуя в рамках стандартов, Web-разработчик может быть уверен, что он работает в стиле, который будет универсальным для различных платформ. Для облегчения проверки на соответствие CSS-стандарту, W3C создал так называемый validator, который читает ваши таблицы стилей/stylesheet и возвращает список предупреждений о нарушениях и ошибок, если CSS их содержит.- прототипно-ориентированный сценарный язык программирования. Все, что вы видите на Web-странице - это набор элементов и объектов разных типов (окно браузера, документ, массив, кнопки, формы, текст, рисунки и т.п.). К примеру, вы смотрите на страницу в окне браузера, которое представляет собой объект window. В нем находится HTML-документ, являющийся объектом document, который в сою очередь содержит множество разных элементов страницы - заголовки, абзацы, кнопки, формы, текст, ссылки и многое другое. Итак, первый основной объект - document (такие объекты еще называют объектами верхнего уровня - window, document, form). Предположим на странице есть несколько изображений. Первая картинка будет характеризоваться как images[0], вторая - images[1], и т.д. Дело в том, что объекты автоматически добавляются под порядковыми номерами в той последовательности, в какой они определялись в коде Web-страницы. Таким образом, возможно, вытащить нужную картинку под определенным номером следующим образом document.images[i], где под i подставляем нужный индекс изображения. Важно отметить тот факт, что каждый объект JavaScript имеет свои свойства и методы.

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

Существуют plug-in'ы (подключаемые модули), которые встраиваются в браузер и служат для просмотра Flash страниц, они называются Flash Player, причем в последних версиях Netscape Navigator и Internet Explorer эти модули уже встроены (если нет, то их можно бесплатно скачать с сайта Macromedia). И существует программа Flash, с помощью которой эти страницы создаются.

В пользу Flash приводятся его основные достоинства и статистка использования Macromedia профессиональными разработчиками:

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

устранение проблем совместимости между браузерами. В отличие от HTML, Flash одинаково работает как в Internet Explorer, так и в Netscape Navigator. Имеется даже специальный вариант примочки-проигрывателя для браузеров, поддерживающих Java (Flash Java Player);

мощный событийно-управляемый язык. В Macromedia Flash используется специальный язык, при помощи которого можно создавать «интеллект» для своей страницы. Причем если в Flash 4 это был, скорее, некий скрипт (script), имеющий всего несколько основных функций, то в Flash 5 (несмотря на название «ActionScript») - это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать;

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

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

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

На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователям Сети просматривать страницы с Flash содержимым.

Особенности Macromedia Flash 5. Flash 5 - язык программирования нестандартных интерфейсов с векторной анимацией. Здесь делается основной упор на то, что интерфейсы нестандартны. «Нестандартные» интерфейсы имеют ряд отличий от «стандартных» (под «стандартными» подразумеваются привычные интерфейсы HTML):

. Специальные управляющие объекты (кнопки, панели, блоки). Для примера, рулетка в Microsoft Word - нестандартный объект. Ее практически невозможно реализовать в HTML, только изображение, но не интерактивную функциональность.

. Независимое размещение объектов, другими словами, не размещение объектов относительно друг друга, а расположение по координатам и уровням. В DHTML такая возможность существует, но в DHTML надежно реализовать можно только совсем простые вещи.

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

В результате подобной «нестандартности» появляется полная свобода в создании интерактивного интерфейса, более удобного, более наглядного, более функционального. Это реально повышает уровень предоставляемого сервиса. А значит, достигается «customer satisfaction» (удовлетворение требований клиента), и, в конечном итоге, система становится более конкурентоспособной.

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

Основные плюсы программирования в среде Flash 5 - в процессе разработки:

. Почти каждая аккуратно запрограммированная функция сразу очевидно полезна во многих местах.

. Возможно построение универсального сервера.

. Легко переносится часть логики с серверной на клиентскую часть.

. Свобода в верстке и в наборе control-элементов (кнопок, меню, списков, таблиц).

Существуют, однако, и недостатки. Приведем список тех компонентов, которые на данный момент «не дружат» с Flash:

. Сложные математические операции на клиентской части.

. Работа с очень сложными структурами данных на клиентской части.

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

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

. Механизмы, требующие работы с файловой системой клиента или его устройствами (например, Web-камерой или микрофоном).

Многие описанные проблемы решаются уже сегодня:

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

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

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

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

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

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

.2Средства разработки программного средства

В основу всемирной паутины положена идеология и технология гипертекста, технически реализованная при помощи языка HTML. HTML (от англ. HyperText Markup Language, язык гипертекстовой разметки) представляет собой язык, разработанный специально для создания web-документов. HTML-документы представляют собой обычные текстовые ASCII-файлы. Помимо текстового содержания, они включают в свой состав специальные управляющие конструкции языка - так называемые теги. При отображении документа в браузере сами теги на экран не выводятся. Они определяют структурные единицы внутри документа, задают параметры форматирования, включают в состав документа новые элементы (встроенные изображения, Java-апплеты и т.п.) и позволяют создавать гипертекстовые ссылки на другие документы и ресурсы сети Internet.

Для создания и редактирования HTML-документов достаточно простого текстового редактора, например Блокнот Windows. На практике обычно используют средства редактирования, разработанные специально для написания HTML - редакторы WYSIWYG (от англ. what you see is what you get, что видишь, то и получаешь) или, как их еще называют, средства визуального редактирования. Такие программные продукты имеют графические интерфейсы, делающие написание HTML-кода подобным работе с программой редактирования текстов и разметки страниц. Подобные программные продукты позволяют повысить эффективность и значительно сократить время разработки, особенно если речь идет о средних и крупных сайтах. Специализированные HTML-редакторы также работают с исходным кодом web-страницы, но располагают различными вспомогательными инструментами, ускоряющими и упрощающими процесс редактирования документов, и дополнительными средствами для выполнения повторяющихся операций. Кроме того, наиболее мощные из них включают в свой состав средства автоматизации процесса разработки (работа с шаблонами, стилями и библиотеками элементов) и средства размещения файлов сайта на web-сервере. К данной группе редакторов относится большое количество программных продуктов, в том числе и распространяемых бесплатно.

Создание сайта может быть выполнено с использованием технологий AJAX, jQuery, PHP, CGI, MySQL, Flash, Silver light и др. На сайте могут применяться элементы связи с пользователями - форма для отправки электронных писем, тематический форум, блог, чат и др.

Сайт может быть разработан с использованием одного из стандартных средств: Adobe Dreamweaver, MS FrontPage, Amaya и др. Тестирование Web-сайта может быть проведено, например, с использованием локального Web-сервера denwer (denwer.ru) или IIS, входящего в Windows. Корректность работы ресурса должна быть проверена в большинстве стандартных браузеров (в том числе и их версиях): IE, Mozilla Firefox, Opera, Safari, Chrome.

Dreamweaver HTML <#"justify">Создатели программы Dreamweaver постарались сделать удобный и простой в использовании инструмент, облегчающий процесс создания HTML-страниц, их редактирования и управления большим количеством связанных друг с другом документов.

Каждый новый HTML-документ открывается в новой закладке. Для более удобной работы с программой предусмотрены система меню и набор палитр инструментов.

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

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

Рисунок 3.3 - Рабочее пространство Dreamweaver

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

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

Для создания страницы необходимо открыть новый, пустой документ. Это можно сделать различными способами, например, выбрав команду File=>New в главном меню, а затем выбрав HTML из списка. Первое, что необходимо сделать после создания документа, сохранить файл с необходимым именем (иначе при создании гипертекстовых ссылок, вставке изображений и т.п. могут быть использованы неверные адреса). Главная страница сайта должна иметь специальное имя - index.html (или index.htm). После того как странице присвоено имя и она сохранена, можно приступать к наполнению ее информационным содержанием. Начать следует с установки параметров страницы. Для этого необходимо из главного меню выбрать команду Modify=>Page Properties…. Основное, что необходимо задать в открывшемся диалоговом окне, это название (заголовок) страницы - поле Title в категории Title/Encoding. Каждая страница сайта должна иметь продуманное, кратко и четко сформулированное название. Визуально оно будет отображено в заголовке окна браузера и, кроме того, будет использоваться поисковыми системами и т.п.

Кроме заголовка, в категории Appearance этого диалогового окна можно установить следующие параметры страницы:

Background image - изображение, которое будет использовано в качестве фона страницы (графический файл с изображением можно выбрать, нажав кнопку Browse…);

Background / Text - соответственно цвета фона страницы и текста, расположенного на ней (можно выбрать цвет из палитры, нажав на кнопке рядом);

Links / Visited links / Active links - соответственно цвета ссылок / посещенных ссылок / активных ссылок;

Left margin / Top margin / Margin width / Margin height - задают отступы (поля) по бокам и в начале, и конце страницы.

Рис. 3.4 - Настройка параметров HTML-страницы

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

Существует несколько основных тэгов HTML, которые должны присутствовать в тексте любой web-страницы. Каждая web-страница обязана содержать тэг <HTML>, располагаемый в самом начале (каждый из тэгов имеет открывающую (например, <HTML>) и закрывающую части (например, </HTML>)). Этот тэг описывает документ как web-страницу, выполненную в формате HTML. Непосредственно за тэгом <HTML> обычно следует тэг <HEAD>, который указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней. В раздел HEAD обычно вложен тэг <TITLE>, служащий для обозначения наименования страницы, (наименование страниц обычно отображается в строке заголовка окна браузера). Затем следует тэг <BODY>, который указывает на начало «тела» web-страницы. В этом разделе размещается весь текст, отображаемый браузером, графика, таблицы и другие элементы содержимого страницы, которые увидит посетитель, обратившийся к сайту.

Пример HTML-документа:

<html>

<head><title>Online обучение: HTML</title></head>

<body>

Текст сайта

</body>

</html>

Любой текст разделяется на последовательность абзацев. Для того чтобы начать новый абзац (при редактировании страницы в режиме дизайна), как и в большинстве текстовых редакторов, достаточно нажать клавишу Enter. При этом в исходный текст HTML-документа автоматически вставляются открывающий и закрывающий теги <Р>. Для создания принудительного перехода на новую строку используется комбинация клавиш Shift+Enter. В исходный код в этом случае будет добавлен тег <BR>.

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

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

Для каждого блока текста можно установить его тип, то есть сделать этот текст заголовком любого уровня или форматированным текстом. Проще всего это делать, используя панель свойств объекта. Если панели нет на экране, то можно ее открыть, выполнив команду Window=>Properties (кроме того, указать тип блока текста (абзаца) можно в меню Text=>Paragraph Format или в разделе Paragraph Format контекстного меню, появляющегося при щелчке правой кнопкой мыши в поле документа).

Рисунок 3.5 - Панель свойств объектов

Выделив, блок текста или просто установив курсор в любое место абзаца, можно выбрать его тип в поле Format. В соответствии с элементами языка HTML возможны следующие варианты: Paragraph - обычный абзац (ограничен тегами <Р>), Heading 1…6 - заголовки соответствующего уровня (ограничены тегами <Н1>…<H6>), Preformatted - предварительно форматированный текст (тег <PRE>) или None - блок текста перестает быть абзацем.

Использование тегов визуального форматирования является нежелательным.

В Dreamweaver для форматирования текста можно использовать каскадные таблицы стилей (CSS, Cascade Style Sheet). Преимущество CSS - удобство редактирования дизайна всего сайта путем изменения всего одного файла CSS и сокращения объема сайта из-за выноса оформления в отдельный файл CSS.

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

селектор {

свойство1: значение;

свойство2: значение;

...

свойствоn: значение;

}

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

Для отображения панели стилей нужно выполнить команду Window=>CSS Styles или нажать на кнопку CSS Styles в навигаторе панелей.

Рисунок 3.6 - Панель стилей

Для создания нового стиля (правила) надо нажать кнопку New CSS Rule на панели стилей или выбрать команду New... из контекстного меню, появляющегося при щелчке правой копкой мыши в любом месте панели стилей.

В открывшемся диалоговом окне необходимо указать тип создаваемого стиля - список Selector Type. Class (can apply to any HTML element) создает именованный стиль, который может быть применен к различным блокам текста. При этом в поле Selector Name необходимо указать имя - идентификатор стиля (CLASS). Оно должно начинаться с символа точка, являющегося идентификатором класса. Tag (redefine an HTML element) переопределяет параметры форматирования определенного тега, который необходимо выбрать в списке Tag. ID (applies to only one HTML element) позволяет определить форматирование для тегов, содержащих особый идентификатор. Идентификаторы используются аналогично именованным стилям, но предназначены для форматирования элементов, требующих индивидуальной обработки. В остальных случаях предпочтительным является использование именованных стилей (CLASS).

Далее необходимо определить, где будет расположено описание стилей список Rule Definition. При выборе New Style Sheet File таблица стилей будет сохранена в отдельном файле, ссылка на который будет вставлена особым образом в заголовок создаваемого HTML-документа (если с редактируемой страницей уже связаны какие-либо файлы с описанием стилей, то их имена будут перечислены в списке). При таком подходе одна и та же таблица стилей может использоваться в различных документах. Это особенно удобно, когда надо определить элементы форматирования, общие для всех страниц сайта. Во втором случае (This Document Only) описание стилей будет сохранено непосредственно в редактируемом документе (и соответственно может быть использовано только в его пределах). Такой вариант удобен для создания стилей, специфичных для данной страницы.

Рисунок 3.7 - Создание нового стиля

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

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

Рисунок 3.8 - Диалоговое окно определения параметров нового стиля

В поле Font-style можно выбрать один из вариантов начертания шрифта: normal - обычное (используется по умолчанию), italic - курсив, oblique - наклонное. Параметр Line Height позволяет задать расстояние между базовыми линиями смежных строк текста - интерлиньяж. Свойство Text-decoration применяет к тексту подчеркивание (underline), надчеркивание (линия над текстом, overline), зачеркивание (line-through), эффект мигания (blink), none используется по умолчанию для обычного текста.

Параметр Font-weight задает вес, или жирность, шрифта. Свойство Font-variant используется для отображения элемента маленькими прописными буквами (значение small-caps). Параметр Text-transform оказывает влияние на использование заглавных букв в элементе (capitalize - отображает первую букву каждого слова в верхнем регистре, uppercase - отображает все символы в верхнем регистре, lowercase - отображает все символы в нижнем регистре). Параметр Color используется для задания цвета текста.

Background - параметры свойства фона, применяемые к «холсту» позади элемента. Background Color и Background Image определяют соответственно цвет фона и фоновое изображение элемента. Если задано фоновое изображение, то свойство Repeat определяет, как оно будет повторяться (repeat - в вертикальном и горизонтальном направлениях, repeat-x - только по горизонтали, repeat-у - только по вертикали, no-repeat - без повторов, один раз). Параметром Attachment определяется, будет ли прокручиваться фоновое изображение вместе с документом (по умолчанию, scroll) или нет (fixed). Свойства Horizontal Position и Vertical Position определяют начальное положение фонового изображения относительно прямоугольника, окружающего содержимое элемента.

Block - параметры выравнивания и взаимного расположения фрагментов текста в элементе. Свойство Word Spacing задает интервал между словами. Letter Spacing определяет размер интервала между символами. Параметр Vertical-alignment влияет на вертикальное выравнивание элемента. Text-align задает горизонтальное выравнивание текстовых элементов. Свойство Text-indent определяет размер отступа перед первой строкой текста элемента. Параметр Whitespace определяет, каким образом используются пробелы, заданные в исходном документе: normal - трактует текст обычным образом, заменяя множественные пробелы на один; pre -аналог тега <pre> в HTML (но при этом не используется шрифт с фиксированной шириной); nowrap - предотвращает перенос элементов текста на следующую строку, если не задан тег <br>.

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

List - параметры форматирования списков.

Positioning - параметры позволяют преобразовать тег или выделенный блок текста в слой. Использование ограничено тем, что эти свойства поддерживаются только Internet Explorer.

Extensions - параметры, не поддерживаемые большинством браузеров.

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

Чтобы включить созданные стили в HTML-страницу, необходимо в разделе <HEAD> поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:

<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">

где "styles.css" - имя файла с созданными стилями CSS.- компактный многопоточный сервер баз данных. MySQL характеризуется большой скоростью, устойчивостью и легкостью в использовании.был разработан компанией TcX для быстрой обработки очень больших баз данных. Компания утверждает, что использует MySQL с 1996 года на сервере с более чем 40 БД, которые содержат 10.000 таблиц, из которых около 500 имеют более 7 миллионов строк (24.01.2004).является идеальным решением для малых и средних приложений. Исходники сервера компилируются на множестве платформ. Наиболее полно возможности сервера проявляются на Unix-серверах, где есть поддержка многопоточности, что дает значительный прирост производительности.

На текущий момент MySQL все еще в стадии разработки, хотя версии 3.22 и более поздние полностью работоспособны.сервер является бесплатным для некоммерческого использования. Для коммерческого использования необходимо приобрести лицензию, стоимость которой составляет 190 EUR.поддерживает язык запросов SQL в стандарте ANSI 92, и кроме этого имеет множество расширений к этому стандарту, которых нет ни в одной другой СУБД.

Краткий перечень возможностей MySQL:

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

Количество строк в таблицах может достигать 50 млн.

Быстрое выполнение команд. Возможно MySQL самый быстрый сервер из существующих серверов.

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

Поддержка вложенных запросов, типа SELECT * FROM table1 WHERE id IN (SELECT id FROM table2).

- Не реализована поддержка транзакций. Взамен предлагается использовать LOCK/UNLOCK TABLE.

Нет поддержки триггеров и хранимых процедур.

3.3Web-серверы

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

Сервер - это любое управляющее компьютером программное обеспечение, которое дает ему возможность выполнять запросы на документы или другие данные. Программы, которые запрашивают и отображают документы (такие как браузер), называются клиентами. Термины «на стороне сервера» и «на стороне клиента», используемые, например, при работе с картами-изображениями, относятся к той машине, которая руководит процессом. Функции на стороне клиента выполняются на машине пользователя, функции на стороне сервера - на удаленной машине.серверы отвечают на запросы браузеров (клиентских программ), находят заданные файлы (или выполняют сценарий CGI) и возвращают документ или результаты сценария. Web-браузеры и серверы общаются по протоколу Hypertext Transfer Protocol (HTTP, протокол передачи гипертекста).

Программное обеспечение серверов. Большинство серверов работают на платформе Unix. Именно поэтому в мире Web по-прежнему используется терминология системы Unix. В процессе работы понадобится выучить несколько Unix-команд. Однако процент серверов Windows NT, Windows 95 и даже MacOS постоянно увеличивается. Некоторые серверные пакеты предлагают графический интерфейс в качестве альтернативы управлению из командной строки Unix.

Вот некоторые известные серверы: NCSA Server, Apache, CERN, Netscape Servers, Internet Information Server (IIS).

Сегодня большинство серверов (приблизительно 70%) работают на Apache или его предшественнике NCSA. Конкретный тип сервера не влияет на большую часть того, что делает дизайнер, например, на создание графики или разработку базовых HTML-файлов. Конечно, он будет влиять на более совершенные методы создания Web-сайтов, такие как Server Side Includes (серверные включения), добавление типов MIME и Web-страницы, управляемые базами данных.

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

Индексные файлы. Прямой слэш (/) в конце URL означает, что URL обращается к каталогу, а не к файлу. По умолчанию серверы отображают содержание каталога, указанного в URL. Большинство серверов, однако, сконфигурированы так, чтобы отображать особый файл вместо списка каталога, этот файл называется индексным. Индексные файлы обычно имеют имя index.html, но на некоторых серверах они могут называться welcome.html или default.html.

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

Заголовки отклика HTTP. Как только сервер определяет месторасположение файла, он посылает содержимое этого файла обратно браузеру вместе с некоторыми заголовками отклика HTTP (response headers). Эти заголовки обеспечивают браузер информацией о прибывающем файле, включая его тип данных (также известный как «тип содержимого» или «тип MIME»). Обычно сервер определяет формат по расширению файла; например, файл с расширением .gif распознается как файл изображения.

Браузер читает информацию в заголовке и определяет, что делать с файлом. Он может отобразить файл в окне либо запустить соответствующее вспомогательное или встраиваемое приложение (plug-ins).

Сценарии CGI. Вместо того чтобы обращаться к файлам HTML, URL может потребовать запустить программу CGI. CGI расшифровывается как Common Gateway Interface (общий шлюзовой интерфейс). Он позволяет Web-серверу общаться с другими программами (сценариями CGI), которые работают на сервере. Сценарии CGI обычно пишут на языках Perl, С или C++.

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

Большинство администраторов серверов придерживаются правила хранить сценарии CGI в специальном каталоге, озаглавленном cgi-bin (сокращенно от CGI-binaries). Когда они хранятся в одном каталоге, администраторам проще управлять сервером и обеспечивать его безопасность. Если сценарий CGI запрашивается браузером, сервер исполняет функцию и возвращает браузеру динамическое содержимое.

Использование SSI. SSI - Server Side Includes или, по-русски, - включения на стороне сервера. SSI - это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия. Например: вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа браузера) и другие не менее приятные вещи.

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

Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет Web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации Web-сервера, но в основном применяется именно *.shtml.

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

<!--#command param="value" -->

где # - признак начала SSI-вставки; command - SSI-команда; param - параметры SSI-команды.

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

Второе, не менее важное преимущество, - это возможность мгновенной замены дизайна сайта, не требующая переделывания страничек с информационным содержанием сайта. Для смены дизайна достаточно переписать SSI-вставки, формирующие внешний вид сайта.. На компьютерах IBM PC и Маcintosh большинство функций можно выполнить, используя инструментарий с графическим интерфейсом. Тем не менее, иногда невозможно найти замену для старой сессии Telnet. Telnet - протокол «эмуляции терминала», позволяющий вам регистрироваться в другой компьютерной системе или сети, такой как Internet. Этот термин также используют применительно к любому приложению, служащему для общения с использованием протокола Telnet. Программа Telnet предоставит текстовое терминальное окно другой системы, в котором можно вводить инструкции в командной строке.

Регистрация. Когда с помощью программы Telnet открывается сеанс связи с удаленным сервером, появляется приглашение зарегистрироваться в системе. Прежде чем получить доступ к серверу, системному администратору нужно установить для пользователя учетную запись (account) Unix.

При успешной регистрации, вы получите подсказку системы Unix %, (или иногда #) в зависимости от разновидности Unix, на которой работает сервер. Это знак, что система готова. С этого момента используется программа под названием shell. Она интерпретирует печатаемые вами команды и вызывает запрашиваемые программы. Перемещение в домашний каталог будет автоматическим.

Чтобы закончить сессию Telnet достаточно набрать logout или exit.

Структуры каталогов. Поскольку Web является порождением окружения Unix, он следует многим его соглашениям. Например, чтобы в гиперссылке правильно указать путь, URL, требуется понимание организации каталогов на платформе Unix.

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

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

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

запрещено использование пробелов в именах файлов. Хотя это абсолютно приемлемо для локальных файлов в MacOS и Windows 95/98/NT, пробелы не распознаются другими системами;

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

выбор расширения должен быть правильным. Документы HTML требуют расширения .html (или htm для сервера Windows). Графические файлы GIF имеют расширение .gif, а файлы JPEG - .jpg или .jpeg. Файлы с неправильным расширением браузер не распознает в качестве файлов, разрешенных для передачи в Web;

имена файлов HTML чувствительны к регистру. Хотя это и не обязательно, но лучше использовать только буквы нижнего регистра. Это может облегчить запоминание имен файлов.

Загрузка документов (FTP). Наиболее частой транзакцией, с которой Web-дизайнер обращается к серверу, является загрузка на сервер HTML-документов, изображений или мультимедийных файлов. По сети файлы передаются между компьютерами с помощью метода, называемого FTP (File Transfer Protocol, протокол передачи файлов). При работе на Unix в сессии Telnet можно запустить программу ftp и передавать файлы с огромным числом аргументов командной строки.

На компьютерах IBM PC и Маcintosh имеется ряд программ FTP с графическими интерфейсами, которые избавляют от необходимости передавать файлы с использованием командной строки Unix. Более того, в большинстве случаев функции FTP встроены непосредственно в WYSIWYG HTML-редакторы, такие как GoLive Cyberstudio, Claris HomePage и Dreamweaver. Ha компьютерах Macintosh достаточно популярны специальные программы, которые осуществляют передачу файлов методом «перетаскивания». На PC есть немало простых программ FTP, таких как WS__FTP и AceFTP.

Браузеры Netscape Navigator и Internet Explorer также функционируют как простые FTP-клиенты, предоставляя возможность как загружать, так и выгружать файлы, используя интерфейс «drag-and-drop».

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

. Запуск программы FTP, соединение с сервером. Нужно ввести точное имя сервера, регистрационное имя и пароль.

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

. Задаем режим передачи. Главное во время передачи - решить, передавать данные в двоичном или ASCII -режиме. ASCII-файлы состоят из буквенно-цифровых символов. Некоторые FTP-программы рассматривают файлы ASCII как «текстовые». Документы HTML следует передавать как ASCII или текст.

Двоичные файлы состоят из откомпилированных данных (единиц и нулей), их примерами являются выполняемые программы, изображения, фильмы и т.д. Некоторые программы рассматривают двоичный режим как «необработанные данные» («raw data») или «изображение» («Image»). Все графические (.gif или .jpeg) и мультимедийные файлы должны передаваться как двоичные или «Raw Data». В Fetch (MacOS) вы можете обнаружить параметр MacBinary, который передает файл полностью, вместе с ветвью ресурсов (часть файла, содержащая пиктограммы рабочего стола и другие специфические для компьютера Маcintosh данные). Этот вариант следует использовать только при передаче с одного компьютера Маcintosh на другой. Ветвь ресурсов отделяется от мультимедийных файлов, созданных на компьютерах Маcintosh, при передаче в двоичном режиме.

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

. Передача файлов на сервер. Стандартный протокол FTP использует термины «поместить» («put») для обозначения передачи файлов с компьютера пользователя на сервер и «получить» («get») для обозначения загрузки файла с сервера на компьютер, поэтому они могут использоваться и в программе FTP. Одновременно можно загружать несколько файлов.

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

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

Установка права доступа программой FTP. Некоторые FTP-про-граммы позволяют устанавливать право доступа по умолчанию в диалоговом окне. Для достижения большинства целей Web пользователю нужно обеспечить полный доступ и ограничить всех других пользователей только возможностью чтения. Может понадобиться согласие администратора сервера с такими установками.

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

Система для сообщения мультимедийных типов файлов очень напоминает MIME (Multipurpose Internet Mail Extension, многоцелевые расширения почтовой службы в Интернете), которая была изначально разработана для вложений в письма электронной почты. Чтобы успешно сообщать тип файла браузеру, нужно чтобы сервер был сконфигурирован на распознавание любого MIME-типа. Если нужно доставлять данные, выходящие за рамки стандартных HTML-файлов и изображений (например, видео Shockwave Flash или аудиофайлы), следует уточнить у администратора сервера, способен ли сервер поддерживать этот MIME-тип. Большинство распространенных форматов встроены в текущие версии программного обеспечения сервера. Если нет, то администратор может легко их установить, следует лишь предоставить ему необходимую информацию.

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

4РАЗРАБОТКА ПРОГРАММНОГО СРЕДСТВА

.1Стратегия разработки

Определив, какие браузеры использует большинство посетителей сайта, можно решить, какие теги HTML и Web-технологии целесообразно использовать в разработке. Точно так же можно определить, какую часть пользователей мы рискуем проигнорировать при использовании таких средств, как Java или JavaScript.

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

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

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

Разделение различий. Большинство дизайнеров предпочитают идти на компромисс. В дизайнерских кругах распространена фраза о Web-страницах, которые «изящно деградируют» («degrade gracefully»), что означает использование новейших технологий, подобных DHTML или JavaScript, таким образом, чтобы обеспечивать функционирование страницы и на более ранних версиях браузерах.

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

Еще один подход - автоматический запуск версии, соответствующей типу браузера, который делает запрос. JavaScript может задавать действия в зависимости от используемого браузера. Кроме того, страницы могут быть скомпонованы в процессе работы для конкретного браузера серверными включениями (Server Side Includes).

.2Разработка Web-страницы

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

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

Достоинства:

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

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

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

Недостатки:

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

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

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

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

Достоинства:

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

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

Недостатки:

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

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

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

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

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

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

.3Влияние дисплеев на Web-дизайн

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

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

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

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

Особенности цветов дисплея. Мониторы, если они цветные, различаются по числу воспроизводимых цветов. Мониторы обычно воспроизводят 24-раз-рядные (16,77 млн. цветов), 16-разрядные (65 536 цветов) или 8-разрядные (256 цветов).

Цвета, полученные в «истинном», 24-разрядном пространстве цветов будут искажаться (выводиться с пятнами и крапинками) при обработке браузерами на 8-разрядных дисплеях.

Существует, однако, набор из 216 цветов, составленный из цветов системных палитр МасOS и Windows, который не будет искажаться на 8-разрядных дисплеях. Одно из названий этого множества цветов - Web-палитра (Web Palette). Многие дизайнеры предпочитают пользоваться этой палитрой при создании Web-графики и элементов HTML, так чтобы страница выглядела одинаково для всех пользователей.

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

Первым шагом при определении вероятного размера Web-страницы должно стать определение максимального пространства, обеспечиваемое дисплеем. Компьютерные дисплеи имеют различные стандартные размеры и обычно измеряются в дюймах. Можно привести некоторые типичные размеры дисплеев - 14", 15", 17", 19" и 21".

Более значимой характеристикой является разрешение дисплея - общее число пикселов (picture's element - элемент картинки) на экране. Чем выше разрешение, тем более детальным может быть изображение. Зная возможное число пикселов, вы можете создавать в соответствии с ним изображения (также измеряемые в пикселах) и элементы страницы.

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

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

Теперь Web предназначен не только для персональных компьютеров. Web-браузеры уверенно входят в жилые комнаты, портфели и машины в виде WebTV, карманных PDA-устройств и даже сотовых телефонов. С необычно малыми размерами их дисплеев связаны новые заботы дизайнеров.

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

В качестве устройства отображения WebTV использует телевизор. Рабочее пространство WebTV составляет 544x378 пикселов. Браузер позволяет вертикально перелистывать страницы, но не имеет горизонтальной прокрутки, так что более широкая графика будет частично невидима и недоступна. Принципы дизайна, соответствующего стандартам телевидения, заключаются в том, чтобы создавать светлый текст на темном фоне, а не наоборот, а также не использовать элементы шириной менее 2 пикселов.

Карманные устройства. Возросшая популярность Web в совокупности с расширяющимся использованием карманных устройств связи, таких как карманные компьютеры, PDA и сотовые телефоны, привела к тому, что Web-браузеры сжались до невероятно малых размеров. Многие из этих устройств для отображения содержания сайта используют браузеры типа «тонкий» клиент (thin client) - клиент-терминал. Этот вид браузера работает с минимальными требованиями к процессору на стороне клиента, оставляя весь огромный объем работы серверу.

Например, браузер HitchHiker специально разработан для работы на монохромном квадратном дисплее сотового телефона со стороной 2 дюйма. Браузер ProxiWeb являет собой пример другого клиента, который обеспечивает доступ к популярному PDA PalmPilot (а также к IBM WorkPad и новому Palm III). Он работает с использованием прокси-сервера, который обрабатывает Web-страницы, предназначенные для отображения на портативных устройствах. ProxiWeb даже преобразует графику в монохромные битовые карты, так что до некоторой степени сохраняется первоначальный вид страницы (это наиболее полезно для графических заголовков).

.4Выбор дизайнерского решения программного средства

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

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

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

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

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

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

Рисунок 4.1- Главная страница социальной сети «Белорусы»

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

<div id="rotator">

<ul>

<li>

<img src="img11.jpg" width="1202" height="327" alt=""/>

</li>

<li> <img src="img22.jpg" width="1202" height="327" alt=""/> </li>

<li> <img src="img33.jpg" width="1202" height="327" alt=""/> </li>

</ul>

</div>

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

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

.5Разработка главной страницы программного средства

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

Клиентская часть:

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

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

блок объявлений позволяет подавать и просматривать объявления;

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

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

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

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

контакты предназначены для отображения и редактирования списка «друзей» пользователя;

Серверная часть:

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

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

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

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

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

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

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

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

Рисунок 4.2 - Блок регистрации

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

Рисунок 4.3 - Схема алгоритма MD5

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

Рисунок 4.4 - Блок-схема процесса регистрации и входа в систему

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

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

Рисунок 4.5 - Личная страница пользователя

Панель навигации реализована по системе «аккордеон», что способствует общей эргономичности главной страницы и оптимальности ее использования. Аккордеон отличается удобством и быстротой загрузки, так как занимая ограниченное пространство, он содержит большие объемы данных, отображение которых не влияет на общую скорость загрузки страницы. Плагин реализован на основе библиотеки jQuery. На данном этапе разработки создано 4 вкладки: «Белорусы», «Почта», «Мои файлы», «Выйти».

В каждой вкладке находятся ссылки на дополнительные страницы социальной сети.

Например, при открытии вкладки «Белорусы» пользователю предоставляется выбор из трех ссылок: контакты, блоги, объявления.

Рисунок 4.6 - Вкладка «Белорусы»

В вкладке «Почта» находятся ссылки на личные сообщения и перенаправление на почтовые ящики пользователя, например, Gmail и Yahoo! Mail.

Рисунок. 4.7 - Вкладка «Почта»

Вкладка «Мои файлы» вмещает в себя ссылки на видео и аудиофайлы, а также ссылки на альбомы пользователя. Реализована возможность добавления и просмотра (прослушивания) файлов.

Рисунок 4.8 - Вкладка «Мои файлы»

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

Рисунок 4.9 - Вкладка «Выйти»

5ТЕСТИРОВАНИЕ ПРОГРАММНОГО СРЕДСТВА

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

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

Зачастую ошибки в Web-системах сложно воспроизвести последовательно, так как большое кол-во переменных представлено распределенным характером структуры системы клиент/сервер. Существует как минимум 3 «обычных подозреваемых» в Web-окружении. Это клиент, сервер и сеть.

И клиент, и сервер являются носителями несоответствий конфигурации и совместимости, которые подобны окружениям ПК, где все компоненты находятся «в одной коробке». Однако эти несоответствия приумножаются в рамках систем клиент/сервер, потому как к сети может быть подключено множество клиентов и серверов. Типичные несоответствия конфигурации и совместимости приводит к смешению технического обеспечения и операционной системы (например, блоки, базирующиеся на UNIX в противовес таковым, базирующимся на Windows ) и смешению программного обеспечения со стороны сервера (web-серверные пакеты, пакеты сервера базы данных, брандмауэры, COM объекты, CORBA объекты и т.д.). Несоответствия могут также привести к смешению программного обеспечения со стороны клиента (очереди TCP/IP, ПО дозвона, компоненты помощи, брэнды браузеров и их версии). В дополнение, такие установки браузера, как общие настройки, настройки соединений, настройки безопасности (включая ActiveX контроллеры, дополнительные программные модули (плагины), Java , скрипты, загрузки, авторизацию пользователя и т.д.), настройки содержания, программные настройки и другие расширенные настройки (включая опции просмотра, мультимедийные опции, опции Java VM , опции печати и HTTP опции), предоставляют множество переменных, которые должны быть протестированы и включены в исследования.

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

Тестирование клиентской части.

) Тест регистрации и аутентификации.

Таблица 5.1 - Тестирование регистрации

ШагДействиеОжидаемый результатПолученный результат1На главной странице выберите «Зарегистрироваться»Открылось меню со следующим составом: логин (E-mail), пароль, имя, фамилия.Открылось меню со следующим составом: логин (E-mail), пароль, имя, фамилия.2Заполните соответствующие графы3Нажмите «Зарегистрироваться»Регистрация прошла успешно.Регистрация прошла успешно.4Создание личной страницы.Заполнение личных данных и загрузка аватара.Заполнение личных данных и загрузка аватара.

Таблица 5.2 - Тестирование аутентификации

ШагДействиеОжидаемый результатПолученный результат1На главной странице выберите «Войти»Открылось меню со следующим составом: логин (E-mail), пароль.Открылось меню со следующим составом: логин (E-mail), пароль.2Заполните соответствующие графы3Нажмите «Войти»Вход прошел успешноВход прошел успешно

) Тест использования социальной сети пользователем.

Таблица 5.3 - Тестирование использования социальной сети

ШагДействиеОжидаемый результатПолученный результат1На главной странице нажмите на логотип социальной сетиСтраница обновилась и перенаправила пользователя на личную страницу.Страница обновилась и перенаправила пользователя на личную страницу2Выберите вкладку «Белорусы»Открылось меню подкатегорий со списком ссылок (контакты, блоги, объявления)Открылось меню подкатегорий со списком ссылок (контакты, блоги, объявления)3Выберите «Контакты»Открылся список контактов пользователяОткрылся список контактов пользователя4Выберите «Блоги»Открылось меню блоговОткрылось меню блогов5Выберите «Объявления»Открылось меню объявлений.Открылось меню объявлений.6Выберите вкладку «Почта»Открылось меню подкатегорий со списком ссылок (личные сообщения, gmail, yahoo)Открылось меню подкатегорий со списком ссылок (личные сообщения, gmail, yahoo)7Выберите вкладку «Мои файлы»Открылось меню подкатегорий со списком ссылок (мои фотографии , мои аудиозаписи, мои видеозаписи)Открылось меню подкатегорий со списком ссылок (мои фотографии , мои аудиозаписи, мои видеозаписи)Открылся список загруженных изображений с возможностью просмотра8Выберите «Мои фотографии»Открылся список загруженных изображений с возможностью просмотра9Выберите «Мои аудиозаписи»Открылся список аудиофайлов с возможностью прослушиванияОткрылся список аудиофайлов с возможностью прослушивания10Выберите «Мои видеозаписи»Открылся список видеофайлов с возможностью просмотраОткрылся список видеофайлов с возможностью просмотра11Выберите вкладку «Выйти»Открылось меню управления аккаунтом.Открылось меню управления аккаунтом.

Отчет о тестировании:

Тестирование Клиентской части:

Тест 1 - Пройден;

Тест 2 - Пройден;

В процессе тестирования не было выявлено серьезных ошибок.

6РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ

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

Минимальные системные требования.

Операционная система: Windows XP (sp1 - sp3), Vista, 7, 8; MacOS; Android; IOS.

Процессор: Intel Pentium I (или аналогичный Amd) 1 Ггц.

ОЗУ: 256 MB.

Место на жестком диске: 500 MB.

Наличие браузеров последних версий: IE, Mozilla Firefox, Google Chrome, Opera, Maxthon, Safari.

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

Рисунок 6.1 - Страница регистрации

Далее мы можем провести условную регистрацию нажав кнопку «Зарегистрироваться» или выполнять вход в систему нажав «Войти».

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

Рисунок 6.2 - Логотип социальной сети

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

Рисунок 6.3 - Персональная страница пользователя

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

Рисунок 6.4 - Использование панели навигации

Рисунок 6.5 - Контакты

Рисунок 6.6 - Блоги

Рисунок 6.7 - Объявления

Рисунок 6.8 - Вкладка «Почта»

Рисунок 6.9 - Личные сообщения

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

Рисунок 6.10 - Перенаправление на страницу электронного почтового ящика Yahoo!

Рисунок 6.11 - Перенаправление на страницу электронного почтового ящика Gmail

Рисунок 6.12 - Вкладка «Мои файлы»

Рисунок 6.13 - Мои фотографии

Рисунок 6. 14 - Музыка

На данной странице реализована возможность прослушивания аудиофайлов, достаточно нажать кнопку «play».

Рисунок 6.15 - Мои видеозаписи

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

Рисунок 6.16 - Вкладка «Выйти»

При нажатии на ссылку «Выйти из» происходит перенаправление на страницу выхода.

Рисунок 6.17 - Страница выхода из аккаунта

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

7ТЕХНИКО-ЭКОНОМИЧЕСКОЕ ОБОСНОВАНИЕ ВЕБ-ПРОЕКТА «СОЦИАЛЬНАЯ СЕТЬ»

.1Характеристика программного продукта

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

Программный продукт будет разрабатываться группой программистов ООО «Белорусы».

Разработка и внедрение данной программы позволят:

находить новых бизнес-партнеров и сотрудников;

обмениваться знаниями и опытом с членами сообществ и отраслевыми экспертами;

найти вакансии в специализированных компаниях по своему профилю;

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

привлекать новую клиентскую базу;

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

? чистая дисконтированная стоимость (ЧДД);

? срок окупаемости инвестиций (ТОК);

? рентабельность инвестиций (Ри).

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

.2Расчет затрат и отпускной цены программного продукта

Основная заработная плата исполнителя проекта определяется по формуле

где n - количество исполнителей, занятых разработкой ПС;

TЧi - часовая тарифная ставка i-го исполнителя (руб.);

ФЭi - эффективный фонд рабочего времени i-го исполнителя (дней)

ТЧ - количество часов работы в день (ч);

К - коэффициент премирования (1,2).

В настоящий момент тарифная ставка 1-го разряда на предприятии составляет 1 177 760 руб.

Рассчитаем месячную тарифную заработную плату исполнителей по формуле:

где Тм1 - тарифная ставка 1-го разряда;

Ктi - тарифный коэффициент, соответствующий i-ому разряду.

Tm1 = 1 177 760 х 2,242 = 2 640 537,92 (руб.)

Tm2 = 1 177 760 х 1,866 = 2 197 700,16 (руб.)

Tm3 = 1 177 760 х 2,047 = 2 410 874,72 (руб.)

Дневная тарифная ставка рассчитывается путем деления месячной тарифной заработной платы каждого исполнителя на количество дней в месяце (22).

Тдн1 = 2 640 537,92 / 22 = 120024,45 (руб.)

Тдн2 = 2 197 700,16 / 22 = 99895,46 (руб.)

Тдн3 = 2 410 874,72 / 22 = 109585,21 (руб.)

Расчет стоимости часа исходит из пятидневного рабочего дня по 8 часов в день:

Tч1 = 120024,45 / 8 = 15003,05 (руб.)ч2 = 99895,46 / 8 = 12486,93 (руб.)ч3 = 109585,21 / 8 = 13698,15 (руб.)

Расчет основной заработной платы представлен в таблице 7.1.

Таблица 7.1 - Расчет основной заработной платы

ИсполнительРазрядТарифный коэффициентМесячная тарифная ставка, руб.Часовая тарифная ставка, руб.Плановый фонд рабочего времени, дн.Заработная плата, руб.Программист 1-й категории112,2422640537,9215003,052644752966,24Программист 2-й категории91,8662197700,1612486,9326426372396,16Программист 2-й категории102,0472410874,7213698,1526428930492,8Основная заработная плата60055855,2

Дополнительная заработная плата исполнителей проекта определяется по формуле:

где НД - норматив дополнительной заработной платы (20 %).

Дополнительная заработная плата составит:

Зд = 60 055 855,220/100=12 011 171,04 (руб.)

Отчисления в фонд социальной защиты населения и на обязательное страхование (ЗС) определяются в соответствии с действующими законодательными актами.

Расходы по статье «Машинное время» (РМ) включают оплату машинного времени, необходимого для разработки и отладки ПС, и определяются по формуле:

Рм=Цм*Тч*Ср

где Цм - цена одного машино-часа;

Тч - количество часов работы в день;

Ср - длительность проекта.

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

Рм=50008264=10560000 (руб.)

Затраты по статье «Накладные расходы» (РН), связанные с необходимостью содержания аппарата управления, вспомогательных хозяйств и опытных (экспериментальных) производств, а также с расходами на общехозяйственные нужды (РН), определяются по формуле:

где НРН - норматив накладных расходов (50 %).

Накладные расходы составят:

Рн=60 055 855,20,5= 30 027 927,6 (руб.)

Общая сумма расходов по всем статьям сметы (Сп) на ПО рассчитывается по формуле:

Сп = 60 055 855,2 + 12 011 171,04 + 24 935 191,07 + 10560000+ 30 027 927,6 = 137 590 144,91 (руб.)

Кроме того, организация-разработчик осуществляет затраты на сопровождение и адаптацию ПС (РСА), которые определяются по нормативу (НРСА):

где Нрса - норматив расходов на сопровождение и адаптацию (20 %).

где Рса - расходы на сопровождение и адаптацию ПС в целом по организации (руб.);

СР - смета расходов в целом по организации без расходов на сопровождение и адаптацию (руб.).

Рса=137 590 144,91 ·20/100= 27 518 028,98 (руб.)

Общая сумма расходов на разработку и обслуживание как полная себестоимость ПП (СП) определяется по формуле:

Сп= 137 590 144,91 + 27518028,98= 165 108 173,89 (руб.)

Прибыль ПП рассчитывается по формуле

где Ппс - прибыль от реализации ПП заказчику (руб.);

УР - уровень рентабельности ПП (25 %);

СП - себестоимость ПП (руб.).

Ппс=165 108 173,89 ·25/100 = 41 277 043,47 (руб.)

Прогнозируемая отпускная цена ПП

.

Цп=165 108 173,89 + 41 277 043,47 = 206 385 217,36 (руб.)

Расчет налога на добавленную стоимость (НДС)

НДС = Цп х Ндс / 100

где Ндс - 20 %

385 217,36 х 0,2 = 41 277 043,47 (руб)

Прогнозируемая отпускная цена рассчитывается по формуле:

Цо = Цп + НДС

Цо = 206 385 217,36 + 41 277 043,47 = 247 662 260,83

8ОБЕСПЕЧЕНИЕ СВЕТОТЕХНИЧЕСКИХ УСЛОВИЙ РАБОЧЕГО МЕСТА ПРОГРАММИСТА ВО ВРЕМЯ РАЗРАБОТКИ СОЦИАЛЬНОЙ СЕТИ

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

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

А. Визуальные параметры средств отображения (дисплеи)

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

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

Следует отметить, что эргономическую безопасность определяет прежде всего совокупность правильных параметров, а не каждый по отдельности. Яркость знака (яркость фона) - 35-120 кд/м2, внешняя освещенность экрана -100-250 лк, угловой размер экрана - 16-60 угл.мин ((?)? = arctg (h/21), где h - высота знака; 21 - расстояние от знака до глаза наблюдателя). Основные показатели, определяющие условия зрительной работы: фон, контраст объекта с фоном, видимость, показатель ослепленности, коэффициент пульсации освещенности.

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

Таблица 8.1 - Связь между нарушениями здоровья и потенциальными неблагоприятными факторами, имеющими отношение к работе мониторов

Заболевания глаз и зрительные нарушенияНарушения костно-мышечной системыКожные заболеванияНарушения, связанные со стрессомНеблагоприятные исходы беременностиМерцание изображения+--+?Яркий видимый свет+--+-Блики и отраженный свет++-+-

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

8.2Определение значений визуальных эргономических параметров (первой и второй групп)

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

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

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

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

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

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

После настройки визуальных эргономических параметров проходит тестирование, проверяющее диапазоны оптимальных и предельно допустимых значений основных визуальных параметров дисплея. К оценке качества изображения и комфортности восприятия информации допускается группа людей (не менее 4 чел.), имеющих остроту зрения не менее 0,5 дптр при отсутствии заболевании глаз. Оценка качества проводится на стенде, где находится пк с программой автоматического предъявления информации и статистической обработки результатов испытания, устройство для изменения внешней освещенности экрана и другими средствами для измерения данных. На экран видеодисплея выводятся символы в случайной, но равновероятной, последовательности. Программа показа должна содержать не менее 50 символов. Число программ предъявления - не менее 100. После испытаний определяется зависимость времени латентного периода речевой реакции от значений всех переменных факторов.

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

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

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

Согласно ТКП 45-2.04-153-2009 в помещениях вычислительных центров необходимо применить систему комбинированного освещения. Освещенность рабочего места программиста на рабочем столе в горизонтальной плоскости от общего искусственного освещения должна быть от 300 до 500 лк. Отношение яркостей в зоне наблюдения (экран) должно быть не более 10:1. В поле зрения работника должны отсутствовать прямая и отраженная блескость, поскольку она отвлекает специалиста от работы, не давая сосредоточиться, а также является раздражителем для зрения и способствует быстрой утомляемости. Необходимо оборудовать рабочее помещение так, чтобы минимизировалась нагрузка на глаза. Для этого нужно оборудовать проемы окон шторами, регулируемыми жалюзи, внешними козырьками и т.д., использовать для общего освещения светильники с рассеивателями и экранирующими решетками, яркость которых в зоне углов излучения более 50° от вертикали не должна превышать 200 кд/м и для местного освещения светильники с непросвечивающим отражателем и защитным углом не менее 40°. Рабочий стол следует разместить так, чтобы оконные проемы были слева или справа, как и дисплей относительно от программиста, и он находился между рядами светильников общего освещения. Экран монитора следует выбирать с антибликовым покрытием.

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

Следует подбирать параметры, исходя из специфик профессии программиста, что поможет улучшить работоспособность программистов, которые, в свою очередь, выполняют свою работу качественно и быстрее. Снизится риск профессиональных заболеваний, случаи травматизма, тем самым повышает безопасность труда. Не стоит забывать о режиме труда и отдыха, чтобы у персонала не возникала неудовлетворенность работой, ухудшения зрения, усталости и повышенной сонливости. В противном случае у персонала отмечаются значительное напряжение зрительного аппарата с появлением жалоб на неудовлетворенность работой, головные боли, раздражительность, нарушение сна, усталость и болезненные ощущения в глазах, в пояснице, в области шеи и руках. Раз в год персоналу следует проходит осмотр согласно постановлению Министерства здравоохранения Республики Беларусь от 28 апреля 2010 № 47 «О порядке проведения обязательных медицинских осмотров работников».

ЗАКЛЮЧЕНИЕ

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

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

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

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

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

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

Данный проект не имеет аналогов в Интернет.

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Наумов В., В. Языковой код социальных сетей / В., В.Наумов // Alma mater.-Б.м., 2012.-9. - С. 87-94.-ISSN 0321-0383.

. Губанов Д.А., Новиков Д.А., Чхартишвили А.Г. Социальные сети: модели информационного влияния, управления и противоборства.

. Гизберт Дамашке. PHP и MySQL: самоучитель/ НТ Пресс - SBN 978-5-477-01174-2; 2012 г.

. Венда В. Ф. Информационная техника и эргономика/ М.: Знание,1970

. Ших Клара. Эра Facebook. Как использовать возможности социальных сетей для развития вашего бизнеса/ М.: Манн, Иванов и Фербер,2010.- 295 с.. ISBN: 978-5-91657-103-5.

. Родионов И.И. Интернет. Предприниматель. Маркетинг/ М.: 1997.- 261 с.

. Буч Г. UML. Классика CS. / Г. Буч, А. Якобсон, Дж. Рамбо. - Пер. с англ. - 2-е изд.; Под общей редакцией проф. С. Орлова - СПб.: Питер, 2006.

. Курчидис В. А. Организация WEB-взаимодействий в сервис-ориентированных прикладных системах/ Лунев, Михаил Юрьевич; Назанский, Андрей Сергеевич; Рыльков, Сергей Александрович.- Ярославль: 2002.- 97 с.. ISBN: 5-8397-0247-1.

. Максимов, Николай Вениаминович. Компьютерные сети/ Попов, Игорь Иванович.- М.: Форум : Инфра-М,2007.- 448 с.. ISBN: 978-5-16-002888-0; ISBN: 978-5-91134-058-2.

. Бранцевич П.Ю., Бахтизин В.В. Методические указания по дипломному проектированию для студентов специальности 1-40 01 01 «Программное обеспечение информационных технологий» (ПОИТ). - Мн.: БГУИР, 2013.

. Михнюк, Т. Ф. Охрана труда и основы экологии : учеб. пособие / Т. Ф. Михнюк - Минск : Выш. шк., 2007

. Методическое пособие. Эргономические основы безопасности труда в системе «Человек - машина», Минск:- 1987г., И.Г. Шупейко, Р.С. Шариков, И.С. Асаенок, Г.М. Дунаева.

. Менжерес, Владимир Николаевич. Практикум по организации производства/ Сафьянов, Александр Николаевич; Сащенков, Юрий Кузьмич.- Саратов: 2000.- 101 с.. ISBN: 5-7433-0637-0.

. ТКП 45-2.04-153-2009 Естественное и искусственное освещение. Утвержден и введен в действие приказом Министерства архитектуры и строительства Республики Беларусь от 14 октября 2009 г. № 338

ПРИЛОЖЕНИЕ А

Текст структуры и стиля Веб-сайта

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#"justify"><html xmlns="#"justify"><html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Белорусы</title>

<link href="стиль.css" rel="stylesheet" type="text/css" />

<script src="rotator/jquery-1.5.1.js" type="text/javascript"></script>

<script src="rotator/rotator.js" type="text/javascript"></script>

<link href="css/layout.css" rel="stylesheet" type="text/css" />

<link href="css/modal.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="rotator">

<ul>

<li>

<img src="img11.jpg" width="1202" height="327" alt=""/>

</li>

<li> <img src="img22.jpg" width="1202" height="327" alt=""/> </li>

<li> <img src="img33.jpg" width="1202" height="327" alt=""/> </li>

</ul>

</div>

<div>

<a href="My page.html"><img src="лого.png" width="305" height="267" alt=""/></a>

</div>

<div id="content">

<div id="header"></div>

<div id="line"></div>

<div id="text_content">

<div id="wrapper-200a">

<ul>

<li id="one">

<a href="#one">Белорусы<span>8</span></a>

<ul>

<li><a href="Contacts.html"> Контакты<span>1</span></a></li>

<li><a href="Blogs.html"> Блоги<span>4</span></a></li>

<li><a href="Ads.html"> Объявления<span>3</span></a></li>

</ul>

</li>

<li id="two">

<a href="#two">Почта<span>19</span></a>

<ul>

<li><a href="Private messages.html"> Личные сообщения<span>2</span></a></li>

<li><a href="Yahoo.html"> Yahoo<span>14</span></a></li>

<li><a href="Gmail.html"> Gmail<span>3</span></a></li>

</ul>

</li>

<li id="three">

<a href="#three">Мои файлы<span>19</span></a>

<ul>

<li><a href="Photo.html">Мои фотографии<span>14</span></a></li>

<li><a href="Music.html"> Музыка<span>4</span></a></li>

<li><a href="Video.html"> Видеозаписи<span>1</span></a></li>

</ul>

</li>

<li id="four">

<a href="#four">Выйти</a>

<ul>

<li><a href="exit.html"> Выйти из</a></li>

<li><a href="delit.html"> Удалить аккаунт</a></li>

<li><a href="ice.html"> Заморозить аккаунт </a></li>

</ul>

</li>

</ul>

</div>

<div id="text">

<h1>Добро пожаловать!</h1>

<p> Рады приветствовать Вас в СС "Белорусы"!</p>

<p>Здесь Вы можете общаться, обмениваться сообщениями и загружать файлы. Желаем Вам приятного общения!</p>

<!-- panel with buttons -->

<div>

<div>

<a href="#login_form" id="login_pop">Войти</a>

<a href="#join_form" id="join_pop">Зарегистрироваться</a>

</div>

</div>

<!-- popup form #1 -->

<a href="#x">

<div>

<h2>Добро пожаловать гость!</h2>

<p>Введите ваш логин и пароль здесь</p>

<div>

<label for="login">Логин</label>

<input type="text" id="login" value="" />

</div>

<div>

<label for="password">Пароль</label>

<input type="password" id="password" value="" />

</div>

<input type="button" value="Войти" />

<a>

</div>

<!-- popup form #2 -->

<a href="#x">

<div>

<h2>Зарегистрироваться</h2>

<p>Введите здесь детальную информацию о себе</p>

<div>

<label for="email">Логин (Email)</label>

<input type="text" id="email" value="" />

</div>

<div>

<label for="pass">Пароль</label>

<input type="password" id="pass" value="" />

</div>

<div>

<label for="firstname">Имя</label>

<input type="text" id="firstname" value="" />

</div>

<div>

<label for="lastname">Фамилия</label>

<input type="text" id="lastname" value="" />

</div>

<input type="button" value="Зарегистрироваться" />&nbsp;&nbsp;&nbsp;или&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Войти</a>

<a>

</div>

<!-- pcvector.net -->

<script type="text/javascript" src="/templates/pcv/js/pcvector.js"></script>

<!-- /pcvector.net -->

</div>

<div style="clear:both !important"></div>

</div>

<div id="footer"> "Мой родны кут, як ты мне мілы!" &copy; Якуб Колас </div>

</div>

</body>

</html>

</html>

<--! Структура страницы видеозаписей-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#"justify"><html xmlns="#"justify"><html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Белорусы</title>

<link href="стиль.css" rel="stylesheet" type="text/css" />

<script src="rotator/jquery-1.5.1.js" type="text/javascript"></script>

<script src="rotator/rotator.js" type="text/javascript"></script>

<body>

<div id="rotator">

<ul>

<li>

<img src="img11.jpg" width="1202" height="327" alt=""/>

</li>

<li> <img src="img22.jpg" width="1202" height="327" alt=""/> </li>

<li> <img src="img33.jpg" width="1202" height="327" alt=""/> </li>

</ul>

</div>

<div>

<a href="My page.html"><img src="лого.png" width="305" height="267" alt=""/></a></div>

<div id="content">

<div id="header"></div>

<div id="line"></div>

<div id="text_content">

<div id="wrapper-200a">

<ul>

<li id="one">

<a href="#one">Белорусы<span>8</span></a>

<ul>

<li><a href="#one">Контакты<span>1</span></a></li>

<li><a href="Blogs.html">Блоги<span>4</span></a></li>

<li><a href="Ads.html">Объявления<span>3</span></a></li>

</ul>

</li>

<li id="two">

<a href="#two">Почта<span>19</span></a>

<ul>

<li><a href="Private messages.html">Личные сообщения<span>2</span></a></li>

<li><a href="Yahoo.html">Yahoo<span>14</span></a></li>

<li><a href="Gmail.html">Gmail<span>3</span></a></li>

</ul>

</li>

<li id="three">

<a href="#three">Мои файлы<span>19</span></a>

<ul>

<li><a href="Photo.html">Мои фотографии<span>14</span></a></li>

<li><a href="Music.html">Музыка<span>4</span></a></li>

<li><a href="Video.html">Видеозаписи<span>1</span></a></li>

</ul>

</li>

<li id="four">

<a href="#four">Выйти</a>

<ul>

<li><a href="exit.html">Выйти из</a></li>

<li><a href="delit.html">Удалить аккаунт</a></li>

<li><a href="ice.html">Заморозить аккаунт </a></li>

</ul>

</li>

</ul>

</div>

<div id="text">

<h1>Мои видеозаписи</h1>

<object type="application/x-shockwave-flash" data="#"justify"><div style="clear:both !important"></div>

</div>

<div id="footer"> "Мой родны кут, як ты мне мілы!" &copy; Якуб Колас </div>

</div>

</body>

</html>

</html>

<--! Структура страницы аудиозаписей-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#"justify"><html xmlns="#"justify"><html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Белорусы</title>

<link href="стиль.css" rel="stylesheet" type="text/css" />

<script src="rotator/jquery-1.5.1.js" type="text/javascript"></script>

<script src="rotator/rotator.js" type="text/javascript"></script>

</head>

<body>

<div id="rotator">

<ul>

<li>

<img src="img11.jpg" width="1202" height="327" alt=""/>

</li>

<li> <img src="img22.jpg" width="1202" height="327" alt=""/> </li>

<li> <img src="img33.jpg" width="1202" height="327" alt=""/> </li>

</ul>

</div>

<div>

<a href="My page.html"><img src="лого.png" width="305" height="267" alt=""/></a></div>

<div id="content">

<div id="header"></div>

<div id="line"></div>

<div id="text_content">

<div id="wrapper-200a">

<ul>

<li id="one">

<a href="#one">Белорусы<span>8</span></a>

<ul>

<li><a href="Contacts.html">Контакты<span>1</span></a></li>

<li><a href="Blogs.html">Блоги<span>4</span></a></li>

<li><a href="Ads.html">Объявления<span>3</span></a></li>

</ul>

</li>

<li id="two">

<a href="#two">Почта<span>19</span></a>

<ul>

<li><a href="Private messages.html"> Личные сообщения<span>2</span></a></li>

<li><a href="Yahoo.html"> Yahoo<span>14</span></a></li>

<li><a href="Gmail.html"> Gmail<span>3</span></a></li>

</ul>

</li>

<li id="three">

<a href="#three">Мои файлы<span>19</span></a>

<ul>

<li><a href="Photo.html">Мои фотографии<span>14</span></a></li>

<li><a href="Music.html">Музыка<span>4</span></a></li>

<li><a href="Video.html">Видеозаписи<span>1</span></a></li>

</ul>

</li>

<li id="four">

<a href="#four">Выйти</a>

<ul>

<li><a href="exit.html">Выйти из</a></li>

<li><a href="delit.html">Удалить аккаунт</a></li>

<li><a href="ice.html">Заморозить аккаунт </a></li>

</ul>

</li>

</ul>

</div>

<div id="text">

<h1>Музыка</h1>

<object width="550" height="42"><param name="movie" value="#"justify"><object width="550" height="42"><param name="movie" value="#"justify"><object width="550" height="42"><param name="movie" value="#"justify"><object width="550" height="42"><param name="movie" value="#"justify"></div>

<div style="clear:both !important"></div>

</div>

<div id="footer"> "Мой родны кут, як ты мне мілы!" &copy; Якуб Колас </div>

</div>

</body>

</html>

</html>

<--! Структура страницы блогов-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "#"justify"><html xmlns="#"justify"><html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Блоги</title>

<link href="стиль.css" rel="stylesheet" type="text/css" />

<script src="rotator/jquery-1.5.1.js" type="text/javascript"></script>

<script src="rotator/rotator.js" type="text/javascript"></script>

</head>

<body>

<div id="rotator">

<ul>

<li>

<img src="img11.jpg" width="1202" height="327" alt=""/>

</li>

<li> <img src="img22.jpg" width="1202" height="327" alt=""/> </li>

<li> <img src="img33.jpg" width="1202" height="327" alt=""/> </li>

</ul>

</div>

<div>

<a href="My page.html"><img src="лого.png" width="305" height="267" alt=""/></a></div>

<div id="content">

<div id="header"></div>

<div id="line"></div>

<div id="text_content">

<div id="wrapper-200a">

<ul>

<li id="one">

<a href="#one">Белорусы<span>8</span></a>

<ul>

<li><a href="Contacts.html">Контакты<span>1</span></a></li>

<li><a href="Blogs.html">Блоги<span>4</span></a></li>

<li><a href="Ads.html">Объявления<span>3</span></a></li>

</ul>

</li>

<li id="two">

<a href="#two">Почта<span>19</span></a>

<ul>

<li><a href="Private messages.html"> Личные сообщения<span>2</span></a></li>

<li><a href="Yahoo.html"> Yahoo<span>14</span></a></li>

<li><a href="Gmail.html"> Gmail<span>3</span></a></li>

</ul>

</li>

<li id="three">

<a href="#three">Мои файлы<span>19</span></a>

<ul>

<li><a href="Photo.html">Мои фотографии<span>14</span></a></li>

<li><a href="Music.html">Музыка<span>4</span></a></li>

<li><a href="Video.html">Видеозаписи<span>1</span></a></li>

</ul>

</li>

<li id="four">

<a href="#four">Выйти</a>

<ul>

<li><a href="exit.html">Выйти из</a></li>

<li><a href="delit.html">Удалить аккаунт</a></li>

<li><a href="ice.html">Заморозить аккаунт </a></li>

</ul>

</li>

</ul>

</div>

<div id="text">

<h1>Блоги</h1>

<br/>

<div id="ads1">

<p> Нельзя прожить жизнь, избегая трудностей.</p>

</div>

<br/>

<div id="ads1">

<p> Мудрый человек не мыслит в рамках только своего благополучия, но понимает, что настоящее счастье всегда обусловлено счастьем ближнего.</p>

</div>

<br/>

<div id="ads1">

<p> Счастье вернется, Робин, пусть другое, в других одеждах, под другим именем, но это все равно будет счастье.</p>

</div>

<br/>

<div id="ads1">

<p>

Всякий раз, когда стоишь перед выбором, будь внимателен: не выбирай то, что удобно, комфортно, респектабельно, признано обществом, почётно. Выбирай то, что находит отклик в твоём сердце. Выбирай то, что ты хотел бы сделать, невзирая ни на какие последствия.</p>

</div>

<br/>

<form id="form">

<p>

<label>Сообщение:</label>

<textarea>

</p>

<p>

<label>&nbsp;</label>

<input type="submit">

</p>

</form>

</div>

<div style="clear:both !important"></div>

</div>

<div id="footer"> "Мой родны кут, як ты мне мілы!" &copy; Якуб Колас </div>

</div>

</body>

</html>

<!-- panel with buttons -->

<div>

<div>

<a href="#login_form" id="login_pop">Войти</a>

<a href="#join_form" id="join_pop">Зарегистрироваться</a>

</div>

</div>

<!-- popup form #1 -->

<a href="#x">

<div>

<h2>Добро пожаловать гость!</h2>

<p>Введите ваш логин и пароль здесь</p>

<div>

<label for="login">Логин</label>

<input type="text" id="login" value="" />

</div>

<div>

<label for="password">Пароль</label>

<input type="password" id="password" value="" />

</div>

<input type="button" value="Войти" />

<a>

</div>

<!-- popup form #2 -->

<a href="#x">

<div>

<h2>Зарегистрироваться</h2>

<p>Введите здесь детальную информацию о себе</p>

<div>

<label for="email">Логин (Email)</label>

<input type="text" id="email" value="" />

</div>

<div>

<label for="pass">Пароль</label>

<input type="password" id="pass" value="" />

</div>

<div>

<label for="firstname">Имя</label>

<input type="text" id="firstname" value="" />

</div>

<div>

<label for="lastname">Фамилия</label>

<input type="text" id="lastname" value="" />

</div>

<input type="button" value="Зарегистрироваться" />&nbsp;&nbsp;&nbsp;или&nbsp;&nbsp;&nbsp;<a href="#login_form" id="login_pop">Войти</a>

<a>

</div>

<!-- pcvector.net -->

<script type="text/javascript" src="/templates/pcv/js/pcvector.js"></script>

<!-- /pcvector.net -->

</div>

<--! Стиль страницы-->

@charset "windows-1251";

@font-face{family: Lobster;:url(Lobster/Lobster.ttf);family: AllodsWest;: url (AllodsWest/AllodsWest.ttf);family: Lineage 2 Font;: url (Lineage 2 Font/Lineage 2 Font.ttf);family: Medieval English;: (Medieval English/ Medieval English.ttf);family: Neucha;: url (Neucha/Neucha.ttf);

}, html {: 0px;: 0px;: auto;

}{family: Neucha;size: 18px;: #000;image: url(img_cherry/fon_body.jpg);repeat: no-repeat;position: center top;color: #f0e9e0;

}

#content {color: #bad1c0;: 1200px;: 0px auto;: 1px solid #9C0;top:-664px;

}

#logo {left: 0px;top:-664px;

}

#header {image: url(img_cherry/top_fon.jpg);repeat: no-repeat;: 324px;

}

#line {:10px;color: #170b0b;

}

#text_content {: both;

}

#menu {: left;: 160px;top: 5px;

}

#menu a {: block;: auto;bottom: 5px;image: url(img_cherry/fon_white.png);left: 10px;decoration: none;size: 13px;: #000;top: 5px;right: 10px;bottom: 5px;: solid 1px #555;variant: small-caps;

}

#breadcrumbs {size: 11px;: #FFF;

}

#breadcrumbs a {: #FFF;

}

#breadcrumbs a:hover {: #9C0;

}

#menu a:hover {image: url(img_cherry/fon_content.png);: #B30003;

}

{top: 0px;size: 20px;: #B30003;

}{top: 0px;size: 15px;: #B30003;

}

#footer {image: url(img_cherry/fon_white.png);: 30px;top: 20px;right: 10px;bottom: 10px;left: 10px;size: 11px;

}

#text {left: 210px;top: 5px;: auto;: 10px;variant: small-caps;

}

#ads {: center;: 730px;color: #9B0;: 5px solid #FFF;: 10px;color: #CCD685;right: 60px;weight: normal;size: 12px;align: center;

}

#ads1 {: inherit;: 800px;: 5px solid #FFF;: 10px;right: 60px;weight: normal;size: 12px;align: center;

}

#pm {

: 5px;size: 12px;align: left;: 620px;: both;: 0 0 18px;

}

#pm1 {

: 5px;: 5px solid #FFF;size: 12px;align: inherit;: 400px;: both;: 0 0 18px;top: 0px;

}

.ava {: 5px solid #fff;: 0px;shadow: #333 0px 0px 5px;: left;: 0 20px 18px 0;

}

.ava2 {: 5px solid #fff;: 0px;shadow: #333 0px 0px 5px;: left;: 0 20px 18px 0;

}

.sms {: left;

}

.block1 {: 350px;: left;: 10px;: 5px solid #FFFFFF;

}

.block12 {: 470px;: left;: 10px;: 5px solid #FFFFFF;

}

.block13 {: 620px;: left;: 10px;: 5px solid #FFFFFF;

}

.cont {align:right;: 0 0 18px;

}

.shift {right: 30px;

}

.blocks p {bottom:15px;:relative;

}

.fixed {: 620px;: both;: 2px solid #FFF;: 5px;

}

.text,

.textarea {:5px 10px;:27px;:1px solid #ddd;:#333;:url(../gfx/bginput.jpg) repeat-x bottom #fff;:relative;index:2;

}

.text {:220px;

}

.textarea {:150px;:350px;

}

.blocks label {:left;:100px;height:37px;align:right;right:15px;weight:bold;:#666;

}

.blocks label.error,

.blocks label.ok {:absolute;index:1;:-4px;:110px;:5px 15px 5px 280px;

/* Reseting previous label values */:auto;align:left;:0;repeat:no-repeat;position:257px 16px;

}

.blocks label.ok {image:url(../gfx/icook.gif);color:#deefca;:#577530;

}

.blocks label.error {image:url(../gfx/icofail.gif);color:#f5d6d7;:#c81925;

}label.ok,

.area label.error {:163px;left:410px;position:387px 16px;

}

/* CSS3 */

.btn, .text, .textarea, .blocks label.error, .blocks label.ok {

moz-border-radius:8px;

webkit-border-radius:8px;radius:8px;

}

#text dl {: block;left-width: 1px;left-style: solid;left-color: #B30003;size: 13px;left: 40px;style: italic;

}

#text dl dt {left: 40px;bottom: 5px;: #B30003;

}

#text a[onclick] {: #9C0;

}

#wrapper-200a{:200px;:left;left:

px

}

/* Reset */

.accordion,

.accordion ul,

.accordion li,

.accordion a,

.accordion span {: 0;: 0;: none;: none;

}

.accordion li {style: none;

}

/* Layout & Style */

.accordion li > a {: block;: relative;width: 110px;: 0 10px 0 40px;: 32px;

: #fdfdfd;: bold 12px/32px Arial, sans-serif;decoration: none;shadow: 0px 1px 0px rgba(0,0,0, .35);

: #6c6e74;: -moz-linear-gradient(top, #bad1c0 0%, #92a698 100%);: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bad1c0), color-stop(100%,#92a698));: -webkit-linear-gradient(top, #bad1c0 0%,#92a698 100%);: -o-linear-gradient(top, #bad1c0 0%,#92a698 100%);: -ms-linear-gradient(top, #bad1c0 0%,#92a698 100%);: linear-gradient(top, #bad1c0 0%,#92a698 100%);

webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.accordion > li:hover > a,

.accordion > li:target > a {: #2f5d33;shadow: 1px 1px 1px rgba(255,255,255, .2);

/*background: url(../img/active.png) repeat-x;*/: #a5cd4e;: -moz-linear-gradient(top, #f0e9e0 0%, #d9d3cb 100%);: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0e9e0), color-stop(100%,#d9d3cb));: -webkit-linear-gradient(top, #f0e9e0 0%,#d9d3cb 100%);: -o-linear-gradient(top, #f0e9e0 0%,#d9d3cb 100%);: -ms-linear-gradient(top, #f0e9e0 0%,#d9d3cb 100%);: linear-gradient(top, #f0e9e0 0%,#d9d3cb 100%);

}

.accordion li > a span {: block;: absolute;: 7px;: -3px;: 0 10px;right: 10px;: normal bold 12px/18px Arial, sans-serif;: #404247;

webkit-border-radius: 15px;

moz-border-radius: 15px;radius: 15px;

webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);

moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);: 27px;

}

.accordion > li:hover > a span,

.accordion > li:target > a span {: #fdfdfd;shadow: 0px 1px 0px rgba(0,0,0, .35);: #3e5706;

}

/* Images */

.accordion > li > a:before {: absolute;: 0;: 0;: '';: 24px;: 24px;: 4px 8px;

repeat: no-repeat;image: url('../img/icons.png');position: 0px 0px;

}

.accordion li.files > a:before { background-position: 0px 0px; }

.accordion li.files:hover > a:before,

.accordion li.files:target > a:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }

.accordion li.mail:hover > a:before,

.accordion li.mail:target > a:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }

.accordion li.cloud:hover > a:before,

.accordion li.cloud:target > a:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }

.accordion li.sign:hover > a:before,

.accordion li.sign:target > a:before { background-position: -72px -24px; }

/* Sub Menu */

.sub-menu li a {: #797979;shadow: 1px 1px 0px rgba(255,255,255, .2);: #e5e5e5;bottom: 1px solid #c9c9c9;

webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);

}

.sub-menu li:hover a { background: #efefef; }

.sub-menu li:last-child a { border: none; }

.sub-menu li > a span {: #797979;shadow: 1px 1px 0px rgba(255,255,255, .2);: transparent;: 1px solid #c9c9c9;

webkit-box-shadow: none;

moz-box-shadow: none;shadow: none;

}

.sub-menu em {: absolute;: 0;: 0;left: 14px;: #a6a6a6;: normal 10px/32px Arial, sans-serif;

}

/* Functionality */

.accordion li > .sub-menu {: 0;: hidden;

webkit-transition: height .2s ease-in-out;

moz-transition: height .2s ease-in-out;

o-transition: height .2s ease-in-out;

ms-transition: height .2s ease-in-out;: height .2s ease-in-out;

}

.accordion li:target > .sub-menu {: 98px;

}

#rotator ul {: 0px;: 0px;style-type: none;: block;: relative;: 400px;: 1200px;top: inherit;

}

#rotator ul li {: absolute;: 350px;: 350px;top: -350px;

}

.gp-gallery-picture-zoom {: 1px solid #bbb;: -6px 0 0 -6px;: absolute;index: 100;: 5px;: white;shadow: 0 0 10px #999;

}

#gallery {: 700px;: 0;: 0;: 235px;image: url(img/loader.gif);repeat: no-repeat;position: 50% 50%;

}

#gallery img {: none;

}

#big {: 700px;: 5px auto;

}

#small {: 125px;: 10px auto;style-type: none;

}

#small li {: left;: 15px;: 18px;: #006634;right: 2px;align: center;

}

#small li:hover {: #006600;

}

#small a {decoration: none; color: #fff;

}

.cen {align: center;size: 18px;

}

.mosaicflow__column {:left;

}

.mosaicflow__item img {:block;:100%;:auto;

}

*{:0;:0;

}{color:#eee;:14px/1.3 Arial,sans-serif;

}

.main {image: url(bg.png);: 800px;: 600px;: 50px auto;

}

.panel {color: #bad1bf;: 34px;: 10px;

}

.panel a#login_pop, .panel a#join_pop {: 2px solid #aaa;: #000;: block;: right;right: 10px;: 5px 10px;decoration: none;shadow: 1px 1px #000;

webkit-border-radius: 10px;

moz-border-radius: 10px;

ms-border-radius: 10px;

o-border-radius: 10px;radius: 10px;

}

#login_pop:hover, a#join_pop:hover {color: #eee;

}

.overlay {color: rgba(0, 0, 0, 0.6);: 0;: default;: 0;: 0;: fixed;: 0;: 0;: hidden;index: 1;

webkit-transition: opacity .5s;

moz-transition: opacity .5s;

ms-transition: opacity .5s;

o-transition: opacity .5s;: opacity .5s;

}

.overlay:target {: visible;: 1;

}

.popup {color: #fff;: 3px solid #fff;: inline-block;: 50%;: 0;: 15px;: fixed;align: justify;: 40%;: hidden;index: 10;

webkit-transform: translate(-50%, -50%);

moz-transform: translate(-50%, -50%);

ms-transform: translate(-50%, -50%);

o-transform: translate(-50%, -50%);: translate(-50%, -50%);

webkit-border-radius: 10px;

moz-border-radius: 10px;

ms-border-radius: 10px;

o-border-radius: 10px;radius: 10px;

webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

webkit-transition: opacity .5s, top .5s;

moz-transition: opacity .5s, top .5s;

ms-transition: opacity .5s, top .5s;

o-transition: opacity .5s, top .5s;: opacity .5s, top .5s;

}

.overlay:target+.popup {: 50%;: 1;: visible;

}

.close {color: rgba(0, 0, 0, 0.8);: 30px;height: 30px;: absolute;: 0;align: center;decoration: none;: -15px;: 30px;

webkit-border-radius: 15px;

moz-border-radius: 15px;

ms-border-radius: 15px;

o-border-radius: 15px;radius: 15px;

}

.close:before {: rgba(255, 255, 255, 0.9);: "X";size: 24px;shadow: 0 -1px rgba(0, 0, 0, 0.9);

}

.close:hover {color: rgba(64, 128, 128, 0.8);

}

.popup p, .popup div {bottom: 10px;

}

.popup label {: inline-block;align: left;: 120px;

}

.popup input[type="text"], .popup input[type="password"] {: 1px solid;color: #999 #ccc #ccc;: 0;: 2px;

webkit-border-radius: 2px;

moz-border-radius: 2px;

ms-border-radius: 2px;

o-border-radius: 2px;radius: 2px;

}

.popup input[type="text"]:hover, .popup input[type="password"]:hover {

border-color: #555 #888 #888;

}

ПРИЛОЖЕНИЕ Б

Текст используемых скриптов

<--! Панель навигации «аккордеон»-->

<div id="wrapper-200a">

<ul>

<li id="one">

<a href="#one">Белорусы<span>8</span></a>

<ul>

<li><a href="Contacts.html"> Контакты<span>1</span></a></li>

<li><a href="Blogs.html"> Блоги<span>4</span></a></li>

<li><a href="Ads.html"> Объявления<span>3</span></a></li>

</ul>

</li>

<li id="two">

<a href="#two">Почта<span>19</span></a>

<ul>

<li><a href="Private messages.html"> Личные сообщения<span>2</span></a></li>

<li><a href="Yahoo.html"> Yahoo<span>14</span></a></li>

<li><a href="Gmail.html"> Gmail<span>3</span></a></li>

</ul>

</li>

<li id="three">

<a href="#three">Мои файлы<span>19</span></a>

<ul>

<li><a href="Photo.html">Мои фотографии<span>14</span></a></li>

<li><a href="Music.html"> Музыка<span>4</span></a></li>

<li><a href="Video.html"> Видеозаписи<span>1</span></a></li>

</ul>

</li>

<li id="four">

<a href="#four">Выйти</a>

<ul>

<li><a href="exit.html"> Выйти из</a></li>

<li><a href="delit.html"> Удалить аккаунт</a></li>

<li><a href="ice.html"> Заморозить аккаунт </a></li>

</ul>

</li>

</ul>

</div>

<--!Загрузка файлов-->

<html>

<head>

<title>Загрузка файлов на сервер</title>

</head>

<body>

<h2><p><b> Форма для загрузки файлов </b></p></h2>

<form action="upload.php" method="post" enctype="multipart/form-data">

<input type="file" name="filename"><br>

<input type="submit" value="Загрузить"><br>

</form>

</body>

</html>

<html>

<head>

<title>Результат загрузки файла</title>

</head>

<body>

<?php($_FILES["filename"]["size"] > 1024*3*1024)

{("Размер файла превышает три мегабайта");

exit;

}

// Проверяем загружен ли файл(is_uploaded_file($_FILES["filename"]["tmp_name"]))

{_uploaded_file($_FILES["filename"]["tmp_name"], "/path/to/file/".$_FILES["filename"]["name"]);

} else {("Ошибка загрузки файла");

}

?>

</body>

</html>

<?php

...($_FILES["filename"]["size"] > 1024*3*1024)

{("Размер файла превышает три мегабайта");

exit;

}

...

?>

<?php

...($_FILES["filename"]["size"] > upload_max_filesize)

..

?>

<--!Комментарии и блоги-->

<div>

<div>

<div>

<div>

<img src="gravatar.gif" alt="Author" />

</div>

<div>

<div>

<a href="#"justify"><--!Отправка e-mail-->

<?phpMail

{

$to = "";$from = "";$reply_to = "";$cc = "";$bcc = "";$subject = "";$msg = "";$validate_email = true;$rigorous_email_check = true;$allow_empty_subject = false;$allow_empty_msg = false;

$headers = array();

check_fields()

{(empty($this -> to))

{false;

}(!$this -> allow_empty_subject && empty($this -> subject))

{false;

}(!$this -> allow_empty_msg && empty($this -> msg))

{false;

}

(!empty($this -> from))

{

$this->headers[] = "From: $this -> from";

}(!empty($this -> reply_to))

{

$this -> headers[] = "Reply_to: $this -> reply_to";

}($this -> validate_email)

{(!preg_match("/[-0-9a-z_\.]+@[-0-9a-z_\.]+\.[a-z]{2,6}/i", $this -> to))

{false;

}true;

}

}send()

/* метод отправки сообщения */

{(!$this -> check_fields()) return true;(mail($this -> to, htmlspecialchars( stripslashes(trim($this -> subject))),(stripslashes(trim($this -> msg)))))

{true;

}else{false;

}

}

}

?>

<--! Ротатор изображений-->

<div id="rotator">

<ul>

<li>

<img src="img11.jpg" width="1202" height="327" alt=""/>

</li>

<li> <img src="img22.jpg" width="1202" height="327" alt=""/> </li>

<li> <img src="img33.jpg" width="1202" height="327" alt=""/> </li>

</ul>

</div>

<--!Видеоплеер-->

<object type="application/x-shockwave-flash" data="#"justify"><--!Аудиоплеер-->

<object width="550" height="42"><param name="movie" value="#"justify"><--!Алгоритм MD5-->

/*

* Convert a 32-bit number to a hex string with ls-byte first

*/hex_chr = "0123456789abcdef";rhex(num)

{= "";(j = 0; j <= 3; j++)+= hex_chr.charAt((num >> (j * 8 + 4)) & 0x0F) +_chr.charAt((num >> (j * 8)) & 0x0F);str;

}

/*

* Convert a string to a sequence of 16-word blocks, stored as an array.

* Append padding bits and the length, as described in the MD5 standard.

*/str2blks_MD5(str)

{= ((str.length + 8) >> 6) + 1;= new Array(nblk * 16);(i = 0; i < nblk * 16; i++) blks[i] = 0;(i = 0; i < str.length; i++)[i >> 2] |= str.charCodeAt(i) << ((i % 4) * 8);[i >> 2] |= 0x80 << ((i % 4) * 8);[nblk * 16 - 2] = str.length * 8;blks;

}

/*

* Add integers, wrapping at 2^32. This uses 16-bit operations internally

* to work around bugs in some JS interpreters.

*/add(x, y)

{lsw = (x & 0xFFFF) + (y & 0xFFFF);msw = (x >> 16) + (y >> 16) + (lsw >> 16);(msw << 16) | (lsw & 0xFFFF);

}

/*

* Bitwise rotate a 32-bit number to the left

*/rol(num, cnt)

{(num << cnt) | (num >>> (32 - cnt));

}

/*

* These functions implement the basic operation for each round of the

* algorithm.

*/cmn(q, a, b, x, s, t)

{add(rol(add(add(a, q), add(x, t)), s), b);

}ff(a, b, c, d, x, s, t)

{cmn((b & c) | ((~b) & d), a, b, x, s, t);

}gg(a, b, c, d, x, s, t)

{cmn((b & d) | (c & (~d)), a, b, x, s, t);

}hh(a, b, c, d, x, s, t)

{cmn(b ^ c ^ d, a, b, x, s, t);

}ii(a, b, c, d, x, s, t)

{cmn(c ^ (b | (~d)), a, b, x, s, t);

}

/*

* Take a string and return the hex representation of its MD5.

*/calcMD5(str)

{= str2blks_MD5(str);= 1732584193;= -271733879;= -1732584194;= 271733878;

(i = 0; i < x.length; i += 16)

{= a;= b;= c;= d;

= ff(a, b, c, d, x[i+ 0], 7 , -680876936);= ff(d, a, b, c, x[i+ 1], 12, -389564586);= ff(c, d, a, b, x[i+ 2], 17, 606105819);= ff(b, c, d, a, x[i+ 3], 22, -1044525330);= ff(a, b, c, d, x[i+ 4], 7 , -176418897);= ff(d, a, b, c, x[i+ 5], 12, 1200080426);= ff(c, d, a, b, x[i+ 6], 17, -1473231341);= ff(b, c, d, a, x[i+ 7], 22, -45705983);= ff(a, b, c, d, x[i+ 8], 7 , 1770035416);= ff(d, a, b, c, x[i+ 9], 12, -1958414417);= ff(c, d, a, b, x[i+10], 17, -42063);= ff(b, c, d, a, x[i+11], 22, -1990404162);= ff(a, b, c, d, x[i+12], 7 , 1804603682);= ff(d, a, b, c, x[i+13], 12, -40341101);= ff(c, d, a, b, x[i+14], 17, -1502002290);= ff(b, c, d, a, x[i+15], 22, 1236535329);

= gg(a, b, c, d, x[i+ 1], 5 , -165796510);= gg(d, a, b, c, x[i+ 6], 9 , -1069501632);= gg(c, d, a, b, x[i+11], 14, 643717713);= gg(b, c, d, a, x[i+ 0], 20, -373897302);= gg(a, b, c, d, x[i+ 5], 5 , -701558691);= gg(d, a, b, c, x[i+10], 9 , 38016083);= gg(c, d, a, b, x[i+15], 14, -660478335);= gg(b, c, d, a, x[i+ 4]

, 20, -405537848);= gg(a, b, c, d, x[i+ 9], 5 , 568446438);= gg(d, a, b, c, x[i+14], 9 , -1019803690);= gg(c, d, a, b, x[i+ 3], 14, -187363961);= gg(b, c, d, a, x[i+ 8], 20, 1163531501);= gg(a, b, c, d, x[i+13], 5 , -1444681467);= gg(d, a, b, c, x[i+ 2], 9 , -51403784);= gg(c, d, a, b, x[i+ 7], 14, 1735328473);= gg(b, c, d, a, x[i+12], 20, -1926607734);

= hh(a, b, c, d, x[i+ 5], 4 , -378558);= hh(d, a, b, c, x[i+ 8], 11, -2022574463)<;B>;= hh(c, d, a, b, x[i+11], 16, 1839030562);= hh(b, c, d, a, x[i+14], 23, -35309556);= hh(a, b, c, d, x[i+ 1], 4 , -1530992060);= hh(d, a, b, c, x[i+ 4], 11, 1272893353);= hh(c, d, a, b, x[i+ 7], 16, -155497632);= hh(b, c, d, a, x[i+10], 23, -1094730640);= hh(a, b, c, d, x[i+13], 4 , 681279174);= hh(d, a, b, c, x[i+ 0], 11, -358537222);= hh(c, d, a, b, x[i+ 3], 16, -722521979);= hh(b, c, d, a, x[i+ 6], 23, 76029189);= hh(a, b, c, d, x[i+ 9], 4 , -640364487);= hh(d, a, b, c, x[i+12], 11, -421815835);= hh(c, d, a, b, x[i+15], 16, 530742520);= hh(b, c, d, a, x[i+ 2], 23, -995338651);

= ii(a, b, c, d, x[i+ 0], 6 , -198630844);= ii(d, a, b, c, x[i+ 7], 10, 1126891415);= ii(c, d, a, b, x[i+14], 15, -1416354905);= ii(b, c, d, a, x[i+ 5], 21, -57434055);= ii(a, b, c, d, x[i+12], 6 , 1700485571);= ii(d, a, b, c, x[i+ 3], 10, -1894986606);= ii(c, d, a, b, x[i+10], 15, -1051523);= ii(b, c, d, a, x[i+ 1], 21, -2054922799);= ii(a, b, c, d, x[i+ 8], 6 , 1873313359);= ii(d, a, b, c, x[i+15], 10, -30611744);= ii(c, d, a, b, x[i+ 6], 15, -1560198380);= ii(b, c, d, a, x[i+13], 21, 1309151649);= ii(a, b, c, d, x[i+ 4], 6 , -145523070);= ii(d, a, b, c, x[i+11], 10, -1120210379);= ii(c, d, a, b, x[i+ 2], 15, 718787259);= ii(b, c, d, a, x[i+ 9], 21, -343485551);= add(a, olda);= add(b, oldb);= add(c, oldc);= add(d, oldd);

}rhex(a) + rhex(b) + rhex(c) + rhex(d);

}

<--!Индикатор сложности пароля-->

Файл первый:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<#"justify"><--!Временная блокировка пользователей-->

<?php

$bot='';

$ip=$_SERVER['REMOTE_ADDR'];

if (strstr($_SERVER['HTTP_USER_AGENT'], 'Yandex')) $bot='Yandex';(strstr($_SERVER['HTTP_USER_AGENT'], 'Google')) $bot='Google';(strstr($_SERVER['HTTP_USER_AGENT'], 'Yahoo')) $bot='Yahoo';(strstr($_SERVER['HTTP_USER_AGENT'], 'Mail')) $bot='Mail';

if ($bot=='') {

$db=mysqli_connect("localhost","логин","пароль","имя_бд");

$res=mysqli_query($db,"INSERT INTO all_visits (ip,date) VALUES

(INET_ATON('".$ip."'),'".time()."')");
$res=mysqli_query($db,"SELECT count(id) FROM all_visits WHERE
(ip=INET_ATON('".$ip."') and date>'".(time()-10)."') LIMIT 1");

$count_visit=mysqli_fetch_array($res);($count_visit[0]>10) {

$res=mysqli_query($db,"INSERT INTO black_list_ip (ip,date) VALUES

(INET_ATON('".$ip."'),'".time()."')");

$start_line=0;

$lines='';

$ln_hta='';

$fh=fopen(".htaccess", "a+");($fh, LOCK_EX);($fh, 0);(!feof($fh)) $lines.=fread($fh,2048);

$lines=explode("\n", $lines);($n=0; $n<=count($lines); $n++) {(strstr($lines[$n],"Order Allow,Deny")) $start_line=$n;

}($start_line!=0) for ($n=0; $n<$start_line; $n++) $ln_hta[]=$lines[$n];$ln_hta=$lines;

$ln_hta[]="Order Allow,Deny";

$ln_hta[]="Allow from all";

$res=mysqli_query($db,"SELECT INET_NTOA(ip) AS ip,date FROM black_list_ipBY INET_ATON(ip)");($bad_ip=mysqli_fetch_array($res)) {(time()<($bad_ip[date]+900))$ln_hta[]=" deny from ".$bad_ip[ip];

}

$ln_hta=implode("\n",$ln_hta);($fh, 0);($fh, $ln_hta);($fh, LOCK_UN);($fh);

}

}

?>

<?php

$db=mysqli_connect("localhost","логин","пароль","имя_бд");

$res=mysqli_query($db,"DELETE FROM black_list_ip WHERE date<".(time()-900)."");

$res=mysqli_query($db,"DELETE FROM all_visits WHERE date<".(time()-900)."");

$start_line=0;

$lines='';

$ln_hta='';

$fh=fopen(".htaccess", "a+");($fh, LOCK_EX);($fh, 0);(!feof($fh)) $lines.=fread($fh,2048);

$lines=explode("\n", $lines);($n=0; $n<=count($lines); $n++) {(strstr($lines[$n],"Order Allow,Deny")) $start_line=$n;

}($start_line!=0) for ($n=0; $n<$start_line; $n++) $ln_hta[]=$lines[$n];$ln_hta=$lines;

$ln_hta[]="Order Allow,Deny";

$ln_hta[]="Allow from all";

$res=mysqli_query($db,"SELECT INET_NTOA(ip) AS ip,date FROM black_list_ipBY INET_ATON(ip)");($bad_ip=mysqli_fetch_array($res)) {(time()<($bad_ip[date]+900))$ln_hta[]=" deny from ".$bad_ip[ip];

$ln_hta=implode("\n",$ln_hta);($fh, 0);($fh, $ln_hta);($fh, LOCK_UN);($fh);

?>

<--!Запись логов социальной сети-->

<?php

$file="base.log";

$col_zap=4999;getRealIpAddr() {(!empty($_SERVER['HTTP_CLIENT_IP']))

{ $ip=$_SERVER['HTTP_CLIENT_IP']; }(!empty($_SERVER['HTTP_X_FORWARDED_FOR']))

{ $ip=$_SERVER['HTTP_X_FORWARDED_FOR']; }{ $ip=$_SERVER['REMOTE_ADDR']; }$ip;(strstr($_SERVER['HTTP_USER_AGENT'], 'YandexBot')) {$bot='YandexBot';}(strstr($_SERVER['HTTP_USER_AGENT'], 'Googlebot')) {$bot='Googlebot';}{ $bot=$_SERVER['HTTP_USER_AGENT']; }

$ip = getRealIpAddr();

$date = date("H:i:s d.m.Y");

$home = $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

$lines = file($file);(count($lines) > $col_zap) array_shift($lines);

$lines[] = $date."|".$bot."|".$ip."|".$home."|\r\n";_put_contents($file, $lines);

?>

<?php(isset($_GET[col])) { $col=$_GET[col]; } else { $col=50; }

$file=file("base.log"); ?>

<html>

<head>

<style type='text/css'>

td.zz {PADDING-LEFT: 3px; FONT-SIZE: 9pt; PADDING-TOP: 2px; FONT-FAMILY: Arial; }

</style>

</head>

<body>

<center>

<?phpif ($col>sizeof($file)) { $col=sizeof($file); } "Последние <b>".$col."</b> посещений сайта:"; ?>

<table width="680" cellspacing="1" cellpadding="1" border="0"="table-layout:fixed">
<tr bgcolor="#eeeeee">
<td>

<td>

<td>

<td>

</tr>

<?php($si=sizeof($file)-1; $si+1>sizeof($file)-$col; $si--) {

$string=explode("|",$file[$si]);

$q1[$si]=$string[0]; // дата и время

$q2[$si]=$string[1]; // имя бота

$q3[$si]=$string[2]; // ip бота

$q4[$si]=$string[3]; // адрес посещения'<tr bgcolor="#eeeeee"><td>

}'</table>';'<br>Просмотреть последние <a href=?col=100>100</a> <a href=?col=500>500</a>';'<a href=?col=1000>1000</a> посещений.';'<br>Просмотреть <a href=?col='.sizeof($file).'>все посещения</a>.</center>';'</body></html>';

?>

<--!Запрет загрузки изображений с эротическим содержанием-->

CREATE TABLE `users` (

`uid` int(11) AUTO_INCREMENT PRIMARY KEY,

`username` varchar(255) UNIQUE KEY,

`password` varchar(100),

`email` varchar(255) UNIQUE KEY

)

<script type="text/javascript" src="#"justify"><script type="text/javascript" src="jquery.wallform.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

$('#photoimg').live('change', function()

{A=$("#imageloadstatus");B=$("#imageloadbutton");

$("#imageform").ajaxForm({target: '#preview',:function(){.show();.hide();

},:function(){.hide();.show();

},:function(){.hide();.show();

} }).submit();

});

});

</script>

<?php('db.php');_start();

$session_id='1';

?>

<div id='preview'>

</div>

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>image:

<div id='imageloadstatus'>

<div id='imageloadbutton'>

<input type="file" name="photoimg" id="photoimg" />

</div>

</form>

<?php('db.php');_start();

$session_id='1';

$path = "uploads/";

getExtension($str)

{

$i = strrpos($str, ".");(!$i)

{"";

}

$l = strlen($str) - $i;

$ext = substr($str,$i+1,$l);$ext;

}

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")

{

$name = $_FILES['photoimg']['name'];

$size = $_FILES['photoimg']['size'];(strlen($name))

{

$ext = getExtension($name);(in_array($ext,$valid_formats))

{($size<(1024*1024))

{

_once('class.ImageFilter.php');

$filter = new ImageFilter;

$score = $filter->GetScore($_FILES['photoimg']['tmp_name']);(isset($score))

{($score >= 40)

{"Результат оценки ".$score."%, Ваше изображение содержит недопустимое содержимое :-(";

}

{

$actual_image_name = time().$session_id.".".$ext;

$tmp = $_FILES['photoimg']['tmp_name'];(move_uploaded_file($tmp, $path.$actual_image_name))

{_query($connection,"UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");"<img src='uploads/".$actual_image_name."'>

}"неудача";

}

}

}"Изображение не должно превышать 1 MB";

}"Недопустимый формат..";

}"Выберите изображение..!";

exit;

}

?>

<?php_reporting(0);('DB_SERVER', 'localhost');('DB_USERNAME', 'username');('DB_PASSWORD', 'password');('DB_DATABASE', 'database');

$connection =@mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);

?>

<--!Автоматическое резервеное копирование данных-->

<?php

set_time_limit(0);

$db_names = array();

$db_names[] = "db1";

$db_names[] = "db2";

$source_dirs = array();

$source_dirs[] = "/home/mysite1.ru";

$source_dirs[] = "/home/mysite2.ru";

$offset_dirs = strlen("/home/");

$host = "localhost";

$user = "root";

$password = "";

$dump_dir = "/home/backup";

$delay_delete = 35 * 24 * 3600;

$filezip = "backup_".date("Y-m-d").".zip";();(file_exists($dump_dir."/".$filezip)) exit;

$db_files = array();($i = 0; $i < count($db_names); $i++) {

$filename = $db_names[$i].".sql";

$db_files[] = $dump_dir."/".$filename;

$fp = fopen($dump_dir."/".$filename, "a");

$db = new mysqli($host, $user, $password, $db_names[$i]);

$db->query("SET NAMES 'utf-8'");

$result_set = $db->query("SHOW TABLES");(($table = $result_set->fetch_assoc()) != false) {

/* Перебор всех таблиц в базе данных */

$table = array_values($table);($fp) {

$result_set_table = $db->query("SHOW CREATE TABLE `".$table[0]."`");

$query = $result_set_table->fetch_assoc();

$query = array_values($query);($fp, "\n".$query[1].";\n");

$rows = "SELECT * FROM `".$table[0]."`";

$result_set_rows = $db->query($rows);(($row = $result_set_rows->fetch_assoc()) != false) {

$query = "";($row as $field) {(is_null($field)) $field = "NULL";$field = "'".$db->real_escape_string($field)."'"; ($query == "") $query = $field;$query .= ", ".$field;

}

$query = "INSERT INTO `".$table[0]."` VALUES (".$query.");";($fp, $query);

}

}

}($fp);

$db->close();

}

$zip = new ZipArchive();

$allfiles = array();($zip->open($dump_dir."/".$filezip, ZipArchive::CREATE) === true) {($i = 0; $i < count($source_dirs); $i++) {(is_dir($source_dirs[$i])) recoursiveDir($source_dirs[$i]);$allfiles[] = $source_dirs[$i];($allfiles as $val){

$local = substr($val, $offset_dirs);

$zip->addFile($val, $local);

}

}($i = 0; $i < count($db_files); $i++) {

$local = substr($db_files[$i], strlen($dump_dir) + 1);

$zip->addFile($db_files[$i], $local);

}

$zip->close();

}($i = 0; $i < count($db_files); $i++) unlink($db_files[$i]);

_filesrecoursiveDir($dir){$allfiles;($files = glob($dir."/{,.}*", GLOB_BRACE)) {($files as $file){

$b_name = basename($file);(($b_name == ".") || ($b_name == "..")) continue;(is_dir($file)) recoursiveDir($file);$allfiles[] = $file;

}

}

}deleteOldArchive() {$dump_dir;$delay_delete;

$ts = time();

$files = glob($dump_dir."/*.zip");($files as $file)($ts - filemtime($file) > $delay_delete) unlink($file);

}

>

<--!Защита от спама с помощью Akismet-->

<?_once ('classes/Akismet.class.php');MySpamProtection {

$sMyAkismetKey;$sWebsiteUrl;$sAuthName;$sAuthEml;$sAuthUrl;$oAkismet;

function MySpamProtection() {

// Устанавливаем необходимые значения для перменных

$this->sMyAkismetKey = ' ';

$this->sWebsiteUrl = ' ';

$this->sAuthName = ' ';

$this->sAuthEml = '';

$this->sAuthUrl = '';

$this->oAkismet = new Akismet($this->sWebsiteUrl ,$this->sMyAkismetKey);

$this->oAkismet->setCommentAuthor($this->sAuthName);

$this->oAkismet->setCommentAuthorEmail($this->sAuthEml);

$this->oAkismet->setCommentAuthorURL($this->sAuthUrl);

}

function isSpam($s) {(! $this->oAkismet) return false;

$this->oAkismet->setCommentContent($s);$this->oAkismet->isCommentSpam();

}

}<<<EOF

<style type="text/css">div {:10px;

}label {:90px;:left;:block;

}

</style>

<form action="" method="post">

<div><label for="author">Автор</label><input id="author" name="author" type="text" value="" /></div>

<div><label for="comment">Комментарий</label><textarea id="comment" name="comment" cols="20" rows="4"></textarea></div>

<div><input name="submit" type="submit" value="Отправить" /></div>

</form>;

($_POST) {'<pre>';_r($_POST);'</pre>';

$sPostAuthor = $_POST['author'];

$sCommentComment = $_POST['comment'];

$oMySpamProtection = new MySpamProtection();

$sAuthorCheck = ($oMySpamProtection->isSpam($sPostAuthor)) ? ' "Автор" отмечен как спам' : '"Автор" НЕ ИМЕЕТ отметки как спам';

$sCommentCheck = ($oMySpamProtection->isSpam($sCommentComment)) ? ' "Комментарий" отмечен как спам' : '"Комментарий" НЕ ИМЕЕТ отметки как спам';

echo $sAuthorCheck . '<br />' . $sCommentCheck;

}

?>

<div style="bottom:0;position:fixed;">

<hr style="clear:both;" />

<h4>

<a href="#"justify"></h4>

</div>

Министерство образования Республики Беларусь Учреждение образования БелорусскиЙ государственный университет информатики и радиоэлектроники Факультет

Больше работ по теме: