графический и веб-дизайн {xhtml+css} и сопутствующая жизнь | архив событий

7 февраля, 2004 | ре-дизайн и переезды vs. id-as.com

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

и это притом, что в мире веб-дизайна и веб-стандартов творятся интереснейшие вещи.

короче говоря, как только я задержусь в одном из городов хотя бы на несколько дней:

• интересный, на мой взгляд, ре-дизайн будет завершен,
• перевод второй части «раздвижных дверей css» сверстан,
• затяжная нерегулярность «событий» всецело отправлена в прошлое.

более конкретно сформулировать ближайшее будущее к сожалению не удается.

31 января, 2004 | id-as.com: итоги месяца

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

самый частый гость id-as.com

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

самый популярный url

больше всего запросов (а именно девятьсот двадцать) поступило на http://www.id-as.com непосредственно. на втором месте (семьсот пятьдесят запросов)—перевод статьи дагласа баумана “sliding doors of css”. кстати, вторая часть статьи уже переведена и ждет свободного времени для верстки и прочей подготовки к публикации.

самый большой трафик

(сорок пять мегабайт) пришелся на zip-архив internet explorer 5.5. ie 5 на втором месте (с тридцатью мегабайтами). (если вам непонятно о чем идет речь, пояснения здесь.)

поисковые системы

больше всего запросов (сто девяносто девять) поступило с яндекса. на втором месте—rambler. на третьем—самая грамотная, на мой взгляд, поисковая система—google. все самое путное, как всегда, малознакомо среднестатическому расейскому пользователю.

ключевые слова

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

браузеры

целых семьдесят два процента оккупировал не самый лучший (и самый кривой в плане поддержки веб-стандартов) браузер internet explorer. из песни слов не выкинешь, что называется. на втором месте (восемнадцать процентов)—netscape—категория, объединяющая все gecko-based-браузеры. под номером три—opera.

география

по запросам российская федерация крепко держит тридцать шесть процентов первого места. далее то, что webalizer называет «нераспознанные/неизвестные». затем «сетевые организации». одиннадцать процентов взяли на себя «сша коммерческие». далее в порядке убывания:

• чехия
• украина
• эстония
• объединённое королевство
• германия
• франция

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

прочие итоги

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

причем неизвестно, чем все это закончится. текущий дизайн главной страницы не совсем устраивает арт-директора id-as.com, что может самым неблагоприятным образом сказаться на карьере дизайнера главной страницы, если только он срочно не придумает что-нибудь новенькое. ха.

обновление 01.02.04

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

сегодня также добавлены новые сайты в правый раздел «недавно там».

22 января, 2004 | flash-развлечения

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

а посему смело щелкайте на стоящее под пингвином создание и… будет весело. мой собственный рекорд (из штук десяти попыток)—триста двадцать метров!

обновление 25.01.04

«пингвинокидание» переехало на новое место. обновите свои закладки, если таковые имеются. пока игра переезжала, рекорд вырос до трехсот двадцати одного метра!

16 января, 2004 | css-красота по-русски

если вы следите за тем, куда могут привести ссылки из раздела «недавно там» (в правой боковой панели), то наверняка уже открывали «пополняемый список xhtml+css сайтов, соответствующих веб-стандартам и имеющих эстетическую ценность».

а обратили ли вы внимание, что в списке есть самый что ни на есть русский сайт? называется он minimal.ru. и сверстан в соответствии со стандартами xhtml1-strict и css.

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

поздравляем дениса богомолова и его друзей из minimal.ru!

веб-дизайн: инструменты

гадкий фриланс съедает время. время уходит, не желая быть съеденным. вот так и живем…

accessibility toolbar для ie

чтобы фриланс этот продвигался быстрее, группа разработчиков из австралии подарила всем нам, как бы это сказать, дополнительную панельку к internet explorer’у.

панелька эта очень даже ценная, так как умеет многое:

• содержит прямые линки на инструменты валидации (html и css);
• меняет разрешение окна на разные стандартные или на какие вы сами захотите;
• включает и отключает стили, показывает нерекомендуемые к использованию html-элементы;
• работает с цветами, изображениями, структурой документов, мета-информацией;
• содержит ссылки на ресурсы по юзабилити и аксессабилити, xhtml и javascript.

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

скачать accessibility toolbar нужно здесь (451 кб). во время установки требуется работающий интернет. а вот регистраций никаких не требуется—панель полностью бесплатная. ну и некоторые из перечисленных сервисов доступны только в режиме он-лайн.

12 января, 2004 | эластичная типографика

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

em vs. px

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

во всех режимах увеличения шрифта («крупный» и «самый крупный» в ie/win) дизайн страницы остается вполне приемлемым. при масштабировании шрифта эластично сжимаются и растягиваются кнопки горизонтального меню и градиентная подложка для заголовков h2 в правой панели. самое смешное, что в коде и кнопки, и заголовки выглядят очень скромно: элементы ненумерованного списка (li) для горизонтального меню и заголовок второго уровня (h2) для правой панели. а вся эластичность заложена в css-файл и базируется на размножаемых по горизонтали (в первом случае) и по вертикали (во втором случае) фоновых изображениях.

эластичная типографика—это хорошо. но вот на этой странице эластичным является весь дизайн (посмотрите, что происходит с дизайном при масштабировании шрифта), а не только текст. этот пример взят из статьи патрика гриффитса “elastic design”, только что опубликованной на страницах “a list apart”. но это совсем другая история (и другой уровень владения веб-стандартами).

10 января, 2004 | ре-дизайн: продолжение

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

прочищаем горло кэш

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

чтобы отбросить все сомнения (а заодно и многословие предыдущего абзаца), нажимайте кнопку браузера «обновить».

9 января, 2004 | ре-дизайн: детали

красота внешняя подразумевает наличие определенной внутренней гармонии. ре-дизайн сайта id-as.com—не исключение.

чистота и логика кода

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

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

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

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

главное горизонтальное меню

главное меню в новом дизайне позиционировано очень сомнительно, а именно применением верхнего padding’a. выглядит оно удобоваримо только при установках размера шрифта по умолчанию, то есть при среднем размере шрифта в ie/win 5.5+ и 100% text zoom’e в netscape navigator’e.

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

кстати, возможность масштабирования текста в ie/win—это тоже одно из завоеваний нового дизайна. вся типографика теперь построена на относительных единицах измерения (em). так что масштабируйте на здоровье. а чтобы глаза не болели, распечатывайте и читайте с листа. на то он и print.css.

8 января, 2004 | ре-дизайн лайв!

живьем, то есть. или в процессе. короче, под наблюдением любого, кто пожелает наблюдать. отсюда и эта надпись в шапке “redesignlive”, которая у меня почему-то все время читается как “redesignville”. в общем пока эта надпись будет висеть, есть смысл нажимать кнопку браузера «обновить» при каждом визите на id-as.com.

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

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

баги и несовместимости

новый layout одинаково выглядит во всех современных windows-браузерах за исключением некоторых нюансов.

ie/win 5

больше всего проблем, как водится, в ie/win 5. так как он не поддерживает поля (margin) и отступы (padding) для строчных (inline) элементов, главное горизонтальное меню с кодом ненумерованного списка и примененным к каждому элементу свойством display:inline смотрится в нем по меньшей мере странно.

opera 6

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

что дальше

а дальше—совершенствование управляющего дизайном css-файла и, как следствие, самого дизайна. хочется, например, как следует поработать над горизонтальным меню и решить его проблему в ie/win. для этого, правда, придется заменить подход к выстраиванию горизонтального ряда элементов ненумерованного списка с inline на float. нужно также сделать, чтобы фоновое изображение менялось при наведении курсора на элементы горизонтального меню.

однако, самое главное случится буквально через несколько дней. перевод второй части статьи дагласа баумана “sliding doors of css” завершен. и дело теперь только за версткой. следите за эфиром, что называется.

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

: предыдущие сообщения :