Версия сайта для слабовидящих - как сделать для 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качиваний: 810)

    Процедура подключения скрипта для 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

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


    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

    пример:
    для нашего шаблона bs3-tcse скрипт версии для слабовидящих будет находится по адресу:
    www.site.ru/templates/bs3-tcse/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>


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


    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 с версией для слабовидящих


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


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


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


    3 декабря 2015  17 11 016   скрипты бесплатно Версия для печати

  • Похожие публикации

    Сайт для МБУК "Ханымейский историко-краеведческий музей"

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

    Хак MobTPL для DLE (TCSE_MobTPL) - бесплатно

    Обновления хака для DLE 10.3 Хак мобильной версии вместо стандартного шаблона smartphone подключает 3 дополнительных шаблона для мобильных устройств: tabletpc- Планшеты... читать далее

    Каскадные Таблицы Стилей / CSS 4: что новенького?

    Необходимо немедленно оговориться, что опубликованный 29-ого сентября документ носит название «Селекторы уровня 4» (Selectors Level 4). Является ли это черновой спецификацией CSS 4? Понять пока что... читать далее

    Мобильная версия сайта и оперативное получение новостей

    Предлагаем вашему вниманию статью опубликованную на сайте нашего клиента - проекте Ana-sm.ru Надеюсь, многие из посетителей сайта заметили новую ссылку внизу страницы, а именно «КПК-версия»; о том,... читать далее

    Магазин автомобильных акссесуаров

    Интернет-магазин дополнительного оборудования для автомобилей. данная версия TCSE CMS включает в себя модули для облегченной версии магазина и мобильную витрину в формате wap... читать далее

    Описание движка TCSE

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

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

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

      Прекрасно реализовано. А не подскажите как сделать, что панель изначально показывалась на сайте, а не по клику по надписи "Версия для слабовидящих"?
      • 1

         

      1. #2 написал: TCSE
        Группа: Администраторы
        29 февраля 2016 22:17

        для этого в настройках скрипта уже есть готовая опция:

        «has» - указывает на необходимость запускать версию для слабовидящих автоматически при входе на сайт
        0 - версия будет запускаться только если пользователь нажмёт на кнопку включения,
        1 - версия будет запускаться всегда, при входе на любую страницу сайта (кнопка "Выключить" будет отсутствовать)
        об этом написано в инструкции по установке модуля для uCoz
        • 0

           

    2. #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

           

    3. #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

           

    4. #7 написал: Валерий
      Группа: Гости
      12 мая 2016 13:57

      Все сделал, путь к скрипту прописал /rosinka91/js/uhpv-full.min.js ,скрипт туда загрузил,как написано, кнопка появилась , но при нажатии ничего не происходит http://www.rosinka-91.ru/, можете помочь, буду очень благодарен.
      • 0

         

      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

          поменял, ничего не изменилось.
          • 0

             

    5. #10 написал: Евгений
      Группа: Гости
      1 июня 2016 09:54

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

         

    6. #11 написал: Сергей
      Группа: Гости
      3 июля 2016 08:31

      Спасибо за скрипт все классно, но на самом большем шрифте слова не полностью видны. В чем может быть проблема? сайт http://shurawka.org
      • 0

         

      1. #12 написал: TCSE
        Группа: Администраторы
        11 августа 2016 11:55

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

        Решение:
        использовать другой шаблон, без фиксированных размер, лучше всего на основе адаптивных фреймворков.
        • 0

           

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

           

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

             

    Прокомментировать


    @

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

    Архив сайта

    Реклама на сайте http://www.m-energy.ru/catalog/mashiny_zatirochnye_zaglazhivayucshie/ . . купить магнитно маркерную доску