пятница, 25 ноября 2011 г.

Еще одна мысль на тему, почему Lorem ipsum калечит Ваш дизайн

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

Оокей, не волнуйтесь. Я тут не для того распинаюсь, чтобы давать Вам непрактичные советы или рассказывать то, что Вы и без меня прекрасно знаете. Я знаю, что если бы дизайнеры имели реальный контент, то они ни в коем случае не стали использовать Lorem ipsum, и с этим не поспоришь. Но, если все-таки Вас вынуждают использовать текстовую рыбу, то... вместо Lorem ipsum, Hipster ipsum, или Samuel L. Ipsum, я считаю, что Вы должны использовать первый абзац любой случайной статьи из Википедии.

Чтобы понять, зачем, давайте рассмотрим простой текст. Пожалуйста, внимательно прочтите следующее:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in the answer is purple voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

А теперь, если я спрошу, какой мой любимый цвет, то Вы сможете мне ответить?

А ведь ответ есть в прочтенном Вами тексте!

Как же так? Все потому, что как только Ваши глаза наткнулись на незнакомые латинские слова, то они просто соскользнули в его конец и Вы почти мгновенно прекратили чтение. Поверьте, Вы не сможете настроить свой мозг так, чтобы он смог переварить такую тарабарщину, как 100500 латинских слов.

Просмотр против Чтения

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

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

Почему Латынь?

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

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

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

Источник: http://www.attackofdesign.com/why-lorem-ipsum-is-hurting-your-designs/

на 12:01 AM 0 коммент.

Ярлыки: , ,

четверг, 3 ноября 2011 г.

Об атрибуте scope в HTML5

В спецификации HTML5 был добавлен новый атрибут scope для тэга <style>. Итак, эта заметка о том, как работает этот новый атрибут и как это можно использовать.

Этот атрибут, исходя из названия, используется для того, чтобы ограничить область действия стиля, для которого он (атрибут) указан. Область действия стиля с таким атрибутом будет распространяться на родительский элемент, внутри которого находится тег <style> этого стиля, и всех дочерние элементы этого родителя. Все элементы снаружи области действия будут проигнорированы даже в случае полного совпадения селекторов. Этот атрибут принимает булевские значения, так что указывать его можно либо как просто scope для HTML, либо как scope="scoped" для XML/XHTML. Вот небольшой пример использования этого атрибута:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Пример использования атрибута scope</title>
        <style>
            p { color: black; }
        </style>
    </head>
    <body>
        <p>Цвет текста в этом параграфе будет черным.</p>
        <div>
            <style scoped>
                p { color: green; }
            </style>
            <p>А здесь - зеленым.</p>
            <p>И тут!</p>
        </div>
        <p>А тут - снова черным.</p>
    </body>
</html>

В браузерах, которые поддерживают этот атрибут, цвет текста в тех параграфах, что внутри <div>, будет зеленым, в остальных же - черным. Любой стиль, внутри тега <style> с ограниченной областью действия, будет применен только к его родителю (в данном случае - к <div>) и всем дочерним элементам этого родителя (в данном случае - к двум <p>).

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

Зачем использовать стили с ограниченной областью действия?

Первый вопрос, который может возникнуть в голове у верстальщика, узнавшего про scope: "Где я могу это использовать?". Когда мы вставляем код стилей в HTML, то это не сильно, на первый взгляд, отличает scoped-стили от обыкновенных inline. Не надо путать эти два понятия.

Вот пара ситуаций, в которых можно было бы применить <style> с атрибутом scope. Первая - это какие-либо html-демо на странице. Чтобы не париться с различными блоками и их id, достаточно просто создать стиль с ограниченной областью действия и вставить его прямо в страницу. Это может пригодиться лишь немногим веб-разработчикам, но, тем не менее, использование новых возможностей в такой ситуации - очевидно.

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

Какими браузерами это поддерживается?

Кхм... да пока никакими! Только работы по поддержки этого свойства в WebKit идут...

Было бы неплохо...

Основная критика, которую народ высказывает по поводу scope - это то, что новая возможности практически ничем не отличается от inline-стилей. Возможно, было бы логично сделать что-то вроде такого: <link rel="stylesheet" href="style.css" scoped for="scoped-element" />, - где вместо "scoped-element" был бы id родительского для этого стиля элемента. Но, умные люди, видимо, знают, почему так сделать нельзя. А жаль...

Источник: http://dstorey.tumblr.com/post/11405550112/scoped

на 9:32 AM 0 коммент.

Ярлыки: , , ,

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