Задача: менять горизонтальное положение блочных элементов по линейной зависимости при изменении размера окна браузера.
Решение: термин «пропорциональность» подразумевает линейную зависимость двух параметров. Вспоминаем школьный курс геометрии: линейная зависимость — это прямая, её уравнение выглядит следующим образом: Y=aX+b. Для построения уравнения прямой необходимо и достаточно знать координаты двух точек, принадлежащих этой прямой. Если принять за Y горизонтальное положение блока, а за X — ширину окна, то задача сводится к определению параметров a и b.

Bonjorno!

Мы рассмотрим актуальный для веб-дизайнеров и верстальщиков вопрос: как же стоит выбирать ширину (минимальную или фиксированную) и высоту при создании макета веб-сайта.

Читать

Представьте себе абстрактный разговор абстрактного заказчика с абстрактным верстальщиком.

— У тебя бага в менюшке, все наверх съехало, — говорит заказчик.
— Посмотрел во всех браузерах, нету! Ты в каком смотришь? — говорит верстальщик.
— В фаерфоксе.
— Нормально все там, — говорит верстальщик, просмотрев сайт во всех версиях фаерфокса.
— Осталось бага. Если это важно, то я с мака.

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

(картинка Кликабельна)

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

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

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

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

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

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

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

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

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

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

Маленькая заметка о том как запускать несколько разных версий Лиса. Простым пользователям нафиг ненадо, а вот вебразработчикам и кодерам пригодится.
Предположим у вас уже есть Лис версии 2.0.*, и вы стремясь к рекорду скачали 3.0. Не спешите ставить, если все пустить на самотек — установку по умолчанию то затрется ваш предведущий профайл. Поэтому запускаем уже установленую версию фокса с ключем -ProfileManager, примерно так firefox -ProfileManager.
Создаем дополнительный профайл, после чего начинаем установку третьей версии. Ее необходимо ставить отдельно не в туже директорию, я выбрал директорию рядом. Получилось примерно так, особой гениальностью я не блистаю потому и приставка к версии.

Версия	Куда поставил	Профиль
2.0.14	C:/Program Files/Firefox/2.0.14/	2.0.14
3.0	C:/Program Files/Firefox/3.0/	3.0

А теперь давайте создадим башскрипт firefox.bat который собственно и будет запускать фокс

@echo off
set MOZ_NO_REMOTE=1
start "" "C:\Program Files\Firefox\%1\firefox.exe" -p %1
set MOZ_NO_REMOTE=0

Это мой батник, под мои условия установки (всего 1 файл). Если у вас пути отличаются или профайлы по-другом называются, измените его под свои условия, или создайте для каждой версии свою версию. Я же создал два ярлыка для башскрипта, и пеердаю в качестве аргумента версию Лисицы.

Ну а теперь задача за малым, как различать версии по ярлыкам? Просто укажите путь к новым иконкам которые вы можете взять со следующих источников

• Firefox Icon Touch-Up
• FireCons1
• DeviantART — Firefox

Спасибо за внимание.

Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:

• О плохих приемах современной верстки;
• О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

Идея стартапа.

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

Навеяло топиком про горячие клавиши в Windows (статья 1 и статья 2)

Практически любой, даже начинающий разработчик, скажет вам, что пароли в базе надо хранить только в виде хеша (например md5). Это обеспечит их сохранность и увеличит безопасность системы в целом. Так ли это на самом деле?
В действительности нет, не так. Безопасность, да и сохранность, конечно повысится, но не очень сильно. В интернете уже давно есть базы хешей многих паролей. Трехминутный поиск только по Яндексу вывел меня на следующие сайты — MD5decrypter (568 002 хешей) и Insidepro (10 148 884 хешей). Уже не мало, ведь так? А это только открытые проекты и только по md5. Я думаю у любой серьезной хакерской группы есть свои базы, благо, с наличием бот-сетей распределенные вычисления перестают быть проблемой.
Кто-нибудь самый догадливый предложит, а давайте к пользовательскому паролю добавлять свой секретный длинный префикс. Ну или делать, например, md5 от md5. Взломщик никогда об этом не догадается и пароль не подберет.
Не поможет. В действительности при взломе хеша нам важен не оригинальный пароль, а поиск коллизии. Ведь неважно введем мы пароль 76854 или Fhndkts если md5(’76854′) будет совпадать с md5(’наша_секретная_строка’.’Fhndkts’).

Единственная проблема, что вариантов хешей все таки очень много и они будут занимать очень большое место в базе данных. да и поиск по ним потребует очень длительного времени.
Однако и эта проблема решается при помощи Rainbow Tables. Используя их мы на несколько порядков уменьшаем размер хранимой базы и скорость поиска пароля. Более подробно об этом можно почитать здесь и здесь. Для построение таких таблиц также нужны распределенные вычисления. И такие проекты есть — Rainbowcrack.com. Размах впечатляет — 2,628 таблиц, 102,080,000,000 цепочек (в каждой цепочке примерно 1000-1500 паролей), 1.49 Тб данных. Есть также российский подобный проект, но пока добились они намного меньшего.
Вот и как теперь хранить пароль?
denis.boltikov.ru

Навеяно этим.

Для тех, кто, возможно, не знает как сделать так, чтоб всё было хорошо.
Сайт должен тянуться только до определённой величины, и сужаться тоже только до некоторого значения. Я обычно беру 1500 и 980 пикселей соответственно.

Как сделать? min-width и min-height.

#site {
  margin: 0 auto; /*это чтоб центрировать контент при превышении max-width*/
  min-width: 980px;
  max-width: 1500px;
}

Но ведь IE их не поодерживает. А expression слишком нагружает браузер… Спокойно, други! Я выведу вас к свету из тьмы!
Пишем далее.



А в ie.js помещаем

window.attachEvent('onload', mkwidth);
window.attachEvent('onresize', mkwidth);

var minwidth = document.getElementById("site").currentStyle['min-width'].replace('px', '');
var maxwidth = document.getElementById("site").currentStyle['max-width'].replace('px', '');
function mkwidth(){
    document.getElementById("site").style.width = document.documentElement.clientWidth < minwidth ? minwidth+"px" : (document.documentElement.clientWidth > maxwidth ? maxwidth+"px" : "100%");
};

В чём особенная вкусность приведённого метода? А в том, что минимальное и максимальное значение нужно задавать только в одном месте, ну и вообще.

Пользуйтесь, короче, на здоровье!

Три наших персонажа: программист, дизайнер и клиент.

Уже писал о верстке под PocketPC устройства, на неделе доработал все то, что так смущало и подвел небольшие итоги.

1. Резинка.
Верстка под PDA должна быть резиновой. Без дополнительного ПО эмулировать разное разрешение на PDA устройствах нельзя. Да и никому это особо не нужно =) Чаще всего это 320х240 или 640х480, хотя бывают и нестандартные разрешения. В любом случае сайт должен смотреться во всех разрешениях одинаково, т.к. их разброс не такой и большой, а значит верстка должна быть резиновой.

2. Одна колонка.
Есть исключения, но чаще всего скелет сайта должен быть одноколоночным. Т.е. исходник сайта может быть 2-х, 3-х колоночным, но PDA версия чаще всего превращается в одну колонку, т.к. места и так мало. Чаще всего левая колонка (навигация) превращается в <select>, а правая сползает под основной контент.

3. Авто определение PDA устройства + pda.site.ru домен.
Определить PocketPC не так и сложно. HTTP_USER_AGENT содержит «windows ce» + браузер (mobile ie) добавляет ряд своих заголовков, например HTTP_UA_OS. Соответственно при просмотре site.ru с мобильного устройства должна отображаться оптимизированная верстка. Однако помимо этого необходим и безусловный способ получения PDA верстки, самое простое — поддомен «pda». Это просто удобно + важно для всяких поисковых ботов, да и заранее сообщает, что есть и pda версия сайта…

На дигге была найдена интересная ссылка (PDF-версия) — описание более, чем 350 команд Линукс (на английском языке). Фактически представляет собой шпаргалку, где команды разбиты на категории. Отмечу, что это не простой список команд, а именно описание с применением. Чтобы не быть голословным приведу несколько примеров.