Большинство дизайнов ориентировано на использование фиксированных значений при верстке: ширина и высота блоков, размер шрифта. Это позволяет сверстанному шаблону «не разваливаться» при изменении масштабов просмотра и сохранять свойство кроссбраузерности. Однако в этом есть один большой минус – при большом разрешении экрана маленькие фиксированные блоки теряются на большой площади и остаются незамеченными. Тут даже не спасет «резиновая» верстка, т.к. сайт будет выглядеть еще более нечитабельным, например на 19'' мониторах при разрешении большем 1280 по ширине. Для меня это актуально, т.к. на ноутбуке 17'' с разрешением 1400х800 просматривать «резиновый» сайт очень неудобно. И желание оставаться на таком сайте отпадает быстро. Существует ли способ, позволяющий управлять масштабами не только текста, но и всего сайта?

Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

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

Забавная мушка, не правда ли? С другой стороны что тут забавного? Обычная пиксельная мушка. Но не было бы здесь этого поста если бы всё было так просто. Этот представитель отряда двукрылых создан с помощью блокнота и языка программирования созданного специально для целей пиксельной анимации и её же озвучивания. И так встречайте:

Обе упомянутые в первой части тенденции лишь усугубились: индекс Доу-Джонса и NASDAQ ежедневно сдают свои позиции, а количество хабрастартапов на территории 1/6 части суши растет в геометрической прогрессии. Свидетельством прихода на этот рынок серьезных игроков служит хотя бы это предложение. Сначала я подумал, что это очередная попытка легализации средств уведенных из SG, но по имеющейся на сей час инсайдерской информации заказчик имеет отношение к медиахолдингу компании… нет, не буду называть имя компании, намекну лишь, что председателя совета директоров этого энергетического монстра часто можно встретить на аватарках хабрапользователей.

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

Структура правильного HTML-документа базируется на логике, порядке и использовании семантически корректной верстки. Если у вас есть заголовок — используйте для него елементы Heading(h1-h6), если абзац/параграф — paragraph(p). Если у вас есть список — используйте элементы списков (ul/ol), если вы цитируете — используте blockquote или cite. Эти элементы придают смысловое значение разметке, делая ее семантически корректной, в дополнение к правильной структуре.

После составления корректного HTML-макета, используйте CSS для визуального оформления. (Тут уже дело вкуса, некоторые верстают CSS «с лету», а некоторые только после создания HTML-макета)

Стандарт XHTML более строг к синтаксису чем HTML, он не допускает наличия незакрытых тегов, одинарные теги тоже должны быть закрыты (self-closing). Элементы в XHTML прописываются строчными, а не заглавными буквами. Значения атрибутов элементов должны быть указаны в кавычках. Есть и другие отличия, но более подробно я описывать их здесь не буду.

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

Для тех, кто, возможно, не знает как сделать так, чтоб всё было хорошо.
Сайт должен тянуться только до определённой величины, и сужаться тоже только до некоторого значения. Я обычно беру 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%");
};

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

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

Когда верстаешь (X)HTML, порой не знаешь или забываешь о многих фичах, которые стоит использовать. Перечислю те, о которых вечно забываю сам, а зря :)

В последнее время на drupal.ru и habrahabr.ru частенько проскакивают темы вроде: «Делаю социальную сеть – бюджет пара сотен! Помогите сделать хабрастартап!» Отечественные аналитики связывают эту тенденцию с тем, что кризис на ипотечном рынке США тянет вниз за собой рынок в целом, что заставляет игроков на бирже вкладывать в высоколиквидные и надежные активы. Традиционно прибежищем инвесторов в смутные времена является золото, медь да стартапы на просторах бывшего СССР.

Как быть, если денег и других ресурсов пока нет, а вот почувстовать себя Денискиным или Андреевым хочется уже сегодня? Попробуем исполнить соцзаказ и попытаемся по-быстрому сделать сайт напоминающий хабр.

Ну и что, скажите, сложного в том, чтобы вешать в своей системе на все единицы контента N тегов, и после делать по этим тегам выборку с системой релевантности и важности связей? Да ничего в этом сложного нет, ибо это типовая задачка по проектированию БД из 10го класса! Что? Вы всё ещё кипятите? Ну тогда я расставлю быстренько все галочки :)

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

Примечание: ниже находится перевод статьи «CSS Expression Optimization», в которой автор немного освещает использование и проблематику динамических свойств в CSS (aka CSS expressions). Также автор предлагает способ их оптимизации (исполнение один-единственный раз вместо постоянного выполнения). Далее приведены несколько тезисов с ClientSide'2007 по заявленной тематике. Мои комментарии даны курсивом.

CSS expressions были впервые представлены в Internet Explorer 5.0, который позволял назначать JavaScript-выражение в качестве CSS-свойства. Например, следующий код позволит разместить элемент в зависимости от того, какого размера окно браузера.

#myDiv {
   position:   absolute;
   width:      100px;
   height:     100px;
   left:       expression(document.body.offsetWidth  - 110 + "px");
   top:        expression(document.body.offsetHeight - 110 + "px");
   background: red;
}

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

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

Небольшое эссе о том, как менять Favicon без перезагрузки страницы.

Недавно перед нами стояла задача как динамически менять Favicon без перезагрузки страницы. Решение «в лоб», т.е. замена значения href у favicon link ничего не дала, пришлось крепко задуматься и начать пробовать все возможные альтернативные варианты. Сработал способ пересоздания ноды link в документе. Это удалось заставить работать везде, кроме Internet Explorer. Есть подозрение, что ему не нравится имя файла с иконкой или его формат (PNG).

*Преамбула*
В связи с глобальной тенденцией перехода умных людей на Jabber, и инертного сопротивления этому переходу людьми, привыкшими к ICQ, было принято решение написать качественную аргументированную статью, о том, почему же все таки стоит сменить средство общения.
Итак, статья:


Для многих из нас ICQ является синонимом слов «общение в интернете», мы используем его по делу и для развлечения, находим с его помощью новых друзей и поддерживаем связь со старыми. За годы использования этой программы накопились сотни контактов в списке и длиннющая история переписки. В общем, все вроде бы устраивает, и идея перейти на что-то новое сразу наталкивается на логичный вопрос: «А зачем? Мне и так неплохо».

Итак, Jabber — это не очередной ICQ-клиент. Это система онлайн-общения нового поколения.
Она пришла на смену устаревшим месенджерам, место которых уже давно на интернет-свалке.

Нашел вот такой вот превьювер для изображений, написанный на javascript'е c использованием библиотек Scriptaculous и Prototype.

Переводить не хочу, на сайте все прекрасно и просто описано, вообще принципиальных отличий от всякий Lightbox'ов я не увидел, разве что края закругленные. И еще — это чудо использует Canvas и VML для прорисовки изображений.

В любом случае — может кому и пригодиться. Удачи!

www.nickstakenburg.com/projects/lightview

Сейчас уже много где написано и упомянуто про технику CSS sprites (aka CSS Image Maps). Я не буду открывать Америку и рассказывать о ней дотошно еще раз, а просто хочу привести несколько примеров и полезных ссылок. И пару советов из собственной практики.

Сама техника заключается в том, что мы создаем комбинированное изображение, из которого затем «вырезаем» с помощью свойств background-position нужный нам в данном случае кусок. На текущем уровне поддержки браузерами (я полагаю, что 99,9%) оно является просто must-have для любого уважающего себя интернет-ресурса (ибо позволяет сократить число запросов к серверу, отделить поведение от представления, возложить труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами, и много-много прочих «вкусностей»). Но обо всем по порядку. Поехали.

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

В Денвере-3, в отличие от Денвера-2, по умолчанию используются Apache 2, PHP 5 и MySQL 5 и поддерживается SSL.
Официальный сайт
Загрузить (5,4 МБ)
Переход с Денвера-2 на Денвер-3

Недавно на своем блоге я выложил статью по поводу создания блога на базе Drupal. Выложу ее и здесь. Надеюсь, она будет кому-нибудь полезной.

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

Пожалуй, самые популярные движки сейчас — это Wordpress, Joomla и Drupal. Во всяком случае, они самые известные из бесплатных CMS. После их изучения я остановился на Drupal и очень этому рад. Не вдаваясь в подробности о преимуществах Drupal (это тема для отдельной статьи), замечу лишь, что он мне понравился следующими особенностями:

• Гибкость системы. Архитектурно Drupal построен очень грамотно и модульно, что позволяет сделать из него все, что угодно.
• Качественный код. Благодаря достаточно жесткому контролю качества Drupal и его модули не только стабильны, но и обладают вполне читаемым кодом.

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

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

И что же делать таким как я? Поставить другой словарь? Я тут на днях решил пощупать Firefox 3 beta 2, и как белый человек, зашёл в инструменты > дополнения > Загрузить расширения. А там нажал ссылочку «словари». И что же я увидел?

А нет там выбора словаря. Есть только один — тот самый, который без поддержки буквы «ё». Хотя насколько я помню, раньше загрузка словарей в FF была организована как-то иначе, и там был выбор словаря. Собственно, прежний список до сих пор существует — на специальном сайте dictionaries.mozdev.org, только выйти на него получается не через меню Firefox или сайт расширений, а через гугл. Неправильно это как-то.

Всё это, конечно, хорошо, но что если частенько что-то пишешь и на английском языке? Ставить второй словарь? Постоянно между ними переключаться? А если я часто пишу смешанные тексты? А что если я вдруг захочу написать несколько слов, содержащих букву «ё» заменяя её на «е»? Firefox их больше не будет проверять, а просто пометит как ошибочные?

Ниже располагается перевод заметки CSS — A Recipe for Success, в которой рассматривается создание средствами HTML/CSS в браузере некоторого образца меню. В статье освещены довольно интересные случаи, и подробно описано их решение.

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


Рисунок 1

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

Уже довольно давно использую псевдокласс :first-letter для назначения двух фоновых изображений для одного элемента. Самое интересное что :first-letter, один из немногих псевдоклассов, которые работают в 6-ом Интернет Эксплорере. Но есть одна маленькая хитрость, которую нужно знать.

К делу. Как сказано выше, HTML элемент у нас один. Пусть это будет заголовок первого уровня.

Я работаю в компании занимающейся разработкой сайтов. Порой бывает очень сложно объяснить что, почему и сколько. Самый простой и быстрый путь найти общий язык с потенциальным заказчиком — это перевести все на простые и понятные большинству аналогии. Я в этих целях обычно использую автомобиль.