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

Возможных вариантов решения также достаточно. Во-первых, можно отказаться от проекта, объяснив заказчику ситуацию. А если клиент перспективный, или проект очень интересный? В таком случае можно проект взять и тянуть время… Не очень разумное решение для репутации компании, не правда ли?

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

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

Вариант четвертый — отдать проект на реализацию за пределы компании. Самый перспективный вариант. Здесь есть два типа сотрудничества — фриланс и аутсорс.

Нельзя сказать, что одно лучше, другое хуже. Каждый проект, каждая ситуация уникальны. В одном случае выгоднее будет воспользоваться услугами аутсорс-компании, в другом — фрилансера. Аутсорс — не есть хорошо, фриланс — не есть плохо. Есть отличные фрилансеры, которые делают качественно, быстро и недорого. Есть. Но их, к сожалению, несоизмеримо меньше. Шанс «нарваться» очень велик. В то же время, есть ситуации, когда работа с фрилансером — единственно верное решение.

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

Фриланс

Плюсы:

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

Минусы:

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

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

Аутсорсинг

Плюсы:

• юридические гарантии — договор с фиксированными сроками и мерами ответственности сторон (возможно заключить договор и с фрилансером, но на практике используется крайне редко);
• качество — компании, которые делают некачественный продукт, не выходят на рынок аутсорсинговых услуг, а если такое и случается, не задерживются на нем;
• спокойствие заказчика — отдали проект, получили качественный результат, не нужно контролировать процесс реализации;
• надежность — аутсорс-компании рискуют своей репутацией, им не выгодно делать «плохо», восстанавливать репутацию — во много раз сложнее, чем фрилансеру.

Минусы:

• дороже, чем фриланс (за счет «+» приведенных выше);
• выше сроки — за счет согласований, оформления документов, тестирования готового проекта и других нюансов. Бюрократия, но в то же время — это и есть те самые гарантии для заказчика.

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

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

В бизнесе правильное решение = максимальная прибыль + минимальные издержки + ваше комфортное состоянии.

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

Делюсь своими мыслями и соображениями по тому поводу.

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

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

Барьер страха неизвестности

Да, и это действительно барьер! В Москве и СПБ давно уже представить не могут, чтобы компания обходилась без собственного сайта, благо столичные Интернет-агентства проводят множественные семинары/вебинары для ТОП-менеджеров и сумели воспитать для себя аудиторию. У нас, к сожалению, пока не так. Самый главный вопрос, возникающий у наших клиентов: а куда уходят деньги? Ведь страшно инвестировать в то, что не понимаешь и не можешь «пощупать». Ну дам я вам денег, а куда они расходуются? Вернутся ли они, и где гарантии?

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

Правдивая ложь

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

Правда, некий прогресс за 3 года заметен! Теперь где-то в 15% от обращений спрашивают «Сколько будет стоит сделать сайт, и чтобы он светился в поисковых системах?», а не просто сделать сайт. В большинстве случаев клиент уже знает зачем ему сайт, т. е. преследует определенную цель, что меня очень радует!

Я покажу тебе дверь, войти в нее ты должен сам

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

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

Мы скажем Вам, что это эффективно!

Чтож, аудиторию нужно воспитывать, чем мы и занимаемся. Зимой 2010 года, в конце января планируем проведение 2х дневной конференции на тему «Интернет маркетинг для бизнеса», которая пройдет в здании Волгоградского Государственного Университета, в рамках ежегодной научной конференции. Анонс конференции и точную дату проведения выложим обязательно для волгоградских читателей нашего блога.

Вывод: в регионах на SEO и прочих услугах Интернет-маркетинга «рыбы словить можно», даже порой довольно крупной, совсем не все так плохо!

Полезная информация

Обратите внимание на молодую биржу ссылок Seotina.com. Пока что количество площадок не велико около 200 штук, но думаю ближайшее время значительно увеличится. Очень хочется, чтобы в базе было как можно меньше ГС и как можно больше качественных сайтов, подождем, посмотрим.

Из плюсов биржи:

• полный манейбек, в случае снятия ссылок со страницы вебмастером или выпадения из индекса;
• поддержка paypal и webmoney;
• оплаты/хранение денег в евро;
• 30% от дохода рефералов первый год, далее 5% «пожизненно».

И по словам представителей биржи, ближайшее время планируется слияние со  spidersmarket.com, а следовательно — увеличение базы.

Очень рекомендовал бы добавить в функционал биржи возможность размещения ссылок «навсегда», что в последнее время стало модным.

Интересно почитать:

• Как мы заказывали сайт у конкурентов
• Где взять тексты для сайта или тематического блога

Пишем сейчас на Django сайт, где требуется получать последнее сообщение из Twitter аккаунта корпоративного микроблога. Некоторое время назад я показывал, как это можно сделать в PHP, теперь пишу тоже самое на Python.

Небольшие отличия есть, а именно — мы получаем данные из Twitter API в формате JSON (используется библиотека simplejson), а не в XML, как это было в PHP версии. Можно без проблем использовать и XML, просто с JSON мне удобнее работать.

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

Код, вся дополнительная информация в комментариях:

from django.conf import settings
from time import time
import urllib, os, simplejson

class Twitter:
  """
  Скачиваем последнее сообщение из Twitter пользователя.

  Требуется:
  - библиотека simplejson (http://pypi.python.org/pypi/simplejson/)
  - библиотека urllib
  - библиотека os
  - метод time.time()

  Необходимо в settings.py добавить переменные:

  TWITTER_ACCOUNT = 'Skaizer' # Логин пользователя, чью ленту будем читать.
  TWITTER_CACHE_PERIOD = 3600 # Частота обновления кеша в миллисекундах, когда 0, кеш игнорируется.
  TWITTER_CACHE_FILE = 'last_twitt.txt'; # Имя файла, куда будем дампить кеш. Строится путь относительно MEDIA_ROOT.

  """
  def __init__(self):
    self.twitt_file = getattr(settings,'MEDIA_ROOT','./') + getattr(settings,'TWITTER_CACHE_FILE','last_twitt.txt')
    self.cache_period = getattr(settings,'TWITTER_CACHE_PERIOD',0)
    self.username = getattr(settings,'TWITTER_ACCOUNT',None)

  def returnLastTwitt(self):
    """
    Возвращаем кеш, если он имеется, и по времени существует не менее установленного в конфигах периода.
    Иначе возвращаем сообщение из инета.
    """
    if self.cache_period !=0:
      if os.path.exists(self.twitt_file):
        if self.cache_period > self.getCacheDateDiff():
          return self.getLastFromCache()
    return self.getLastFromWeb()

  def getLastFromWeb(self):
    """
    Скачивает твиттер ленту в Интернет и выбирает последнее сообщение
    """
    feed = 'http://twitter.com/statuses/user_timeline/' + self.username + '.json';
    feed_obj  = simplejson.loads(urllib.urlopen(feed).read())
    last_twitt = feed_obj[0]['text']
    self.cache_twitt(last_twitt.encode("utf_8"))
    return last_twitt

  def cache_twitt(self, msg):
    """
    Записывает последний твитт в локальный файл
    """
    handle = open(self.twitt_file,'w')
    handle.write(msg)
    handle.close()

  def getCacheDateDiff(self):
    """
    Считает, как давно был создан файл кеша в миллисекундах.
    """
    diff = float(time()) - float(os.path.getmtime(self.twitt_file))
    return diff

  def getLastFromCache(self):
    """
    Возвращает закешированное сообщение из файла.
    """
    handle = open(self.twitt_file,'r')
    cached_twitt = handle.read()
    handle.close()
    return cached_twitt

  def getLast(self):
    if not self.username:
      return False
    return self.returnLastTwitt()

Вот так класс используется:

def last_twitt():
    t = Twitter()
    return {
      'last_twitt' : t.getLast(),
    }

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

PS: Кстати у нас новый осенний логотип, очень симпатично получилось на наш взгляд.

Интересно почитать:

• Как добавить разные иконки к пунктам меню, используя только CSS

Ранее я показал элементарную реализацию алгоритма шинглов, позволяющую определять, являются ли два документа почти дубликатами или нет. В этот раз я поясню реализацию алгоритма, описанную Зеленковым  Ю. Г. и Сегаловичем И.В. в публикации «Сравнительный анализ методов определения нечетких дубликатов для Web-документов».

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

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

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

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

Итак, алгоритм шинглов для веб-документов

Разберем, через какие этапы проходит текст, подвергшийся сравнению:

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

1. Канонизация текста

Что такое канонизация текста я описывал в своей прошлой статье об алгоритме шинглов. Но в коротко повторюсь. Канонизация текста приводит оригинальный текст к единой нормальной форме.

Текст очищается от предлогов, союзов, знаков препинания, HTML тегов, и прочего не нужного «мусора», который не должен участвовать в сравнении. В большинстве случаев так же предлагается удалять из текста прилагательные, так как они не несут смысловой нагрузки.

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

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

На выходе имеем текст, очищенный от «мусора», и готовый для сравнения.

2. Разбиение на шинглы

Шинглы (англ) — чешуйки, выделенные из статьи подпоследовательности слов.

Необходимо из сравниваемых текстов выделить подпоследовательности слов, идущих друг за другом по 10 штук (длина шингла). Выборка происходит внахлест, а не встык.

Таким образом, разбивая текст на подпоследовательности, мы получим набор шинглов в количестве равному количеству слов минус длина шингла плюс один (кол_во_слов — длина_шингла + 1).

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

3. Вычисление хэшей шинглов с помощью 84х статических функций

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

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

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

Поясню: для каждого шингла рассчитывается 84 значения контрольной суммы через разные функции (например SHA1, MD5, CRC32 и т.д., всего 84 функции). Итак каждый из текстов будет представлен, можно сказать, в виде двумерного массива из 84х строк, где каждая строка характеризует соответствующую из 84х функций контрольных сумм.

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

4. Случайная выборка 84 значений контрольных сумм

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

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

5. Сравнение, определение результата

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

Заключение

Надеюсь, я доступно смог изложить теорию нахождения почти дубликатов для веб-документов, описанную в публикации Зеленкова  Ю. Г. и Сегаловича И.В. не вдаваясь в особенности реализации на конкретном языке программирования.

Во второй статье цикла я собираюсь описать алгоритм супершинглов для веб-документов.

Надеюсь было интересно, удачи.

На днях мы завершили работу над второй версией информационного интернет портала города Волгограда «VLG Navigator». Сайт подвергся переработке на 100%, особенно каталог, что повлекло за собой изменение URL адресов абсолютно всех объектов, разделов и подразделов в каталоге.

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

С технической точки зрения перенос — не проблема. На серверном уровне проверяется открытый URL, и если он соответствует одному из старых адресов, то происходит 301 редирект на новый. Процесс редиректа осуществлен на уровне PHP.

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

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

Для того, чтобы ускорить процесс переноса, как только новая версия портала была запущена, я произвел генерацию новой карты сайта Sitemap.XML и пропинговал поисковики об ее изменении.

Промежуточные результаты

Прошло 4 дня с момента запуска. По статистике Google Analytics посещаемость не упала, новые URL пока отсутствуют в выдаче Яндекс, но имеются в Google. Правда старые по-прежнему так же фигурируют в выдаче гугла. То есть для одного объекта в каталоге выдается старый и новый URL, чтож, подождем подольше, ведь для обновления старых адресов поисковой робот должен на них зайти для повторной переиндексации.

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

Будем ждать, о результатах отпишусь.

В рамках акции «Обмен постовыми»:

• Список блогов, которые проводят обмен постовыми.
• Тут проводят интервью с блоггерами.

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

{% if some_val > 4 %}
<p>Истина</p>
{% else %}
<p>Ложь</p>
{% endif %}

вызывают ошибку.

В поисках решения я нагуглил библиотеку, разработанную Джеймсом Беннеттом (James Bennett) — django-template-utils.

Для использования достаточно добавить библиотеку в Python окружение, можно посредством установки:

tar zxvf template_utils-0.4p2.tar.gz
cd template_utils-0.4p2
python setup.py install

А можно просто добавить приложение в INSTALLED_APPS проекта.

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

Например проверка значения на условие «меньше или равно 4х»:

{% load comparison %}
{% if_less_or_equal some_val 4 %}
<p>Истина</p>
{% else %}
<p>Ложь</p>
{% endif_less_or_equal %}

Ссылка на библиотеку: django-template-utils.googlecode.com.

На данный момент мы занимаемся разработкой городской социальной сети. Не «убийцы» Вконтакте и Одноклассников, ее задачи будут в корне иными. В качестве программной основы был выбран Django, написанный на языке Python.

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

В этой статья я представлю наше решение поставленной задачи. Возможно, оно окажется не оптимальным, поэтому с удовольствием выслушаю ваши комментарии!

Django, ресайз изображений

Функция ресайза изображения. Автоматически изменяет размер, сохраняя пропорции:

def imageResize(data, output_size):
  """
  Resize image for thumbnails and preview
  data — image for resize
  output_size — turple, contains width and height of output image, for example (200, 500)
  """

  from PIL import Image

  image = Image.open(data)
  m_width = float(output_size[0])
  m_height = float(output_size[1])
  if image.mode not in ('L', 'RGB'):
    image = image.convert('RGB')
  w_k = image.size[0]/m_width
  h_k = image.size[1]/m_height
  if output_size < image.size:
    if w_k > h_k:
      new_size = (m_width, image.size[1]/w_k)
    else:
      new_size = (image.size[0]/h_k, m_height)
  else:
    new_size = image.size
  return image.resize(new_size,Image.ANTIALIAS)

Например, при максимально возможных размерах изображения 200×500 px, загружая изображения на 1024×768 px, новые изображения будут — 200×150 px.

Далее перекрываем стандартный джанговский models.ImageField, расширяя метод save_form_data, в котором и будем производить ресайз:

class AvatarImageField(models.ImageField):
  def save_form_data(self, instance, data):
    from StringIO import StringIO
    from django.core.files.uploadedfile import SimpleUploadedFile, UploadedFile

    if data and isinstance(data, UploadedFile):
      image = imageResize(data, settings.AVATAR_SIZE)
      new_image = StringIO()
      image.save(new_image, 'JPEG', quality=85)
      data = SimpleUploadedFile(data.name, new_image.getvalue(), data.content_type)

      # Удаление старого файла
      previous = u'%s%s' % (settings.MEDIA_ROOT, instance.avatar)
      if os.path.isfile(previous):
        os.remove(previous)
      # -
    super(AvatarImageField, self).save_form_data(instance, data)

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

  def make_upload_path(instance, filename, prefix = False):
    # Переопределение имени загружаемого файла.
    from utils.hashfunc import get_hash

    filename = 'a_' + get_hash('md5') + '.jpg'
    return u"%s/%s" % (settings.AVATAR_UPLOAD_DIR, filename)

И, собственно, сама модель данных, поле avatar определяется нашим перекрытым классом AvatarImageField, следовательно, наследует всю его функциональность:

class Avatars(models.Model):
  user = models.ForeignKey(User, unique=True)
  avatar = AvatarImageField(
    upload_to=make_upload_path,
    null = False,
    blank = False,
    )

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

С удовольствием готов ответить на вопросы, а так же выслушать конструктивную критику этого метода!

Говорим спасибо

Выражаю благодарность Ивану Сагалаеву за его ресурс о программировании в целом и в частности на Python. На этапе ознакомления с Django почти с не покидали его страницы.

Перевод статьи о юзабилити: 8 Characteristics Of Successful User Interfaces.

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

Я составил список из 8 характеристик, которые считаю залогом успешного пользовательского интерфейса:

1. Доступность
2. Минимализм
3. Уверенность
4. Отзывчивость
5. Соответствие контексту
6. Привлекательность
7. Эффективность
8. Снисходительность

Доступность

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

Что делает эта кнопка? Наведем курсор и прочитаем.

Минимализм

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

Делайте вещи понятными, но с минимальной загруженностью. Если вы можете описать возможности одним предложением, вместо трех — сделайте это. Когда вы можете подписать элемент одним словом, вместо двух — сделайте это. Берегите время ваших пользователей, пусть удобство и минимализм требуют много времени, но ваши усилия будут вознаграждены.

Панель регулировки уровня звука в OS X. Коротко и доступно, ничего лишнего.

Уверенность

Многие дизайнеры стремятся сделать интерфейсы «интуитивно понятными». Но что «интуитивно» в действительности означает? Это означает, что пользователи должны инстинктивно понимать и осмысливать возможности проекта. Но как вы можете сделать что-то интуитивно понятным? Вы проектируете знакомые для себя вещи, и то, что для вас может показаться очевидным, для пользователей может отталкивать и вызывать сложности.

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

Интуитивно понятный интерфейс GoPlan. Надписи на вкладках дают понять пользователю содержимое раздела.

Отзывчивость

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

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

Во время загрузки Gmail отображается прогресс-бар.

Соответствие контексту

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

Таким образом, поработав с вашими элементами управления, пользователь привыкнет к ним и дальнейшая работа с вашим ресурсов будет для него «обыденным» делом.

Элементы управления MS Office, различные для каждого типа контента.

Привлекательность

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

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

Интерфейс Google Chrome.

Эффективность

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

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

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

Три самых часто выполняемых действий над фотографиями в Apple Iphone объединены в общий список с моментальным доступом.

Снисходительность

Никто и ничто не совершенно. Будьте готовы к тому, что пользователи будут делать ошибки при работе с вашим проектом. Это может происходить как по вашей вине, так и по вине пользователя. Вы должны грамотно обрабатывать все возможные ошибки — это будет одним из главных показателей качества вашего проекта. Не стоит наказывать пользователя — разработайте «снисходительный» интерфейс.

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

Мне нравится, как сделана страница 404 ошибки у Яндекса.

Случайно удалено важная информация в Gmail. Не проблема, можем отменить действие!

Заключение

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

С удовольствием выслушаю ваши комментарии по поводу этой статьи.

В рамках акции «Обмен постовыми»:

• Выполняем анализ оптимизации сайта.

Спонсоры поста:

• HANDGEN.RU — качественное размножение статей, более 95% уникальности;
• Студия Web++ — создание сайтов Волгоград, интернет реклама, продвижение в поисковых системах.

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

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

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

Как же стоит поступать?

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

Если ваш сайт посвящен компьютерной тематике, рекомендую писать статьи для Habrahabr.ru, полезнее аудитории в RUнете вы не найдете! Но будьте готовы к так называемому хабраэффекту — на ваш сайт в один момент будут переходить тысячи читателей этой социалки, важно, чтобы сервер выдержал эту нагрузку.

Спонсоры поста:

• HANDGEN.RU — качественное размножение статей, более 95% уникальности;
• Студия Web++ — создание сайтов Волгоград, интернет реклама, продвижение в поисковых системах.

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

I. Начнем работу с Adobe Photoshop:

1. Создадим новое изображение (Ctrl+N) небольшого размера, например: 300х200 пикселей, на белом фоне;
2. Воспользуемся инструментом Rounded Rectangle Tool (U). Поставим радиус округления углов Radius равным 10 пикселей, и управление размерностью добавляемого объекта Round Rectangle Options — Unconstrained
   
   Выберем какой-нибудь цвет для панели, например:  #74c44c 
   Используем данный инструмент на нашем холсте, затем нажмем правой кнопкой мыши в панели Слои (Layers) по названию появившегося слоя Shape 1 и выберем пункт Resterize Layer. В итоге должно получиться что-то похожее на изображение ниже:
   
3. Увеличим масштаб изображения до максимального (Ctrl++) и используя инструмент Crop Tool (C) выделим левый верхний угол нашей фигуры (Rounded Rectangle) как показано на рисунке
   
   Т.е. захватим только область где идет скругление углов, все что залито сплошным не попадет в зону выреза. Далее нажмем правой кнопкой мыши внутри выделенного прямоугольника и выберем пункт Crop, получим:
   
4. Сохраним полученное изображение в файл, для этого нажмем Ctrl+Shift+Alt+S или выберем пункт Save for Web (Сохранить для Веб) в меню File (Файл). В появившемся окне проделаем следующие настройки:
   1. GIF — формат в который будем сохранять изображение;
   2. Adaptive — режим коррекции цветом, в нашем случае является наилучшим;
   3. Параметры уменьшающие качество и четкость изображения (Dieter, Lossy, Web Snap) выключаем и ставим на минимум;
   4. Убираем галочку напротив Transparency (Прозрачность);
   5. Выберем количество цветов Colors так чтобы не было потери качества;
   6. Параметр Matte устанавливаем в значение none
   7. Далее нажимаем кнопку Save (Сохранить) и сохраняем изображение, например под именем: panel_top_left.gif
      
5. Проделаем пункты 3-4 с тремя оставшимися углами, в итоге получим набор изображений:
   1. panel_top_left.gif — левый верхний угол;
   2. panel_top_right.gif — правый верхний угол;
   3. panel_bottom_left.gif — левый нижний угол;
   4. panel_bottom_right.gif — правый нижний угол.

На этом работа с Adobe Photoshop закончена.

II. Далее действия могут производится в любом текстовом редакторе, например Notepad (Блокнот). Рекомендуем воспользоваться специализированным решением, например Adobe Dreamweaver, ActiveState Komodo Edit, PSPad и др.

1. Создадим html — документ (далее планируется что, читатель данной статьи обладает начальными знаниями HTML и CSS);
2. Добавим 4 вложенных друг в друга тега <div>

   <div><div><div><div>Hello World !</div></div></div></div>

3. Опишем для первого тега <div> класс и назовем его panel:

   .panel { background: #74c44c url(panel_top_left.gif) top left no-repeat; }

   Цвет фона следует задать только у первого (родителького) тега <div>;

4. Далее относительно родительского тега <div> опишем стили для всех вложенных тегов <div>:

   .panel div {
   	background: url(panel_top_right.gif) top right no-repeat;
   }
   .panel div div {
   	background: url(panel_bottom_left.gif) bottom left no-repeat;
   }
   .panel div div div {
   	background: url(panel_bottom_right.gif) bottom right no-repeat;
   }

   Т.е. для каждого тега <div> задаем в виде неповторяющегося фона ранее созданные изображения. Для первого тега <div> фоном будет изображение panel_top_left.gif, которое с помощью комбинации параметров top left свойства background разместим в верхнем левом углу. Изображение panel_top_right.gif, являющееся фоном первого вложенного тега <div> в тег <div> с классом panel с помощью комбинации параметров top right свойства background разместим в верхнем правом углу и т.д.

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

   .panel div div div {
   	background: url(panel_bottom_right.gif) bottom right no-repeat;
   	padding: 15px;
   	color: #fff;
   	text-align: center;
   }

6. Соберем теперь все это в один документ:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>Округлые уголки (CSS: Урок № 1)</title>
   <style type="text/css">
   .panel {
   	background: #74c44c url(panel_top_left.gif) top left no-repeat;
   	width: 200px;
   }
   .panel div {
   	background: url(panel_top_right.gif) top right no-repeat;
   }
   .panel div div {
   	background: url(panel_bottom_left.gif) bottom left no-repeat;
   }
   .panel div div div {
   	background: url(panel_bottom_right.gif) bottom right no-repeat;
   	padding: 15px;
   	color: #fff;
   	text-align: center;
   }
   </style>
   </head>
   <body>
   	<div class="panel">
   		<div>
   			<div>
   				<div>Hello World !</div>
   			</div>
   		</div>
   	</div>
   </body>
   </html>

   и получим результат:

   Hello World !
   Наша панель может изменять свои размеры, как в высоту, так и в ширину, при этом качество округления уголков не теряется
   Создавайте сайты так,
   чтобы они радовали глаз!

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

P.S.: Когда Все браузеры будут поддерживать CSS3, такой пример можно будет осуществить по средством одного тега <div> и одного CSS-класса к нему, т.к. будет существовать возможность задать сразу несколько фоновых рисунков для одного элемента.

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

Компания Web++ — создание сайтов Волгоград.

В этой статье мы рассмотрим несколько необычный способ создания текстуры дерева в Photoshop. Отличие его заключается в том, что часть работы выполняется в специально написанной мною программе «Wood Texture Generator», которая при помощи B-Spline'ов строит изображение похожее на древесную поверхность.

Сначала рассмотрим, что же такое «B-Spline» и каким образом мы будем применять его, чтобы получить текстуру дерева.

«B-Spline» — это плавная кривая, построенная минимум по 3-м точкам. Допустим, у нас есть набор точек вида (x,y): A(10,400), B(200,10), C(300,400), D(400,10), E(500,400). Соединим их последовательно прямой.

Теперь поверх изображения построим по этим точкам «B-Spline» (изображен красным цветом).

Как видим B-Spline'овая кривая проходит через середины отрезков и не касается вершин, поэтому требуется минимум 3 точки.

Создание текстуры дерева

Думаю, для понимания процесса, теории будет достаточно. Перейдем непосредственно к работе, запустим «Wood Texture Generator» и нажмем «Новая текстура» (Ctrl+N).

В результате мы получили изображение похожее на текстуру дерева, но такой результат нас не устраивает, попробуем получить более реалистичную картинку. Для этого уберем галочку с переключателя «Очищать» (Ctrl+C) и выберем более светлый оттенок коричневого в RGB-палитре «Цвет пера», немного уменьшим «y» — постоянный шаг по оси «Y» и «dy» — максимальное значение случайной величины, прибавляемой на каждом шаге к «y». Затем снова выполним команду «Новая текстура» (Ctrl+N).

Получилось уже что-то более похожее на текстуру дерева, но пока не совсем то, что хотелось бы. Сохраним это изображение в «bmp-файл», для этого нужно нажать «Сохранить изображение» (Ctrl+Shift+S). Затем откроем его в «Photoshop».

Чтобы повысить качество изображения, применим фильтр «Motion Blur».

В появившемся окне нужно установить значение угла движения «Angle» равным  0° и дистанцию «Distance» не более 20-ти, чтобы сохранить четкость изображения.

Далее сделаем темные линии прерывистыми, перейдем в «Filter Gallery».

В появившемся окне переходим к группе фильтров «Brush Stokes» и выбираем фильтр «Spatter». Установим ползунок «Spray Radius» в положение 1, а «Smoothness» — в положение 14.

Получим достаточно реалистичное изображение полированной древесной поверхности.

Экспериментируя с различными фильтрами «Photoshop» и параметрами Wood Texture Generator'а можно получать различные качественные деревянные текстуры.

Вы можете скачать «Wood Texture Generator» c нашего сайта. Программа распространяется бесплатно и не может продаваться. Авторские права принадлежат студии «Web++».

В программе «Wood Texture Generator» нет никакой «защиты от дурака», обработки исключений и методов оптимизации вычислений, поэтому если она зависнет при попытке открыть файл неправильного формата или при нехватке памяти в результате длительных вычислений, не нужно ругаться и писать, что программа не работает, значит вы сделали что-то неправильно. При малых значениях шага по «x» и по «y» процесс генерации текстуры может быть достаточно долгим, в некоторых случаях может показаться, что программа «не отвечает», не спешите сразу завершать процесс, подождите некоторое время, такие паузы связаны с большим объемом вычислений, т. к. на рисование минимального отрезка кривой необходимо 1000 интераций цикла.

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

Компания Web++ — создание сайтов Волгоград.

Последние 3 недели мы были заняты переработкой сайта нашей веб-студии. Кстати, за это время мы перешли на новую платформу разработки сайтов — Django Framework, функционирующую на языке Python, впечатлений масса! Думаю, ближайшее время найдем, что рассказать интересного об этом фреймворке.

Итак, подразумевалось, что на нашем новом сайте будет вестись корпоративный блог о жизни нашей веб-студии. Поэтому было решено перенести некоторые записи со старого блога (www.webpp.ru/blog/) на CODEISART.RU.

Со старого адреса будет происходить перенаправление с кодом 301 (301 редирект) на новые адреса, по мере их переноса.

Иногда было бы очень удобно перевести наиболее интересную статью из HTML формата в PDF для удобного хранения на компьютере.

Набрел на очень удобный сервис для этой цели — HTML to PDF Converter. Вам достаточно ввести адрес страницы и в считанные секунды откроется окно загрузки созданного PDF файла. Качество PDF вполне приемлемое!

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

В рамках акции «Обмен постовыми»:

• Оптимизация на лету! Сжимаем CSS и JS.
• Вопрос-Ответ: где взять новых посетителей?

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

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

Продвижение покупными ссылками

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

Отследить покупные ссылки достаточно просто. Биржи размещают ссылки на страницах сайта относительно их URL, если добавить любой параметр к адресу, например /?some_param=foo, содержимое страницы не изменится, за исключением покупных ссылок, они исчезнут, т.к. URL изменился.

Положительная сторона: продвижение покупными ссылками, как правило, дает более быструю отдачу, чем продвижение статьями, так как ссылки покупаются на страницах с уже присвоенным рейтингом. Заплатив определенную сумму, можно разместить ссылку на странице, скажем с PR 7, которая будет перекачивать ссылочный вес на ваш сайт. И скорее всего после ближайшего АПа вы уже почувствуете положительный результат.

Я не спорю, без покупки ссылок очень сложно продвинуть сайт в ТОП по ВЧ и некоторым СЧ, но что если часть бюджета, выделяемого на покупку ссылок тратить на размещение статей?

Продвижение статьями

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

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

Продвижение статьями достаточно дорогостоящий метод, написание одной статьи может обойтись от 3$ до 15$, написание 20 статей уже обойдется в 60$-300$, а их ведь еще нужно разместить на площадках. Значительно сократить бюджет на написание статей поможет услуга «Размножение статей», заказать которую вы можете у нас.

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

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

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

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

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

Единственная сложность продвижения статьями — поиск тематических площадок, некоторые я нахожу на форуме SE, но этого бывает мало. Поэтому большинство статей я размещаю через биржу Liex.Ru, которая является, на мой взгляд, наиболее удобной для этих целей!

Особенно мне нравится пакетная загрузка статей, это очень актуально в моем случае, т.к. после размножения статей получается несколько сотен и вручную их размещать очень сложно.

Так же в Liex.Ru имеется возможность создания фильтров. Фильтры предназначены для выборки площадок в соответствии с пользовательскими требованиями. Вы можете выбрать все площадки, возрастом более одного года, размещенные в DMOZ и ЯК, с PR=6 главной страницы и т.д. Опций довольно много.

Найти качественные тематические площадки можно установив опции «принимает только тематические статьи» и «жесткая модерация».

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

Работаю с Liex.ru уже довольно давно, да, конечно есть некоторые неудобства, но в целом она отвечает всем моим требованиям.

Заключение

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

В рамках акции «Обмен постовыми»:

• Как зависит тИЦ от тематики сайта?

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

• Limit Login Attempts: Плагин блокирует пользователя на 20 минут, если он ввел неправильный пароль 4 раза подряд (это значение может быть изменено). Хороший способ защиты от брутфорса.
• Sabre: если на вашем WordPress блоге открытая регистрация пользователей, то это может повлечь за собой автоматическое создание спам-аккаунтов. Как правило этим занимаются боты, а не человек персонально. Плагин Sabre создает защиту от автоматического создания спам-аккаунтов, путем размещения в форме регистрации каптчу или простой математический пример.
• Semisecure Login: увеличивает безопасность при авторизации пользователей, используя открытый ключ для шифрование пароля на клиентской стороне. Далее пароль расшифровывается закрытым ключем на сервере и происходит авторизация. Работает на JavaScript и PHP.
• Bad Behavior: проверяет IP-адрес пользователя в базе спам-адресов Project Honey Pot. Если IP присутствует в базе, доступ к вашему блоку с этого адреса блокируется.
• Secure WordPress: плагин прячет информацию о версии вашего Wodrpress, а так же установленных плагинах путем размещения в их директории пустых файлов index.php.

Все плагины совсемстимы с Wordpress 2.7!

Какие плагины используете вы для защиты своих блогов?

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

В рамках акции «Обмен постовыми»:

• Как организовать рекламу Вконтакте? Метод автоматизации рассылок.

В новых браузерах для перемещения по DOM-дереву появилась возможность использовать интерфейс «Element Traversal», который позволяет искать элементы, исключая текстовые узлы так, как это происходит в Internet Explorer, при использовании стандартных firstChild, lastChild, nextSibling и previousSibling, что увеличивает скорость поиска элементов.

В браузерах, поддерживающих «Element Traversal», доступны новые методы:

• firstElementChild — первый дочерний элементы;
• lastElementChild — последний дочерний элементы;
• nextElementSibling — следующий элементы;
• previousElementSibling — предыдущий элементы;
• childElementCount — количество дочерних элементов.

Эти методы работают с узлами, у которых nodeType == 1, например, метод childElementCount показывает не сколько всего дочерних узлов, а количество дочерних элементов, т. е. узлов с nodeType == 1.

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

Для начала проверим, поддерживает ли браузер интерфейс «Element Traversal»?

var traversal = typeof document
                           .createElement('div')
                               .childElementCount != 'undefined';

В итоге переменная traversal будет иметь значение true или false, опираясь на которое мы будем выбирать, какой из способов перемещения по DOM-дереву использовать.

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

var firstChild = traversal ? function(node) {
    // для новых браузеров достаточно
    // воспользоваться встроенным методом
    return node.firstElementChild;
} : function(node) {
    // для старых браузеров
    // находим первый дочерний узел
    node = node.firstChild;
    // ищем в цикле следующий узел,
    // пока не встретим элемент с nodeType == 1
    while(node && node.nodeType != 1) node = node.nextSibling;
    // возвращаем результат
    return node;
};

Рассмотрим простой пример использования:

XHTML

<div id="test">
    text node
    <div>First</div>
    text node
    <div>Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('test');
var text = firstChild(node).innerHTML;
alert(text); // → First

Аналогично будет выглядет функция lastChild:

var lastChild = traversal ? function(node) {
    return node.lastElementChild;
} : function(node) {
    node = node.lastChild;
    while(node && node.nodeType != 1) node = node.previousSibling;
    return node;
};

Используем:

text = lastChild(node).innerHTML;
alert(text); // → Last

Назовем функции поиска следующего и предыдущего элемента «next» и «previous» соответственно:

var next = traversal ? function(node) {
    return node.nextElementSibling;
} : function(node) {
    while(node = node.nextSibling) if(node.nodeType == 1) break;
    return node;
};
var previous = traversal ? function(node) {
    return node.previousElementSibling;
} : function(node) {
    while(node = node.previousSibling) if(node.nodeType == 1) break;
    return node;
};

И рассмотрим их работу на простеньком примере:

XHTML

<div>
    text node
    <div id="first">First</div>
    text node
    <div id="last">Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('first');
var text = next(node).innerHTML;
alert(text); // → Last
node = document.getElementById('last');
text = previous(node).innerHTML;
alert(text); // → First

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

Проверим, поддерживает ли браузер метод children?

var children = typeof document
                          .createElement('div')
                              .children != 'undefined';

И напишем функцию поиска:

var child = children ? function(node) {
    return node.children;
} : function(node) {
    var list = node.childNodes,
    length = list.length,
    i = -1,
    array = [];
    while(++i < length)
        if(list[i].nodeType == 1)
            array.push(list[i]);
    return array;
};

Ну и конечно рассмотрим работу на примере:

XHTML

<div id="test">
    text node
    <div>First</div>
    text node
    <div>Last</div>
    text node
</div>

JavaScript

var node = document.getElementById('test');
var count = child(node).length;
alert(count); // → 2

Все эти методы, но в более функциональном виде, используются в новых версиях JavaScript фреймворка js-core. А так же, для поиска всех дочерних элементов по имени CSS-класса, атрибутам или просто по имени тега, когда это возможно, используется «Selectors API», что позволяет добиться хороших результатов в тестах на производительность.

Кстати, Microsoft как всегда «радует», в Internet Explorer 8 RC1 синтаксис методов querySelector и querySelectorAll ограничен версией CSS2

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

В рамках акции «Обмен постовыми»:

• Молодой блог об IT — kSM’s blog.

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

Итак, первая статья, вводная, из цикла «Внутренняя оптимизация сайта», о необходимости предоставления администратору веб-ресурса возможности вручную редактировать мета-теги и тег заголовка страниц. Статья больше рассчитана на web-разработчиков, чем SEO-специалистов.

Внутренняя оптимизация сайта — вводная

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

Тег заголовка страницы <title>

Тег <title>, отображается поисковыми системами в выдаче как заголовок станицы.

<title>Карта Волгограда Интерактивный навигатор по городу Волгограду</title>

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

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

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

Главное не забывать, что мы работаем на увеличение целевой аудитории сайта, а воздействие на поисковую выдачу — средство достижения нашей цели!

Длину заголовка страницы рекомендую делать не более 7-ми слов.

Мета тег description

Следующий тег, заслуживающий внимания — мета тег description.

<meta name="description" content="VLG Navigator интернет-портал по городу Волгограду. Интерактивная Карта Волгограда, товары и услуги Волгограда." />

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

Важно! Распространенная ошибка среди веб-мастеров — одинаковые HTML-заголови и описание для всех страниц сайта. Этого необходимо избегать! Возьмите за правило, для каждой из страниц прописывать уникальные HTML-заголовки и информацию для мета тега description!

На этом вводная часть окончена.

На что обратить внимание при разработке?

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

Так как каждая новость будет представлена отдельной страницей на сайте, то необходимо определиться, что будет содержать тег заголовка <title> и мета тег description? В качестве HTML-заголовка страницы можно было бы взять название новости, но не всегда это практично, особенно если нет возможности добавить в название нужное количество ключевых слов, сохраняя естественность текста. Получается тупиковая ситуация, какой из нее можно найти выход?

Все очень просто, предоставьте администратору сайта возможность заполнять содержимое HTML-заголовка страницы <title>, а так же мета-тега description при создании новости.

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

Поля могут быть не обязательными для заполнения

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

Заключение

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

All in One SEO Pack — Wordpress плагин, предоставляющий возможность вручную редактировать мета-теги и тег заголовка.

Интересно почитать:

• Ответы на вопросы новичков от rotorweb.ru: Как вставить угловой flash-баннер на сайт.
• Веб-аналитика: инструменты отслеживания поведения пользователей.

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

Как работает

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

Атрибут public $cache_file определяет расположение файла кеша.

Атрибут public $cache_period отвечает за частоту обновления кеша. Указывается в секундах (3600 соответствует 1 часу). Если значение равно 0, кеш игнорируется.

Все остальное, думаю, понятно. Если есть вопросы, задавайте.

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

Скомпонованный код

class GetLastTwitt{

    public $cache_file = './last_twitt.txt';
    public $cache_period = 3600;

    private $username;
    private $dom;

    function __construct($username){
        $this->username = $username;
    }

    private function setEnv(){
        $feed_url = 'http://twitter.com/statuses/user_timeline/'.$this->username.'.rss';

        $this->dom = new DOMDocument();
        $this->dom->load($feed_url);
    }

    private function returnLastTwitt (){
        if ($this->cache_period != 0)
            if (file_exists($this->cache_file))
                if ($this->cache_period > $this->getCacheDateDiff())
                    return $this->getLastFromCache();

        return $this->getLastFromWeb($this->username);
    }

    private function getLastFromWeb($username){
        $this->setEnv();
        $rows = $this->dom->getElementsByTagName('item');
        $last_twitt = $rows->item(0)->getElementsByTagName('title')->item(0)->nodeValue;
        $this->cache_twitt($last_twitt);
        return $last_twitt;
    }

    private function cache_twitt($msg){
        $handle = fopen($this->cache_file,'w');
        fwrite($handle, $msg);
        fclose($handle);
    }

    private function getCacheDateDiff(){
        return date('U') — filemtime($this->cache_file);
    }

    private function getLastFromCache(){
        $handle = fopen($this->cache_file,'r');
        $cached_twitt = fread($handle, filesize($this->cache_file));
        fclose($handle);
        return $cached_twitt;
    }

    final function getLast(){
        return $this->returnLastTwitt();
    }

}

$a = new GetLastTwitt('skaizer');
echo $a->getLast();

Скомпонованный готовый скрипт можно скачать здесь.

У вас есть Twitter аккаунт?
Если да, можете подписаться на мой микроблог, а я, в свою очередь, подпишусь на ваш.

Сегодня, в Интернет необычайно популярным сервисом стал Twitter — микроблоггинг. Что это такое?

Зарегистрировавшись в Twitter, вы можете оставлять сообщения длиною не более 140 символов. Но встает вопрос, кому оно надо? Что мешает завести себе обычный блог на бесплатном хостинге и писать туда полноценные посты? Давайте разберемся!

Представим ситуацию, вы занимаетесь веб-серфингом, и вдруг наткнулись на крайне интересный материал. Вы хотите рассказать о нем своим друзьям/читателям, но писать в автономный блог статью с кратким описанием ссылки — как-то не серьезно. Можно собрать несколько подобных ссылок и выложить полноценную подборку, но это потребует дополнительных усилий и времени, а вам нужно, чтобы друзья/читатели узнали о материале прямо сейчас. Вот тут вам и поможет Twitter! Вы выкладываете мини-пост у себя в микроблоге со ссылкой на материал, и он публикуется автоматически на домашних страничках всех аккаунтах, которые следят за изменениями вашего микроблога. Достаточно удобно! Конечно, это далеко не главная его «фишка», уверен, что каждый находит в нем свою изюминку.

Twitter имеет социальную направленность — работает с людьми, дает возможность им общаться друг с другом, делиться полезной информацией, так почему бы не воспользоваться им в целях рекламы?

Многие пользователи имеют у себя в follower’ах (читателях) более 100 человек, это значит, что каждый опубликованный пост прочитают более 100 раз. А если в посте размещена ссылка или рекламная информация? Скорее всего, большинство пользователей перейдет по ссылке, и рекламодатель получит на свой сайт дополнительный трафик, возможно, некоторые из перешедших станут постоянными посетителями.

Как использовать Twitter в рекламных целях?

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

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

Как увеличить количество follower’ов?

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

PR-менеджер компании по продвижению сайтов с удовольствием закажет размещение рекламных ссылок в вашем микроблоге, если будет видеть тематичность вашего Twitter-аккаунта!

Если вы имеете собственный сайт, то можете в информации о себе разместить ссылку на ваш Twitter-аккаунт.

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

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

У вас есть Twitter аккаунт? Если да, можете подписаться на мой микроблог, а я, в свою очередь, подпишусь на ваш. С каждым днем Twitter нравится все больше и больше!

Интересно почитать:

• Вы дизайнер, работаете в Photoshop? Прочитайте статью о том, как автоматизировать рутинную работу в Photoshop.
• Используете Twitter? TwitterFox — Firefox плагин для удобной работы с твиттером.

На одном из зарубежных форумов был поднят этот вопрос. Мнения разделились.

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

У меня несколько иная точка зрения.

Лично мое мнение, что SEO перешло на более качественный уровень. Да, сегодня, как и раньше необходим качественный контент на сайте, валидный HTML код, жирные ссылки, внутренняя перелинковка и так далее. Но все-таки, чем отличается SEO сегодня от SEO, которое было 2 года назад?

Порывшись в голове, я могу выделить следующее:

• Сегодня в большинстве случаев «голого» SEO не достаточно. Да, вы можете вывести сайт на первые позиции поисковика, но как заставить людей покупать? Помимо вывода в ТОП необходимо грамотно разработать целевые страницы, разместить на них контент, который подвигнет посетителя превратиться в вашего покупателя. Клиенты SEO-специалистов все больше и больше начинают понимать, что тупо вывести в ТОП сайт в большинстве случаев недостаточно. Я не говорю, что 2 года назад это было не актуально, просто уделялось гораздо меньше внимания.

• SEO теряет самостоятельность. Лично я рассматриваю SEO лишь как часть кампании по продвижению бизнеса в Интернет. Быстрых результатов можно достичь, работая с системами контекстной рекламы. Наши заказчики начинают понимать, что выделяя бюджет в контекстную рекламу можно моментально добиться положительного результата. В этом, на мой взгляд, заслуга Яндекса, который проводит много открытых семинаров, посвященных контекстной рекламе.

  Так же качественных посетителей на сайт можно привлечь через рекламу в социальных сетях, которые с каждым днем становятся все популярнее!

  Я хочу сказать, что помимо SEO существует масса эффективных методов продвижения в Интернет, и SEO является неотъемлемой частью этой кампании.

• SEO’шники стали меньше внимания уделять мета-тегам, хотя иногда встречаются «оптимизаторы», ломающие голову, что же вписать в мета тег keywords,полагая, что это принесет им лишние позиции в поисковике.
• Google PageRank стал не основной целью. Раньше показателем авторитетности сайта уверено считали PR. И была существовало твердое мнение, что чем выше PR, тем выше сайт будет в выдаче. На сегодняшний день практически всем понятно, что тот PR, который показывает нам Google Toolbar практически никак не влияет на выдачу поисковика.
• Больше внимания стали уделять качеству ссылок, а не количеству. Сегодня более важно получить несколько качественных, «жирных» ссылок, чем сотни ссылок с гавносайтов.
• Каталоги сайтов не действуют, а если действуют, то минимально. Регистрация в VIP базах из 15000 каталогов сыграет минимальную роль. Чтобы не говорили, но по своему опыту знаю, что от регистрации в каталогах можно получить минимальный эффект. Рекомендую прогонять каталогами НЧ-запросы.
• Поисковики ведут активную борьбу с дублями. Вообще меня крайне интересна эта тема, я изучил много англоязычных статей посвященных алгоритмам поиска нечетких дубликатов текста и их актуальность в поисковых системах. Поисковики стараются не учитывать в алгоритмах ранжирования ссылки со страниц, являющимися дублями или почти дублями какой-либо другой страницы. Поэтому написав статью опубликовав ее на 100 площадках вы впустую выкинете деньги. Но правда существует способ «обмануть» поисковик с помощью размножения статей, заказать данную услугу можете у нас.

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

У вас есть Twitter аккаунт? Если да, можете стать моими follower’ами, а я, в свою очередь, вашим.

В рамках акции «Обмен постовыми»:

• Участник конкурса Линкомаулия от Даниила Маула: Линкомаулия Anfi.