Навеянно этой темой.
Пример, как это работает.

1. Введение

Представим, мы имеем класс relative, внутри которого имеется текст, и не задаём ему width:

#bar{
position:relative;
border:5px solid #00FFFF;
padding:10px;
height:200px;
}

мы получим резиновый блок:

<div id="bar">
text
</div>


При этом, блок обладает неизменными padding+border и резиновым width, таким, что width_px+padding_px+border_px = 100%.
Для absolute блоков, такой трюк не прокатывает.

Добрый день, друзья, хочу поведать вам один секрет, который помогает мне быстро и правильно найти цветовую схему для сайта.Прошу строго не судить, возможно, некоторые из вас знают этот прием, но вот мой друг, не знал, а когда я поведал ему, как легко найти цвета для цветовой схемы сайта – он был поражен простотой решения. Я не претендую на уникальность, либо открытие нового метода, просто я это знаю, и мне это помогает.
Для того чтобы нам создать цветовую схему. Нам понадобится такая хорошая программа, как Adobe Photoshop, причем подойдет практически любая версия. Особых знаний работы с фотошопом для этого т.с. трюка не НАТО, все делается буквально в пару кликов.

Примечание: ниже перевод заметки «Image Optimization, Part 4: Progressive JPEG…Hot or Not?» из блога YUI. В ней уже известный по прошлым статьям Stoyan Stefanov рассматривает использование последовательных (progressive) JPEG с точки зрения клиентской оптимизации. Мои комментарии далее курсивом.

В своей предыдущей статье «Оптимизация изображений, часть 3: 4 шага для уменьшения размера файлов» последовательные JPEG-файлы были вскользь упомянуты как одна из возможностей для оптимизации JPEG. Эта статья рассматривает данный вопрос более глубоко, включая результаты проведенного эксперимента над 10000 изображений.

Базовые (baseline) и последовательные JPEG

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



Загрузка базового JPEG-файла в браузере. По нажатию откроется полная версия.

Последовательные JPEG являются другой разновидностью данного формата: они загружаются (как можно понять из названия) последовательно. Сначала вы увидите картинку низкого качества. Затем, по мере поступления графической информации, качество изображения будет постепенно улучшаться.



Загрузка последовательных JPEG. По нажатию откроется полная версия.

Читать дальше на webo.in →

Многие из Вас наверняка стакивались с ситуацией — есть дело важное, интересное, прибыльное (нужное подчеркнуть;), есть время этим делом заняться. А душа к нему не лежит. Стоит только сесть за работу, как как будто черт дергает послушать музыку, побродить по интернету, початиться с друзьями. Один — другой раз, не куда ни шло, но это происходит постоянно, и часто под самыми благовидными предлогами (например: дабы узнать новую информацию необходимую для проекта). Не иначе как происки нечистого.

Так случается, что нужно управлять компьютером из другой комнаты, например из кухни или с любимого дивана :). Я часто рулю rtorrent'ом по ssh с помощью MidpSSH. К сожалению, в моем телефоне нет Wi-Fi, зато есть поддержка bluetooth pan. C ее помощью можно раздавать интернет с компьютера на ваш телефон. В этом топике я расскажу хабраюзерам о простой настройке такой сети на базе ПК с Linux и телефона Sony Ericsson.
Осторожно, много картинок!

Есть очень простой способ улучшить внешний вид шрифтов во многими любимой убунте.

Меня давно уже перестал устраивать дефолтный для Gnome редактор gedit. Вроде бы все необходимое в нем есть, но две вещи раздражали достаточно сильно: отсутствие возможности поиска по файлам (grep, конечно, отличная команда, но хотелось бы все-таки не вылезать при этом из редактора и пользоваться результатами поиска прямо в нем) и отсутствие автоопределения русских кодировок (вроде бы был в свое время плагин encodings, но он у меня активироваться отказался). Последний момент является важным еще и потому, что у меня много разнородных текстовых файлов и PHP-скриптов сайтов, сделанных в разное время, поэтому часть из них создана в кодировке windows-1251, а часть в utf-8.

Поиск ссылок по указанным проблемам выдал несколько результатов, один из которых меня полностью устроил. Им оказался редактор medit. Фактически, это почти полностью клонированный gedit, но в нем реализованы еще и упомянутые фичи. Скриншот можно посмотреть здесь: screenshot-medit.png.

По функциональности редактор почти не уступает популярному в среде Windows редактору TextPad. Поиск по файлам реализован тоже достаточно удобно:



Правда grep, вызываемый этим диалоговым окном, ругается, если задать параметр Skip files, но для меня это не проблема, поскольку этим параметром я все равно обычно не пользуюсь.

Что касается автоопределения кодировок, то достаточно прописать в опциях параметр Encoding to autodetect: UTF-8,WINDOWS-1251. После этого кодировка файла определяется автоматом в 99% случаев.

Привет!
Решил написать небольшую инструкцию, чтобы помочь нуждающимся в настройке bluetooth-наушников под Linux. Описанный способ гарантированно работает в Ubuntu 7.10 и 8.04. В других системах не должно возникнуть особых проблем, если имеются все необходимые компоненты (bluez, alsa, python).

С рассветом WEB 2.0 получили развитие и javascript фрэймворки, позволяющие вебмастеру делать динамические элементы сайта гораздо быстрее и проще. Одним из таких фреймворков является jQuery, получивший огромную популярность за свою простоту и невероятно малый вес. Итак, представляю вашему вниманию 10 наиболее полезных скриптов jQuery для улучшения интерфейса вашего сайта.

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

Информационный дизайн это типографика

В 1969 году, Эмиль Рудер, знаменитый швейцарский типограф, написал о современных ему материалах для печати то, что мы могли бы легко сказать о наших современных веб-сайтах:

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

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

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

1. Использование дефисов вместо тире em-dash.



Если вам нужно прервать мысль, то делайте это с помощью символа (alt+0151), а не парой знаков «минус». Это, пожалуй, главный источник раздражения для всех редакторов.

Так исторически сложилось, что домены сайтов называют с префиксом www или без.

Есть несколько взглядов как истинно должен называться домен, прогрессивное человечество считает, что без www — nowww.ru, многие западные эксперты считают обратное.

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

Выкладываю фреймворк, написанный для себя.
Причина создания: надоело каждый раз при верстке нового сайта заниматься одним и тем же — переделывать мой любимый Tripoli (исправляя его баги, добавлять свойства разметки); добавлять JS-фреймворк jQuery, создавать типичную HTML-структуру. Решил объединить часто используемые мной элементы в единое универсальное целое.
Делал для себя, то есть — аккуратно и хорошо.

Привет. Сегодня я хочу вам рассказать о том, как можно изменить внешний вид файлового инпута.

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

Довольно часто некоторые заказчики, отдавая макет сайта на вёрстку, требуют попиксельно достоверной точности в разметке во всех браузерах.

Проверить такое соответствие достаточно легко — нужно сделать скриншот сайта и совместить его с графическим макетом, например, в Photoshop'е.

Но вот только в процессе вёрстки использовать такой приём не очень удобно.

Примечание: ниже перевод статьи «Non-blocking JavaScript Downloads», в которой автор рассказывает о проблемах, связанных с подключением JavaScript-файлов, и возможной параллелизации их загрузок. Мои комментарии далее курсивом.

Об авторе: Stoyan Stefanov является веб-разработчиком Yahoo! в группе Exceptional Performance и курирует разработку YSlow — инструмента по измерению производительности. Он также внес значительный вклад в разработку продуктов с открытым кодом, выступал на конференциях и автор технических текстов. Его последняя книга Object-Oriented JavaScript.

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

читать дальше на webo.in →

Обнаружил, что на Хабре до сих пор нет ни одной статьи о могучем настольном календаре Rainlendar. Восполняю сие досадное упущение.

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

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

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

На тему эффективного дизайна можно привести несколько ссылок:

10 принципов эффективного веб-дизайна
Пять дизайнерских правил применяемых в Web

Это из того что вспомнилось. Рекомендуется почитать блог Дизайн пользовательских интерфейсов и юзабилити.

Это, скажем так преамбула, которую можно отнести к любому направлению дизайна. В этой статье мы поговорим о Web-дизайне и о применении Золотого Сечения и Правила Третей.

Одной из главных задач эффективного дизайна в Web – это ясность и интуитивность. А также концентрация внимания пользователя на нужных местах страницы. Как этого добиваются?

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

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

Примечание: ниже представлен официальный перевод статьи «On having Layout» на русский язык. Статья не является окончательной. Этот перевод отражает 9 версию от 23.10.2007.

UPD текст статьи полностью убран в связи с его неконтролируемыми изменениями с момента публикации. Перепечатка доступна здесь

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

Итак, какова ситуация в области современной веб-типографики и какими способами следует решать возникающие проблемы?