Перевод. перевод. 1 4 Структура документов html и css структура html
 Скачать 87.61 Kb.
|
|
В вопросах использования графики существуют свои особенности: ·из двух совершенно одинаковых рисунков больше запоминается тот, который имеет бо?льшие геометрические размеры; ·черно-белая веб-графика запоминается меньше, чем полноцветная; ·из двух совершенно одинаковых рисунков больше запоминается более яркий; ·из двух совершенно одинаковых рисунков больше запоминается более контрастный; ·примитивная графика, иллюстрирующая процессы, схемы и пр. понимается и запоминается быстрее и проще, чем сложная графика, иллюстрирующая те же самые процессы и схемы; ·графика с простейшими геометрическими формами (овал, квадрат, прямоугольник) воспринимается легче, чем графика со сложными геометрическими формами [21]. 1.4.9 Форматы графических файлов Основными форматами графических файлов в веб-дизайне являются GIF, JPEG, PNG. GIF (англ. Graphics Interchange Format, формат для обмена изображениями) изначально предназначался для передачи растровых изображений по Сети, однако, в первой версии формата файл изображения получался слишком объемным, что на тот момент делало невозможным его передачу по Сети. Среди новых функциональных возможностей обновленного формата оказались: поддержка прозрачности и анимации, значительное сокращение объема файла изображения за счет поддержки LZW-компрессии. Формат GIF считается стандартным для анимированных изображений.(англ. Joint Photographic Experts Group, объединенная группа экспертов фотографии) применяется для хранения многоцветных фотографических изображений, т.к. обеспечивает сжатие полноцветного изображения практически без уменьшения количества цветов. Процесс сжатия происходит за счет уменьшения числа пикселей, содержащих информацию. PNG (англ. Portable Network Graphics, переносимая сетевая графика) является растровым форматом хранения графической информации без потери качества во время сжатия. Задумывался данный формат как замена GIF. Отсюда и схожие возможности, вроде наличия прозрачного фона. Однако, PNG имеет большой, по сравнению с GIF, объем файла с изображением, а также не поддерживает анимацию. Тем не менее, формат PNG отлично подходит для хранения и редактирования изображений на промежуточной стадии их создания [8]. Выводы по главе Внедрение Интернета в российский бизнес предполагает прохождение Россией двух этапов: первый - огромная часть населения должна получить доступ к Интернету; второй - люди должны начать совершать покупки и тратить деньги через Интернет. Тем не менее, интернет-магазины, а также другие виды проявления электронной коммерции должны занять свое место в XXI веке. Эта технология придет на смену многим современным видам коммерции. В моей дипломной работе были рассмотрены актуальные вопросы разработки концепции и дизайна современного веб-магазина. При этом мною были решены следующие задачи: ·ознакомление с современными интернет-технологиями, а также их практическое использование; ·изучение программного инструментария, применяемого в целях разработки и создания веб-сайтов; ·выявление и учет различных методов и способов представления на веб-страницах разнообразных видов информации; ·ознакомление с основными правилами и рекомендациями по разработке дизайна веб-магазинов и неукоснительное следование им на практике; ·определение макета веб-магазина; ·выбор стратегии разработки и создания веб-магазина. Глава 2. Проектно-конструкторская часть 2.1 Технические характеристики При разработке макета сайта всегда необходимо учитывать аппаратные возможности и особенности воспроизведения на экранах мониторов. Следует учитывать и то, что современный рынок оборудования довольно широк и разнообразие моделей выпускаемых мониторов подразумевает собой и разнообразие возможностей представления информации на них. В соответствии с этим, в первую очередь, при создании макета дизайна сайта необходимо учитывать использование различного разрешения экрана пользователями. В настоящее время принято брать за основу монитор размером 1024x768 пикселей. Именно поэтому, размер холста, на котором создается дизайн сайта, по ширине не должен превышать 1000 пикселей (20 пикселей отнимают с учетом полосы прокрутки в браузере). Но бывают и мониторы 800х600 пикселей. Они становятся редкостью, но если стараться учитывать все возможные разрешения, то размер макета по ширине, в таком случае, не должен превышать 780 пикселей. Еще одной важной характеристикой монитора является возможность цветопередачи. Совокупность всех цветовых ощущений, которые может воспроизвести устройство, называют цветовым охватом этого устройства. Сегодня все мониторы соответствуют стандарту sRGB. Диапазон цветов sRGB весьма мал по сравнению с видимым глазом диапазоном, а потому многие цвета на этапе получения изображения оказываются за его пределами. Тональность изображения на мониторе определяется цветовой температурой. Чем ниже температура, тем теплее цвета. Необходимость в цветовой температуре возникает потому, что нет универсального белого цвета, который глаз всегда бы воспринимал как белый. В зависимости от условий, глаз подстраивается под определенный цветовой диапазон. Оттенок белого цвета на экране монитора будет слегка меняться в зависимости от внешнего освещения, под которое подстраивается и глаз. Рекомендуется устанавливать на экране монитора такую цветовую температуру, при которой белый цвет на экране не имеет каких-либо дополнительных оттенков [25]. Для того, чтобы свести к минимуму все возможные цветовые искажения, производят калибровку монитора. Виды калибровки мониторов: ·программная калибровка не требует колориметра и полагается лишь на человеческое зрение; ·аппаратно-программный метод (калибрация и характеризация монитора выполняется колориметром, остальное - видеокартой); ·аппаратная калибровка предполагает подключение колориметра к самому монитору. 2.2 Организация страницы и оформления 2.2.1 Понятие "юзабилити" Юзабилити (англ. <#"center">2.2.2 Композиция страницы Посетители, в большинстве случаев, приходят на сайт с определенной целью, и их интересует быстрый и удобный доступ к необходимой информации или товарам, поэтому важно организовать пространство так, чтобы учесть все особенности восприятия и потребности покупателей. Общая структура страницы должна отвечать некоторым ожиданиям посетителей. При продолжительном общении с интернет-пространством у пользователей складывается некий стереотип, представляющий собой определенную наработанную систему условных инстинктов. Это значит, что заходя на сайт, пользователь уже заранее предполагает, в какой части страницы будет находиться нужная ему информация или элемент меню. Первый принцип, который лежит в основе общей композиции страницы, - схема восприятия текстовой информации слева направо и сверху вниз. Таким образом, наиболее важные или требующие реагирования информация и элементы меню должны находиться в зоне первоначального внимания - в левой и левой верхней частях страницы (как правило, в левой части располагается навигационное меню, анонсы, новости). Наиболее содержательная информация обычно располагается в центральной части страницы. Менее важная, вспомогательная информация должна находиться в правой и в правой нижней частях страницы. Однотипные данные на разных страницах должны располагаться в одной и той же области [7]. Привлечение внимания пользователя, кроме пространственного расположения, осуществляется и другими способами: выделение размером (крупный объект привлекает больше внимания и воспринимается раньше мелких объектов), освещением (затемненные детали воспринимаются хуже ярких), цветом, шрифтом (оформление текста отличной от стандартной гарнитуры, начертания и жирности). При разработке композиции веб-страницы не стоит забывать и о белых полях. Поля нужны для того, чтобы визуально отделить блоки информации друг от друга, а также с целью возможности отдыха глаз пользователя, т.к. нагромождение информации затрудняет ее восприятие. Помимо полей к основным инструментам структурирования страниц веб-ресурса относятся также линии, блоки (цветные или нет), отступы, графические элементы. Графике в любом интернет-ресурсе отведена особенная роль: пиктографические иконки позволяют упростить ориентирование на сайте, художественные графические элементы укрепляют тематическую линию, создавая определенную ассоциацию, настроение или образ, кроме этого, наглядная информация выступает в качестве иллюстративного материала, дополняющего основную текстовую информацию. 2.2.3 Основные правила главной страницы Главная страница сайта интернет-магазина, в первую очередь, должна содержать логотип продающей компании, а также ссылки на основные разделы: "О компании" и "Каталог товаров и услуг". При дальнейшей разработке необходимо учитывать специфику аудитории данного корпоративного сайта. Посетителей, которые путешествуют по корпоративным просторам Интернета, можно условно разделить на три группы: ·новички - группа людей, попавших на веб-ресурс компании случайно (по ссылке из рейтинга поисковой системы) или в первый раз (набрав в строке браузера адрес, указанный на визитке или в рекламном сообщении). Основные требования к главной странице в этом случае - возможность мгновенного понимания, куда и к кому попал пользователь, не разыскивая эту информацию в глубинах сайта, т.к. обычно, целью такого посещения является изучение нескольких сайтов-конкурентов, чтобы найти наиболее подходящий. Поэтому правильный корпоративный сайт обязан содержать на главной странице краткую информацию о сфере деятельности компании, о производимых ею товарах и предоставляемых услугах; ·постоянные посетители. Этой категории пользователей вовсе не нужна краткая информация о сфере деятельности продающей компании, как правило, они приходят за новостями. Для этого на главной странице необходим новостной блок, где бы все желающие могли ознакомиться с корпоративными событиями. Наличие новостного блока ещё и выступает свидетельством постоянного развития компании; ·третья группа - люди, которым необходима контактная информация (телефон, адрес, схема проезда). Сюда могут входить как новички, так и постоянные посетители. Это сама ценная категория: именно эти люди приносят компании значимую часть дохода, а, значит, на их пути не должно быть никаких препятствий: продающая компания обязана разместить на главной странице контактную информацию. В том случае, если информация довольно объёмна, на странице должна быть бросающаяся в глаза ссылка на неё. Изложенные рекомендации, ни в коем случае, не умаляют возможностей различных подходов дизайнера к реализации главной страницы. Информативные блоки, обязательность которых подчёркивалась в материале, могут быть представлены абсолютно по-разному. Так, на главных страницах сайтов компаний-гигантов краткая информация может и вовсе отсутствовать - все и так знают сферу их деятельности. Им достаточно слогана и ссылок на страницы с подробной информацией об основных направлениях своей деятельности. 2.2.4 Под запретом В веб-дизайне существуют основные запреты, которых стоит придерживаться для достижения тех или иных целей. Первый запрет касается анимации, в частности, бегущих строк. Эти элементы имеют свойство раздражать и отвлекать пользователя, однако, при умеренном и умелом воплощении они могут отлично разнообразить дизайн и украсить внешний вид веб-ресурса. Под запретом находятся и фоновые рисунки, отличающиеся излишней яркостью и рельефностью, а также анимированные "бэкграунды". Ни в коем случае нельзя использовать скрипты, предназначенные для изменения внешнего вида браузера, будь то изменение полосы прокрутки, статусной строки или создание анимированного заголовка окна: изменяя внешний вид браузера, дизайнер нарушает всё привычное для пользователя, что чаще всего приводит лишь к раздражению. Стоит забыть и про произвольно открывающиеся "pop-up" окна. Они тормозят работу сайта, заставляют посетителя, без их желания, ждать появления бесполезной рекламы. Перегруженность графикой - наболевшая проблема многих сайтов и типичная ошибка их создателей. Каждая лишняя секунда, потраченная пользователем на ожидание загрузки сайта, склоняет чашу весов не в пользу ресурса. Обратной стороной проблемы является неправильное масштабирование изображений: часто покупатель не может рассмотреть товар на очень маленькой фотографии без возможности зуммирования. Настоятельно рекомендуется использовать не более трёх основных цветов в оформлении сайта. В противном случае, веб-ресурс может оказаться слишком пёстрым, а значит, сложным для восприятия. Панель навигации, выполненная в виде кнопок, не должна содержать более семи пунктов. Причины всё те же: большое количество разделов мешает работе посетителя на сайте, рассеивая его внимание, да и сами кнопки, являющиеся графическими элементами, негативно сказываются на скорости загрузки. Нельзя не учитывать и то, что в настоящее время большая часть пользователей прибегает к функции просмотра страниц с отключением графики, а это значит - они не увидят кнопочную панель. Посетители невысоко ценят использование flash-технологии. Сайты и инструменты навигации, выполненные с его применением, не находят отклика в сердцах пользователей и по-прежнему считаются ими неудобными и непривычными, кроме того, подобные сайты отличаются низкой скоростью загрузки и невозможностью работать на некоторых устройствах. Негодование у посетителей сайтов продающих компаний вызывают формы, содержащие излишнее количество ненужных вопросов: в опросниках следует ограничиться лишь самыми важными вопросами, остальные же сделать необязательными для ответа, а также максимально использовать автозаполнение и автоматический перевод курсора. Крайне нежелательно и использование фреймов. Являясь неким атавизмом, фреймы не только усложняют структуру сайта, но и пагубно влияют на индексацию и скорость загрузки. Ошибкой является наличие на сайте более 3 счётчиков посещений. Такое количество счётчиков значительно тормозит загрузку. Наличие мусора в коде страницы может оказать значительное влияние на длительность загрузки [25]. Конечно же, это не все требования, которые нужно учесть дизайнеру. Здесь приведены лишь грубые ошибки, свойственные многим начинающим. 2.2.5 Общие рекомендации Подводя итоги исследования, касающегося вопросов веб-дизайна, следует выделить ключевые моменты, на которые разработчик, в первую очередь, должен заострить свое внимание. Структура страницы: ·простота является основополагающим принципом веб-дизайна; ·минимум ненужных элементов; ·наличие названия и пояснительной фразы (слогана) для того, чтобы пользователь сразу понимал отрасль деятельности веб-ресурса; ·информация и структура веб-ресурса должна максимально соответствовать указанной сфере деятельности; ·веб-сайт должен быть структурирован таким образом, чтобы минимизировать зрительные маршруты по экрану; ·важная информация и элементы меню должны располагаться в левой и левой верхней частях страницы, наименее важные - в нижней и в нижней правой, содержательная часть - в центре; ·стандартные элементы сайта следует располагать в областях страницы, традиционно для того используемых: меню обычно располагается слева и/или под шапкой сайта; поиск располагается в шапке сайта, под шапкой справа, реже - внизу правой/левой колонок; панель навигационных иконок обычно расположена вверху шапки справа или слева; над или под основной частью страницы располагается строка навигации (указание рубрики, номера страницы); ·связанная по смыслу информация и элементы сайта должны располагаться рядом; ·однотипные данные на разных страницах должны располагаться в одной и той же области; ·страница не должна быть загромождена обилием информации, обязательно должны присутствовать белые поля; ·объекты, которые несут сравнительно самостоятельную, отличную от других информацию, следует графически разделить, что способствует облегчению восприятия и запоминания. Цвет: ·при выборе цветовой схемы стоит учитывать фирменный стиль, тематику ресурса и целевую аудиторию; ·лучше использовать небольшое количество цветов; ·не следует использовать сочетания близких цветов для оформления текстовых блоков и фона; ·наиболее преимущественно использование безопасных цветов. Текст: ·по возможности следует использовать наиболее простой шрифт с достаточно крупным кеглем; ·информация должна быть максимально четкой, достаточно краткой, и в доступной в форме, что обеспечит ее правильное понимание; ·заголовки и подзаголовки должны быть информативными и четкими, а также соответствовать обозначаемому тексту; ·заголовок не должен быть сильно оторван от текста, который располагается под ним; ·для заголовков и подзаголовков преимущественно использование более жирного начертания; ·статьи лучше всего начинать с анонса, который будет обладать наибольшей информативностью; ·ширина строки документа в идеальном случае должна умещать порядка 50-70 знаков; ·тексты должны быть небольшого объема; ·большие блоки текста лучше разбивать на параграфы и абзацы; ·при необходимости текст нужно разбивать по пунктам; ·самую важную информацию, ключевые слова, цитаты, ссылки нужно отдельно выделять в тексте; ·при большом кегле следует корректировать слишком большие разрывы между буквами с помощью трекинга; ·при большой плотности текста необходимо уменьшать количество слов в строке с помощью увеличения расстояния между словами, корректировать плотность текста можно с помощью изменения интерлиньяжа; ·желательно, чтобы текст был выполнен темным цветом на светлом фоне и был достаточно контрастным, не следует использовать яркие подложки под тексты большого объема; ·следует избегать чрезмерного форматирования текста. Чрезмерные визуальные эффекты отвлекают от содержания; ·наилучший порядок слов в предложении - прямой; ·следует избегать сложных предложений с длинным рядом последовательных подчинений; ·рекомендуемая длина коротких сообщений 7-11 значащих слов. Шрифт: ·рекомендуется задавать набор альтернативных шрифтов для отображения текста при отсутствии на компьютере пользователя нужного шрифта; ·не следует использовать слишком много гарнитур на сайте (как правило не более трех); ·при подборе сочетаемости шрифтов следует руководствоваться следующими принципами: комбинирование шрифтов семейства Serif и Sans Serif; комбинирование шрифтов, которые были разработаны по схожим принципам (одинаковые геометрические формы); комбинирование очень разных шрифтов, создающих противопоставление; не рекомендуется комбинировать декоративные и/или рукописные шрифты; ·для выделения заголовка использовать большое значение кегля, увеличение насыщенности, изменение начертания; ·нужно учитывать отсутствие у некоторых шрифтов курсивного или жирного начертания. Графика: ·графика должна быть максимально простой, а также соответствовать тематике ресурса, создавать единый стиль оформления страницы, дополнять и иллюстрировать текст; ·не рекомендуется использовать большое количество графики; ·необходимо указывать размер картинок при верстке; ·не рекомендуется масштабировать изображение средствами html; ·необходимо всегда указывать альтернативный текст; ·фоновый рисунок лучше выбирать нейтральный, чтобы не терялась возможность свободного чтения текста; ·рекомендуется использовать навигационные иконки; ·изображения всегда необходимо обрабатывать и оптимизировать; ·для маленьких навигационных картинок использовать формат PNG, для фотографий формат JPEG; ·рекомендуется с большой осторожностью использовать анимацию (только для обеспечения интерактивности); ·не следует включать анимационные изображения в логотип; ·главное правило в вопросах внедрения графики в веб-ресурс - всегда помнить о законах авторского права! Навигация: ·следует выделять ссылки цветом и подчеркиванием; ·рекомендуется выделять цветом посещенные ссылки; ·цвета просмотренных и непросмотренных ссылок должны различаться; ·при наведении на область ссылки курсор должен изменяться; ·не рекомендуется использование подчеркивания текста, если он не является ссылкой; ·при выборе названий разделов и категорий следует ориентироваться на язык пользователя и избегать профессионального сленга; ·навигационные элементы должны быть сгруппированы по каким-либо признакам. 2.3 Описание созданного макета Разрабатываемый интернет-магазин бытовой техники принадлежит некоторой коммерческой организации и является одной из составляющих собственного бизнеса; его основное предназначение заключается в информационном и маркетинговом продвижении товара, увеличении объема продаж, а также предоставлении информации об искомой компании. Учитывая обоснованные ранее в дипломном проекте рекомендации и особенности, касающиеся вопросов сайтостроения и веб-дизайна, разработчиком был создан оптимизированный макет сайта, призванный занять собственную нишу в сфере онлайновой торговли. Разработка начинается с главной страницы сайта. Эта страница имеет большое значение и выполняет важные задачи: помогает увидеть структуру ресурса и его ценность для посетителя (т.е. элементы и информацию, которую ресурс в себя включает), а также сориентировать пользователя. Главная страница, чаще всего, определяет общее оформление ресурса в целом. В начале работы при разработке дизайна рекомендуется создавать эскиз для того, чтобы определиться с количество колонок, элементов, их взаиморасположением на странице. В нашем случае веб-ресурс имеет следующие основные элементы: шапка, включающая в себя логотип компании, верхнее меню, левая и центральная колонки, подвал. В верхнем меню расположены ссылки на разделы, которые непосредственно относятся к функционированию интернет-магазина: "Каталог", "Корзина", "Оплата и доставка", "Схема проезда", "Новости". Зона первичного восприятия (левая колонка) включает в себя функции управления корзиной и формой обратной связи, краткую информацию о компании (в т. ч. контактную), сокращенный каталог продукции, а также инструмент поиска в пределах данного веб-ресурса. В навигационных меню, как видно на рисунке 2.1, используются разделительные вертикальные и горизонтальные полосы, помогающие глазу визуально отделить пункты друг от друга. Рисунок 2.1 - Навигация сайта Расположение меню в общепринятых областях позволяет не оформлять пункты меню в виде ссылок с подчеркиванием. В данном случае работает динамический стереотип, и пользователь может сориентироваться без дополнительных подсказок. Центральная часть главной страницы представляет собой выборку наиболее популярного среди покупателей ассортимента, предоставляющую не только основную информацию о продукте (фотография, название, цена), но и возможность быстрого перехода к интересующему товару. Цветовая схема интернет-магазина была выбрана стандартная: серый текст на белом фоне. Подобный выбор связан с тем, что основная масса посетителей данного веб-ресурса - мужчины (реже женщины) среднего и более зрелого возраста, обычно семейные, чья основная цель - приобретение продукции, а вовсе не оценка художественного дизайна. Поэтому перед разработчиком, прежде всего, стояла задача минимизации возможных неудобств потенциального покупателя за счет строгости и понятности создаваемого макета. Шрифтовая схема сайта состоит из двух шрифтов: в качестве базового выбран рубленый шрифт Trebuchet MS, в качестве дополнительного - Arial. Шрифты подбирались из стандартного набора Windows во избежание проблем с отсутствием на компьютере конечного пользователя, а также исходя из хорошей сочетаемости (рисунок 2.2). Рисунок 2.2 - Шрифтовая сочетаемость Грамотная структура каталога продукции играет первостепенное значение в работе всего интернет-магазина. Предоставляя пользователю возможность быстрой и удобной навигации по товарному ассортименту, а также облегченную форму заказа, продающая организация привлекает потенциальных покупателей и, как следствие, приобретает дополнительные источники дохода. Учитывая вышесказанное, именно каталогу (рисунок 2.3) было уделено наибольшее внимание: предлагаемый ассортимент разделен по видам продукции и брендам; каждый товар имеет визуальное (фотография) и текстовое описание (краткое и расширенное), а также информацию о цене и кнопку покупки. Рисунок 2.3 - Каталог продукции Корзина (рисунок 2.4) представляет собой форму с информацией о выбранных товарах (название, количество, индивидуальная и общая цены) и бланками заполнения персональных данных покупателя (например, ФИО, электронная почта, телефон). После нажатия кнопки "Оформить", данные по заказу отправляются на почту клиента и на сервер оператору интернет-магазина. Помимо основного раздела, информация о товарах в корзине отображается и в левой колонке (зона первичного внимания), этот прием призван стимулировать покупателя на покупку, напоминая об его заказе. Рисунок 2.4 - Корзина покупателя В разделах "Оплата и доставка", "Схема проезда" и "Новости" содержится соответствующая информация о работе интернет-магазина, вариантах и способах получения заказанного товара, проводимых акциях, событиях и пр. Касаясь технической стороны разработки интернет-магазина, в первую очередь, стоит отметить, что первоначальная задумка заключалась в построении данного веб-ресурса, полностью основываясь на языке PHP, однако, в процессе работы, стало понятно, что для качественного результата наиболее приемлемым решением станет внедрение в проект модулей MySQL в качестве основной системы управления базой данных. Подобный выбор имеет ряд причин: ·после превышения предельного числа пользователей, материалов, товаров и категорий. даже хорошо структурированный сайт становится крайне сложным в управлении; ·MySQL обеспечивает куда более высокую производительность, позволяя с легкостью создавать объекты, вкладывать их в контейнеры, вкладывать контейнеры друг в друга и т.д. без потери наглядности; ·меньшие трудозатраты со стороны разработчика и технической поддержки, а также, что немаловажно, со стороны пользователя. Таким образом, базовый каркас разрабатываемого интернет-магазина основан на языке PHP, в который встроены элементы HTML (разворачивающиеся списки, внешнее оформление) и JavaScript (эффект разворота выпадающего списка), а также модули MySQL. Написанные на языке PHP модули CMS, системы управления содержимым (англ. Content Management System), были взяты из открытых источников в Интернете и переработаны под собственные задачи. Под модулем понимаются все данные, информация, объекты и пр., располагающиеся на странице слева и сверху. Главные их них: модуль FastShop (непосредственное построение интернет-магазина), FastNews (вывод новостей), FNShopFace (генерация товаров на главной странице). Выводы по главе Во второй главе подробно рассмотрены возможности веб-дизайна электронных ресурсов в качестве основного или дополнительного средства ведения бизнеса и, как следствие, достижение поставленных целей, в частности, функционирование полноценного интернет-магазина, получение прибыли от продаж. Были выявлены общие закономерности использования разнообразных визуальных средств и их непосредственное влияние на качество веб-ресурса. Кроме того, был разработан список основных рекомендаций использования различных элементов и составляющих веб-дизайна, учитывающих особенности восприятия конечного продукта. В качестве иллюстративного примера была проведена разработка концепции и дизайна интернет-магазина бытовой техники, принадлежащего некоторой коммерческой организации. Оптимизация продукта проводилась с учетом рассмотренных в дипломной работе закономерностей оформления электронных ресурсов и составленных рекомендаций. |