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

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

Именно по этой причине измерения в 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.4 Выбор дизайнерского решения программного средства

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

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

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

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

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

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

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

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

<div id="rotator">

<ul>

<li class="show">

<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>

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

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

4.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 опции), предоставляют множество переменных, которые должны быть протестированы и включены в исследования.

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

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

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

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

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



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

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

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

Таблица 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 ТЕХНИКО-ЭКОНОМИЧЕСКОЕ ОБОСНОВАНИЕ ВЕБ-ПРОЕКТА «СОЦИАЛЬНАЯ СЕТЬ»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.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 (руб.)

Tч2 = 99895,46 / 8 = 12486,93 (руб.)

Tч3 = 109585,21 / 8 = 13698,15 (руб.)

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

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

Исполнитель	Разряд	Тарифный коэффициент	Месячная тарифная ставка, руб.	Часовая тарифная ставка, руб.	Плановый фонд рабочего времени, дн.	Заработная плата, руб.
Программист 1-й категории	11	2,242	2640537,92	15003,05	264	4752966,24
Программист 2-й категории	9	1,866	2197700,16	12486,93	264	26372396,16
Программист 2-й категории	10	2,047	2410874,72	13698,15	264	28930492,8
Основная заработная плата	60055855,2

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



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

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

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

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

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

Рм=Цм*Тч*Ср

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

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

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

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

Рм=5000*8*264=10560000 (руб.)

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

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

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

Рн=60 055 855,2*0,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 %

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

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

Цо = Цп + НДС

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



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

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). Далее, в случае не удовлетворительного результата, выявляются негативные факторы и исправляются, если же тестирование успешно, то начинается разработка социальной сети.

8.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.

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

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

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

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

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

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

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

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

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

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

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

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

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



ПРИЛОЖЕНИЕ А

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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 class="show">

<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 class="logo">

<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 class="accordion">

<li id="one" class="files">

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

<ul class="sub-menu">

<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" class="mail">

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

<ul class="sub-menu">

<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" class="cloud">

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

<ul class="sub-menu">

<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" class="sign">

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

<ul class="sub-menu">

<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 class="main">

<div class="panel">

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

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

</div>

</div>

<!-- popup form #1 -->

<a href="#x" class="overlay" id="login_form"></a>

<div class="popup">

<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 class="close" href="#close"></a>

</div>

<!-- popup form #2 -->

<a href="#x" class="overlay" id="join_form"></a>

<div class="popup">

<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 class="close" href="#close"></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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 class="show">

<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 class="logo">

<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 class="accordion">

<li id="one" class="files">

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

<ul class="sub-menu">

<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" class="mail">

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

<ul class="sub-menu">

<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" class="cloud">

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

<ul class="sub-menu">

<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" class="sign">

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

<ul class="sub-menu">

<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="http://mobilka.okis.ru/file/mobilka/uflvplayer_500x375.swf" height="300" width="400"><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="movie" value="http://mobilka.okis.ru/file/mobilka/uflvplayer_500x375.swf" /><param name="FlashVars" value="way=http://mobilka.okis.ru/file/mobilka/House%20Season%205%20Promo.flv&amp;swf=http://mobilka.okis.ru/file/mobilka/uflvplayer_500x375.swf&amp;w=400&amp;h=300&amp;autoplay=0&amp;tools=1&amp;skin=grey&amp;volume=100&amp;q=&amp;comment=www.mobilka.okis.ru" /></object><p><a href="http://www.mobilka.okis.ru" target="_blank"> </a>

<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 class="show">

<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 class="logo">

<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 class="accordion">

<li id="one" class="files">

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

<ul class="sub-menu">

<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>