Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Декабрь, 2010

среда, 19 августа 2009 г.Green

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

  1. Читатели блогов любят короткие утвердительные предложения.
  2. Как можно больше ссылок. Что отличает блогпост от тупиковой журналистики? Чудовищное количество приводимых ссылок. Неважно, что у вас — блог или сайт – делайте ссылки на статьи, книги, продукцию, пояснительные материалы с других сайтов, о которых вы упоминали и проч. Всегда приводите ссылки на информацию, которая поясняет ваши слова, служит им фоном.
  3. Пишите меньше. Исключайте все ненужные слова. Это лучший совет от акул прессы. Существует такая забавная игра с предложениями – убирать из них по одному слову до тех пор, пока отсутствие следующего слова не лишит предложение смысла. Поупражняться можно прямо на этом тексте.
  4. Стремитесь употребить в своем посте не более 250 слов.
  5. В заголовках должны быть только законченные мысли. Очень многие люди пользуются такими вещами, как Feed Demon для сканирования заголовков. И решение о прочтении принимают после их просмотра. Поэтому важно сказать заголовком как можно больше.
  6. Предложения и абзацы должны быть короткими.
  7. Не преподносите себя слишком серьезно. Ведение блога – это не операция по удалению мозга. Не будьте излишне помпезны или повелительны.
  8. Никогда не теряйте чувства юмора.
  9. Пишите то, что считаете нужным. «Неважно насколько велико число ваших постоянных читателей – пишите так, как будто их подписка должна закончиться. Заставьте их переподписаться,»- говорит Дэнис Махоуни в A list apart.
  10. Промежутки в тексте – ваши друзья. Они облегчают чтение с монитора. Нет ничего ужаснее для чтения, чем монолитный блок информации на экране компьютера.
  11. Используйте самые легкие варианты слов и построения предложений.
  12. Громко прочтите вслух вашу мысль и убедитесь, что ничто не нарушает ее целостности. Если вы споткнулись на слове в середине предложения, перепишите все предложение.
  13. Забудьте школьные принципы построения речи ( если вы успели закончить школу до 1990 года ). Идите в ногу со временем. Смело начинайте предложение с вопросов или междометий, не бойтесь нарушить старинные правила! Но тем не менее соблюдайте грамматику, чтобы ваш текст сохранял связность и смысл.
  14. Используйте ненумерованные списки, везде, где это допустимо.
  15. Подписывайте фотографии, даже если они идут в составе статьи из 300 слов.
  16. Выделяйте важную информацию жирным шрифтом и курсивом.
  17. Следите, чтобы ваши статьи было легко сканировать.
  18. Придерживайтесь выбранной точки зрения.
  19. Не бойтесь возражать.
  20. Перед нажатием кнопки «отправить» спросите себя:
    • Будет ли ясна тема, человеку, прочитавшему только заголовок?
    • Объясняет ли первый параграф текста, о ком или о чем история, и заинтересует ли читателя?
    • Похож ли ваш пост на новость?
    • Поймет ли человек, далекий от темы статьи, что в ней написано?
    • Нет ли в статье жаргона?
    • Можно ли назвать вашу запись объективной?
    • Есть ли в заголовке и тексте статьи ключевые слова, интересные для поисковиков?

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

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

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

Поскольку в блогах все хранится в общедоступном режиме, помните: ваши комментарии останутся навсегда. Думайте, прежде чем писать и редактируйте, редактируйте, редактируйте. Потом жмите «отправить».

Важно моменты комментаторства:

  • Подписывайтесь. В большинстве случаев анонимные высказывания удаляют.
  • Не забывайте оставлять свой e-mail.
  • Подписывайте свой URL.

Подпись похожу на рекламу удалят. Ссылайтесь на факты – вы заинтересованы в качестве своих комментариев.

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

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

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

Место под комментарий может быть ограничено – проще всего изначально писать коротко.

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

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

понедельник, 17 августа 2009 г.Green

Blogger является популярной платформой для ведения блогов. Это сервис от серьезной компании, принадлежащей Google. Он обладает множеством возможностей сравнимых с услугами платного хостинга:

  • неограниченный трафик
  • неплохая система управления, с которой может справиться любой начинающий блогер
  • отсутствие рекламы
  • стабильная работа
  • интеграция с другими продуктами Google: AdSense, Picasa…
  • размещение блога на собственном домене

Вот на последнем пункте остановимся поподробней. Ваш блог может иметь своё имя (mysite.ru), а не субдомен домена blogspot.com (mysite.blogspot.com). Первый вариант несет немало приемуществ:

  • адрес вашего сайта легче запомнить.
  • возможность интегрировать блог с Google Apps, который дает вам возможность завести e-mail (адрес электронной почты) с именем вашего сайта (user@myite.ru)
  • более лучшая индексация поисковиками (я имею ввиду Yandex (есть у него какая то нелюбовь к блогам на blogspot.com))

Так как же «прикрутить» свой домен к blogger… У многих вызывают трудности с настройкой пользовательского домена на blogspot.com. Но если следовать инструкции приведенной ниже то «парковка» вашего домена не вызовет не каких трудностей. Шаг за шагом (а они совсем не сложные, можно сказать достаточно простые) и ваш блог обретет своё имя.

Подробная инструкция: Ваш домен на Blogger.com.

1. Регистрация домена.

И так первый пункт: регистрация домена. Выбираете любого понравившегося региcтратора и платим ему «денюжку» за понравившееся свободное доменное имя, или же если вы любитель халявы регаете бесплатные домены третьего уровня типа net.ru, org.ru, co.cc и т.д.

Если вы выберете в качестве регистратора Reggi.Ru, то можете пропустить пункт инструкции про настройку ДНС. Для владельцев блога там есть волшебная кнопка автоматической настройкой домена для Blogger.com. При нажатии которой, DNS сервера домена настраиваются для отображения блога по этому адресу. Можете сразу переходить к третьему пункту: настройка домена на blogspot.com.

2. Настройка ДНС.

Второй пункт который вызывает много вопросов у пользователей Blogger.com решивших подключить свой домен — это настройка ДНС. Но и здесь не чего сложного. По сути дела вам нужно добавить одну запись CNAME указывающую на субдомен (это может быть www и тогда адрес вашего блога будет www.mysite.ru или любой другой, например blog и тогда адрес вашего сайта будет выглядеть как blog.mysite.ru). И еще если вы хотите чтоб ваш сайт был доступен и без приставки www, вам нужно изменить запись A и добавить еще несколько записей типа A для «голого» домена.

Настройки ДНС можно делать у регистратора (при наличии данной опции у оного (вспомним Reggi.ru с «волшебной кнопкой», смотри «скрин» выше)), также при наличии у вас хостинга можно сделать это и там, или же воспользоваться одним из бесплатных ресурсов для настройки DNS, таких как например zoneedit.com или everydns.net.

Настройки:

  • Создание CNAME-записи: в панели управления ищем ссылку управление зоной (по русски) или zone edit (eng). В формочку с названием: Aliases,Fully Qualified Domain Name и т.д. забиваем www, а во второе поле с названием: Actual Name, Record Value и т.д. прописываем ghs.google.com. Чтоб вы не запутались, делайте так в первое поле формы вписываем www, во второе поле — ghs.google.com.(обратите внимание на точку в конце( у кого-то она нужна, а где то нет)). Жмем кнопку под заполненной формой.
  • Создание записи типа A для вашего домена. Очень важный пункт, делает доступным ваш сайт и без приставки www. И так первое поле: оставляем пустым, или пишем @ или вписываем «голый» домен (без www) — mysite.ru, в зависимости от того что там уже было. Во второе вписываем IP: 216.239.32.21. И так еще три раза, первое поле везде одинаковое, а во второе каждый раз вписывая один из этих IP: 216.239.34.21, 216.239.36.21, 216.239.38.21

Вот так это должно выглядеть:

mysite.ru. IN A  216.239.32.21
mysite.ru. IN A  216.239.34.21
mysite.ru. IN A  216.239.36.21
mysite.ru. IN A  216.239.38.21
www IN CNAME  ghs.google.com.

У регистратора в панели управления прописываем DNS сервера (сервисов на которых вы проводили настройки (пример ns1.zoneedit.com и ns2.zoneedit.com)).

На этом настройки ДНС закончены, настройки вступят в силу в течении 24-48 часов.

P.S. Кстати при наличии у вас хостинга можно настроить перенаправление с «голого» домена на www.mysite.ru через .htaccess, настроив 301 редирект.

3. Привязка домена к сервису blogger.

Ну а это самое простое: вам стоит лишь войти в Blogger.com и прикрепить свой домен («Настройки»>»Публикация»>»Домен пользователя»>»Перейти к расширенным настройкам»).

Отмечаем «галочку»: переадресовать mysite.ru в www.mysite.ru.

По данным Google блог на новом домене гарантированно заработает в течение 48 часов.

суббота, 22 августа 2009 г.Green

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

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

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

Индексация сайта может длиться от пары дней до нескольких недель. Самые краткие сроки процесса индексации у Google. А несколько ссылок на ваш сайт с высокопопулярных сайтов с большими показателями PR и ТИЦ существенно повышают скорость попадания ресурса в базу поисковых систем.

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

Сделать процесс индексации более быстрым помогут следующие приемы:

  1. Навигация на сайте должна быть максимально простой и позволять пройти на каждую из страниц сайта с помощью не более чем трех кликов мышки.
  2. Сделайте карту сайта, на главной странице расположите на нее линк. В карте вы указываете ссылку на каждую из страниц сайта.
  3. При создании ссылок применяйте самые простые url.
  4. При создании страниц не делайте их очень большими по объему, поскольку поисковые системы не любят страницы с размером больше 100-150 кб.
  5. Когда вы хотите дать поисковому роботу сведения по индексации сайта или закрыть определенные страницы своего сайта применяйте такой файл как robots.txt.

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

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

пятница, 21 августа 2009 г.Green

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

Font-family – основной атрибут шрифта, задающий его форму. Для определения значения этого атрибута имеются две возможности: указать название шрифта, например Verdana или Times New Roman, либо же воспользоваться заранее заданными названиями шрифтовых семейств и системных шрифтов (типами).

Типы шрифтов:

  • serif («антиква» — шрифты с засечками) – пропорциональные шрифты, литеры которых оканчиваются горизонтальными черточками (серифами), например: Georgia, Times New Roman, Century Schoolbook;
  • sans-serif («гротеск» — гротескные шрифты без засечек) – пропорциональные шрифты с прямыми концами литер, например: Arial, Helvetica, Verdana, Tahoma, «Trebuchet MS»;
  • monospace (моноширинные шрифты для отображения программного кода) – шрифты с постоянной шириной знаков, например: Courier New, Prestige;
  • cursive — рукописные шрифты, например: ZapfChancery;
  • symbol — шрифты для определённых символов, например: ZapfDingbats;
  • fantasy – декоративные шрифты, например: ComicSans;
  • other — все остальные шрифты, например: техногенные, гранжевые, готические и т.п.

Значение параметра font-family может принимать вид списка, элементы которого разделены запятыми. В этот список включают названия шрифтов и обязательно тип шрифта.

Это необходимо, так как, если на компьютере клиента отсутствует, скажем, шрифт «Trebuchet MS», а в правиле указано только оно, то разработчик не может предположить, как страница будет выглядеть на экране пользователя. В том, случае, когда в правилах указан тип шрифта, браузер будет подтавлять шрифт из этого семейства которое присутствует на машине клиента (например если будет указан тип sans-serif то вместо «Trebuchet MS» будет подставлен шрифт Arial, Verdana и т.д., а не «Times New Roman»).

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

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

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

Некоторые особенности использования шрифтов.

Пример:

font-family: Verdana, sans-serif;
font-family: Georgia, serif;
font-family: Courier New, monospaced;

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

Этой ситуации можно избежать. Просто нужно прописать гарнитуры тех шрифтов, которые есть и в Linux, и в MacOS. Но их может не быть в Windows (В MacOS X и Linux многие шрифты совпадают: Helvetica, Courier, Times, Palatino. Немного может различаться характер рисунка данных шрифтов, но в целом они довольно схожи). И тогда запись будет выглядеть следующим образом:

font-family:
 (шрифт без засечек, например "Trebuchet MS"), Arial, Helvetica, sans-serif;
font-family:
 (какой нибудь шрифт с засечками), "Times New Roman", Times, serif;
font-family:
 (моноширинный шрифт), "Courier New", Courier, monospaced;

Знакомая запись, не правда ли?

Вот еще пример:

  • font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;

Заметьте, насколько нелогично идёт чередование шрифтов в указании: наиболее распространённый Arial предшествует Verdana и Tahoma, которые практически всегда если и есть в системе, то лишь вместе. То есть Tahoma не будет использован никогда, да и у Verdana нет ни малейшего шанса: всех со стопроцентной вероятностью обставит Arial. Тогда зачем было городить такую нелепую конструкцию? Это издержки бездумного «копипаста».

Свойства шрифта

  • font-style – параметр описания стиля шрифта. Font-style принимает значения italic (наклонный шрифт или курсив), oblique (простой наклонный шрифт), normal (вид по умолчанию);
  • font-variant – вариант шрифта. Параметр принимает значения small-caps (малые прописные) и normal;
  • font-weight – вес, степень «ужирнения» шрифта. Для этого атрибута установлены значения: normal (обычный), bold, bolder, lighter, а также цифровые величины 100, 200, 300, …, 900 (такое разнообразие ступеней ужирнения шрифта полностью броузерами не реализуется);
  • font-stretch – параметр, задающий степень разнесения знаков по горизонтали. Спецификацией CSS 2.0 предусмотрен ряд значений, которые в настоящее время броузерами не поддерживаются: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. Применение действия параметра font-stretch остается на будущее;
  • font-size – чаще всего применяемый атрибут, задающий высоту шрифта. Атрибут принимает цифровые значения, выраженные в абсолютных единицах измерения: px — пиксели, pt — пункты, mm — миллиметры, cm — сантиметры еще in и pc, либо одно из значений:
    • font-size: xx-small;
    • font-size: x-small;
    • font-size: small;
    • font-size: medium;
    • font-size: large;
    • font-size: x-large;
    • font-size: xx-large;

    Можно также использовать относительные значения, которыми уменьшается или увеличивается размер шрифта, наследованный от родителя на древе документа;

    • font-size: smaller;
    • font-size: larger;
  • font – сконцентрированная форма записи всех свойств шрифта.

Порядок записи для сокращенной записи свойств шрифта в CSS:

  1. font-style,
  2. font-variant,
  3. font-weight,
  4. font-size,
  5. line-height,
  6. font-family.

Такая сокращенная запись будет работать, если указаны font-size и font-family. Если их опустить, то правило проигнорируется. Если не указывать font-weight, font-style или font-variant, то им присваивается значение normal, так что учтите это.

Пример:

font: italic small-caps bold 1em/1.5em Arial, Helvetica, sans-serif;

Вместо:

font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;

воскресенье, 13 сентября 2009 г.Green

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

«Попытаюсь написать, хотя раньше никогда ничего подобного не писал…» Если заказчик ценит хорошую шутку, то ответит: «Попытайтесь, а я попытаюсь оплатить, хотя раньше никогда не платил…

«Выполню быстро и качественно! Соглашайтесь!» Согласитесь, звучит чуть угрожающе, интересно, что ждёт заказчика в случае «несоглашения»?

Надеюсь, на длительное сотрудничество. После слова «надеюсь» запятая не нужна. Хотя возможно, автор хотел сказать: «Надеюсь (запятая) жду (запятая) целую (запятая) надеюсь на сотрудничество!

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

«Выполню заказ всего за 0.90 центов за тысячу символов!» На первый взгляд здесь всё правильно, но конечно, автор имел в виду, что за тысячу символов хочет 90 центов, что нужно описать как 0.90 доллара, иначе автор за тысячу символов действительно получит 0.90 центов, то есть меньше одного цента.

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

Green HTML: Август 2009

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

Font-family – основной атрибут шрифта, задающий его форму. Для определения значения этого атрибута имеются две возможности: указать название шрифта, например Verdana или Times New Roman, либо же воспользоваться заранее заданными названиями шрифтовых семейств и системных шрифтов (типами).

Типы шрифтов:

  • serif («антиква» — шрифты с засечками) – пропорциональные шрифты, литеры которых оканчиваются горизонтальными черточками (серифами), например: Georgia, Times New Roman, Century Schoolbook;
  • sans-serif («гротеск» — гротескные шрифты без засечек) – пропорциональные шрифты с прямыми концами литер, например: Arial, Helvetica, Verdana, Tahoma, «Trebuchet MS»;
  • monospace (моноширинные шрифты для отображения программного кода) – шрифты с постоянной шириной знаков, например: Courier New, Prestige;
  • cursive — рукописные шрифты, например: ZapfChancery;
  • symbol — шрифты для определённых символов, например: ZapfDingbats;
  • fantasy – декоративные шрифты, например: ComicSans;
  • other — все остальные шрифты, например: техногенные, гранжевые, готические и т.п.

Значение параметра font-family может принимать вид списка, элементы которого разделены запятыми. В этот список включают названия шрифтов и обязательно тип шрифта.

Это необходимо, так как, если на компьютере клиента отсутствует, скажем, шрифт «Trebuchet MS», а в правиле указано только оно, то разработчик не может предположить, как страница будет выглядеть на экране пользователя. В том, случае, когда в правилах указан тип шрифта, браузер будет подтавлять шрифт из этого семейства которое присутствует на машине клиента (например если будет указан тип sans-serif то вместо «Trebuchet MS» будет подставлен шрифт Arial, Verdana и т.д., а не «Times New Roman»).

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

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

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

Некоторые особенности использования шрифтов.

Пример:

font-family: Verdana, sans-serif;
font-family: Georgia, serif;
font-family: Courier New, monospaced;

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

Этой ситуации можно избежать. Просто нужно прописать гарнитуры тех шрифтов, которые есть и в Linux, и в MacOS. Но их может не быть в Windows (В MacOS X и Linux многие шрифты совпадают: Helvetica, Courier, Times, Palatino. Немного может различаться характер рисунка данных шрифтов, но в целом они довольно схожи). И тогда запись будет выглядеть следующим образом:

font-family:
 (шрифт без засечек, например "Trebuchet MS"), Arial, Helvetica, sans-serif;
font-family:
 (какой нибудь шрифт с засечками), "Times New Roman", Times, serif;
font-family:
 (моноширинный шрифт), "Courier New", Courier, monospaced;

Знакомая запись, не правда ли?

Вот еще пример:

  • font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;

Заметьте, насколько нелогично идёт чередование шрифтов в указании: наиболее распространённый Arial предшествует Verdana и Tahoma, которые практически всегда если и есть в системе, то лишь вместе. То есть Tahoma не будет использован никогда, да и у Verdana нет ни малейшего шанса: всех со стопроцентной вероятностью обставит Arial. Тогда зачем было городить такую нелепую конструкцию? Это издержки бездумного «копипаста».

Свойства шрифта

  • font-style – параметр описания стиля шрифта. Font-style принимает значения italic (наклонный шрифт или курсив), oblique (простой наклонный шрифт), normal (вид по умолчанию);
  • font-variant – вариант шрифта. Параметр принимает значения small-caps (малые прописные) и normal;
  • font-weight – вес, степень «ужирнения» шрифта. Для этого атрибута установлены значения: normal (обычный), bold, bolder, lighter, а также цифровые величины 100, 200, 300, …, 900 (такое разнообразие ступеней ужирнения шрифта полностью броузерами не реализуется);
  • font-stretch – параметр, задающий степень разнесения знаков по горизонтали. Спецификацией CSS 2.0 предусмотрен ряд значений, которые в настоящее время броузерами не поддерживаются: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. Применение действия параметра font-stretch остается на будущее;
  • font-size – чаще всего применяемый атрибут, задающий высоту шрифта. Атрибут принимает цифровые значения, выраженные в абсолютных единицах измерения: px — пиксели, pt — пункты, mm — миллиметры, cm — сантиметры еще in и pc, либо одно из значений:
    • font-size: xx-small;
    • font-size: x-small;
    • font-size: small;
    • font-size: medium;
    • font-size: large;
    • font-size: x-large;
    • font-size: xx-large;

    Можно также использовать относительные значения, которыми уменьшается или увеличивается размер шрифта, наследованный от родителя на древе документа;

    • font-size: smaller;
    • font-size: larger;
  • font – сконцентрированная форма записи всех свойств шрифта.

Порядок записи для сокращенной записи свойств шрифта в CSS:

  1. font-style,
  2. font-variant,
  3. font-weight,
  4. font-size,
  5. line-height,
  6. font-family.

Такая сокращенная запись будет работать, если указаны font-size и font-family. Если их опустить, то правило проигнорируется. Если не указывать font-weight, font-style или font-variant, то им присваивается значение normal, так что учтите это.

Пример:

font: italic small-caps bold 1em/1.5em Arial, Helvetica, sans-serif;

Вместо:

font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;

Green HTML: Апрель 2010

Любой web-мастер, если он пытается верстать страницы сайта с помощью топора, ножа, палки колбасы и «пол-литра» водки — ретроград и убийца здравого смысла. Потому как настоящий специалист ценит время, причём не только своё, но и заказчика, более того, web-мастер ответственен перед Вечностью, которая, если что не так, может и по башке въехать, стоит только пренебречь принципами научной организации труда.

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

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

Отвечаю: я потому разошёлся, что умной книги ты всё равно не осилишь, а потому лучше слушай меня-дурака.

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

Потому что HTML 5 с его полным набором новых элементов существенно упрощает процесс создание структуры страниц.

Смотрим: большинство страниц, написанных на HTML 4, включают широкий набор общих блоков, таких, как верхняя часть , нижняя часть , навигация , и т.д. Здесь в порядке вещей размечать их, используя теги div и присваивая каждому описывающий id или class.

HTML 5 вводит же несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами div. Это в основном от того, что текущей версии HTML 4 недостаёт семантики в конкретном описании частей. HTML 5 избегает подобного с помощью ввода новых элементов для представления каждой из частей в отдельности.

Блоки div могут быть заменены новыми элементами: header, footer, nav, section, article, aside и footer. Вместо того чтобы использовать тэг для различных секций страницы, мы будем использовать соответствующие семантические теги, что значительно облегчит жизнь поисковым системам в выяснении типа контента, расположенного на странице.

HTML-структура теперь будет такой:



 
  
  
  
  
  
 
 
  
   

Название сайта

  
  
   
  • Главная
  • Об авторе
  • Карта сайта
  • Контакты
  
  
   
    
     

Заголовок статьи

    
    
Образец текста. "Рыба".

Например архив

     
     
  • 2010
    
   
  
  
   
© Автор

Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

  1. В HTML 5, есть только один doctype. Он объявляется в начале страницы через. В отличие от существующих громоздких доктайпов, объявление 5-ой версии кратко и лаконично. Самое интересное в том, что большинство современных сайтов уже сейчас можно перевести в HTML 5, просто изменив строку с doctype и не меняя больше ничего. Это связанно с тем, что синтаксис HTML 5 полностью совместим с HTML 4и, соответственно, XHTML1-документами.
  2. Объявление кодировки в HTML 5 так же притерпело изменения. Выглядит оно теперь вот так: .
  3. Джава-скрипт заставляет понимать новые теги Internet Explorer (HTML 5 будет работать даже в IE6!). Остальные браузеры их уже знают.
  4. Тэг header, является контейнером для вступительных элементов, таких, как заголовок или логотип. Он также может содержать оглавление или поисковую форму.
  5. Навигация создается с использованием маркированного списка, который заключен в тег nav.
  6. Тэг section — для каких-то частей страницы.
  7. Тэг article — для основного контента: статей, комментариев и т.д.
  8. Тэг aside — для дополнительного контента (например, информация в сайдбаре).
  9. Тэг footer — для «подвала» сайта: обычно он содержит информацию о разделе, например, имя автора, ссылки на похожие документы, копирайт и тому подобное.

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

суббота, 19 сентября 2009 г.Green

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

Шаблон — это «одежда» блога. У каждого она по-своему уникальна. Кто-то пытается приодеть свой блог в одёжку «от кутюр» (таких как, например, N.O.D., Блогоарт…), а кто-то занимается Hand Made (т.е. рисует собственную темку для своего сайта, что даже более уникально, чем шаблон от кутюр).

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

1. Шапка сайта.

Оформление шапки состоит из картинки на всю ширину блога, вес которой составляет более 100 кБ, что для рисунка в одной цветовой палитре слишком много, лучше было бы в таблице стилей для слоя "top" прописать атрибуты слоя, которые более подходят к оформлению сайта, т.е. вместо белого фонового цвета выбрать оттенок, который присутствует в рисунке «талантливого дизайнера» (от #FC9 до #FC6). И теперь, даже если по какой-то причине (отключена графика в браузере и т.п.) не загрузятся картинки, то оформление останется более-менее приемлемым (и не будет белого «бельма» на том месте, которое больше всего притягивает взгляд).

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

Примерно должно получиться вот так:

.top {
 background: #F7B53A url(images/top.jpg) no-repeat scroll right 0;
 height: 159px;
}

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

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

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

Здесь я просто укажу на ошибки, которые стоит поправить:

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

Заголовок отделен от статьи переносами (на главной странице 3
и 2
на странице поста). Тег
должен использовать только один раз для вставки переноса строки. Использование нескольких тегов подряд для отступов не приветствуется. Можно задать нижний отступ для блока "title".

.title {
 margin:0 0 30px;
}

P.S. Кстати при этом доктайпе: "XHTML 1.0 Transitional" тег переноса должен быть закрыт слешем —
.

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

Gergia и Tahoma из разных шрифтовых семейств.

В заголовоке поста ссылка на эту же страницу (не самое конечно страшное, тем более что этой ошибкой страдают наверное более 90% личных страничек).

3. Сайдбар.

Вот наконец то добрались и до сайдбара. Здесь творится полный хаос.

Мои рекомендации:

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

Возможно по задумке дизайнера, это круто — рандомный показ псевдокреативных иконок RSS. Но ни одна из них не попадает в стиль. Было бы лучше разместить в одну линию «пузомерку» от Feedburner и стандартную иконку РСС (она здесь подойдет как нельзя лучше).

Убрать кнопочки «читать в Яндекс», в Гугле, «получать по почте» (не уж то от этих кнопочек прибавляются подписчики).

Птичку Твиттера уменьшить и разместить в одну строку РСС.

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

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

Видно же что макет распадается после Donation Bar. Просто нужно убрать лишние теги неоткрытого списка:

  • Donation Bar

  • Кстати о «Donation Bar», я бы и не понял что ссылка «как сюда попасть» работает — окошко открывается за видимой частью экрана (чтоб его увидеть, нужно прокрутить сайт обратно к шапке).

    
    

    Если изменить position: absolute; на position: fixed;, тогда другое дело.

    4. О разном.

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

    Нет закрывающих тегов , .

    Гугл-аналитик обычно размещают в самом конце перед (а ну да его же нет), но не как в теге .

    Счетчик от Liveinternet.ru в футер.

    Пагинация отделена переносом, в стилях нужно задать отступ.

    Вижу еще много недочетов, но уже устал… Вообщем нужно исправить или сменить темку, хотя читателям глубоко до лампочки, сколько ошибок в коде и доведен ли до ума дизайн, главное интересный контент. Буду рад если мои советы помогут. Удачи!

    суббота, 12 сентября 2009 г.Green

    Любой веб-ресурс нуждается в наполнении. При этом, контента должно быть много, и его качество не должно оставлять желать лучшего. Но вопрос остаётся без ответа: «Где взять контент?»

    • Вы можете писать статьи самостоятельно. Это самый благородный путь. Вы напишите всё, что накипело, о чём давно хотели поведать читателям. Только нужно иметь желание и большое количество свободного времени. Однако, если вы будете наполнять свой сайт или блог постепенно, времени потребуется не так уж и много. Затрачивайте полчаса-час в день, и ваш сайт расцветёт и оживёт!
    • Вы можете объявить конкурс на самую интересную статью. К примеру, ваш призовой фонд составит 100 у.е. А количество присланных статей перевалит за тысячу. Это будут авторские, уникальные, интересные статьи. Игра стоит свеч!
    • Каталоги статей! Почему вы забываете об этом эффективном способе наполнения сайта? Да, вам необходимо сохранять поставленные в текстах ссылки, но вам хватит материала безболезненно запустить и поддерживать проект, благодаря хорошим, информативным статьям. Каталоги статей – это большая отрасль Интернета, благодаря которой многие веб-мастера не имеют проблем с наполнением сайтов.
    • Обмен статьями. Иными словами, вам будут предоставлять статью с проставленными ссылками, как это происходит с каталогом статей. Ничего страшного, что ваш веб-ресурс станет ссылаться на большое количество сайтов. Для начинающих проектов это вообще не имеет значения. А если вы, в ответ, предложите тоже статью с вашими ссылками, вы можете приобрести новых посетителей.
    • Рерайтинг. Если вы умеете писать тексты «по мотивам» других текстов, сделайте рерайтинг интересных статей, попадающихся вам в Интернете и подходящих вам по тематике. Можно поручить эту работу рерайтеру, конечно, если ваши финансовые возможности позволяют.
    • Нельзя не сказать о самом неблаговидном поступке, которым пользуются некоторые владельцы веб-ресурсов: сканирование книг и журналов. Да, уникальность может сохраниться, но воровство контента и авторства карается законом, поэтому нам с вами такой способ не подходит!

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

    понедельник, 12 апреля 2010 г.Green

    Любой web-мастер, если он пытается верстать страницы сайта с помощью топора, ножа, палки колбасы и «пол-литра» водки — ретроград и убийца здравого смысла. Потому как настоящий специалист ценит время, причём не только своё, но и заказчика, более того, web-мастер ответственен перед Вечностью, которая, если что не так, может и по башке въехать, стоит только пренебречь принципами научной организации труда.

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

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

    Отвечаю: я потому разошёлся, что умной книги ты всё равно не осилишь, а потому лучше слушай меня-дурака.

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

    Потому что HTML 5 с его полным набором новых элементов существенно упрощает процесс создание структуры страниц.

    Смотрим: большинство страниц, написанных на HTML 4, включают широкий набор общих блоков, таких, как верхняя часть , нижняя часть , навигация , и т.д. Здесь в порядке вещей размечать их, используя теги div и присваивая каждому описывающий id или class.

    HTML 5 вводит же несколько новых элементов и атрибутов. Некоторые из них технически являются эквивалентами div. Это в основном от того, что текущей версии HTML 4 недостаёт семантики в конкретном описании частей. HTML 5 избегает подобного с помощью ввода новых элементов для представления каждой из частей в отдельности.

    Блоки div могут быть заменены новыми элементами: header, footer, nav, section, article, aside и footer. Вместо того чтобы использовать тэг для различных секций страницы, мы будем использовать соответствующие семантические теги, что значительно облегчит жизнь поисковым системам в выяснении типа контента, расположенного на странице.

    HTML-структура теперь будет такой:

    
    
     
      
      
      
      
      
     
     
      
       

    Название сайта

      
      
       
    • Главная
    • Об авторе
    • Карта сайта
    • Контакты
      
      
       
        
         

    Заголовок статьи

        
        
    Образец текста. "Рыба".

    Например архив

         
         
    • 2010
        
       
      
      
       
    © Автор

    Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

    1. В HTML 5, есть только один doctype. Он объявляется в начале страницы через. В отличие от существующих громоздких доктайпов, объявление 5-ой версии кратко и лаконично. Самое интересное в том, что большинство современных сайтов уже сейчас можно перевести в HTML 5, просто изменив строку с doctype и не меняя больше ничего. Это связанно с тем, что синтаксис HTML 5 полностью совместим с HTML 4и, соответственно, XHTML1-документами.
    2. Объявление кодировки в HTML 5 так же притерпело изменения. Выглядит оно теперь вот так: .
    3. Джава-скрипт заставляет понимать новые теги Internet Explorer (HTML 5 будет работать даже в IE6!). Остальные браузеры их уже знают.
    4. Тэг header, является контейнером для вступительных элементов, таких, как заголовок или логотип. Он также может содержать оглавление или поисковую форму.
    5. Навигация создается с использованием маркированного списка, который заключен в тег nav.
    6. Тэг section — для каких-то частей страницы.
    7. Тэг article — для основного контента: статей, комментариев и т.д.
    8. Тэг aside — для дополнительного контента (например, информация в сайдбаре).
    9. Тэг footer — для «подвала» сайта: обычно он содержит информацию о разделе, например, имя автора, ссылки на похожие документы, копирайт и тому подобное.

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