Версия сайта для слабовидящих - как сделать для DLE

Зачем нужна версия для слабовидящих?

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

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

Особенности:

бесплатен;

простота в установке;

несколько вариантов отображения;

несколько языковых версий (русский, английский, украинский);

возможность указать необходимый набор размеров шрифтов;

возможность включить/отключить управление отображения изображениями;

возможность включить/отключить управление фоном сайта;

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

скрипт соответствует требуемым нормам.

DataLife Engine - версия для слабовидящих

Если вам приходилось разрабатывать сайт для государственных учреждений РФ, то вы уже должны знать о требовании к специализированной версии сайта для слабовидящих. Скрипт "версии для слабовидящих" обычно продают в качестве дополнительной опции к популярным CMS. Для DataLife Engine подобного скрипта пока небыло. Мы предлагаем адаптацию версии сайта для слабовидящих от uCoz.

Версия сайта для слабовидящих - как сделать для DLE

Автор оригинальной версии для uCoz Рома Келлер aka Inquisitor добавил скрипт 18.10.2015.

Нам потребуется скачать архив со старницы http://uscript.pro/shop/83/item/versija-dlja-slabovidjashhikh
Копия архива с нашего сайта: версия для uCoz.zip [1,11 Mb] (cкачиваний: 1303)

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

Вариант 1 - самый простой

1.1 В папку js вашего шаблона загружаем файл uhpv-full.min.js

пример:

для нашего шаблона bs3-tcse скрипт версии для слабовидящих будет находится по адресу:
www.site.ru/templates/bs3-tcse/js/uhpv-full.min.js

1.2 далее открываем файл главного шаблона main.tpl и сразу после тега

<body>

добавляем

<!-- версия для слабовидящих -->
<style>
	 #hpvgd,.h-mdiv,.h-mdiv2,.h-ldiv,.h-rdiv {background:#EAEAEA; color:#6D6D6D;}
	 #hpvgd {width:100%; z-index:100; width:100%; border-bottom:2px solid rgb(230,230,230);}
	 .h-mdiv {display:none; position:relative; margin:auto; text-alegn:center;}
	 .h-mdiv2 {display:none; position:fixed; margin:auto; text-alegn:center; width:400px; height:200px;}
	 .h-ldiv {float:left; padding:7px 10px 7px 0px;}
	 .h-rdiv {position:absolute; top:7px; right:0px; text-align:right;}
	 .h-ni {display:none !important;}
	 a.hcmaf {color:red; margin-left:5px; font-size:20px; font-weight:bold;}
	 a.h-anl {color:#2a72cc;}
	 a.h-al {color:#ED664B;}
	 .h-fi {font-weight:bold; border-radius:50%; padding:0px 8px; margin-right:5px; font-size:19px;}
	 .h-background-1 {color:#fff !important; background:#000 !important;}
	 .h-background-2 {color:#000 !important; background:#fff !important;}
</style>
<script src="{THEME}/js/uhpv-full.min.js"></script>
<script>
	var 	uhe 	= 2,
		lng 	= 'ru',
		has 	= 0,
		imgs 	= 1,
		bg 	= 1,
		hwidth 	= 0,
		bgs 	= ['1','2'],
		fonts 	= ['19','21','23'];
	$(document).ready(function(){uhpv(has)});
</script>
<!-- /версия для слабовидящих -->

пример:

для нашего шаблона bs3-tcse скрипт версии для слабовидящих будет находится по адресу:
www.site.ru/templates/bs3-tcse/main.tpl

1.3 Теперь необходимо добавить ссылку на включение "версии для слабовидящих" для этого в удобном для вас месте добавьте код

<span id="uhvb" style="display:none;"><a href="javascript://" onclick="uvcl()"><b>Версия для слабовидящих</b></a></span>

Установка завершена.

Вариант 2 - продвинутый

Если Вы используете html5 шаблон, то наверняка слышали о рекомендациях размещать java script в конце своей html страницы перед закрывающим тегом body. Такая запись позволяет ускорить загрузку страницы.

2.1 В папку js вашего шаблона загружаем файл uhpv-full.min.js

пример:

2.2 далее открываем файл главного шаблона main.tpl и если рекомендации по загрузке JS файлов для html5 у вас соблюдены, то в конце страницы перед тегом

</body>

находим строку

<script src="{THEME}/js/libs.js"></script>

и перед ней добавляем

<script src="{THEME}/js/uhpv-full.min.js"></script>

пример:

2.3 Открываем файл /js/libs.js и в него добавляем:

// версия для слабовидящих
var 	uhe 	= 2,
lng 	= 'ru',
has 	= 0,
imgs 	= 1,
bg 	= 1,
hwidth 	= 0,
bgs 	= ['1','2'],
fonts 	= ['19','21','23'];
$(document).ready(function(){uhpv(has)});

2.4 Открываем файл /css/styles.css (или его аналог с вашими стилями шаблона)
и в него добавляем

/*версия для слабовидящих*/
#hpvgd,.h-mdiv,.h-mdiv2,.h-ldiv,.h-rdiv {background:#EAEAEA; color:#6D6D6D;}
#hpvgd {width:100%; z-index:100; width:100%; border-bottom:2px solid rgb(230,230,230);}
.h-mdiv {display:none; position:relative; margin:auto; text-alegn:center;}
.h-mdiv2 {display:none; position:fixed; margin:auto; text-alegn:center; width:400px; height:200px;}
.h-ldiv {float:left; padding:7px 10px 7px 0px;}
.h-rdiv {position:absolute; top:7px; right:0px; text-align:right;}
.h-ni {display:none !important;}
a.hcmaf {color:red; margin-left:5px; font-size:20px; font-weight:bold;}
a.h-anl {color:#2a72cc;}
a.h-al {color:#ED664B;}
.h-fi {font-weight:bold; border-radius:50%; padding:0px 8px; margin-right:5px; font-size:19px;}
.h-background-1 {color:#fff !important; background:#000 !important;}
.h-background-2 {color:#000 !important; background:#fff !important;}
/* конец версия для слабовидящих

2.5 Теперь необходимо добавить ссылку на включение "версии для слабовидящих" для этого в удобном для вас месте добавьте код

<span id="uhvb" style="display:none;"><a href="javascript://" onclick="uvcl()"><b>Версия для слабовидящих</b></a></span>

Установка завершена.

Демо-версия шаблона для DLE с версией для слабовидящих

смотреть демо

Готовый шаблон для DataLife Engine с поддержкой версии для слабовидящих можно скачать из репозитория https://bitbucket.org/tcse/template_tbs3-tcse

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

Наш специалист ответит вам в течении суток.

3 декабря 2015 19 16 526 скрипты бесплатно Версия для печати

Комментарии (19)

#1 написал: филл
Группа: Гости
11 февраля 2016 07:34

Прекрасно реализовано. А не подскажите как сделать, что панель изначально показывалась на сайте, а не по клику по надписи "Версия для слабовидящих"?
1
1. #2 написал: TCSE
  Группа: Администраторы
  29 февраля 2016 22:17
  
  для этого в настройках скрипта уже есть готовая опция:
  
  «has» - указывает на необходимость запускать версию для слабовидящих автоматически при входе на сайт
  0 - версия будет запускаться только если пользователь нажмёт на кнопку включения,
  1 - версия будет запускаться всегда, при входе на любую страницу сайта (кнопка "Выключить" будет отсутствовать)
  об этом написано в инструкции по установке модуля для uCoz
  
  0
#3 написал: Олег
Группа: Гости
1 марта 2016 08:23

День добрый! Подскажите, в чём может быть проблема?
Кодировка сайта: windows-1251
При установке скрипта всё работает.. Но на панели все надписи аброкадаброй...
0
1. #4 написал: TCSE
  Группа: Администраторы
  1 марта 2016 10:12
  
  скорее всего вам необходимо пересохранить сам js файл скрипта в нужной кодировке.
  я о файле js/uhpv-full.min.js
  Так как текст на панели "версии для слабовидящих " имеет 3 языковые версии и все они указаны именно в этом файле.
  
  Выбрать этот файл и сохранить в кодировке Win utf8.
  
  1
#5 написал: Дмитрий
Группа: Гости
29 апреля 2016 12:16

Здравствуйте! Что мне делать, если в папке шаблона нет папки "js", версия DLE 9.0. Куда копировать скрипт?
0
1. #6 написал: TCSE
  Группа: Администраторы
  29 апреля 2016 17:47
  
  А кто Вам мешает создать такую папку?
  
  на самом деле это не обязательно. Но тогда вам надо исправить адрес
  подключаемой библиотеки
  <script src="{THEME}/js/uhpv-full.min. js"></script>
  
  на тот путь, куда именно вы положите файл.
  
  Но проще создать папку js для своего шаблона :)
  
  0
#7 написал: Валерий
Группа: Гости
12 мая 2016 13:57

Все сделал, путь к скрипту прописал /rosinka91/js/uhpv-full.min.js ,скрипт туда загрузил,как написано, кнопка появилась , но при нажатии ничего не происходит http://www.rosinka-91.ru/, можете помочь, буду очень благодарен.
1
1. #8 написал: TCSE
  Группа: Администраторы
  14 мая 2016 21:43
  
  инспектор кода выдает
  
  Failed to load resource: http://www.rosinka-91.ru/js/uhpv-full.m
  in.js the server responded with a status of 404 (Not Found)
  
  а ссылка должна быть
  
  /templates/rosinka91/js/uhpv-full.min.j
  s
  
  именно в этом проблема.
  
  в своем шаблоне вместо
  
  <script src="/js/uhpv-full.min.js">& amp; lt;/script>
  
  напишите так
  
  <script src="{THEME}/js/uhpv-full.min. js"></script>
  
  0
  1. #9 написал: Валерий
    Группа: Гости
    15 мая 2016 11:53
    
    поменял, ничего не изменилось.
    
    1
#10 написал: Евгений
Группа: Гости
1 июня 2016 09:54

Здравствуйте, подскажите, возможно ли как-нибудь реализовать изменение размера шрифта полозком от минимально возможно до максимально возможного. Очень нравится данный скрипт но прокуратура требует такую реализацию(
0
#11 написал: Сергей
Группа: Гости
3 июля 2016 08:31

Спасибо за скрипт все классно, но на самом большем шрифте слова не полностью видны. В чем может быть проблема? сайт http://shurawka.org
0
1. #12 написал: TCSE
  Группа: Администраторы
  11 августа 2016 11:55
  
  Нет ничего странного.
  шаблон который вы используете на сайте имеет фиксированную ширину, и в боковой панели ширина элементов тоже задана фиксированная.
  Размер шрифтов просто не влезает в блоки. отсюда и косяки.
  
  Решение:
  использовать другой шаблон, без фиксированных размер, лучше всего на основе адаптивных фреймворков.
  
  0
#13 написал: metodist
Группа: Гости
1 сентября 2016 10:01

Здравствуйте, я не сильный специалист, все методом тыка. Вы мне очень помогли, я воспользовалась Вашими рекомендациями. Но в письме Министерства образования предъявлены требования: надпись должна быть не меньше 24 кегля и контрастного цвета (черный на белом). Как можно это сделать?
0
1. #14 написал: TCSE
  Группа: Администраторы
  1 сентября 2016 19:56
  
  в файле JS
  js/uhpv-full.min.js
  указаны минимальный и максимальный размер шрифтов:
  fonts = ['19','21','23& #39;];
  
  вот в этом куске кода:
  
  // версия для слабовидящих var uhe = 2, lng = 'ru', has = 0, imgs = 1, bg = 1, hwidth = 0, bgs = ['1','2'], fonts = ['19','21','23& amp; #39;]; $(document).ready(function(){uhpv( has)});
  
  поменяйте значения на
  fonts = ['24','26','28& #39;];
  
  это будет означать минимальный размер шрифта 24, максимальный 26
  а что касается цвета подложки страницы:
  
  в том-же файле за это отвечает параметр:
  
  bg = 1,
  
  поменяйте цифру 1 на 2
  
  0
#15 написал: Михаил
Группа: Гости
1 сентября 2016 19:45

Здравствуйте, в 9.0 версии создал папку js в папке шаблона, залил туда ваш ява скрипт, в main тоже код вставил. но когда вставляю вашу ссылку. то она не показывается просто.
0
1. #16 написал: TCSE
  Группа: Администраторы
  1 сентября 2016 20:00
  
  о какой ссылке идет речь?
  
  0
  1. #17 написал: Михаил
    Группа: Гости
    2 сентября 2016 08:21
    
    Вот этот код который в одну строчку идет для слабовидящих вставляю в то место на странице где я хочу увидеть чтоб там была возможность переключить на версию для слабовидящих. но этот код не появляется на странице. нету у меня этой ссылки.
    
    0
#18 написал: Людмила
Группа: Гости
11 мая 2018 15:50

DLE 12.1 Не работает Ваш скрипт
0
1. #19 написал: ТехСпециалист
  Группа: Гости
  11 мая 2018 16:24
  
  для начала, скрипт не наш, Автор оригинальной версии для uCoz Рома Келлер ( https://uscript.pro/shop/83/item/versija-dlja-slabovidjashhikh )
  
  адаптацией под DLE 12.1 и выше никто не занимался и не будет. Так как подобные решения в целом скорее вредны сайту.
  Штатные средства веб-браузеров прекрасно справляются самостоятельно с адаптацией текста на страницах.
  
  0