The Expressive Web, все самые последние достижения HTML5 и CSS3 в реальном времени
CSS3-анимацию можно посмотреть на сайте Expressive Web здесь.
Научиться делать покадровую CSS3-анимацию можно здесь.
Чтобы просматривать различные свойства CSS3, кликайте на пункты меню слева.
Когда откроете вкладку “CSS3 Media Queries” попробуйте поменять размер окна браузера – на маленьком размере вы должны получить бургер.
В CSS3 Shadows нужно нажимать на “лампочки”, чтобы поменять направление тени солнечных часов.
CSS3 Transforms: после того, как бомба взорвется, потаскайте ползунки справа вверху. Первый искажает кусочки взорванной бомбы в двухмерном измерении. Второй крутит их в 3D (только сделайте кусочки нормального размера, чтобы было видно).
Кроме того в будущем мы сможем беспрепятственно вставлять аудио и видео на сайты, а также хранить информацию на клиентсой стороне. Web Storage – это почти как Cookies, только в отличие от них данные не высылаются на сервер при каждом обращении к сайту, не имеют ограничений в размере. Вы можете делать интерактивные игры, и вся получаемая от клиента информация (действия, количество шагов и пр.) будут сохраняться только посредством самого HTML.
Покадровая анимация HTML5 и CSS3 – урок
(Перевод Виктории Шидловской статьи Louis Lazaris в Smashing Magazine – An Introduction To CSS3 Keyframe Animations)
Наверное, вы уже слышали о CSS3-анимации. Спецификация была разработана пару лет назад и, как показывает время, становится технологией будущего. Это элегантный способ решить проблему анимации в вебе.
Для этой заметки я создал простую анимацию, показывающую различные возможности CSS3. Взгляните на демо-версию, чтобы понять суть.
На странице справа есть также панель с CSS-кодом, который анимирует различные элементы пейзажа (небо, солнце, луну, землю и облако). Взгляните, а потом читайте дальше эту статью, объясняющую различные части анимации.
(Внимание: работает во всех новых браузерах, кроме Opera и IE).
Здесь я буду описывать работу CSS только одного элемента — солнца. Этого будет достаточно для вашего понимания покадровой CSS-анимации. Все остальное вы можете посмотреть в исходном коде демо-страницы.
Keyframe @ Rule
Первая необычная вещь, которую вы сразу заметите в коде анимации CSS3 — это keyframes @ rule. Согласно спецификации, за CSS @ rule должен идти идентификатор, определяемый разработчиком, который обращается к другой части CSS.
После @ rule и идентификатора следует набор установок (как стили внутри блоков в обычном CSS. Этот набор заключается в фигурные скобки. Другие, уже знакомые вам @ rules, можно посмотреть здесь.
А у нас @ rule, которое мы будем использовать:
@-webkit-keyframes sunrise {
/* установки идут здесь … */
}
Слово sunrise (восход) — это идентификатор, который мы выбираем сами, чтобы обращаться к анимации.
Обратите внимание, что я использую -webkit- префикс во всех примерах кода здесь и в демо. О поддержке браузерами будет написано ниже в этой статье, пока что достаточно сказать, что самыми стабильными браузерами для работы анимации являются те, что основаны на WebKit.
Keyframe Selectors
Давайте добавим некоторые установки в @ rule:
@-webkit-keyframes sunrise {
0% {
bottom: 0;
left: 340px;
background: #f00;
}
33% {
bottom: 340px;
left: 340px;
background: #ffd630;
}
66% {
bottom: 340px;
left: 40px;
background: #ffd630;
}
100% {
bottom: 0;
left: 40px;
background: #f00;
}
}
Кроме установок обратите внимание на keyframe selector (определитель, или селектор кадра). На примере выше keyframe selectors — это проценты 0%, 33%, 66%, и 100%. При этом 0% и 100% могут быть заменены ключевыми словами “from” и “to” соответственно, и вы получите тот же результат.
(Примечание переводчика: То есть, если анимация имеет длительность во времени, например, 10 секунд, то проценты указывают на ключевые кадры в 3,3 секунды, 6,6 и 10 секунд соответственно).
Хотя спецификация все еще находится в разработке, некоторые правила уже установлены. Например, порядок указания кадров не имеет значения. Анимация будет проигрываться согласно процентным указателям, а не в том порядке, как они указаны. Так что если вы поставите ключевой кадр “to” перед “from”, анимация все равно будет прокручиваться в нужном порядке. Также, если селекторы “to” и “from” не объявлены, браузер автоматически их создаст. Так что набор установок внутри @ rule, указанный в спецификации CSS3, не является догмой.
Ключевые кадры, анимирующие солнце
Для анимирования солнца я установил 4 ключевых кадра. Комментарии в коде объясняют происходящее.
В первом кадре солнце красного цвета (как обычно при восходе или закате), и находится ниже уровня земли (т. е. невидимо). Положение элемента должно быть relative или absolute, чтобы получился нужный эффект. Это достигается с помощью значений left и bottom. Я также использовал z-index, чтобы быть уверенным, что солнце будет находиться «под» землей. Обратите внимание, что стили, указанные в кадре, это стили, которые участвуют в анимации, то есть, изменяются. Другие стили, такие как z-index и position, объявлены в другом месте кода, так что здесь не указаны.
0% {
bottom: 0; /* солнце внизу*/
left: 340px; /* солнце справа*/
background: #f00; /* солнце красное */
}
Где-то на трети нашей анимации (33%) солнце находится на одном и том же уровне по оси x, но меняет цвет с красного на желто-оранжевый и поднимается вверх.
33% {
bottom: 340px; /* солнце встает */
left: 340px;
background: #ffd630; /* меняет цвет */
}
Затем, примерно через две трети анимации (66%) солнце перемещается влево на 300px. Заметьте, что я опять указал его цвет как в кадре 33%, чтобы солнце не начало краснеть слишком рано
66% {
bottom: 340px;
left: 40px; /* солнце пересекает небо */
background: #ffd630; /* цвет все тот же */
}
И, наконец, солнце плавно переходит к своей финальной стадии — становится красным и опускается ниже уровня земли.
100% {
bottom: 0; /* солнце садится */
left: 40px;
background: #f00; /* становится красным */
}
Ассоциирование анимации с элементом
Следующий кусок кода привязывает название анимации (в нашем случае слово sunrise) с определенным элементом в HTML:
#sun.animate{
-webkit-animation-name: sunrise;
}
Представляю вашему вниманию свойство animation-name. Значение этого свойства должно соответствовать идентификатору существующего @keyframes rule, иначе анимация не заработает.
Объект, к которому я обращаюсь, это элемент с id sun и классом animate. Зачем нужно дублировать код таким образом? Затем, чтобы можно было применить ява-скрипт и присвоить класс динамически. Например, в демо открываемая страница статична, анимация запускается после нажатия кнопки. Это значит, что изначально классы имеют другие стили, но после нажатия кнопки новые стили присваиваются всем элементам, и анимация запускается. Мы добиваемся того, что анимацию может контролировать пользователь.
Естественно, это всего лишь один способ добиться контроля. Как всегда в случае с CSS и JavaScript, существует множество способов достигнуть одного и того же.
Функции Duration и Timing (Длительность и Развитие)
Давайте добавим еще две строки к нашему CSS:
#sun.animate {
-webkit-animation-name: sunrise;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease;
}
Вы можете указать длительность анимации с помощью свойства animation-duration. Duration указывает сколько времени должно быть отпущено на один полный анимационный цикл. Вы можете указать значение в секундах (например, 4s), миллисекундах (2000ms), и в секундах в десятичных дробях (3.3s).
Вряд ли в спецификации появятся все остальные доступные меры измерения времени. К тому же вряд ли вам понадобится что-то большее нежели секунды. Однако вы можете указать минуты, часы и даже дни, если пересчитаете все это в секунды.
Свойство animation-timing-function, указанное для анимации целиком, позволяет определить развитие анимации в пределах одного цикла. Доступные значения для animation-timing-function — это ease, linear, ease-out, step-start и многие другие, как указано в спецификации.
Для нашего примера я выбрал ease (замедление), которое также применяется по умолчанию. Так что в нашем примере мы можем не указывать это свойство, анимация будет вести себя без изменений.
Кроме того, вы можете применять timing к каждому кадру, как здесь:
@-webkit-keyframes sunrise {
0% {
background: #f00;
left: 340px;
bottom: 0;
-webkit-animation-timing-function: ease;
}
33% {
bottom: 340px;
left: 340px;
background: #ffd630;
-webkit-animation-timing-function: linear;
}
66% {
left: 40px;
bottom: 340px;
background: #ffd630;
-webkit-animation-timing-function: steps(4);
}
100% {
bottom: 0;
left: 40px;
background: #f00;
-webkit-animation-timing-function: linear;
}
}
В каждом ключевом кадре наверху стоит отдельная функция timing. Одна из них имеет значение steps (шаги), это значение перебрасывает анимацию вперед на указанное количество предполагаемых шагов. Конечный кадр тоже имеет свою функцию timing, но она сработает только если анимация будет проиграна задом наперед.
В нашем примере мы не используем покадровые функции timing, в данном уроке я просто показал, что это возможно.
Iteration Count и Direction (Количество раз и Направление)
Добавим еще две строчки в наш код:
#sun.animate {
-webkit-animation-name: sunrise;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
}
Пример сверху демонстрирует еще два свойства: первое указывает, сколько раз нужно проиграть анимацию, второе указывает, в каком направлении ее проигрывать при множественном просмотре.
Свойство animation-iteration-count поставлено на 1, что означает, что анимация будет продемонстрирована только раз. Свойство может иметь значение infinite (бесконечность).
Свойство animation-direction установлено на normal (нормальный, значение по умолчанию), это значит, что анимация будет проигрываться в том же направлении (от начала до конца) при каждом просмотре. В нашем случае анимация будет проиграна только один раз, так что это свойство указывать необязательно. Другое свойство, которое мы могли бы здесь указать, это alternate (альтернативно), что заставит анимацию играть в обратном направлении при каждой следующей прокрутке. Чтобы это свойство было применено, iteration count должно быть установлено на 2 или большее количество раз.
Delay And Play State (Отсрочить и Состояние проигрывателя)
Еще две строки в наш CSS:
#sun.animate {
-webkit-animation-name: sunrise;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 5s;
-webkit-animation-play-state: running;
}
Первое представленное вам свойство animation-delay делает именно то, что вы думаете — отсрачивает анимацию на указанное вами количество времени. Интересно, что свойство может принимать отрицательное значение, которое передвигает стартовую точку отсчета внутри анимации на указанное количество секунд.
Свойство animation-play-state, которое возможно удалят из спецификации, принимает два возможных значения running и paused. У этого свойства ограниченная практическая польза. По умочанию значение running, а paused просто ставит анимацию на паузу, пока пользователь вречную не нажмет play. Вы не можете указать свойство paused внутри кадра, но польза свойства возникает, когда в применяете JavaScript, чтобы анимация реагировала на действия пользователя, какие-то введенные значения и т. п.
Fill Mode
UPDATE: свойство удалено из спецификации.
Остальное в спецификации
Более подробно все возможные свойства для CSS-анимации вы можете посмотреть в спецификации.
Поддержка браузерами
Как уже было сказано, разобранный здесь код относится только к одному элементу анимации — солнцу. Чтобы посмотреть код для всех элементов, посетите демонстрационную страницу. Вы можете либо открыть исходный код страницы, либо полистать вкладки справа.
В демо не использованы никакие картинки, и анимация не использует ява-скрипты. Солнце, луна и облако нарисованы средствами CSS3 с помощью свойства border-radius, и ява-кодирование применено только к вкладкам справа и к кнопке, запускающей и прерывающей анимацию.
При просмотре анимации в любом НЕ WebKit-браузере, она не сработает.
Список поддерживающих CSS-анимацию браузеров:
- Chrome 2+,
- Safari 4+,
- Firefox 5+,
- iOS Safari 3.2+,
- Android 2.1+.
Также получено официальное заявление о том, что анимация будет поддерживаться в Opera.
Ну и ни одного слова об ожидаемой поддержке в IE.
Boilerplate – как собирать сайты на HTML5 уже сейчас!
Boilerplate – это BADASS HTML/CSS/JS template (думаю, все поняли 
), с помощью которого вы можете собирать полнофункциональные интерактивные сайты на HTML5 и с уверенностью пользоваться всеми тегами HTML5!
Раньше я писала о том, как делать сайты, чтобы они были на острие новых технологий для самых последних версий браузеров, а также для мобильных и тач-скрин устройств, но при этом хорошо интерпретировались старыми браузерами и нашим “любимым” IE.
Для каждого решения требовались свои уловки на ява-скрипте.
HTML5 Boilerplate содержит в себе, как я понимаю, все необходимые javascript-уловки, какие только могут быть, не нужно больше тратить часы и сутки на то, чтобы заставить сайт работать в Эксплорере.
Вот, что они пишут сами о себе:
Почему HTML5 Boilerplate это круто:
Кроссбраузерность (да-да, IE6 тоже);
HTML5-поддержка. Используйте любые тэги уверенно;
Оптимальное кэширование и компрессия для совершенного отображения сайта;
Лучшие установки по умолчанию;
Оптимизация для мобильных устройств;
Прогрессивное развитие и высокое качество деградации (то есть – все самое лучшее в новых браузерах и при этом в старых браузерах выглядит тоже прекрасно);
Специальные классы для IE для максимального контроля кроссбраузерности;
Управляемые .no-js и .js классы;
Хочешь написать тестовый сайт, но лень? Полностью готовый набор ждет тебя.
В общем, качать всем!
Лаборатория Google изнутри. Интервью с UX-дизайнером Google Марцином Вичари
(Перевод Виктории Шидловской интервью Дэна Реддинга для журнала Smashing Magazine)
Маленькое предисловие. Должность Марцина Вичари звучит как Senior User Experience Designer at Google. Люди вроде Марцина исследуют эмоциональную, тактильную, ментальную и любую другую реакцию человека на общение с машинами. В данном случае – при общении человека и Веба. И на основе результатов создают пользовательские интерфейсы, но не только. К примеру, вы знаете, что если набрать в Google “гед кпть спиртое посл 11“, то Google напишет вам “Возможно, вы имели в виду: где купить спиртное после 11″? То есть, исследования компании помогают оптимизировать результаты поиска. То же касается всех остальных приложений Google. И Марцин Вичари – один из тех потрясающих, гениальных творческих людей, которые делают нашу жизнь лучше.
Марцин Вичари (Marcin Wichary) – старший дизайнер в Google по пользовательским интерфейсам, но его многочисленные роли и области влияния в корпорации четко не определены. Отпечатки его пальцев на огромном количестве программных продуктов Google, от поиска до Google Chrome. Популярность пришла к нему после создания Google Pac-Man Doodle, которого он воссоздал вместе с напарником по Google – Райаном Гермиком (Ryan Germick). Как сказал Райан: «Марцин – гений. Он UX-дизайнер, но также один из лучших программистов на планете».
Марцин дал интервью Дэну Реддингу (Dan Redding) и журналу Smashing Magazine о своей профессиональной карьере, интересе к фотографии и любопытном изобретении по имени Crushinator.
Вопрос: Привет, Марцин! Я понимаю, что ты вовлечен во множество процессов и проектов Google. Ты можешь как-то суммировать свои профессиональные роли в компании?
Марцин Вичари: Конечно. В Google я уже пять с половиной лет, и я всегда был странной смесью UX-дизайнера и разработчика. Думаю, со временем мне становится более комфортно в этой роли. Я начинал работать в команде Internal Tools, мы занимались интернетом, вернее, опытом общения с интернетом. И некоторые инструменты, которые разрабатывают гуглеры, невозможно «показать» людям со стороны. В смысле, ты не можешь прийти домой и сказать: «Мама, посмотри, что я сделал на этой неделе!» Там я проработал где-то 2,5 года, а потом перешел в глобальную команду, которая работает над продуктами, которыми люди могут реально пользоваться. На поиске я сидел тоже где-то 2,5 года.
Вопрос: Ты также работал над Doodles – правильно? (Doodle переводится буквально, как каракули, черточки. Google постоянно использует doodles для освещения каких-то исторических событий на главной странице своего сайта, причем делает это в рамках своего логотипа.)
Марцин: Да! А в этом году я присоединился к команде Chrome. Можно сказать, это третья большая перемена моей работы в Google. Google – супер, потому что позволяет заниматься несколькими вещами сразу. Часть меня занята каким-то проектом, а другая – работает с командой Doodle в качестве… не знаю даже, как это назвать – технического консультанта и соавтора! (Смеется).
Видео, изображающее Google doodle Марты Грэхем в действии. Художник – Ryan Woodward. Как это сделано можно посмотреть здесь. Лучше всего скопировать код скрипта, осуществляющего HTML5-анимацию, с исходного кода страницы.
Вопрос: Каково было твое участие в проекте Martha Graham doodle?
(Марта Грэхем – американская танцовщица, хореограф, почётный доктор искусствоведения Гарвардского университета. Для того, чтобы понять, о чем речь – смотрите HTML5-мультипликацию выше. Это мультипликация стояла на главной странице Google, нарисованная Марта Грэхем изображает его логотип в танце – прим. перев.).
Марцин: Я разработал технику анимации. Необходимые рисунки были сделаны кем-то еще. Существует несколько технологий, которые можно использовать, чтобы поставить анимированный логотип Google на его главную страницу. Например, есть анимированный GIF. Или видео YouTube. Какие-то другие техники. Но у всех свои минусы и плюсы.
Конкретно для этой задумки ни одна технология не подходила. Особенно для показа на главной странице, где нужно следовать определенным требованиям. Ну, вы же понимаете, во-первых, мы должны донести doodle до зрителя как можно быстрее, то есть он должен мало «весить». Мы в самом деле всегда очень озабочены скоростью. И мы всегда хотим быть уверены, что doodle будет поддерживаться на любой платформе. Поэтому, к примеру, мы не могли использовать флэш, потому что некоторые сенсорные устройства не поддерживают его.
Когда я смотрю на развитие Веба со стороны, то замечаю, что самым главным является какая-то странная изобретательность: ты видишь ограниченное количество инструментов и пытаешься как-то их остроумно скомпоновать. Случайно я изобрел технику, которая привела к большому прорыву. Вместо того, чтобы, как обычно, взять сотни кадров и отправлять их пользователю по проводам, что заняло бы всю пропускную способность линии, я создал скрипт, который содержит в себе информацию о минимальной разнице между двумя соседними кадрами. Как если бы вы взяли первый кадр, а каждый следующий нес бы в себе только эту разницу. Так что мы собрали этот маленький механизм, он хорошо работал, и все были счастливы. Я не иллюстратор, я дизайнер, но не умею рисовать. Так что во спасение человечества, я никогда не буду рисовать, тем более – на главной странице Google.
Как дизайнер, в большинстве случаев я невидим. Я могу помочь в разработке технологии, но технологии невидимы совершенно. Многим людям очень понравился doodle с Мартой Грэхем, и я испытывал тихое удовлетворение от того, что помог реализовать его.
"Я редко фотографирую животных, но если уж взялся, то получается забавно". Фото Марцина Вичари.
Вопрос: Что такое Crushinator?
Марцин (смеется): Ok, это просто-напросто название анимационной техники, которую я только что описал. Я пытаюсь убедить команду Doodle создать блог, на котором художники и технологи могли бы обсуждать проблемы, вроде этой. Самая замечательная вещь в Вебе, это то, что ты можешь кликнуть правой кнопкой мыши и «Посмотреть исходный код» или «Просмотреть код элемента» и попытаться вычислить, как это сделано. Вообще-то я в качестве примера выставил пост с doodle Марты Грэхем, чтобы кто-то с инженерным складом ума попытался вычислить, как он работает. Никто не знал, что технология называлась Crushinator, это просто мое дурацкое увлечение «Футурамой».
Вопрос: Мне кажется, Crushinator, как ты его называешь, и вообще, способ анимации с помощью ява-скрипта является очень инновационной технологией, легкой для загрузки и кросс-браузерной. Как ты думаешь, у нее есть потенциал стать широко используемой в вебе?
Марцин: Я об этом не думаю в таком ключе, это просто одна из вещей, над которыми я постоянно работаю. Я занимался развитием Веба в течение нескольких лет. Многие веб-разработки, как я уже сказал, появляются в результате скрещивания технологий и любопытства – а что получится. Со временем я открыл для себя, что нет ничего невозможного. Ты уже знаешь, что благодаря HTML5 и всем этим крутым вещам, которые происходят в браузере, что-нибудь обязательно тебе поможет. Так что я постоянно занимаюсь скрещиванием различных технологий, и для меня это не такое уж большое дело. Иногда я просто закидываю результаты своих экспериментов в толпу случайных людей Google, и некоторые результаты становятся популярными, о других же забывают. Поэтому мне кажется, я не тот человек, который может судить о полезности тех или иных моих разработок. Гораздо больше меня интересует, как с помощью этих программок можно продвинуть HTML5 еще дальше на этой неделе? Ну, знаете, стараюсь воодушевлять людей.
Вопрос: Думаю, ты мог бы менее строго к себе относиться. Некоторые вещи, которые вы, ребята, делаете, очень инновационные. И они видимые, привлекают широкое внимание общественности. У тебя есть потенциал действительно влиять на развитие подобных технологий.
Марцин: Да, иногда мне тоже так кажется. Люди приходят ко мне и задают вопросы, как будто я разбираюсь в том, что делаю (смеется). И иногда я в самом деле разбираюсь. Иногда я чувствую себя так, как будто мне только что принесли новую видео-игру, и я просто начинаю нажимать на случайные кнопки, что-то происходит на экране, но я не понимаю, почему. Но ощущения клевые, правда же? Потому что HTML5 клевый.
"Эту фотографию меня сделал мой друг. Как драматичное отображение моего типичного дня. "
Вопрос: Есть ли что-то в области юзабилити, что тебя потрясло в последнее время?
Марцин: Есть несколько, но, к сожалению, не могу их обсуждать, это информация для внутреннего пользования.
Хотя… Было кое-что смешное. Недавно вышла статья с исследованиями Принстонского Университета. Вкратце – они утверждают, что использование шрифта Comic Sans сделает ваш материал более легким для запоминания. Чем труднее прочитать твой шрифт, тем больше вероятности, что читатели запомнят, что там написано. И все, кого я знаю, присылали мне ссылку на этот материал. Потому что все знают, как я ненавижу Comic Sans (смеется), страстно. И люди присылают мне эту статью со словами: «Ты был неправ, а мы правы», ну, типа, язык показывают.
Но конечно, статья на самом деле не об этом. Во-первых, вы не должны использовать Comic Sans. Во-вторых, это всего лишь один из аспектов вечной борьбы между удобством (юзабилити) и безопасностью, правильно? Для того, чтобы сделать что-то более безопасным, приходится жертвовать удобством. Как, например, при наборе пароля вы не можете его прочитать. Вместо букв звездочки или точки для того, чтобы другие люди не могли запомнить его. Но это также приводит к тому, что вы можете опечататься. Так что существует огромное количество вещей, где приходится выбирать золотую середину между удобством пользования и безопасностью. Это всегда очень тяжелый выбор, требует большого умственного напряжения. То же самое касается Comic Sans и этой статьи. Ты можешь использовать другой шрифт. Или использовать Comic Sans, чтобы текст лучше запоминался. Круто. Но если таким образом у студентов вырабатывается стойкое отвращение к типографии в общем, или к дизайну, или ко Вселенной (смеется), не думаю, что вы много выиграли. Так что в данный момент я всем показываю язык. Шучу.
Вопрос: Когда проявился твой интерес к компьютерному программированию?
Марцин: Когда я был маленьким, у моего отца была самая лучшая работа в мире, особенно, для такого ботаника, как я. В его обязанность входила починка игровых и пинбольных автоматов. Так что я всюду таскался за ним по игровым тирам в Польше, откуда я родом. Во-первых, я мог бесплатно играть, что само по себе было круто. Но вообще-то мне гораздо больше нравилось наблюдать за другими игроками. Конечно, я мог играть, и играл, и до сих пор люблю видео-игры. Но я также мог подглядеть, что происходит внутри автомата. Если войти в режим проверки ошибок или в тестовый режим, то можно было обнаружить множество инструментов, которые заставляли работать графику, звуки, спецэффекты и другие настройки. И я был очарован! Это как заглянуть под капот автомобиля, только гораздо более крутого, чем обычная машина. Наверное, именно это привело меня к компьютерам.
Когда я заканчивал институт по специальности «программирование» в Польше и работал над своим дипломом, то открыл для себя удивительный мир взаимоотношений людей с компьютерами. С помощью компьютеров люди улучшают качество жизни, и это важно, это имеет значение, ты можешь сделать карьеру в этом направлении. На меня снизошло откровение. Внезапно все, чем я занимался столько лет в области программирования, вдруг предстало передо мной совершенно в ином свете.
Фото, вроде этого, - моя попытка "очеловечить" машины
Вопрос: Как ты думаешь, когда будучи мальчиком ты наблюдал за игроком в тире, ты как бы мониторил опыт пользователя?
Марцин: Может быть! Интересный вопрос. В детстве я обожал «Рассказы о пилоте Пирксе» польского писателя Станислава Лемма. Я был очарован ими, потому что они о космосе, пришельцах, будущем – для ребенка это нечто. Но когда я перечитываю книгу сейчас, то вижу, что она целиком о взаимоотношениях человека с машинами. Машины – это роботы и космический корабль. Но в целом, книга об отношениях человека и компьютера. И вопрос сейчас в том, был ли я заинтересован в данной теме еще будучи ребенком. Или эта книга сформировала меня. Или и то, и другое. То же касается игровых автоматов. Может, я смотрел на людей и пытался понять, что они испытывают. Или меня вдохновляло, сколько веселья и радости могут принести нам технологии, и какое наслаждение пытаться самому их создавать. Сейчас то же самое я испытываю по отношению в HTML5. Кто знает, что будет через 10 лет.
Вопрос: Как ты представляешь себе интернет через 10 лет?
Марцин: Попытки предсказать будущее, как правило, неудачны! Я даже наоборот стараюсь не пытаться его предсказывать, потому что у меня это выходит ужасно.
Но могу поделиться тем, что приводит меня в восторг. Прямо сейчас происходят вещи, которые, на первый взгляд, не могут изменить наше отношение к пользовательским интерфейсам. Например, существует идея, что скоро Retina Display (дисплей-сетчатка, использован в iPhone4) и другие технологии будут настолько совершенны, что смогут передавать несовершенство окружающего мира. Возможно, типографика вовсе не должна быть идеальной – потому что она не идеальна в книгах. Возможно, скоро появится что-то со «сломанным» интерфейсом, «сломанным», чтобы копировать реальный мир, а не «сломанным» потому что мы плохие разработчики.
Особенно эта идея будоражит мое воображение по отношению к типографии. В течение сотен лет мы создавали типографскую культуру, она имеет огромную историю, и мы достигли эры, когда типография стала потрясающей. У нее теперь такие возможности. В ней столько красоты. И тут, приходят 80-е со своими компьютерами и сметают все на своем пути! (Смеется). Теперь у нас есть моноширинные шрифты и «подчеркивание»…
Теперь у нас есть Unicode, а HTML5 и CSS3 позволяют использовать различные шрифты, и, возможно, мало по малу, мы вернем это все назад. Возможно, мы объединим все, что мы так любим в книгах и в компьютерах.
Вопрос: Можешь привести в пример обычный день UX-дизайнера Google?
Марцин: Определенного распорядка нет. Наверное, самая важная часть моего дня, и самая ценная, – разговоры с другими дизайнерами. Шумные разглагольствования по поводу того, каким именно должен быть дизайн (смеется), или демонстрация того, над чем я в данный момент работаю и выслушивание комментариев. У нас столько удивительных дизайнеров в команде.
Большую часть своего дня я провожу, уставившись в компьютер. Так как основной работой для меня является HTML5, то чаще всего открыт какой-нибудь текстовый редактор, иногда Photoshop. Я столько времени потратил на HTML5, что мне уже проще относиться к нему, как к дизайнерской программе.
Вопрос: Можешь рассказать еще что-то о своей работе в Google?
Марцин: Я всегда был последователем «старой школы». Много-много лет назад я написал сайт в программе FrontPage (смеется). Но с тех пор я всегда писал код вручную, в каком-нибудь самом простом текстовом редакторе. Сейчас это TextMate, хотя я никогда не использую его продвинутые возможности. Мне нравится держать все в своих руках.
Думаю, это мой принцип – начинать работу с нуля, даже если код был уже где-то набран, даже набран раньше мной. Это позволяет мне в постоянно меняющейся среде HTML5 и CSS3 учиться новым вещам, менять подход к работе, вспоминать, как я делал это прошлый раз и пытаться сделать по-другому. Просто из принципа. И это всегда приносит удивительные ощущения. Конечно, такой подход работает только при разработке маленьких проектов, этих моих экспериментов. Невозможно же каждый месяц переписывать Gmail (смеется).
Все это выглядит очень просто. Браузер в одном окне, TextMate – в другом, и множество Command-Tab и Command-R. Ну, типа мышечная память.
У меня есть пара простых инструментов, которые я разработал для себя и для команды Google, и которые мне следовало бы сделать общедоступными (open source), и меня очень расстраивает, что я не могу этого сделать. У одного такого инструмента тоже смешное название. Это Transmogrifier – из комиксов «Кельвин и Хоббс» (Calvin and Hobbes), которые я очень люблю. Эта программка позволяет мне очень быстро и легко тестировать различные шрифты и параметры прототипов. JavaScript не очень хорош для CGI, так что Transmogrifier позволяет мне не открывать и закрывать различные панели инструментов. Я просто включаю в код одну строку JavaScript, а об остальном он позаботится сам.
Некоторые инструменты можно найти в Google, и я помогал при их создании. Вообще программирование таких инструментов – очень хороший опыт. Ты можешь многому научиться. Как, например, придумать такое приложение, которое можно интегрировать в чужую страницу, и оно никогда не разрушит эту страницу? Кажется, что это супер-просто, но это не так, и листы стилей ждут, когда ты предпримешь такое путешествие. Так что можно научиться множеству вещей.
Вопрос: Google имеет хорошую репутацию благодаря доверию пользователей выдаваемой информации и постоянному тестированию своей продукции. Как это влияет на пользовательские ощущения от сайтов Google?
Марцин: Мы исторически были всегда сфокусированы на исследовании восприятия пользователей. Во многих продуктах, включая поиск Google, основным критерием является максимально точный и быстрый отклик на запрос пользователя, ответ на очень точный вопрос. В течение многих лет разные люди говорили нам, что мы не занимаемся дизайном своих приложений, что они просто такие, какие есть, сами по себе. На самом деле, в большинстве случаев самым продуманным дизайном является тот, который выглядит так, будто его нет вообще. Такие приложения выглядят более объективными. Менее «отредактированными». Доверие к выданной после поиска информации очень важно для нас.
Последнее время мы более пристально стали приглядываться к дизайну наших приложений. Возможно, нам необходим другой подход к дизайну в разработке некоторых проектов. Интересно, что из этого вырастет.
Попытался сыграть на этом пианино. Мне пришлось выкручиваться - многие клавиши уже не работают.
Вопрос: Как у тебя появился интерес к фотографии?
Марцин: Я все время каким-то боком занимался фотографией. Когда я еще жил в Польше, у нас появилась одна из первых на тот момент цифровых камер – очень примитивная. Но я никогда не считал себя фотографом. Честное слово, я совершенно импульсивно купил хороший фотоаппарат во время путешествия в Нью-Йорк в 2007 году. Начал чатиться со своим другом-фотографом, и это привело к тому, что я купил свой первый зеркальный фотоаппарат и влюбился в него.
Иногда я играю на пианино. Это у меня выходит плохо. Я бы сказал, на свой манер, что у меня очень хорошо получается делать это плохо. В игре на пианино для меня самым интересным является выражение эмоций. Смогу ли я научиться играть какие-то произведения? Или я смогу что-то сочинить, передать чужие или даже свои эмоции? Думаю, не с моей технической специальностью.
А в фотографии, как я понял, двигателем моего интереса является технология. Я знаю, что это не так для большинства людей. Остальные ищут в фотографии отражение эмоций или что-то еще.
Фотография присутствует в нашей жизни гораздо дольше компьютеров. И удивительно осознавать, что ты можешь выучить что-то совершенно новое для себя. Не только то, что уже придумано, а то, что придумывается прямо сейчас. Мы живем в такое удивительное время, когда цифровая фотография стала частью нашей повседневной жизни. Это значит, с одной стороны, что все вокруг – фотографы, и это здорово. Интересно посмотреть, что будет через пару, тройку или 20 лет. И это то, что завораживает меня в фотографии также, как в HTML5 – то, что самое лучшее только впереди.
Онлайн демонстрация возможностей HTML5
Здесь представлена презентация возможностей HTML5: http://apirocks.com/html5/html5.html#slide1
Откройте презентацию в отдельном окне и читайте перевод послайдово – номера слайдов написаны в адресной строке браузера.
Это необходимо, так как все возможности демонстрируются наглядно на самом сайте.
В Firefox почти все работает.
Итак, перевод:
Слайд 1
Эта презентация – сайт, написанный на HTML5
Нажимайте стрелку на клавиатуре, чтобы листать страницы.
Некоторые функции могут не работать, так как сайт написан под Google Chrome. Так что вы будете плакать от счастья, когда увидите работу в полном объеме на вашем IE после загрузки и установки Google Frame!
Слайд 2
HTML5 – Веб-развитие нового уровня
(включая следующие поколения других веб-технологий)
Слайд 3
Развитие Web-технологий по годам:
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5
Слайд 4
HTML5 ~= HTML + CSS + JS APIs
JS API:
Слайд 6
Новые селекторы
Нахождение элементов по классу (DOM API)
var el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
var els = document.getElementsByClassName('section');
els[0].focus();
Нахождение элементов по синтаксису CSS (Селекторы API)
var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");
Слайд 7
Web хранение
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
window.localStorage['value'] = area.value;
window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];
Пример использования: Сохраните e-mail на стороне клиента (защищено от взлома)
Слайд 8
Web SQL база данных
var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
«Сделать» «Построить таблицу» «Удалить таблицу»
Слайд 9
Кэш
<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);
CACHE MANIFEST # version 1 CACHE: /html5/src/refresh.png /html5/src/logic.js /html5/src/style.css /html5/src/background.png
Отключите интернет-соединение и обновите страницу!
(как известно, HTML5 позволит гораздо больше данных хранить на стороне клиента, так что многие приложения, например, gmail, будут работать и в автономном режиме, по крайней мере, в плане доступа к уже имеющейся информации, письмам – прим. переводчика)
Слайд 10
Web Worker-ы
main.js:
var worker = new Worker(‘extra_work.js');
worker.onmessage = function (event) { alert(event.data); };
extra_work.js:
// do some work; when done post message.
postMessage(some_data);
Web Worker-ы позволяют ява-скриптам исполняться параллельно работе остальной страницы, поэтому с worker-ами ява-скрипты работают гораздо быстрее и эффективнее. Чтобы увидеть разницу, нажмите сначала на кнопку “Find Route with Workers” (найти маршрут с помощью worker-ов) и “Find Route without Workers” (найти маршрут без worker-ов).
Слайд 11
Web Сокеты
var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }
Позволяют серверам передавать информацию браузерам.
Слайд 12
Уведомления
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}
«Установить разрешение на получение уведомлений»
Нажать, если вы хотите также переустановить настройки
Используйте свое имя на Twitter-е, чтобы показать ваше последние сообщение в качестве уведомления.
(Push Notification позволяет приложениям получать напоминания, обновления и оповещения из сети даже тогда, когда они не запущены. Подробнее на Push notification – прим. переводчика)
Слайд 13
Перетаскивание и бросание
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
Первое окно: «Выделите текст и перебросьте, выделенный вами текст появится в окне»
Второе окно: «Выделите текст и перебросьте, текст сменится на другой»
(Перетаскивать нужно в окно “Drop Area”, в окне “Source Data” будут выведены html-разметка и сам текст – прим. переводчика).
Ожидается в ближайшее время: перетаскивание файлов с вашего рабочего стола. (Фантастика! Прим. переводчика).
Слайд 14
Геолокация
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
map.setCenter(new GLatLng(lat, lng), 13);
map.addOverlay(new GMarker(new GLatLng(lat, lng)));
});
}
«Показать местоположение»
(apirocks.com запросит ваше местоположение и сохранит его на вашем компьютере, чтобы отображать на карте)
Слайд 15
Итого по JS API:
Хранение на стороне клиента (База данных Web SQL, кэш, Web-хранение данных)
Общение (веб-сокеты, worker-ы)
Новые возможности десктопа (Уведомления, перетаскивание и бросание)
Геолокация
HTML
Слайд 17
Новые семантические тэги
<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
Navigation...
</ul>
</nav>
<section>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
<aside>
Top links...
</aside>
<footer>
Copyright © 2009.
</footer>
</body>
Слайд 18
Новые link relations
<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" /> <link rel='icon' href="/favicon.ico" /> <link rel='pingback' href="http://myblog.com/xmlrpc.php"> <link rel='prefetch' href="http://myblog.com/main.php"> ... <a rel='archives' href="http://myblog.com/archives">old posts</a> <a rel='external' href="http://notmysite.com">tutorial</a> <a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a> <a rel='nofollow' href="http://notmysite.com/sample">wannabe</a> <a rel='tag' href="http://myblog.com/category/games">games posts</a> ...
(Link relations объясняют браузеру, какого типа ссылка прописана в тексте. Link rel встречались в HTML4 в элементе header. Теперь будут использоваться в тэге <a href=”#”>#</a> – прим. переводчика)
Слайд 19
Микродата
<div itemscope itemtype="http://example.org/band"> <p>My name is <span itemprop='name'>Neil</span>.</p> <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p> <p>I am <span itemprop='nationality'>British</span>.</p> </div>
(Отдельная тема – прим. переводчика)
Слайд 20
Доступные Rich Internet Приложения
(Как я поняла – примочки для слабовидящих пользователей интернета – детальные пояснения, что именно показывает страница, читаются скрин-ридерами и понятны людям – прим. переводчика).
<ul id="tree1"
role="tree"
tabindex="0"
aria-labelledby="label_1"
>
<li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
<li role="group">
<ul>
<li role="treeitem" tabindex="-1">Oranges</li>
<li role="treeitem" tabindex="-1">Pineapples</li>
...
</ul>
</li>
</ul>
Слайд 21
Новые типы полей в формах
- Что уже внедрено
<input type='range' min='0' max='50' value='0'> <input autofocus type='search'> <input type='text' placeholder='Search inside'>
- Что ожидается
<menu> <progress> <input type='color'> <input type='number'> <input type='email'> <input type='tel'> <input type='time'> <input type='date'> <input type='month'> <input type='week'> <input type='datetime'>
Слайд 22
Тэги audio и video
<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;
<video src='movie.mp4' autoplay controls ></video>
document.getElementById("video").play();
Слайд 23
Canvas (в переводе – холст, рисование векторных элементов, графиков и прочего средствами HTML5 – прим. переводчика)
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>
Слайд 24
Пример использования Canvas
Кнопки:
«Экспортировать в JPEG»
«Экспортировать в PNG (тяжелый файл)»
Фото: без рамки, с рамкой, рамка Полароид.
Показать углы
Слайд 25
Canvas 3D (Web GL)
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
...
</script>
Демо требует браузера с поддержкой WebGL
Слайд 26
Итого по HTML:
- Семантика (Новые тэги, link relations, Микродата)
- Доступность (ARIA)
- Веб-формы (новые поля)
- Мультимедиа (Тэги Audio и Video)
- Рисование 2D и 3D (Canvas, WebGL)
CSS
Слайд 28
CSS-селекторы
Селекторы
.row:nth-child(even) {
background: #dde;
}
.row:nth-child(odd) {
background: white;
}
Отображение контента наподобие отображения картинок
div {
display: inline-block;
}
Специальные аттрибуты
input[type="text"] {
background: #eee;
}
Отрицание (условие выполняется при отрицательном результате, т.е является true при результате false – прим. переводчика)
:not(.box) {
color: #00c;
}
:not(span) {
display: block;
}
Более точечный таргетинг
h2:first-child { ... }
div.text > div { ... }
h2 + header { ... }
Слайд 29
Поддержка новых шрифтов
@font-face {
font-family: 'Junction';
src: url(Junction02.otf);
}
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}
@font-face {
font-family: 'GG250';
src: url(General250.otf);
}
header {
font-family: 'LeagueGothic';
}
LeagueGothic без замены на картинки
Слайд 30
Сворачивание текста (Text Wrapping)
div {
text-overflow: ellipsis;
}
Попробуйте ввести разные цифры в поле под текстом и нажать Enter – увидите результат!
То же самое касается следующих страниц.
Слайд 31
Колонки
-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;
Слайд 32
Обводка текста
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
}
Слайд 33
Прозрачность
color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75);
(Тоже измените цифры в полях color и background, изменится прозрачность текста и подложки – прим. переводчика).
Слайд 34
То же самое, но в цветовой модели Hue/saturation/luminance
color: hsla( 128, 75%, 33%, 1.00);
Слайд 35
Скругленные углы
border-radius: 0px;
Слайд 36
Градиенты
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
Слайд 37
Тени
text-shadow: rgba(64, 64, 64, 0.5) 0px 0px 0px; box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
Слайд 38
Мгновенный Web 2.0 (только поменяйте цифры)
text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); border-radius: 0px; -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0)));
Слайд 39
Расширение возможностей бэкграунда
- Изменение размеров бэкграунда:
#logo { background: url(logo.gif) center center no-repeat; background-size: auto contain cover 100% ; } - Несколько бэкграундов
div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x; }
Слайд 40
Перемещения
#box.left {
margin-left: 0;
}
#box.right {
margin-left: 1000px;
}
document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';
#box {
-webkit-transition: margin-left 1s ease-in-out;
}
document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';
Слайд 41
Трансформации
«Проведи надо мной мышью»
-webkit-transform: rotateY(45deg); -webkit-transform: scaleX(25deg); -webkit-transform: translate3d(0, 0, 90deg); -webkit-transform: perspective(500px)
#threed-example {
-webkit-transform: rotateZ(5deg);
-webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
-webkit-transform: rotateZ(-5deg);
}
«А теперь нажми цифру 3!»
Слайд 42
Анимация
@-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
Слайд 43
Итого по CSS:
- Шрифты
- Визуальные эффекты
- Перемещения, трансформации и анимация
Слайд 44
Где уже работает?
- В современных браузерах
- В мобильных браузерах
- В Google Chrome / Firefox
Слайд 45
Chrome Frame:
- Это самый простой способ апгрейдить IE6, 7 и 8 до уровня современных технологий HTML5
- Два способа сделать ваш сайт готовым для Chrome Frame:
на стороне клиента
<meta http-equiv="X-UA-Compatible" content="chrome=1">
на стороне сервера
X-UA-Compatible: chrome=1
Попробуйте загрузить эту презентацию в IE!
Слайд 46
HTML5 ~= HTML + CSS + JS APIs
Уроки HTML5 – создаем макет
Перевод Виктории Шидловской статьи из журнала Smashing Magazine – Coding A HTML 5 Layout From Scratch
HTML5 и CSS3 все еще находятся в разработке, вот почему мы не можем применять их для рабочих проектов прямо сейчас. Тем не менее, доказано временем, что незавершенная спецификация все равно работает. Но при ее внедрении нужно пользоваться определенными приемами, в нашем случае это будут: Прогрессивное улучшение и Вежливое ухудшение.
Поэтому сегодня мы научимся применять эти две техники. После этого урока вы сможете:
- Использовать Вежливое ухудшение для того, чтобы вещи оставались на своих местах при отображении в действующих браузерах.
- Использовать Прогрессивное улучшение, чтобы оставаться на острие событий.
- Использовать HTML5 вместе с быстро-растущей технологией Microformats.
- Иметь четкое представление о самых замечательных возможностях, которые обещает нам появление HTML5 и CSS3.
Для начала лучше прочитать следующие статьи:
HTML5 – введение в новый язык разметки
HTML5 SHIV теперь в виде скрипта!
Я также расчитываю на то, что вы знаете основы HTML, CSS, включая все «старые» тэги и свойства.
До того, как мы начнем…
Есть пара вещей, которые вы должны знать о HTML5. Дело в том, что этот язык не для всех. Поэтому вы должны тщательно выбирать, где и когда его применять. Думайте о всех способах разметки, как об инструментах, которые находятся в вашем распоряжении и используйте нужный инструмент в нужном месте. Так что если, предположим, ваш документ написан на XHTML strict, то нет никакой необходимости переписывать его на HTML5.
Также необходимо помнить, что использование HTML5 прямо сейчас ввергает вас в состояние неопределенности, потому что даже если ваш браузер обрабатывает HTML5, это не значит, что он его понимает. То же самое касается скринридеров и поисковых роботов.
Так что если вы готовы сделать шаг вперед, не боитесь использовать новые технологии, то продолжайте читать.
Несколько слов о Прогрессивном улучшении и Вежливом ухудшении
Итак, что означают эти термины? Вежливое ухудшение – широко распространенная техника, когда сначала используют новейшую технологию, а потом подгоняют ее под старые браузеры. Мы делаем это ежедневно. Большинство из нас сначала пишут код под Firefox, а потом фиксируют и исправляют ошибки под Explorer. Это и есть Вежливое ухудшение в действии.
Прогрессивное улучшение – это манера сначала строить документ для менее развитого браузера, а потом подтягивать под новейшие технологии. Мы также используем этот прием каждый день. К примеру, мы начинаем с разметки документа в HTML, а потом применяем к нему листы стилей. Это Прогрессивное улучшение в действии.
Обе техники идут рука об руку и являются частью работы, которую мы выполняем годами.
1. Дизайн
Это шаблон, который мы сейчас будем собирать:
Данный шаблон включает все элементы, которые мы будем изучать в этом уроке, а именно: название страницы и ее слоган (name & slogan), рекламный блок (в оригинале featured block, не смогла подобрать аналог на русском, у нас обычно блоки «Новости» или «Акции» – прим. переводчика), список постов (post listing), экстра-раздел с линками (extras section), подвал с описанием страницы (about box) и, наконец, копирайт (copiright).
2. Разметка страницы
Стартовая разметка страницы, HTML5-скелет:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Smashing HTML5!</title> <link rel="stylesheet" href="css/main.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lte IE 7]> <script src="js/IE8.js"></script><![endif]--> <!--[if lt IE 7]> <link rel="stylesheet" media="all" href="css/ie6.css"/><![endif]--> </head> <body> </body> </html>
Несколько замечаний:
- 3 помеченных комментариями записи для IE. Первая встраивает html5 shiv из Google Code (читайте HTML5 SHIV теперь в виде скрипта!). Вторая включает IE8.js для лучшей обратной совместимости с IE7 и ниже. Третья – это файл CSS, который исправляет баги в IE6.
- Использование id “index” и class “home” в тэге <body>. Это просто привычка, которую я выработал за последний год, она упростила сборку сложных макетов.
- Упрощенный charset для лучшей обратной совместимости с действующими браузерами.
- Я использую синтаксис XHTML 1.0 при сборке шаблона на HTML5. Так как я МОГУ использовать этот синтаксис, то так я и делаю. Однако вы можете использовать обычный HTML. Отличия от HTML – закрывание самозакрывающихся тэгов (<br />, например) и отсутствие кавычек в размерных атрибутах (width = 200). Но это на ваш выбор.
Это основа для нашего будущего шаблона в HTML5. Теперь мы можем прописывать тэги в различных разделах сайта.
Если бы существовал рентген-аппарат для вебсайтов, то вот такой скелет вы бы увидели:
Шапка (header)
Понятие header так же элементарно, как его перевод с английского. В спецификации написано:
«Элемент header отображает группу презентационных элементов и навигацию».
Также мы будем использовать элемент <nav>.
Спецификация о nav:
«Элемент nav отображает часть страницы со ссылками на другие страницы или части в пределах страницы. Не все группы ссылок обязаны быть заключенными в тэги nav, только те, которые представляют собой главные навигационные блоки».
Было много бурчанья по поводу спецификации элемента nav, так как фраза «главные навигационные блоки» слишком раплывчата. Но так как сейчас мы говорим о главной навигации всего сайта, то ничего главнее быть не может. Так что после пары id и классов наш header выглядит так:
<header> <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1> <nav><ul> <li><a href="#">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul></nav> </header><!-- /#banner -->
Рекламный блок (featured)
Его лучше всего разметить как <aside>, так как спецификация aside гласит:
«Элемент aside отображает раздел страницы, содержимое которого поверхностно касается основного содержимого страницы вне элемента aside, и который может существовать отдельно от этого содержимого. Такие разделы в печатной продукции обычно являются боковыми колонками».
В спецификации достаточно много обоснований для использования этого элемента в нашем случае. А внутри этого блока происходит много чего еще. Во-первых, внутри будет заметка, а значит мы будем использовать тэг <article>.
У нас также есть два последовательных заголовка: «Featured Article» и «HTML5 in Smashing Magazine!», так что мы будем использовать еще один элемент – <hgroup>. Это прекрасный тэг, предназначенный для группирования тэгов <h#>, – как раз наш случай. Он существует для маскирования элемента h2 (заголовка второго уровня), что спасет разработчиков от лишней головной боли в будущем.
И последний элемент в этом блоке – логотип журнала Smashing Magazine. Для этого у нас есть еще один элемент разметки – <figure>. Этот тэг предназначен для включения контента, обычно с заголовком, который самодостаточен и отделен от остального содержимого. Мы также могли бы использовать тэг <legend> для заголовка. К сожалению, он не работает в некоторых браузерах, которые пытаются добавить <fieldset>, и этот баг невозможно преодолеть силам простого CSS (читайте Что такое HTML5 SHIV – уроки HTML5). Поэтому я предлагаю обойтись без <legend>, остановимся пока на использовании <figure>.
Код рекламного блока будет выглядеть так:
<aside><article> <figure> <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" /> </figure> <hgroup> <h2>Featured Article</h2> <h3><a href="#">HTML5 in Smashing Magazine!</a></h3> </hgroup> <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p> </article></aside><!-- /#featured -->
Основное содержимое (body)
Следующий этап – создание «тела» нашего документа. Так как этот блок отображает главное содержимое, а оно представляет собой группу тематических сообщений, то без сомнения здесь можно применить тэг <section>.
Для постов мы используем элемент <ol>, так как это обычный список статей. Каждый <li> будет содержать <article>, а внутри у нас будут располагаться <header> для заголовка поста, <footer> для информации о посте и <div> для содержимого поста. Да, <div>. Причина использования <div> очень проста: мы будем использовать hAtom 0.1 Microformat, а он требует div-а для того, чтобы контент растягивался. Так как никакой другой элемент не подходит для этого (это не section, не article и не footer), то мы возьмем <div> – он не несет никакой семантической нагрузки и отобразит разметку максимально чисто.
Со всеми этими тэгами и вставленным hAtom microformat код будет выглядеть так:
<section> <ol> <li><article> <header> <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2> </header> <footer> <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ --> 10th October 2005 </abbr> <address> By <a href="#">Enrique Ramírez</a> </address> </footer><!-- /.post-info --> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p> </div><!-- /.entry-content --> </article></li> <li><article> ... </article></li> <li><article> ... </article></li> </ol><!-- /#posts-list --> </section><!-- /#content -->
Для продвинутых: да, я не использовал элемент <time>. Этот тэг сравнительно новый и несовместим с текущим microformat. Так как я в самом деле использую hAtom, то вместе ни microformat, ни новый тэг не будут работать. Если вы не используете microformat, то можно использовать <time>.
Экстра-раздел
Экстра-блок – еще один раздел нашего сайта. Вы можете посомневаться немного, какой тэг лучше сюда подойдет: <aside> или <section>. В конце концов, так как раздел не совсем тематически отделен от основного содержимого (все же это тематические линки и социальная сеть), то лучше используем тэг <section>.
Здесь мы найдем другое применение тэгу <div>. В целях стилизации и разделения на группы мы добавим два дива: один для блогролла и один для социального раздела.
Что касается остального, то здесь нечего решать: используем наш обычный <ul> для списка ссылок в обоих разделах. Выглядит это так:
<section> <div> <h2>blogroll</h2> <ul> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> </ul> </div><!-- /.blogroll --> <div> <h2>social</h2> <ul> <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li> <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li> <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li> <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li> <li><a href="http://website.com/feed/" rel="alternate">rss</a></li> <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li> </ul> </div><!-- /.social --> </section><!-- /#extras -->
Описание страницы и копирайт (about box & copyright)
подвал (футер) шаблона HTML5
Подвал не являет собой ничего сложного. Мы используем новый тэг <footer>, чтобы растянуть блок с описанием страницы и копирайт, так как в спецификации сказано:
«Элемент footer отображает контент, относящийся к ближайшему «родителю». Обычно footer содержит информацию о разделе, такую как: кто его написал, ссылки на относящиеся к нему статьи, копирайт и все в таком духе».
Так как ближайшим «родителем» нашего <footer> является <body>, то более чем правильно разместить оба элемента здесь, указывая автора и владельца сайта.
Для блока «о сайте» мы используем тэг <address>, который будет содержать контактную информацию о своем ближайшем «родителе» – элементов <article> или <body>. Мы также используем hCard Microformat (для того, чтобы роботы и люди могли иметь более полное представление о контактной информации; о микроформатах будет написано позже – прим. переводчика). Для копирайта мы используем обычный тэг <p>. Так что в конце концов подвал выглядит так:
<footer> <address> <span> <strong><a href="#">Smashing Magazine</a></strong> <span>Amazing Magazine</span> </span><!-- /.primary --> <img src="images/avatar.gif" alt="Smashing Magazine Logo" /> <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span> </address><!-- /#about --> <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p> </footer><!-- /#contentinfo -->
Собираем все вместе
Итак, после всех этих манипуляций код выглядит так:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Smashing HTML5!</title> <link rel="stylesheet" href="css/main.css" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lte IE 7]> <script src="js/IE8.js"></script><![endif]--> <!--[if lt IE 7]> <link rel="stylesheet" media="all" href="css/ie6.css"/><![endif]--> </head> <body> <header> <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1> <nav><ul> <li><a href="#">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul></nav> </header><!-- /#banner --> <aside><article> <figure> <img src="images/temp/sm-logo.gif" alt="Smashing Magazine" /> </figure> <hgroup> <h2>Featured Article</h2> <h3><a href="#">HTML5 in Smashing Magazine!</a></h3> </hgroup> <p>Discover how to use Graceful Degradation and Progressive Enhancement techniques to achieve an outstanding, cross-browser <a href="http://dev.w3.org/html5/spec/Overview.html" rel="external">HTML5</a> and <a href="http://www.w3.org/TR/css3-roadmap/" rel="external">CSS3</a> website today!</p> </article></aside><!-- /#featured --> <section> <ol> <li><article> <header> <h2><a href="#" rel="bookmark" title="Permalink to this POST TITLE">This be the title</a></h2> </header> <footer> <abbr title="2005-10-10T14:07:00-07:00"><!-- YYYYMMDDThh:mm:ss+ZZZZ --> 10th October 2005 </abbr> <address> By <a href="#">Enrique Ramírez</a> </address> </footer><!-- /.post-info --> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque venenatis nunc vitae libero iaculis elementum. Nullam et justo <a href="#">non sapien</a> dapibus blandit nec et leo. Ut ut malesuada tellus.</p> </div><!-- /.entry-content --> </article></li> <li><article> ... </article></li> <li><article> ... </article></li> </ol><!-- /#posts-list --> </section><!-- /#content --> <section> <div> <h2>blogroll</h2> <ul> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> <li><a href="#" rel="external">HTML5 Doctor</a></li> <li><a href="#" rel="external">HTML5 Spec (working draft)</a></li> <li><a href="#" rel="external">Smashing Magazine</a></li> <li><a href="#" rel="external">W3C</a></li> <li><a href="#" rel="external">Wordpress</a></li> <li><a href="#" rel="external">Wikipedia</a></li> </ul> </div><!-- /.blogroll --> <div> <h2>social</h2> <ul> <li><a href="http://delicious.com/enrique_ramirez" rel="me">delicious</a></li> <li><a href="http://digg.com/users/enriqueramirez" rel="me">digg</a></li> <li><a href="http://facebook.com/enrique.ramirez.velez" rel="me">facebook</a></li> <li><a href="http://www.lastfm.es/user/enrique-ramirez" rel="me">last.fm</a></li> <li><a href="http://website.com/feed/" rel="alternate">rss</a></li> <li><a href="http://twitter.com/enrique_ramirez" rel="me">twitter</a></li> </ul> </div><!-- /.social --> </section><!-- /#extras --> <footer> <address> <span> <strong><a href="#">Smashing Magazine</a></strong> <span>Amazing Magazine</span> </span><!-- /.primary --> <img src="images/avatar.gif" alt="Smashing Magazine Logo" /> <span>Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It was founded by Sven Lennartz and Vitaly Friedman.</span> </address><!-- /#about --> <p>2005-2009 <a href="http://smashingmagazine.com">Smashing Magazine</a>.</p> </footer><!-- /#contentinfo --> </body> </html>
3. CSS
Как и основной код, наш CSS сначала выглядит очень просто. Это шаблон, который я открываю в начале работы над любым проектом:
/*
Name: Smashing HTML5
Date: July 2009
Description: Sample layout for HTML5 and CSS3 goodness.
Version: 1.0
Author: Enrique Ramírez
Autor URI: http://enrique-ramirez.com
*/
/* Imports */
@import url("reset.css");
@import url("global-forms.css");
/***** Global *****/
/* Body */
body {
background: #F5F4EF url('../images/bg.png');
color: #000305;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: left;
}
/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */
h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
color: #C74350;
padding: 0 1px;
text-decoration: underline;
}
a:hover, a:active {
background-color: #C74350;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
strong, b {font-weight: bold;}
em, i {font-style: italic;}
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
/* Lists */
ul {
list-style: outside disc;
margin: 1em 0 1.5em 1.5em;
}
ol {
list-style: outside decimal;
margin: 1em 0 1.5em 1.5em;
}
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
/* Quotes */
blockquote {font-style: italic;}
cite {}
q {}
/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}
/* Thead */
thead th {padding: .5em .4em; text-align: left;}
thead td {}
/* Tbody */
tbody td {padding: .5em .4em;}
tbody th {}
tbody .alt td {}
tbody .alt th {}
/* Tfoot */
tfoot th {}
tfoot td {}
Это наш первый шаг на пути приведения макета в порядок. Мы можем применить стили к большинству базовых элементов, так мы и поступим. Несколько замечаний:
- Для оптимального кодирования некоторая информация обо мне в начале файла.
- 2 импорта в начале файла. Первый – Eric Meyer’s CSS reset. Второй – персонализированные глобальные формы, смысл которых я объясню позже.
- Базовые стили для основных тэгов.
Объяснение некоторых свойств
Во-первых, я использую свойство CSS3 text-shadow. Для объяснения прилагаю пример:
text-shadow: 1px 5px 2px #333;
Благодаря этому мы получим тень цветом #333, отбрасываемую текстом на 1 пиксель вправо, 5 пикселей вниз и с размытием в два пикселя. Просто, не так ли? Вы можете использовать значения hex и rgba плюс CSS unit (кроме %).
Также у нас в распоряжении эта крошка:
* p:last-child {margin-bottom: 0;}
Эта строка удалит margin вниз в тэге <p>, если он является последним дочерним элементом (child) у своего «родителя» (parent). Дя тех, кто незнаком с ООП: пример – child таблицы – это <tr> или <td>; соответственно, <table> – их родитель. Последний child таблицы – это последний tr, то есть – последняя строка. То, что мы сделали в нашем примере – полезно для избежания слишком больших вертикальных расстояний между параграфом (текстом) и нижней границей таблицы.
Наконец, у нас есть пара селекторов:
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
::selection – это CSS3 selector, который позволяет нам задавать стиль выделяемого текста. Имеет только две возможности – задавать цвет фона и цвет шрифта. ::-moz-selection тоже должен быть прописан, так как Мозилла не распознает селектор ::selection.
Запускаем HTML5
Как я уже говорил ранее, HTML5 пока еще не распознается браузерами. А если браузер не распознает элемент, он не может применить к нему стили.
Справедливо предположить, что все браузеры будут применять что-то вроде display:inline для нераспознанных элементов. Это не тот стиль, который мы хотели бы видеть в действии для таких элементов, как <section>, поэтому мы должны объяснить браузеру, как он должен отображать эти элементы:
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {
display: block;
}
Ну вот! Теперь мы можем стилизовать наши элементы так, как если бы они были обычными div-элементами!
Некоторые из вас наверное заметили, что я добавил атрибут class=”body” в главном разделе нашего макета. Я хочу, чтобы «тело» моего сайта было определенной ширины – 800 пикселей. И я никогда не был фанатом использования огромных растянутых div-ов для этих целей. Поэтому мы используем базовую технику центрирования с помощью margin-ов. Также я добавлю пару общих классов, которые будут использованы для второстепенного контента.
/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
Стилизозвание header
Начнем с header. Это просто. Мы всего лишь зададим отступы и кое-какое стилизование текста. Ничего такого, чего мы не делали до сих пор.
/*
Header
*****************/
#banner {
margin: 0 auto;
padding: 2.5em 0 0 0;
}
/* Banner */
#banner h1 {font-size: 3.571em; line-height: .6;}
#banner h1 a:link, #banner h1 a:visited {
color: #000305;
display: block;
font-weight: bold;
margin: 0 0 .6em .2em;
text-decoration: none;
width: 427px;
}
#banner h1 a:hover, #banner h1 a:active {
background: none;
color: #C74350;
text-shadow: none;
}
#banner h1 strong {font-size: 0.36em; font-weight: normal;}
Сейчас стилизуем навигацию. Опять ничего особенного:
/* Main Nav */
#banner nav {
background: #000305;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 2em auto;
padding: 0;
text-align: center;
width: 800px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 1.5em;
text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
background: #C74451;
color: #fff;
text-shadow: none !important;
}
#banner nav li:first-child a {
border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
Здесь мы используем новую возможность CSS3: border-radius. Это новое свойство CSS3 позволяет нам создавать скругленные углы для блоков без необходимости использовать семантически-неверные тэги, которые превращают в хаос весь наш код, миллионы изображений или фоновое расположение картинок. Нет, это все в прошлом. Теперь мы просто задаем радиус скругления угла обводки и все.
Конечно, border-radius еще не широко распространен, поэтому мы будем применять эквиваленты для браузеров Mozilla и Webkit. Существует несколько вариантов этого свойства, и ваш код может стать слишком длинным, но если вы хотите получить скругленные углы в большинстве браузеров, то добавляйте все.
Вы могли также заметить !important. Используется для отмены стиля по умолчанию (text-shadow) без сложных уточнений. В данном примере – больше в обучающих целях.
Стилизование блоков Featured и Body
Далее – CSS для обоих блоков. Заметьте, там нет стилей для постов, только для основного контента.
/*
Featured
*****************/
#featured {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#featured figure {
border: 2px solid #eee;
float: right;
margin: 0.786em 2em 0 5em;
width: 248px;
}
#featured figure img {display: block; float: right;}
#featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
/*
Body
*****************/
#content {
background: #fff;
margin-bottom: 2em;
overflow: hidden;
padding: 20px 20px;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
Опять-таки, – ничего нового, обычные стили: margin, background, color и text. Повторяю это для того, чтобы вы поняли, что стили в HTML5 такие же простые как были до этого.
Стили для блока Extra
Наконец что-то интересное. Но начнем с базового стилизования.
/*
Extras
*****************/
#extras {margin: 0 auto 3em auto; overflow: hidden;}
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
color: #C74350;
font-size: 1.429em;
margin-bottom: .25em;
padding: 0 3px;
}
#extras a:link, #extras a:visited {
color: #444;
display: block;
border-bottom: 1px solid #F4E3E3;
text-decoration: none;
padding: .3em .25em;
}
/* Blogroll */
#extras .blogroll {
float: left;
width: 615px;
}
#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
/* Social */
#extras .social {
float: right;
width: 175px;
}
Как вы видите на картинке, у меня трехколоночный макет для блока blogroll с плавающими <li>, и последняя колонка с социальной информацией гораздо Уже двух остальных. Макет хорош и так, но меня беспокоит одна вещь: я про border под каждой строкой.
Голубым выделена область, которая мне не нравится. Я добавил по одному border-у под каждым элементом: <li> и <a> тэги имеют подчеркивание снизу шириной в один пиксель, но разного цвета, и я не хочу этого подчеркивания в самой последней строке. Так что мы удалим border у последних двух элементов в блогролле и одного в социалке.
Сначала удалим подчеркивание у последних <li> каждого блока. С использованием селектора CSS3 :last-child, мы можем вычленить последний <li> у родительского <ul>.
#extras li:last-child, /* last <li>*/
#extras li:last-child a /* <a> of last <li> */
{border: 0}
Таким образом мы удалили подчеркивание для ‘li’ и ‘li a’ в последнем элементе. Но как удалить его для двух предыдущих?
Встречайте :nth-last-child().
#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}
Выглядит сложно? На самом деле мы просто указываем на последние два элемента с конца, как раз те, где я хочу удалить border.
Как и следовало ожидать, этот прием не работает в IE, хотя IE8.js поддерживает :last-child, он не поддерживает :nth-last-child, так что подчеркивание в нем появится. Но это не главная дизайнерская проблема, так как информация на сайте все равно доступна. Так что не будем заострять внимание на удалении border-ов в IE.
Добавление иконок в социальный раздел
Добавим немного специй. Мы все знаем, как здорово выглядят маленькие иконки напротив каждой ссылки. Мы везде встречаем этот дизайнерский прием. Существует миллион способов сделать это, но мы воспользуемся новым селектором CSS3.
Знакомьтесь: a[n='b'] выделит все <a> с атрибутом n значения b. Например, если мы используем a[href='picture.jpg'], то мы укажем CSS3 на элемент <a href="picture.jpg">. Это здорово, но не свовсем то, чего мы хотим добиться, так как в нашем случае URL-ы картинок могут различаться. Вот несколько селекторов, которые могут нам пригодиться:
a[n]выделит все<a>с атрибутомn, независимо от его значения.a[n='b']выделит все<a>с атрибутомnзначенияb.a[n~='b']выделит все<a>с атрибутомn, который равенb, аbв свою очередь – одно из значений в списке разделенных пробелами чисел (или букв).a[n^='b']выделит все<a>с атрибутомnкоторый начинается со значенияb.a[n*='b']выделит все<a>с атрибутомnсо значениемbгде-либо в пределах имени (или значения).
Последний вариант подходит нам как нельзя лучше. Так что мы будем выделять все <a> тэги с кусочком текста где-нибудь в пределах URL. Вот наш код:
#extras div[class='social'] a {
background-repeat: no-repeat;
background-position: 3px 6px;
padding-left: 25px;
}
/* Icons */
.social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
.social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='last.fm'], .social a[href*='lastfm'] {background-image: url('../images/icons/lastfm.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
Первый кусок кода добавит отступ (padding) к социальным ссылкам, чтобы появилось место для иконок. Он также добавит фон по умолчанию, чтобы мы не делали этого потом. Вам наверное интересно, почему я написал div[class='social']вместо того, чтобы написать div.social. Просто потому, что некоторые браузеры (IE, как всегда) не поддерживают этот вид селектора, а мы не хотим появление белого зазора перед сдвинутыми ссылками. Поэтому прописывание того же фона, что и для фона иконок, будет нашей страховкой. IE в таком случае не выполнит ни padding, ни background image, а все остальные браузеры выполнят.
Второй раздел кода использует объясненный выше селектор, чтобы выделить каждую ссылку социальной сети и добавить к ним иконки. Эта техника CSS не представляет собой ничего нового, она не так часто используется (я даже видел использование ява-скриптов для достижения тех же целей), хотя заслуживает вашего внимания.
Стилизуем footer
И наконец – footer. Как и прежде – обычный CSS, ничего нового, кроме border radius:
/*
About
*****************/
#about {
background: #fff;
font-style: normal;
margin-bottom: 2em;
overflow: hidden;
padding: 20px;
text-align: left;
width: 760px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
#about .photo {float: left; margin: 5px 20px;}
#about .url:link, #about .url:visited {text-decoration: none;}
#about .bio {float: right; width: 500px;}
/*
Footer
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}
Список постов
Остался последний элемент, требующий стилизования. Опять базовый CSS, но на этот раз добавим быстрый эффект, который проявляется, когда пользователь проводит мышкой над постами.
/* Blog */
.hentry {
border-bottom: 1px solid #eee;
padding: 1.5em 0;
}
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
#content > .hentry {padding: 1em 0;}
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
.hentry .post-info * {font-style: normal;}
/* Content */
.hentry footer {margin-bottom: 2em;}
.hentry footer address {display: inline;}
#posts-list footer address {display: block;}
/* Blog Index */
#posts-list {list-style: none; margin: 0;}
#posts-list .hentry {padding-left: 200px; position: relative;}
#posts-list footer {
left: 10px;
position: absolute;
top: 1.5em;
width: 190px;
}
Я удаляю все margin и padding для последнего поста (чтобы исчез большой зазор внизу блока). Также я использую селектор ‘>’, который указывает на конкретный дочерний элемент (child). Например #content > .hentry укажет на элемент a.hentry, находящийся прямо внутри #content. Если бы .hentry находился, к примеру, в списке, то это правило уже бы не сработало, так как .hentry в таком случае был бы «внуком» (grandchild), а не прямым наследником (child) элемента #content. Так что мы указываем именно на пост.
Продолжаем код:
#posts-list .hentry:hover {
background: #C64350;
color: #fff;
}
#posts-list .hentry:hover a:link, #posts-list .hentry:hover a:visited {
color: #F6CF74;
text-shadow: 1px 1px 1px #333;
}
Этот код изменит фон <li>, цвет текста и цвет ссылок, когда мышка находится над <li>.
HTML5 позволяет пользователям заключать в тэг <a> целые блоки информации. Так что мы можем заставить весь элемент <hentry> вести себя как единая ссылка. Но после нескольких тестов я выяснил, что Firefox 3.5.1 не готов к таким экспериментам, возможно, от слишком большого количества неизвестных эелементов внутри .hentry. Safari, Opera и даже IE6 вели себя правильно. Взгляните на тестовую страницу. Ниже несколько скриншотов, если у вас есть только один браузер.
Opera 9.64:
Safari 4.0.2:
Internet Explorer 6:
Firefox 3.5.1:
Так что в Firefox выделение блоков информации в качестве ссылок не работает. Однако мы можем добавить хороший эффект элементу <li>.
Оптимизация под IE6
Наконец, мы должны как-то довести все это до IE6. Ниже файлы ie.css и ie6.css, каждая строка имеет комментарий справа или сверху, который объясняет, что происходит.
Это код для ie.css:
#banner h1 {line-height: 1;} /* Fixes Logo overlapping */
Этот для ie6.css
#featured figure {display: inline;} /* Double margin fix */
#posts-list footer {left: -190px;} /* Positioning fix */
/* Smaller width for Social block
so it won't jump to next line */
#extras .social {width: 165px;}
Итак, как выглядит теперь наш макет? Взгляните на финальный продукт. Он был протестирован на IE6, Firefox 3, Firefox 3.5, Opera 9.64 и Safari 4.0.2, везде отображается правильно.
Теперь можно сказать, что с помощью HTML5 и CSS3 вы можете уже сегодня достичь результатов, которые будут без проблем работать в устаревших, текущих и будущих версиях браузеров. Мы все еще далеки от полного использования крутых возможностей HTML5, но мы можем использовать его уже сейчас.
Читать далее:
Новинка! Презентация HTML5 Тестирование новых возможностей HTML5 онлайн!
HTML5 – введение в новый язык разметки
HTML5 SHIV теперь в виде скрипта!
Если хотите понять причины засилия минимализма, массового перехода с флэша на ява-скрипт и jQuery, истерию вокруг HTML5, а также разобраться во Второй Холодной войне между Apple и Microsoft – читайте статью «Почему минимализм, или какой сайт делать».
Оставьте комментарий