Понятие о безопасной палитре цветов

Перевод статьи «Understanding Web Safe Colors«

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

Web-безопасные цвета были выбраны математически, а не в силу того, что эти цвета используются чаще всего. RGB-коды для безопасных цветов состоят из нуля и других шестнадцатеричных цифр, делящихся на три: 3, 6, 9, C (12) и F (15). Кроме того, эти цифры всегда используются попарно.

Профессиональная  разработка интернет-магазинов в Перми.
Нужна раскрутка сайта? Заходи на www.kokoc.com

Например:

• #3366FF является безопасным цветом, потому что состоит из парных цифр, делящихся на три.
• #2255AA не является безопасным, поскольку числа не делятся на три.
• #3693CF не является безопасным, поскольку цифры хоть и делятся на три, но не являются парными.

Повышение значений парных цифр, например от 33 к 66, означает 20% повышение насыщенности данного тона.

Многие цвета помимо шестнадцатеричных кодов имеют имена. Например, в таблице стилей можно написать «color:red». Загвоздка в том, что только десять из этих имен цветов соответствуют в точности одному и тому же коду во всех браузерах. Казалось бы, нечто такое очевидное, как «red» должно бы всегда соответствовать коду #FF0000, но, к сожалению, это не всегда так. Например, имя цвета «brown» соответствует коду #A52A2A в Navigator 7.2 и коду #993333 в Internet Explorer 6. Хотя новые версии Internet Explorer и Firefox лучше согласуются между собой, все равно безопаснее использовать шестнадцатеричные коды, а не имена.

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

Грамотная регистрация в каталогах Рунета
Веб-студия Юнима. Создание сайта в Саратове.

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

Есть несколько алгоритмов дитеринга. Один из самых ранних и самых популярных по сей день — алгоритм Флойда-Штейнберга, разработанный в 1975 г.

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

—    Wikipedia

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

Это ставит нас перед дилеммой: следует ли ограничиться безопасной палитрой из 216 цветов, чтобы быть уверенными, что наши цвета не изменятся и не подвергнутся дитерингу у тех пользователей, чьи браузеры не могут распознать большее количество цветов? Или радостно и безоглядно выбирать из 16,8 миллиона великолепных, изумительных и выразительных цветов, которые все же могут увидеть на экране многие, пусть и не все, пользователи?

Заключение

Фактически, старых компьютерных систем с цветовым диапазоном из 256 цветов осталось так мало, что большинство специалистов уже объявляют, что web-безопасная палитра осталась в прошлом. И все же, ответ на вопрос, стоит ли использовать безопасную палитру, звучит как: «Зависит от обстоятельств». Зависит от того, насколько значительную долю вашей потенциальной аудитории составляют пользователи со старыми компьютерами, поддерживающими только 256 цветов. Зависит от того, будут ли заходить на сайт с коммуникаторов или сотовых телефонов, которые могут поддерживать только 256 цветов. Даже для таких пользователей использование безопасных цветов наиболее важно на больших поверхностях сплошного цвета в графических элементах и фонах HTML-страниц, где больше всего заметны дитеринг или смена цвета. Если ни одно из этих условий, вроде бы, не влияет на большую часть вашей аудитории, то вы можете спокойно использовать любые цвета, которые поражают ваше воображение.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Цикл Деминга: применение в веб-дизайне

Перевод статьи The Deming Cycle: an application to web design.

В данной статье, я хочу проилюстрировать вам применение цикла Деминга – так же известного как круг PDCA (Plan, Do, Check, Act) – в веб-дизайне. Если вы никогда не слышали об этом, цикл Деминга – это модель (разработанная Эдвардом Демингом), которая описывает итеративный (повторяющийся) процесс, направленный на поддержание непрерывности совершенствования разработки, обычно используемая в бизнес-процессах реинженеринга и  в менеджменте качества. Эта модель включает 4 основных этапа:

– Plan: установить цели и определить методы их достижения;
– Do: осуществить запланированное;
– Check: сравнить полученный результат с ожидаемым;
– Act: улучшить полученный результат.

А для вас постинг это заработок или каторга?
Скоро осень, пора выбрать отопительные приборы. Советую обратится в компанию Гольфстрим.

Проще всего представить круг Деминга можно следующим образом:

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Нюансы разработки сайта на Wordpress

Сразу уточняю, что речь пойдет о разработке именно сайта, а не очередного блога. Т.е. задача в следующем: есть дизайн сайта – нужно натянуть его на CMS Wordpress. Что необходимо учесть в первую очередь и с какимим проблемами придется столкнуться? Давайте разберемся.

Не верите, что желания исполняются? Просто создайте свой вишлист на JustParty.ru

1. Очистить код от лишних мета-тегов

Если вы используете в шаблоне функцию wp_head() (например при использовании плагина All in the Seo), то вскоре обнаружите, как она запачкает блок <head> всевозможными мета-тегами, ссылками на RSS и т.п. Эту неприятность можно исправить следующим образом.

Создайте файл functions.php в вашей теме (если он еще не создан) и разместите код:

<? remove_action('wp_head', 'wp_generator'); remove_action('wp_head', 'wlwmanifest_link'); remove_action( 'wp_head', 'feed_links_extra'); remove_action( 'wp_head', 'feed_links'); remove_action( 'wp_head', 'rsd_link' ); remove_action( 'wp_head', 'index_rel_link' ); remove_action( 'wp_head', 'parent_post_rel_link'); remove_action( 'wp_head', 'start_post_rel_link'); remove_action( 'wp_head', 'adjacent_posts_rel_link'); ?> 

Таким образом, вы избавитесь от 9 лишних строк в блоке <head>.

2. Вывод  записей с помощью query_posts()

query_posts($query) позволяет выводить записи с помощью конструктора запроса $query. Т.е. если вам надо вывести записи только определенной категории и только 5, вы можете указать:

query_posts('cat=3&showposts=5&orderby=date');

И дальше как обычно цикл:

// the Loop <? while (have_posts()) : the_post();?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a> <? endwhile;?> 

В чем же подвох? А в том, что если вы разместите подобный код, например, в шаблоне шапки сайта, то ваш сайт просто перестанет корректно работать. Дело в том, что в точности такой же цикл у вас будет и в шаблоне записи и в шаблоне страницы, а значит заданный вами запрос query_posts() унаследуется ими.

Чтобы этого не произошло, вам нужно использовать следующую альтернативную кострукцию:

<? $my_query = new WP_Query('cat=3&showpost=5&orderby=date'); while($my_query->have_posts()) : $my_query->the_post(); ?><li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <? endwhile; ?> 

Такая конструкция обеспечит условие того, что цикл в шапке будет выполняться только по запросу $my_query, который не будет иметь отношения к обычному циклу в шаблоне записи и страницы.

3. Несколько блоков навигации

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

Все решается очень просто с помощью встроенной конструкции wp_list_pages(), где в качестве параметра можно указать название произвольного поля meta_key, например:

<?php wp_list_pages('sort_column=menu_order&title_li=&meta_key=top_menu'); ?>

Таким нехитрым образом можно вывести определенный список страниц в любой части сайта.

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

4 способа как создать блоки-колонки одинаковой высоты

Перевод статьи Four Methods to Create Equal Height Columns

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

В этой статье я расскажу вам о некоторых способах создания колонок равной высоты и о совместимости этих методов с браузерами (включая IE6). Все эти способы описывают создание 3х колоночного макета.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Статистика использования браузеров на конец первого полугодия 2009 года

Начиная со второго полугодия 2008 года на рынке браузеров произошло несколько ярких событий: выход в свет долгожданного Google Chrome, релиз IE8 и Opera 10. Однако в общую долю популярности использования браузеров они не внесли много изменений. Рекомендую для начала вспомнить статистику на конец первого полугодия 2008 года:

Рис. 1. Статистика использования браузеров на конец I полугодия 2008 года (по миру в целом)

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru