веб-приложений Skin с использованием Xkins
Добавьте возможности создания скинов в ваше веб-приложение
Гильермо Мейер
Мир Java |
Скин относится к внешнему виду пользовательского интерфейса; это придает веб-приложению другой внешний вид. Скин изменяет способ отображения пользовательского интерфейса, когда пользователь нажимает кнопку, но не меняет поведение пользовательского интерфейса. Таким образом, изменение скина приводит к изменению внешнего вида приложения, но для достижения этой модификации ваше веб-приложение должно знать, как использовать скин.
Зачем вообще нужно создавать скин для веб-приложения? Ну, есть несколько мотивов использования скинов, но уж точно они не всегда обязательны. В простом приложении создание скинов было бы излишним, но в некоторых ситуациях, как описано в списке ниже, необходимо иметь дело со скинами:
- Когда скин является системным требованием: Когда пользователь может выбрать свой собственный скин или даже создать свой собственный.
- Если вы хотите предоставить возможности скинов корпоративной инфраструктуре компонентов: если вы создаете разные решения для разных клиентов, вы можете повторно использовать все свои компоненты (taglib), если ваши компоненты имеют возможности скинов, просто изменив скин каждого клиента.
- Когда требуется другой скин в соответствии с бизнес-сценарием: например, в маркетплейсе или мультибанковском приложении разные сущности работают в одной системе, и вам нужно брендировать приложение в соответствии с корпоративным имиджем пользователя.
Создание скина для веб-приложения — непростая задача. Вы можете использовать каскадные таблицы стилей и изменить путь к изображению, но вы ограничены тем, что вы можете сделать с помощью CSS. Если у вас есть компонент, который выглядит совершенно по-разному в каждом скине, то есть если HTML в каждом скине отличается, CSS вам не поможет. Однако вы можете использовать CSS, если простое изменение стилей решит вашу проблему.
Хорошим подходом к созданию темы оформления является определение каждой части пользовательского интерфейса и обобщение этих частей для применения внешнего вида к каждой из них. Например, если в скине A у вас есть компонент фрейма, который представляет собой простую таблицу, а в скине B более сложная таблица с верхними и нижними колонтитулами, изображениями и даже звуками, другой HTML (подробнее Это мой ярлык Теперь, в Skin B, метка будет отображаться следующим образом: Как видите, эти две части пользовательского интерфейса полностью различаются в каждом скине. Xkins — это платформа, управляющая оболочками для вашего веб-приложения. В первые дни серверной части Java вы жестко кодировали HTML в сервлет. Затем появился JSP (JavaServer Pages), позволяющий размещать HTML-код вне Java-кода. В настоящее время у нас есть та же проблема с библиотеками тегов, в которых теги HTML жестко запрограммированы в коде Java. Используя Xkins, вы можете размещать HTML вне своего кода с помощью дополнительной и мощной функции: скинов. Для получения подробной информации о Xkins посетите домашнюю страницу Xkins. На рис. 1 показана роль Xkins в веб-приложении. Веб-приложение, использующее Xkins и Struts через библиотеки тегов, следует этому жизненному циклу запроса: Xkins решает вопросы управления темами, следуя этим основным принципам: Одним из важных преимуществ Xkins является то, что весь HTML находится в одном месте, и, если вам нужно его настроить, вы просто меняете шаблоны. Например, если ваши страницы слишком велики, определите, где происходит чрезмерное создание HTML, или решите, какие изображения можно удалить, а затем измените шаблоны, чтобы уменьшить размер страницы. Вы также можете иметь упрощенную оболочку для тех пользователей, которые обращаются к вашему веб-приложению с низкоскоростными соединениями, и более богатую оболочку пользовательского интерфейса для пользователей широкополосного доступа. Обратите внимание, что вы можете использовать Xkins вместе с CSS. На самом деле использование CSS рекомендуется для стилей и цветов шрифтов, потому что повторное использование классов CSS избавляет от необходимости каждый раз явно указывать начертание шрифта, тем самым сводя к минимуму размер страницы. Тема оформления может быть заключена в один файл (zip-файл) для упрощения развертывания в веб-приложении. Если вы определяете тип скина, сторонние скины могут быть добавлены в ваше веб-приложение, если они соответствуют объявленному вами типу скина. Вы можете использовать Xkins разными способами, но использование Xkins с библиотеками тегов предлагает наилучший подход в веб-приложении. Вы можете использовать эти теги для создания своих страниц или для украшения существующих тегов. Вот несколько советов по определению скина: Теперь мы пройдем этапы определения, проектирования, разработки и развертывания Xkins в простом веб-приложении, требующем управления интерфейсом. В нашем примере мы реализуем приложение, которое регистрирует подписчиков для двух книжных интернет-магазинов: Amazing и Barnie & Nibble. Приложение будет использоваться на обоих сайтах (через фрейм, портлет или любой другой формат, выбранный магазином), но оно должно иметь внешний вид, специфичный для каждого книжного магазина. Чтобы реализовать наше приложение, выполните следующие шаги: Прежде всего, мы получаем графический дизайн страницы, предоставленный каждым книжным магазином. Этим материалом могут быть прототипы страниц, и он должен содержать все возможные элементы страницы, которые появляются в приложении, для которого выполняется оформление (в нашем примере только одна страница) — см. рис. 2 и 3. Как мы видим, обе страницы имеют разные цвета, изображения и расположение полей. Кроме того, различаются необходимые информационные индикаторы, плюс кнопки Amazing имеют формат GIF, а кнопка Barnie & Nibble представляет собой HTML-кнопку со стилями. Теперь мы должны вырезать фрагменты этих страниц, чтобы обобщить некоторые шаблоны для использования в нашем приложении. Основной скин определяет рамку, поле, кнопку и т. д. Мы должны использовать этот скин и добавлять шаблоны, которые нужны нашему приложению (например, брендинг). Этот базовый скин также позволяет нам использовать теги Xkins Forms для создания наших страниц JSP. Давайте посмотрим список необходимых нам шаблонов: После того, как различные части нашего пользовательского интерфейса определены, мы создаем оба скина с помощью Xkins. Начнем с присвоения им имени в файле Теперь мы должны создать структуру каталогов в каталоге ROOT нашего веб-приложения в соответствии с определенным файлом конфигурации, показанным на рисунке 4. Давайте посмотрим на синтаксис определения скина, содержащийся в файле Все вышеперечисленные шаблоны являются шаблонами Velocity. Связанный: Страница 1 из 2 Как выбрать платформу разработки с низким кодом Насколько большую часть вашей повседневной жизни занимает использование Интернета? Подумай хорошенько – Как ты делал рождественские покупки? Ваше банковское дело? Как вы находите рецепты, чтобы приготовить на ужин? Как вы поддерживаете связь с семьей и друзьями? Лично я не смог бы работать без интернета. Для многих из нас Интернет стал неотъемлемым аспектом нашей повседневной жизни, однако многие люди не осознают, что опыт использования этого вездесущего ресурса не у всех одинаков. Если вы один из одного миллиарда людей в мире, имеющих ту или иную форму инвалидности, то подключение и простота использования в Интернете не всегда гарантируются. Виртуальная мастерская: начало работы с Google Analytics 4 На самом деле, отчет, в котором анализировался один миллион самых популярных веб-сайтов, показал, что только 1% этих веб-сайтов соответствуют наиболее широко используемым стандартам доступности. Откровенно говоря, как человеку, который борется с красно-зеленой цветовой слепотой, это действительно отстой, и с точки зрения бизнеса это также может быть юридической проблемой. С положительной стороны, несмотря на то, что предстоит еще многое сделать, мы начинаем замечать, что компании уделяют больше внимания доступности и обращают внимание на важность создания равных (или, как мы увидим в этом статья, включительно) опыт просмотра веб-страниц. 🔎 Связанная функция: доступность веб-сайта: угрожает ли вашей компании судебный иск о соответствии ADA? Многие компании не спешат внедрять тактику доступности веб-сайтов и инклюзивного дизайна на своих собственных веб-сайтах, потому что они ошибочно полагают, что это сложный и дорогой процесс. Я здесь, чтобы сказать вам, что это совсем не так. На самом деле, есть несколько действительно простых вещей, которые вы можете реализовать на своем веб-сайте, чтобы ускорить процесс. Ниже я расскажу вам об 11 способах сделать свой веб-сайт более доступным и использовать инклюзивный дизайн. Доступный дизайн и инклюзивный дизайн — две взаимосвязанные области; подобно тому, как люди говорят о UX и UI. Проще говоря, инклюзивный дизайн гарантирует, что ни одна группа не будет упущена из виду в ваших усилиях, а доступность является тактикой для достижения этой цели. Многие компании совершают ошибку, создавая веб-сайты и маркетинговые кампании, как если бы они были их собственными конечными пользователями. Однако это почти никогда не бывает. В 2021 году вам нужно заботиться о разнообразии, справедливости и инклюзивности. Это означает расширение ваших сообщений, средств массовой информации и дизайна для учета растущей аудитории, состоящей из разных слоев общества, включая возрастные группы, образование, сексуальную ориентацию, пол, социально-экономические классы и религии, среди прочего. Pinterest — вдохновляющий пример компании, которая делает большие успехи в укреплении разнообразия и инклюзивности. За последний год они внедрили ряд новых функций, таких как фильтры тона кожи, чтобы усилить голоса недостаточно представленных сообществ, и приложили сознательные усилия для диверсификации своей руководящей команды. Теперь я понимаю, что это может быть для вас новым, и вы можете не знать, с чего начать, и это нормально. Чтобы помочь вам начать работу, собственный управляющий редактор IMPACT Рамона Сухрадж недавно написала статью под названием «5 быстрых изменений, которые помогут запустить инклюзивный маркетинг в 2021 году». Я настоятельно рекомендую ознакомиться с полной статьей, но некоторые из основных выводов включают в себя: Реализация этих выводов на вашем сайте поможет вам создать более инклюзивную среду. Исходя из этого, давайте углубимся в некоторые подробности о том, как вы можете начать работу с инклюзивным дизайном. Контент вашего веб-сайта — это самый важный актив на вашем веб-сайте. Ну да? Отличный контент — это то, что привлекает посетителей вашего веб-сайта, помогает им обучаться и в конечном итоге превращает их в потенциальных клиентов, готовых к продажам, но что, если ваши потенциальные клиенты не смогут прочитать ваш контент? Для 253 миллионов человек во всем мире, страдающих какой-либо формой инвалидности по зрению, это вполне реальный сценарий. Когда дело доходит до вашего контента, убедитесь, что вы структурируете его таким образом, чтобы его было легко читать пользователям с нарушениями зрения, языка и когнитивных функций. Одна из самых простых вещей, которые вы можете сделать, это убедиться, что вы разбиваете более длинные блоки контента на более мелкие разделы, разделенные заголовками и подзаголовками. Людям с нарушениями чтения или зрения может быть сложно удержаться на месте и следить за потоком текста, когда блоки контента слишком длинные. В дополнение к разделению вашего контента, W3C также предлагает следовать этим рекомендациям, когда дело доходит до структурирования вашего контента: Эти простые вещи могут иметь огромное значение для людей с нарушениями зрения или чтения. Помимо того, что вы обращаете внимание на то, как вы структурируете свой контент на внешнем интерфейсе, вам также необходимо убедиться, что вы используете правильную разметку HTML для структурирования своего контента на бэкенде. Ваш сайт. 🔎 Связано: что такое разметка схемы и как ее добавить для повышения SEO Это означает использование элементов HTML, таких как тег Не менее важно использовать теги заголовков (h2, h3, h4 и т. д.) по всему контенту. Теги заголовков не только создают визуальную иерархию в интерфейсе вашего веб-сайта, облегчая пользователям с плохим зрением понимание порядка содержимого; но также придает структуру вашему коду в бэкэнде. Создание этой структуры и использование этих тегов имеют решающее значение, когда речь идет о доступности, потому что это то, что дает контекст для программ чтения с экрана, на которые многие слабовидящие или слепые пользователи полагаются при просмотре веб-страниц. БОНУС: Поисковые системы также используют эти теги заголовков при сканировании ваших веб-страниц, поэтому включение этих тегов может помочь улучшить ваш поисковый рейтинг. Доступность с помощью клавиатуры — важная часть общей картины доступности веб-сайта. Для людей с нарушениями опорно-двигательного аппарата или слабовидящих клавиатура может быть основным средством навигации по веб-сайту. Это означает, что если ваш веб-сайт не оптимизирован для навигации с помощью клавиатуры, это может сильно разочаровать этих пользователей. Представьте, что вы не можете легко нажать кнопку воспроизведения или заполнить форму, чтобы загрузить предложение. Основная цель навигации с помощью клавиатуры — дать пользователям возможность выбирать каждый интерактивный элемент на веб-странице с помощью клавиши табуляции. Клавиша табуляции — это то, как пользователи, использующие только клавиатуру, перемещаются по веб-сайту. Пример навигации по веб-странице с помощью клавиатуры Самый простой способ проверить это — просто посетить одну из ваших веб-страниц и попытаться перемещаться по странице с помощью клавиши табуляции. Наблюдайте и отмечайте, насколько легким или сложным является этот процесс. Убедитесь, что вы также проверили движение в обратном направлении, используя Shift + Tab и выбирая элементы с помощью клавиши ввода. Возможно, вы обнаружите, что ваш веб-сайт требует небольшой работы, прежде чем он станет полностью доступным для навигации с клавиатуры. Если это так, есть ряд доступных ресурсов, но я настоятельно рекомендую проверить эту статью, чтобы стать лучше. Вы когда-нибудь прокручивали страницу и замечали синие контуры, которые время от времени появляются вокруг ссылок или кнопок? Эти контуры известны как состояния фокусировки, и они являются невероятно полезным инструментом специальных возможностей для людей, которые используют клавиатуру для навигации по веб-сайтам. В приведенном выше примере из Википедии вы можете увидеть базовые состояния фокуса, которые встроены во все браузеры, однако визуально они не очень привлекательны. Вот почему некоторые веб-сайты фактически скрывают их, но что бы вы ни делали, не скрывать состояния фокуса на вашем сайте! Вместо этого используйте их как дизайнерскую возможность для улучшения вашего бренда. Приложив немного усилий, вы сможете разработать состояния фокусировки, которые будут хорошо сочетаться с вашим брендом, и создать более инклюзивный и удобный интерфейс. Примеры состояний фокуса | Источник / Верфь Как упоминалось выше, перемещайтесь по своему веб-сайту с помощью клавиши табуляции и убедитесь, что состояния фокуса вашего сайта хорошо видны на всех кнопках, ссылках и полях форм. Написание полезного и описательного альтернативного текста (также известного как альтернативный текст) для ваших изображений, вероятно, является одной из самых простых в реализации, но наиболее игнорируемых областей доступности. Ранее я упоминал, что средства чтения с экрана зависят от правильных тегов HTML, помогающих пользователям с нарушениями зрения понимать веб-сайт и перемещаться по нему. Точно так же программы чтения с экрана также полагаются на замещающий текст, чтобы правильно описать этим пользователям изображения на веб-сайте. Замещающий текст можно просто добавить к изображению с помощью атрибута И наоборот, могут также быть случаи, когда изображение просто декоративным или избыточным, и в этом случае вы можете добавить пустой атрибут В темные времена Интернета создание изображений, содержащих текст, было обычной практикой. Пример веб-сайта, созданного с использованием изображений в качестве текста. Синие кнопки вверху имеют текст, встроенный в саму кнопку; его нельзя выделить или прочитать отдельно от изображения. | Источник / Logrocket Дизайнеры и разработчики были ограничены отсутствием стандартов кодирования и возможностей браузера, поэтому им нужно было придумать несколько «творческих» обходных путей для создания визуально привлекательных макетов. К счастью, с тех пор веб-дизайн прошел долгий путь, и нам больше не нужно прибегать к подобным дизайнерским хитростям. Однако это не означает, что в Интернете полностью отсутствуют изображения такого типа. Многие компании до сих пор используют этот подход к графике, например картам, графикам и диаграммам, и это может вызвать несколько различных проблем, когда речь идет о специальных возможностях. Основной из них заключается в том, что программы чтения с экрана не могут точно прочитать текст, встроенный в изображение. Изображения также имеют тенденцию изменять размер в зависимости от того, находится ли пользователь на настольном компьютере, планшете или мобильном телефоне. Это означает, что по мере того, как окно браузера становится меньше, изображение с текстом также уменьшается. Это может чрезвычайно затруднить, если не сделать невозможным, чтение для любого пользователя, не говоря уже о пользователях с ослабленным зрением. Когда дело доходит до контента и изображений, всегда старайтесь сделать контент живым текстом и, как упоминалось выше, также убедитесь, что вы включили замещающий текст для изображения, описывающего его важность. Одно из самых эффективных мест, где вы можете начать свои усилия по обеспечению доступности, — это ваши формы. Для многих из нас наши средства к существованию в области маркетинга и продаж зависят от заполнения форм, поэтому крайне важно, чтобы любой мог легко заполнить их. Распространенная ошибка брендов на их веб-сайтах заключается в использовании текста-заполнителя в качестве меток. Обычно это делается для экономии места на экране, но за счет удобства использования. Текст-заполнитель — это текст светло-серого цвета с низкой контрастностью, который вы можете увидеть в некоторых формах и который исчезает после того, как вы начнете вводить текст в поле. Это может быть сложно для слабовидящих пользователей. Поскольку этот текст также исчезает при вводе информации, также может быть сложно вспомнить, для чего изначально предназначалось это поле. Кроме того, для тех пользователей, которые используют программы чтения с экрана, программа чтения с экрана обычно читает только элементы Помимо использования тегов Имейте в виду, что это не означает, что вам нужно загромождать формы ненужной информацией, просто убедитесь, что вы предоставляете важные подсказки, чтобы пользователи могли избежать любых догадок. Ясный и лаконичный контент — это доступный контент. Легко и просто. Если ваш контент будет четким, лаконичным и избегайте ненужного жаргона, он откроется для более широкой аудитории. Это поможет людям с когнитивными нарушениями, носителям языка или людям с ограниченными возможностями обучения легче читать и понимать ваш контент. Помимо того, что ваш контент должен быть четким и кратким, при написании также старайтесь учитывать следующие рекомендации: Цветовой контраст — это часть доступности веб-сайта, которую часто упускают из виду. Многие из нас могут смотреть на блок текста на фоне другого цвета и не задумываться, однако для 285 миллионов людей, живущих с нарушениями зрения, текст, недостаточно контрастирующий с фоном, может стать кошмаром. читать. Согласно W3C, идеальный коэффициент контрастности между текстом и его фоном должен составлять не менее 4,5:1. Эти коэффициенты контрастности становятся более щадящими по мере увеличения размера текста. Для контента размером не менее 18 или 14 пунктов полужирным шрифтом минимальный коэффициент контрастности снижается до 3:1, что дает больше вариантов цветов для дизайна. Глядя на все эти числа и соотношения, вы можете подумать: «Звучит как много математики. Как, черт возьми, я должен это понять?! Не бойтесь, потому что Интернет — прекрасное место, существует множество бесплатных инструментов, которые сделают за вас всю математику и предположения. Это сложно сказать, но это самый простой в использовании инструмент. Вы просто вводите шестнадцатеричный код цвета для своего текста и фона, и он сообщит вам, подходит ли цветовая комбинация. Используйте этот инструмент для проверки цветового контраста не только основного контента, но и таких элементов, как кнопки, поля форм и даже значки. Когда вы показываете важную информацию, такую как данные на графике или ошибку в поле формы, вы никогда не должны использовать цвет в качестве единственной визуальной подсказки. Людям со слабым зрением или дальтонизмом может быть трудно увидеть только различия в цвете. Лично меня ничто не сводит с ума больше, чем когда я смотрю на круговую диаграмму, в которой для различения данных используются только разные оттенки синего, и в итоге не понимаю, на что я смотрю. При показе людям любого типа данных используйте дополнительные элементы, такие как метки или шаблоны, наряду с цветом, чтобы данные было легче различать. Пример диаграммы с использованием цвета и текстуры для отображения данных | Источник / Университет штата Северная Каролина То же самое касается выбранных параметров в приложении или состояний ошибок в поле формы. Не полагайтесь только на цвет, чтобы показать эти элементы, вместо этого сочетайте их с чем-то более наглядным, например, со значком, сообщением об ошибке или даже с чем-то простым, например выделением текста жирным шрифтом. Spotify — отличный пример того, как легко можно сделать такие элементы, как выбранные параметры в приложении, более доступными. Источник / Мы дальтоники В приведенном выше примере показано изображение панели управления Spotify. Обратите внимание на значки перемешивания и повтора. При выборе любого из этих значков они становятся зелеными. Сам по себе зеленый цвет значка не подходит для пользователей с нарушениями зрения. Значки маленькие, а зеленый плохо контрастирует с черным. Чтобы решить эту проблему, Spotify просто добавил маленькую точку под значком, чтобы сигнализировать о выборе параметра. Вот такое простое, но эффективное решение. Точка не меняет внешний вид приложения и не смущает пользователей, не страдающих дальтонизмом, но значительно улучшает работу тех пользователей, которым она действительно нужна. Помните об этом, предоставляя своим пользователям аналогичную информацию. Такая тонкая деталь может иметь большое значение. Помню, как я учился в начальной школе и слышал, как дети на игровой площадке рассказывали об эпизоде из «Покемонов», от которого у детей случались судороги. В то время это больше походило на фольклор, но годы спустя я узнал, что в этой истории есть доля правды. Судя по всему, в эпизоде «Электрический солдат Поригон» была сцена драки с использованием быстро мигающих красных и синих огней, которая длилась около шести секунд. С тех пор фактическое количество припадков, вызванных этим эпизодом, подвергалось сомнению, но инцидент, теперь известный как «Pokémon Shock», является одной из основных причин, почему сегодня мы видим предупреждения о светочувствительных припадках в шоу и видеоиграх. которые содержат мигающие огни. Этот выпуск напоминает о том, насколько осторожными мы должны быть с анимацией и эффектами, которые мы размещаем на наших веб-сайтах и в нашем видеоконтенте. Эпилепсия — очень серьезное заболевание, которое может вызывать припадки, вызванные мигалками. Вот почему так важно убедиться, что мы следуем так называемому «Правилу трех мер». Правило гласит, что любая анимация или контент, который мигает более трех раз в секунду, небезопасны. Лучшее решение для этого — просто избегать любых мигающих анимаций на вашем веб-сайте, чтобы обеспечить его безопасность для всех. В дополнение к этим 11 тактикам, позволяющим сделать ваш веб-сайт более доступным, существует множество ценных инструментов и ресурсов, которые помогут вам на пути к доступности и инклюзивному дизайну. Компания W3C проделала потрясающую работу по составлению списка инструментов и ресурсов специальных возможностей. Вы можете просмотреть полный список ресурсов здесь, но вот некоторые из моих любимых, чтобы вы могли начать: Руководство W3C по обеспечению доступности веб-сайтов, о котором я упоминал в этой статье, является Библией рекомендаций по обеспечению доступности веб-сайтов. Я настоятельно рекомендую добавить этот сайт в закладки и регулярно возвращаться к нему, так как информация постоянно обновляется. Сайт содержит множество полезных советов, инструментов, информации о действующем законодательстве, судебных делах, презентациях и оценках, которые способствуют развитию доступного веб-сайта. WebAccessibility — это бесплатный инструмент, который любой может использовать для проверки доступности веб-сайта. Это отличный ресурс для начала вашего пути к доступности. Мы говорили об этом инструменте при обсуждении цветового контраста, но я должен повторить, насколько он действительно полезен. Постоянная проверка наличия достаточного контраста между фоном и элементами переднего плана гарантирует, что все пользователи смогут легко читать ваш контент и взаимодействовать с вашим веб-сайтом, что в конечном итоге обеспечит лучший пользовательский опыт. Я постоянно возвращаюсь к этому инструменту, и его простой, но подробный макет делает его очень простым в использовании. Если вы проведете исследование, вы найдете массу различных ресурсов, в которых обсуждаются преимущества создания доступного веб-сайта и DEI в целом. Многие из этих преимуществ связаны с созданием веского экономического обоснования доступности. Вы прочтете о таких преимуществах, как: и tages) должны генерироваться для каждого кадра скина. В качестве примера предположим, что в Skin A HTML-код, который должен быть сгенерирован для отображения метки, имеет вид:
Это моя этикетка
Они оба имеют одинаковую информацию ( Это моя метка ), но отображаются с другими тегами HTML. Эта функциональность не может быть достигнута только с помощью CSS. Возможно, использование Extensible Stylesheet Language Transformations или XSL может быть вариантом. Или вы можете использовать Xkins. Что такое Xkins?
XkinProcessor . XkinProcessor получает скин пользователя и шаблон, который taglib командует отобразить. XkinProcessor использует TemplateProcessor , связанный с шаблоном. TemplateProcessor — это класс, отвечающий за визуализацию части пользовательского интерфейса, которая составляет скин. TemplateProcessor может использовать Velocity, JBYTE (Java By Template Engine), Groovy или другой механизм шаблонов для рендеринга вывода. TemplateProcessor использует ресурсы скина (элементы и пути) и возвращает результат обработки шаблона в taglib.
Если вам нужно, например, генерировать изображения, вы можете реализовать обработчик шаблонов, который берет шаблон и генерирует изображение. Xkins поставляется с обработчиками шаблонов на основе Velocity и JBYTE. Например, если вы предпочитаете Groovy, вы можете создать обработчик шаблонов Groovy для визуализации элементов пользовательского интерфейса.
С помощью этой функции пользователи могут создавать свои собственные персонализированные скины из вашего приложения, выбирая различные части пользовательского интерфейса из существующих скинов.
Определение скина
Пример
7 каждый скин
Определить шаблоны скинов
Мы могли бы начать с нуля, или мы могли бы основывать наше HTML-расчленение на базовой оболочке, используемой для создания форм. Этот базовый скин поставляется с фреймворком Xkins в тегах Xkins Forms. Xkins Forms — это реализация библиотеки тегов, которая использует Xkins для создания форм для веб-приложений. кадр : Таблица, содержащая всю форму frameMandatoryCaption : Текст с указанием обязательных полей FieldLabel : кусок текста, содержащий метку FieldLabelmandatory : кусок текста, указывающий на обязательную метку FieldInput : контрольные вход FieldPut.: управление входом
ndput FieldPultMantmardationMardation : управление FieldPultmantmardationMardationMardatornative : контроль. : кнопка для выполнения действия брендинг : брендинг, соответствующий каждому книжному магазину создание скинов
Definition.xml файл скина Amazing:
base template:
$метка:
]]>
$метка:
]]>
$input
]]>
Обратите внимание, что параметры передаются шаблону, а переменные типа Можно использовать $colspan . Эти параметры передаются XkinsProcessor , который вызывается taglib. 11 способов сделать свой веб-сайт более доступным в 2021 году
Что такое инклюзивный дизайн?
11 способов сделать ваш веб-сайт более доступным и инклюзивным
1. Переосмыслите структуру своего контента
2. Используйте правильную разметку в своем контенте
3. Поддержка навигации с помощью клавиатуры
4. Разработка полезных состояний фокуса
Состояния фокуса подсвечивают, какой элемент на странице выбран в данный момент, и позволяют пользователю узнать, где именно он находится на странице.
W3C предлагает, чтобы все элементы в состоянии фокуса имели коэффициент контрастности не менее 3:1 по отношению к фоновому цвету, чтобы их было легче увидеть. 5. Напишите полезный альтернативный текст для ваших изображений
Это позволяет пользователям, которые зависят от замещающего текста для интерпретации изображения, понять, что именно представляет собой изображение и как оно связано с остальным содержимым и страницей 6. Избегайте создания изображений, содержащих текст
7. Используйте описательные метки с полями формы
8. Сделайте свой копирайтинг простым
9.
Проверьте цветовой контраст вашего веб-сайта
Мой любимый инструмент для этого — WebAIM Color Contrast Checker. 10. Не полагайтесь на цвет для отображения важной информации.
11. Избегайте мигания анимации пользовательского интерфейса
Сообщалось, что мигающие огни с этой сцены вызвали судороги у тысяч детей. Инструменты и ресурсы, помогающие обеспечить доступность и инклюзивный дизайн
Инструмент просканирует ваш веб-сайт и создаст отчет, показывающий ошибки, предупреждения и функции, которые работают хорошо. Все сводится к эмпатии
