Скачать набор иконок Reflection Iconset

• исправлена уязвимость и улучшена работа компрессора статических ресурсов rc.php
• улучшена безопасность при авторизации (бэкпорт из Сиены)
• улучшена защита Anti-XSS (бэкпорт из Сиены)
• добавлена поддержка авторизации на мультидоменных сайтах (с опцией "запомнить меня")

Последовательность обновления Cotonti Genoa 0.6.9

1. Заменить файлы:

   system/lang/en/admin.lang.php
   system/lang/ru/admin.lang.php
   system/functions.admin.php
   system/core/users/users.auth.inc.php
   system/core/users/users.logout.inc.php
   system/core/users/users.profile.inc.php
   system/common.php
   system/functions.php
   system/header.php
   rc.php

2. Выполнить sql-патч patch-0.6.3-0.6.9.sql

1. Создаем экстраполе для включения комментариев

Делается это просто:

2. Вставляем поля формы в шаблоны добавления и редактирования страниц

Код для page.add.tpl выглядит так:

	<tr>
		<td>{PAGEADD_FORM_ENABLECOMMENTS_TITLE}</td>
		<td>{PAGEADD_FORM_ENABLECOMMENTS}</td>
	</tr>

Для page.edit.tpl соответственно:

	<tr>
		<td>{PAGEEDIT_FORM_ENABLECOMMENTS_TITLE}</td>
		<td>{PAGEEDIT_FORM_ENABLECOMMENTS}</td>
	</tr>

3. Редактируем шаблон страницы

Осталось добавить обработку условия в шаблон вывода страницы:

	<!-- IF {PAGE_ENABLECOMMENTS} -->
		{PAGE_COMMENTS_DISPLAY}
	<!-- ENDIF -->

Вывод блока комментариев теперь контролируется чекбоксом из форм добавления и редактирования страниц.

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

Внедряем jQuery tinyTips Plugin в CMF Cotonti

tinyTips — это компактный jQuery плагин, позволяющий создавать подсказки для ссылок, используемых в HTML-коде. Установка tinyTips предельна проста. Прежде всего нам необходимо скачать стабильную версию плагина tinyTips с сайта разработчика. Распакуем архив и скопируем файл jquery.tinyTips.js в удобное для вас место, например в каталог js вашего скина Cotonti.

Подключение плагина — дело нескольких строк в header.tpl:

<script type="text/javascript" src="http://www.seditio.by/skins/{PHP.skin}/js/jquery.tinyTips.js"></script> 
<script type="text/javascript">
	$(document).ready(function() {
		$('a.tooltip').tinyTips('title');
	});
</script>

Все понятно: в качестве подсказок будут использоваться свойства title анкеров с классом tooltip.

Оформляем jQuery в шаблонах Cotonti

Для корректного отображения подсказок нам понадобится подключить стили и графику с фонами. Начнем с CSS-стилей. Включим их в общий CSS-файл директивой @import:

@import url("tinytips.css");

В файле tinytips.css определим следующие стили:

.tinyTip		{ width:200px; padding:12px 0 0; display:block; background:url(img/tooltips/top.png) no-repeat 0 0; }
.tinyTip .content	{ padding:0 20px; color:#111; background:url(img/tooltips/content.png) repeat-y 0 0; word-wrap:wrap; }
.tinyTip .bottom	{ height:22px; background:url(img/tooltips/bottom.png) no-repeat 0 0; font:0/0 sans-serif; }

Осталось только распаковать в каталог img/tooltips/ архив с фонами для подсказок.]]> Tue, 01 Jun 2010 23:32:00 +0300 Блоги под управлением Cotonti уже давно не редкость. Система постоянно развивается в этом направлении, и многие пользователи уже давно пересели с «тяжелых» блоговых платформ на быструю и безопасную Cotonti.

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

Самый простой способ добавить картинку — это использование модуля «Мои файлы». Однако он требует выполнения нескольких действий:

1. Создания виртуального каталога
2. Загрузки файла в выбранный каталог
3. Выбора ссылки
4. Оформления тега

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

Поступим следующим способом:

1. Создадим каталог для типовых изображений в любом удобном месте, например blog-images в каталоге скина
2. Загрузим в него заранее подготовленные картинки, названные в соответствии с тематикой, например cotonti.png, mysql.png и т. д.
3. В шаблон page.tpl перед тегом

   {PAGE_TEXT}

   добавим следующий код:

   <!-- IF {PAGE_KEY} --><img src="http://www.seditio.by/skins/{PHP.skin}/blog-images/{PAGE_KEY}.png" alt="{PAGE_SHORTTITLE}" height="" width="" /><!-- ENDIF -->

   (естественно, разметку и размер файлов настроим самостоятельно)

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

Для выполнения задания нам потребуется поработать с экстраполями для страниц и с шаблонами header.tpl, page.add.tpl и page.edit.tpl

Добавляем экстраполе

Для начала зайдем в панель администрирования и добавим экстраполе для страниц:

Теперь в шаблонах page.add.tpl и page.edit.tpl пропишем следующие блоки для добавления и редактирования дополнительных ключевых слов:

Правка page.add.tpl

<tr>
	<td>{PAGEADD_FORM_EXTRAKEYWORDS_TITLE}:</td>
	<td>
		{PAGEADD_FORM_EXTRAKEYWORDS}
		<p class="small">(Ввести через запятую)</p>
	</td>
</tr>

Правка page.edit.tpl

<tr>
	<td>{PAGEEDIT_FORM_EXTRAKEYWORDS_TITLE}:</td>
	<td>
		{PAGEEDIT_FORM_EXTRAKEYWORDS}
		<p class="small">(Ввести через запятую)</p>
	</td>
</tr>

Осталось создать логический блок в header.tpl

Правка header.tpl

Заменим строку

<meta name="keywords" content="{HEADER_META_KEYWORDS}" />

<meta name="keywords" content="{HEADER_META_KEYWORDS}<!-- IF {PHP.pag.page_extrakeywords} -->, {PHP.pag.page_extrakeywords}<!-- ENDIF -->" />

Теперь все: у нас есть средства добавления, редактирования и вывода дополнительных ключевых слов для страниц.

Решение оказалось более чем простым. Встречаем: DESCRIBE.

На самом деле аналогичных запросов существует три. Ниже приведены примеры их использования:

DESCRIBE sed_pages;
EXPLAIN sed_pages;
SHOW FIELDS FROM sed_pages;

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

DESCRIBE sed_pages page_date;

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

Кстати, напомним, что Cotonti позволяет задавать для генерируемых миниатюр следующие параметры:

• метод создания (GD1/GD2)
• ширину рамки
• цвет рамки
• цвет шрифта текста миниатюры
• размер шрифта текста миниатюры
• приоритет ширины или высоты
• коэффициент JPEG-сжатия
• созранение пропорций
• ширину и высоту миниатюры

Итак для повторного создания миниатю необходимо:

1. Используя FTP-клиент, очистить содержимое каталога /datas/thumbs/
2. Перейти по ссылке

   http://ВАШ_URL/pfs.php?f=0&o=thumbs

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

<div id='formelements'>

<p>Имя:</p>
<p><input type='text' name='name' id='name' value='Покажи меня'></p>

<p class='about graytext'>О себе:</p>
<p><textarea name='n' class='textareaclass'>Покажи меня в тексте</textarea></p>

<p>Пол</p>
<p><select id='select_id' id='select_id'>
<option value='1'>Тут значение ОДИН</option>
<option value='2'>Тут значение ДВА</option>
</select>
</p>

<p>Имя:</p>
<p><input type='text' name='phone' value='02'></p>

<p></p>
<p></p>

</div>

Поиск по HTML классу

Пример:

alert($
("textarea").val());

# - поиск по идентификатору (уникальное имя. id),

является аналогом document.getElementById

Пример:

alert($("#name").val());

Это самый быстрый из всех доступных селекторов.

. (точка) – поиск по CSS-классу

Чтобы искать по классу достаточно к селектору класса дописать ".название_css_класса_без_пробела":

$(".about")

Если у нужного объекта указано несколько классов то они все перечисляются через точку:

$("p.about.graytext");

Поиск вложенного (дочернего) элемента

Чтобы совмещать селекторы класса элементов надо их просто написать через пробел в порядке увеличения глубины внутри страницы:

$("'#formelements p.about").html("НОВЫЙ ТЕКСТ");

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

[attr=value] Поиск по атрибутам

Еще фишка: селектор элемента, с фильтрации по аттрибуту. Методов фильтрации много:

• [attr] - поиск объекта, имеющего аттрибут attr
• [attr='value'] - поиск объекта, attr которого равен value
• [attr!='value'] - поиск объекта, attr которого не равен value
• [attr^='value'] - поиск объекта, attr которого начинается с value
• [attr$='value'] - поиск объекта, attr которого заканчивается на value
• [attr*='value'] - поиск объекта, аттрибут attr которого содержит value в любом его месте
• [attr='val'][attr2!='val2'] - поиск объекта где attr равен val а attr2 не равен val2

Примеры:

Выборка всех input у которых type указан как text. Т.е. checkbox, submit, reset под это не попадут.

$("input[type='text']")

Выборка всех input у которых type указан отличный от text. Т.е. checkbox, submit, reset попадает - очень аккуратно нужно использовать такой селектор:

$("input[type!='text']")

Показывает все элементы у которых name начинается с 'phone':

$("input[name^='phone']")

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

$("input[name$='phone']")

Тоже частый механизм поиска. Ищет все элементы где в value есть слово звезда:

$("input[value*='звезда']")

Вывод элемента input ааттрибут name которого равен phone значение value любое кроме '02':

$("input[type=text][name='phone'][value!='02']")

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

Т.е. эти структуры содержат ошибки:

$("input[type='TEXT']") 
$("input[TYPE='TEXT']")

Поиск по аттрибутам элементов формы.

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

:disabled - поиск заблокированного видимого элемента формы input,textarea
:enabled - поиска доступного для редактирования
:checked - Поиск checkbox (radio) который отмечен (checked)
:selected - Поиск option которое выбрано (selected)
$("#select_id option:selected").text();

first, last, qe, lt, gt — поиск по соседей

Пример:

:first - первый дочерний элемент
$("div:first");
:last - последний дочерний элемент
$("div:last");
:eq(номер) - поиск то точному номеру. Обратите внимание, нумерация начинается с нуля.
$("table td:eq(2)") - третий  начала таблицы
$("table tr:eq(3) td:eq(4)") - пятый  в четвертом ряду

:gt(номер) - поиск всех элементов чей номер не ниже указанного (gt - сокращение от greater than(больше чем))
$("table td:gt(5)") - все  от 6
:lt(номер) - аналогично предыдущему, только не больше указанного (less than - менее чем)
$("table td:lt(3)");

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

Разберем поэтапно написание плагина:

1. Создание плагина Cotonti

Пишем плагин и размещаем его в максимально высоком хуке — лучше всего для этих целей подходят global, header.first или header.tags (если не планируется использовать в Ajax-частях).

2. Предварительный вывод результата

Результат предварительно выводим в переменную, например:

$MY_GLOBAL_TAG = "blah-blah-blah";

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

3. Тег готов

Используем в сайте в ваших шаблонах тег {PHP.MY_GLOBAL_TAG}. Удачных вам разработок!

Cotonti Siena: мощный инструмент для создания сайта

Речь идет прежде всего о том, что «Сиена» станет своего рода контрольным релизом, который подготовит радикальные изменения в ядре и API, которые запланированы для Cotonti Renaissance. В этой связи номер версии Cotonti Siena будет изменен с 0.7.0 на 0.9.0.

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

Кстати, начиная с версии 0.6.7 переход с Seditio на Cotonti стал заметно проще и доступнее. Полагаем, что переход с Genoa на Siena тоже окажется не таким болезненным.

Переход на HTML в качестве основного языка разметки Cotonti

Еще один важный момент: решено включить в поставку Cotonti HTML purifier и WYSIWYG-редактор. Это, безусловно, еще один шаг вперед, который позволит конечным пользователям системы создавать и оформлять привлекательные с точки зрения типографики и дизайна страницы. Поддержка BBCodes и других парсеров будет осуществляться в режиме низкого приоритета.

Вот что представляет из себя новый код:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

От вас потребуется только замена UA-XXXXX-X проприетарным кодом сайта. И еще: если вы уже пользуетесь сервисом Google Analytics, не забудьте вначале удалить старый код. Использование старого и нового кода совместно не рекомендуется.

Скачать!

Открыли "чудесное" свойство Твиттера неутомимые турецкие блоггеры. А "живое" тестирование провел блог Webrazzi: их тестовый аккаунт зафолловили основатель Facebook Mark Zuckerberg and гендиректор Твиттера Evan Williams. Для этого шокирующего достижения еще несколько дней назад достаточно было напечатать "accept", затем "@" и далее ник жертвы.

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

Утром 10-го некоторым счасливчикам все еще удавалось заставить звезд Твиттера зафолловить их аккаунты. Однако уже в 10:00 по Тихоокеанскому дневному времени Твиттер начал активное противодействие злоумышленникам, принудительно обнулив их фолловеров и фолловинги. Кроме того, в заявлении говорится о том, что приватные твиттер-аккаунты не пострадали.

Скачать все это удовольствие можно и нужно здесь:

Addictive Flavour Iconset / PSD-исходники

IconFnder

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

DaFont

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

Color Scheme Designer

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

Brusheezy

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

SuperScreenshot

Когда веб сайт готов, самое время проверить то, как он выглядит в браузере. SuperScreenshot позволяет сделать это мгновенно: вводите URL и выбирайте интересующие вас параметры.

Безусловно, в нашем списке присутствуют не все и, возможно, не самые интересные ресурсы. Если мы что-то упустили, напомните нам об этом в комментариях.

Eye Dropper

Расширение Eye Dropper (пипетка) позволяет определять цвет любого элемента просматриваемого веб сайта и подбирать цвет при помощи расширенной цветовой палитры.

Firebug Lite

Инструмент мониторинга, правки и отладки HTML, CSS и JavaScript кода.

IE Tab Classic

Простое средство для запуска Internet Explorer из-под Google Chrome.

Image Cropper

Image Cropper позволяет кадрировать и вырезать из веб страницы любые изображения, в том числе HTML-элементы IMG, и определяемые через CSS фоны блоков, и сохранять их в формате PNG.

Lorem Ipsum Generator

Как понятно из названия, расширение позволяет на лету создавать текстовую "рыбу" — Lorem Ipsum.

Measureit

Удобная экранная линейка, позволяющая легко измерять размеры любого объекта в окне.

Pendule

Архиполезный и один из лучших инструментариев веб-разработчика, облегчающий работу с JavaScript, HTML, CSS и изображениями. Для работы с графикой имеется экранная линейка, "пипетка", возможность отключения изображений, проверка alt-текста.

Plain Clothes

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

Web Developer Toolbar

Еще один пакет "все-в-одном" — на этот раз портированное расширение Mozilla Firefox. Возможности аналогичны пакету Pendule.

Window Resizer

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

Для сравнения: еще 4 года назад, в 2006 г., стоимость BY-домена составляла почти USD90. C 2007 г. оплата была снижена до 60 долларов США.

«Снижение цен на домены — это ещё один стимул для развития национального сегмента Сети, ведь теперь стоимость домена .BY немногим выше, чем международных доменов (.com, .net, .org и т.д).», — рассказал директор одного из крупнейших регистраторов доменов .BY — компании HOSTER. BY — Сергей Повалишев.

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

96 Degree

Информация о шаблоне
Демо-сайт

Cumulus

Информация о шаблоне
Демо-сайт

Inuitypes Starter Edition

Информация о шаблоне
Демо-сайт

iZen

Информация о шаблоне
Демо-сайт

Kodzilla

Информация о шаблоне
Демо-сайт

Maparaan

Информация о шаблоне
Демо-сайт

Notepad

Информация о шаблоне
Демо-сайт

Perfect

Информация о шаблоне
Демо-сайт

Rockie

Информация о шаблоне
Демо-сайт

Sketchace

Информация о шаблоне
Демо-сайт

Smooth

Информация о шаблоне
Демо-сайт

Thrilling Theme

Информация о шаблоне
Демо-сайт

Vermillion

Информация о шаблоне
Демо-сайт

WPCount

Информация о шаблоне
Демо-сайт

Zexee

Информация о шаблоне
Демо-сайт

Скачать набор бесплатных иконок от DesignKode

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

Наиболее заметным отличием от предыдущих версий стали присутствие привычной многим линейки в поле редактирования документа и редактор форм вверху таблицы. Вошедший в состав Google Docs редактор рисунков, напоминающий Microsoft Visio и Open Office Draw, позволяет создавать рисунки и схемы, а также импортировать внешние графические файлы.

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

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

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

Особенности дизайна минималистических сайтов

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

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

Минимализм — это не обязательно полное отсутствие графики или использование только приглушенных элементов. Скорее мы говорим о максимально рациональном использовании практически любых графических элементов, фонов и текстур:

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

Этап 1: Ищем теги

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

Для начала найдем в каталогах Cotonti файл, одноименный нашему темплейту, но с суффиксом .php, .main.php или inc.php и откроем его. Например, для файла "users.tpl" нам надо найти и открыть файл

system\core\users\users.inc.php"

Этап 2: Проверяем тот ли это файл

Ищем строку, в которой есть текст

new XTemplate(ИМЯ_ПОДКЛЮЧАЕМОГО_ТЕМПЛЕЙТА)

... и сверяем значение в скобках с нашим темплейтом.

Этап 3: Находим все блоки нашего шаблона

Ищем строки с текстом

->parse(ПОЛНОЕ_ИМЯ_НАШЕГО_БЛОКА)

Что значит полное имя? Это нечто вроде пути к блоку (как путь к файлу, но вместо слэшей используются точки), например:

$t -> parse("MAIN.USERS_ROW");

То есть, в блоке MAIN есть блок USERS_ROW. А все теги указанные выше относятся к текущему блоку.

Этап 4: Теги

Выше parse находим строку

->assign

... и в скобках видим весь список тегов с присваиваемыми значениями!

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

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

Что касается новшеств, то основными из них являются:

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

Тем не менее, третья версия Вордпресс не решает своих основных проблем — безопасность, WPDB баг, разростание базы вследствие автосохранения.

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

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

linkexchanger.su — это один из первопроходцев. Благодаря примерам на этом сайте многие разработчики выбрали для себя именно jQuery. В случае возникновения сложностей можно связаться с автором проекта, который всегда доброжелательно отвечает на любые вопросы. Кстати, именно благодаря этому ресурсу вышла книга «jQuery. Сборник рецептов»

jquery-docs.ru — первая попытка создать русскую справку по jQuery. Однако в качестве движка сайта автор использовал Wordpress, и это в значительной мере снизило удобство использования сайта.

slyweb.ru — это просто рай, в котором представлен довольно качественный перевод всей документации по jQuery. Здесь вы легко найдете ответы на интересующие вас вопросы.

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

123RF

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

500px

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

Dreamstime

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

Freephotosbank

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

Freepixels

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

Freerangestock

Обязательная (но несложная) регистрация, немало любительских фото.

Imagebase

Все права на скаченные изображения (public domain), отсутствие регистрации, разрешения до 3072*2048, полнофункциональный поиск: однозначный musthave!

Stockvault

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

Stock.XCHNG

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

Turbophoto

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

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

Ролик сделан добротно, с тонким юмором и вкусом!

1. Обновленный кэш. Прикладываются все усилия для создания обновленного кэша и ускорения работы системы. Создан постраничный кеш для гостей и блоковый кеш для пользователей.
2. Отпимизованы опросы. Из функций опросов вынесен HTML И JS. В данные функции добавлены хуки. Ко всем функциям опросов добавлен PHP Doc.
3. Из шаблонов вынесены (и дополнительно оптимизованы) файлы JavaScript.
4. Начат вынос комметариев и рейтингов в модули/плагины.
5. Добавлена функция sed_generate_usertags для быстрого добавления в файлы всех тегов пользователя.
6. В list, news, recentitems добавлен вывод полной информации о пользователе, добавившем статью. Это может понадобиться при создании блогов.
7. Исправлен кеш RSS.
8. Добавлена возможность логина не только по нику но и по email (как это сделано в большинстве социальных сетей).
9. Jquery 1.4.2
10. Улучшены возможности ЧПУ.
11. Другие улучшения и изменения.
]]> Sun, 07 Mar 2010 06:14:00 +0200 Первый день весны команда разработчиков среды управления сайтом Cotonti порадовала своих пользователей релизом 0.6.7. Релиз снова багфиксовый: обновление сводится к замене всего 11 файлов, из которых только один (page.add.tpl — режим правки страницы) относится к шаблону сайта:

plugins/markitup/js/jquery.markitup.js
system/core/users/users.register.inc.php
system/core/forums/forums.posts.inc.php
system/core/forums/forums.inc.php
system/core/forums/forums.topics.inc.php
system/core/list/list.inc.php
system/core/page/page.add.inc.php
system/common.php
system/functions.php
skins/sed-light/page.add.tpl
rss.php

Если конкретно, то:

• обновлен редактор MarkItUp! с версии 1.1.6 до 1.1.6.1
• исправлен генератор RSS-потоков (относительные ссылки заменены на абсолютные, иконки соответствуют стандартам XHTML, страницы доступны через алиасы)
• исправлен вывод амперсанда (&) в заголовках
• объявлена поддержка пользовательской валидации и $_SESSION['cot_user_id'] для использования в пользовательских скриптах
• обновление теперь возможно с Seditio версий 126 и 130

Более подробно со списком обновлений можно ознакомиться в репозитории.

]]> Tue, 02 Mar 2010 05:41:00 +0200 Использование стилей для различных медиа-типов (screen, print или handheld) предполагает подключение нескольких css-файлов. Подключаются они при помощи элементов link с атрибутом media или через операторы @import с указанием одного или нескольких медиа-типов.

Нет ничего предрассудительного в разделении каскадных таблиц стилей на несколько файлов и их подключении указанными выше способами (я и сам это делаю для своего сайта). Однако у данного способа существует два серьезных недостатка: он ведет к дополнительным HTTP-запросам к серверу и требует работы с несколькими CSS-файлами.

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

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

At-правило @media

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

Вот пример таблицы стилей, использующей правила @media:

body {
color:#444;
background-color:#fff;
}
@media screen, projection {
body { background-image:url(background.png); }
}
@media print {
body { color:#000; }
}
@media handheld {
body { color:#0f6517; }
}

Учитывая то, что данные правила находятся в CSS-файле, применимом ко всем медиа-типам, получим следующее:

• Для медиа-типов screen и projection текст будет темно-серым, а фон будет состоять из повторяющегося изображения
• Для медиа-типаа print текст будет черным на белом фоне
• Клиентские приложения, к которым применяется медиа-тип handheld, выведут темно-зеленый текст на белом фоне

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

Оригинал статьи Роджера Йоханссона CSS efficiency tip: use a single stylesheet file for multiple media

]]> Fri, 26 Feb 2010 07:56:00 +0200 Сегодня наш разговор пойдет о том, как рационально использовать библиотеку jQuery. Для начала первое правило: всегда используйте последнюю версию этой библиотеки – скорость выше, возможностей больше, ошибок меньше. Всегда читайте документацию. Где ее найти, мы уже упоминали. Если у вас большие JS библиотеки, то не забудьте их сжать (например, при помощи YUICompressor, Dojo ShrinkSafe или Google Closure Compiler).

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

<div id="content">
	<form method="post" action="" id=”entryform” />
		<h2>Ваш пол</h2>
		<ul id="Gender">
			<li><input type="radio" class="on" name="genderR" value="M" /> Мужской</li>
			<li><input type="radio" class="off" name=" genderR " value="W" /> Женский</li>
			<li><input type="radio" class="off" name=" genderR " value="Na" /> Не указан<<li>
		
		<input class="button" id="submit_button" type="submit" value="Далее" />
	</form>
</div> 

1. Элемент лучше и быстрее всего искать по его аттрибуту id, потому что используется метод DOM getElementById. Если у элемента нет id, то нужно указывать ближайший к нему элемент с id:

var gender = $('#Gender.on');

2. Использовать имя тега перед названием класса:

var gender = $('#Gender input.on');

В этом случае используется метод DOM getElementsByTagName и среди выбранных элементов ищется тот, у которого есть класс 'on'.

Сама популярная выборка элементов по названию класса — одна из самых медленных в jQuery.

3. Никогда не ставьте имя тега перед id:

 var gender = $('div#Gender);

В этом случае сначала будут выбраны все элементы с тэгом 'div', а уже потом среди них будет найден элемент с нужным id.

4. «Кешируйте» объекты jQuery. Например, вы используете объект больше чем один раз, вместо того, чтобы несколько раз искать по элементу:

 $('#Gender input.on).bind('click', function(){...});
 $('#Gender input.on).css('background-color', '888');
 $('#Gender input.on).fadeIn('slow');

сохраните его в локальную переменную:

 var $gender = $('#Gender input.on');
 $gender.bind('click', function(){...});
 $gender.css('background-color', '888');
 $gender.fadeIn('slow');

Примечание: чаще всего '$' перед именем переменной ставят, чтобы показать что в ней храниться объект jQuery.

5. Выстраивайте цепочки. Большинство методов jQuery возвращают после выполнения объект jQuery, это позволит сократить размер кода:

 $('#Gender input.on').bind('click', 
 function(){return false;})
 	.css('background-color', '888')
 	.fadeIn('slow');

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

 var $gender = $('#Gender'),
 	$onGender = $gender.find('input.on'),
 	$offGenders = $gender.find('input.off');

7. Минимизируйте работу с DOM-деревом. Любые манипуляции (удаление, перемещение и вставка новых элементов) с DOM довольно медленные, поэтому вместо того, чтобы вставлять каждый элемент в DOM:

 var toplist = [...], 
 $mylist = $('#mylist'); 

 for (var i=0, l=toplist.length; i<l; i++ )
 {
 	$mylist.append('<li>' + toplist[i] + '</li>');
 }

Лучше работу с DOM свести к одному шагу.

 var toplist = [...], 
 $mylist = $('#mylist'), 
 topli = ""; 

 for (var i=0, l=toplist.length; i<l; i++)
 {
 	topli += '<li>' + toplist[i] + '</li>';
 }

 $mylist.html(topli);

8. $(window).load. Чаще всего выполнение скрипта привязывают к событию $(document).ready(). Событие происходит в то время, когда объекты все еще загружаются. Иногда можно наблюдать, что страница подвисает во время загрузки. Причиной этого могут быть именно функции, которые привязаны к $(document).ready(). Чтобы избежать этого, можно часть функций привязать к событию $(window).load(), которое происходит уже после того, как все содержимое страницы (включая содержимое iframe) уже загружено.

 $(window).load(function(){
 	// функции jQuery, инициализируемые после загрузки страницы
 });

9. Привязывайте к странице только относящиеся к ней скрипты. Обычно все складывается в один большой скрипт, который вставляется на все страницы сайта и выполняется на событие $(document).ready(). Но даже если функция не работает на данной конкретной странице, то все равно тратится время на поиск элементов, к которым привязана эта функция. Скрипт можно разделить на несколько частей или сделать его следующим образом:

 var mylib =
 {
 	article:
 	{
 		init : function()
 		{
 			...
 		}
 	},
 	forum_posts :
 	{
 		init : function()
 		{
 			...
 		}
 	}
 }

а на странице, где мы хотим использовать функции, относящиеся, например, к article вставить:

<script type="text/javascript">
 mylib.article.init();
</script>

]]> Tue, 23 Feb 2010 07:08:00 +0200 Одним из важных аспектов работы любого JS фрейморка является скорость. Она во многом определяется тремя параметрами: качеством оптимизации кода фреймворка, браузером и мощностью вашего компьютера. В jQuery 1.4.2 разработчики заявляют значительное увеличение скорости работы.



На графиках наглядно продемонстрировано, что скорость выросла в сравнении с версией 1.3.2 более чем в 2.5 раза!

Кроме того, в jQuery 1.4.2 реализовано 2 новых метода: .delegate() и .undelegate(), которые призваны дополнить методы .live() and .die(). Эти методы упрощают работу с некоторыми определенными событиями.

Например, следующий код:

$("table").each(function(){
  $("td", this).live("hover", function(){
    $(this).toggleClass("hover");
  });
});

Теперь можно упростить до

$("table").delegate("td", "hover", function(){
  $(this).toggleClass("hover");
});

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

Для тех, кто до сих пор не определился с тем, какой фреймворк использовать, есть возможность протестировать скорости: $('CSS').framework или Task Speed . В результате наших тестирований Jquery 1.4.2 в браузерах Mozilla Firefox 3.6 и Opera 10.50 оставался бесспорным лидером.

]]> Sun, 21 Feb 2010 05:46:00 +0200 Часто при просмотре блогов мы видим ссылки вида:

<a rel="external nofollow" href="http://seditio.by/page.php?al=cotonti">CMF Cotonti</a>

Если с атрибутом nofollow все понятно, то external часто вызывает недоумение и вопросы.

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

target="_blank"

более не являются валидными.

Итак, "искусственный" атрибут

rel="external"

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

function externalLinks() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i<anchors.length; i++) {
		var anchor = anchors[i];
			if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {
				anchor.target = "_blank";
				anchor.className = "external";
				anchor.title = "Opens in new window"
			}
	
	}
}
window.onload = externalLinks;

]]> Sat, 20 Feb 2010 04:02:00 +0200 Создавая пользовательский интерфейс вашего приложения в виде едва заметного каркаса для информации, интересуюущей пользователей, вы помогаете им сфокусироваться на содержании. Снижайте количество и акцентированность элементов управления. Создавайте пользовательские элементы управления, которые тонко интегрируются в графический стиль вашего приложения: управление останется заметным, но не слишком бросающимся в глаза.

~ Руководство по разработке пользователького интерфейса iPad

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

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

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

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

Оригинал статьи "De-emphasize User Interface Controls"

]]> Fri, 19 Feb 2010 07:51:00 +0200 Многих начинающих пользователей, впервые сталкивающихся с Cotonti, привлекает простота кода этого фреймворка. Действительно, в плане юзабилити и простоты кода с Cotonti могут посоревноваться немногие фреймворки. Однако на определенном этапе у каждого пользователя возникает проблема нехватки функционала или его несоответствия требованиям веб-сайта. На самом деле в этом нет ничего негативного: Cotonti предлагает своим пользователям только самый необходимый функционал. Все дополнительные и часто "немассовые" возможности пользователь Cotonti наращивает самостоятельно. Для этого существует два способа: хак и плагин. Остановимся на каждом из них подробно.

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

Что такое хак и в чем его преимущества и недостатки?

Хак — это непосредственное изменение программного кода, в нашем случае PHP-кода ядра фреймворка. Простой пример хака файла page.inc.php:

"PAGE_DATE" => $pag['page_date'],

добавляем

"PAGE_YEAR" => @date("Y", strtotime($pag['page_date']) + $usr['timezone'] * 3600),

, и получаем тег вывода года создания страницы.

Кстати, большинство разработчиков начинали свой путь в LDU/Seditio/Cotonti именно с хаков. Причин этому две:

• Хак создается буквально за пару минут
• Хак не требует знаний работы движка

Однако как у всех хороших вещей, у хаков есть серъезные недостатки:

• Хаки создают ощутимые неудобства при переходе на новую версию движка
• Очень часто хаки открывают бреши в системе защиты

Чем плагины лучше хаков?

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

В качестве примера попробуем реализовать предыдущую задачу при помощи плагина:

<?php
/* ====================
[BEGIN_SED_EXTPLUGIN]
Code=plugincode
Part=page
File=filename
Hooks=page.tags
Order=10
[END_SED_EXTPLUGIN]
==================== */
$t->assign(array(
    "PAGE_YEAR" => @date("Y", strtotime($pag['page_date']) + $usr['timezone'] * 3600)
));
?>

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

]]> Thu, 18 Feb 2010 07:52:00 +0200