Наноблог Артёма Сапегина

Создание файлов и структуры проекта по шаблонам с помощью Grunt

Артём Сапегин — Sat, 28 Apr 2012 08:05:30 +0000

Grunt — это набор инструментов командной строки, облегчающих разработку на JavaScript. Он умеет склеивать и минифицировать JS-файлы, запускать тесты и JSHint, запускать задачи при изменении файлов и даже содержит простейший веб-сервер. Но самое интересное для меня — команда init, создающая файлы (или структуру папок) по шаблону.

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

Например, набрав grunt init:readme, я получаю в текущей папке файлы Readme.md и License.md, в которых уже стоят текущий год, моё имя и т. п.

Шаблон состоит из:

1. Файла templatename.js. В нём можно описать, что должен ввести пользователь; как эти параметры будут преобразованы и т. п. Тут доступны любые возможности JavaScript и Node.js.

2. Папки templatename/root со всеми файлами, которые будут скопированы при выполнении шаблона.

3. Файла templatename/rename.json с описанием правил переименования файлов.

Сами шаблоны должны лежать в ~/.grunt/tasks/init или %USERPROFILE%\.grunt\tasks\init\.

Например, шаблон простейшего HTML-файла может выглядеть так. Файл html.js:

// Описание шаблона, которое можно увидеть выполнив grunt init (список доступных шаблонов)
exports.description = 'Create a simple HTML5 file.';

exports.template = function(grunt, init, done) {

	grunt.helper('prompt', {}, [
		// Пользовательские параметры
		// Имя файла (такой запрос уже есть в Гранте, поэтому нужно вызывать его с помощью grunt.helper)
		// index -- значение по умолчанию
		grunt.helper('prompt_for', 'name', 'index'),
		// Язык (такого запроса в Гранте нет, поэтому нам нужно описать все параметры)
		{
			name: 'lang',
			message: 'Document language',
			default: 'en'
		},
	], function(err, props) {
		// Достаём параметры по умолчанию (находятся в файле defaults.json)
		grunt.utils._.defaults(props, init.defaults);

		// Список файлов для копирования
		var files = init.filesToCopy(props);

		// Список файлов для копирования
		init.copyAndProcess(files, props);

		/// Готово :)
		done();
	});

};

В папке html/root лежит один файл name.html. (Шаблон вымышленный, чтобы показать возможности Гранта. Настоящий есть в репозитории.)

Остаётся задать правила переименования. Файл html/rename.json:

{
	"name.html": "{%= name %}.html"
}

Всё, шаблоном можно пользоваться:

Что ещё посмотреть про Грант:

— Репозиторий на Гитхабе (стандартные шаблоны, описание команды init).

— Набор моих шаблонов.

— Статья автора Гранта Introducing Grunt.

— Статья Meet Grunt: The Build Tool for JavaScript на Nettuts+.

Запуск TortoiseGit из командной строки

Артём Сапегин — Thu, 26 Apr 2012 12:51:58 +0000

Обычно я работаю с Гитом из командной строки, но выбирать файлы для коммита и смотреть логи/диффы удобнее через TortoiseGit. Чтобы не открывать его каждый раз из Проводника, я положил в папку C:\Program Files\TortoiseGit\bin файл tgit.bat с таким содержимым:

@TortoiseProc /command:%1 /path:.

И tgit для запуска из Git Bash:

#!/usr/bin/env sh
TortoiseProc /command:$1 /path:.

Теперь я могу просто писать в консоли tgit commit или tgit log. (На самом деле я сделал ещё одну пару файлов: tgitc.bat/tgitc для ещё более быстрого запуска окна коммита TortoiseGit.)

P. S. Ну а на сервере удобно использовать tig.

Хранение данных в CSS-файлах

Артём Сапегин — Thu, 16 Feb 2012 11:47:23 +0000

Иногда бывает нужно хранить какие-то данные в непосредственно CSS-файле, и иметь к ним доступ из JavaScript. Самый простой и кроссбраузерный способ — использование свойств content и font-family с одинаковым значением (font-family нужен для ИЕ).

Где-нибудь на странице нужно создать служебный элемент:

И применить к нему CSS:

#pony {
	display: none;
	content: 'Pink';
	font-family: 'Pink';
	}

Теперь мы можем легко достать нашу строку:

function getCssString(elem) {
	var value = elem.css('content') || elem.css('font-family');
	return value && value.replace(/"/g, '');
}

alert(getCssString($('#pony')));

Можно посмотреть живой пример.

P. S. Спасибо коллеге Егору Дыдыкину за указание подсказку этого метода.

Создание удобных демостраниц на Гитхабе с помощью сабмодулей

Артём Сапегин — Wed, 08 Feb 2012 14:00:00 +0000

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

Можно добавить ветку master как сабмодуль в ветку gh-pages (адрес репозитория должен быть именно в таком формате, иначе страница перестанет обновляться):

git submodule add git://github.com/sapegin/social-likes.git src
git submodule init

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

cd src
git pull origin master
cd ..
git commit -a -m "Update source."
git push origin gh-pages

P. S. А вот результат.

Долой версии программ!

Артём Сапегин — Wed, 08 Feb 2012 07:16:31 +0000

Недавно я смотрел статистику по браузерам на Мэйл.ру и обратил внимание, как хорошо работает автообновление в браузерах. Хром, Опера — у примерно 90% пользователей последняя версия. Файрфокс пока не успел: последние две версии распространены одинаково, да ещё и 3.6 торчит, который не умеет нормально обновляться. Обратный пример — ИЕ: 9-я версия вышла год назад, но так и не обогнала 8-ю.

Добавим к этому частые релизы (новые версии Хрома и Файрфокса выходят раз в три месяца) и «молчаливое» обновление: то есть без дурацких окон во весь экран и прерывания работы (в Хроме так уже давно, скоро точно так же будет в Файрфоксе).

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

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

Именно такая модель давно применяется в веб-приложениях и отлично работает. Я понятия не имею, какая у Гугл Доков (где я набираю сейчас этот пост) последняя версия, но если там появится что-то интересное, мне это покажут и научат пользоваться.

Что важнее: код или продукт, и нужно ли скрывать свой код

Артём Сапегин — Tue, 17 Jan 2012 08:11:21 +0000

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

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

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

В последнее время я вижу всё меньше причин скрывать свой код. В этом есть немало плюсов, а минусов я пока не нашёл. Например, лучше получается выделять куски, пригодные для последующего использования; можно пользоваться прекрасным Гитхабом бесплатно. Есть и другие причины, но они уже зависят от популярности автора и проекта. (Хорошая заметка по теме — Open Source (Almost) Everything.)

Не надо больше социальных сетей

Артём Сапегин — Mon, 28 Nov 2011 15:21:03 +0000

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

Сейчас я читаю две RSS-ленты (все ЖЖ, естественно, тоже в них), Твиттер и Фейсбук. Плюс на несколько сайтов захожу раз в неделю поглядеть (500px, Dribbble…). В каждой ленте по несколько сотен потоков. По многим причинам это ужасно неудобно.

1. Первая лента — Яндекс Подписки. Её я читаю по будням. Тут в основном про веб-разработку и прочее занудство. Сюда же попадают фотографы, к кому я редко заглядываю под кат (Подписки показывают его только по клику, это удобно). У Подписок есть некоторые недостатки (огромная нескрываемая панель слева и неработающая j/k-навигация, например), но в целом он довольно удобный.

2. Вторая лента — Гугл Ридер. Этой штукой нельзя пользоваться без напильника (в виде плагина minimalist для Хрома) — разработчики налепили столько горизонтальных панелей, что на сообщения просто не остаётся места. Здесь у меня в основном фотографы и фотосайты. Её я читаю раз в неделю.

3. Твиттер. Тут есть одно спасение — Slipstream, который убирает из ленты немало мусора: форскверы, ютубы, трекеры похудания и пробежек, ретвиты отдельных пользователей и всё то, что нормальный человек никогда не опубликует). В Слипстриме у меня уже несколько десятков правил.

4. Фейсбук. До недавнего изменения дизайна ленты читать её было совершенно невозможно. Сейчас уже кое-как можно, правда приходится отписываться от ненужных событий (например, какое мне дело, кто с кем подружился) отдельно для каждого пользователя.

Ещё одна полезная штука — Instapaper. Раньше длинные статьи месяцами висели у меня в браузере, после чего я закрывал их, так и не прочитав. Сейчас я отправляю их в Инстапейпер (плагином для Хрома — это один клик), а раз в неделю мне на Киндл приходит «газета» с подборкой непрочитанных статей.

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

Стиль HTML-кода: HTML, XHTML и снова HTML

Артём Сапегин — Tue, 25 Oct 2011 12:37:35 +0000

Лет 10 назад, когда я только-только начал заниматься веб-разработкой, то считал, что чем короче код, тем он круче (мы же в интернете, фигли). Да и вообще любил всякое ковбойство. Код я писал примерно такой:


general protection fault group

Яваскрипт не отставал: односимвольные имена переменных, никаких комментариев и всё такое.

Потом я немного поумнел и понял, что так нельзя. Как раз тогда в моду вошёл XHTML с его строгим XML-синтаксисом, и я полностью перешёл на него. Закрывающий слэш, конечно, раздражал, но надо так надо.

А потом внезапно пришёл HTML5, и я в один день отказался от XML-синтаксиса. Как-то неожиданно пришло понимание, что суть не в следовании навязанным кем-то правилам (вспомним бессмысленные кнопки XHTML 1.0 и CSS 2.0, которые не так давно ставили на свои сайты все уважающие себя веб-разработчики), а в понимании того, что делаешь. Нет ничего хорошего в несемантичной вёрстке, даже если она проходит любую мыслимую валидацию. Но и нет смысла писать лишние закорючки, если есть более простой стандарт. При этом никто не запрещает закрывать теги и писать атрибуты в кавычках, хоть стандарт этого и не требует, просто потому, что это удобно.

О простых и сложных инструментах

Артём Сапегин — Wed, 12 Oct 2011 07:58:02 +0000

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

С одной стороны нет смысла ставить/изучать Фотошоп, если задачи ограничиваются кадрированием и уменьшение для веба (сам до недавнего времени пользовался на работе сначала Пейнтом.Нет, а потом Фотошопом Элементс). Но с другой стороны, опытный фотограф в сто раз быстрее сделает это в Фотошопе, потому что Фотошоп он отлично знает. Ему нет смысла изучать ещё одну программу, которая позволит ему делать то же, что и Фотошоп, но будет запускаться на сотую секунды быстрее.

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

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

Чем отличается разработка собственного кода от использования чужой библиотеки?

Артём Сапегин — Wed, 20 Jul 2011 07:08:17 +0000

В первом случае вы полдня пишете код без остановки; а во втором — полдня ищете, какие нужно написать две строчки, что всё заработало (если библиотека хорошая, вы их находите).

Тестирование моделей с FileField/ImageField в Django

Артём Сапегин — Wed, 13 Jul 2011 07:07:37 +0000

Оказалось, что тестирование моделей с файлом (поле FileField) или картинкой (поле ImageField) в Django не так уж очевидно. Допустим, у нас есть модель:

class MagicPony(models.Model):
	photo = models.ImageField(_('Photo'), upload_to='uploads/ponies')

При загрузке файла через HTML-форму проблем не возникает, но, чтобы загрузить изображение с диска, нужно дополнительно обернуть наш файл в объект File:

from django.core.files import File

class PonyTest(TestCase):
	def test_magic_power(self):
		file = open('pony.jpg', 'rb')
		file = File(file)
		pony = MagicPony.objects.create(photo=file)

		# Теперь можно писать любые проверки (наличие магической силы,
		# количество копыт и т. п.)

Курс по подготовке идиотов (цитаты из книги «Искусство оформления сайта»)

Артём Сапегин — Mon, 04 Jul 2011 11:20:36 +0000

Мне всегда было интересно, где люди учатся делать те самые безвозвратно ужасные сайты, которыми полнятся интернеты. И кажется я нашёл ответ. Это книга С. Н. Бердышева «Искусство оформления сайта», изданная издательством Дашков и Ко в 2010 году. Не судите об этой книге по обложке — она совершенно не даёт представления о том, насколько она ужасна. Больше всего в книге удивляют пересказы умных книг о веб-дизайне и юзабилити с последующим созданием страницек-уродцев, полностью им не соответствующим. Судя по содержанию, книге уже лет 10, хотя все скриншоты сделаны в Висте, а список литературы составлен из книг 2008 года издания. Кстати, у автора почти два десятка книг о различных аспектах рекламы, маркетинга, бизнеса и других предметов. (Кстати, меня тоже пытались учить плохому, но я удержался.)

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

(После того, как ссылка на пост появилась на Хабре, какой-то шутник заново зарегистрировал сайт, на который ссылается автор книги, и разместил там всё правду о ней.)

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

Готовы к работе? Тогда отложите в сторону книгу, идите в магазин по продаже программного обеспечения («софта») и отыщите там диск со стандартным набором программ для веб-дизайна, но чтобы при этом в комплект обязательно входила великолепная программка для новичков (и не только!) под названием Web Page Maker, что означает «Конструктор веб-страниц». Установим эту программу на ваш компьютер, что совсем нетрудно сделать, так как все указания есть в прилагаемом файле Readme.txt. Вы спросите, пригоден ли ваш «комп» для профессионального, коммерческого веб-дизайна. Уместный вопрос, и ответ на него можно найти в дальнейшем. А пока не станем бежать впереди паровоза, потому что ученическую страничку сделать можно на всяком ПК, где установлена Windows XP, Windows Vista или Windows 2000. Скорее всего, у вас какая-то из этих операционных систем.

«Хвостик» после имени файла, отделяемый точкой, носит название расширения. Веб-дизайн, будучи синтетическим видом искусства, совмещает в себе:
> фотографии, которые существуют в виде файлов с расширением *.jpg (*.jpeg) или, значительно реже, *.gif (другие форматы графических файлов в Сети не применяются);

Основу, тело странички составляет файл, приспособленный для несения текста и скрепляющий все остальные файлы. В современном Интернете он чаще всего имеет формат HTML или PHP, но может обладать расширением *.mhtml, *.xhtml и т. д. Мы с вами будем учиться созданию наиболее простых и одновременно наиболее широко редставленных в Сети страничек с расширением *.html. Осилить конструирование остальных будет несложно самостоятельно после знакомства с html-форматом. Почему? Да потому, что в основу веб-дизайна изначально положен особый язык программирования, который так и называется — HTML…

В приведенном примере использовался явно принцип доминирования физической структуры над логической, то есть рисунки рассортированы по их свойствам, главным образом по «весу», как называется объем занимаемой памяти ПК (в байтах).

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

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

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

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

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

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

Концепция юзабилити, то есть удобства на грани искусства, достигла апогея в своем развитии в трудах Я. Нильсена и вряд ли продвинется дальше. На этом западная традиция угасает, уступая место восточной. И это логично! Ведь Нильсен и вслед за ним другие дизайнеры, которые интуитивно следуют духу западной традиции, требуют достижения максимальной простоты при верстке веб-страничек. Но простота бывает разной, очень часто она оказывается хуже воровства. Понятно, что традиция зашла в тупик, выйти из которого не сможет. А вот дизайн сможет, он станет развиваться в русле восточной традиции, а если говорить конкретнее – дальневосточной, поскольку сформировалась она в искусстве Индии, Китая, Японии и Юго-Восточной Азии. Две ключевые формулы успеха, которые препятствуют превращению простоты в воровство, носят японские названия ваби-саби и канзай-инжиниринг. На их основе современные «вебисты» стремятся построить дао дизайна.

Задача чжан-компонентов сводится к тому, чтобы накапливать чи. Они аккумулируют, хранят, перерабатывают и очищают энергию сайта в соответствии с установками шэнь. Сюда относятся:
> HTML-код;
> информационное наполнение (контент).
Задача фу-компонентов сводится к тому, чтобы оптимизировать потребление и усвоение чи. Эти компоненты в их совокупности нужно называть мастерской сайта по поглощению, усвоению, трансформации и выведению энергии. Сюда относятся:
> CSS-сценарии;
> скрипты;
> динамические эффекты;
> графика и цветовое решение;
> шрифты.

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

Прежде всего, поговорим о «мозге» компьютера, то есть о центральном процессоре. Как вы помните, он находится в системном блоке и управляет всеми устройствами, к системному блоку подсоединяемыми (так называемая периферия), по программе, написанной людьми. Проверьте технические параметры вашей ПЭВМ: скорость действия безупречного процессора должна составлять 1,5—1,7 ГГц (скорость электронных устройств измеряется в герцах, поскольку выражается через частоту передачи данных).
Подобную скорость развивают в первую очередь Pentium 4 и Athlon.

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

Блокнот. Другой наш верный друг и соратник — это Блокнот. Многие юзеры, далекие от работы с сайтами, незаслуженно презирают его, как «никчемную» программу. Разумеется, он не обладает такими возможностями в работе с текстом, как знаменитый Microsoft Word, однако для веб-дизайнера служит отличным вспомогательным инструментом. Ни от какой другой программы такой помощи, как от Блокнота, особенно при быстром внесении правки в уже сверстанные веб-странички и при прочтении html-кода чужих веб-страничек.

W.Y.S.I.W.Y.G. имеют много минусов, но на начальном этапе следует пользоваться ими, потому что W.Y.S.I.W.Y.G. — это быстро, эффективно, наглядно. С редактором W.Y.S.I.W.Y.G. вы растете как веб-художник.

Чем пользуюсь лично я? Всегда и только — комбинацией программ. Для достижения большой скорости работы начальная верстка выполняется в Web Page Maker или, при высоких требованиях к проекту, — в Microsoft Expression Web. Для экспериментирования, опробирования новых тем, тренировки своего вкуса удобно применять Page Mill, Studio Line, Front Page и некоторые аналогичные программки. Доработка html-кода выполняется в любом приличном редакторе <…> Перед завершением проекта полезно свежим взглядом просмотреть код страничек в Блокноте.

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

Лапидарность при составлении контента главной странички (равно как и некоторых других) — это и великая радость и большое зло для веб-дизайнера. Радость потому, что маленький текст легко и быстро читается и возбуждает интерес, желание продолжить ознакомление с ресурсом. Зло состоит в том, что поисковая система тем быстрее и легче находит ваш сайт, чем крупнее и богаче его контент. Сразу скажу, что эта проблема решается использованием скрытого текста. Дизайнер берет большой кусок текста, объемом около 500 знаков, и вставляет его в открытый html-код главной странички сразу после слова (тэга) . Чтобы этот текст был скрытым, он заключается в кавычки вида: . На страничке этот кусок не объявится, зато поисковик будет его свободно читать и засчитывать. (Убрав лишнее, возмести ущерб!)

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

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

И еще одно замечание! Не увлекайтесь скрытыми текстами, поскольку они портят html-код, причем портят в разных отношениях.

«ПЕРВАЯ, ПРЕДЫДУЩАЯ, СЛЕДУЮЩАЯ, ПОСЛЕДНЯЯ» — верхняя и «Вы на <…>-й странице. Все страницы: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10» — нижняя. И рад бы сделать удобнее, но это предел вирутального комфорта.

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

Первая описывает рисунок: . Кстати, сразу видно, что перед нами код, сгенеренный каким-то редактором. Веб-дизайнер написал бы короче и проще: .

Соответственно тэг отображает дату закрытия страницы.

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

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

Например, вместо «http://obrazcats.narod.ru/index.html» достаточно написать просто «index.html», и компьютер переместит юзера куда надо. Однако подобная простота хуже воровства. Мой собственный опыт показывает, что без указания папки легко находится единственно и только главная страничка, иногда еще несколько. Более трех адресов компьютер уже обслуживает с трудом, нередко отмечаются сбои.

Все эти дожди, листопады, метели и т. д. страшно мешают читать текст. Кое-кого попросту раздражают. А на некоторых броузерах еще и не видны вдобавок. Вместо них появляется суровое предупреждение: «Активное содержимое страницы может ПОВРЕДИТЬ ВАШ КОМПЬЮТЕР» (хотя на самом деле не может). Неопытный юзер на ваш сайт после пережитого испуга ни за что в жизни не вернется.

Напоследок скажем несколько слов про допустимые объемы контента. Здесь справедливо правило «магической семерки», как называется ключевой принцип минимизации текста, найденный опытным путем неутомимыми рекламистами: максимальное число букв в слове — 7, максимальное число слов в предложении — 7, максимальное число предложений в тексте — 7, максимальное число коротких абзацев (по 2—3 предложения) на странице — 7.

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

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

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

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

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

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

Заметим, что приведенный здесь пример неудачен. Вместо слова «Очистить», которое поставлено намеренно, нужно написать «Сброс» или «Очистить форму». Дело в том, что два одинаковых по длине слова на букву «О» (отправить и очистить), расположенные на двух соседствующих кнопочках послужат причиной множества досадных ошибок, отчего ваш сайт невзлюбят посетители.

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

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

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

Анимация цвета с помощью плагина jQuery.Color()

Артём Сапегин — Wed, 22 Jun 2011 08:12:57 +0000

Недавно команда jQuery выпустила бета-версию обновлённого плагина для анимации цвета jQuery.Color(). Плагин позволяет работать с цветовыми моделями RGBA и HSLA; читать и изменять (как на абсолютные значения, так и относительно текущего) отдельные компоненты цветов; анимировать цвет фона, текста и рамки.

Например, можно плавно изменять оттенок (hue) от 0 до 359 (т. е. от красного до красного со всеми остальными цветами между ними). (Первый пример по ссылке.)

(function animate() {
	var block = $('#c1');
	block.animate({backgroundColor: $.Color(block.css('backgroundColor')).hue('+=179')}, 3000, animate);
})();

А вот более полезное применение: обратная связь при клике. Блок как бы зажигается на мгновение. Это достигается плавным увеличением яркости (lightness) на 40%. При этом скрипту не нужно задавать никакие цвета: он сам определяет и начальный цвет, и конечный. Я недавно использовал такой эффект в пятизвёздочном рейтинге — смотрится хорошо. (Второй пример по той же ссылке.)

$('#c2').click(function(e) {
	var block = $(e.target);
	var color = $.Color(block.css('backgroundColor'));
	block.animate({backgroundColor: color.lightness('+=0.4')}, 300, function() {
		block.animate({backgroundColor: color}, 300);
	});
});

Подсветка кода в WordPress с помощью highlight.js

Артём Сапегин — Tue, 07 Jun 2011 09:11:24 +0000

Решил заменить в блоге серверную подсветку кода (плагин wp-syntax) на клиентскую (highlight.js). Знаю, что для последнего уже есть несколько плагинов для Вордпресса, но мне показалось, что проще самому написать 10 строк кода.

Итак, подключаем highlight.js. В header.php темы блога подключаем CSS с выбранной цветовой схемой:

В footer.php подключаем сам скрипт и инициализируем его:

Делаем табуляцию в 4 пробела — добавляем в CSS следующее:

.indent {
	display: inline-block;
	width: 2.2em;
	}
pre {
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	white-space: pre;
	white-space: pre-wrap;
	white-space: pre-line;
	word-wrap: break-word;
	}

Параметр tab-size нужен, чтобы при загрузки страницы не было заметно, как уменьшаются отступы. К сожалению, работает это пока только в Файрфоксе и Опере. А white-space позволяет длинным строкам переноситься.

Код уже должен раскрашиваться, но есть одна проблема: исчезает табуляция. Для её решения положим в папку wp-content/plugins php-файл c любым именем (у меня такой файл уже был — я храню в нём всякие хаки для Вордпресса).

Теперь нужно просто включить этот плагин в админке Вордпресса.

CSS3 transition фона: кое-какие детали

Артём Сапегин — Wed, 01 Jun 2011 15:09:34 +0000

Читая книгу «Stunning CSS3» обратил внимание, что стандарт CSS3 запрещает делать transition свойства background. Можно использовать только background-color, background-image (почему-то только для градиентов) и background-position. Однако, как было написано в книге, большинство браузеров должны понимать и просто background.

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

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

Проверку переходов background-position оставляю читателю в качестве домашнего задания.