Тег: дизайн

…плюс викификация всей страны…

Уже больше года пользуюсь своей личной вики. Очень удобно писать статьи, хранить всяческие сниппеты и заготовки, записывать мысли, и, самое главное, к ней есть доступ отовсюду, где есть интернет. Я знаю про существование Evernote и подобных сервисов, но вики для меня как-то удобнее.

mozzy's wiki

На место моей личной вики претендовали три популярных вики-движка: MediaWiki, PmWiki и DokuWiki. Существует ещё «больше 9000» вики-движков, но все они по тем или иным причинам были отвергнуты. :)

Из вышеназванных MediaWiki — самый функциональный и навороченный, на нём работает Wikipedia, это уже о многом говорит. Но для моих целей он оказался слишком тяжёлым…

Оставалось два движка, примерно равных по функциональности: DokuWiki и PmWiki. Оба для хранения данных используют файлы, а не БД как MediaWiki, что немного быстрее.

Сначала пользовался DokuWiki, через некоторое время ради эксперимента перелез на PmWiki, а потом, сейчас уже не помню почему, вернулся опять на Доку и… Обратно уже не захотелось. :) Очень удобный синтаксис, качественный код движка — делать для него скин было одно удовольствие.

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

На данный момент в моей вики для всеобщего прочтения открыто две страницы: HTML Code Style и CSS Code Style (ссылки на них были/будут приведены в статьях).

3

Кофе с сахаром или обзор редактора Espresso

Когда вышел редактор Coda, я был поражён его интерфейсом и удобстовом. И всё меня в нём устраивало, но вот тут в одной из RSS-лент я увидел сообщение о выходе новой версии редактора Espresso 1.1…

Espresso

И вот уже два месяца я пользуюсь «Эспрессой» и не могу нарадоваться. Вот, решил поделиться радостями в небольшом, сравнительном с Coda, обзорчике.

Кстати, это продукт компании Macrabbit. Да-да, именно они выпустили удивительный CSSEdit, которым, правда, я так и не смог пользоваться из-за непобедимой привычки писать CSS ручками.

Основное окно Espresso

Основное окно Espresso

Что меня подкупило в Espresso:

  • Полная поддержка Zen Coding.
  • Наиудобнейшая публикация сайтов.
  • Очень удобный и минималистичный интерфейс.
  • Шустрый редактор с быстрыми подсказками и сворачиванием кода.
  • Навигатор.
  • Автопубликация.
  • Возможность опубликовать папку из контекстного меню (странно, но такой функции до сих пор нет в Coda, там можно выбрать несколько файлов для публикации, но папку — никак).
  • Удобная работа с проектами.

Недостатки по сравнению с Coda:

  • Меньшие возможности и производительность поиска по проекту.
  • Не очень удобные сниппеты. В Coda они появляются во всплывающем окошке, что очень удобно. В Espresso же они ограничены хоть и красивым, но уж слишком компактным жёлтым листочком в панельке Tools.

То, чего нет в Espresso и есть в Coda, но чем я не пользуюсь:

  • SVN-клиент. Пользуюсь клиентом Versions, который по идее заслуживает отедьной статьи. :)
  • Terminal. Системного Terminal вполне хватает.
  • Books — встроенный браузер по справочникам, успешно заменяется Safari с гуглом.

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

Ну и немного подробнее опишу фишки, которые мне очень понравились:

«Сахарный» Zen Coding

Забавные эти ребята из MacRabbit, плагины для Espresso назвали Sugar. Один «сахар» уже сразу встроен в редактор и называется TEA (расшифровывается как «Text Editor Actions»). Эспрессо, сахар, чай? Что ещё? :) Этот плагин добавляет TextMate-овские экшны для HTML, горячие клавиши, и, что самое главное, полную функциональность Zen Coding.

Про Zen Coding не написал только ленивый веб-разработчик, так что не буду в подробностях описывать все возможности, скажу только что вот эту строку: div#header>h1#logo+div#nav>ul>li.n$*5>a можно в одно нажатие клавиш превратить в:

<div id="header">
	<h1 id="logo"></h1>
	<div id="nav">
		<ul>
			<li class="n1"><a href=""></a></li>
			<li class="n2"><a href=""></a></li>
			<li class="n3"><a href=""></a></li>
			<li class="n4"><a href=""></a></li>
			<li class="n5"><a href=""></a></li>
		</ul>
	</div>
</div>

Очень круто, скорость написания HTML возрастает в разы. Если заинтересовались, то вам прямая дорога на страницу проекта за плагинами и документацией. :)

Публикация в Espresso

Одна из проблем заливки файлов на FTP-сервер в редакторе Coda заключается в том, что файлы на удалённый сервер только заливаются, а переименование или удаление локальных файлов в проекте не отслеживаются и они остаются лежать на удалённом сервере, что приводит к «засорению» сервера ненужными файлами. По всей видимости, эти изменения предлагается делать вручную. Но когда проект большой сложно уследить за всеми изменениями.

В Espresso эта проблема решены добавлением во встроенном FTP-клиенте функций Update, Merge и Mirror.

Update in Espresso

При нажатии кнопки Review локальные файлы проекта, сравниваются по дате изменения с лежащими на удалённом FTP-сервере. По окончанию процесса сравнения предлагается изменённые файлы и папки залить, скачать, либо удалить. При нажатии кнопки Publish происходит синхронизация. Причём работа с FTP идёт несколькими потоками — разница в скорости закачки по сравнению с Coda видна невооружённым глазом. :)

Publish in Espresso

Некоторые проекты по различным причинам могут быть не настроены для локального выполнения, поэтому приходится просматривать изменения удалённо. В этом случае очень удобна фича Quick Publish, включаемая для отдельных файлов. Я включаю обычно для style.css. Вношу изменения, нажимаю горячую клавишу сохранения — и в эту же секунду файл уже залит на FTP. В Coda же приходилось после каждого сохранения нажимать на иконку закачки рядом с файлом.

Quick Publish in Espresso

Редактор

Субъективно редактор работает быстрее чем в Coda. В HTML и CSS работает автоотступы, подсказки для кода появляются быстрее чем в Coda. Присутсвует возможность сворачивания кода, которой в Coda нет. В остальном редакторы почти идентичны.

Hints in Espresso

И ещё из мелочей

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

Вертикальная область Workspace для меня гораздо удобней горизонтальных вкладок в Coda. В последней проблема заключается в том, что когда открыто много вкладок, то переключение между ними становится затруднительным из-за малого размера вкладки и обрезанного названия файла. В Espresso список рабочих файлов выводится в вертикальной панели Workspaces, которая находится над списком всех файлов проекта. Если количество открытых файлов превышает определённое количество, то появляется прокрутка.

Workspace in Espresso

В Espresso можно просто взять и вытащить вкладку в отдельное окно, как в Safari:

Drag tab in Espresso

Цена

Espresso стоит $79.95 против $99 за Coda.

P.S. Мне кажется, пришло время, когда компания Panic (создатель Coda) должна оправдать своё название — начать паниковать и срочно выпустить Coda 2, а то все перебегут как я. :)

P.P.S. А ещё скоро обещают TextMate 2. Первый я пробовал (да, это тот самый редактор ради которого многие девелоперы переходят на Mac и куча недоклонов которого была сделано под Windows), и знаю о его возможностях. Не самая удобная работа с проектами, отсуствие встроенного FTP-клиента/паблишера, да тот же Zen Coding поддерживается не полностью. Все нужные мне возможности, которые были в бандлах, уже реализованы в плагине TEA для Espresso. В общем, подружиться не удалось.

1

CSS-хаки для Internet Explorer, Firefox и Opera

IE6. Как много в этой аббревиатуре для сердца верстальщика слилось… :lol: Ежеминутно со всех сторон света на всех языках мира доносятся тысячи проклятий в адрес разработчиков этого замечательного браузера. Но сегодня постараемся обойтись без этого. Хотя, иногда задумываешься, а ведь не было бы IE — как же было бы скучно, да и верстальщикам платили бы меньше. :-D

IE7 тоже тот ещё продукт, но хоть PNG с прозрачностью отображает нормально. А вот IE8 уже гораздо больше любит стандарты, но всё равно жуткий тормоз… Ну вот и как после этого хорошо относиться к продуктам Microsoft? Так, я же не хотел! :!:

В этом посте я собрал все CSS-хаки, что смог найти в сети. Сам стараюсь их не использовать, за исключением редких случаев. Один случай как раз был недавно — замечательная Noname CMS заказчика автоматом вырезала все комментарии из HTML-шаблонов (в том числе и условные, в которых были стили для IE6). Ну чтож, пришлось переделать на хаки…

Начнём с нашего «любимого» браузера:

Internet Explorer 6

.class { _color: #666; }

Internet Explorer 6 и 7

* html .class { color: #666; }
.class { *color: #666; }

Internet Explorer 7

*:first-child+html .class { color: #666; }
*+html .class { color: #666; }
html>body .class { *color: #666; }

Internet Explorer 8

.class { color /***/: #6669; }

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

Firefox

@-moz-document url-prefix() {
	.class { color: #666; }
}

Opera

@media all and (min-width: 0) {
	.class { color: #666; }
}
.class, x:-moz-any-link { color: #666; }
*|html[xmlns*=""] .class { color: #666; }
html:first-child .class { color: #666; }

.class можно заменить вашим названием или вообще любым элементом, соответственно, вместо color: #666; может быть любое свойство.

Внимание! Использование большинства из этих хаков приведёт к ошибке валидации CSS-документа, что не очень страшно, но всё равно настоятельно рекомендую использовать вместо хаков условные комментарии и отдельные CSS-файлы для разных браузеров:

Условные комментарии (Conditional Comments)

<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]><link rel="stylesheet" href="lteie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="ie8.css" /><![endif]-->

1 подключится во всех браузерах.
2 подключится в Internet Explorer, версия которого меньше или равна 7.
3 подключится только в Internet Explorer 8.

4

Цветовая дифференциация админок

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

Синяя тема админки WordPress

Синенькую тему для этого блога
Серая тема админки WordPress

…и серенькую — для фотоблога

К сожалению, по-умолчанию темы всего две, так что для тех, у кого блогов больше, рекомендую расширение Easy Admin Color Schemes. Появляется ещё две темы (красная и зелёная) и возможность создавать свои.

Эпичное сравнение интерфейсов браузеров

Война браузеров продолжается. Страсти накаляются. Год назад масла в огонь подлил Google, выпустив Chrome — потрясающе быстрый и удобный браузер с приятным интерфейсом, вобравший в себя все удачные решения остальных браузеров. Не побоюсь признаться, сам перешёл на рабочей машине с любимого Firefox (которым пользовался много лет, начиная ещё с Mozilla) на Chrome, спустя полгода после его выхода. Перешёл бы раньше, но очень не хватало плагина Xmarkrs для синхронизации закладок…

После выхода Chrome разработчики других браузеров немного забеспокоились, ведь Хром значительно опережал по быстродействию их детища. И активно занялись ускорением своих движков, что привело к тому, что сейчас последние версии Safari, Firefoх и свежая альфа Opera 10.5 приближаются по скорости к Chrome, и на этом фронте силы постепенно уравниваются. Ребята из Microsoft не беспокоятся, их «детище» до сих пор самое медленное в мире, и в последней, восьмой версии браузера мало что изменилось…

И вот начинается «битва» на другом фронте… Интерфейс. Я сделал кучу скриншотов различных браузеров в двух операционных системах с комментариями:

Браузеры под Mac OS

Safari 4 for Mac

Компактный и минималистичный интерфейс

Ещё четырнадцать скриншотов

5

Структура HTML

Так, блог ведь о дизайне, вёрстке и фотографии. О фотографии есть, о дизайне совсем мало, о вёрстке вообще ничего. :) Исправляемся!

Структура HTML

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

Ну вот, опять…

Сделал четвёртую версию дизайна моего уютненького бложика. Всё это время, пока я допиливал дизайн (более трёх месяцев), бложик был закрыт для всеобщего доступа, и мог посещать его только я. Посещал каждый день, писал посты. :D Хорошо хоть комменты сам себе не оставлял и сам себе не отвечал. Так уж и быть, решил открыть. :) 1300 строк css-кода… Рекорд.

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

P.S. Теперь бложик отзывается по новому домену mozzy.ru, со старых (mzz.su, koromyslov.ru) работает редирект. Фотоблог, соответственно, теперь по адресу foto.mozzy.ru.

UI

Полгода назад делал интерфейс для софтины под Windows Mobile, которая изначально должна была выполнять только одну функцию — показывать курсы валют на рабочем столе. Разработку софтины прекратили как раз в тот момент, когда я доделал дизайн. Ну, думаю, и хрен с ним — поместил дизайн в архив. Вчера же, в очередной раз производя раскопки в закромах своего необъятного винчестера, он был найден:

Экран «Today»

Экран «Today»
Выбор валют. Просмотр курса за определённый промежуток.

Выбор валют. Просмотр курса за определённый промежуток.
UrMate

Курс за последний год. Эбаут (программа должна была называться по-другому — вдруг чо). :)

Афиша «Metal Warriors»

Сделал афишу для грядушего «культурного мероприятия» в нашем «культурном» клубе «Перестройка»:

Афиша «Metal Warriors»

Афиша «Metal Warriors»

Может быть, даже пойду. :)

3

Сделай!

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

Так и вышло:

Новый сайт PL

Предыстория

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

Вот так:

Логотип PL

Сайт, который мне предстояло переделывать, работал на движке DotNetNuke. Слава богу на новом сайте от этого движка решено было отказаться. Но в пользу голого ASP.Net… :D Что тоже не намного лучше, ну да ладно.

Выглядел сайт так:

Старый сайт PL

Ну чтож… Нарисовал пару шаблонов в Фотошопе, дизайн одного из них был одобрен. Свёрстал, перерисовал схемы, заполнил присланным контентом…

И тут… Вот уж чего я не ожидал…

1. «Сделай во всех текстах выравнивание по ширине (Justify)!»
Ну вот, опять…
«Не надо на веб переносить книжные приемы. На бумаге выравнивание по сторонам помогает глазу не отвлекаться, при этом у вас есть инструменты воздействия на набор: переносы, разрядка, масштаб шрифта, настройка минимальных и максимальных пробелов и пр. На вебе у вас таких инструментов нет, вот и не надо формализма. Align=»left» нормально работает.»
Сергей Федоров, Студия Артемия Лебедева

Замечательная статья про justify на хабрахабре: Выключка по ширине, или Убей «text-align: justify;».

Ссылки на статью и объяснения были приведены — бесполезно. :( Web — это не документы Word! В Web не работают переносы. В итоге мы видим огромные дырки, например в новостях и отзывах. Это выглядит убого и непрофессионально.

2. «Сделай плавно прокручивающиеся новости!»
Ну вот, привет конец 90-х… Последние три новости — максимум на что хватает внимания посетителя. Ну или представим, например, посетитель начал читать (точнее просматривать, в вебе читают редко) параграф «О компании», потом перешёл к новостям, а там за то время пока просматривал «О компании» уже ползут новости за январь 2006 года. Должно быть фиксированно три последние новости. И баста!

3. «Сделай выравнивание по правому краю ссылок в подменю!»
Русский язык — «не иврит и не арабский»! Ну что тут ещё сказать…

Было ещё много «пунктов», которые меня ненадолго повергали в шоковое состояние: сделай шрифт меню меньше, сделай отступы больше, сделай это серым, сделай иконки меньше, выдели тут жирным и италиком, сделай тёмно-бордовый фон переходящий в светлый металлик!

Не считая всего этого, сайт в целом получился неплохим. Даже, наверное, слишком неплохим…

P.S. Ну и немного бонусных картинок-схем, перерисованных мной для сайта:

Схема для сайта PL
Схема для сайта PL

P.P.S. Посту уже эдак полгода, всё не решался запостить. :)

4