перевод статьи: 12 Killer Tips for Designing in the Browser

Как Вы создаете макет сайта?

Обычный проект начинается с создания макета в Фотошопе и потом с использованием HTML и CSS максимально приближается к виду исходного PSD файла. Не смотря на это, развивается направление в веб-дизайне пропускающее этап Фотошопа в пользу создания первоначальной композиции прямо в браузере с использованием вашего любимого редактора. Я уверен, что прямо сейчас Ваша голова шумит от причин, по которым этот подход ограничит ваш дизайн, но есть огромное количество вещей, которые Вы можете делать в браузере. Эта статья познакомит с инструментами и приемами, которые понадобятся для создания великолепных работающих макетов на первом же этапе работы.

Основная идея

Meagan Fisher на 24ways.org представил неотразимый довод проектирования в браузере. Хотя я и не разделяю его презрение к Фотошопу (Я люблю Фотошоп больше любого другого ПО на планете), я согласен с некоторыми другими его пунктами. Фишер говорит, что статическое изображение не дает по настоящему ощутить, как сайт будет работать и что проектирование в браузере направляет твои силы на организацию контента до дизайна, что гарантирует большее удобство и создание правильной структуры

Мы будем использовать статью Фишера как затравку для наших заметок по превращению в профессионала в создании фантастических in-browser макетов готовых к работе сразу по получению одобрения от клиента.

     Я иногда сталкивался с тем, когда web-программист не знал CSS или, скорее, не хотел заниматься облагораживанием своего HTML, который являлся результатом работы разрабатываемого им скрипта. Это натолкнуло меня на мысль, что ему (программисту) не помешало бы иметь при себе некоторое средство для создания «красивых» страниц. Средство должно было бы включать в себя некоторый CSS, возможно, картинки, и подключаться к любому HTML (очевидно, созданному по некоторым определённым правилам). При этом смена CSS (и картинок) на альтернативные не должна была бы приводить к семантически некорректному отображению.
     Вышеобозначенные требования очень похожи на требования к составлению скина для какой-либо системы (в частности, CMS). Но, в отличие от скина, который заточен под конкретный HTML, в нашем случае хотелось бы максимально упростить правила написания HTML, чтобы разработчикам не нужно было держать в голове много сложных правил.
     Таким образом, оговаривая некоторые (небольшие) ограничения на HTML, мы с одной стороны гарантируем программисту, что его код, генерируемый с учётом этих правил, будет корректно оформлен любым сделанным для этих целей CSS, а с другой стороны, оговариваем шаблон изготовления самих этих CSS.

Может быть для кого-то станет открытием, но современные браузеры могут воспринимать URL не только в десятичной системе, но также в 8-ричной и 16-ричной, и даже единым 32-битным числом. То есть URL типа 66.102.13.19 можно представить несколькими разными способами.

0x42.0x66.0x0d.0x63
0x42660d63
1113984355
00000102.00000146.00000015.00000143

Щёлкаете по любому из вариантов — и попадаете на google.com.

Здравствуйте. Последнее время я достаточно часто имею дело с JavaScript-canvas, особенно написание всяких игрушек, которые требовательны к трафику в силу необходимости загрузки множества картинок.
Обычно сначала загружается около 50-100кб сжатого JavaScript, после чего — энное количество картинок(например, 500кб, 2мб, 10мб и т.п.) и только после этого запускается сама игра. Можно, конечно, загружать по ходу, но отсутствие текстур врядли порадует игрока.
Потому я решил, что необходимо сделать какой-то приличный, симпатичный, легко-настраиваемый(чтобы быстро менять от проекта к проекту) прогресс-бар, но, обязательно без использования картинок. Под катом исходники под лицензией LGPL, небольшая инструкция, как это сделать и внизу статьи — ссылка на результат.

Тут как-то обсуждали про крутую рисовалку, которая многих привела в восторг =), в том числе и меня.

Так вот, на сайте www.escapemotions.com/experiments.html на радость всем любителям прикольных визуальных штук выложена подборка интересных интерактивных экспериментов.



Автор — 3D-аниматор и дизайнер Peter Blaškovič (http://twitter.com/peterblaskovic). Все эксперименты сделаны на Flash и Processing — этаком «Java-рендере». Для просмотра Java и Flash должны быть установлены и разрешены.

Приятного времяпрепровождения!

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

Сперва сделал это используя window.onbeforeunload, но злая опера не поддерживает это событие.
Призадумался, попутно нашёл плагин для jquery под названием FormNavigate.

В поддержку дней CSS expressions на хабре

Думаю все, кто сталкивался с решением каких-нибудь проблем в IE<8 знает про CSS expressions и про «одноразовые» CSS expressions, которые применяются к элементу только один раз, тем самым не создавая постоянной нагрузки на процессор. Обычно это решается так:

.my-class {
    behavior: expression(someMagick(), runtimeStyle.behavior = 'none');
}

Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:

• О плохих приемах современной верстки;
• О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

Имеем: навороченную форму без таблиц
Нужно: подвинуть съезжающий из-за сглаживания шрифтов label в Safari
Примечание: подвинуть безопасно, а не css3-свойствами.

Вуаля! есть замечательное свойство safari only позволяющее подвинуть что-угодно куда-угодно влево-вправо!

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

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

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

Сегодняшним утром получил информационное письмо с электронного ящика сайта browsershots.org об открытии нового сервиса— Find Icon и предложением активировать аккаунт с таким же ником как на browsershots, а значит — это их очередной новый проект (что не может не радовать, т.к. часто пользуюсь их проектами).

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

Расскажу о своих правилах, которые я использую в любом файле CSS.

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

Жаль не умею рисовать, но это очень круто.

Spritely — является JQuery плагином для создания динамического изображения и фоновой анимации.

— Здравствуй, дружок…
— Дяденька, вы снова расскажете мне сказку?
— Конечно! Какой умненький мальчик!
— А про что?
— М… сегодня я расскажу тебе о том, куда пропадают чересчур самостоятельные мальчики вроде тебя…
— Э! Что значит пропадают?
— Вот то и значит… На, держи огнелиса *протянул, держа за хвост, пылающее пламенем животное* Только осторожно — он горячий!
— Ай-ай-ай! Он брыкается!
— Посади на него огненного жука — мигом успокоится.
— Класс! Действует!
— Ато! Теперь скажи ему:

function throwException( ){
    (void 0)()
}
throwException()

Сейчас многие сайты насыщены графикой в разных видах: аватары, иллюстрации к постам, галереи и тп.

Читатели блога «Клиентская оптимизация» как никто другой знают цену лишних запросов к серверу.

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

10 марта с 11:00 в течение 24 часов проходит бесплатная раздача лицензионной версии Paragon Virtualization Manager 9.5 Personal (English). Это очень удобный менеджер виртуальных машин под Windows, умеет создавать виртуальные диски для Virtual PC, VMware Workstation и VirtualBox.

Акцию проводит проект Giveaway of the Day, который каждый день выкладывает в свободный доступ какой-нибудь лицензионный софт. Обычно это довольно бесполезные программы, но вот сегодня, наконец-то, выкатили действительно ценную вещь.

Стоимость Paragon Virtualization Manager 9.5 Personal в остальные дни составляет $29,95. В бесплатную версию не входит WinPE RCD.

CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:

h2[rel=friend] {
  /* woohoo! */
}

Сегодня на хабре для меня получился занимательный микс из статей — волчьи будни и эффект бабочки. Вроде разные такие статьи, а обе зацепили, заставили думать. Причем поначалу я не могла собрать мысли воедино и понять, что же объединяет эти казалось бы разные статьи. И через некоторое время меня осенило – свобода самовыражения.

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