Pull to refresh
0

Будущее веб-стандартов

Reading time 11 min
Views 6.6K
Original author: Jeffrey Zeldman
image

Джеффри Зельдман предсказывает захватывающую эру в веб-дизайне


Вопреки общему мнению фраза «Веб 2.0» не была придумана Тимом О'Рейлли, и уже с самого начала она не означала, что это веб-приложения, такие как Facebook.com или Twitter.com, которые дают возможность людям (не профессионалам в интернете) делиться информацией онлайн.

Больше чем десятилетие назад Дарси Ди Нуччи (англ. Darcy DiNucci) предсказывала: «Интернет, который мы знаем сегодня и загружаем в браузер как статический экран, только зародыш будущей Паутины. Мы видим только первые проблески Веб 2.0 и просто начинаем наблюдать за его развитием. Интернет будет подразумевать под собой не только тексты и графику, но и механизм транспортировки — некий эфир, по которому происходят согласованные действия. Веб появится на экранах компьютера, в телевизоре, на приборном щитке автомобиля, в мобильном телефоне, в играх, и, возможно, даже в микроволновой печи.» — Дарси Ди Нуччи (1999), «Будущее разбитое на куски».

Перевод: Рандалл Роффе*
Спонсор перевода: Студия Айкен

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

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

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

Но Ди Нуччи точно предсказала о мобильных телефонах, поскольку повсеместность CSS3- и HTML5-совместимых смартфонов с высокой разрешающей способностью и оснащенные WebKit’ом вносят существенные изменения в нашу жизнь.

Сближение

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

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

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

Еще вчера, каждый сайт был самостоятелен, как альбом Beatles “Sgt. Pepper's Lonely Hearts Club Band”. Сегодня же, сайт наcтолько хорош, насколько хорош API третьей стороны и это даже намного проще. Вчера, сайты были для «Internet Explorer Version X» или «Netscape Navigator Version Y». Сегодня, владельцам интернет-ресурсов жизненно важно привыкание, зависимость пользователей и их ощущение облегчения во время использования мобильных версий сайтов и приложений для телефонов под эти же сайты.

Было время, когда определение «крутой дизайн» были значениями для «созданных во Flash». Но после больше чем десятилетнего периода в дизайне, ориентированного на стандарты, и с появлением возможности использования нестандарных шрифтов на веб-страницах, мы знаем, что (X)HTML, CSS, и JavaScript могут создавать впечатляющие, необыкновенные и красивые решения — и, еще вероятней чем технология Flash, стать движущей силой для веб-приложений с самыми широкими возможностями.

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

Снятие тренировочных колесиков

Поскольку наше знание стандартного дизайна достигло зрелости (по иронии помогали, в большей степени, пять лет между IE6 и IE7, они дали нам время, чтобы избежать и понять ошибки и наработки, и научить этому даже коллег, которые нерасположены к стандартам), большинство из нас становятся все более и более интересующимися опытом пользователей и content strategy. Эта дисциплина существовала у нас уже давно, но только сейчас получает заслуженное внимание, благодаря Кристине Халворсон (англ. Kristina Halvorson).

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

Так, давайте рассмотрим этот момент перемен, и уничтожим неправильные представления и полуправду, которые препятствуют некоторым из нас использовать предоставляемые возможности. Для начала давайте мы рассмотрим CSS3. Итак, CSS3 — это самая последняя, самая компетентная, и самая комплексная версия стандартного языка для визуального дизайна от Консорциума World Wide Web.

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

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

image
Чистый CSS3: иконки iPhone без изображения

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

Это означает, что вы не должны прочитать и запомнить всю спецификацию CSS3 сразу, а создатели браузеров не должны пытаться использовать каждую его часть немедленно — так, как они получали отчеты об ошибках прошлом, и как мы (разработчики) застревали на полуготовом CSS годами. Вспомните о старой плоблеме в IE с блочной моделью, которая была более интуитивной, чем теперешняя блочная модель в CSS1, но неправильной. HTML-верстальщики должны были использовать известный трюк с блочной моделью CSS от Тантека Челика почти десять лет. Те, кто отказались использовать «хаки» из принципа, часто изменяли эту модель в IE путем значительного увеличения количества кода.

К счастью, у нас не будет похожей проблемы, поскольку конструкторы браузеров занимаются новой спецификацией CSS, потому что модульность CSS3 дает возможность приверженцам браузеров потрудится над деталями по одной, шаг за шагом. Таким образом, мы получаем продуманное, последовательное выполнение всех нюансов в самых последних «Safari», «Firefox», и «Opera».

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

Префиксы браузеров

Каким образом разработчики браузеров используют технически не законченный модуль CSS3, без ограничения дизайнеров в методологии (и того кода), которая позже может устареть? Используя префиксы браузеров.

Экспериментальное использование border-radius в «Safari» (сейчас и в «Chrome») имеет префикс -webkit-borderradius; «Firefox» использует -moz-border-radius. Самое лучшее использование: вначале перечислить коды префиксов, и только потом стандартный код W3C без префиксов, например:

.comment {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}


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

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

Впечатляющие демонстрационные способности включают в себе значки iOS от Лювис Харбо и значки iPhone от Джеффа Баттертона, оба полностью спроектированы в CSS и просматриваемые только через самые последние WebKit-браузеры — Safari 5 и Google Chrome 5.

image
DEMOS WITH DE'MOST: значки iOS созданы в чистом CSS

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

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

Также, особая визуальная рисовка CSS3 делает его самым ценным инструментом для создания верстки зависимой от разрешения. Это как векторная графика в браузере. Добавляете HTML5 canvas и отходите в сторонку!

Основные свойства CSS3, которые вы можете использовать сегодня: border-radius, text-shadow, box-shadow, RGBA, матовость, и даже многократные фоновые изображения (наконец-то!), которые обрабатываются таким образом:

body {
background: url(top.png) repeat-x top left;
background: url(middle.png) repeat-y bottom right;
background: url(bottom.png) no-repeat bottom right;
}


Как правило, выбранные свойства CSS3 работают в самых последних версиях Safari, Chrome, Firefox и Opera, хотя некоторые также работают в IE9, и некоторые работают в старых браузерах Safari 1.3 и Firefox 2! Не все перечисленные выше свойства CSS3 работают в каждом браузере.

Эту ситуацию усложняет то, что посетители сайтов пользуются разными браузерами, начиная от IE6/7/8, заканчивая Chrome и Camino. И значит ли это то, что пока кое-кто спорит, вы должны распрощаться с CSS3 до тех пор, пока во всем мире станут использовать IE 10 и Safari 5? Конечно же нет!

Зачем использовать дополнительные визуальные украшения, которые не показываются в IE? Спросите у пользователей iPhone. Apple продал более 40 миллионов до конца 2009 года — и, по крайней мере половину, людям, которые используют Windows на ПК дома, и возможно продолжают использовать устаревший IE в офисе.

Сейчас они столь же знакомы с разрешением «CSS3 WebKit», как и с «Internet Explorer», и они не испытывают внутреннего дискомфорта переключаясь между ними двумя.

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

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

HTML5: он живой!

Распространяясь, как марихуана на концерте Phish и приближаясь к CSS3 веением ветра, здесь появляется HTML5, хоть и в незавершенном виде. Если вы боитесь HTML5, подумайте о более снисходительной версии XHTML 1.0 — где EMBED наконец-то «валидный», и никого не волнует, если вы забудете закрыть тэг IMG. Конечно же, HTML5 — больше чем это. Это первая серьёзная модернизация языка разметки Веба, и единственная версия HTML, спроектированная для веб-приложений, а не только для документов.

Кроме того, есть разные способы приготовления колбасы. В обычном сценарии веб-стандартов, комитет W3C придумывает материал, предоставляя право создателям браузеров реализовывать его или нет. В конечном счете, создатели Веба принимают его или нет. Но, HTML5 инвертировал эту парадигму. Производители браузеров (не W3C) изобрели HTML5, основывая большую его часть на том, что дизайнеры и разработчики уже сделали, и один человек (редактор Ян Хиксон), а не комитет, решает что будет. HTML5 есть в новостях не просто потому, что Apple использует его как трезубец в гладиаторских боях с Adobe, а потому, что в нем отображаюся канвасы и проигрывается видео и аудио, причем с встроенными элементами управления, без каких-либо плагинов.

Эти новые способности, с их возможностью разрушить устоявшиеся монополии, провоцируют судебные процессы. Но HTML5 интересен вам и мне по другим причинам, включая добавление его структурной семантики к HTML терминологии через ограниченный ряд новых элементов, включая article, section, и nav (названия взяты из исследований Google миллионов веб-страниц, чтобы посмотреть, какие названия классов уже использовались веб-дизайнерами; HTML5 не хочет заново изобретать колеса, он хочет дать нам лучшие шины).

Итак, что вы можете сделать с этими новыми элементами, помимо использования их для структурирования модульного, многократно используемого контента? Можете ли вы также выбрать их стиль? Safari, Chrome, Firefox, Opera и IE9, на самом деле, узнают и разрешат вам подобрать стиль этим новым элементам HTML5, если вы включите правило в CSS display:block. В более старых версиях Internet Explorer нельзя выбрать стиль этих элементов, если вы не «создадите» их в JavaScript’е, используя технику, которую Джон Резиг (автор JavaScript-библиотеки jQuery) называет “HTML5 shiv”.

image
SHIV SCRIPT: Удобный скрипт для автоматизации создания кода на shiv’ах

Чтобы автоматизировать написание кода на shiv’ах, Реми Шарп (прим. Соавтор одной из лучших книг по HTML 5) создал простой скрипт, который дает возможность «создать» все новые элементы HTML5 и задать им стиль для предыдущих версий IE (все до 9.0). Если вам неудобно использовать JavaScript для этих целей, вы можете продолжать использовать стандартные HTML 4.01/XHTML 1.0 div’ы, со стилями и соответствующими названиями классов, например, div class=«section». Потом, когда ваши пользователи будут использовать WebKit’овские браузеры, а также Firefox, Opera или IE9+, вы сможете свободно заменить <div class="section"> на <section>).

Сейчас самое подходящее время

Половина дела создания стандартов — это детали, вторая половина — политика. Правильно или нет, я полагал, что HTML5 был частично местью Хикси (Hixie's revenge against XHTML), обслуживаемый как text/html.

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

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

Новая семантика HTML5 направлена на реальное издательство, которое происходит все больше и больше через Веб (даже ePubs часто начинают как HTML, и это значит, что скоро все больше и больше печатных книг последуют этому примеру).

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

Кое-кто беспокоится, что успех iPhone и iPad возвестит новую эпоху «Корпоративного
управления», а Apple играет роль «Большого брата», которого только что покинул Майкрософт. Конечно, мы наблюдаем за жестким контролем Apple над его резервами и ограничениями, с помощью которых можно использовать программные средства для создания приложений для iPhone.

Но, когда я вижу, что штучки типа iGizmo сметаются с полок, я вижу WebKit в карманах людей. Я вижу CSS3 и HTML5 у них на руках. Я вижу Веб, о котором я мог только мечтать. И я вижу много чего забавного в следующем десятилетии.

* Пару слов от переводчиков


Если в двух словах про автора статьи Джеффри Зельдмана, то этого чувака реально за бугром уважают как крутого веб-дизайнера, профессионала с большой буквы и как борца за стандартизацию Веба. Зельдман — автор бестселлеров Designing With Web Standards (New Riders: 2003), Taking Your Talent to the Web (New Riders: 2001), многочисленных статей, написанных для A List Apart, Adobe, Creativity, Digital Web, Macworld, PDN-Pix, и других сетевых и бумажных изданий.

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

P.S. Этот перевод не претендует стать самым правильным и самым вычитанным переводом года (хотя мы ждём от вас замечаний и правок). Это всего лишь попытка донести до наших соотечественников и друзей суть того, что думают про будущее веб-дизайна и как собираются стандартизировать разработку (в целом) на десятилетие вперед наши «буржуйские» коллеги по веб-цеху. Наша основная деятельность — создание сайтов, а не перевод статей. Спасибо за понимание.
Tags:
Hubs:
+8
Comments 12
Comments Comments 12

Articles

Information

Website
aiken.ua
Registered
Founded
Employees
11–30 employees
Location
Украина