ArtShok. Сайтостроение и немного SEO

Уроки и примеры по CSS, jQuery. Советы по монетизации и продвижению сайтов

23 03

2009

Flash поверх выпадающего меню или JavaScript (JS)

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

Суть в том, что если у Вас на сайте есть флэш, а рядом/над ним есть выпадающее меню или, например, какой-либо эффект на JavaScript, то flash будете перекрывать его, находиться поверх.

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

<param name="wmode" value="transparent">

А в embed добавляем

wmode="transparent"

Пример.

1 .Код до решения проблемы


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
<param name="movie" value="images/filename.swf" />
<param name="quality" value="high" />
<embed src="images/filename.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="125" height="125">
</embed>
</object>

2. Код после решения проблемы


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
<param name="movie" value="images/filename.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="images/filename.swf" wmode="transparent"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="125" height="125">
</embed>
</object>

Больше ничего не потребуется.

20 03

2009

Скованные одной цепью (не Нау, а Сео)

По сети уже расползается очень интересный ролик на тему СЕО. Тем, кто в теме, думаю будет интересно :)

17 03

2009

Возрождение блога!

Приветствую Вас на обновленной версии блога “ArtShok. Красивое сайтостроение”, посвященному в большей степени примерам и урокам по css,  jQuery и AJAX.

Прошлая версия блога хоть и начала набирать обороты, но была оставлена по .. в принципе не важно по каким причинам личным причинам… Так что это попытка №2, которая, надеюсь, будет более удачной!)

И еще раз напоминаю политику блога: никаких noindex или nofollow!
Что касается ссылок на Ваш ресурс, то (спасибо плагину от MaxSite) они появятся только после определенного количества комментариев (дабы сразу отсеять нерадивых спамеров).

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

11 11

2008

Все через Alt… (доступные комбинации значков и символов)

Тема поста на сегодня “Все через Alt…”, которой я начинаю серию шпаргалок для повседневнего использования. Конечно, вряд ли вы каждый день ломаете голову как поставить ♪ или ™ и уж тем более ╞. Но по закону подлости, именно когда нам нужно вставить что-то этакое, оно не находится.
Таблица комбинаций значков и символов с Alt

30 10

2008

Меню в виде книжного оглавления на CSS

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

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

Меню на CSS, реализация меню в виже списка на css

Как сделать красивое меню на CSS

25 10

2008

Долой noindex и nofollow!

Убираю noindex с комментариев. Что же касается nofollow - его и так не было:)
Единственный момент - в целях борьбы со спамом пришлось прибегнуть к плагину от MaxSite

Цель спамера - получить ссылку с Вашего сайта. И вот здесь кроется основной секрет идеи. Спамер - скорее всего будет случайным посетителем, поэтому его ник, адрес или email будут единичными. Из всего этого следует, что отображать ссылку нужно только у тех, кто оставил несколько комментариев.

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

Касательно ссылок внутри поста: noindex и nofollow никаких не было и впредь не будет. Поэтому если есть предложения по поводу обмена постовыми или просто хотите чем-то поделиться - отписывайтесь здесь.

Всем удачных выходных!

Изменение от 18.06.2066: аттрибут nofollow возвращен, но только в пределах комментария. В качестве компенсации остается блок “ТОП комментаторов”, где ссылки на сайт авторов отображаются по-прежнему.

25 10

2008

Как уйти от стандартных шрифтов?

У rotor’a пару дней назад была опубликована очень интересная статья о том, как с помощью CSS, JavaScript и PHP изменить стандартные шрифты на сайте без использования флэш!

Данная технология называется FLIR (Facelift Image Replacement), своего рода альтернатива sIFR.
Что это и зачем?

22 10

2008

Меню на CSS+jQuery (гаражные двери)

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

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

Меню на css и jQuery

Не скажу что самый интересный и полезный пример, но при умелом обращении и тематичном дизайне будет как раз “в тему”. Каждый из пунктов меню как бы закрыт гаражной дверью, а при наведении курсора открывается.

Как создать красивое меню на jQuery и CSS

16 10

2008

Что делать при финансовом кризисе?

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

Поэтому мы с вами сейчас пробежимся по этой не столь радостной теме, чтобы знать как себя вести с клиентами, ибо теперь они начнут деньги не просто экономить, а зажимать! Так что ищем способ все-таки получить заслуженные.. нет, не зелененькие, а родные деревянные.
Итак, 5 советов по преодолению кризиса

09 10

2008

Как установить вид курсора?

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

Привожу подборку стилей по определению вида курсора. Вдруг кому понадобится.

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

CSS Пример IE6 Moz Firefox
cursor: auto · X X X
cursor: default · X X X
cursor: hand · X
cursor: pointer · X X X
cursor: crosshair · X X X
cursor: move · X X X
cursor: text · X X X
cursor: vertical-text · X X
cursor: wait · X X X
cursor: progress · X X
cursor: help · X X X
cursor: n-resize · X X X
cursor: s-resize · X X X
cursor: e-resize · X X X
cursor: w-resize · X X X
cursor: ne-resize · X X X
cursor: sw-resize · X X X
cursor: se-resize · X X X
cursor: nw-resize · X X X
cursor: all-scroll · X
cursor: col-resize · X X
cursor: row-resize · X X
cursor: no-drop · X
cursor: not-allowed · X X
cursor: url() X