четверг, июля 31, 2008

Итоги месяца. Тема “Perfect Tabs” для Wordpress 2.6

Как правило, когда наступает конец месяца начинают подводить итоги всевозможным достижениям и провалам. Для моего блога этот месяц стал довольно удачным, поэтому спешу бы поделиться этим с вами. Для начала порадую вас релизом моей темы для Wordpress “Perfect Tabs” - теперь она работает и на версии wordpress 2.6, до которой я недавно обновила движок. Кстати на сайдбаре справа я подключила небольшой опрос на тему “Какую версию wordpress вы используете”. Интересно будет посмотреть статистику :) Архив с темой включает все необходимые плагины, которые нужно предварительно настроить после активации для корректной работы темы. Все настройки описаны в фaйле readme.html. Отмечу, что тема тестировалась на php4, поэтому были внесены небольшие поправки в исходный код некоторых плагинов. Если возникнут проблемы - пишите, разберемся. Что касается основных показателей популярности блога, то они заметно подросли. Приятным сюрпризом оказалось недавнее обновление PR - теперь мой блог отличник с PR5 :) За месяц вырос и ТИЦ блога - с 40 до 90. Число посетителей возросло в 2 раза. Теперь каждый день на блоге не менее 250 уникальных посетителей, причем почти половина из них читает блог каждый день, храня сайт в закладках - спасибо вам! Большой прирост числа RSS читателей (за день прибавилось почти 150) принес мне мой же плагин “Target Visitors”, над которым я продолжаю работу. Напомню, что плагин позволяет показывать специальное сообщение для пользователей пришедших с поисковых систем (Google, Yandex, Mail, Yahoo, Liveinternet, Rambler, Altavista, Msn). Сейчас число подписчиков колеблется в районе 480. Подросла популярность и в рейтинге блогов Яндекса - с 15000+ места до 2172. Здесь сыграли роль кросс посты на дублирущие блоги: for-lelya.ya.ru, getincss.livejournal.com, lelya-s.blogspot.com, принесшие мне дополнительные ссылочки. Blogun и спонсорские ссылки принесли мне около 200$, так что теперь мои старания еще и окупаются, что приятно радует :) Участие в конкурсе “День RSS в России” также не прошло даром. Хоть первых мест мне не досталось, но поощрительные специальные призы очень порадовали: уникальный шаблон от TemplateMonster.com; 2 книги от издательства "МИФ"; сертификат на 100$ в интернет-магазине Sofkey.ru; лицензия на программу Соло на клавиатуре; 50 евро на аккаунт в MP3Sale. Кстати намечается еще один интересный праздник - День P2P. Сейчас ищутся спонсоры, а также требуется информационная поддержка организации праздника. Поэтому всех заинтересованных просьба откликнуться сюда. Скоро я обязательно проведу и свой конкурс :) Идеи уже есть, поэтому пока буду держать вас в предвкушении :) Очень хочу выразить благодарность всем читателям блога. Ваша поддержка и внимание очень важно для меня. Я обязательно и дальше буду радовать вас новыми интересными статьями и обзорами. А чтобы блог был еще лучше и интереснее, мне нужна ваша помощь :) Иногда я получаю различные замечания и критику в комментариях и конечно же, стараюсь исправиться

Оставить комментарии.

вторник, июля 29, 2008

Pattern Tap - коллекция креатива

Обнаружила сегодня весьма полезный и интересный проект -Pattern Tap.

Pattern Tap - это коллекция креативных ресурсов, разбитых по различным категориям, например: красивый фон сайта, уникальный дизайн страницы 404, креативные кнопочки, интересное оформление комментариев, футера, великолепные графические иллюстрации и многое другое.

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

А сколько стоит ваш час работы? Интересные рассуждения в блоге интернет-маркетолога.

Ищите дешевые квартиры в москве на сутки? Лучшие условия проживания по приемлемым ценам только для вас.

Лето.. Жара.. Что может быть лучше, чем рыбалка свежим ранним утром.

Великолепные уроки технического дизайна от фриланс-дизайнера Zpro.

Кроме того, вы можете сами зарегистрироваться на сайте и составить свою коллекцию креативной графики и следить за обновлениями через RSS.

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

Лично я советую заглянуть в коллекцию фонов, “шапок” и портфолио. А вообще, хочется посмотреть все :)

Оставить комментарии.

воскресенье, июля 27, 2008

Статистика использования браузеров за первое полугодие 2008 года

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

Для начала вспомним то, что было - статистика браузеров на начало 2008 года. Напомню, что эта статистика по миру в целом представлена на hitslink.com

Статистика использование браузеров на начало 2008 года

IE7 с момента релиза летом 2007г удалось за полгода обогнать своего младшего брата IE6 уже на 10%.

FireFox2 крепко держался за 3 место и процент рос каждый месяц минимум на 0.5%, впрочем в том же темпе укреплял свои позиции и Safari 3.0.

Только Opera 9 никак не мог перешагнуть 1% барьер, опережая лишь Firefox 1.5 с 0,52%.

Эта лето хорошенько ударило по статистике, когда в июне были объявлены релизы FireFox3, Opera 9.5 и Safari 3.1

Спонсоры статьи: Лучший веб хостинг с php, mysql. Домены в подарок. Индивидуальные тарифы.

Новый блог о яндекс.директ и рся: все о контекстной рекламе, продвижении сайтов в Яндекс, практические семинары.

Вот так выглядит статистика сейчас:

Статистика использования браузеров за первое полугодие 2008 года
Статистика использования браузеров за первое полугодие 2008 года

IE7 подрос всего на 3,5%, но зато отрыв от IE6 составляет уже 20%. Причин падения старичка IE6 несколько:

1. Вышел SP3 для WindowsXP, настойчиво предлагающий обновить IE6 до новой версии

2. Акции вебмастеров против IE6, например, проект NoIE и зарубежный Save The Developers

3. IE7 установили как минимум все  веб-разработчики, просто того требует их работа.

Что касается релиза FireFox3, то стоит рассмотреть статистику роста его использования отдельно.

Новая версия стала доступна для скачивания 13 июня и сейчас число пользователей выросло до 28,340,281 (нажмите на картинку, чтобы увеличить).

В общей статистике процент хоть и небольшой, но в 3,3 раза опережает показатели Opera 9.x и даже в 2 раза новый Safari 3. Что ж, рекорд Гиннеса по количеству загрузок оправдался.

А вот Opera проиграла свою 6-ю позицию Safari 3.0 и попала в список “остальные браузеры”, процент которых в целом составляет 3,37%.

Но надо отметить, что если взглянуть на графики использования браузеров в РУнете, то статистика в корне отличается от мировых тенденций. У нас Opera намного популярней даже FireFox 2 (согласно данным Liveinternet.ru).

Статистика популярности браузеров в РУнете

Статистика использование браузеров в РУнете на начало 2008 года

На графике отчетливо видно, как падают позиции IE6 начиная с апреля этого года,  однако в этот же период показатели IE7 довольно нестабильны.

А вот Opera с успехом опередила Firefox2 уже в начале года и позиций не сдает.

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

Safari пока остается в тени, популярность его не достигает даже 1%. Что никак не соотвествует статистике по миру в целом. Из этого наверное можно сделать вывод, что пользователи отдают предпочтение все же браузерам OS Windows, конечно, не в обиду пользователям Linux и MAC.

Да и к чему нам прибавлять еще один браузер в копилку кроссбраузерного набора верстальщика :)

Что ж, тенденции вполне очевидные. Вебмастерам все еще придется нести груз и поддерживать сайты для IE6. Но думаю, свеженькие релизы FF3.1 и Opera 9.5.1 все же немного заглушат споры о багах IE6, т.к. теперь можно смело обсуждать новые стандарты CSS3.

Оставить комментарии.

суббота, июля 26, 2008

Мой блог стал отличником :)

Сегодня многие блоги перешли из ряда хорошистов в отличники, в том числе и мой :) Радостную новость об обновлении PR написал Роман Настенко, его также поздравляю с пятерочкой! Среди оптимизаторов, однако, новость вызвала очередное бурное обсуждение. У кого-то PR поднялся с 0 до 3, а кто-то несмотря на все старания, так и остался в низах. Даже умудрились пустить слух, что обновление коснулось только РУнета. Все же апдейт имеет место быть, что подтверждает сам Matt Cutts. Проверить новый PR своего сайта можно здесь, или с помощью аддона для FireFox SeoQuake - там тоже свеженькие данные. Спонсоры новости: Блог хостинг с предустановленным Wordpress 2.6. Домен в подарок на всю жизнь! Строительная компания “Маршал” предлагает профессиональные услуги: ремонт офисов, квартир, коттеджей. Высококвалифицированные специалисты сделают первоклассный ремонт точно в срок. Где купить авто? Автоаукционы США и Японии Ищите дорогой подарок для босса? Магазин “Белый Лотос” предлагает широкий выбор шикарных эксклюзивных подарков: статуэтки, подарочные шкатулки, мини-бары, пепельницы и многое другое.

Оставить комментарии.

пятница, июля 25, 2008

Способы оформления цитат с помощью CSS

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

Вот несколько примеров:

Пример 1. Наклонный текст и открывающая кавычка.

Лучший веб хостинг для блогов и Ваших сайтов. Выделенные IP с каждым тарифом.

Блог хостинг с предустановленным Wordpress 2.6. Домен в подарок на всю жизнь!

Лучший веб хостинг с php, mysql. Домены в подарок. Индивидуальные тарифы.

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

Надежный веб хостинг. Блог хостинг с предустановленным Wordpress, домены в подарок при заказе хостинга на 3 месяца!

А вот и более интересные варианты:

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

Ниже я приведу несколько примеров, как оформить цитату с помощью CSS кода.

Пример 1.

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

Пример оформления цитаты.

CSS код:

blockquote { border:solid #999; border-width:3px 0; margin:10px 40px; padding:15px; font-size:14px; color:#999; }

Пример 2.

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

Пример оформления цитаты.

CSS код (кстати тоже пример :)

blockquote { border: dotted #666 1px; border-left:solid #ff5a00 5px; margin:10px 40px; padding:15px; color:#333; font-style:italic; font-size:14px; background:#fcfcfc; }

Пример 3.

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

Пример оформления цитаты.

CSS код:

blockquote { border-left: solid 3px #333; padding-left:1px; margin: 10px 40px; } blockquote p{ border-left: solid #666 1px; margin:0; padding:15px; color:#333; font:16px 'Times New Roman'; }

Пример 4.

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

“… Пример оформления цитаты …”

CSS код:

blockquote { border: 3px 0 solid #000; padding-left:1px; margin: 10px 40px; } blockquote p{ border: 10px 0 solid #eee; margin: 0; padding: 15px; color: #333333; font:16px 'Arial Black'; }

Пример 5.

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

” Пример оформления цитаты “

CSS код:

blockquote { margin:10px 40px; padding:15px; font: italic 14px Georgia; border: solid 1px #eee }

Жду ваших комментариев и критики :) Расскажите как вы оформляете цитаты в блоге, или вам достаточно того, как они были оформлены изначально в шаблоне вашей темы? Или вы же все любите экспериментировать?

Оставить комментарии.

четверг, июля 24, 2008

Свеженькая коллекция забавных иконок для блога

Smashingmagazine постоянно ищет новые таланты: дизайнеров, веб-разработчиков, копирайтеров. А для блоггеров даже устроили специальный конкурс, главный приз которого - MacBook Air. Подробности конкурса можно узнать на блоге Насти Манно или в оригинальной статье. На этот раз, Smashingmagazine приглянулись работы девушки-дизайнера из Хорватии - Maja Bencic. И с выбором они не ошиблись, Майя действительно прекрасно рисует. Специально для Smashingmagazine она нарисовала коллекцию забавных иконок под названием The Alien Icon Set. Иконоки абсолютно бесплатны, поэтому их можно использовать в любом вашем проекте или блоге. Спонсоры новости: Компания “АлтехСтрой” предлагает профессиональные услуги: тонировка автомобиля, тонировка стекол и окон, установка пленок. Нужен адвокат по уголовным делам? Обратитесь к профессионалу. Презренный Манимейкинг: блог о том, как зарабатывать деньги в Интернете. Креативная наружная реклама Land Rover: Джерри Джуд - увековечил юбилей великой автомобильной компании Land Rover ООО «Уральские автомобили и агрегаты» предлагает запасные части, запчасти к Уралам.

Оставить комментарии.

среда, июля 23, 2008

20+ ресурсов с готовыми CSS шаблонами

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

Layout Gala - 40 различных CSS шаблонов с фиксированной и “резиновой” шириной.

Layout Gala

Регистрация оффшоров с Millennium Companies - это надежно, просто и выгодно. Только до 31 августа действует уникальная акция - готовая компания, зарегистрированная в Белизе за 1300$.

“Фабрика КУПЕ” предлагает угловой шкаф купе по вашему заказу. Шкаф-купе сэкономит место в вашем доме, делая его более уютным и комфортным для вас и вашей семьи.

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

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

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

Intensivstation -  16 различных CSS шаблонов

Dynamic Drive's CSS Library - один из лучших ресурсов, где вы можете найти не только шаблоны, но и различные скрипты для разработки сайта.

CSSCreator.com - Больше чем просто ресурс с шаблонами, CSS Creator - инструмент, позволяющий создать шаблон в on-line режиме, выбрать ширину, высоту, количество блоков, цвета и многое другое.

CSS Creator Screenshot

Layout-o-matic - тоже on-line генератор шаблонов, схожий с CSS Creator.

Layout-o-matic Screenshot

The Layout Reservoir - BlueRobot.com предлагает 3 различных CSS шаблона.

The Layout Reservoir Screenshot

Code Sucks.com - ресурс предлагает 90 разнообразных шаблонов на выбор с различной шириной, расположением блоков и т.д.

Code Sucks Screenshot

CSSeasy - здесь вы найдете 8 очень хороших шаблонов на CSS.

CSSeasy Screenshot

Tomorrow's Laundry - инструмент создания тем для WordPress. На выбор предлагает 4 базовых шаблона, которые можно модифицировать на свое усмотрение.

Tomorrow's Laundry Screenshot

WordPress Theme Generator - еще один генератор шаблонов для WordPress.

Yahoo! Developer Network - Фреймворк от Yahoo, предлагает создать разнообразные шаблоны.

SSI Developer - предлагает большой выбор шаблонов с 2мя и 3мя колонками, каждый можно посмотреть и протестировать.

И еще несколько ресурсов в закладки:

Mollio

CSS Tinderbox

Mitch Bryson

Firdamatic

Strictly CSS

Max Design

Glish.com

mycelly.com

Little Boxes

Кстати, не забудьте про подборку фреймворков.

Оставить комментарии.

понедельник, июля 21, 2008

Выйграй планшет Wacom Bamboo!

Если вы не подписаны на рассылку сайта Photoshop-Master.ru, то наверняка не знаете о проведении нового конкурса для дизайнеров “Это незабываемое лето”. Условия конкурса: Необходимо создать фотоколлаж на тему “Это незабываемое лето”. Коллаж нужно выполнить в Photoshop, сохранить в формате JPG и выслать до 5 августа включительно на на mail: zina.master(dog)gmail.com с пометкой “На конкурс”. В письме укажите свое ФИО и можно написать небольшую предысторию вашего коллажа. Подведение итогов - 10 августа в рассылке. ПРИЗ за 1 место - графический планшет Wacom Bamboo Желаю всем творческого вдохновения! Спонсоры новости: Нет места более романтичнее, чем лазурный берег Франции, где сбываются самые заветные мечты и желания. Решили заняться ремонтом квартиры? Компания ООО «СТЭП» производит косметический, капитальный и евро ремонт квартир по приемлемым ценам, качественно и в сроки.

Оставить комментарии.

суббота, июля 19, 2008

Обновила движок до версии 2.6

Ну вот и я решилась обновить Wordpress до новейшей версии 2.6 от Lecactus. К счастью, проблем в процессе особо не возникло. На удивление, даже плагины все работают. Единственная загвоздка была с плагином Postratings, причем связано это было с тем, что на хостинге установлен php4, хотя в версии 2.3 такой проблемы не было. Вылезала ошибка: cannot yet handle MBCS in html_entity_decode(). Исправить ее удалось аналогично ошибке при установке плагина JRex - нужно дописать символ @ к строке с return. Что касается интерфейса админки, то без Admin Drop Down Menu тяжело вообще что-либо найти. Плагин делает выпадающее меню, аналогично привычному нам в версии 2.3. Из сборки PowerPack от Lecuctus понравились также плагины Shutter Reloaded, Adminimize, Tinymce Advanced. Список всех плагинов вошедших в сборку, можно найти здесь. Юзабилити интерфейса страницы с написанием поста вполне хорош - очень понравилось, что все блоки теперь намного меньше и по умолчанию скрыты, т.к. прежде приходилось прокручивать вниз на пару экранов, чтобы написать мета теги для статьи. Порадовал и обновленный Tiny Mice, который наконец перестал глючить из за некорректных настроек в скрипте инициализации. Только  вот flash загрузчик изображений выдает ошибку HTTP. Еще одна удобная фича - счетчик слов хотя жалко, что не знаков.. В целом движок стал пошустрее и намного удобнее в использовании, так что советую всем обновляться :) Спонсоры новости: Срочная доставка грузов из китая в любой регион страны на лучших условиях. Давно мечтаете об отпуске? Летний отдых в Карпатах - это экскурсии по самым красивым уголкам природы, а также пикники, горные лыжи, рыбалка и многое другое. В интернет-магазине “Мир газонокосилок” большой выбор оборудования для ухода за газоном: электрический триммер, бензиновые и электрические газонокосилки. Социальная сеть Majormo - это место, где каждый может создать свой виртуальный фотоальбом, пригласить своих друзей и познакомиться с новыми. Новоскоп.ру - сайт, который должен быть в закладках у каждого! Следите за главными новостями дня вместе с Новоскоп.ру

Оставить комментарии.

пятница, июля 18, 2008

Как сделать красивую ссылку?

     Ниже приведен вольный перевод статьи Even Links Can Look Good от Michael Martin

Самый простой способ освежить ваш дизайн - изменить внешний вид ссылок.

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

Как сделать красивую ссылку

    Ощутите волшебство Монако - это сказочное княжество, где предпочитают отдыхать самые яркие звезды шоу-бизнеса.
Мечтаете о роскошном свадебном путешествии? Поездка на экзотические мальдивские острова станет для вас лучшим подарком.
Новый конкурс для блоггеров и копирайтеров - «Июль-Август 2008». Приз за лучшую статью - 5000р.
А вы знаете, что трубочный табак Peterson имеет вкус ванили и пряного красного вина? Интересные статьи для настоящих ценителей табака на Pipeblog.ru

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

 a {color: #0000ff; text-decoration:underline; }

2.  Цвет, без подчеркивания - подчеркивание не всегда обязательно, иногда достаточно выделить ссылку цветом, чтобы не отвлекать внимание пользователя от чтения статьи, заставляя его переходить по ссылкам.

 a {color:#0000ff; text-decoration:none;}

3. Жирный текст, подчеркивание - если у вас минималистический дизайн, то такая ссылка прекрасно впишется в ваш шаблон. Жирный текст и подчеркивание выделит ссылку из текста и станет хорошим дополнением к вашему дизайну.

 a {font-weight:bold; text-decoration:underline; }

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

 a {font-variant:small-caps; text-decoration:underline; }

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

 a {border-bottom: #000000 1px dashed; text-decoration:none;}

6. Цветной фон, подчеркивание - Выделение ссылки текстом более привычно, чем выделение фона ссылки, поэтому такой эффект непременно привлечет внимание пользователя и заметно обновит дизайн. А подчеркивание ввиде границы не собъет пользователя с толку и он сразу поймет, что это ссылка.

 a {background:#a6d4ff; border-bottom:#99c4d5 1px solid; text-decoration:none;}

Эффекты при наведении на ссылку так же важны, как и, например, присуствие заголовка у статьи. Пользователь привык, что если он наводит на ссылку, то ее стиль меняется, что дает ему понять, что ссылка активна.

Вот несколько советов, какие эффекты лучше всего применить:

1. Удаление/добавление подчеркивания - самый привычный и эффективный способ указания активной ссылки.

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

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

А какой стиль обычно используете вы? Если я что-то упустила, пишите в комментариях :)

Оставить комментарии.

четверг, июля 17, 2008

CSS: фиксированное позиционирование

Эта статья посвящена свойству position:fixed, которое не так часто используется вебмастерами. На это была причина. Данное свойство поддерживается в IE только начиная с версии 7, поэтому те разработчики, которые заботятся о кроссбраузерности, как правило, стараются избегать стилей неподдерживаемых в IE6.

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

Не многие знают, зачем и как можно использовать это свойство, поэтому сразу начнем с наглядного примера 1.

Спонсоры статьи: В Нижегородской области построят новые кирпичные заводы - подробности на информационном портале Betonmarket.ru
NFTV.ru - первый эротический интернет- канал рунета! Ведущие раздеваются до гола!
Многочисленные исследования в России за рубежом подтвердили, что ремни безопасности сохраняют жизнь.
Весь спектр компьютерных услуг в Волхове - компьютеры Волхов Сигма: ноутбуки, комплектующие, оргтехника, диски CD/DVD, программные продукты.
Xостинг H4W.RU использует профессиональные и уникальные технологии, возможностям которых, нет равных

CSS:

 body{text-align:center;} #outer{ width:600px; margin:0 auto; border:1px solid #000; position:relative; } #side{ position:fixed; background:red; }

HTML:

 <div id="outer"> <div id="side">Fixed Sidebar</div> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <!-- add more elements to test scrolling--> </div>

Как вы видите, если прокрутить страницу вниз, красный блок #side остается на одном месте. Блок фиксирован относительно элемента #outer и всегда будет оставаться на экране.

Чуть усложним код:

CSS:

 #side{ position:fixed; background:red; left:100px }

Пример фиксированного позиционирования

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

Пример фиксированного позиционирования

CSS:

 #side{ position:fixed; background:red; margin-left:100px }

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

Рассмотрим пример 2.

CSS:

 #outer{ width:600px; margin:auto; border:1px solid #000; position:relative; overflow:auto; } #base{ position:absolute; bottom:0; left:0; height:50px; width:600px; } .inner{ position:fixed; background:red; width:600px; height:50px; }

HTML:

 <div id="outer"> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <!-- add more elements to test scrolling--> <div id="base"> <div class="inner">Fixed base to centered element</div> </div> </div>

Здесь мы видим используем абсолютное позиционирование для привязки к элементу #outer, в который вставляем уже фиксированный элемент с bottom:0.
Но т.к. текста меньше чем может уместиться на странице, никакой разницы с обычным позиционированием мы не заметим, к тому же можно заметить баг: если уменьшить высоту страницы, блок с фиксированной позицией просто пропадает.
Поэтому переходим к примеру 3.

CSS:

 *{margin:0;padding:0}/* quick and dirty reset for demo only - use a proper reset */ html,body{height:100%} h1,p{margin:0 0 1em 0} body{text-align:center;} #outer{ width:600px; min-height:100%; margin:auto; border:1px solid #000; border-top:none; border-bottom:none; position:relative; text-align:left; } * html #outer{height:100%}/* for ie6 and under who will just get an absolute footer instead */ #base{ position:fixed; bottom:0; height:50px; width:600px; background:red; } * html #base{/* for ie6 and under*/ position:absolute; bottom:0; left:0; } p.last{ padding-bottom:60px;/*make final text appear above footer */

HTML:

 <div id="outer"> <h1>Fix your CSS</h1> <p>A small example of using position:fixed in compliant browsers (not IE6 and under)</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p>scrolltest</p> <p class="last">scrolltest</p> <!-- add more elements to test scrolling--> <div id="base"> Fixed base to centered element</div> </div>

Мы добавили высоту 100% для элементов body и html, чтобы прижать футер к низу. А чтобы текст не заезжал за блок, добавили внутренний отступ padding. Таким образом, теперь у нас есть футер, с центральным фиксированным позиционированием. Аналогичный эффект можно применить для меню и тогда пользователям не придется прокручивать страницу, чтобы добраться до навигации.

Для IE6 конечно тоже можно реализовать эффект фиксированного позиционирования, только для этого придется использовать не самые правильные способы:

 <!--[if lte IE 6]> <style type="text/css"> html{background:url(fake.gif) no-repeat 0 0}/* use a 1px x 1px transparent gif which cures the jitters on the footer when using this expression*/ #base {position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));} </style> <![endif]-->

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

Оставить комментарии.

среда, июля 16, 2008

Сайт в закладки: зри в корень :)

  Чтобы всегда быть в курсе самых интересных новостей о веб-дизайне, seo, веб разработках, я каждый день просматриваю RSS ленты довольно большого списка сайтов. И вот недавно, в этот список я добавила блог с интересным подзаголовком - "Зри в корень", посвященный продвижению сайтов в Интернете. Ведущий блога - Руслан Ахметов.

блог Руслана Ахметова

Чем заинтересовал меня блог? В первую очередь, интересным и актуальным контентом. Как и положено блогу seo-тематики, много информации посвящено анализу и способам продвижения сайтов в поисковых системах. Я попала на блог через статью «Дублированный контент в Google», которая горячо обсуждается вебмастерами.

Спонсоры обзора:

Блог двух seo`шников: новости seo, способы продвижения сайтов, создание сателитов, контекстная реклама, копирайтинг.
Компания «Solarcard» предлагает итальянские свадебные открытки и приглашения на свадьбу.
Новый женский интернет-журнал Ladytrend.ru - это самые последние новости из мира моды и шоубизнеса.
Это невероятно! Я видела вчера летающую тарелку! Срочно всем смотреть здесь.

Далее мое внимание привлекли 2 пункта в меню: «SEO сервисы» и «Термины интернета».

Раздел «SEO сервисы» - это просто настоящая находка для вебмастера! Здесь вы найдете очень хорошую подборку сервисов для анализа сайта: анализ запросов, определение позиций сайта в поисковиках, определение показателей ТИЦ, PR, ИЦ и т.д.; анализ плотности слов, подбор ключевых слов, работа со ссылками и многое другое.
Я сразу добавила страницу в закладки, что и вам рекомендую сделать.

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

На блоге Руслана можно также найти информацию, посвященную другим, смежным с seo, темам, например: юзабилити сайтов, ведение блога на Wordpress, отзывы об интересных книгах.

Блог одобрен известным каталогом Dmoz, чему очень завидую :) Мой блог «в рассмотрении» уже около месяца..

Я с удовольствием и дальше буду следить за новыми статьями Руслана и желаю ему удачи в нашей общей интернет-профессии блогеров (как красиво звучит :)) и, конечно, как seo специалисту.

Оставить комментарии.

вторник, июля 15, 2008

Где найти красивый фон для сайта?

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

Где найти красивый фон для сайта?

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

  Спонсоры новости: На VkVin.RU вы можете скачать бесплатно и без регистрации софт, музыку, книги, игры для мобил и многое другое.
Наскучили обычные игры? Посетите новый азартный блог, где все участвуют в бесплатной игре с вполне реальными призами.
Оптимизация сайта - важный этап в процессе продвижения сайта. Доверьте продвижение сайтов профессионалам.
"Семейная олимпиада" стартует в Псковской области" - читайте свежие новости Псковской области.

Где найти красивый фон для сайта?

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

Красивые фоны для сайта

Понравился сайт? Вы можете запросто добавить его в свои любимые соц. закладки:

Красивые фоны для сайта в закладки

Оставить комментарии.

понедельник, июля 14, 2008

Ошибка 404: что в имени тебе моем?

Путешествуя по страницам интернета, каждый из вас, наверняка, сталкивался вот с такой надписью:

Стандартная страница ошибки 404

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

  Ошибка 404 означает, что файл, который вы запрашиваете, отсутствует на сайте .

Один раз увидев такую страницу с 404 ошибкой, пользователь больше не зайдет на ваш сайт. Как этого не допустить?

 Спонсоры статьи: Женский журнал совершенство - красота, правильное питание и рацион. Все, что нужно знать женщине.
Не знаете где купить шины и диски? КолесТорг.ру - это информационный ресурс о шинах, колесных дисках, их производителях и продавцах.
Широкий спектр оборудования для отопления:отопительные котлы и горелки, осушители воздуха, кондиционеры и многое другое.
Мини гостиницы москвы - это уютные, комфортабельные номера, прекрасное обслуживание и низкие цены. Здесь вам всегда рады!
Хотите стать спонсором? Покупка ссылок стала проще!

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

Вот несколько примеров очень креативных, страниц 404:

Нестандартный дизайн страницы 404

Нестандартный дизайн страницы 404

Нестандартный дизайн страницы 404

Нестандатрный дизайн страницы 404

Еще много таких примеров можно посмотреть здесь.

Грамотная структура страницы 404

Вот, на мой взгяд, пример хорошей, информативной страницы 404:

  1. Название сайта/компании, логотип.
  2. Четко выделенный заголовок ошибки.
  3. Краткое пояснение причины ошибки, например: "Извините, но страница, которую вы хотели посетить, отсутствует на сайте. Возможно, это временная ошибка, либо вы неправильно ввели адрес."
  4. Наличие контактов вебмастера, администрации сайта, или формы обратной связи: "Вы можете сообщить о данной ошибке администрации сайта на e-mail: admin@vashsite.ru".
  5. Наличие карты сайта, либо основного меню, если ссылок очень много.
  6. Форма поиска. Если на хостинге имеется возможность запуска php-, perl-, и других серверных скриптов, обязательно разместите на странице форму поиска
  7. Ссылки на похожие страницы, либо на часто посещаемые страницы.
  8. Ссылки на самую свежую информацию на сайте, например, новости, чтобы пользователь мог видеть насколько актуальна существующая на  сайте информация.
  9. Интересный дизайн страницы или, по крайней мере, соответствующий дизайну сайта.
  10. Ваше предложение? :)

И в заключение, оптимичестические результаты опроса "А делаете ли вы дизайн для страницы 404" на одном из популярных ресурсов - Habrahabr. Кстати, опрос еще открыт, так что вы можете принять участие.

Результаты опроса: делаете ли вы дизайн для страницы 404

Оставить комментарии.

воскресенье, июля 13, 2008

Плагин для Wordpress “Target Visitors”

В продолжении статьи о работе с целевыми посетителями, решила написать плагин (спасибо подписчикам за подержку), который позволит вам выводить специальное сообщение для пользователей пришедших с поисковых систем. Поддерживаются поисковики Google, Yandex, Mail, Yahoo, Liveinternet, Rambler, Altavista, Msn. Пока доступна только русская версия плагина.  Скачать плагин для WordPress "Target Visitors". Активация плагина Скачайте архив wp-target-visitors.rar и распакуйте содержимое (папку wp-target-visitors). Скопируйте папку в директорию /plugins/ вашего блога. Зайдите в панель управления блогом и активируйте плагин. В списке "Настройки" вы увидите пукнт Target Visitors. Настройки плагина В поле "Ваш текст" вы увидите код сообщения по умолчанию. Измените его на свое усмотрение, используя дополнительные сокращения: [PERMALINK] - URL текущей статьи, страницы, на которую зашел пользователь. [SE_REQUEST] - тот самый поисковый запрос, по которому пришел посетитель. [RSS_URL] - адрес вашей RSS ленты. Чтобы изменить CSS код для блока с сообщением, необходимо чтобы CSS-файл в папке с плагином имел права 777, т.е. доступ на запись. Установка плагина После сохранения настроек вам необходимо установить следующий код: <? if(function_exists("wp_target_visitors")) wp_target_visitors(); ?> на любую из страниц с контентом: single.php, archive.php, search.php. Чтобы увидеть плагин в действии, вам нужно зайти на ваш блог по какому-либо поисковому запросу с одного из перечисленных выше поисковиков. Если вам понравился плагин, то я буду рада любой вашей поддержке. Задавайте вопросы и предлагайте свои идеи в комментариях. Спонсоры новости: Жарко в доме? Пора менять окна. Кстати, летом пластиковые окна дешевле. Не знаете как раскрутить сайт? SEO форум для новичков и профессионалов. Давно мечтаете о новом дизайне квартиры? Посетите курсы дизайна интерьера.

Оставить комментарии.

суббота, июля 12, 2008

Отличный справочник тегов для разработчиков тем под Wordpress

Делюсь с вами ссылкой на замечательный ресурс - справочник тегов для работы с шаблонами Wordpress. Разработчикам просто огромное спасибо - расписали каждый тег до мелочей и с примерами. Все теги распределены по категориям, а эффект "гармошки" блоков сэкономил массу места и теперь найти нужный не составит труда. Пользоваться таким ресурсом - одно удовольствие :)  Спонсоры новости: Мечтаете сделать дома spa-салон? Закажите эксклюзивный дизайн ванной комнаты. Как предотвратить перенос строк таблицы на другую страницу? Как автоматически расставлять нумерацию таблиц, рисунков, формул и ссылок? Советы и подсказки по работе с редактором Word. Хотите стать спонсором?

Оставить комментарии.

пятница, июля 11, 2008

Работаем с целевыми посетителями

Кто такие целевые посетители сайта? Это пользователи, заинтересованные в информации, размещенной на сайте, потенциальные заказчики товаров и/или услуг. Отделить целевых посетителей сайта от случайных довольно просто. Целевой посетитель, как правило, приходит по запросу с поисковой системы.
Поэтому мне пришла в голову одна замечательная идея. Если пользователь зашел на блог с поисковой системы, то можно запросто узнать по какому запросу он пришел, и показать ему вот такую подсказку, например:

Вы зашли на эту страницу по запросу: списки горизонтальное выпадающее меню CSS.

Понравилась статья? Подпишитесь на RSS!

Зачем это нужно? Есть как минимум 5 причин.

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

  1. Иногда, заходя на интересный сайт/блог именно по поисковому запросу, пользователь отвлекается на другие интересные ему элементы и порой уже забывает зачем зашел на этот сайт. Поэтому такая надпись будет для него маленькой подсказкой.
  2. Чаще всего, находя или не находя нужную информацию в блоге посетитель сразу закрывает страницу, но автору уже никак не узнать, действительно ли пользователь нашел то, что искал по запросу. Поэтому приглашение прокомментировать статью поможет нам узнать достаточно ли этой информации в статье, либо пользователь так и не нашел того, что искал.
  3. Вместо приглашения прокомментировать статью можно сделать небольшую форму с вопросом "Помогла ли статья найти интересующую вас информацию?" и несколько вариантов ответа "Да", "Немного", "Нет". Эти данные можно связать с рейтингом статьи. Например, ответ "Да" - 5 баллов, "Немного" - 3 балла, "Нет" - 1 балл.
  4. Даже если посетитель не нашел тог, что искал, праглашение подписаться на RSS не будет лишним.
  5. Пребываение на сайте целевого посетителя для нас особо важно. Чем больше мы заинтеерсуем его, тем больше шансов, что он станет нашим постоянным посетителем, или как минимум, читателем RSS, что так же немаловажно.

Согласно статистике моего блога, большинство целевых пользователей приходит по запросам с Google и частичто с Яндекса. Поэтому для блога я написала код, который собирает запросы только этих двух систем. Вы можете использовать его и на своем блоге или сайте.
PHP код:

 <? $se=getenv("HTTP_REFERER"); if (strstr($se,"&q=") or strstr($se,"&text=")): while (ereg(′%([0-9A-F]{2})′,$se)): $val=ereg_replace(′.*%([0-9A-F]{2}).*′,′\1′,$se); $se=str_replace(′%′.$val,$newval,$se); endwhile; if (strstr($se,"&q=")) //Google $text_pos = strpos($se,"&q=")+3; elseif (strstr($se,"&text=")) // Yandex $text_pos = strpos($se,"&text=")+6; $text_pos_amp = strpos($se,"&",$text_pos); $se = str_replace("+"," ",substr($se,$text_pos,($text_pos_amp-$text_pos))); ?> <div class="se_request">Вы зашли на эту страницу по запросу: <a href="<?php the_permalink() ?>"><strong><?=$se;?></strong></a>.<br />Понравилась статья? Подпишитесь на <a href="http://feeds.feedburner.com/getincss" target="_blank">RSS</a> или оставьте ваш комментарий.</div> <? endif;?>

CSS:

 .se_request {background:#FEE2E2; padding:7px; color:#FF3300; width:95%; margin-bottom:10px; border:dashed 1px #FF3300;}

Код может не идеален, так что буду рада любым вашим поправкам :)

Оставить комментарии.

четверг, июля 10, 2008

CSS абсолютные «да» и «нет». Часть 2: Разметка.

С первой частью статьи можно ознакомиться здесь: CSS: абсолютные "Да" и "Нет". Часть 1: Селекторы.

Если вы начали интересоваться веб-стандартами, то скоро поймете, что самое важное понятие - это разметка. Правильная, чистая и хорошо структурированная разметка. HTML, XHTML, теги, атрибуты, структура… Вот то, о чем мы будем говорить. Мы даже объединим понятия CSS и веб-стандартов.

CSS стал уже практически синонимом для стандартов. Я часто говорю «CSS дизайнер», или «css это..», «css то..», чтобы быстро объяснить какие методы и подходы я использую.

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

Спонсоры статьи: Установите один из самых популярных и надежных Интернет - пейджеров - qip.

Бюро переводов ALS в г. Москва – выполнит для вас любые срочные переводы, переводы апостиль, технические и юридические переводы с любых языков мира.

Самые последние новости о самых интересных событиях в мире - это InfoZoom.ru

Структура документа

Ключ к кроссбраузерности документа - это его структура. Она должна быть осмысленной, логичной. Документ, даже без подключения стилей, должен выглядеть читабельно.
Большинство документов, как правило, имеют несколько составных частей (меню, основной контент, сайдбар, подвал и т.д.). Пользователь, человек он или не человек, должен различать эти части с первого взгляда на них. Самая важная часть должна быть как можно выше по коду, но значимость основного контента также должна быть выделена с помощью заголовков (h1, h2, h3, h4, h5, h6). О правилах использования заголовков можно прочесть здесь.

Структурные теги структуры и теги «для красоты»

Вы, наверное, слышали выражение «очистите контент от всего лишнего». Что это значит? Обычно, это означает, что контент необходимо избавить от лишних html тегов. Т.е. следует избегать использования пустых дивов для отображения, например, тени для картинки и всего прочего. Каждый элемент разметки должен иметь значение в структуре документа и существовать как его логическая часть.

Выбор тегов

Тегов существует достаточно много и вы должны это понимать. Не нужно останавливаться только на использовании div для внутренних элементов контейнера. Иногда достаточно самого обыкновенный параграфа с несколькими тегами span или em, чтобы получить в итоге то, что вам нужно.
Все мы используем списки ul и ol, но как часто используем списки определений? Элемент DL в большинстве случаев идеален для 2-уровневых структур.
И еще, почему бы не использовать тег ADDRESS для обрамления контактной информации? Возьмите на заметку ;)

Валидация

Валидация значима тем, что помогает проанализировать структуру документа. Проверка отдельных блоков документа не будет означать, что весь документ в целом будет валиден.
Вы можете радоваться валидности документа, полностью структурированного на div. Да, он валиден, но имеет ли это такое важное значение? Не для всех, особенно не для поисковых систем.

Абсолютные «ДА»:

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

Абсолютные «НЕТ»:

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

Оригинал статьи: CSS do’s and dont’s Part 2- Markup

Оставить комментарии.

Как использовать произвольные поля в Wordpress

Знаете ли вы, что такое произвольные поля в Worpress? Большинство блоггеров-новичков не использует их из-за того, что просто не знают как вывести их в статье.

Как использовать произвольные поля в Wordpress

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

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

 <?php the_meta(); ?>

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

 <ul class='post-meta'> <li><span class='post-meta-key'>ключ:</span> значение</li> </ul>

Разберем пример.

Допустим мы хотим вывести одно единственное произвольное поле. Для этого будем использовать функцию:

 get_post_meta($post_id, $key, $single);

Параметры в скобках имеют следующие значения:

  • $post_id - это ID статьи, в которой храняться мета данные. Как правило, это ID текущей статьи, поэтому значение параметра будет: $post->ID
  • $key  -  это название ключа, которые мы ввели в форму добавления произвольного поля.
  • $single - может принимать значение true или false. Если устанавливаем true, тогда функция вернет нам единственный результат вввиде строки. Если false, либо без значения, тогда возвращается весь массив данных с произвольными полями. Это необходимо если для одного и того же ключа вы указали разные значения. В нашем примере будем использовать true.

Итак, шаг первый: добавляем новое произвольное поле:

Как использовать произвольные поля в Wordpress

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

Шаг второй. Теперь, чтобы вывести изображение в статье, добавляем в код страницы single.php, например, после the_content() (но обязательно в цикле while (have_posts()) ):

 <?php $image = get_post_meta($post->ID, 'my_image', true); ?> <img src="<?php echo $image; ?>" alt="Бабочка" />

Шаг третий. Смотрим что получилось :) (В конце поста изображение с бабочкой).

Еще один способ применения произвольных полей - добавления класса или id к какому либо блоку. Например, нужно выделить пост новым фоном. Для этого добавим поле с ключом my_class и значением new_fon - это и будет название класса.

А в коде страницы вывода статьи добавим:

 <?php $additional_class = get_post_meta($post->ID, 'my_class', true); ?> <div class="my_post <?php echo $additional_class;?> "> the_content(); </div> ?>

Таким образом мы обрамили контент новым блоком с классом new_fon и теперь можем задать для него любые стили.

Возможности произвольных полей очень широки, поэтому не бойтесь их использовать и экспериментировать :)

Оставить комментарии.

среда, июля 09, 2008

HTML 5 уже в действии!

Сегодня узнала из ленты новостей, что уже можно использовать формат HTML 5.0. Для этого нужно всего лишь прописать вот такой доктайп:

 <!DOCTYPE html>

Jens Meiert, один из участников HTML Working Group, пишет в своем блоге:

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

Еще одна приятная вещь - это "новый" способ указания кодировки документа  с помощью атрибута <meta charset="utf-8">. Пример можно наглядно посмотреть здесь.

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="@1"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>@2</title> <link rel="stylesheet" type="text/css" href="@3"> <p>@4

Спонсоры новости:  Мечтаете об отдыхе? Закажите туры в Грецию.

На автопортале Auto-Sale.ru вы можете разместить объявление о продаже своего авто.

Большой выбор авто с пробегом, б/у авто, продажа без посредников.

Покупка и продажа авто на автомобильной торговой площадке ItsAuto.ru
Хотите стать спонсором?

@n - это части, которые непосредственно можно менять на свое усмотрение. Вот их значения:

@1: Код языка

@2: Заголовок

@3: Путь к файлу стилей

@4: Контент

И не забываем про валидацию - теперь доступен - HTML 5 Validator.

Jens Meiert надеется, что уже к 2010 году будет известна дата выхода финальной версии спецификации HTML 5. 0, чтобы восторженно произнести: "Да, мы можем использовать HTML 5!"

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

Оставить комментарии.

Как эффективно использовать сайдбар на блоге

Я часто читаю в комментариях посетителей о том, что им очень нравится дизайн блога и, особенно, необычный дизайн сайдбара. Поэтому мне хотелось бы в этой статье уделить внимание такому понятию как "эффективность" сайдбара. Несмотря на то, что сайдбар не является центральным элементом блога, его роль в юзабилити очень важна. Хороший дизайн сайдбара поможет посетителям вашего сайта проще находить нужную им информацию, сэкономит их время и привлечет внимание. В то время как плохо структурированный сайдбар может привести к потере посетителей. Какова цель сайдбара? Дизайн сайдбара на разных блогах обычно очень схож. Не зная, для чего нужен сайдбар мы не сможем сделать его эффективным и полезным для наших посетителей. Я считаю, что основная цель сайдбара - это простая и удобная навигация по блогу, причем это не только меню, но и другие элементы навигации, способствующие быстрому поиску информации. Кроме того, эффективный сайдбар должен помочь и новым посетителям блога, чтобы они сразу могли понять, о чем они смогут прочесть на вашем сайте. Если пользователь пришел по поисковому запросу, то он ищет только нужную ему информацию, если ничего более не привлекает его внимание на сайте Спонсоры статьи: в компании ООО «ЭЛИТЛИФТ» лифты по индивидуальному дизайн-проекту. Установка от лебёдки до болта! Нужен офис в аренду? Специалисты SellPoint подберут для вас лучшие условия. Хотите всегда быть в курсе последних авто новостей? С автопорталом AutoShip.ru покупка авто станет проще! Как привлечь внимание посетителя? Большинство блогов, в том числе и мой, используют сайдбар для отображения популярных статей или страниц. Это дает возможность обратить внимание пользователя на другую полезную информацию, помимо той, ради которой они зашли на сайт. Также эффективно будет расположить последние комментарии посетителей или последние статьи, чтобы вновь пришедший пользователь мог быстро присоединиться к дискуссии. И, конечно же, важным элементом является подписка на RSS - лучше всего помещать иконку RSS в самый верх сайдбара, чтобы у пользователя появилось желание подписать на ваш фид. Добавьте привлекательности Привлекательность сайдбара - это не только симпатичный дизайн, но и всевозможные визуальные эффекты. Обычно, большинству посетителей нравится, когда на сайте можно не только найти полезную информацию, но и немного проиграться :) Лично у меня такие случаи были. Взглянув на click map блога я увидела просто массу точек - кликов на вкладках сайдбара и на кнопке RSS. Конечно, хорошенького понемножку, поэтому перегружать сайдбар эффектными флеш баннерами и скриптами не будет иметь успеха. В то время как обычные вкладки помогут сэкономить место и привлекут внимание посетителей. Меняемся к лучшему Как часто вы пишите новые статьи

Оставить комментарии.

вторник, июля 08, 2008

8+ стандартных шрифтов для сайта

8+ стандартных шрифтов для сайтаВсе мы привыкли использовать на сайте такие стандартные шрифты как: Arial, Verdana, Times New Roman, Georgia, Trebuchet MS и некоторые другие. Но, наверняка, многие из вас никогда не использовали другие стандартные шрифты: Palatino/Linotype, Tahoma/Helvetica, Impact, Century Gothic, Arial Black, Arial Narrow, Copperplate / Copperplate Gothic Light и Gill Sans / Gill Sans MT. Знакомы вам такие названия? Ниже я расскажу о каждом из них.

1. Palatino Linotype / Palatino

Приятный шрифт с засечками, поддерживаемый Windows и MAC. Его можно использовать вместо привычных нам шрифтов семейств Georgia или Times. С помощью него можно написать очень стильные, заголовки.

2. Tahoma

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

3. Impact

Пожалуй самый мощный шрифт. Не имеет аналогов среди стандартных шрифтов. если вам нужен эффектный заголовок, то Impact поможет это сделать.

4. Century Gothic

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

5. Arial Black

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

6. Arial Narrow

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

7. Copperplate / Copperplate Gothic Light

Этот шрифт схож с Century Gothic, но имеет маленькие засечки. Также прексрасно подхдит для оформления заголовков. Поддерживается примерно на 80% машин MAC и 50% Windows.

8. Gill Sans / Gill Sans MT

Поддерживается в основном на OS MAC, но лично у меня прекрасно виден и в Vista. Компактный, элегантный шрифт, легко читаемый и подходящий для основного текста.

Храните в закладочках :)

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

Надоело ездить в офис? Работайте удаленно! Ищите профессионала для выполнения проекта? Сэкономьте время! Gofreelance - биржа фриланса.

Найти ближайший банк теперь очень просто: на Credobank.ru все адреса банков в одном месте. Поиск по городам и регионам.

Хотите стать спонсором? Покупка ссылок стала проще! Узнай здесь.

Оставить комментарии.

понедельник, июля 07, 2008

FireFox3: теперь помогает экономить

Нашумевшая акция "FireFox download day" имела успех  - 8 002 530 человек скачали новую версию и «наслаждаются сейчас быстрым, безопасным и улучшенным Интернетом», тем самым установив мировой рекорд по числу загрузок за 24 часа. По данным www.spreadfirefox.com на сегодняшний день FireFox 3 загрузили уже 31,715,253 - цифра впечатляющая, но как мне кажется, разработчики не собираются останавливаться на этом.

Firefox 3 действительно оправдал ожидания своих постоянных пользователей и даже завоевал сердца сторонников «политики» IE. Преимущества новой версии можно заметить сразу после открытия браузера: встроена, так называемая, «умная» адресная строка (Smart Location Bar). Как только вы начнете набирать адрес сайта, браузер предложит вам всевозможные варианты адресов и названий из списка уже посещенных ранее страниц. Кроме того, улучшены менеджер закачек и система закладок. Новая версия браузера гораздо более стабильна, безопасна и поддерживает самые последние стандарты CSS3. Разработчики наконец решили проблему утечек памяти, и теперь Firefox перестал притормаживать.

Спонсоры новости: Не знаете как раскрутить сайт? Обратитесь к профессионалам! Эффективное продвижение сайтов.

Chipp - социальная сеть для блогеров и манимейкеров

Здесь можно продать авто - все автомобили в одном месте, новости обзоры автоновинок, отзывы автовладельцев.

Хотите стать спонсором? Покупка ссылок стала проще! Узнай здесь.

И теперь, если вы пользователь  FireFox 3, то вам  полагаются еще и дополнительные бонусы. Так, недавно, подыскивая on-line магазин цветов я обратила внимание на Flower-shop.ru, на котором при оформлении заказа через FireFox3 можно увидеть надпись - "FireFox 3 бонус" - скидка за то, что ты делаешь заказ через FF3. Довольно приятный подарок для ничего не подозревающего пользователя. Видимо разработчики магазина просто устали от причуд IE, и теперь они благодарят всех любителей FF3 дополнительными скидками. Очень интересный и, на мой взгляд, красивый маркетинговый ход.

И даже несмотря на выход новой версии Opera 9.5 интернет-пользователи отдают свое предпочтение FireFox 3. Не помогла им и акция с раздачей бесплатных ручек с логотипом Opera - было всего около 2000 заказов. Так что, разработчики магазина просто молодцы - сэкономить на использовании браузера - это ли не подарок для поклонников FF3 :)

Оставить комментарии.

пятница, июля 04, 2008

Домены .RU по 99 рублей!

Домены .RU по 99 рублей!Великолепный подарок для пользователей интернета подготовили владельцы сайта "Хорошее настроение" GdMd (сокращенно от "good mood") - теперь регистрация доменов RU всего за 99 рублей!

Название полностью оправдывает содержание: не каждый день увидишь такое выгодное предложение :)

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

Спонсор новости: Эффективная защита от дождя, снега или града - заказывайте козырьки, навесы
Хотите стать спонсором?

Стать клиентом очень просто - зарегистрируйтесь по ссылке. Затем заполните ваши личные данные (паспорт, адрес и т.д.) в разделе "Мои данные".

Далее, если вы еще не подобрали доменное имя, то сделать это можно здесь. Как только имя подобрано - переходим непосредственно к регистрации - в раздел "Заказ услуг". Перед вами будет список доступных зон с указанием цены: введите имя домена, укажите зону, DNS (если уже есть хостинг) и условия отображения ваших данных в whois.

Готово! Осталось только оплатить указанную сумму - это дело минутное. Оплатить услуги можно с помощью Webmoney в разделе "Оплата услуг". После поступления средств на счет и подтверждения оплаты заказа - домен принадлежит вам.

Несмотря на такую низкую цену, качество обслуживания остается на высшем уровне. Убедитесь в этом сами - станьте клиентом и регистрируйте домены ру за 99 рублей. Это надежно, удобно и быстро!

Оставить комментарии.

четверг, июля 03, 2008

AideRSS: читай только лучшее!

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

сервис анализа вашей RSS ленты сервис анализа вашей RSS ленты

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

Спонсоры новости: Blogoreader - новости с украинской блогосферы

Лучшие вентилируемые фасады из плитки.
Хотите стать спонсором?

сервис анализа вашей RSS лентыПосле того как вы ввели адрес сайта или фида, вы увидите итоговую таблицу, где для каждой записи будет указан ее рейтинг, количество ссылок с сервиса del.icio.us, в поиске по блогам и количество комментариев. Дополнительно по ссылке "more" можно посмотреть количество ссылок на новость с Digg.com и Twitter и даже несколько абзацев новости. Нажимаем "Add all posts to My Feeds" и теперь ваша лента будет доступна всегда в разделе "My Feeds".

Сервис предлагает и другие дополнительные возможности:

- подписаться на лучшие записи блога : по количеству хотов (Best hits), лучшие посты (Great posts) и общая RSS-лента (Full feed).

А можно просто добавить полную RSS-ленту в ряд онлайновых сервисов, например — Google Reader, Netvibes, Bloglines, My AOL, My MSN и других.

Разработчики сервиса предлагают также использовать API: например, можно установить на своем блоге скрипт Top новостей или даже виджет (необходимо импортировать файл OPML).

AideRSS: читай только лучшее!

Хотите знать больше о сервисе AideRSS? Предлагаю посмотреть сринкасты, подготовленные разработчиками.

Оставить комментарии.

среда, июля 02, 2008

Поддержи нас в акции!

Если вам нравится мой блог, то вы можете поддержать меня в голосовании за самого активного участника в Дне RSS в РУнете. Голосовать - мой ник Lelya :)

Оставить комментарии.