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

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


Расписание NevaCamp 2009

SMTДля тех, кто еще не зарегистрировался для участия в NevaCamp, привожу расписание на 3 дня. Надеюсь, что более четкое представление о том, что же вас ждет, все-таки сподвигнет на участие.  Я не буду описывать, какие плюсы из всего этого можно извлечь, думаю и так понятно, что расти, развиваться и заводить новые знакомства полезно в любое время.

1 день - пятница - 26 июня

10:00 - Регистрация участников
11:00 - Открытие NevaCamp и конкурса стартапов StartupVision и информационные панели, выступления экспертов
12:30 - Microsoft BizSpark presentation
13:00 - Pitch Elevator
16:00 - презентации финалистов
18:00 - закрытие конкурса стартапов StartupVision и подведение итогов
18:30 - 19:00 - “Ужин с инвестором”
19:00 - экскурсии по городу и культурно-развлекательная программа (в два захода, второй после Ужина с Инвестором).
21:00 - Party
23:00 - экскурсии по крышам ночного Питера.

Раписание на 2й и 3й день…

06.10

2009

RSS каталоги, модернизация №3 (+15 и -73)

Итак, проведена 3 модернизация списка RSS каталогов в результате которой удалено 73 сайта (дубликаты, дохлые ссылки), добавлено 15 новых и местами изменены адреса для добавления.

Русские:

  1. RSSDirectory - http://rssdirectory.ru/addfeed.html?catid=
  2. ZSSN - http://rss.zssn.org.ua/
  3. WWWomen - http://wwwomen.ru/s.php/2383.htm
  4. RSS-Farm - http://rss-farm.ru/catalog.aspx
  5. RSS Каталог http://www.no-nofollow.ru/
  6. Prime RSS - http://www.prime-rss.ru/add.php
  7. WorldRSS - http://www.worldrss.ru/addfeed.html?catid=
  8. BlogRider - http://blogrider.ru/catalog/blogs/add
  9. Google блоги - http://blogsearch.google.ru/ping?hl=ru

Зарубежные:

  1. Bloglines - http://www.bloglines.com/
  2. NewsGator - http://www.newsgator.com/ngs/subscriber/
  3. RSS nachrichten - http://rss-eintragen.rss-nachrichten.de/
  4. rssHugger - http://www.rsshugger.com/
  5. Wil’s Domain - http://www.wilsdomain.com/submit-site.php
  6. LeighRSS - http://www.leighrss.com/rss-add.html

RSS каталоги для скачивания…

5 способов красивого оформления посещенных ссылок с помощью CSS

Как правило, вы не найдете на большинстве сайтов отдельных стилей для оформления посещенных ссылок, так называемого :visited псевдокласса. По правде сказать, это и не всегда надо. Но если структура сайта достаточно грамоздка, или вы часто используете списки (например, перечень статей), то будет не лишним предусмотреть вывод отдельного стиля для уже посещенных ссылок.

Demo и Скачать

5 способов оформления ссылок…

Бриф на сайт и дизайн сайта

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

Итак,

Бриф (от англ. brief) — краткая письменная форма согласительного порядка между рекламодателем и рекламистом, в которой прописываются основные параметры будущей рекламной кампании. (Wikipedia)

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

Скачать бриф на дизайн

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

04.17

2009

Обо всем по чуть-чуть

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

Часть первая. Серьезная.

Следующие серия постов будет представлять из себя блок уроков, посвященных использованию и оформлению списков (ul, ol, li) с помощью css. Так же будут приведены примеры реализации меню с помощью списка.

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

jQuery пример: красивая смена текста за 10 минут

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

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

Демо | Скачать
3 шага для анимации текста »

10.22

2008

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

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

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

Меню на css и jQuery

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

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

10.08

2008

Иконизируем ссылки

Линки есть на любых сайтах, но не всегда понятно, на что именно они ссылаются. Это может быть экселевский файл, ссылка на скайп, rss, pdf или еще что-то. Согласитесь, что было бы не плохо заранее знать, куда вы попадете или что скачаете (и чтобы при этом постоянно не смотреть в статусную строку, дабы распознать расширение, на которое оканчивается ссылка). Кстати, текстовая информация усваивается людьми только на 10%, в то время как графическая - на 65%. Из чего следует, что графика распознается легче. Делаем выводы ;)

Как украсить ссылки с помощью иконок

Идея по сути проста: добавлять соответствующие иконки к каждой ссылке (ну или только к необходимым, это вам решать). НО! Добавлять не вручную каждый раз, а прописать в CSS, и пусть оно само работает.
Как украсить ссылки с помощью иконок и css

09.30

2008

Градиентный текст с помощью CSS (без флэш и javascript)

Градиентный текст с помощью CSSНу что? Уже успели оценить ссылочки в виде текста с градиентом?:) Еще нет? Видимо, вы читаете данную статью через ридер. Если так, то предлагаю сначала ознакомиться с примером.

Как видите, текст ссылки на демо тоже украшен градиентом. И самое важно, из того что уже было сказано - это “текст“. Так что закрываем фотошоп, если вы его уже запустили - ничего рисовать не будем. Знание flash и JavaScript тоже не понадобится.

Потребуется только пустой тэг <span> и фоновая картинка (в нашем случае - прозрачный png).

Что нам это дает:

  • Чистый код и использование ТОЛЬКО CSS. Повторюсь - никаких JavaScript или flash
  • Красивое оформление заголовков СТАНДАРТНЫМИ шрифтами. Никаких рисунков (не забываем про семантическую верстку и seo-оптимизацию), никаких работ в фотошопе или других графических редакторах. Один раз прописали стиль и забыли.

Демо | Скачать

А теперь о том, как сделать градиентный текст на css

09.25

2008

Реализация меню с помощью списка (form)

Вчера мы изучали, как с помощью CSS и JQuery из простых форм сделать что-то красивое. Если пока не нашли применения, держите пример реализации меню в виде списка (но не методами CSS и тэгов <li>…</li> - как было бы желательно для seo-оптимизации, а с помощью form).

Демо | Скачать

Такая реализация удобна в том случае, если у вас на сайте мало места. Подобные списки можно увидеть в “подвалах”, когда хотят продублировать слишком большое меню. Голь на выдумки хитра, как говорится:)
Как реализовать меню с помощью списка