Optimizator Field – блог веб разработчика » Веб-разработка

Уязвимость в WordPress темах

YoYurec — Tue, 09 Aug 2011 08:29:59 +0000

Входящая во многие wordpress темы утилита для изменения размера изображений timthumb.php, уязвима к загрузке произвольного PHP-кода.

В конфиге скрипта лежат несколько доменов (flickr.com, picasa.com, blogger.com, wordpress.com, img.youtube.com, upload.wikimedia.org, photobucket.com) с которого ему разрешено загружать изображения.

Из-за недостаточной проверки передаваемых параметров существует возможность загрузить веб-шелл на сервер используя список доверенных доменов для создания поддоменов с такими же названиями. Т.е. timthumb.php считает ссылку blogger.com.hackersite.com/webshell.php легитимной и позволяет загрузить скрипт на сервер.

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

Пропатченный timthumb.php

(via habrahabr)

UPDATE: уже появилась и реализация этой «дыры» с использованием superpuperdomain.com
Как лечить последствия – PHPRemoteView Hack: What it is, and how to remove it.

Похожие статьи:

CCK компоненты для Joomla – K2 и ZOO. Cравнение

YoYurec — Wed, 03 Aug 2011 11:34:20 +0000

Нет похожих статей.

6 бесплатных инструментов для создания мобильной версии сайта

YoYurec — Thu, 08 Apr 2010 21:08:24 +0000

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

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

1. Mippin

Mippin – фантастический инструмент, если у вашего сайта есть RSS канал. Быстро и удобно с помощью пошагового мастера можно создать прекрасный сайт. Самое приятное, что он будет оптимизирован под более чем 2000 устройств. И всё это абсолютно бесплатно! В дополнение сервис предоставляет простые статистические отчёты и возможность подзаработать, вставляя рекламу.

2. Mobilize от Mippin

Mobilize by Mippin – это потрясающий плагин для WordPress, который автоматически адаптирует ваш блог для пользователей, зашедших с мобильного по обычному URL! После установки все посетители с мобильных устройств будут автоматически перенаправлены на специальную версию – фотографии будут масштабированы до необходимых размеров экрана, а видео будет сконвертировано в общепринятый мобильный формат .3gp.

3. Mobify

Бесспорно лучший в своём роде! Позволяет с лёгкостью создать мобильную версию любого динамического сайта всего за несколько кликов. После молниеносной регистрации в визуальном редакторе указываете необходимые блоки странички и получаете готовую версию по адресу http://ваше_имя.mobify.me (http://yoyurec.mobify.me/). Далее нужно настроить перенаправление посетителей вашего сайта на этот адрес, установив javascript код или плагин на WordPress / Drupal.

В бесплатной версии сервис оптимизирует стили, картинки и медиафайлы под 5000 устройств и позволяет разместить готовый проект на отдельном домене (например, m.yoursite.com). Плюс ко всему можно интегрировать с Google Adsense, Google Analytics и Google Maps. Не сервис, а просто сказка!

4. Wirenode (бесплатен пакет «basic»)

Более 30000 сайтов было оптимизировано для мобильных с помощью очередного сервиса с названием Wirenode. Инструмент позволяет настраивать внешний вид гораздо гибче, нежели вышеупомянутый Mippin. Из панели управления пользователь может указать свой домен, загружать изображения, отслеживать посещаемость и просмотры страниц. Естественно есть просмотр мобильной версии сайта на эмуляторе. Кроме этого простой редактор позволит вам персонализировать сайт – настроить цвета, добавить картинки и создавать\редактировать\удалять дополнительные странички.

5. Osmobi

Сервис предоставляет возможность «мобилизировать» ваш сайт, если он на движке CSM Joomla! или Drupal с помощью специального модуля. В бесплатной версии посетители будет перенаправляться на аккаунт в Osmobi, на котором есть ограничение в 150 просмотров ли 100 MB в день.

6. Оптимизатор от Google

Google Mobile Optimizer самый быстрый и простой способ трансформировать ваш сайт для просмотра на мобильном. Не то чтобы он позволит что-то настроить, просто получите упрощённую страничку без шапки, рекламы… Достаточно перейти по адресу http://google.com/gwt/n, и ввести URL необходимого сайта.

Статья написана по материалам «10 Great Tools to Create a Mobile Version of Your Site», переделана (платные + ужасно допотопные сервисы были выкинуты) и дополнена.

Похожие статьи:

WordPress: добавляем в комментарии ссылку на Twitter

YoYurec — Wed, 17 Mar 2010 03:37:00 +0000

Твиттер очень популярен! И это уже ни для кого не секрет. Растёт и количество способов интеграции этого сервиса с блогами.

Есть много потенциальных мест у wordpress, куда можно «прикрутить» его функциональность:

это трекбеки от людей, которые упоминали ссылку на вашу статью
это и банальные кнопки-счётчики фолловеров и ссылки на профили twitter’а
всевозможные виджеты со списком ваших последних твитов
это, конечно же, и кнопки Tweetmeme (или Topsy) в каждой статье
автоматические кросспосты анонсов статей при обновлении вашего блога
это одна из кнопок социльных сетей – «добавь в закладки»

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

Вы в комментариях читателей размещаете ссылку (dofollow или нет, ваше личное дело) на их твиттер – они в ответ активнее пишут отзывы к статьям. Затрат по времени минимум, а в выигрыше обе стороны.

Думаю, подобное вы уже видели – так давайте добавим эту фишку и себе! Чем мы хуже? ))

Требуется всего лишь вставить в форму добавления новое поле ввода…

…сохранить его значение и потом красиво оформить и вывести рядом с текстом комментария. Вуаля!

Так как люди мы ленивые (хотя пришлось напильником немного пройтись), то воспользуемся плагином TwitterLink Comments. Настройки там несложные. Тем более есть русский перевод )))

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

Если возникли вопросы – задавайте!

Похожие статьи:

На заметку: кроссбраузерный CSS display: inline-block

YoYurec — Sun, 14 Mar 2010 22:57:55 +0000

Очень полезная вещь, особенно при вёрстке всевозможных кнопок. Вешаем на нужный блок класс inline:

.inline {
	display: -moz-inline-stack; /* FF2 */
	display: inline-block; /* good browsers */
}
 
*html .inline {
	overflow: hidden;
	zoom: 1;
	display: inline;
/* IE6 */}
 
*+html .inline {
	display: inline;
/* IE7 */}

Похожие статьи:

Непростое CSS меню с использованием спрайтов

YoYurec — Fri, 26 Feb 2010 00:02:49 +0000

Всем привет! Снова с вами я, а значит настало время очередной заметки. Ударимся немного в трудовые будни создания сайтов, а точнее горизонтального меню. Но не простого, а… нет, не золотого :) Просто немного нестандартного.

Все вы, надеюсь, вдоволь начитались и наделали css меню с использованием спрайтов (объяснять не вижу смысла, есть много материла на данную тематику – «CSS Sprites: все, что вы знали, но боялись спросить»).

Техника до ужаса проста – делаем список, на фон ссылки стилями вешаем картинку, по :hover смещаем фон…

Создавал десятки простых меню (с прямыми границами) и я…
К примеру такое:

Но однажды попалось с диагональными:

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

Не пинайте за код (хотя всё в нём ОК) – главное идея! ))

Начнём с xhtml кода меню. Обычный список, у каждой ссылки уникальный id, т.к. меню полностью графическое:

<ul id="menu">
	<li><a href="#" id="menu-home" class="hide">Home</a></li>
	<li><a href="#" id="menu-incentives" class="hide">Federal Incentives</a></li>
	<li><a href="#" id="menu-approach" class="hide">Personal Approach</a></li>
	<li><a href="#" id="menu-solutions" class="hide current">Custom Solutions</a></li>
	<li><a href="#" id="menu-opportunities" class="hide">Partnership Opportunities</a></li>
	<li><a href="#" id="menu-contacts" class="hide">Contact Us</a></li>
</ul>

Создадим также css спрайт:

И стили для данного меню:

.hide {text-indent:-9999px; overflow:hidden; zoom:1; display:block;}
 
#menu {width:990px; margin:0; padding:0;overflow:hidden; zoom:1;}
 
	#menu li {list-style-type:none; display:inline; margin:0; padding:0;}
 
		#menu li a {float:left;height:30px;background: #145395 url(../img/menu.png) no-repeat 0 0;}
 
		#menu a#menu-home {width:97px;background-position:0 0;}
		#menu a#menu-home:hover, #menu .prev a#menu-home:hover, #menu a#menu-home.current {background-position:0 -30px;}
		#menu .prev a#menu-home {background-position:0 -60px;}
 
		#menu a#menu-incentives {width:174px;background-position:-97px 0;}
		#menu a#menu-incentives:hover, #menu .prev a#menu-incentives:hover, #menu a#menu-incentives.current {background-position:-97px -60px;}
		#menu .prev a#menu-incentives {background-position:-97px -90px;}
 
		#menu a#menu-approach {width:174px;background-position:-271px 0;}
		#menu a#menu-approach:hover, #menu .prev a#menu-approach:hover, #menu a#menu-approach.current {background-position:-271px -90px;}
		#menu .prev a#menu-approach {background-position:-271px -120px;}
 
		#menu a#menu-solutions {width:186px;background-position:-445px 0;}
		#menu a#menu-solutions:hover, #menu .prev a#menu-solutions:hover, #menu a#menu-solutions.current {background-position:-445px -120px;}
		#menu .prev a#menu-solutions {background-position:-445px -150px;}
 
		#menu a#menu-opportunities {width:220px;background-position:-631px 0;}
		#menu a#menu-opportunities:hover, #menu .prev a#menu-opportunitie:hover, #menu a#menu-opportunities.current {background-position:-631px -150px;}
		#menu .prev a#menu-opportunities {background-position:-631px -180px;}
 
		#menu a#menu-contacts {width:139px;background-position:-851px 0;}
		#menu a#menu-contacts:hover, #menu .prev a#menu-contacts:hover, #menu a#menu-contacts.current {background-position:-851px -180px;}

Но у автора вышеупомянутой статьи была ситуация проще – только один край кнопки скошен. У нас же – оба. Получается, что кроме указания фона активному пункту (он жёстко прописан у текущей страницы – класс «current»), нужно ещё позаботиться и о предыдущем (класс «prev» – навесим на li, т.к. IE6 не любит много классов на одном элементе):

Далее задача наша сводится нескольким пунктам (js код ниже):

запомнить текущий активный пункт (2)
при наведении курсора на пункт меню (4) убрать все классы (6)
на предыдущий пункт навесить класс «prev» (7)
при убирании курсора (9) убрать клас «prev» (10)
вернуть активный пункт меню к первоначальному состоянию (11)

Обратимся за помощью к javascript, а точнее к jquery – благо, данную библиотеку использую почти на всех проектах:

$(document).ready(function() {
	var $current = $('#menu .current');
	$current.parent().prev().addClass('prev');
	$('#menu a').hover(
		function() {
			$(this).parent().parent().find('li').removeClass('prev').find('a').removeClass('current');
			$(this).parent().prev().addClass('prev');
		},
		function() {
			$(this).parent().prev().removeClass('prev');
			$($current).addClass('current').parent().prev().addClass('prev');
		}
	);
});

В итоге всё заработает, можете посмотреть демо1.

Можно даже немного пошаманить со картинкой-спрайтом, упростив её!

Смотрим демо2.

PS: и без js тоже вполне приемлимо… и без… Но об этом в следующий раз. Удачи!

Похожие статьи:

10 юзабилити преступлений, которых вы не должны совершать

YoYurec — Tue, 01 Dec 2009 05:54:40 +0000

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

Преступление #1: В формах метки не связаны с полями ввода

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

Преступление #2: Логотип не ведёт на главную страницу

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

Преступление #3: Не помечены посещённые ссылки

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

Преступление #4: Не подсвечено в форме активное поле

Используйте псевдо-класс «:focus» для добавления к полям ввода рамки или смены фона.

Преступление #5: Изображения без описания

В атрибуте «alt» укажите описание изображения. А если картинка носит оформительно-декоративный характер, то оставьте его пустым (но не удаляйте!). Если же это кнопка-ссылка, то укажите в описании куда она ведёт.

Преступление #6: Фоновые изображения без фонового цвета

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

Преступление #7: Использование длинных скучных абзацев текста

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

Преступление #8: Подчёркивание того, что не является ссылкой

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

Преступление #9: Призывать посетителей «кликнуть здесь»

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

Преступление #10: Выравнивать текст по ширине

Старайтесь не использовать «text-align: justify». Текст может красиво выглядеть, но на самом деле становится трудночитаемым (особенно для людей с ограниченными возможностями) из-за разного расстояния между словами.

Давно хотел сам написать подобную подборку, но всё не было времени (((
Так что держите очередной перевод – «10 Usability Crimes You Really Shouldn’t Commit» )))
И кликайте сюда!!!

Похожие статьи:

8 CSS групп шрифтов для вебдизайна

YoYurec — Fri, 20 Nov 2009 10:56:14 +0000

Большинство дизайнеров либо не разбираются в веб типографике, либо не хотят. Им нужно готовое решение для разных ОС – Windows, Mac или Linux. Те же, кто достаточно многое в ней понимают – могут чувствовать себя ограниченными в креативе, используя только безопасные веб шрифты.

Использование готовых групп CSS шрифтов (свойство font-face) поможет и тем и другим. Наборы сгруппированы по схожести с основными часто используемыми шрифтами и составлены в такой последовательности: шрифт, его аналоги, кроссплатформенный аналог и общее название семейства.

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

Times New Roman:
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

Georgia:
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

Garamond:
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

Helvetica/Arial:
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

Verdana:
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

Trebuchet:
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

Impact:
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

monospace:
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Используйте и экспериментируйте!
(По материалам статьи 8 Definitive Web CSS Font Stacks)

Похожие статьи:

Отношения заказчик-исполнитель в виде бытовых сценок

YoYurec — Tue, 15 Sep 2009 13:49:38 +0000

Нет похожих статей.

Оптимизация WordPress. Кешируй! Сжимай!

YoYurec — Wed, 09 Sep 2009 00:09:06 +0000

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

Помогать искать слабые места и сравнивать результаты поможет… [да, я знаю о плагинах к ФФ и сам их использую, но этот вариант проще + в закладки можно кинуть!] …полезный инструмент Pingdom. Она покажет на какие файлы стоит обратить внимание, а также общее время загрузки сайта. Сделайте пробный замер!

Итак, ускоренная методика!

У вас есть уже работающий WordPress и для начала нужно его обновить до самой свежей версии.

Второе, что необходимо сделать — снести нафиг максимальное количество ненужных плагинов. Оставляем только самое-самое. Далее необходимо включить кеширование, для этого понадобятся два плагина DB Cache Reloaded (для оптимизации запросов к БД) и WP Super Cache (для всего остального). Ставим оба и включаем. Проверяем скорость загрузки сайта. Она должна увеличиться :)

Следующим шагом будет редактирование шапки шаблона темы. Строки между доктайпом и вызовом . Открываем header.php (через админку или ФТП) и в нём изменяем:
* заголовок сайта
* кодировку
все пути к:
* стилям
* скриптам
* трекбекам
* и RSS
на статические значения. Остальные строки сносим. У меня получилось такое:

 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
>YoYurec Field>
 rel="stylesheet" href="http://yoyurec.in.ua/wp-content/themes/ferevens-a/style.css" type="text/css" media="screen" />
 rel="alternate" type="application/rss+xml" title="YoYurec Field RSS Feed" href="http://feeds2.feedburner.com/Yoyurec" />
 rel="pingback" href="http://yoyurec.in.ua/xmlrpc.php" />
 type="text/javascript" src="http://yoyurec.in.ua/wp-content/themes/ferevens-a/javascript/tabs.js">>
 rel="shortcut icon" href="http://yoyurec.in.ua/wp-content/themes/ferevens-a/favicon.ico" type="image/x-icon" />

(Можно при желании поковырять и футер на предмет ненужного кода). Снова проверяем скорость загрузки. Снова прирост!

Теперь самое время обратить внимание на стили и скрипты. Pingdom выводит список всех подгружаемых файлов, не забыли? Смотрим где они лежат. Идём на ФТП, открываем, вырезаем содержимое в буфер и идём на YUI Compressor, где указав тип файла (JS или CSS) сжимаем и полученный результат вставляем обратно в файл. И так со всеми…
Ну вот, теперь скорость стала ещё быстрее!

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

Удачи!

Похожие статьи: