оригинальная версия версия для слабовидящих контрастная версия выключить изображения включить изображения RSS FEED K2 NEWS
Понедельник, 08 Сентябрь 2014 04:00

Joomla 3, кнопка для слабовидящих

В соответствии с ГОСТ Р 52872-2007 Интернет-ресурсы. Требования доступности для инвалидов по зрению. У владельцев сайтов гос-учреждений появилась нужда в кнопке "для слабовидящих". Я ещё не делал сайтов для госслужащих, однако тоже оказался в такой ситуации, когда была поставлена задача создания такой версии.

Для тех, кому некогда разбираться самому, как это работает - готов помочь за символичную плату от 2500 руб. (да, моё время тоже стоит денег, 100% предоплата - сроки от 5 рабочих дней, в зависимости от сложности работы, за дополнительную плату сроки сокращаются) возможны варианты настройки и не только CMS Joomla, обращайтесь, там разберёмся. Желающим, обращаться на e-mail: Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра.. Также хочу сразу обратить внимание на то, что делаю версию по образцу, как сделано у нас на сайте.

И вот я, как порядочный халявщик полез искать в сеть интернет какой-либо модуль, плагин, а может даже и компонент, которые бы соответствовали требуемым параметрам. Меня интересует что-либо для Joomla 3, сказать, что «я ничего не нашёл», это будет далековато от истины. На момент писания этой заметки, было найдено 7 приложений (модулей/плагинов) из них бесплатный всего один. Больше всего расстроило, когда попал на сайт какой-то «общины», чья позиция «ребята платите нам бабло, будем для Вас модули выкупать и с Вами, как участникам нашей общины делиться». И столько радужных отзывов у этой самой складчины. Правда с реальным лицом, а не крашенной аватаркой всего один человек, но кого это волнует, правда ведь?

Итак эта самая складчина просила минимальный взнос 40$ (это на полгода) в переводе на рубли это около 1200(на самом деле больше, я беру по самым скромным меркам). Далее я перехожу на сайты «производителей» тех самых модулей, вновь расценки «радуют глаз», там цены от 30 евро. На самом деле надо признать, если проект складчина действительно делает, что обещает, то они действительно помогают сэкономить, но здесь возникает другой вопрос:

А действительно ли Вам нужен этот модуль/плагин?

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

– Какой-нибудь из плагинов, что я нашёл, делает это?

– Нет. Они только увеличивают/уменьшают размер текста у некоторых элементов и всё.

Я уж было собирался отчаяться. Выпить цианистый калий, назвать весь мир продажными про… прости Господи. Как вдруг меня осенило. Всё то, что требуется изменить, прописано в таблицах стилей CSS, и единственное, что мне нужно, это написать кнопку, которая будет заменять одну таблицу на другую.

И здесь мне на помощь пришёл JavaScript. Однако сначала мы всё же вернёмся к вопросу стилей.

В папке шаблонов Templates, найдите Ваш шаблон и подключённый к нему файл стилей css, и в строку подключённого шаблона добавьте ID.

Пример:

<link id="st" rel="stylesheet" href="/Путь к CSS Вашего шаблона-оригинальный" type="text/css">

Далее создаётся аналоговый CSS, с версией для слабовидящих. Без использования рисунков и т.д.

И где-нибудь создаётся блок:

<span onclick="look();">Версия для слабовидящих</span>

Теперь осталось добавить JavaScript-код, который будет указывать функции look(), переход на другую версию стилей:

Здесь два варианта, либо прописывать в интегрируемый файл *.js, либо прописать прямо в коде шаблона:

<script>
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
}
</script>

В интегрируемый файл *.js код пишем так:

function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
}

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

Не будем изобретать велосипед, а прибегнем к уже известным технологиям. Я говорю о COOKIE.

Но прежде чем мы начнём, добавьте в файл шаблона этот скрипт:

скрипт cookie.js

Для чего это нужно, до этого я написал код на JavaScript, теперь мы переходим к серверному языку PHP и язык JavaScript, без специального плагина не способен передать переменные в глобальный массив $_COOKIE.

Открываем файл, где подключается CSS, и изменяем значение с:

<link id="st" rel="stylesheet" href="/Путь к CSS Вашего шаблона-оригинальный" type="text/css">

на:

<link id="st" rel="stylesheet" href="/<?php if(isset($_COOKIE["look"])){print($_COOKIE["look"]);}else{print("Путь к CSS Вашего шаблона-оригинальный");} ?>" type="text/css">

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

Соответственно,

<script>
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
}
</script>

Изменяется на:

<script>
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
$.cookie("look","Путь к CSS Вашего шаблона-аналоговый", {expires: 3600});
}
</script>

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

<script>
function look(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-аналоговый";
$.cookie("look","Путь к CSS Вашего шаблона-аналоговый", {expires: 3600});
}

function look2(){
document.getElementById("st").href="Путь к CSS Вашего шаблона-оригинальный";
$.cookie("look","Путь к CSS Вашего шаблона-оригинальный", {expires: 3600});
}
</script>

Пожалуйста не забудьте, что в *.js файле теги <script> и </script> не пишутся.

А так же соответствующий span:

<span onclick="look2();">Оригинальная версия</span>

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

Спонсоры: