Понимание веб-дизайна

Автор: Джефри Зельдман

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

Некоторые не понимают веб-дизайн, но занимаются созданием сайтов, либо руководят веб-дизайнерами и разработчиками. Кто-то из не понимающих веб дизайн, обвиняется нами в непрофессионализме.

Если мы хотим лучшие делать сайты, лучше работать и иметь лучше информированных клиентов, нам надо начинать с себя.

Отдавая предпочтение архитектуре, а не недвижимости.

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

Новостные медиа слишком часто неправильно понимают эту суть. Слишком сильно интернет-журналисты преследуют корыстные цели, слишком мало уделяется внимания искусству и идеям. Управляемые редакторами, которые в свою очередь озабочены исчезновением рекламодателей, журналисты пишут большую часть своего времени о сделках и цитируют бизнесменов. Многие поступают так, даже когда их цитирование откровенно эгоистично и нелепо, к примеру Zuckerberg’s Law.
Это не значит что Zuckerberg не пишет новости, и в то же время не означает что бизнес является единственным источником крупных журналистских сенсаций. Фокус на бизнесе в ущерб остальным тематикам лишен смысла, как, например, обзор исключительно рынка недвижимости и одновременное игнорирование архитектуры.

Всем уже успела надоесть одноплановость новостей. В 1994 веб называли странным и диким. В 99-ом веб стал вершителем великих судеб, в 2001-ом — провалом, в 2002-ом новостийщики открыли для себя блоги, в 2004-ом, приглашенные на CNN блоггеры с пеной у рта доказывали как гражданские журналисты «заново открыли» новости и демократию, и определят кто выиграет на президентских выборах.

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

Неразрывное кольцо самовозвышения

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

Несмотря на некоторые исключения, для большей части создателей победивших решений, веб остается каналом для рекламы и маркетинговых кампаний, в которых пользователь пассивно использует Flash и видеозаписи. Для активного пользователя веба в этом есть некоторое развлечение, но чтобы вы и я подумали, если бы активная жизнь в вебе заключалась в нажатии кнопки «Digg this page».

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

Критики дизайна тоже ошибаются.

Люди, знающие толк в печати, могут не блистать познаниями о вебе. способности критиковать, пригодные для «Кернинговых Войн», разбиваются на мелкие кусочки о баррикады нашей профессии.

Наименее распространенная жалоба среди нас — на то что мы застряли с уродливыми шрифтами. Критики искренне удивляются, как мы можем наслаждаться работая в среде, которая предоставляет нам немного меньше чем абсолютный контроль над каждым атомом визуального решения. Они скрытно спрашивают, настоящие ли мы дизайнеры (подозревая, что нет.). Но они — начинающие, студенты дизайна и будущие критики. Их мнение, в основном, интересно только их преподавателям, и каждый из них уверен в своей правоте.
Более опытные критики понимают, что веб это не печать, и что иллюстрация — часть каждой области дизайна. Пока же эти яйцеголовые будут периодически поддаваться сомнительным убеждениям (Я делал это и сам, поддавался влиянию ложных убеждений, несмотря на то что это было довольно давно и шутки ради). В том месте, где начинается веб-дизайн, критики поднимают крик. Google Maps, мог бы быть таким же ярким представителем нашей эпохи, как «Мона Лиза» работы Леонардо Да Винчи, и это превосходно, это устраивает нас всех как ответ на многие вопросы, но не устраивает критиков ищущих прямую параллель с, я не знаю, например, символическим плакатом Милтона Глэйсера (Milton Glaser) с изображением Боба Дилана.

Типографика, архитектура и веб-дизайн.

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

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

Естественно, сравнения грубы по определению. Что такое телевизионный «London Calling»? Или кто есть Джейн Остин автомобильного дизайна? «Мадам Батерфляй» не менее прекрасна без автомобильных погонь, арахисовое масло не менее вкусное, только потому что оно не может танцевать.

Так что же такое веб-дизайн?

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

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

Давайте повторим это, выразительно:

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

Стремление к красоте

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

Какой дизайн подобен данной гарнитуре? Для примера подойдет белый шаблон «Minima» Дугласа Боумэна, сделанный для Blogger’a, используется, буквально, миллионами писателей. Такое ощущение, как будто шаблон был создан персонально для каждого из них. Это отличный дизайн.
Отличный дизайн похож на отличные здания. Все офисные здания со своими отличиями, имеют коридоры, санузлы и лестничные пролеты. Сайты тоже имеют общие черты.
Несмотря на то, что хороший дизайн сайта полностью индивидуален, существует множество других вариантов дизайна сайтов, выполняющего такие же функции. То же самое касается хороших журнальных и газетных макетов, которые отличаются от макетов обычных журналов и газет сотнями мелких деталей. Немногие радуются отличному макету журнала, в то время как миллионы сознательно или несознательно оценивают его, и никто не жалуется на то что журнал или газета не похожи на плакат.

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

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

Если все это его радует и заботят детали, работа получится прекрасной. Если не каждый ценит эту красоту, если не каждый понимает веб-дизайн, тогда позвольте нам сожалеть не о веб-дизайне, а о тех, кто его не видит.
Вам понравилась данная статья? Подпишитесь на RSS.
Автор перевода может быть не согласен с автором данной статьи
Translated with the permission of A List Apart Magazine and the author[s].

метки: 0 мнений

Анонс HTML 5. Часть3 : Представление документа

Представление документов

В отличии от предыдущих версий HTML и XHTML, описанных в терминах их собственного синтаксиса, HTML 5 описывается согласно терминам Document Object Model (DOM). Для внутреннего представления документа браузером используется древовидная структура.
Ниже приведен простейший пример структуры документа, состоящего из названия страницы, заголовка и одного абзаца текста:

Такое дерево содержит в себе элемент <title> в контейнере <head>, а так же <h1> и <p> в <body>.

Основная причина (и преимущество) выбора DOM для определения стандарта HTML 5 состоит в том, что сам язык в таком случае может быть описан независимо от синтаксиса. Существуют два основных типа синтаксиса, согласно которым может быть представлен HTML документ: HTML-сериализация (так же известная как HTML 5) и XML-сериализация (или XHTML 5).

HTML-сериализация основана на обычном для более ранних версий синтаксисе HTML (созданном на базе SGML). Ее определение ориентировано на лучшее соответствие тому, как в действительности браузеры обрабатывают HTML.


<!DOCTYPE html>
<html>
  <head>
    <title>An HTML Document</title>
  </head>

  <body>
    <h1>Example</h1>
    <p>This is an example HTML document.
  </body>
</html>

Как и в предыдущих версиях HTML, некоторые теги остаются опциональными, и их наличие автоматически подразумевается.
XML-сериализация использует XML 1.0 и пространства имен, так же как и XHTML 1.0.


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>An HTML Document</title>
  </head>

  <body>
    <h1>Example</h1>
    <p>This is an example HTML document.</p>
  </body>
</html>

В отличие от предыдущего примера, здесь присутствует атрибут xmlns, а так же закрывающий тег <p> (чье наличие в контексте XML обязательно). Для определения разницы между сериализациями, браузеры будут использовать значение MIME-типа. Любой документ, определенный как text/html, должен соответствовать требованиям HTML-сериализации. В случае же если MIME-тип имеет значение application/xhtml+xml, должны быть удовлетворены требования XML-сериализации.

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

Преимущества использования HTML-сериализации:
  • Обратная совместимость.
  • Хорошо знакомый синтаксис по предыдущим версиям стандарта HTML.
  • «Мягкие» синтаксические правила, которые прощают мелкие ошибки. Благодаря этому, пользователи с меньшей вероятностью смогут увидеть сообщение от браузера о невозможности отображения документа (даже если ошибки в нем действительно присутствуют).
  • Удобный, лаконичный синтаксис, в котором можно опускать некоторые теги и значения ряда атрибутов.
Преимущества применения XHTML-сериализации:
  • Жесткие синтаксические правила XML заставляют писать более качественную разметку, что часто облегчает дальнейшую работу с контентом.
  • Интеграция с другими основанными на XML стандартами (например, SVG и MathML).
  • Совместимость со стандартными средствами обработки XML (часто применяется при обработке и публикации материалов).

Содействие развитию стандарта

Не смотря на то, что работа над HTML 5 идет семимильными шагами, до ее завершения остается еще немалое количество времени (по сегодняшним оценкам потребуется еще 10-15 лет). В течении этого времени, отзывы со стороны веб-дизайнеров, разработчиков CMS и браузеров, а так же иных специалистов, остаются крайне актуальными для успешного развития проекта. Инициатива всех желающих внести свой вклад в развитие HTML 5 не только приветствуется, но и активно поощряется.

Вспомогательные материалы и ссылки по теме:

метки: 0 мнений

Анонс HTML 5. Часть 2: Видео и аудио

Видео и Аудио

В последнее время видео и аудио в Интернете становится все более востребованным. Такие сайты как YouTube, Viddler, Revver, MySpace, и десятки других позволяют любому опубликовать видео и аудио. Однако, поскольку в HTML в настоящее время отсутствуют необходимые средства для успешного внедрения и управления компонентами мультимедиа, многие сайты используют Flash чтобы предоставить пользователям функции контроля воспроизведения аудио и видео. Несмотря на то, что мультимедиа в вебе можно воспроизводить с помощью различных плагинов (таких, как QuickTime, Windows Media и т.д.), Flash в настоящее время является единственным среди широко распространенных плагинов, который обеспечивает кросс-браузерное решение совместимое с требуемым API.

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

Новые элементы управления видео и аудио очень упростят это. Большинство интернет-ориентированых АПИ имеют разницу лишь в обрабатываемом типе медиаданных: визуальных и не визуальных.

Опера и WebKit были созданы с частичной поддержкой видео. Вы можете скачать экспериментальную сборку Opera или последнюю сборку WebKit чтобы убедится в этом. В Opera включена поддержка Ogg Theora, а WebKit поддерживает все форматы, которые поддерживает QuickTime, в том числе кодеки сторонних производителей.

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

<video src="video.ogv" controls poster="poster.jpg" 
width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

Необязательный параметр «poster» используется для задания изображения, которое будет отображаться вместо видео до начала воспроизведения. Несмотря на то что некоторые видео форматы имеют возможность отображения заставки, такие как MPEG-4, этот параметр предлагает альтернативное решение, которое может работать независимо от формата видео.

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

<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>

HTML 5 имеет тег для указания альтернативных форматов, которые браузер может воспроизводить основываясь на типе формата или на кодеке, который этот формат поддерживает

Параметр media может быть использован для указания типа устройств с ограничениями воспроизведения. Параметр type служит для указазания типа содержимого и кодеков. Отметим, что при использовании тега , параметр src необходимо исключить из родительских тегов видео или аудио элемента или альтернативные параметры в теге будут игнорироваться.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp" 
    media="handheld">
    <source src="video.ogv" type="video/ogg;
    codecs=theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>
<audio>
  <source src="music.oga" type="audio/ogg">

  <source src="music.mp3" type="audio/mpeg">
</audio>

Для авторов, которые хотят иметь больший контроль над пользовательским интерфейсом, обширный API предоставляет несколько методов и событий, позволяющие скриптам контроллировать воспроизведение. Простейшие способ — это использование использования play(), pause(), и currentTime для возврата в начало. Следующий пример показывает их применение.

<video src="video.ogg" id="video"></video>
<script>
  var video = document.getElementById("video");
</script>
<p><button type="button" onclick="video.play();">Play</button>
   <button type="button" onclick="video.pause();">Pause</button>

   <button type="button" onclick="video.currentTime = 0;">
   << Rewind</button>

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

0 мнений

Анонс HTML 5. Часть 1: Структура

Интернет постоянно развивается. Новые и инновационные веб-сайты создаются каждый день, раздвигая границы HTML во всех направлениях. HTML 4 использовался в течении почти десяти лет, и разработчики постоянно ищут новые решения для расширения функциональности, которая в настоящее время сдерживается ограничениями языка и браузеров. Чтобы предоставить авторам больше гибкости и совместимости, и позволить создавать интерактивные и интересные сайты и веб-приложения, в HTML 5 вводится широкий спектр функций, включая формы контроля, средства API, мультимедиа инструменты, новые структурные и семантические элементы.

Работы по HTML 5, которые начались в 2004 г., в настоящее время осуществляется в рамках совместных усилий между W3C HTML WG и WHATWG. В разработке принимают участие многие ключевые фигуры W3C , в том числе представители четырех основных производителей браузеров: Apple, Mozilla, Opera и Microsoft, а также ряд организаций и частных лиц с различными интересами и обширным опытом.

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

Структура


Большинство страниц написанных на HTML 4 включает ряд общих элементов, такие как «шапки», «подвалы» и колонки. Сегодня такое строение является довольно распространенным, с использованием элементов div, описывая каждый элемент идентификатором или классом.



Схема иллюстрирует типичный шаблон с двумя колонками размеченными div'ами с идентификатором класса в качестве атрибута. Он включает в себя «шапку», «подвал», и горизонтальную панель навигации ниже «шапки». Центр шаблона включает в себя блок «articles», и блок справа.

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



Контейнеры div могут быть заменены новыми: header, nav, section, article, aside и footer.

Код этого документа может выглядеть следующим образом:



<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

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


<section>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
    </section>
  </section>
</section>

Отметим, что для улучшения совместимости с существующими браузерами, можно также использовать другие заголовки (h2-h6) вместо h1.

Определяя цели участков на странице с помощью разделения элементов, ассистивная технология может облегчить пользователю навигацию на странице.

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

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


<header>
  <h1>A Preview of HTML 5</h1>
  <p class="byline">By Lachlan Hunt</p>
</header>

<header>
  <h1>Example Blog</h1>
  <h2>Insert tag line here.</h2>
</header>

Колонтитул («подвал») может содержать в себе все, что касается этого раздела. Обычно колонтитул содержит информацию о разделе, например, авторство, ссылки на документы и тому подобную информацию.

<footer>© 2007 Example Inc.</footer>

Контейнер

метки: 0 мнений
Подписаться на: Сообщения (Atom)