Векторная графика для начинающих: теория и практика технического дизайна — страница 22 из 31

target="_blank "title="Download image in SVG">SVG

Атрибут target="_blank" задает директиву открытия содержания (по адресу ссылки) в новой вкладке веб-браузера.

3. Функция dark mode меняет цветопередачи блоков в визуализации веб-интерфейса по событию (по клику на кнопку Show in dark mode – меняет наименование кнопки на Show in light mode).

Состояние А

До нажатия на кнопку Show in dark mode

Состояние B

После нажатия на кнопку Show in dark mode

Рисунок 16.6 – Состояния до и после нажатия на кнопку Show in dark mode

Для обработки события по клику на кнопку Show in dark mode используются:

• библиотека JQuery актуальной версии с подключением в блоке (после стилей CSS):

…
</code></pre><pre><code>

;

• скрипт JavaScript (после кнопки в HTML-документе);

• код стилей CSS (вставить в конце файла ui.css).

Код кнопки и скрипта в HTML

Show in dark-mode
</code></pre></p><p><pre><code>   jQuery('.darkMode').click(function() {</code></pre></p><p><pre><code>      jQuery('body').toggleClass('darkUI');</code></pre></p><p><pre><code>      jQuery('#search').toggleClass('darkUI');</code></pre></p><p><pre><code>      jQuery('.searchResults').toggleClass('darkUI');</code></pre></p><p><pre><code>      jQuery('.darkMode').toggleClass('lightUI');</code></pre></p><p><pre><code>   });</code></pre></p><p><pre><code>

Код CSS для оформления dark mode

body.darkUI {
    background: #333;
}
ul.searchResults.darkUI li {
    background-color: rgba(255,255,255,0.1);
}
ul.searchResults.darkUI li img.previewImg {
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.15);
}
button.darkMode.lightUI {
    width: 153px;
    background: rgba(164,164,164,0.6);
    background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(43,43,43,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
   startColorstr='#4c4c4c', endColorstr='#2b2b2b',GradientType=0 );
    background: -moz-linear-gradient(top, rgba(234,234,234,1)
    0%,rgba(204,204,204,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(
   startColorstr='#eaeaea', endColorstr='#cccccc',GradientType=0 );
    border: 1px solid rgba(164,164,164,0.6);
    color: #fff;
    text-shadow: none;
    font-size: 0;
}
button.darkMode.lightUI:before {
    display: block;
    content: "Show in light mode";
    font-size: 14px;
    color: #fff;
}
button.darkMode.lightUI:hover, button.darkMode.lightUI:target {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

Интерпретация кода HTML, JavaScript и CSS для реализации функции Show in dark mode / Show in light mode

По клику на заданные кнопки с классом стилей .darkMode библиотека jQuery обрабатывает событие .click (function() {…}; путем добавления классов .darkUI для тега , формы поиска с id="search", списка результатов поиска с классом .searchResults, для кнопки "Show…" добавляется класс .lightUI, меняющий их визуальное оформление на темную тему.

Вопросы студентам

Вопрос № 1

Эмпирически вычислим общий размер 20 файлов в формате PNG: 361 Кб.

Копии в формате SVG: 161 Кб.

Почему исходные файлы в SVG по размеру занимают меньше физического места на диске по сравнению с PNG?

Вопрос № 2

Зачем нужна раздельная структура хранения графических файлов интерфейса, каталога по заданным форматам?

Вопрос № 3

Как вывести водяные знаки изображения в результатах поиска?

Приведите несколько вариантов решения задачи.

Вопрос № 4

Зачем используется darkmode для визуализации списка изображений?

Вопрос № 5

Почему для веб-интерфейса используется преимущественно графика в формате SVG?

Результат: предоставить преподавателю архив с папкой выполненного практикума, содержащей HTML-документ index.html и сопутствующую структуру проекта в привязке к заданной на рис. 16.2.

Оценка качества исполнения практикума

• Допустимое время на выполнение задания практикума составляет 1,5 ч.

• Результат в реализации кода должен соответствовать примеру на рис. 16.6.

• Каждый студент по результату практикума должен уметь точно ответить минимум на 3 вопроса из 5 заданных.

Ответы на вопросы студентам

Вопрос № 1

Эмпирически вычислим общий размер 20 файлов в формате PNG: 361 Кб.

Исходные векторные изображения в формате SVG: 161 Кб.

Почему исходные файлы в SVG по размеру занимают меньше физического места на диске по сравнению с PNG?

Ответ: в формате SVG моделирование слоев композиции изображения выполняется по узловым точкам. Это позволяет экономичнее и качественнее воспроизводить изображения без потерь в качестве. При этом в формате PNG без сжатия по умолчанию использована избыточная палитра PNG 24 bit, что занимает дополнительную (необязательную) часть кода в файлах PNG, т. к. изображения описаны минимальным количеством цветов, что можно оптимизировать до PNG 8 bit без визуальных потерь качества.

Вопрос № 2

Зачем нужна раздельная структура хранения графических файлов интерфейса, каталога по заданным форматам?

Ответ: это позволяет оперативно вычислять общий размер файлов интерфейса, каталога и т. д. Проводить процедуру оптимизации раздельно, не нарушая полной работы веб-интерфейса.

Вопрос № 3

Как вывести водяные знаки изображения в результатах поиска?

Приведите несколько вариантов решения задачи.

Ответ: есть несколько способов решения задачи.

1. Средствами PHP, специальной библиотекой для водяных знаков. Это серверное решение (не рассматривается в рамках курса технического дизайна).

2. С помощью специальных редакторов или универсально с помощью Adobe PhotoShop нанесением поверх исходных файлов PNG полупрозрачного слоя с водяным знаком.

3. С помощью дополнительного слоя, выводимого сверху на изображения средствами стилей CSS (с заданной глубиной воспроизведения, где исходное изображение по глубине ниже, например z-index: 0, чем водяной знак, например z-index: 1).

Состояние A

До нанесения водяных знаков.

Состояние B

После нанесения водяных знаков.

Рисунок 16.7 – Состояния до и после нанесения полупрозрачных диагональных водяных знаков на исходное растровое изображение в формате PNG