WWW.MASH.DOBROTA.BIZ
БЕСПЛАТНАЯ  ИНТЕРНЕТ  БИБЛИОТЕКА - онлайн публикации
 

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

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

Федеральное государственное бюджетное образовательное учреждение

высшего образования

«Уральский государственный педагогический университет»

Институт математики, информатики и информационных технологий

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

«РАЗРАБОТКА WEB-РЕСУРСА ДЛЯ ЛЮДЕЙ С ОГРАНИЧЕННЫМИ

ВОЗМОЖНОСТЯМИ ПО ЗРЕНИЮ»

Выпускная квалификационная работа по направлению 02.03.02 - Фундаментальная информатика и информационные технологии Исполнитель: студент группы Б-41 института математики, информатики и ИТ Кобелев А.Р .

Руководитель: доцент кафедры ИИТиМОИ к.п.н. Лозинская А.М .

Работа допущена к защите «____»__________ 201_ г .

Зав. кафедрой __________ Екатеринбург – 2017 Реферат Кобелев А.Р. РАЗРАБОТКА WEB-РЕСУРСА ДЛЯ ЛЮДЕЙ С ОГРАНИЧЕННЫМИ ВОЗМОЖНОСТЯМИ ПО ЗРЕНИЮ, выпускная квалификационная работа: 50 стр., рис. 28, табл. 4, библ. 34 назв., приложений 0 .

Ключевые слова: РАЗРАБОТКА ОГРАНИЧЕННЫЕ WEB-РЕСУРСА,

ВОЗМОЖНОСТИ ПО ЗРЕНИЮ, ГОСУДАРСТВЕННЫЙ СТАНДАРТ,

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

Объект разработки – web-ресурс для людей с ограниченными возможностями по зрению .

Цель работы – разработка web-ресурса для людей с ограниченными возможностями по зрению, обеспечивающего понятность, воспринимаемость, управляемость, построенного по стандарту ГОСТ Р 52872-2007 и WCAG .



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

Web-ресурс для людей с ограниченными возможностями по зрению реализован на сетевом уровне и выполнен в CMS Wordpress с использованием технологий PHP, HTML .

Оглавление РЕФЕРАТ

ВВЕДЕНИЕ

ГЛАВА 1. ТЕОРЕТИКО-ТЕХНОЛОГИЧЕСКИЕ ОСНОВЫ

СОЗДАНИЯ WEB-РЕСУРСОВ ДЛЯ ЛЮДЕЙ С ОГРАНИЧЕННЫМИ

ВОЗМОЖНОСТЯМИ ПО ЗРЕНИЮ

–  –  –

ГЛАВА 2. СОЗДАНИЕ И ТЕСТИРОВАНИЕ WEB-РЕСУРСА ДЛЯ

ЛЮДЕЙ С ОГРАНИЧЕННЫМИ ВОЗМОЖНОСТЯМИ ПО ЗРЕНИЮ.... 34

ОПИСАНИЕ РАЗРАБОТКИ WEB-РЕСУРСА

2.1 РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ ПО РАБОТЕ С САЙТОМ

2.2 РЕЗУЛЬТАТЫ АПРОБАЦИИ

2.3 ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ

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

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



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

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

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

основные компоненты веб-доступности;

обзор руководства по доступности пользовательских программ (UAAG);

обзор Руководства по доступности средств разработки авторского контента (ATAG) .

Объект исследования – web-ресурсы для людей с ограниченными возможностями .

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

Цель работы – разработка web-ресурса для людей с ограниченными возможностями по зрению, обеспечивающего понятность, воспринимаемость, управляемость и соответствующего стандартам ГОСТ Р 52872-2007 и WCAG .

Задачи исследования:

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

сформулировать техническое задание;

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

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

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

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

Глава 1. Теоретико-технологические основы создания Web-ресурсов для людей с ограниченными возможностями по зрению Анализ требований к сайтам для людей с 1 .

1 нарушениями зрения По последним данным ВОЗ на планете насчитывается около 45 миллионов незрячих людей и более 255 миллионов человек с ослабленным зрением. Выделяется отдельная категория граждан с таким заболеванием, как дальтонизм (цветовая слепота), их число колеблется от 4% до 8% населения земли, в то время как процент женщин с дальтонизмом среди общей численности гораздо ниже – около 1% .

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



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

Несколько лет назад версии сайтов для людей с патологиями в области по зрению были доступны только из ресурсов государственных и муниципальных структур. Это было связано с Федеральным законом «Об обеспечении доступа к информации». Но озабоченность по поводу доступности информации для всех категорий граждан стала нормальным явлением жизни – производители и компании на рынке услуг анализируют вопрос о возможности сочетания хорошего дизайна с реализацией сайтов и услуг «для всех» .

Использование таких технологий регламентируется государственным стандартом, присвоенным по номеру - ГОСТ Р 52872-2007 «Интернет-ресурсы .

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

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

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

Согласно WCAG, доступность веб-ресурса определяется следующими принципами:

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

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

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

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

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

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

минимальный (A);

средний (АА);

высокий (ААА) .

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

Пользователи с низким уровнем по зрению имеют несколько вариантов:

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

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

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

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

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

Стандарт ГОСТ Р 52872-2007 предъявляет следующие требования к компонентам Интернет-ресурса:

Объем контента. Частопосещаемые страницы по своему объему должны быть не более 2-3 экранов текста. Число ссылок на странице должно быть не более 15 .

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

При размещении на странице графических Flash-изображения .

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

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

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

Таблицы. Одна таблица должна иметь не более 15 ячеек. Уровень вложенности одной таблицы в другую должен быть не более трех .

Фреймы. Веб-страницы с фреймовой структурой не допускаются .

Гиперссылки. Каждая гиперссылка должна содержать поясняющий текст для объекта, на который она указывает, с использованием атрибута ALT языка HTML в тексте описания гиперссылки .

Формы веб-страниц. Каждый элемент формы должен содержать поясняющий текст .

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

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

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

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

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

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

Таблица 1. Отклонения в восприятии цвета Нормальное зрение

–  –  –

Вот почему, в процессе проектирования, стоит сочетать цвет с другими идентификационными метками .

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

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

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

Это не единственная причина, по которой стоить обращать особое внимание на текст .

Около 8 процентов людей на планете страдают от дислексии, болезни, при которой произношение слов и быстрое чтение вызывают трудности .

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

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

–  –  –

Правила гармоничной верстки:

простой текст и текст на снимках должны иметь коэффициент контрастности не менее 7:1;

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

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

длина строки не может превышать 80 символов;

выравнивание по ширине запрещено;

минимальный межстрочный интервал - не менее 1,5 интервала, а интервал между абзацами - не менее чем в 1,5 раза больше;

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

текст кнопок и ключевых элементов должен быть информативным;

все поля ввода должны содержать понятные текстовые метки;

шрифт должен быть разборчивым .

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

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

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

Реализация верстки медиа-контента в основных правилах:

элементы управления должны иметь описание места назначения;

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

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

на youtube.com к каждому видео прилагается краткое описание .

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

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

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

чаще всего для проверки слова используются изображения, но есть и звуковая версия, предназначенная для слабовидящих пользователей (вы можете вызвать ее, нажав на значок инвалидной коляски). Альтернативный текст для изображения: «Прослушайте запись и введите номера, которые были названы». К сожалению, эта CAPTCHA не подходит для слепоглухих людей;

Изображения и ссылки должны иметь альтернативное описание (alt = "") .

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

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

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

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

Для этого веб-ресурс должен удовлетворять следующим условиям:

нет ограничений по времени нажатия кнопки;

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

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

Предупреждение опасности для психики Некоторые люди страдают от нервных и психических расстройств .

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

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

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

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

При импорте предметов, которые имеют специальное назначение, таких как: списки, таблицы, заголовки и др. следует использовать соответствующие теги. В таблице 2 приведены основные теги .

–  –  –

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

Например:

role=main — блок основного контента role=navigation — блок служит для навигации по сайту role=banner — блок является баннером и т.п .

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

Стоит использовать ссылки для пропуска одинаковых блоков (навигации, баннеров) и перехода к блоку role="main" для удобочитаемости с помощью скринридера .

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

1. Стандартный вид страницы .

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

Рисунок 3. Стандартный вид страницы

Все мы привыкли воспринимать информацию графическим способом .

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

2. Альтернативный вид страницы .

Альтернативный вид построен, в основном, на текстовой информации .

Графические компоненты упрощены (рис.4) .

Рисунок 4. Альтернативный вид страницы

Методы и средства проектирования WEB-ресурса 1.4 Под методами создания WEB-ресурса понимается совокупность приемов и инструментов разработки.

Самыми распространенными методами можно назвать:

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

Главный же недостаток - растиражированность .

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

3. WYSIWYG-редакторы - (What You See Is What You Get - дословно что ты видишь, то и получаешь", англ.) специальные программные среды разработки сайтов, такие как Dream Weaver или Front Page. Сочетание среды разработки сайта, графических редакторов (Adobe Photoshop, Corel Photopaint и пр.) позволяет создавать сайт и сразу видеть конечный результат, который сразу же можно протестировать. Из плюсов отмечается скорость разработки и возможность написания ресурса всего лишь одним человеком, так как подобный метод не предполагает необходимость познаний в языках программирования (Java, PHP и пр.), поскольку ядро пишется автоматически средой разработки. К недостаткам стоит отнести низкий уровень защиты от вирусных атак, от проникновения злоумышлеников. Полученные скрипты не всегда работают так, как задумывалось, и функциональность оказывается чуть "ущербной". Кроме того, такой сайт "тяжел" для загрузки при медленном подключении к сети интернет, его код не оптимизирован, что вызывает "подвисания" браузера .

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



Анализ систем управления сайтом 1.5 Перед непосредственным анализом систем управления сайтом, стоит отметить, что с точки по зрению происхождения CMS (англ. Content

management system, рус. система управления контентом) делятся на три группы:

самописные;

готовые бесплатные;

готовые платные .

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

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

Основное достоинство самописных CMS состоит в их ориентации на конкретную задачу. Как правило, код движка у них хорошо оптимизирован и ориентирован на наполнителей контента .

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

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

Требования к CMS Движок для сайта, будь он платным или бесплатным, должен давать пользователю средства для удобного и быстрого создания новых и редактирования старых материалов проекта и структурирования их. Для этого в CMS встраиваются визуальные редакторы, работающие по технологии Microsoft Word — наглядно и просто, без требований к глубоким познаниям html или CSS. То есть, главным достоинством движка должно быть значительное снижение требований к уровню знаний его владельца и других пользователей .

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

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

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

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

Бесплатная или коммерческая .

1 .

Удобство для контент-менеджера .

2 .

Удобство для разработчика .

3 .

Качество визуального редактирования .

4 .

Функциональность .

5 .

Встроенные модули .

6 .

Встроенный инструмент для мультиязычности .

7 .

Поддержка мультимедийного контента .

8 .

Расширенная статистика .

9 .

10. Поддержка ЧПУ (человекопонятный URL) .

11. Инструменты геолокации .

12. Качество поддержки .

13. Безопасность .

14. Ассортимент шаблонов дизайна .

15. Возможности интеграции .

16. Пригодность для SEO-оптимизации, изначальная оптимизированность .

17. Совместимость с хостингами .

–  –  –

CMS «Joomla!» (рис.5) (произносится джумла) — система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL или другие стандартные промышленные реляционные СУБД. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL .

16 сентября 2005 года в свет вышла первая версия Joomla! Название «Joomla!» фонетически идентично слову «Jumla», которое в переводе с языка суахили означает «все вместе» или «единое целое», что отражает подход разработчиков и сообщества к развитию системы .

Еще одна достаточно популярная CMS, «WordPress» (рис.6)— система управления содержимым сайта с открытым исходным кодом; написана на PHP;

сервер базы данных — MySQL; выпущена под лицензией GNU GPL версии 2 .

Сфера применения — от блогов до достаточно сложных новостных ресурсов и интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать проекты широкой функциональной сложности. Первый релиз состоялся 27 мая 2003 года .

Рисунок 6. Панель управления «WordPress»

Программный продукт «UmiCMS» (рис.7) является коммерческой мультисайтовой системой управления контентом, созданной командой российских разработчиков «Юмисофт». В массовую продажу поступила в 2007 году. Написана на языке программирования PHP и использует базу данных MySQL .

По состоянию на май 2015 года на платформе UMI.CMS работают около 800 000 сайтов различного масштаба: сайтывизитки, каталоги товаров, интернетмагазины, порталы и т.д .

Рисунок 7. Панель управления «UmiCMS»

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

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

Рисунок 8. Панель управления «1С-Битрикс»

«Drupal»(рис.9) — система управления содержимым, используемая также как каркас для веб-приложений (CMF), написанная на языке PHP и использующая в качестве хранилища данных реляционную базу данных (поддерживаются MySQL, PostgreSQL и другие). Drupal является свободным программным обеспечением, защищённым лицензией GPL, и развивается усилиями энтузиастов со всего мира .

Рисунок 9. Панель управления «Drupal»

«NetCat» (рис.10)CMS — система управления сайтами (Content Management System), разрабатывается с 1999 года. Основателем системы является Васильев Дмитрий Евгеньевич .

Согласно анализу, проведённому в июле 2012 года порталами 3DNews.ru и CMS Magazine, NetCat занимает второе место среди коммерческих CMS на русскоязычных сайтах .

Основные преимущества NetCat CMS: высокая скорость работы;

безопасность CMS и устойчивость к взлому; низкие требования к хостингу;

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

Рисунок 10. Панель управления «NetCat»

CMS «MODX» (рис.11)— система управления содержимым с открытым исходным кодом и открытой лицензией. Написана на языке программирования PHP, использует для хранения данных СУБД MySQL или MS SQL .

–  –  –

Формализованное описание технического задания 1.6 на разработку Web-ресурса для людей с ограниченными возможностями по зрению

1. Введение, общие сведения о создаваемой системе .

1.1. Название: Web-ресурс для людей с ограниченными возможностями по зрению .

1.2. Область использования: посетители web-ресурса с ограниченными возможностями по зрению .

1.3. Данные об авторе: студент группы Б-41, Институт математики, информатики и информационных технологий, Кобелев А.Р .

1.4. Руководитель: доцент кафедры ИИТиМОИ к.п.н. Лозинская А.М .

Настоящее техническое задание распространяется на разработку webресурса для людей с ограниченными возможностями по зрению, для упрощенного использования сайта по стандарту ГОСТ Р 52872-2007 .

2. Основания и назначение разработки .

2.1. Объектом разработки является «Онлайн Библиотека» с выбором режима просмотра страниц людям с ограниченными возможностями по зрению .

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

3. Требования к продукту разработки .

3.1. Перечень требований к аппаратно-программному окружению .

3.1.1. Локальный компьютер с операционной системой не ниже Microsoft Windows XP .

3.1.2. Браузер Яндекс.Браузер, Google Chrome, Safari, Opera, Mozilla Firefox или Internet Explorer .

3.1.3. Выход в интернет .

3.2. Указание программного обеспечения, используемого для реализации .

3.2.1. Локальный компьютер с операционной системой Microsoft Windows 10 .

3.2.2. Браузер Яндекс.Браузер .

3.2.3. Выход в интернет .

3.2.4. CMS WordPress .

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

4. Состав и содержание работ по созданию сайта .

4.1. Анализ требований к сайту .

4.1.1. Изменение размера шрифта по стандартам А, АА, ААА .

4.1.2. Изменение фона и шрифта сайта .

4.1.3. Отключение изображений или перевод в чёрно-белый режим .

4.1.4. Изменение кернинга .

4.1.5. Изменение интервала .

4.1.6. Изменение гарнитуры .

4.1.7. Звуковое сопровождение .

4.2. Проектирование и разработка сайта .

4.2.1. Разработка технического задания .

4.2.2. Разработка структуры сайта .

4.2.3. Разработка интерфейса .

4.2.4. Реализация сайта .

4.2.5. Написание документации .

4.3. Тестирование .

5. Порядок контроля и приемки системы .

5.1. Промежуточный контроль – середина марта 2017г., объем – основной функционал, контроль – руководитель .

5.2. Дата отчета руководителю – начало мая 2017г .

Глава 2. Создание и тестирование Web-ресурса для людей с ограниченными возможностями по зрению Описание разработки WEB-ресурса 2 .

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

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

К проектированию сайта был выбран такой подход, как Brief («бриф»), заключающий в себе наброски требований, модели и структуры сайта. То есть на основе анализа были выделены основные этапы развития в разработке сайта .

Проанализировав комплекс работ над созданием сайта, были выделены следующие этапы:

1. Определение целей сайта .

2. Целевая аудитория .

3. Функционал проекта .

4. Выбор и регистрация домена и хостинга .

5. Выбор и установка CMS (системы управления сайтом) .

6. Разработка дизайна .

7. Наполнение контентом .

8. Тестирование .

9. Запуск .

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

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

1. изменение размера шрифта по стандартам А, АА, ААА;

2. изменение фона и шрифта сайта;

3. отключение изображений или перевод в чёрно-белый режим;

4. изменение кернинга;

5. изменение интервала;

6. изменение гарнитуры;

7. звуковое сопровождение .

Домен – это уникальный адрес сайта в интернете, еще его называют URLадресом.Домены делятся по уровням и географической зоне. Например, kvadrat.ru – это домен второго уровня, зарегистрированный в «русской» зоне .

kvadrat.msk.ru – домен третьего уровня и тоже, зарегистрированный, в «русской» зоне.А kvadrat.ua - домен второго уровня «украинской» зоны .

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

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

Хостинг делится на две группы: Unix-хостинг и Windows-хостинг .

Каждый из которых поддерживает веб-технологии (PHP и MySQL) и (ASP и MSSQL) соответственно. Сайты на WordPress работают на PHP и MySQL .

Поэтому был выбран Unix-хостинг .

Изучив множество хостиг-провайдеров России, мной был выбран beget.ru (рис.12). Beget – хостинг -провайдер из Санкт-Петербурга, который создал себе хорошую репутацию за счет многолетней стабильной работы. Также к преимуществам данного хостера можно отнести удобную панель управления и профессиональную службу поддержки .

Хостер включает в себя 30 дней тестового периода, а так же:

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

Неограниченное количество почтовых ящиков;

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

PHP 5/4, Perl 5, Python, Zend, phpMyAdmin;

SSH, sFTP/FTP доступ;

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

Автоматическую установку CMS;

Управление CronTab (задания по расписанию);

Управление DNS-записями;

POP3, IMAP, SMTP для работы с почтой;

Автоматическое резервное копирование;

Управление журналами веб-сервера;

Круглосуточную техническую поддержку;

Разрешённую нагрузку 65 CP в день;

Разрешённую нагрузку 2500 CP для MySQL в день .

Рисунок 12. Хостинг-провайдер Beget.ru

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

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

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

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

Вход на сайт (панель управления WordPress (рис.13)) происходит по адресу: http://dendensa.beget.tech .

–  –  –

Администратор имеет право настраивать, удалять и создавать внешний вид сайта. Все изменения происходят в разделе Внешний вид .

С помощью подраздела Темы можно загрузить на сайт уже готовую и разработанную тему оформления .

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

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

Рисунок 14. Редактора кода

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

1. Главная страница (рис.15). Включает в себя строку поиска, кнопку перехода к версии для слабовидящих и миниатюры представленных га сайте произведений .

–  –  –

При наведении курсора мыши на выбранное произведение происходит открытие форзаца и текстовое отображение названия произведения и ФИО автора (рис.16) .

–  –  –

2. Нажатие на выбранное произведение влечет за собой переход к его кратким характеристикам: название, автор, жанр, рейтинг произведения, обложка книги, аннотация (рис.17) .

Рисунок 17. Краткая характеристика произведения

3. К прочтению выбранной книги ведет кнопка «Читать» после аннотации произведения (рис.18) .

–  –  –

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

Воспользоваться которым можно после нажатия на кнопку «Слушать произведение» (рис.20) .

–  –  –

5. Web-страница онлайн библиотеки поделена на несколько областей .

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

–  –  –

Работа с версией сайта для слабовидящих Переход к версии сайта для слабовидящих происходит по нажатию надписи, в области меню, «Версия для слабовидящих» (рис.23) .

–  –  –

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

–  –  –

Рассмотрим все разделы сайта в альтернативной версии .

1. Главная страница (рис.25) .

Цветовая схема – черным по белому. Интервал между буквами – стандартный. Размер шрифта – уменьшенный. Отображение картинок – нет .

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

Рисунок 25. Главная страница в режиме для слабовидящих

2. Переход к кратким характеристикам произведения (рис.26) .

–  –  –

3. Страница чтения произведения. (рис.27) .

4. Чтение может вести с любым из заданных характеристик из панели управления для слабовидящих .

Озвучивание текста на странице происходит по нажатию текста/кнопки «Слушать произведение» (рис.28) .

–  –  –

Ответы, оставленные респондентами, записаны в таблицу, которая создана на платформе «Google Таблицы». Результаты апробации представлены в Таблице 4 .

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

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

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

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

разработано техническое задание;

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

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

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

проведена апробация ресурса на фокус-группе людей с нарушениями зрения .

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

Считаем, что цели выпускной квалификационной работы достигнуты, поставленные в исследовании задачи выполнены в полном объёме .

Список используемых источников ГОСТ Р 52872-2012 Интернет ресурсы. Требования доступности для 1 .

инвалидов по зрению .

ГОСТ Р 52871-2007 Дисплеи для слабовидящих. Требования и 2 .

характеристики .

WCAG 2.0 Руководство по обеспечению доступности Web-контента // 3 .

WCAG 2.0 URL: https://www .

w3.org/Translations/WCAG20-ru .

Chris Coyer Jeff Starry. Погружение в WordPress, Интернет издание. 2014 .

4 .

Андерсон С. Приманка для пользователей. Создаем привлекательный сайт 5 .

/ С. Андерсон. М.: Питер, 2013. 130 c .

Бердышев С. Н. Искусство оформления сайта / С.Н. Бердышев. М.: Дашков 6 .

и Ко, 2013. 148 c .

Сенкевич. Г.Е. Компьютер для людей с ограниченными возможностями .

7 .

СПб.: БХВ-Петербург, 2014. 320 с .

Гаевский А.Ю. 100% самоучитель. Создание Web-страниц и Web-сайтов .

8 .

HTML и JavaScript / А.Ю. Гаевский, В.А. Романовский. М.: Триумф, 2008 .

464 c .

Горнаков С. Г. Осваиваем популярные системы управления сайтом / С.Г .

9 .

Горнаков. М.: ДМК Пресс, 2009. 336 c

10. Грачев А.: Создаем свой сайт на WordPress. Быстро, легко и бесплатно. СПб: Питер, 2013 .

11. Документация Wordpress // Wordpress URL:

https://ru.wikipedia.org/wiki/Сайт (дата обращения: 25.03.2017) .

12. Дронов В. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. М.: "БХВ-Петербург", 2010. 416 c .

13. Ищенко В. А. 100% самоучитель. Web-дизайн. Создавай свои сайты / В.А .

Ищенко. - М.: Технолоджи-3000, Триумф, 2009. 144 c .

14. Колисниченко Д. Выбираем лучший бесплатный движок для сайта. CMS Joomla! и Drupal (+ CD-ROM) / Денис Колисниченко. М.: БХВ-Петербург, 2010. 288 c

15. Крамер Джен Joomla! Как спланировать, создать и поддерживать ваш вебсайт (+ CD-ROM) / Джен Крамер. - М.: Рид Групп, 2011. 400 c .

16. Кузнецов PHP. Практика создания Web-сайтов / Кузнецов, М.В. и. М.:

БХВ-Петербург, 2008. 404 c .

17. Куйбышев Л. А. Принципы Качества Веб-Сайтов По Культуре .

Руководство / Коллектив авторов, Л.А. Куйбышев, Е.И. Кузьмин. Москва:

РГГУ, 2006. 653 c .

18. Леонтьев Б. PHP 5.0 для начинающих, или как создать динамический WEB-сайт / Борис Леонтьев. - М.: Новый издательский дом, 2005. 176 c .

19. Митчелл С. 5 проектов Web-сайтов от фотоальбома до магазина / Митчелл, Скотт. - М.: НТ Пресс, 2007. 224 c .

20. Молодцов В. А. Персональный компьютер. От байта до сайта / В.А .

Молодцов, Н.Б. Рыжикова. - М.: Феникс, 2008. 336 c .

21. Руководство для новичков Wordpress // Wordpress URL:

http://texterra.ru/blog/kak-sozdat-sayt-na-wordpress-polnoe-rukovodstvo-dlyanovichkov.html (дата обращения: 02.01.2017) .

22. Сайт // (дата ifap URL: http://www.ifap.ru/library/gost/528722007.pdf обращения: 23.03.2017) .

23. Сайт // Wikipedia URL: https://ru.wikipedia.org/wiki/Сайт (дата обращения:

23.03.2017) .

24. Сергеев А. uCoz. Создаем свой сайт бесплатно и легко / Александр Сергеев. - М.: Питер, 2011. 240 c .

25. Снелл Н. Абсолютно ясно о создании Web-страниц и Web-сайтов / Снелл, Нэд. - М.: Триумф, 2005. 224 c .

26. Стеймец У. PHP. 75 готовых решений для вашего сайта +CD / Стеймец, Ульям. М.: СПб: Наука и Техника, 2009. 256 c .

27. Строганов А. С. Ваш первый сайт с использованием PHP-скриптов / А.С .

Строганов. М.: Диалог-Мифи, 2008. 288 c .

28. Уильямс Б. WordPress для профессионалов. Разработка и дизайн сайтов / Б .

Уильямс Д. Дэмстра, Х. Стэрн. - М.: Питер, 2014. 464 c .

29. Трис Х. WordPress. Создание сайтов для начинающих (+ CD-ROM) / Трис Хассей. - М.: Эксмо, 2012. 432 c .

30. Черников С. В. Dreamweaver CS3. Строим Web-сайты (+ CD-ROM) / С.В .

Черников Ф.А. Резников. - М.: 100 книг, Триумф, 2008. 256 c .

31. Шкрыль А. PHP - это просто. Программируем для Web-сайта / А. Шкрыль .

- М.: БХВ-Петербург, 2006. 368 c .






Похожие работы:

«МОУ "Графовская средняя общеобразовательная школа" Комбинированный урок по технологии в 5 классе.Учитель технологии: Сосюра Л. А. Комбинированный урок по технологии и информатике в 5 классе. Т...»

«Федеральный список экстремистских материалов Статьей 13 Федерального закона от 25.07.2002 № 114-ФЗ "О противодействии экстремистской деятельности", пунктом 7 Положения о Министерстве юстиции Российской Федерации, утвержденного Указом Президента Российской Федер...»

«Министерство образования и науки Российской Федерации ФГБОУ ВО "Уральский государственный педагогический университет" Институт физики и технологии. Кафедра теории и методики обучения физике, технологии и мультимед...»

«Министерство образования и науки Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего образования "Саратовский национальный исследовательский государственный университет имени Н.Г. Чернышевского" Балашовский институт (филиал) Кафедра дошкольной педагогики и психологии АВТОРЕФЕРАТ ДИПЛОМНОЙ РАБОТЫ ТУРИЗМ КАК СРЕДСТВО ФИЗИЧЕСКОГО ВОСПИТАНИЯ ДОШКОЛЬНИК...»

«Вестник ТГПУ (TSPU Bulletin). 2015. 10 (163) УДК 82:801.6; 82–1/-9; 82–93; 087.5 Е. А. Полева ХУДОЖЕСТВЕННОЕ СВОЕОБРАЗИЕ ПРОЗАИЧЕСКИХ МИНИАТЮР-СКАЗОК ТАТЬЯНЫ МЕЙКО1 Обращение Татьяны Мейко (Томск) к жанру прозаической миниатюры рассматривается в контексте традиций формирования и тенденций современно...»

«Муниципальное автономное общеобразовательное учреждение "Гимназия № 3" школа искусств Творческого Центра "Визит" Рассмотрена на педагогическом совете УТВЕРЖДАЮ МАОУ "Гимназия № 3" Директор МАОУ "Гимназия №3" Протокол № 57 от 15.06.2017 г. А.В. Жмурко ДОПОЛНИТЕЛЬНАЯ ОБЩЕРАЗВИВАЮЩАЯ...»

«Паисий Святогорец Слова. Том V Страсти и добродетели Том I II III IV V Раздел I. Страсти • Глава 1. Борьба со страстями Не надо оправдывать свои страсти Видение страстей Гордость – опора страстей Страсти искореняются легко, пока они "молоды" Как избавиться от страстей Лучше геройски по...»

«Муниципальное автономное дошкольное образовательное учреждение Центр развития ребенка –детский сад №2 муниципального образования Усть-Лабинский район Критерий 4. Эффективность взаимодействия с социумом Содержание 1.Система работы с родителями (из годового плана).2. План проведения месячника военно-па...»




 
2019 www.mash.dobrota.biz - «Бесплатная электронная библиотека - онлайн публикации»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.