Как сделать версию для слабовидящих?

Maximus23 03.09.2015 Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS) 5843

вопрос

Здравствуйте!
Есть ли у кого-нибудь наработки по реализации версии сайте для слабовидящих в соответствии с ГОСТ http://qoo.by/4R0 на примере сайта генпрокуратуры http://genproc...ecial/
Если никто не делал, то кто может взяться за реализацию для школьного сайта, а то прокуратура грозится проверками.

Ответил: slabovid22

Здесь отличный модуль, которые легок в установке. Посмотреть можно по ссылке https://slabovid.ru/install/

5 комментариев

Юзер

301

Kolya groza morey - 2015-08-263 сентября 2015 23:53 - #48157

Что за бред??? В каждом браузере есть возможность увеличить масштаб. Так что требование бредовые. Это можно сделать на джава скрипте, но зачем??

Юзер

Maximus23 - 2015-08-264 сентября 2015 00:28 - #48158

Уважаемый Kolya groza morey!
Вы видимо далеки от работы с госструктурами и надзорными органами и мы можем с Вами долго дискутировать о бреде и возможностях браузеров, но факт и нормы действующего законодательства требуют такую опцию на сайт, это даже не опция а структура сайта по умолчанию и разработан спец ГОСТ. Поэтому вопрос всё тот же как реализовать?

Юзер

191

Westus - 2015-08-265 сентября 2015 00:03 - #48230

Этот сайт использует 2 шаблона. К второму шаблону нужно подключить скрипт:

$(document).ready(function() {
    
        $(".cl01").click(function(){
            $(this).addClass('current').siblings().removeClass('current');
            $('body').addClass('color01');
            $('body').addClass('color01');
            $('body').removeClass('color02');
            $('body').removeClass('color03');
            return false;
        });

        $(".cl02").click(function(){
            $(this).addClass('current').siblings().removeClass('current');
            $('body').addClass('color02');
            $('body').removeClass('color01');
            $('body').removeClass('color03');
            return false;
        });
                
        $(".cl03").click(function(){
            $(this).addClass('current').siblings().removeClass('current');
            $('body').addClass('color03');
            $('body').removeClass('color01');
            $('body').removeClass('color02');
            return false;
        });
        
/*        $('ul.tabs').delegate('li:not(.current)', 'click', function() {
        $(this).addClass('current').siblings().removeClass('current')
            .parents('.content').find('div.bbox').hide().eq($(this).index()).fadeIn(150);
            return false;
        });*/
        
         // Сбрасываем размер шрифта
        var originalFontSize = $('body').css('font-size');
        $(".resetFont").click(function(){
            $('body').css('font-size', originalFontSize);
            $(this).addClass('current').siblings().removeClass('current');    
        });

        // Увеличиваем размер шрифта
        $(".increaseFont").click(function(){
        var currentFontSize = $('body').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = ((currentFontSizeNum > '1.375em') ? (currentFontSizeNum*1.1) :'1.375em');
        $('body').css('font-size', newFontSize);
        $(this).addClass('current').siblings().removeClass('current');
        return false;
        });
        // Уменьшаем размер шрифта
        $(".decreaseFont").click(function(){
        var currentFontSize = $('body').css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 10);
        var newFontSize = ((currentFontSizeNum < '0.875em') ? (currentFontSizeNum*0.9) :'0.875em');
         $(this).addClass('current').siblings().removeClass('current');
        $('body').css('font-size', newFontSize);
        return false;
        });
 


});

В шаблон добавить:

<div class="top-box clearfix">
    <div class="tools">
        <div class="original-site"><a href="/">Обычная версия сайта</a></div>
        
        <div class="size-box clearfix">
            <span>Размер шрифта:</span>
            <a class="decreaseFont" href="#">A</a>
            <a class="resetFont current" href="#">A</a> 
            <a class="increaseFont" href="#">A</a>
        </div>
        
        <div class="color-box">
            <span>Цветовая схема:</span>
            <a class="cl01" href="#"><img src="/bitrix_personal/templates/special/images/a1.png" width="20" height="20" alt="#"></a>
            <a class="cl02" href="#"><img src="/bitrix_personal/templates/special/images/a2.png" width="20" height="20" alt="#"></a>
            <a class="cl03" href="#"><img src="/bitrix_personal/templates/special/images/a3.png" width="20" height="20" alt="#"></a>
        </div>
    </div>
</div>

Ну и сделать стиль под себя.

Юзер

Maximus23 - 2015-08-268 сентября 2015 06:20 - #48328

Благодарю, Westus!
Буду пробовать

Юзер

regsat2010 - 2015-08-266 декабря 2018 13:01 - #70211

На сайте http://kbsohco.ru есть шаблон для слабовидящих.
Буду менять на новый, версии 2018 г.

Jigurda | Как в description вставить значение доп. ... ²

Jigurda
Как в description вставить значение доп.поля?
Сегодня, 10:54

Немного не то. Нужно не заменить, а добавить к уже имеющемуся description свой текст с доп.полями
lutskboy | Как в description вставить значение доп. ... ²

lutskboy
Как в description вставить значение доп.поля?
Вчера, 21:51

https://sandev.pro/web/159-fullstory-metatags-by-sander.html

derebas | Как реализовать кнопку "Поделиться" как ... ¹

derebas
Как реализовать кнопку "Поделиться" как на Плей Маркете?
Вчера, 09:39

Ну если на скорую руку то примерно так

<style>
.sociallinks {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.sociallinks-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-container {
    display: flex;
    align-items: center;
}
.social-container > div {
    margin-left: 10px;
}

h2, p {
    margin: 5px 0;
}
.social {
  padding-top: 20px;
}
.social img {
  margin: 10px;
}
.sharebtn {
  padding-top: 20px;
  width: 100%;
}
.sharebtn_area {
  border: 1px solid black;
  height: 40px;
}
.sharebtn input[type="text"] {
  width: 70%;
  border: none;
  height: 95%;
}
.sharebtn button {
  width: 25%;
  height: 95%;
  border: none;
  background-color: #fff;
}
</style>
<button id="opensociallinksBtn">Поделиться</button>

<div id="mysociallinks" class="sociallinks">
  <div class="sociallinks-content">
    <span class="close">×</span>
    <div class="social-container">
        <img src="{image-1}" alt="Icon" width="30" height="30">
        <div>
            <h2>{title}</h2> 
            <p>Поделиться</p> 
        </div>
    </div>
    <div class="social">
        <a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a>
        <a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a>
        <a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a>
        <a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a>
    </div>
    <div class="sharebtn">
      <div class="sharebtn_area">
        <input type="text" id="inputText" value="{full-link}" readonly="true">
        <button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button>
      </div>
    </div>
  </div>
</div>

<script>
var sociallinks = document.getElementById("mysociallinks");
var opensociallinksBtn = document.getElementById("opensociallinksBtn");
var closeBtn = document.getElementsByClassName("close")[0];
var copyBtn = document.getElementById("copyBtn");
var inputText = document.getElementById("inputText");

opensociallinksBtn.onclick = function() {
  sociallinks.style.display = "block";
}

closeBtn.onclick = function() {
  sociallinks.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == sociallinks) {
    sociallinks.style.display = "none";
  }
}

copyBtn.onclick = function() {
  inputText.select();
  document.execCommand("copy");
}
</script>

doktorpull | GeoIP - показ информации в зависимости о ... ¹

doktorpull
GeoIP - показ информации в зависимости от страны посетителя сайта
17-04-2024, 21:53

Отличный модуль, хорошо работает. Рекомендую этого автора, так как заказывал у него несколько собственных разработок. Человек знает свое дело.
Gordi | Telegram Sender ¹²

Gordi
Telegram Sender
16-04-2024, 15:47

купил. Модуль классный! Автору большая признательность!
TeraMoune | Как вывести тайтл и дискрипшен по маске ... ¹

TeraMoune
Как вывести тайтл и дискрипшен по маске в категориях?
14-04-2024, 00:36

Ну например вот так: https://lazydev.pro/product/12-dle-seo.html
zawibis | Как настроить редирект на внешние сайты? ¹

zawibis
Как настроить редирект на внешние сайты?
13-04-2024, 14:53

Нашёлся ответ.
Нужно в настройках группы отключить параметр

Автоматическая замена ссылок [url] в тег [leech]
При включении данной опции все ссылки, которые пользователь публикует в теге [url], будут автоматически заменены на защищенные ссылки тега [leech]
TeraMoune | Как решить проблему с /xfsearch/значение ... ⁵

TeraMoune
Как решить проблему с /xfsearch/значение?
12-04-2024, 11:53

Это не прикол, просто dle позволяет искать новости как по значению так и с указанием конкретного поля для этого значения. И если у вас стоят метрики на сайте то достаточно любому человеку открыть ссылку и убрать в ней что-то, если сайт при новом url вернёт статус 200 то метрики захотят этот url запомнить.
komosa | Как решить проблему с /xfsearch/значение ... ⁵

komosa
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:34

А вот прикол то в том, что это коснулось только author
lutskboy | Как решить проблему с /xfsearch/значение ... ⁵

lutskboy
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:31

может быть не один только author. и другие поля. как знать куда перенаправлять