Переносил файлы с ext4 на NTFS, комп завис – с кем не бывает? После перезагрузки Убунту заругалась и отказалась монтировать диск – мол, ошибки в структуре. GParted сказал то же самое, прибавив, что лучше бы я загрузился с винды и запустил некий chkdsk. Винды на диске у меня на данный момент нет, так что я, не веря что Убунту не может решить такую простую проблему, обратился к гуглу.

Там, как всегда было дофига сеошного мусора, так что я просто забил на это дело, подключил диск с виндой, и из-под нее запустил тот самый chkdisk (который оказался стандартным Check Disk, Propriesties->Tools->Check Disk). Важно, что запускать его надо с флагом /f (автоматически исправлять ошибки), или просто поставить соответствующую галочку.

Ну, а что делать виндоненавистникам, у которых ни загрузочного диска с Windows, ни харда, как в моем случае? Ответ прост – они не используют NTFS. Эта файловая система нужна, по большому счету, только для совместимости с Windows. Единственная найденная мной прога под линукс, которая якобы может восстановить NTFS-партицию – это TestDisk.
Ни одной истории успешного восстановления, впрочем, не нашел (хоть и уверен, что такие есть). Так что лучше качайте с торрентов образ винды покупайте официальный дистрибутив только в проверенных магазинах, и восстанавливайте партицию с него.

Так и разрушаются детские иллюзии, что под линукс есть все.

Собственно, еще одна зарисовка на тему создания меню темы WordPress. Статья ориентирована на начинающих разработчиков (HTML/PHP гуру врят-ли найдут что новое). Объясню, в частности, как организовать загрузку файла юзера, с последующим использованием его в теме.

Для удобства, буду рассматривать вариант, когда приведенная ниже опция – единственная. Алгоритм:
1. Загружаем выбранный файл
2. Переносим его из временной директории в постоянное место
3. Зная путь до файла, используем его в теме
Сначала php-код:

if(isset($_FILES['fileupload']['name'])&&$_REQUEST['action']=='update'){
	$file_path = TEMPLATEPATH.'/uploads/';
	$file_path = $file_path.basename($_FILES['fileupload']['name']);
	$file_css_path = get_bloginfo('template_url');
	$file_css_path = $file_css_path.'/uploads/'.basename($_FILES['fileupload']['name']);
	$file_path = str_replace('\\','/',$file_path);

Если проставленно имя файла, и в поле ‘action’ значение ‘update’ (это будет скрытое поле, для подтверждения, что юзер ввел новые настройки), то начинаем. В глобальной переменной TEMPLATEPATH хранится движок хранит путь до темы. Нам нужен как абсолютный путь, так и URL (в моем случае, для доступа к файлу-картинке через CSS). URL темы достается функцией get_bloginfo(‘template_url’). Ну и в конце, заменяем все символы “\” на символы “/” в абсолютном пути файла.
Далее, переместим файл, и выведем в опцию его URL:

$is_a_file = move_uploaded_file($_FILES['fileupload']['tmp_name'],$file_path);

	if (!get_option('uploaded_pic)) {add_option('uploaded_pic');}
	if ($is_a_file) {update_option('uploaded_pic',$file_css_path);}
	}

При создании меню настроек меня преследовала ошибка, когда опция обнулялась при каждом обновлении настроек, если только пользователь не загрузил новую картинку. Проверка на проставленный $_FILES['fileupload']['name'] ничего не давала, потому что ключ не пустой в любом случае. Чтобы определить, была ли загрузка, можно, к примеру, проверить размер файла ($_FILES['fileupload']['size']>0) или сделать как я – проверить результат перемещения файла, который будет FALSE при ошибке.
Ну и наконец HTML-интерфейс:

<?php wp_nonce_field(); ?>
<form method="post" action="" enctype="multipart/form-data">
Upload an image: <input type="file" name="fileupload" /><br />
<p><input name="update" type="submit" value="<?php _e('Save changes'); ?>" style="padding:3px;"  /></p>
<input type="hidden" name="action" value="update"  />
</form>

Не забываейте параметр ectype у формы. Здесь, думаю, все очевидно.
Удачного кодинга!

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

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

В меню мне понадобилось сделать несколько чекбоксов (checkbox, как это по-русски?). Казалось бы, проще простого – чекбокс или отмечен, или нет, так что забиваем булевое true/false в опцию и радуемся жизни. Первая проблема – опция таких значений не принимает. Ну и ладно, вместо используем 1/0 вместо этого:

add_action('admin_menu','add_user_options');	

function add_user_options(){
add_options_page('Theme Options','Theme settings','edit_themes','functions','edit_theme_options');
}

function edit_theme_options(){
$options_names = array('option1','option2');
if ('update'==$_REQUEST['action']){
	foreach ($options_names as $option_name){
		if (!get_option($option_name)) {add_option($option_name);}
		$checked = isset($_POST[$option_name])?1 : 0;
		update_option($option_name, $checked);
		}
}

В случае увеличения кол-ва чекбоксов просто добавляются элементы в массив. Удобно и канонiчно. Спасибо Stack Overflow, когда у меня мозги не работали.

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

<div class="wrap">
<h2>Theme Settings</h2>
<form method="post" action="">
<?php wp_nonce_field(); ?>
<br />
<input type="checkbox" name="option1" <?php  if(get_option('option1')>0){ echo('checked="checked"');} ?> />
Use option1
<br /><br />
<input type="checkbox" name="option2" <?php if(get_option('option2')>0){ echo('checked="checked"');} ?>  />
Use option2

Ну и на десерт – в именах опций нельзя использовать тире (-). Капризы парсера?

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

White-Space

По умолчанию в (X)HTML пробелы, идущие в ряд, урезаются до одного, а переходы на новую строку выбрасываются вообще. Это удобно, так как дает нам возможность разделять элементы в разметки, делая ее более понятной.

Это компенсируется тегом <pre>, внутри которого элементы вне тегов выводятся абсолютно так-же, как они заданы в разметке. Есть и символ непрерывного пробела (non-breaking space) – &nbsp;

Но гораздо более корректно управлять отображением пробелов через CSS-свойство white-space
Рассмотрим возможные его значения:
white-space:normal
Состояние по умолчанию. Пожалуй, единственный случай, когда оно используется – это когда вы хотите отменить для конкретного блока ранее заданное глобальное значение.

white-space:nowrap
Самое используемое значение, делает то же, что и normal, за исключением того, что режет все переходы на новую строку, даже автоматические при недостатке места в элементе.

white-space:pre
Аналогично действию тега <pre>. Текст выводится как есть.

white-space:pre-line
Все так-же как в normal, только учитываются переходы на новую строку. Работает в IE начиная с 7, Firefox начиная с 3.0, и Opera с версии 9.2

Помните, что white-space может использоваться только для inline-элементов. Для блоков (display:block) оно не действует.

Прозрачность

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

Прозрачность в браузерах:
Просто, как две копейки:

#element{
opacity:.6
}

Opacity переводится как “непрозрачность” (или видимость, в данном случае). При значении .6 элемент непрозрачен (виден) на 60%. Значение может иметь до двух десятичных чисел, к примеру .06 означает 6% непрозрачности. Вот и все.

Прозрачность в Internet Explorer:
Конечно, IE плевать хотел на остальных и имеет собственную версию обеспечения прозрачности:

#element{
filter:alpha(opacity=40);
}

Для того, чтобы свойство работало, элемент должен иметь расположение (layout). Самое простое, как заставить его появиться – указать ширину (width) или высоту (height), или свойство zoom (любое, кроме normal). Некоторые элементы (как tr, th, td, img…) имеют расположение изначально.
В IE 8 работает еще и следующий метод:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=6)";

Почти удобно.

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

#element{
background:rgba(120,120,120,.6);
}

Тут все очевидно – задаем цвет в формате rgb (в данном случае должен быть серый) и непрозрачность 60%.

Прозрачность через HSLA:
HSLA – это Hue, Saturation, Lightness, Alpha. Прозрачность – последний параметр (альфа-канал). Пример:

#element{
background: hsla(205, 38%, 47%, .6);
}

Подробнее о нем читайте на W3. Следует заметить что прозрачность через rgba и hsla затрагивает только фон элемента, и не трогает наследников (child).

Хотел выложить еще несколько техник, но для одного поста выходит многовато. Скорее всего выложу еще один такой пост на днях.

P.S. Поздравте меня с наступившей сессией, тысяча чертей.

P.P.S. Вольный перевод этого и вот этого материалов.

Полагаю, все из вас знакомы со скриптом Lightbox. Если нет, попробуйте нажать мышью на любую уменьшенную картинку на этом блоге – картинка развернется в полный размер, а остальная часть экрана померкнет. Название “lightbox” уже стало нарицательным, обозначая бесчиленные виды этого скрипта. Я, к примеру, использую реализацию на jQuery и доволен ею. Теперь я покажу, как создать подобный эффект с помощью CSS3.

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

Ну и живой пример.

Что касается поддержки, то данный пример будет работать во всех последних версиях браузеров – Firefox, Chrome, Safari и Opera. Что касается Internet Explorer, то для него придется написать небольшой javascript-хак, о котором ниже.

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

<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSS Lightbox</title>
</head>
<body>
<h1>CSS Lightbox</h1>
<p>You can use this fantastic solution to create lightboxes for not just <a href="#image" title="Image Lightbox">images</a> but rich, semantic <a href="#content" title="Content Lightbox">content</a> and <a href="#video" title="Video Lightbox">video's</a> as well!</p>
</body>
</html>

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

<div class="lightbox" id="image">
<div class="w300 h60">
<img alt="Six Revisions" height="98" width="255" src="logo.jpg />
</div>
<p class="close"><a href="#" title="Close This Image Lightbox">Close <span>X</span></a></p>
</div>

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

<div class="lightbox" id="content">
<div class="w60p h400 scroll">
<h2>Your Content Goes Here!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis felis suscipit tellus euismod varius quis ut nibh. Curabitur in ante nunc, vitae venenatis dui. Phasellus egestas ipsum in ipsum suscipit volutpat. Etiam eu nibh eros. Sed dolor ligula, tincidunt vitae elementum vitae, pharetra vitae eros. Cras risus lectus, aliquam vitae condimentum id, feugiat eu nisi. Cras eu sem erat, eget ultrices enim. Suspendisse feugiat fringilla massa at convallis. Quisque tincidunt, diam quis facilisis volutpat, purus orci rutrum leo, id dapibus tellus ante vel mauris. Quisque posuere, tortor in laoreet hendrerit, ipsum sem molestie nunc, et ultrices erat nulla sed dui. Donec sit amet mi sapien. Maecenas fermentum nulla eu ligula dictum id elementum nisi commodo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac massa quam. Suspendisse nibh nibh, condimentum a porttitor a, placerat in lorem. Sed sit amet elit eget magna condimentum posuere volutpat a neque.</p>
<p>Sed dignissim viverra neque, sit amet lobortis elit luctus ac. Proin placerat varius quam eu molestie. Pellentesque vel ante quis metus auctor convallis. Duis mattis risus ac tortor luctus in semper sem fringilla. Vestibulum consectetur iaculis risus vel rutrum. Nam scelerisque gravida felis quis egestas. Mauris vehicula nisl quis felis bibendum nec placerat neque dictum. Donec erat tortor, venenatis id consequat ut, dictum nec enim. Ut ultrices eros vel diam pulvinar aliquam. Phasellus non nisi vitae ligula imperdiet dapibus eleifend sed neque. Morbi gravida dignissim turpis eu auctor. Morbi pellentesque urna vitae nunc dictum elementum. Aliquam erat volutpat. Aenean urna nibh, pretium ut accumsan ut, luctus eget nibh. Nulla sollicitudin fermentum turpis eget rutrum. Integer dignissim dui turpis. Morbi metus libero, suscipit blandit dignissim aliquam, sodales non mi. Proin id augue odio, sit amet gravida mauris.</p>
<p>Proin a dignissim orci. Nam nec urna nisi, in blandit lorem. Nulla cursus ornare rhoncus. Nunc lectus orci, tristique et aliquet sed, venenatis et felis. Nullam sodales orci at est pharetra nec aliquam risus scelerisque. Nullam varius, nisi ut sagittis scelerisque, nulla mauris tempus magna, quis pellentesque sem erat a diam. Cras lectus est, dictum ut consequat ut, adipiscing sit amet sapien. Curabitur tincidunt varius gravida. Quisque augue sem, commodo sed molestie venenatis, cursus vehicula lorem. Praesent scelerisque, tortor a euismod malesuada, ipsum ligula semper odio, ultricies molestie sapien metus condimentum felis. Vivamus hendrerit gravida interdum. Fusce at purus eu orci laoreet lobortis. Aliquam cursus mi at tellus fringilla dictum. Sed nec libero dolor. Integer nec neque at mi malesuada tincidunt.</p>
</div>
<p class="close"><a href="#" title="Close This Content Lightbox">Close <span>X</span></a></p>
</div>

Чтобы выглядело совсем продвинуто, добавим и блок с видео:

<div class="lightbox" id="video">
<div class="w640 h386">
<object type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/bsGEWHNJ3s8"><param name="movie" value="http://www.youtube.com/v/bsGEWHNJ3s8" /></object>
</div>
<p class="close"><a href="#" title="Close This Video Lightbox">Close <span>X</span></a></p>
</div>

Если вы просмотрите получившуюся работу в браузере, то обнаружите три следующих друг за другом блока, каждый со ссылкой “Close” под ним. На этом закончим разметку и приступим к CSS.

Вы, возможно, недоумеваете, как будет выбираться нужный контент. Для этой цели используем CSS3 псевдо-селектор :target
Он позволяет стилизовать элемент, к которому обращаются по идентификатору фрагмента (# + id элемента). Обращение можно видеть в адресном окне. К примеру: www.yoursite.com/index.html#content

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

html, body { height: 100%; overflow: hidden; width: 100%;  }
body { overflow-y: auto; }

На заметку: Можно спрятать лайтбоксы и с помощью display:none. А мы будем использовать отрицательные поля.

.lightbox{ left:-999em;position:absolute; }
.lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.lightbox:target .close a { background: rgba(0, 0, 0, 0.75); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }
.close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
.close {text-indent: -999em;}

Приведенный выше код заставит лайтбокс занять все окно браузера, через абсолютное позиционирование. В третьей строке, мы подобным методом заставляем закрывающую ссылку занять все, кроме окна лайтбокса и задаем фон (черный, прозрачность – 0.75). Хотя лайтбокс закрывается от любого клика вне выделенного контента, мы все-же поставим “Х” с подписью “close” чтобы все сразу догадались.

Ниже вы найдете остатки CSS, которые зададут нужный отступ элементам:

.lightbox:target div { background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 99; }
.w60p { margin-left: -30%; width: 60%; } .w300 { margin-left: -150px; width: 300px; } .w640 { margin-left: -320px; width: 640px; }
.h60 { height: 60px; margin-top: -30px; } .h400 { height: 400px; margin-top: -200px; } .h386 { height: 386px; margin-top: -193px; }
.scroll { overflow-y: scroll; padding: 0 1em; }

Заданы различные отступы, для элементов шириной 300px, 640px, и 60%. То же самое для высоты. Обратите внимание на класс scroll – он дает возможность прокручивать непомещающийся в окне контент.

Если вы владелец Firefox, Chrome, Safari или Opera, то код должен работать идеально, с осликом IE придется немного повозиться.
Вот как мы будем обходить отсутствие поддержки :target Эксплорером:

<script type="text/javascript">
<!--
 	/*@cc_on @if (@_jscript_version > 5.6)
 	function bootup(){
 	var tds = document.getElementsByTagName("a"); lightbox();
 	for( var x=0; x < tds.length; x++ ){tds[x].onclick = function(){setTimeout(lightbox, 1);};}
 	}
 	function lightbox(){
 	var counted = document.getElementsByTagName("div");
 	for( var x=0; x < counted.length; x++ ){ if ( counted[x].className == "boxfocus" ) { counted[x].className = "lightbox"; } }
 	if (location.hash.substr(1) == "") {} else { document.getElementById(location.hash.substr(1)).className = "boxfocus"; }
 	}
 	window.onload=bootup;
 	@end @*/
 	// -->
</script>

Вставте приведенный код в хедер ниже описания стилей, или подключайте извне. Функция использует условные комменты, чтобы убедится, что мы используем именно IE. Если это подтвердилось, функция bootup мониторит клики по анкору. Когда срабатывает событие, определенные классы добавляются к стилю блока, чей идентификатор (“#”) находится во фрагментной ссылке.
Чтобы обойти отсутствие поддержки прозрачности в IE, добавим следующее в стили:

.boxfocus { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
.boxfocus div {background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 99; }
.boxfocus .close a { background-image: url('trans.png'); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }

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

Следует отметить, что IE 9 наконец будет поддерживать :target, как и многие другие CSS3/HTML5 техники.

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

P.S. Вольный перевод этой статьи.

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

Итак, разметка:

<html>
<head>
<title>Интерактивный холст</title>
</head>
<body onload="init()">
<canvas id="canv" class="output" width="400" height="250" style="width:400px;height:250px;" onclick="blobs.push(createBlob(event));">
Тут должна была быть HTML5-презентация.
</canvas>
<table style="border:1px solid #ccc;"><tr>
<td height="30" width="30" style="border:1px solid #c0c0c0;" align="center" onclick="setColor(null);">
 
<b><font face="arial" size="-3">RND</font></b></td>
<td height="30" width="30" bgcolor="#ff0000" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#00ff00" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#0000ff" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#CCFF33" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#3366CC" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#99ff00" onclick="setColor(this);"/>
<td height="30" width="30" bgcolor="#000000" onclick="setColor(this);"/>
</tr></table>

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

После этого, открываем тег <script> и объявляем переменные:

var minBlobs = 15;
var initBlobs = 20;
var width = document.getElementById('canv').width;
var height = document.getElementById('canv').height;
var curcolor = null;
var blobs = new Array();
var context;
function Blob(x,y,r,vx,vy,w,p,c){
  this.x = x; //координаты появления
  this.y = y; 
  this.r = r; //радиус
  this.vx = vx; //скорость движения вбок
  this.vy = vy; //скорость движения вверх
  this.wobble = w;
  this.wperiod = p;
  this.color = c;
}

wobble – это амплитуда раскачки пузыря, пока он поднимается вверх (посмотрите на пузырь газа в стакане минералки; поднимаясь, он никогда не идет по прямой).
wperiod – соответственно период раскачки.

Инициация:

function init(){
  var elt = document.getElementById('canv');
  context = elt.getContext('2d');
  while (blobs.length < initBlobs) {
    blobs.push(createBlob(null));
  }
  setInterval("draw();", 40);
}

Пока количество пузырей не превысило константу initBlobs, создаем новые. В конце, как и в прошлом примере, забиваем функцию отрисовки холста draw() в цикл. Частота вызова функции напрямую определяет скорость анимации.

Рисуем анимацию:

function draw() {
  // рисуем фон
	var g = context.createLinearGradient(0,0,0,height);
	g.addColorStop(0,'#202020');
	g.addColorStop(1,'#aaa');
	context.fillStyle = g;
	context.fillRect(0,0,width,height);
  var time = new Date().getTime();
  // рендерим пузыри
  for (i=0; i<blobs.length; i++) {
    var blob = blobs[i];
    var tf = time/1000/blob.wperiod;
    var wf = (tf-Math.floor(tf))*2*Math.PI;
    var xw = blob.wobble*(Math.sin(wf)-0.5);
      var rg = context.createRadialGradient(
        blob.x+xw+blob.r/4,blob.y-blob.r/4,blob.r/5,
        blob.x+xw,blob.y,blob.r);
      rg.addColorStop(0, '#fff');
      rg.addColorStop(0.85, blob.color);
      rg.addColorStop(1, 'rgba(0,0,128,0)');
      context.fillStyle = rg;
      context.fillRect(blob.x+xw-blob.r,blob.y-blob.r,blob.r*2,blob.r*2);
    // обновляем позицию пузырей
    blob.x += blob.vx;
    blob.y += blob.vy;
    if (blob.x > width+blob.r || blob.x < -blob.r //если пузырь ушел за пределы холста, удаляем его из массива
     || blob.y > height+blob.r || blob.y < -blob.r) {
      delete blob; 
      if (blobs.length <= minBlobs) { //если количество меньше или равно минимуму, создаем еще пузырей
        blobs.splice(i, 1, createBlob(null));
      } else {
        blobs.splice(i, 1);
        if (i>0) i--;
      }
    }
  }
}

Обратите внимание на интересное использование функции CreateRadialGradient. Мы заполняем круги с помощью функции fillRect(x,y,width,height), буквальный перевод – заполнить прямоугольник. Но так как градиент у нас радиальный (круговой), заполняется именно область круга, создавая эффект псевдотрехмерности.

Создаем пузырь, и обрабатываем клик мышью по холсту:

function createBlob(event) {
  var r = (Math.random()*21)+10;
  var x;
  var y;
  if (event == null) {
    x = Math.random()*width; // если пузырь создан не пользователем - нет координат клика - генерируем их
    y = height+r;
  } else {
    x = event.clientX;
    y = event.clientY;
  }
  var vx = (((Math.random()*21))-10)/10; // от -1 до 1
  var vy = -((Math.random()*15)+1)/3.0; // от -.3 до -5
  if (curcolor == null) {
    // случайный цвет
    var clr = "rgba(";
    for (j = 0; j < 3; j++) {
      var v = Math.floor(Math.random()*256); // 0-255;
      clr += v + ",";
    }
    clr += "1.0)";
  } else {
    clr = curcolor;
  }
  var wob = Math.random()*2+5; // амплитуда 0.1-2.1
  var wp = Math.random()*wob+0.5; // wobble period 0.5-2.1 sec
  return new Blob(x, y, r, vx, vy, wob, wp, clr);
}

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

Определяем цвет:

function setColor(elt) {
  if (elt == null) {
    curcolor = null;
  } else {
    curcolor = elt.bgColor;
  }
}

Закрываем теги разметки:

</script>
</body>
</html>

Вот и все. Если хотите включить пример на свою страницу, рекомендую подключать этот код из отдельного html-файла через фрейм, при прямом включении в тело страницы мною наблюдались различные баги. Живой пример смотрите здесь (кликаем по пункту Interactive canvas).
P.S. Скелет кода взят опять-же у этого человека.

Остальные уроки:
HTML 5 – Часть 1. Анимированный холст

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

Для начала немного теории. Холст (Canvas) – это элемент HTML 5, в котором можно выводить и генерировать изображения. Генерация изображений производится с помощью Javascript, и все работает в любом современном браузере.

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

Итак:

Намечаем холст в HTML:

<canvas id="canv" width="400" height="250" style="width:400px;height:250px;margin:0 0 20px 230px;">HTML 5 Canvas presentation was meant to be here.</canvas>
<script>

Как видите, я так-же открыл тег script, так как
дальнейшие действия будут в Javascript.

Инициируем переменные:

var width = document.getElementById('canv').width;
var height = document.getElementById('canv').height;
var init;
var context;
var g; 
function Item(x,y,r,speed,c){
this.x = x;
this.y = y;
this.r = r;
this.speed = speed;
this.c = c;
}
var items = new Array();

Функция Item – нужна для эмуляции многомерных массивов. Ведь у каждого элемента (круга) есть свои параметры (координаты возникновения, диаметр, скорость, цвет).

Инициируем холст:

function initiate(){
init = document.getElementById('canv');
context = init.getContext('2d');
for (i = 0; i < 20; i++) {
    x = Math.floor(Math.random()*(width+1));
    y = Math.floor(Math.random()*(height+1));
    r = Math.floor(Math.random()*20)+1; // 1-30;
    speed = Math.floor(Math.random()*10)-3;
    //скорость нулевой быть не может:
    if (speed == 0) speed = 1;
    //генерируем цвета
	c = "rgba(";
    for (j = 0; j < 3; j++) {
      v = Math.floor(Math.random()*256); 
      c += v + ",";
    }
    c += "0.7)";
    //записываем элемент в массив
    it = new Item(x, y, r, speed, c);
    items.push(it);
  }
 
setInterval("draw();",10);
}

С математическими формулами, думаю все понятно. Функция rgba генерирует цвет, первые три аргумента – это числа (0-256), а четвертый регулирует альфа-канал (прозрачность) и принимает значения от 0 до 1. Первые три заполняем случайными значениями, а четвертый у нас равен 0.7 всегда. Если хотите, генерируйте его случайно, по аналогии.

Переходим к функции draw(), которую мы циклично вызываем через setInterval():

function draw(){
 
//задник
g = context.createLinearGradient(0,0,0,height);
g.addColorStop(0,'#202020');
g.addColorStop(1,'#aaa');
context.fillStyle = g;
context.fillRect(0,0,width,height);
 
  for (i in items) {
    context.fillStyle = items[i].c;
    context.beginPath();
    context.arc(items[i].x,items[i].y,items[i].r,0,Math.PI*2,true);
    context.fill();
 
    items[i].y = items[i].y+items[i].speed; //задаем движение
    if (items[i].y>height+items[i].r) items[i].y = -items[i].r;//круг бесконечно движется по прямой, как только заходит за верхнюю грань, появляется снизу
    else if (items[i].y<-items[i].r) items[i].y = height+items[i].r;
  }
}

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

P.S. Скелет кода взят у этого человека.

Остальные уроки:
HTML 5 – Часть 2. Интерактивный холст.

Тема доросла до версии 1.0, скачать можно здесь

Пару дней назад решил создать свою собственную WP-тему с нуля. Так как это мой первый опыт в этом, вышло немного хлопотно – в основном со всеми этими флоатами (float). Части шаблона разъезжались, как дерьмо по лопате, и приходилось затыкать это дело обнуляющими блоками (clear:both). Итак, я все-таки закончил. Отчет и описание темы – под катом.

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

Описание – достоинства и недостатки:
(+) Не содержит ни единой строчки javascript, будет работать если он отключен/не поддерживается (в то же время содержит css2-эффекты)
(+) Предельно легковесна за счет минимализма
(+) Поддерживает виджеты в сайдбаре
(-) Не работает под так называемым браузером IE 7 (в данной версии отдельный файл стилей под него отсутствует)

Скачать ее можно тут. Все валидно. Нужна русская версия – отпишитесь в комментах, сделаю за полчаса.

Разбавлю тематический блог небольшим оффтопом. Школьникам-сеошникам до 16 лет и владельцам ГС к прочтению не рекомендуется.
К созданию своего standalone-блога я созрел недавно – 3 месяца назад, в феврале 2010 года. Цель – сборник практических советов по программированию, верстке и смежным темам. Естественно, с последующей монетизацией – каждый труд должен оплачиваться. Само собой, так как человек в сети я не сильно известный, пришлось заниматься раскруткой. В ходе которой пришлось окунутся в русскую блогосферу – бессмысленную и беспощадную.

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

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

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

У меня обновления довольно редкие, для начинающего блоггера. Раз в 3-4 дня. Но – статьи до последней точки мои, код тоже мой, иначе – ссылаюсь на автора. Считаю это оправдвнием для высокомерия по отношению ко всяким зарвавшимся школьникам и задротам, которым умения и знания заменяет наглость.

В итоге остается констатировать – с распространением интернета, наплыва прыщавых подростков и быдла, делать что-то самому, соблюдать нормы общения – стало “не круто”. Исключение – полузакрытые сообщества типа Хабра и остальные форумы и блоги “по инвайтам”.
P.S. И да, люблю иногда пройтись свежим взягядом по старым статьям, делая косметические изменения
Если что – не удивляйтесь.

Считайте это третьей частью “симбиоза jQuery и WordPress”.
Многие бесплатные WP-темы бедны на эффекты. Я поддерживаю минимализм, но считаю, что проходить мимо некоторых приятных глазу эффектов просто глупо.

Для начала обратите взгляд на форму комментариев. Хотите, чтобы при фокусировке на поле ввода текст расстворялся, а при расфокусировке появлялся снова, если пользователь ничего не ввел (как на Grabr.ru, к примеру)? Это не так и сложно. Потребуется только подключенная к блогу jQuery (как это сделать, читайте здесь)

Сначала html-каркас:

<div class="input-wrapper">
<p><input type="text" name="author" id="author" value="" size="22" tabindex="1" />
<label>Name</label></p>
</div>
<div class="input-wrapper">
<p><input type="text" name="email" id="email" value="" size="22" tabindex="2" />
<label>E-mail</label></p>
</div>
<div class="input-wrapper">
<p><input type="text" name="url" id="url" value="" size="22" tabindex="3" />
<label>Your personal website</label></p>
</div>

Стили CSS:

.input-wrapper{
position:relative;
}
 
label{
position:absolute;
left:5px;
top:1px;
z-index:1;
color:#939393;
}

Блок с отностительным (relative) позиционированием, обрамляющий поле ввода, нужен, чтобы текст надписи (label) не убегал наверх. Ну, и наконец jQuery-код:

jQuery("input").focus(function(){
if (jQuery(this).val() == ''){
jQuery(this).next('label').fadeOut('fast');
}
});
jQuery("input").blur(function(){
if (jQuery(this).val() == ''){
jQuery(this).next('label').fadeIn('slow');
}
});
 
jQuery("label").click(function(){
if (jQuery(this).prev('input').val() == ''){
jQuery(this).fadeOut('fast');
}
});

Ну, и немного CSS на десерт. Закругляем углы у полей и текстовой области (textarea):

input [type="text"], textarea{
border:1px solid gray!important;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
input[type="text"]:hover, textarea:hover{
border:1px solid #808080;
}

IE, конечно (даже восьмой) с углами идет лесом. Вас это удивляет?