Файл: Способы оформления web-страниц приложения.pdf

Введение

Согласно данным аналитического отчета компании Netcraft, в сентябре количество работающих в интернете сайтов и персональных блогов впервые в истории превысило 1 млрд. и составило 1 022 954 603 узла. По данным последнего пресс-релиза Международного союза электросвязи (МСЭ) от 22.07.2016, количество пользователей интернета в мире составляет 3,5 миллиарда человек. Такая популярность и обуславливает актуальность данной темы. У пользователя огромный выбор сайтов и чтобы удержать его внимание на сайте или, что ещё лучше, сделать его постоянным посетителем, необходимо иметь сайт, отвечающий всем его требованиям: красивый дизайн, удобная навигация, читаемость текста, скорость загрузки страниц и т.д. Необходимо учитывать воздействие различных цветов на психику людей, контрастность, расположение рисунков, размер шрифта и множество других нюансов. Всё это элементы хорошего дизайна. Дизайн создаётся средствами HTML и CSS, причём HTML отвечает за логическую структуру, а CSS – за физическое формирование текста.

Цель работы заключается в создании и оформлении web-приложения.

Для достижения поставленной цели нужно выполнить следующие задачи:

• рассмотреть способы оформления веб-приложений;
• рассмотреть понятие юзабилити;
• изучить теоретические основы CSS: понятие, стили, уровни;
• выбрать средства создания веб-приложения;
• выбрать стили для приложения;
• реализовать возможность выбора темы веб-приложения.

1. Способы оформления web-страниц приложения

Сайты создаются с определённой целью. Чаще всего с целью продать товар или услугу или, как минимум, дать информацию пользователю. По данным Nielsen Norman Group, пользователи проводят на одной странице в среднем 27 секунд и редко прокручивают страницу до конца. За несколько секунд, которые у вас есть, нужно успеть «сказать» пользователю очень многое, доступно объяснить ему, где он находится и что ему делать, заинтересовать. В этом заключается удобство использования, дружественность, эргономичность сайта. Научным синонимом этих слов является термин «юзабилити».

Понятие юзабилити

Юзабилити представляет собой методы контроля и обеспечения качества, которые определяют эффективность работы системы на пользователя. Она обеспечивает человеку возможность управлять тем, что он создал [21].

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

Юзабилити - это, практически, тоже проверка на соответствие реальным возможностям, которую можно осуществить двумя способами.

Прежде всего, это можно сделать до того, как началось оформление дизайна. В данном случае проводятся исследования на месте изучения конкурентов. С их помощью дизайнер определяет направление движения реального мира. Эти действия характерны для такого научного подхода, как «гипотеза-опыт»: сначала вы создаёте какие-либо закономерности, а затем находите им подтверждения в реальном мире, чтобы использовать их в дальнейшем для создания самого лучшего дизайна.

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

Юзабилити пытается объяснить поведение пользователя в сложных системах в необычных обстоятельствах, следовательно, её гипотезы менее точны, чем прогнозы таких точных наук, как, к примеру, физика или математика. Поэтому юзабилити в своих рекомендациях опирается, в основном, на полученные ранее результаты экспериментов и на опыт, чем на какие-либо точные формулы.

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

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

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

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

Если рассматривать юзабилити с идеологической точки зрения, которая является полной противоположностью научной точки зрения, то в таком случае нужно проявлять склонность к компромиссам. Потому что в некоторых ситуациях приходится принимать такие решения, которые могут значительно снизить качество дизайна сайта. Также потому, что не хватает денег или времени и т.д. Менеджер проекта, конечно, может принять компромиссное решение, однако только в том случае, если ему известно, какие элементы дизайна не работают, а какие работают исправно. А эти факты как раз и даёт научный подход.

Юзабилити (англ. usability, по стандарту ISO DIS 9241-11) - «степень, в которой продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей с должной эффективностью, отдачей и удовлетворением», проще говоря степень качества и адекватности интерфейса продукта. Также под юзабилити понимается и дисциплина, направленная на достижение такого интерфейса.

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

Международная организация по стандартизации представляет собой неправительственную сеть национальных институтов по стандартизации, находящиеся в Женеве. Представители из 146 различных стран разрабатывают стандарты для возможности общения в единой плоскости различных участников бизнеса, используя взаимопонимаемые термины. А это позволяет обеспечить совместимость различных компонентов, необходимых для производства продуктов, и интеллектуальных в том числе.

В ISO также разработаны стандарты, используемые в сфере юзабилити и человеко-компьютерного взаимодействия:

ISO 9241 - содержит требования к эргономике визуальных дисплейных терминалов для офисной работы. Основной акцент ISO 9241 сделан на требования к офисному оборудованию, которые должны выполняться всеми производителями, например, требования к дисплеям, клавиатурам, к отражению, к цвету, к компоновке элементов на экране, к диалогам и сообщениям об ошибках. Этот стандарт не применим к проектированию интерфейсов для мобильных устройств. В ней даётся определение юзабилити - «эффективность, продуктивность и удовлетворение пользователя», а также приводятся различные метрики, которые помогают проектировать удобные пользовательские интерфейсы.

ISO 13407 - описан процесс проектирования интерактивных систем, ориентированных на пользователей. Этот стандарт содержит рекомендации по организации процесса проектирования интерфейсов и органичному встраиванию этого процесса в общий процесс производства ПО. В стандарте описаны методы юзабилити, необходимые для определения контекста использования продукта, выявления требований пользователей и заказчиков к системе и юзабилити-тестирования продукта.

ISO 18529 - эргономика человеко-компьютерного взаимодействия - описание процесса проектирования интерефейсов, ориентированных на пользователей.

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

ISO 16071 - эргономика взаимодействия "человек-система". Руководящие указания по доступу к интерфейсам "человек-машина"

ISO 16982 - эргономика взаимодействия человек-система. Методы, основанные на удобстве применения, для обеспечения проектирования, ориентированного на человека

ISO 20282 - юзабилити повседневных вещей. В первой части стандарта рассказывается о методе определения свойств контекста, в котором будет использоваться разрабатываемый продукт. Во второй части описывается методика измерения юзабилити для повседневных вещей [9].

1.2. Необходимость разработки стилей. Разновидности стилей CSS

Юзабилити – важное понятие при создании сайта. Привлекательный и удобный дизайн является необходимым условием юзабилити. Такой дизайн средством лишь языка гипертекстовой разметки создать если даже возможно, то нелегко. И тут не обойтись без каскадных таблиц стилей (CSS).

Каскадные таблицы стили позволяют сделать сайты более привлекательными, более лёгкими и позволяют автоматизировать многие процессы. При использовании HTML смешивают сам текст страницы и дизайн, как будет этот текст выглядеть. Это не очень удобно, так как если создавать ещё другие страницы сайта, снова приходится прописывать в тегах атрибуты, чтобы привести к одинаковому виду. С CSS нужно создать одну таблицу и специальным тегом прикрепить её к html-файлу. Внутри таблицы лишь нужно прописать метки, где какой шрифт, интервал, размер и т.д. Если появится необходимость изменить шрифт или что-то ещё, уже не нужно открывать каждую страницу сайта и менять, а открыть таблицу стилей и прописать нужные метки.

Пример HTML-кода, созданного без использования таблиц стилей:

<P><FONT COLOR="#FF0000"><I>Это цитата.</I>

</FONT></P>

Шрифт выражения «Это цитата» пусть требуется уменьшить. Для этого пишем код:

<P><FONT COLOR="#FF0000" size="-1"><I>Это цитата.</I></FONT></P>

С одной цитатой можно справиться без труда. А если их сотня, тут без таблицы стилей не обойтись. Перепишем пример с использованием стилей.

Сначала напишем саму таблицу стилей.

.cit { font-style: italic; color: #FF0000 }

Эта таблица стилей содержит определение всего одного стиля - cit. Такой стиль, имеющий уникальное имя (чтобы Web-обозреватель мог однозначно его идентифицировать), называется стилевым классом.

Этот стиль содержит определение параметров для двух атрибутов стиля. Первый атрибут - font-style - задаёт «стиль» текста; в нашем случае значение italic делает текст курсивом, словно бы его поместили внутрь тега <i>. Второй атрибут - color - задаёт цвет текста. Как видно, два атрибута стиля cit заменили оба тега: <FONT> и <i>.

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

Нужно сохранить таблицу стилей в файле styles.css. И переписать фрагмент HTML-кода так, чтобы он использовал эту таблицу стилей.

<Р CLASS="cit">Это цитата.</Р>

Как видно, достаточно просто добавить в тег <р> атрибут CLASS и в качестве значения присвоить ему имя определённого нами стилевого класса, в нашем случае cit. Теперь этот фрагмент текста будет форматироваться курсивным красным шрифтом уменьшённого размера.