Часто можно услышать споры о том какая же ширина сайта является оптимальной. Плюсов и минусов как у фиксированной ширины макета, так и у резиновой ширины, хватает.

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

Сайты с фиксированной шириной – более “четкие”, т.е. они не меняются в зависимости от размера браузера, но единственная их проблема (ИМХО), слишком много образуется неиспользованного пустого пространства на “широких” мониторах.

В общем, не буду долго тянуть, в статье я предлагаю ознакомиться с “гибридной” шириной каркаса, а также разобраны некоторые актуальные приемы responsive design (отзывчивого дизайна).

Гибридная ширина в моем понятии, это когда ширина имеет возможность тянуться, но только до определенной ширины. Т.е. если у юзера разрешение монитора 1680, то у него сайт не расползается на всю ширину экрана, а только до определенной ширины. В качестве примера, где это я увидел в первый раз, это сайт одного из самых влиятельных веб-журналов для разработчиков smashingmagazine.com.

Если у вас широкий экран, попробуйте уменьшить размер окна браузера и поймете о чем речь. Т.е. сайт имеет максимальный и минимальный предел растягивания. Конкретно на смешине это реализуется просто. Общий слой, который содержит все слои сайта имеет id=”pagewidth” и css для него такой

body {    max-width: 104em;overflow-x: hidden;}
#pagewidth {min-width: 1110px;}

Но вот что мне совсем не нравится в таком способе, что если размер окна меньше, чем минимальный заданный (1110), то горизонтальный скролл не появляется совсем, т.е. если разрешение будет 1024*768 – то вообще невозможно увидеть что в правой части (конкретно не видны будут 1110-1024=86 пикселей).

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

body {min-width:992px}
#pagewidth {margin: 0 auto;max-width: 1278px;}

максимальную ширину вы можете поставить и больше, например, 1360.

А что делать с ИЕ6 – он ведь не понимает свойства min и max width. Лично я вообще на него начал забивать, так как уже и сами майкрософты давно заявили, что не поддерживают этот браузер. Но если вы все еще возитесь с этим куском говна браузером, то можете почитать описания разных хаков для ИЕ6 для этих целей.

К стати, на хабре есть интересный топик, где описывается еще один способ для создания гибридной ширины

Но это еще не все. Возможно вы не знали, но одним из основных трендов в 2011 и 2012 годах в дизайне и верстке сайтов – это responsive design.

Responsive design

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

Если понимаете англицкий, то есть хорошая статья на том же смешине, также есть хорошая статья на русском на хабре.

Вообще мой любимый способ создания “отзывчивых сайтов” это через media queries, правда ИЕ ниже 9 версии не понимают эти значения, поэтому для них придумали специальный скрипт, который решает эту проблему. Одним из таких скриптов поделюсь. Просто в секцию head вашего сайта вставляете следующий код

<!--[if lt IE 9]>       <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>    <![endif]-->  

Вот и все. Удачи вам и создавайте полезные и интересные сайты и дизайны.

А самая большая проблема флеш технологий на сегодня – как ни страно, это Apple, продукция которых становится все популярней и которые не хотят поддерживать адобовский флеш.

Чем же можно заменить флеш?

Одно время микрофост продвигали свою технологию silverlight, но как и остальное от оконников, технология не стала широкопопулярной.

И на публику появилась новая техника html5. В купе с css3 + популярной библиотекой jquery, HTML5 позволяет добиваться потрясающих результатов и аннимаций. И если с css3 понятно чего можно добиться, с jquery есть много очень полезных сайтов и плагинов, то чего можно добиться с HTML5?

Вот вам несколько примеров для вдохновения. Заметьте, эта техника только набирает популярность и я уверен, что таких примеров будет все больше и больше.

Кликайте на картинки, чтобы перейти на сайты-примеры

Основное преимущество HTML5, это то, что html5 – это не совсем новая технология, это новая разметка документа, такая же как html4, на которой написаны все сайты сейчас, только более продвинутей. Это означает, что переделывать старые сайты совсем не обязательно, можно всего лишь добавить то, что вам требуется.

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

Кроме этого, 2d картинки теперь можно вставлять прямо в код. Но и это ещё не все. Благодаря встроенному кешированию, можно будет просматривать странички, которые вы уже посетили, находясь в оффлайне. Добавьте к этому более быструю работу, а также усовершенствованную поддержку мобильных устройств и получите технологию будущего.

Для более полного ознакомления с html5 читайте статьи 1 и 2. (статьи на буржуйском)

Давно собирался написать огромную статью на эту тематику, так как она будет всегда актуальной.

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

Для систематизации всей информации, я решил разбить всю статью на логические части.

• 1. Структура блогов (примеры, способы реализации, обзор главных функциональных частей)
• 2. То, что поможет сделать ваш блог узнаваемым и живым (интересные трюки и технологии, а также примеры)
• 3. Примеры лучших блогов
• 4. Разбор полетов или обзор некоторых топовых блогов рунета
• 5. Выводы.

Итак, начнем.

Структура блогов

Любой блог должен иметь функциональные части. Я выделяю такие: фон, хедер, контентная часть (обычно с лентой постов), сайдбар, футер. Конечно же, иногда некоторые части игнорируются, но все же большая часть блогов имеет их все. Но перед тем как все их рассмотреть, мне бы хотелось рассказать о ещё одной важной теме – структуре верстки блога (layout). Основной вопрос состоит в том делать ли верстку для блогов резиновой или же выравнивать по центру с шириной 900-1000, как принято на большинстве сайтов.

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

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

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

Вернемся к теме и перейдем к функциональным частям блога.

1. Хедер

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

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

Как примеры

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

Такое решение отлично подходит для сайтов ИТ-тематики.

Также главные ссылки можно не отделять от хедера, а сделать тоже графическими.

Также стоит сразу позаботится об местах для баннеров. Баннеры часто отлично смотрятся именно в хедере. Вот вам пример

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

2. Фон

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

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

3. Контентная часть

Обычно содержит ленту постов.

Здесь я бы обратил внимание прежде всего на шрифты. Заголовки делайте крупными и интересными, можно на нестандартных шрифтах. Шрифт самого контента делайте всегда стандартными легкочитаемыми шрифтами, вроде Arial, tahoma, verdana. Обратите внимание на оформление даты, а также ссылок на теги, рубрику, автора.

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

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

4. Сайдбар

Обычно на блогах ставят 1 или 2 сайдбара. Все схемы рассматривать не буду, опишу 2 наиболее удачные по моему мнению.

первая это 2 сайдбара: левый и правый + контент посередине. Пример такого сайдбара можно увидеть на сайте

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

Второй тип расположения сайдбара – один сайдбар в правой (реже левой) части сайта. Пример ниже

Такой тип наиболее универсальный и практичный. Помогает экономить много пространства, так как вывод разделов, популярных записей и т.д. осуществляется обычно через вкладки на jquery. Я рекомендую такую схему расположения элементов в правом сайдбаре начиная сверху: подписка на RSS или же другие ссылки наиболее важные для вас; баннеры или реклама; вкладки с рубриками, популярными записями, последними комментариями; теги и дополнительные блоки.

5. Футер

Сюда помещаем ещё раз название сайта, можно контактные данные + к примеру ссылки на ваши другие сайты или сайты друзей.

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

Если же ищите вдохновение для оригинального футера, то советую глянуть это

Со структурой закончили. В конце хотелось бы сказать, что взгляд пользователя обычно перемещается в виде буквы Z, а значит самым значимым местом является левый верхний угол куда стоит поместить лого, а также графику, которая создает бренд вашего сайта + в первый экран должен входить хотя бы первый пост. Далее верхний правый угол, куда следует поместить call-to-action ссылки или кнопки (например подписку на РСС или же кнопку на покупку вашей книги).

Идем дальше

Техники, которые сделают ваш блог мегазвездой

1. Цвет

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

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

2. Текстуры, векторные элементы

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

2. Размер

Можете попробовать поэкспериментировать с контрастом размеров разных элементов, например, с персонажами.

3. Логотип

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

4. Проработанные мелкие элементы сайта

Здесь хочу описать сразу несколько элементов. Для начала скажу, что есть хороший сайт, на котором можно просмотреть отдельно взятые элементы с разных хорошо оформленных сайтов. Можете там вдохновиться, ну а теперь по-порядку.

4.1 Пагинация

Красиво прорисованная пагинация всегда говорит о том, что в дизайна сайта вложили немало усилий и делает его более дорогим

4.2 Виджеты с вкладками

Виджеты с вкладками очень хорошо экономят пространство и выглядят весьма симпатично

4.3 Оформление блока об авторе или контактных данных

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

4.4 Ссылки на похожие или популярные записи в конце поста с миниатюрами

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

4.5. Оформление комментариев

Во-первых, стоит позаботиться о выделении комментариев автора. Во-вторых, продумать оформление самих комментариев и формы. ниже несколько примеров

также можете глянуть подборку из более чем 40 вариантов оформления комментариев

4.6. Оформление кнопки rss

Так исторически вышло, что кол-во подписчиков на RSS – является одним из показателей качества блога и хоть я с этим в корне не согласен, все же кнопочку с рсс стоит как-то выделить

Можно даже аннимацией

Советую глянуть ещё эту статью, а также вот такую огромную подборку кнопок

4.7 Оформление элементов статьи

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

Если не хотите сильно заморачиваться, то можете попробовать этот плагин

4.8 Фавиконка

Не забываем и об этом важном элементе. Если не умеете делать, то расскажу простой способ. Готовите небольшую картинку, идете на сайт favicon.ru – заливаете картинку, получаете фавиконку, которую нужно вставить в корень сайта.

Переходим к следующему пункту.

3. Примеры лучших блогов

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

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

4. Потрошилка блогов рунета

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

1. Блог Димка.

Создавался в студии блогоарт, поэтому имеет множество элементов дизайна присущие этой студии. В целом производит хорошее впечатление, все светлое и симпатичное. Если бы не одно большое НО – обилие рекламы. Ну фиг с ней с той растяжкой и баннерами 468*60, но вот этот огромный небоскреб справа убивает напрочь диз и создается впечатление, что в первом экране больше рекламы, чем текста. Нехорошо Димка как-то.

Но необычно и интересно смотрится футер

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

2. SeoBlade

Название блога можно перевести как сеолезвие, поэтому здесь можете увидеть разные стальные элементы и металлический блеск. Зачет – дизайн отвечает бренду.

Слева можете увидеть вкладочки на jquery, рубрики и комментарии с симпатичными иконками. Смотрится хорошо.

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

3. Блог Шапранова

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

Понравилось также оформление сайдбара. Хорошо оформлены вкладочки. Понравился также шрифт текста и расстояние между строчками.

А теперь о нехорошем. Зеленый ядовитый цвет фона – но на это ещё можно закрыть глаза, так как цвет приглушенный и имеет текстуру травы. Но вот поставить комментарии от вконтакте – ужос.

Паша, верни человеческие комменты людям.

4. Inspire me

Симпатичный стильный дизайн на основе темы glow от elegantthemes.com. Хорошо подобраны цвета, логотип. Большие и яркие кнопки подписки в сайдбаре. Хорошо используется пустое пространство между блоками и строками текста, что создает впечатление воздушности и легкости.

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

5. Блог Маула

Чем мне нравятся все сайты Маула – это то, что все они имеют единный стержень в стиле, но при этом не копируют друг друга на 100%. Очень стильно и хорошо поддерживает бренд.

Хорошо подобраны все элементы дизайна, очень понравился сайдбар.

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

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

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

6. Блог Терехова

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

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

Что не нравится – комменты. Что сама форма, что сами комменты.

7. Блог Бормалея

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

А какой отпадный футер!!!!!!!!!

Сразу видно, что работал профи-дизайнер.

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

Ну и ещё увеличил бы line-height (пространство между строками текста), а то сильно сливается.

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

5. Выводы и ссылки

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

Какой идеальный дизайн для блогов? Каждый видит что-то свое, на 100% всем не угодишь. Но основные признаки можно выделить:

• Бренд. Это может быть и красивый логотип, интересная графика с персонажем или иллюстрации
• Хорошо подобранные текстуры фона. Чтобы и не мешали читать, при этом подчеркивали дизайн и контент
• Функциональность. Сюда бы я отнес информативность и оформление сайдбара, ссылки на похожие записи, и т.д.
• Типографика. Легкие, хорошо читаемые шрифты и красивые заголовки.
• Хорошо проработанные мелкие элементы дизайна, а также комментарии и формы.
• Ну и не забывать, что content is a king

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

P.S. Наверное вы спросите – а чего ж ты не сделал себя кайфовый дизайн, раз такой спец. Ответ прост и банален – не хватает времени. Решил, что пока лучше тратить время на качество наполнения, а не дизайн, но развивать текущий буду, пока не надоест он совсем.

Ну и напоследок, немного литературы

http://www.incomediary.com/make-your-blog-stand-out-from-the-crowd/

http://www.problogdesign.com/design/7-elements-to-make-your-blog-look-great/

http://www.1stwebdesigner.com/inspiration/blog-designs-design-functionality/

http://www.instantshift.com/2009/09/13/70-fresh-and-inspirational-blog-designs/

http://www.blogdesignblog.com/blog-design/5-simple-ways-to-make-your-blog-design-pop/

http://www.blogdesignblog.com/blog-design/how-to-blog-design-style-guide/

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

Для начала пару слов как пользоваться action. После скачивания, их нужно скопировать в папку где установлен фотошоп/Presets/Actions.

После этого в фотошопе нажимайте Alt+F9 и выбирайте нужный экшен. Для этого нужно нажать крайнюю правую кнопочку вкладки

Выбирайте нужный action и делайте 2 клика мышкой. Теперь он появится в вкладке. Далее выбирайте слой с картинкой, выбирайте этот экшен и нажимайте кнопочку play

Однажды я выделил целый день и искал, пробовал многие action. Но все слишком банальные, с какими неинтересными эффектами оказались. Единственные интересные экшены я нашел у Rockstar Productions. С ними я вас и ознакомлю.

Для начала поглядите рекламные скрины

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

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

Итак есть такая фотка

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

Применим action blizzardbeach – получим вот так.

Уже веселей, но как-то сильно засвечено. Не беда, можно ведь скорректировать эффект в нужном направлении. Убираем верхний градиент, 4 слой сверху с корректирующей заливкой цвета #fff5de – ставим с меньшей прозрачностью или убираем вообще, чтобы фото не было слишком светлым, 5 слой с selective color ставим с меньшей прозрачностью, чтобы кожа не была столь красного оттенка. Получится так

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

Попробуем теперь что-то светлое.

Есть так (фото кликабельны, нажмите, чтобы увидеть реальный размер)

Фото четкое, но какая-то скучная зима. Добавим action paperbags, чуть уменьшим прозрачность некоторых слоев и получится

Вот уже совсем другие оттенки у зимы. Может не совсем реальные как в жизни, но зачем нам реальные?

Скачать все action можно на этой страничке

Мониторинг сетки. Немногие знают, что wordpress можно использовать легко и как сервис e-mail маркетинга. Читайте в статье, как создать почтовую рассылку на WordPress

Сегодня решил открыть некоторые простенькие секреты, которые позволят вам намного улучшить внешний вид вашего сайта. И речь пойдет о технике флеша.

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

В статье речь пойдет о том, как правильно вставлять эти флешролики так, чтобы они органично вписывались в фон.

Для начала, я хотел бы показать зачем нам это нужно на примере.

Идем на один сайт сайзенов. Думаете у них весь сайт на флеше? А вот и нет. Сама шапка сделана картинкой, а поверх наложен флеш с анимацией. Вы можете сами убедиться в этом глянув на картинку.

Итак, первое что нужно сделать для такой техники – подготовить фон картинку и флеш-наложение. Делать это можно в любых программах, которые вам понравятся. При экспорте флеш-ролика, обязательно нужно его сделать на прозрачном фоне. Для этого перед экспортом, вам нужно найти нужную галочку. Обычно этот пунктик называется alpha channel. Очень часто, вам придется сделать определенные настройки в html экспорте. На примере, в adobe flash – эти настройки находятся в file -> Publish Settings -> html . Ищем там опцию window mode и выбираем transparent.

Далее, нужно вставить правильно этот ролик на сайт.

Я считаю, что самым лучшим решением для этого сейчас является swf object.

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

Для этого будем использовать динамический метод вставки флеш. Это значит, что нужно в коде создать div с определенным id – в него мы вставим альтернативный контент, который будет показываться, если у пользователя не установлен\отключен флеш проигрыватель. Получится что-то вроде этого

 <div id="myContent">
<p>Для просмотра ролика установите флеш-проигрыватель </p>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
</div>

Обязательно запомните id слоя.

Далее, в хедере нужно подключить скрипт swfobject, прописав путь к нему

<script type="text/javascript" src="swfobject.js"></script>

Теперь нужно вывести вместо нашего слоя флеш ролик. Для этого пишем такой код

<script type="text/javascript">

var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
                   "expressInstall.swf", flashvars, params, attributes);

</script>

Теперь расшифрую.

var flashvars нужно нам для обозначения переменных. В нашем случае, это не нужно.

var params – очень важно здесь указать wmode : “transparent” – потому что без этого, ролик вставится без прозрачного фона. В этой строке можно указывать и другие параметры для флеша

var attributes – здесь указываем аттрибуты, нам это тоже не нужно.

В этой строке

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
                   "expressInstall.swf", flashvars, params, attributes);

Мы указываем по порядку

1. swfUrl (путь к ролику на флеше)
2. id (id того слоя, который мы запомнили выше)
3. width (ширина SWF)
4. height (высота SWF)
5. version (версия Flash плеера необходимого для данного SWF)
6. expressInstallSwfurl (задает URL вашего express install SWF и активирует Adobe express install [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b7521]. Обратите внимание, что express install срабатывает только один раз (при первом исполнении), требует Flash плеер версии 6.0.65 или старшей на Win или Mac платформах, минимально возможный размер SWF для его работы 310×137px.)
7. flashvars (подключаем переменные)
8. params (подключаем параметры)
9. attributes (подключаем атрибуты)

Вот и все, если же что-то непонятно, то вот вам архив, в нем показан пример подключения такого флеш ролика.

Скачать пример вставки флеш ролика с прозрачным фоном