Заметки программиста

Перевод статьи Create a Scrolling Menu with CSS and jQuery.

Существует множество прокручивающихся меню и галерей изображений, созданных на Flash, вот яркие тому примеры 1, 2. Но автор захотел создать аналог на CSS и jQuery, конечно без эффектов смазывания картинки при перемещении, но все же. Это решение хорошо работает в большинстве популярных браузеров и при этом сохраняет доступность элементов при отключенном JavaScript.

Посмотреть результат

[More]

Ничего знаменательного, но я просто добрался до их User Interface Demos… это просто фантастично, забудьте Flash! выкиньте на помойку свой Silverlight. За JavaScript будущее, look at this guys.

А я вообще хотел написать что на сайте jQuery новый дизайн, и все.

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

1. Таблицам нужно пространство. Если вы не знаете наилучшую ширину для таблиы, нужно поставить 100%. Гораздо лучше если таблица будет широкой нежели суженной по всем столбцам.
2. Ячейкам нужны отступы. Ячейки таблицы идут одна за другой, но нет необходимости располагать их близко друг к другу. Пусть будут отступы.
3. Относитесь к таблицам так же как и к тексту. Таблицы воспринимаются так же как и обычный текст, но читаются немного сложнее и дольше. И нужно быть осторожным и не создавать сильного контраста цветов, лучше использовать мягкую цветовую гамму.

Примеры таблиц, созданных R. Christie на smashingmagazine

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

Традиционно сложилось что «Версия для печати» доступна либо по соответствующей ссылке, либо через CSS media=»print» который отвечает за стили страницы при ее печати. Первый способ позволяет легко выводить данные как угодно, в то время как второй ограничен средствами CSS, т.е. на печать отправляется та же страница, но с другим CSS файлом. Я рассмотрю первый способ, так как он наиболее гибкий и позволяет выводить данные как угодно.
[More]

Сегодняшний пост – откровенный копипижь, сразу говорю, но источник указать не могу, их слишком много и кто первый непонятно. Вобщем ниже представлены «howto» для дизайнеров, то есть пошаговые инструкции как сделать клевую картинку. [More]

Встречаем новый месяц с новыми обоями!

Очень интересное решение для увеличения картинок на javascript. Идея в том что в содержании вставляется картинка, но для удобства ее увеличения не требуется открывать новых окон или увеличивать ее перекрывая текст, все происходит в заданных размерах, не больше ни меньше. Вобщем, лучше один раз увидеть, Shift+Mouse1 — увеличить, Alt+Mouse1 — уменьшить:

Автор ShiftZoom’а отмечает следующие преимущества:

• Простая установка. Нужно просто добавить onload=»shiftzoom.add(this);» к картинке.
• Позволяет удобно просматривать большие картинки на малых пространствах для контента.
• Поддерживает клавишу Shift для приближения и Alt для отдаления.
• Отлично работает и не требует дополнительных скриптов.
• Свободен для не коммерческого и частного использования.

Скачать и посмотреть больше примеров ShiftZoom‘а.

Маленький обзор сайтов наших суровых, уральских университетов.

Дамы и господа представляю вам сайт Уральского Государственного Лесотехнического Университета (usfeu.ru), там мы видим великолепный «сплеш скрин», а под ним красуется надпись:

сайт оптимизирован для графического адаптера с разрешением 800×600

и мне с моим 1920×1200 стало страшно, уходим!

Далее было решено посетить сайт венца прогресса и храма технических наук, крупнейший ВУЗ Урала — Уральский Государственный Технический Университет — УПИ (ustu.ru). Здесь ситуация чуть лучше, слева случайная выборка фотографии, из тех что я увидел это приветливо машущий Киров и какой-то студент скачущий по сцене на велосипеде. Ниже информер погоды, видимо чтоб следить за нижней планкой температуры, когда можно не посещать занятия. Шрифты и свободные пространства просто ужасны. Меню это вообще звездец. Зато фавиконка есть!

Теперь посмотрим на Уральский государственный университет (usu.ru), сразу бросается в глаза надпись снизу:

Дата обновления: 23.05.2008

и хочется добавить: Дата обновления дизайна: 23.05.1998. Вместо «карта сайта» надпись «карта сервера», вот уж интересно как это. Есть и такая же фотография как и у УПИ, но она одна. Цветовое оформление в стиле 8-битных игровых приставок. Шрифты Times смотрятся как в ЖЖ какой-нибудь 12-летней эмо-girl. На внутренних страницах ситуация чуть лучше, но до дизайна еще очень далеко.

Итак, мы увидели 3 сайта довольно крупных и финансируемых со всех сторон ВУЗ’ов, сайты просто ужасны, и вот моя точка зрения на эту ситуацию: вопрос о сайте решают высокопоставленные люди в этих заведениях, и каждый на сто процентов уверен что их ВУЗ легко справится с задачей разработки сайта, но не тут то было: «Разработку надо поручить кому-то, а кому? Окей, есть аспираты, хотя они и так очень заняты. Поручим студентам! Как раз тут парочка в Titansoft’е работала, явно свое дело знают…»

Smashingmagazine как всегда радует, 40 бесплатных наборов иконок! Вы только посмотрите какая красотищща!

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

Да, человек не гений копирайтинга, но пишет интересно, можно почитать «5 принципов эффективного веб-дизайна.»