Некоторое время назад мне потребовалось «красиво» оформить логи бесед в жаббире. Поскольку рисовать я не умею вовсе, я обратился за подмогой к мирозданию. Поиск по готовым решениям открыл для меня малоизвестную, но, безусловно, заслуживающую внимания библиотечку. Строго говоря, это не библиотека. Это тщательно написанная и выверенная каскадная таблица стилей, позволяющая имитировать iPhone-интерфейс в браузерах.
Координатные данные проекта UiUiKit (Universal iPhone UI Kit):

• Сайт автора: www.minid.net
• SVN URL: code.google.com/p/iphone-universal/source/checkout
• Download: code.google.com/p/iphone-universal/downloads/list

Оригинально библиотека заточена под web-приложения именно для iPhone, поэтому всякий CSS3+ ограничивается указанием свойств только для webkit'а. Я пропатчил CSS директивами для остальных и развернул демонстрационную страничку, чтобы можно было сразу потыкать в элементы интерфейса.
Выглядит симпатично (на картинке в начале топика — скриншот моего браузера). Приятного использования!

Здравствуй, хабраюзер!

Сидя недавно и листая developer.mozilla.org наткнулся на описание -moz-calc();
Вкратце, данное свойство используется для расчёта выражений прямо в CSS.
Тут-то и родилась идея сделать калькулятор, который бы считал через это хитроумное свойство.
Что из этого вышло, можно судить по этому скриншоту:

С помощью @font-face вы можете загружать значки (иконки) не в виде PNG или GIF, а внедрить внутрь шрифта и подгрузить пользователю через директиву @font-face. CSS3 позволяет поворачивать такие значки, добавлять тени или даже анимированные эффекты с плавным изменением цвета при наведении курсора мыши (раньше такое было возможно только на Flash).

Вот здесь инструкция по использованию набора шрифтов IconPack (.eot, .woff, .ttf, .svg) и загрузке значков с помощью псевдо-элемента :before и тега span.

<style>  
.staricon {  
  font-family: 'IconPack';  
}  
.staricon:before {  
  content: 'a';  
}  
.show {  
  display:block;  
}  
.hide {  
  display:none;  
}  
</style>  
  
<div class="staricon">  
  <span class="show">star</span>  
</div>

Здравствуйте, уважаемые хабравчане!
Буквально пару дней назад мы опубликовали первую часть топика, посвященного верстке e-mail рассылок, а конкретнее — использованию изображений. Вторая часть посвящена ещё четырем «подводным камням» верстки, которые нам удалось обнаружить.

Второй камень — «Якоря»

Если рассылка большого объема на несколько страниц, появляется необходимость навигации внутри рассылки. Как известно, для такой навигации на html-странице используются «якоря».

Добрый день, уважаемые хабравчане!
Не так давно мы вплотную столкнулись с задачей верстки e-mail рассылок. Это не самое приятное занятие, но многие компании активно используют корпоративные рассылки, и верстка становится всё более актуальной задачей.

Казалось бы, что сложного — сверстать простую страничку? Но есть «подводные камни», которые могут поставить в тупик даже опытного верстальщика. Именно таким «камням» и посвящен пост (оговоримся сразу — все эксперименты, описанные в посте, проводились под Windows с тем ПО, которое есть у многих под рукой).

Первый камень — Изображения

Практически каждая рассылка содержит картинки. Логотип, шапка, фотографии, иконки соц.сетей…
Есть 2 способа использования картинок:

Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.



Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.

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

1. Создать папку для сайта
2. Создать конфигурационный файл с именем будущего домена
3. Включить сайт специальной опцией
4. Перезагрузить Apache
5. Прописать наш домен в файле hosts

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

В стандартные VESA пазы которые есть почти у всех мониторов. Несложно. Надежно. Красиво.
С картинками и чертежами.

PlayN и «Как Rovio Angry Birds на HTML5 писала»

На прошедшей конференции Google IO в Сан Франциско была представлена библиотека PlayN. Сессия называлась — Kick-ass Game Programming. И эта технология действительно заманчиво выглядит. Только представить, что пишешь игру на одном языке на любой ОС и используя любимые IDE, а на выходе получаешь игру под HTML5/Android/Native/Flash(!). PlayN свободный и с открытым исходным кодом, а еще на нем была сделана Angry Birds (HTML5).

Созданый Райаном Далем в 2009 году, Node.js — относительно новая технология, завоевавшая в последнее время большую популярность среди веб-разработчиков. Однако, до сих пор не каждый знает, что на самом деле Node.js это серверная JavaScript среда, использующая асинхронную событийную модель. Что это означает? Все просто: это среда, которая предназначена для написания масштабируемых, высокопроизводительных приложений. Почти как Ruby’s Event Machine или Python’s Twisted, но гораздо глубже — JavaScript реализовывает цикл событий, на уровне самого языка, а не как отдельная библиотека.



И это еще не все: то, что действительно круто в Node.js — это тысячи модулей, доступных для любых целей, а также активниешее сообщество этого молодого проекта. В этом обзоре вы найдете самые полезные ресурсы по Node.js, от просто удобных инструментов и подробных руководств, до углубленных статей и ресурсов о этой перспективной технологии. Используете ли вы Node.js? Поделитесь опытом в комментариях к этотому посту!

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

Для меня дизайн — это устройство, внешнее устройство. Никто же не додумался доверить Пикассо разработку руля для гоночного автомобиля. Почему же сайты рисуют все, кому не лень? Слово дизайн, прежде всего, должно ассоциироваться с удобством. Функциональность — это первая задача дизайна.

Каждый сайт должен иметь favicon. Если вы до сих пор не сделали значок для вашего сайта — сделайте, теперь это еще проще!
Faviconist — новый favicon генератор от Michael Mahemoff.

Вам больше не нужен Photoshop для создания простого значка. Как Mahemoff пишет в своем блоге: Faviconist для 95% людей, которых устроит микро-дизайн их иконки, остальным все равно придется прибегнуть к Photoshop.

:hover

В очередной раз просматривая плагины для реализации всплывающих подсказок, наткнулся на замечательный пост.
Ничего сверхсложного и сверхсекретного в реализации не было, но она мне понравилась своей простотой и отсутствием javascript'a.
Обмозговав возможное применение, решил что на самой подсказке тоже могут быть подсказки, на подсказках второго уровня, могут быть подсказки 3его уровня и т.д. Можно сделать интерактивную блок-схему!

Начало

Иногда возникает необходимость в окне «неправильной» (не прямоугольной) формы, будь то заставка(splash screen), или виджет рабочего стола.

Давно уже взял себе за правило вносить все изменения на сайт через код. Теперь добрался и до панелей (модуль panels).
Если необходимо импортировать большое количество панелей то можно воспользоваться модулем features. Единственное что не удобно, так это то что этот модуль экспортирует все панели в один файл, и потом с этим файлом довольно-таки сложно работать.

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

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

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

Я хочу создать ОС на базе Linux.
Сразу предупреждаю: был бы XVIII век, всех тех, кто для основы своей будущей системы выбирает другой развитый дистрибутив (и, не дай Бог, популярный...) ждала бы виселица. Пост именно про создание системы с нуля, а значит, всякие Slax и Linux Mint мы трогать не будем.

Автор блога Hack A Day Брайан Бенчофф (Brian Benchoff) разобрался в алгоритме генерации QR-кодов (стандарт ISO 18004) и составил инструкцию, как можно внедрить в QR-код произвольное изображение. Например, логотип фирмы.

Для работы использовались генератор QR-кодов и Microsoft Paint для попиксельного редактирования.

Шестая версия QR-кодов представляет собой квадрат со стороной 41 пиксел.



На картинке показан шаблон QR. На нём чёрные пикселы всегда обязаны быть чёрными, а белые обязаны быть белыми. Серая зона свободна для творчества.

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

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

Распределенные системы контроля версий (DVCS) постепенно замещают собой централизованные. Если вы еще не используете одну из них — самое время попробовать.

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

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