Тег: веб

Adobe Creative Suite 5

CS5 Countdown

Ну вот, уже совсем скоро!

Совсем скоро мы узнаем какие же иконки будут в CS5. :D Чёрный фон у страницы, кхм… У иконок с тёмным фоном теперь шансов больше. Кстати, на их странице для рендеринга шрифтов используется тот же jQuery-плагин, что и в моём блоге — cufón. Странно что не тот, который рендерит во flash. Шарят. :)

Афиша «Metal Warriors II»

Год назад я делал афишу для первого «Metal Warriors». В этом году сделал плакат для второго:

Афиша «Metal Warriors II»

Афиша «Metal Warriors II»

Не стал придумывать что-то новое, повторил стиль первой афиши. Но на этот раз гораздо больше времени уделил типографике и сетке — применил, так сказать, новые познания. :D Кстати, тень на фоне я сделал из фотографии с концерта Nightwish.

Ну и, по модным ныне тенденциям, сделал ещё мини-афишку для богомерзкого вконтакта:

Афиша «Metal Warriors II»

При наведении на эту картинку, можно увидеть версию, пожатую вконтактом. Красные цвета поплыли. Отвратительно. :(

P.S. Который раз убеждаюсь в том, что есть истина в словах: «чем меньше и дешевле заказ, тем чаще придётся что-либо переделывать». :!:

5

Ambilight для тега видео

chikuyonok.ru/2010/03/ambilight-video/

Новая фишка в бложике — посты-ссылки. Это когда мне лень что-то писать, но хоть что-то написать надо. :) И первая пост-ссылка ведёт на реализацию известной фишки в телевизорах Philips от известного технолога Сергея Чикуёнка. Очень впечатляет! Как это было сделано. Работает в Firefox 3.5, Opera 10.5, Safari 4 и Google Chrome 4.

6

Miranda Me скачать бесплатно

Недавно приходит письмо следующего содержания (пунктуация и орфография сохранены):

Здравствуйте ! На сайте написано , что миранда бесплатная аська.Мы скачали ее ,но мало того, что после отправки смс у нас с телефона снялось 305 рублей ???????? так миранда еще и не запускается ???????
Объясните пожалуйста , что мы делаем не так?

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

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

Качать Miranda Me лучше только с официального сайта. Абсолютно бесплатно. ;)

6

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

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

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

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

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

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

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

Safari 4 for Mac

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

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

5

Структура HTML

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

Структура HTML

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

Внезапного хабраэффекта пост

Как же я люблю статистику… :)

Недавно на мой уютненький нагрянул мини-хабраэффект, чего уж я совсем не ожидал. :!:

Причём узнал я об этом, просматривая новости в ГуглоРидере. Открыл статью на хабре о хаке 400D, про который как раз недавно писал. Увидев ссылку на мой блог во втором комменте мне стало немного нехорошо. :?: Полез открывать бложик, ожидая увидеть что-нибудь типа 502 Bad Gateway, ан нет, всё открылось довольно-таки шустро. Хотя, как оказалось, не столь уж и много посещений было. :)

Гугл аналитика зафиксировала чуть более 2000 посещений за три дня:

Мини-хабраэффект в блоге

Пыщь!

Меня же больше заинтересовала статистика браузеров:

Статистика браузеров в хабраэффект

Файрфокс, Опера, Хром. Всё ожидае… Что? Хром? Ах да, Хабр же

Операционные системы:

Статистика операционных систем в хабраэффект

Откуда как не с Хабра придёт столько красн линуксоидов

Разрешение экрана:

Статистика разрешений экранов в хабраэффект

Считай 8% посещений с разрешением экрана в 1024 пикселей по ширине

Даа, нищебр малоимущих и неуд владельцев нетбуков таки много. :) Подумал-подумал… Пару часиков перелопачивания CSS-ов — и бложик стал вееесь такооой резиииновый… ;)

И статистика WebAlizer:

Cтатистика WebAlizer

2800 посещений, что на 800 больше чем выдала нам ГуглоАналитика

Я думаю, немалая часть этих 800 — есть фуррифокс с включенным адблоком. :)

Т ещё меня удивило количество Опероводов. Надо бы побольше времени уделять на тестирование сайтов в этом браузере, хотя и отношусь к нему как к мини-IE6. Потому что обязательно то, что работает и нормально отображается в Gecko-, Webkit-браузерах и даже IE8 обязательно сглючит в Опере. И он до сих пор не умеет скруглять уголки. Пф… :mad:

P.S. Понизить мне карму за последний абзац можно здесь. :lol: