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

Захотелось мне у себя в уютной админке наблюдать за апдейтами поисковых систем. Конечно, можно каждый раз заходить на какой-либо seo сервис и смотреть их.  Но зачем себя утруждать? Поэтому…

Version: 1.0

Author: Валерий Заочный

Представляю вам плагин для административной панели wordpress — Update Stat. Единственная его задача — отображение статистики апдейтов в удобном виде. Данные берутся с одного хорошего seo сервиса — Seolib. Так же, плагин предоставляет море настроек, где вы можете полностью настроить его под себя, а именно указать количество дней, за которые будет показываться статистика Установка плагина ничем не отличается от остальных, копируем файлы в папку wp-content/plugins, либо устанавливаем из админки, используя название плагина для поиска, и активируем.

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

Ссылка на скачивание — Update Stat

Представим что вам понадобилось модальное окно на вашем сайте. Например, чтобы посетитель перед принятием какого-либо решения еще раз подумал. Конечное в этом нам поможет javascript. Если вы уже используете jquery в вашем проекте, то вы можете поискать плагин для этого, но можно сделать это и обычным джаваскриптом.

Итак, как мы это сделаем.

• Создаем div с шириной и высотой 100%, дабы он занимал собой все окно. Абсолютно позиционируем его,  от левого края — 0.  Изначально скрываем его, т.к. нужен он нам будет только при создании нашего модального окна.  Z-index выставьте самым большим по сравнению с остальными элементами, у которых он установлен. Если хотите, чтобы при всплывании вашего окна остальная часть страницы затемнялась, пихаем в фон полупрозрачный png.  Использовать opacity и filter: alpha не получиться, т.к. тогда полупрозрачным станет и ваше модальное окно, что нам совсем не нужно.

• Создаем div, который и будет, собственно, нашим окном. У меня это будет аналог стандартного confirm. Устанавливаем нужную ширину и высоту, абсолютное позиционирование, top: 50% и left: 50%, margin-top и margin-left установите равными минус половине высоты и ширины соответственно, для того, чтобы окно расположилось точно посредине окна. Z-index сделайте больше чем у контейнера, остальное на ваш вкус.

•  Далее, собственно, заполняете свой див разными вкусностями, ради которых вы и взялись создавать это окно. Я дополню лишь кнопкой «закрыть», которую мы поместим на ее законное место — справа вверху.  Это будет div с оригинальным названием класса «close» , тайтлом «Закрыть» для тех, кто в танке, и обработчиком клика

• 1	onClick='closeMyWindow()'

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

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

  1	<a onclick="deleteImage()">Удалить</a>

  Итак, наша функция. Берем по id наш первый див-контейнер, делаем его видимым. С помощью функции getBodyScrollTop() вычисляем на сколько проскролена страница и указываем данное значение свойству top нашего контейнера. Далее блокируем прокрутку страницы.

•  Нам осталось описать функцию closeMyWindow().  Она убирает с экрана наше модальное окно и возвращает нам возможность скролить нашу страницу

Ну и собственно результат проделанной работы:

Всем до новых встреч, удачи!

По данным liveinternet, в среднем,  за прошедшую неделю через седьмой ie зашли в интернет 1,919,707 человек. Почти 2 миллиона это конечное много, но это всего лишь 2,4% из всех пользователей рунета.

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

Хотя Microsoft еще и поддерживает ie7, но они уже прекратили поддержку Windows xp, а vista, в которой седьмой эксплорер стоял по умолчанию, не достигла больших результатов.

Итак,  что же нам даст отказ от ie7:

• сможем забыть о ужасном  hasLayout
• нормальная ширина элементов
• нормальное использование свойства  inherit
• относительно нормальное использование filter в остальных ie
• использование window.postMessage
• нормальное использование свойств и атрибутов при работе с DOM
• и еще много разных прелестей + может нервы будут не так сдавать у кого-то

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

На этом все, надеюсь, что я дал вам пищу для размышлений

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

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

 Окей. Переходим к настройкам приложения.

• Название приложения: — ну тут все ясно, один лишь нюанс — это название будет заголовком вашего таба, и если вы хотите, чтобы при заходе на вашу страницу посетители сразу попадали на неё, целесообразно её назвать как-то подобающе. У меня это «Приветствие».
• Пространство имён: — (перевод просто мего) — короткая ссылка вашего приложения. apps.facebook.com/moe-mego-prologenie или apps.facebook.com/my-wonderful-app.

Дальше смотрим по обстоятельствам. Так как наше приложение iFrame, у нас есть 2 пути. Создаем на своем сайте поддомен и размещаем файлы приложения на своем хостинге. Либо воспользуемся услугой , которую нам предлагает сам Facebook — облачный хостинг Heroku. Для этого смело нажимаем кнопочку «Get Started»

Выбираем язык, на котором мы все это дело будем ваять, пишем свое мыло и вперед. Вас перебросит на сайт heroku, где вам нужно будет зарегистрироваться. Далее вам на почту придет письмо с ссылками на скачивание средства разработки (на самом деле громкое название). Есть версии под вин, мак и линукс. Инсталите его и вот тут начинается веселуха. Если вы никогда не работали в консоли — будете привыкать Итак, открываем пуск-выполнить-cmd, ctrl+пробел и ввести слово терминал на маке, приложения-стандартные-терминал в убунту.
Вводим

Далее по запросу вводим мыло и пароль. Далее

- вместо

вводите название своего приложения, его можно узнать на сайте heroku.com в разделе «My Apps».

У нас создалась папочка с названием нашего приложения в папке пользователя (в винде это C:\Users\Zilker, например).

В консоли переходим в эту папку -

Супер, часть квеста успешно выполнена, если в терминале вы увидите что-то типа  C:\Users\Zilker\furious-robot-218>.

Давайте посмотрим, что мы с вами сделали — мы залогинились в heroku, скопировали к себе на компьютер файлы нашего приложения и перешли в папку с ним. Ну что ж, очень неплохо. Теперь займемся вещами более знакомыми. Заходим в папку с нашим приложением, ищем файл index.php (если вы выбирали php, как язык создания приложения) и открываем его на редактирование. Можем смело удалять все, что там написано и пишем наш Hello World:

Сохраняем файл и идем в консоль:

Тем самым пересобирая наше приложение. Далее отсылаем его обратно в heroku:

Возвращаемся к нашим настройкам приложения на Facebook. В соответствующие поля вписываем адрес нашего приложения

Сохраняемся. Добавляем приложение на страницу, пройдя по ссылке https://www.facebook.com/add.php?api_key=App ID&pages, где вместо App ID вам нужно ввести ID вашего приложения. В диалоговом окне выбираете страницу, на которую необходимо добавить приложение и вуаля. На вашей странице должна появиться новая вкладка, отображающая ваше творение в index.php. Если вы хотите, чтобы данная вкладка отображалась по умолчанию, в настройках страницы в Управлении разрешениями выставьте её основной вкладкой.

Вот в принципе и все на сегодня. Осталась одна деталь. При верстке вашего приложения вам наверняка будет необходимо добавлять новые файлы. Их нужно добавлять в проект отдельно. Рассмотрим пример. Вам нужно создать файл стилей. В index.php подключаем его стандартно:

Далее запихиваем его в проект:

Ну а далее пересобираем проект и отправляем опять в heroku.

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

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

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

Произошла эта история в конце моего 11-го класса. Время, когда нужно было усиленно готовиться к поступлению в университет. Но нам, почему-то, этого делать совсем не хотелось. Тогда в нашей кампании появилась одна не совсем хорошая традиция — игра в азартные игры . А именно, мы собирались у кого-нибудь дома и играли в карты на желания. Причем желания были не сиюминутные, на их исполнение давалось несколько дней. За вечер игралось определенное количество партий, в результате которых определялся проигравший. Дальше становилось интересней. Ребята спрашивали хлеб в аптеке, искренне удивляясь его отсутствию, покупали презервативы с запахом клубнички, обязательно уточняя у продавщицы, не пробовала ли она их, заходили посреди урока в класс, уточнить у учителя, не знает ли он, почем в Одессе рубероид и тд. и т.п. В общем, мы просто развлекались, жестокими наши желания не были, глупыми — возможно .
Особенно доставалось от наших забав учителю физики. В особенности от меня, т.к. мне пришлось 2 раза исполнять желание на её уроке, благо она понимала нас (жаль только на оценках это не отражалось, ибо учитель была старой закалки и довольно строгой). В первый раз я просидел весь урок со шваброй в руке. Писать было неудобно не только из-за нее — на дворе была зима, довольно холодно, и нам приходилось сидеть в верхней одежде. Отвечать к доске мне пришлось выйти так же с ней, еще очень повезло, что пропажу швабры не обнаружили технички. На второй раз мне необходимо было провести урок физики в …юбке. Правила гласили, что за невыполнение проигравшим желания, ему необходимо будет выполнить 2 новых задания, что мне не совсем импонировало . Было решено опоздать немного на урок, дабы меня смогли лицезреть в полной красе наши одноклассники вместе с учителем. Войдя в класс, я конечное произвел фурор, однако вскоре смех приутих — как я уже говорил, был конец учебного года и учитель решила сделать нам какой-то важный тест по физике. Я и так не сильно дружил с этим предметом, а тут ещё и такая комическая ситуация. На удивление, тест я написал на 12 баллов. После этого мы смеялись, что вступительные экзамены мне необходимо писать исключительно в юбке .

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

Отдельное спасибо спонсорам конкурса:
MarkDay.ru — сообщество оптимизаторов, вебмастеров и манимейкеров.
Шелвин — блоггер и создатель сайтов для людей.

Закончил учебу в академии, диплом на руках, есть немного свободного времени до сессии в университете. На блоге обновился дизайн и отчасти функционал — про это напишу отдельный пост, т.к. новая тема собрана при помощи html 5, использовалась seo верстка, в итоге получилась кроссбраузерная и валидная тема для wordcodess.

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

Для начала идем на www.hivext.ru. Это сервис облачного хранения ваших приложений. Мы с вами еще обязательно поговорим о нём, т.к. сервис действительно заслуживает внимания.  Пройдите несложную регистрацию на сайте —  вот вы и разработчик! На бесплатной квоте вам доступно 1гБ места на диске и неограниченное процессорное время, а так же неограниченный входящий/исходящий трафик. Довольно неплохо для небольших приложений, плюс можно снять нагрузку с сервера. Итак, после регистрации на вкладке ‘Старт’ зайдите в магазин решений, выберите Vkontakte Iframe, снизу пункт ‘клонировать’. На панели ‘Приложения’ слева появиться ваше только что клонированное приложение. Разворачиваем его до папки ‘public_html’. Вы наверняка встречали такую папочку на каком-нибудь хостинге.  Открываем файл index.html, удаляем все оттуда и вставляем:

Далее открываем twitter.com. Идем в настройки аккаунта, вкладка ‘профиль’, под полем ‘Сайт’ жмем на (Вы также можете добавить Твиттер на свой сайт). Выбираем ‘виджеты — ‘для веб-сайта’ — ‘виджет Профиль’.  Настройки там несложные, подстраивайте виджет под себя, единственное условие — чтобы ваш виджет корректно отображался, на вкладке ‘размеры’ выставьте ширину 200. Так же желательно убрать галочки с ‘Включать полосу прокрутки? ‘ и ‘Показывать аватар?’. Завершаем настройку кнопкой ‘завершить и получить код’.  Полученный код вставьте между тегами

и

.

На этом настройка на стороне сервера закончена. Далее мы идем на vkontakte.ru/developers.php и выбираем ‘создать приложение’.  Вводим название и описание, выбираем категорию и жмем ‘Перейти к загрузке приложения’. Вам на телефон придет смс с кодом подтверждения, который нужно будет ввести в предложенную форму. Остались последние штрихи — поставьте галочку ‘Приложение можно встраивать в публичные страницы’, в адрес Iframe введите системный адрес приложения hivext. Найти его можно кликнув правой кнопкой мыши на названии вашего приложения, выбрав пункт настройки. Далее в типе приложения переключите на Iframe и выставите размеры фрейма, такие как вы выбрали при создания виджета на твиттере.  Нажмите ‘сохранить изменения’.

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

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

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

Приведу еще одну аналогию, которая объяснит название поста. Теперь вы доктор. В белом халатике такой, со стетоскопом. Можете возомнить себя Хаусом . Берясь за лечение (читайте продвижение) больного, вы, как опытный врач, должны начать с истории болезни. Посмотреть, от чего, как и чем лечился пациент раньше, мало ли, может с ним общался неопытный оптимизатор, тьфу, врач (интерн какой-то, начитавшийся мануалов). Далее проведите тщательный осмотр (читайте аудит). Составьте для себя план по достижению цели и действуйте. Попутно объясняя человеку, что нельзя лечиться самому (пойдет в сапу и накупит ссылок на 300$ одноразово). Будьте готовы к фразам типа «жена соседа моего племянника лечилась тем-то тем-то, может и мне поможет?». Объясните, что все организмы разные (читайте сайты) и то, что непременно поможет одному, может никак не повлиять на другого, а еще хуже — только навредит.

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

Набрел вчера на интересный сайтец — itquiz.ru. Сразу подумал — как часто я использую валидаторы и нужны ли они вообще? Конечное по этому поводу бытует много мнений, можно прислушиваться к советам авторитетных для вас людей, но вопрос остается — стоит ли?
Конечное никто за вами не приедет и не оштрафует за то, что ваш код не валиден, а ваше веб приложение как работало, так и будет работать (конечно если оно кроссбраузерно . Вспомните ситуации, когда при верстке супермегоачуменного сайта сидишь и думаешь: «У друга(знакомого, какого-то великого верстальщика…) так работает, а у меня нет!!!». Возможно проблема в тех заветных верхних строчках вашего кода? Да-да, именно с этого -

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

Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (decodecated).

Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

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

именно! Как говорится краткость — сестра таланта. Собственно консорциум обещает присвоить статус «candidate recommendation» в 2012 году, однако никто не запрещает использовать уже сейчас html5, тем более что почти все современные браузеры его поддерживают (включая любимый всеми ie в версии 9). Совсем скоро я собираюсь поделиться с вами опытом с новым хатеэмелем
Ну и в заключение собственно ссылочка — Тест на знание стандартов , где вы можете проверить свои знания веб стандартов. После прохождения простого теста, вам будет предложено пройти регистрацию и попытаться пройти сложный тест, за успешное выполнение которого, кстати, можно получить призы Удачи, и до новых встреч на страницах этого блога!