Referat.me

Название: CSS дизайн: с учетом контекста

Вид работы: доклад

Рубрика: Информатика и программирование

Размер файла: 16.06 Kb

Скачать файл: referat.me-133828.docx

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

CSS дизайн: с учетом контекста

CSS дизайн: с учетом контекста

Джошуа Портер

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

С помощью CSS сделать это весьма просто. Всё, что вам нужно - импортировать отдельную таблицу стилей для каждого типа устройств, которая переопределит стилевые правила, указанные в основной таблице стилей. Почитайте фантастически важную статью Эрика Мейера "В печать!", где дается подробнейший пример того, как на практике осуществить сказанное выше. (Внимание: некоторые типы устройств поддерживаются не полностью).

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

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

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

Что можем мы сказать об этой ситуации? Есть ли в ней что-то уникальное? На что следует обратить внимание?

Другая среда предлагает другие возможности

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

Дизайн для контекста

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

"Вы видите печатную версию статьи с фантастического веб-сайта (http://www.xyz.com), на котором вы сможете найти море подходящей вам информации. Мы думаем, вам будет интересна ещё одна статья (http://xyz.com/article02.html) по этой же теме".

Если в ваши планы входит увеличение числа зарегистрированных клиентов, напишите, например, вот что:

"Если вы получили эту распечатку от кого-то из ваших друзей или коллег - вы имеете право на особую скидку. Зарегистрируйтесь у нас - и мы дадим вам 10% скидку для первой покупки".

Если вы хотите связаться с людьми, интересующимися услугами вашей компании, напишите нечто подобное:

"Вы читаете статью, написанную юристом компании XYZ. Это - его работа. Если у вас есть какие-то вопросы касательно упомянутых в статье услуг, просто позвоните нашему юристу на персональный номер (321-867-5309 ext 123) и она сможет рассказать о том, что XYZ может сделать для вас".

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

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

Легким движением CSS ...

Напишем несложный CSS код. Сначала создадим div с контентом, специально написанным для тех устройств, ради которых всё и затеяно - пусть, для ясности, это будет печать на принтере:

<divid="offer4print">

<p>Предложение, от которого невозможно отказаться.</p>

</div>

В основной таблице стилей примените к этому блоку свойство display: none;, таким образом он будет невидим при просмотре в Сети (на мониторе компьютера). Для этого в таблицу стилей для монитора (media="screen") включите вот такую строку:

div#offer4print { display: none; }

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

div#offer4print { //укажите здесь стили для печатной версии }

Несколько идей по созданию печатной версии…

Если вам известно имя читателя (скажем, он зарегистрировался на вашем сайте) - укажите его в печатной версии. Получится, будто эта распечатка сделана специально для него: exlibris Джошуа Портер.

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

… и версии для портативных устройств:

Номера телефонов (а почему бы и нет? - это ж очевидно). Предложите прямой доступ к информации, связанной с той, что находится в распечатанной ими статье. Люди оценят ваши труды.

Дайте им простой способ получения по электронной почте PDF-версии документа, удобной для просмотра (и печати).

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

Благодаря этой методике, вы внесёте в вашу работу уникальные инновации, полезные вашим пользователям. Конечно, вы не обязаны использовать для этого лишь CSS. Для этих целей подойдёт любая технология, способная различать типы медиа-устройств. Однако самый простой путь - применение CSS. С учётом контекста.

Похожие работы

  • Wiki как движок обычного сайта

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

  • Дизайн для портативных устройств: ваш веб-сайт на маленьком экране

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

  • Мультимедиа в Windows 95

    ордовский государственный университет имени Н.П. Огарева юридический факультет кафедра информатики РЕФЕРАТ Мультимедиа в Windows'95. Программы Универсальный проигрыватель. Лазерный проигрыватель. Фонограф.

  • Вывод информации

    Устройство вывода информации Мониторы. Монитор (дисплей) компьютера предназначен для вывода на экран текстовой и графической информации. Размер экрана.

  • Контент-анализ

    Контент-анализ: общая характеристика. Соизмерять желаемое (цели) и возможное (средства) и намеченное (объект) и находить оптимальную для данного случая комбинацию их.

  • Plug and Play

    Общая характеристика технологии Plug and Play, ее структура и принцип действия, оценка преимуществ и недостатков, системные требования для бесперебойной работы. Основная цель реализации Plug and Play и ее возможности, спецификация интерфейса драйверов.

  • О пользе точности темплейтов

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

  • Точка конвергенции: о будущем мобильных устройств

    Портативные игровые консоли последних поколений, КПК, работающие под Palm OS, Windows Mobile, Symbian, мобильные телефоны, которые обрастают все большим количеством функций - гаджеты становятся все больше похожими друг на друга.

  • Применение контент-анализа в изучении межэтнической напряженности

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

  • Современные тенденции в развитии интернет-технологий

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