С праздником труда, мои дорогие читатели!
Очередной весенний выпуск рассылки посвящён, как я и обещал, веб-дизайну, предваряя серию выпусков о шаблонах проектирования Ajax.

Сегодня в программе:
Несмотря на ожесточённые споры в форумах, вёрстка на div'ах набирает заслуженную популярность. Этот способ вёрстки требует углублённого знания CSS, поэтому первой идёт статья, со списком лучших, по мнению автора, сайтов про CSS и всё что с ним связано.

Кроме словосочетания "divная вёрстка" у всех на устах слово "блог". Сервисов блогов всё больше и больше: Блоги@mail.ru, Планетa rambler.ru, даже МТС и МегаФон открыли свои сервисы. Вдобавок сотни людей открывают свои одиночные сайты-блоги, зачастую пользуясь стандартными движками типа WordPress. Второй перевод этого выпуска даёт советы тем, кто хочет сделать сам дизайн для своего личного блога, но не очень хорошо представляет, как это сделать.

Ну и, наконец, вводная статья к циклу про шаблоны проектирования Ajax.

Все эти и некоторые другие статьи вы можете увидеть также на сайте "Популярная веб-механика"

Вроде всё сказал, что нужно. Итак, можно начинать!

Десятка лучших сайтов о CSS

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

CSS приносит владельцам вебсайтов массу разных выгод. Самая очевидная это то, что с помощью CSS можно выделить дизайн вебсайта в чистом виде. CSS может управлять абсолютно всем: начиная с размера шрифта и заканчивая самой версткой вашей страницы. Правильно спланированный сайт на HTML и CSS может избежать связи между практически любыми дизайнерскими элементами в данном HTML. Это означает, что владелец вебсайта может изменить вид целого сайта, не меняя код HTML. Для владельцев сайтов с изменяющимся контентом или сайтов с большим количеством контента (блоги, форумы, магазины и т.д.) это экономит массу времени.

CSS также позволяет владельцу вебсайта выстраивать его HTML в стройном логическом порядке. Когда для вёрстки используются таблицы, зачастую HTML код сайта не располагается в логическом порядке (так называемый «прямой поток»). Это может навредить владельцу сайта двумя способами. Первое, и самое важное, что надо знать, то что не каждый, кто пользуется интернетом, рассматривает ваш сайт через такие браузеры как Internet Explorer или Firefox. Существует целая группа людей, просматривающая вебсайты при помощи веб ридеров и других инструментов, рассчитанных на хорошо организованный код. Во-вторых, хорошо организованный вебсайт может существенно облегчить ранжирование вашей страницы. Когда поисковой робот обнаруживает, хорошо организованную и не отяжеленную большим количеством лишнего HTML страницу, он быстрее и легче определяет, о чём эта страница. Давайте обращать на это внимание, мы ведь хотим помочь поисковым роботам, верно?

Эта статья написана обо всем, что касается CSS. Существуют сотни сайтов, предлагающих руководства по CSS, примеры использования CSS, сравнения и демонстрации. Возможно существует что-то, о чем мы не знаем и что не отражено здесь; в этом случае, просим вас сообщить нам на Site Reference Forums.

Перед тем как вы перейдёте на любой из предложенных сайтов, мы должны сказать несколько слов предупреждения. Эти сайты могут быть весьма захватывающими, если вы хоть немного увлекаетесь веб дизайном. Некоторые из них содержат буквально сотни ссылок на другие сайты, которые бесспорно завладеют вашим вниманием.

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

CSSZenGarden

Если у вас есть хоть какие-то сомнения в том, насколько в действительности мощен CSS, тогда вам определенно нужно посетить CSS Zen Garden. CSS Zen Garden наглядно демонстрирует, силу и красоту CSS. Понять это просто, лишь взглянув, как разработчики могут взять один и тот же HTML и получить абсолютно разные по виду страницы. Если вы просмотрите различные варианты дизайна, вы увидите, что единственная вещь, меняющая внешний вид каждой страницы, это файл CSS. А HTML везде абсолютно одинаков.

CSS Zen Garden прекрасный пример творческого потенциала и технической осведомленности. Важно также отметить, что CSS Zen Garden не использует таблицы для верстки. Все сделано исключительно простым HTML и CSS.

The Web Developer's Network

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

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

Official Cascading Style Sheets Level 2 Specification

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

Когда будете просматривать этот документ, помните несколько вещей. Во-первых, CSS был разработан не только для интернета. CSS также можно использовать в печатных изданиях и радиовещании. Так что, когда будете читать некоторые указания в официальном руководстве, то, возможно, столкнетесь с отдельными моментами, не соответствующими тому, что вы делаете. Во-вторых, не волнуйтесь, если не поймете какую-то главу или кусок информации. Хитрость при изучении CSS состоит в том, чтобы сначала получить понимание его сути, потом потренироваться на практике, затем вернуться и перечитать то, что уже проходили (на сей раз вещи будут иметь немного больше смысла), затем потренироваться, потом снова вернутся назад и перечитать и так далее. Каждый раз, отрабатывая прочитанное на практике и возвращаясь, чтобы перечитать какие-либо специфические моменты, вы будете понимать все больше и больше.

И в качестве рекомендации: если вы собрались просто освежить в памяти наиболее важные главы руководства, не пропустите главы 8-12, 14-18 и 4-6.

CSS from the Ground Up

Хорошо, вы попробовали официальное руководство, и оно все же оказалось слишком сложным. Ничего страшного. В нём полным-полно разной информации и разработчики определенно не старались развлечь нас с его помощью. Если же вы хотите получить самую суть руководства по CSS, разработчики из Web Page Design for Designers собрали довольно неплохой общий курс, который поможет вам с вашими первыми CSS страницами.

Listamatic

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

Listamatic приводит несколько примеров списков, использующих простой CSS. Эти примеры охватывают практически все, чего вы, возможно, надеялись добиться от списка HTML. Разумеется, если вы работаете с вложенными списками, для них примеры там тоже имеются.

CSSVault

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

CSS Layout Techniques

Ни одно CSS руководство не было бы полным, если бы мы не упоминали проблему создания верстки без использования таблиц. Это, безусловно, наиболее трудный аспект CSS, изучающий построение хорошей верстки. Разработчики Glish.com собрали вместе примеры нескольких различных типов верстки. Они, конечно, не могут предложить каждый тип, которым вы возможно воспользуетесь, но просмотр их руководств определенно поможет вам изучить различные техники по верстке вашей страницы.

Ruthsarian Layouts

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

PositionIsEverything

StyleGala

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

Использование этих ресурсов в учёбе

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

Наилучший способ изучить CSS это начать использовать его. Экспериментировать с его различными частями. Пробуйте и достигайте различных фокусов, которые раньше никогда не делали. Если вы раньше не создавали страницу без помощи таблиц, попробуйте сделать это сегодня же. Если вы никогда не работали о списком, чтобы сформировать его совершенно иным образом, поэкспериментируйте с этим. Просмотрите несколько сайтов из множества различных галерей, предлагаемых нам, и вдохновитесь. Используйте эти сайты и источники, чтобы представить, как может выглядеть ваш собственный сайт.

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

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

Об авторе

Дизайн блогов для начинающих

Эта статья является частью серии «Дизайн блогов для начинающих» и написана нашим гостем, очень талантливым дизайнером блогов Питером Флесчнером (Peter Flaschner).

Здравствуйте, я Питер Флесчнер, основатель и арт-директор "The Blog Studio". Я собираюсь провести вас через все этапы процесса, который мы проходим, когда делаем блог или какой-либо другой сайт. Это одна из двух статей в этой серии. Когда мы закончим, у нас будет гибкая структура высшего качества для публикации информации, совершенную на взгляд любого, кто ее увидит. И сможем зарабатывать на этом деньги.

Дизайн может значительно увеличить ценность блога. Умело подобранный веб-дизайн может сыграть решающую роль.

По каким-то причинам, когда я говорю эти слова, то встречаю сильное сопротивление. Я думаю, что это из-за определенного восприятия(perceived definition) дизайна. Типичный ответ, который я слышу: «Уродливые сайты преуспевают с помощью рекламы». Ну хорошо, может быть, это и правда. Но, держу пари, те же сайты могли бы быть гораздо лучше, если бы они были надлежащим образом спроектированы.

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

Позвольте процитировать с dictionary.com:

Итак, без лишней спешки, начнём проектировать сайт. Нам понадобится карандаш, бумага и графический редактор (например, Photoshop, Illustrator, Freehand или Gimp).

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

Мы собираемся проектировать сайт вымышленного problogger'a. Этот человек (назовем его Фред) пишет о часах. Он зарабатывает пару сотен баксов в месяц своим сайтом и хочет увеличить эту прибыль.

Шаг первый: определение цели сайта (что вы пытаетесь сделать? Как вы будете достигать этого)

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

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

Шаг второй: определение аудитории сайта (кто они и откуда)

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

Шаг третий: определение специфических потребностей (какие функции должны быть на сайте, чтобы достичь поставленных целей?)

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

А еще мы хотим увеличить связность сайта. Мы сделаем это, включив список «Любимых публикаций» и связывающие ссылки в низ публикации.

Мы покажем список категорий, чтобы позволить читателям исследовать сайт непоследовательно, и строку поиска, тогда читатели смогут искать определенные изделия или модели. Еще мы хотим вставить ссылки на другие блоги(blogroll), дабы разделить свою любовь с другими.

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

Шаг четвертый: рисование модульной сетки (грубые эскизы, чтобы экспериментировать с расположением элементов и вёрсткой)

Вот и начинается веселье. Я пользуюсь невероятной программой "OmniGraffle" (только для Mac) чтобы поиграться с вёрсткой сайта и иерархией элементов (подробнее об этом через минуту). Мне нравится оставаться вне моего графического редактора, так как иначе очень силен соблазн погрузиться в проектирование визуальных элементов. Вы сами захотите избежать перескакивания в визуальную часть проектирования на этой стадии, как только перестанете заблуждаться на этот счёт.

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

Вот пример сайта Фреда на первой стадии разработки:
http://www.problogger.net/wp-content/wireframe.jpg

Как вы уже заметили – никакого дизайна. Всё что мы делаем - определяем оптимальное размещение различных блоков, которые составляют наш сайт. Мы устанавливаем иерархию элементов на странице; решаем, что будет самым важным, на чём бы нам хотелось, чтобы пользователи останавливали свой взгляд.

Это весьма обширная область знаний. Я попытаюсь дать вам азы (эти данные взяты из статьи Питера Фарадея(Peter Faraday)). В сущности, когда мы приходим на веб-страницу, мы выполняем 2 действия: поиск и просмотр. При поиске наш глаз выделяет на странице значимые места. Мы обращаем внимание на следующее (в порядке значимости):

1. движение
2. размер
3. изображения
4. цвета
5. стиль текста (тип шрифта, начертание)
6. размещение

Определив, "откуда" мы можем начать читать, мы определяем, "что" читать, просматривая страницу. Мы просматриваем сгруппированные объекты, и расстояние между отдельными объектами решает, что является самым важным, чтобы прочитать это в первую очередь.

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

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

Шаг пятый: создаём стенд настроения (коллекция картинок, цветов, текстов и прочего, которая позволит вам ощутить конечную цель).

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

При проекте меньшего объёма, мы проходим через тот же процесс, но стенд создаем "виртуальный". Это может быть большой документ Photoshop, в который мы будем вставлять найденные подходящие материалы. Эти изображения становятся нашим стартом для создания палитры цветов, исследования текстуры и формы, и вообще действуют как вдохновение.

Создание такой вещи не занимает много времени – попробуйте и убедитесь сами. Вы будете удивлены, насколько это помогает.

Вот пример из недавнего проекта:
http://www.problogger.net/wp-content/mood-board.jpg

Шаг шестой: дизайн.

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

Одна из грубых ошибок начинающих веб-дизайнеров – когда не оставляют достаточно места вокруг отдельных элементов. Оно называется «пустое место» ("white space"). Обратите внимание, что оно необязательно должно быть белым! Скорее, термин означает просто свободное место.

В этом месте вы должны умело поработать над своим дизайном. Я намереваюсь покинуть вас и идти поработать над проектом Фреда.

Завтра мы превратим нашу статичную графику в тему WordPress.

Прежде чем я уйду, вот на чем я остановился с сайтом Фреда:
http://www.problogger.net/wp-content/site-so-far.jpg

Зачем нужны шаблоны Ajax

Ajax обещает принести много пользы в web-проектировании, и для основной Ajax-технологии уже доказана возможность её просто ошеломляющего применения (http://maps.google.com, http://www.francisshanahan.com/zuggest.aspx). Однако Ajax не панацея. Осторожность в проектировании никто еще не отменял, но иметь под рукой такую технологию очень удобно. И, поскольку уж Ajax появился, нам не мешало бы узнать больше о том, какой вид проектирования здесь работает, а также нам понадобятся методы, документация и обсуждения этой информации. К счастью, развитие Ajax-технологии имеет место в то время, когда шаблоны проектирования уже надежно укрепилось индустрии, а уж они является наилучшим средством реализации задумок. Таким образом, имеет смысл начать собирать каталог шаблонов Ajax. Эти мысли основываются на имеющихся образцах и примерах демонстрационных систем.

Шаблоны остаются шаблонами, ничего нового здесь нет. Шаблоны – это просто короткий путь к реализации знаний программиста, уже воплощенный во множестве Ajax-приложений. Их цель – открыть наилучшие решения той или иной проблемы, изучая, как разработчики успешно обходили все спорные моменты проектирования в схожей ситуации. Аякс же решает проблему юзабилити, и именно шаблоны позволяют сделать это при всевозможных ограничениях, особенно таких, как возможности и ожидания пользователя, пропускная способность соединений, особенность HTTP не учитывать состояние между сеансами связи, сложность Javascript.

Это развивающаяся технология. В конечном итоге должно появиться больше шаблонов, больше примеров и детальных объяснений. И еще одна оговорка: хотя Ajax и новый термин, но XMLHttpRequest и другие родственные технологии уже какое-то время известны. Я знаю это, однако введение одного-единственного обобщающего термина может послужить тем толчком, который придаст нужное направление всему движению web-разработки. Ajax – это всего лишь имя, но иногда имя может быть чрезвычайно важным.

Это всё на сегодня! Желаю вам хорошо отдохнуть на майских праздниках, подышать свежим воздухом и съездить, наконец, на природу. Но если же вам не удаётся надолго разлучиться с компьютером, напоминаю, что ссылки на интересные статьи, чей перевод вы хотели бы прочесть, можно присылать на мой почтовый ящик adodonov@gmail.com.

Всего наилучшего, Додонов Александр.