АП

26 заметок с тегом

вёрстка

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

Ctrl + ↑ Позднее
23 июня 2011, 21:06

Фоторама 0.2

Наслушавшись комментариев и критики выкатываю 0,2-ю версию Фоторамы. Она:
  • разучилась делать слайд-шоу; действительно, зачем оно надо;
  • сменила переключалки; теперь они не скрываются, и по-другому расположены;
  • кое-какие опции нажила;
  • поселилась на Гитхабе, пока не знаю, есть ли в этом польза.
Качайте и пользуйтесь, пожалуйста :-) Буду рад также, если кто-то захочет поучаствовать в этом нехитром проектике и научит меня пользоваться Гитхабом.
вёрсткаскриптыФоторама
2 комментария
23 июня 2011, 9:50

Фоторама 0.1 ★

Написал джикверный плагин галереи, работающей почти так же, как фотки у Тёмы Лебедева в путешествиях: http://tema.ru/travel/taimyretnoexp-2/ (долистайте до второй). Мне нравится такой формат, когда галерея не выглядит чужеродным «флешем» на странице, нет замороченного управления и фотки могут быть любой высоты и ширины.

Моя Фоторама умеет всё тоже самое, что и лебедевская галерея — навигация через айфонные пимпочки, по клику на самой фотке перемотка вперёд, по клику с шифтом — назад.

Отличия такие:

  • очень легко подключить — перечисляете картинки, как обычно и добавляете одну строку кода;
  • пимпочки расположены слева вверху, если у картинки изменится размер они никуда не уедут, плюс они скрываются и не мешают смотреть картинку, когда курсор где-то в другом месте;
  • проверяется загруженность картинки;
  • есть лёгкие кросс-фейды и анимация при переходах;
  • не используется никакая графика;
  • внешний вид пимпочек и их поведение можно настроить через ЦСС;
  • есть дополнительные опции — слайд-шоу, продолжительность кросс-фейда и подписи к картинкам (назначаются через alt).

Качайте и пользуйтесь, пожалуйста. Буду рад также, если кто-то захочет поучаствовать в этом нехитром проектике.

вёрсткаскриптыФоторама
6 комментариев
26 мая 2011, 15:24

Главное правило экранных интерфейсов в вёрстке ★

Артемий Лебедев написал в Ководстве:
В экранных интерфейсах любые элементы управления не должны быть по площади меньше площади курсора (16×16 пикселей).
Главное правило экранных интерфейсов в вёрстке
Я не знаю, главное ли это правило, но мне оно нравится, и я хочу рассказать, как недавно его применил в своей вёрстке.

Нужно было сверстать айфоно-подобные точечки, показывающие какой из экранов виджета сейчас активен. Типа, таких:
Точечки-переключалки

Размер точки — 6×6 пикселей. Явное нарушение правила! Но предположим, что дизайнер решил использовать эти точечки только для индикации, поэтому греха за ним, предположительно, нет. Я же подумал, а почему бы не сделать точки тыкабельными. И сделал. Но пока тестировал их, меня не оставляло чувство дискомфорта от прицеливания курсора к таким мелким элементам. И тут я вспомнил о ледебевском правиле.

Конечно, увеличить диаметр точки до 16 пикселей я не мог, но изменить внутренние поля мне никто не мешал:


После такой нехитрой манипуляции пользоваться точками стало удобно и приятно. Чтобы не быть голословным я сделал небольшой пример.
вёрсткадизайнКоводство
2 комментария
23 мая 2011, 22:01

Таблицы безопасности

При вёрстке одного сайта столкнулся с тем, что авторы статей часто ломали вёрстку своим неаккуратным кодом. Им нарочно была дана свобода использовать любые теги, чтобы более гибко оформлять каждую статью. К счастью никакой валидатор прикручивать не пришлось — оказалось достаточным обернуть такие слабые места в таблицы со стопроцентной шириной и обнулёнными бордерами. Теперь никакие незакрытые дивы ничего не разваливают.
вёрстка
26 декабря 2008, 19:24

Z-index на Ютубе

Неправильный зед-индекс у раскрывающегося меню на Youtube
багивёрстка
1 комментарий
7 октября 2006, 4:53

Див в диве с дивом внутри

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

Иногда выходит нечто банальное:

.a { ... }
.b { ... }
.c { ... }

Но бывает и такое:

.one { background: url('/images/sitedesign/bgcenter.png') repeat-y; }
.two { background: url('/images/sitedesign/bgtop.png') no-repeat; }
.three { padding: 17px 13px; background: url('/images/sitedesign/bgbottom.png') no-repeat bottom; }

/* ...o'clock, four o'clock, */

.rock { position: relative; min-height: 545px; //height: 545px; }

Всё зависит от вдохновения.
вёрстка
© Артём Поликарпов, 2006—2014
Движок — Эгея