Категории

Joomla шаблоны версия для слабовидящих

Как сделать режим для слабовидящих в Joomla 2.5 - 3.x

Версия для слабовидящих Joomla — обзор шаблона и плагина

0.2.1:
Добавлена функция выбора вида отображаемых кнопок: текст или картинка;
Добавлена кнопка сброса параметров модуля;
Добавлена возможность выбора способа сохранения пользовательских параметров выбора: в куках или в сессиях;
Все параметры модуля пересмотрены и разложены в отдельные вкладки (табы) для сокращения путаницы и мешанины;
Добавлена возможность исключения элементов страниц сайта из обработки модулем;
Добавлена возможность изменения обработки изображений/слайдеров (тестируется);
Добавлены дополнительные проверки на наличие параметров с соответствующими уведомлениями;
Добавлены небольшие фиксы в работу модуля;
Частичная переработка дизайна модуля.

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

0.1.3:
Доработано некоторое оформление модуля.

0.1.2:
Исправлена проблема с предложением повторно отправить данные при попытке обновить страницу (если проблема продолжает наблюдаться, сообщите в комментариях более подробно о действиях для ее воспроизведения).

0.0.9:
Исправлены некоторые недочеты в принципе работы модуля.

0.0.8:
Добавлена возможность включения/отключения изображений.

0.0.5:
Добавлена возможность выбора вариаций цветовых схем;
Добавлена возможность выбора вариаций размера межбуквенного интервала (кернинг)
Добавлена возможность выбора вариаций размера межстрочного интервала
Добавлена возможность выбора вариаций типа гарнитуры (тип шрифта).

0.0.1:
Добавлена возможность выбора вариаций размера шрифта.

[свернуть]

Источник: http://blog-about.ru/extensions/modul-special-visually-dlya-joomla-3/

Версия для слабовидящих joomla

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

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

Почему важно адаптировать сайт Joomla для нужд слабовидящих

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

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

Каким должен быть Joomla сайт для слабовидящих

Как ни странно, но есть статистика, которая гласит, что примерно 75 % сайтов всех госструктур размещены на движке Joomla. Это связано с тем, что данная CMS-система позволяет изменять версии шаблона в онлайн-режиме. То есть для слабовидящих заготовлена специальная версия ресурса, которая соответствует требованиям ГОСТа.

Основные требования, которым должен соответствовать любой плагин, скрипт, модуль или шаблон, рассчитанный для слабовидящих — это максимальная читабельность текстовой информации, наличие контрастности, минимальное количество отвлекающих графических материалов. То есть сайт должен иметь большой шрифт, написанный буквально черным по белом (или наоборот), на нем должна отсутствовать какая-либо реклама, а если и есть картинки, то необходимо сделать скрипт для увеличения ее при надобности.
https://www.youtube.com/watch?v=S1XDKVX_QXo

Обзор версии шаблона Joomla сайта для слабовидящих

В сети есть не один уже готовый шаблон, который можно использовать в качестве версии сайта для слабовидящих. Один из таких — это JM University. В этой теме предусмотрен режим для незрячих, который по надобности можно отключать. Это один из шаблонов, который удобно использовать для государственных учреждений, в частности, для учебных — университетов, школ, кружков, курсов и т. д. JM University хорошо совмещается с Joomla 3. По надобности вы сможете самостоятельно настроить его оформление при помощи стилей CSS3.

Дизайн шаблона предполагает наличие логотипа сайта, заголовка на фоне картинки, а также слогана — то есть символики учебного заведения. Кроме того, данная тема позволяет прикреплять верхнюю шапку к верхушке браузера при прокрутке страницы вниз (как на Яндексе закрепляется поисковая строка). Шаблон очень удобно настраивается, так что вы сможете адаптировать его не только для слабовидящих, но и пользователей, которые сидят с телефонов или планшетов разных размеров. Вы сможете оптимизировать сайт при помощи данной темы — сжать CSS, HTML и Java Script. Кроме того, у шаблона есть масса полезных расширений.

Чтобы активировать шаблон сайта JM University в качестве версии для слабовидящих, необходимо перейти в «Основные настройки». Снизу вы найдете всего три опции, которые позволят создать подобие сайта для слабовидящих — то есть людям с плохим зрением на ресурсе будет комфортнее, но он не будет полностью соответствовать требованиям ГОСТа. А вот какие функции вам необходимо активировать:

  1. Ночной режим. После активации этой функции сайт начинает отображать специальный переключатель, который позволяет менять режим просмотра ресурса. После перехода в ночной режим сайт затемняется — так удобнее смотреть на экран.
  2. Высоко контрастный режим. Данная опция так же добавляет специальный переключатель на сайт. После его активации меняется не только цвет фона, но и текста — создается контрастное изображение. Например: черный фон и белый текст, либо желто-черное оформление (или наоборот).
  3. Переключатель ширины. С активацией этой функции вы поместите к себе на сайт еще один переключатель. Этот скрипт позволяет сделать ширину экрана фиксированной по заданным параметрам. То есть пользователь сам сможет определить необходимый параметр ширины. По сути, это работает как лупа.

Сами разработчики шаблона рекомендуют принять дополнительные меры для того, чтобы организовать правильный сайт для слабовидящих. В частности, старайтесь использовать поменьше картинок, а там где используете, пишите дополнительно их описание. Также рекомендуется добавлять аудио на сайт вместо длинных текстовых презентаций, которые утомят слабовидящих. Найдите плагин или несколько плагинов, которые позволят упростить управление сайтом. К примеру, расширения DJ-MediaTools и Screen Reader позволяют добавлять управление клавиатурой на сайт. Кроме того, пожертвуйте возможностями слайдинга — не используйте автопрокрутку, так как слабовидящим нужно больше времени на прочтение содержимого.
https://www.youtube.com/watch?v=ixduuC4fH3E

Comfortable Reading Premium — модуль для слабовидящих

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

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

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

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

Похожие статьи

admin

Источник: http://joomlalib.ru/osnovy-raboty/versiya-dlya-slabovidyashhih-joomla-obzor-shablona-i-plagina.html

Релиз Joomla 3.8.6

{REPLACEMENT-(h2>)-(h3>)}

Для тех, кому некогда разбираться самому, как это работает - готов помочь за символичную плату от 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>

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

Источник: http://green-willow.ru/item/37-knopka-slabovidyaschih
{/REPLACEMENT}
Интересное