Пожалуй, представлю вам на суд недавно обнаруженный сервис, надеюсь, он успешно пройдёт тест на полезность и сразу же пригодится.

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

Мне часто задают вопрос о том, с чего начать молодому frontend-разработчику? Дабы облегчить свою участь и не перечислять каждый раз множество ресурсов сети, печатных и зданий и общих тезисов, я и написал этот материал.

В первую очередь следует знать, что кроссбраузерная верстка сродни магии. Объясняется это все банальной вещью, которую я озвучу так: ”Все мы ненавидим Internet Explorer!” Таким образом, 90% всей магии сводится к тому, чтобы заставить правильно сверстанный макет корректно отображаться в браузере Internet Explorer всех актуальных версий.

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

Крепкая теоретическая база поможет вам избежать множества неприятностей в практическом изучении верстки гипертекстовых документов. Очень важно получать знания порциями в правильном порядке.

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

Проверить такое соответствие достаточно легко — нужно сделать скриншот сайта и совместить его с графическим макетом, например, в Photoshop'е.

Но вот только в процессе вёрстки использовать такой приём не очень удобно.

Свершилось. Долгие бессонные ночи не прошли даром и мысль, заявленная Вадимом aka pepelsbey, обрела более-менее физические очертания.

sprites.webo.in (сырая-сырая альфа-версия) — название, собственно, говорит само за себя. Вводим URL CSS-файла — на выходе получаем архив с минимизированным (никакой сортировки селекторов, просто базовая минимизация) CSS-файлом и набором свеженьких спрайтов. Здорово?

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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

Ученые установили, что за ограду с табличкой «Не входить! Велосипеды не пристегивать!» все равно входят 27% желающих срезать путь, но если рядом пристегнуть велосипед, число вырастет до 82%.

Что же это, доктор?

Не­дав­но ком­па­ния Qlikworld вы­ло­жи­ла не­боль­шой сер­вис рас­ста­нов­ки «мяг­ких» пе­ре­но­сов. Он на­хо­дит­ся по ад­ре­су — www.plazoo.com/ru/tools.asp

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

Сер­вис рас­став­ля­ет пе­ре­но­сы с уче­том воз­мож­но­го из­ме­не­ния раз­ме­ра ок­на вы­во­да.

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

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

Эта статья уже со­дер­жит рас­став­лен­ные пе­ре­но­сы. Из­ме­няя раз­мер ок­на бра­у­зе­ра, мож­но уви­деть, как ра­бо­та­ет сер­вис.

Итак, свершилось то, чего так долго ждали некоторые посвященные блоггеры. Я открыл для всех желающих Parasite Eliminator – сервис и плагин для Wordpress, благодаря которым в моих блогах нет ручного спама.

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

Как оно работает

Шрифты в Em/% хороши всем — возможностью пользователей IE увеличивать кегль, заботой о пользователях, что предпочитают увеличивать размер шрифта браузера по-умолчанию, чтоб лучше видеть текст, да и просто являются нормой для профессиональных верстальщиков.

Минусы: … их вроде как нет, но!
А что если у пользователя разрешение экрана выставлено не в стандартное 96 dpi, а в 120?
Сайт с увеличенными шрифтами смотрится уже не так красиво, как нарисовал дизайнер — ведь масштабируются только шрифты, а не весь сайт! А разрешение 120dpi становится всё популярней, особенно на ноутбуках! Что же делать? Возвращаться к px?

Нет!

Хочу представить вам одну библиотеку для яваскрипта, под названием BlackBird. Основное ее назначение, избавить разработчика от не нужного дебага при помощи alert(), о чем собственно и говорит слоган «Скажите привет BlackBird и скажите пока alert()» ( Say hello to Blackbird and 'goodbye' to alert() ).

Для начала поискал на Хабре, но найте не удалось.
Теперь делюсь с вами тем, что нагуглил.

Оба документа на английском.

Полный перечень функций jQuery(v 1.1.4) с описаниями (PDF, 120Kb)

Полный перечень функций jQuery(v 1.1.4) с описаниями + плагины (PDF, 210Kb)

Наслаждайтесь.

Подборочка ошибок начинающих PHP разработчиков…

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





P.S. Что бы использовать плагин в FF, необходимо установить расширение greasemonkey.


UPD: Повторное нажатие на кнопку, возвращает комментарии на место


UPD: Теперь форма добавления каментов не скрывается :)

Adam DuVander из команды сайта WebMonkey составил список пяти лучших надстроек над Firebug. Вне конкуренции, оказался YSlow, но остальные 4 тоже очень полезны:

* Firecookie для простоты работы с cookies
* FirePHP для интеграции серверного PHP дебагинга с интерфейсом Firebug
* Pixel Perfect для наложения макета на HTML шаблон для контроля соответствия вёрстки
* Rainbow для подсветки Javascript синтаксиса

Пользуйтесь.

Ориентируя проект на цели пользователя, можно создать новые, удобные и востребованные сервисы. Более того, можно создавать социальные коммуникации вокруг товаров, и это успешно монетизируется! Вот только… Что поможет учесть цели ваших пользователей? Маркетинг? К сожалению, «лобовой» перенос в интернет практики обычного маркетинга не даёт результата.

Текст доклада Павла Коноплицкого на конференции SocialExperience 2008

Разные пользователи — разные потребности

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

Привет. Мы уже давно работаем над одним стартапом и, вот, решили представить его хабралюдям. На самом деле, предполагаемой аудиторией являются буржуи, так что это не пиар, а просто интерес (+ возможно, проверка силы хабраэффекта и быстроты, с которой свалится наш сервер). Мы – это наш заказчик/спонсор/идейный лидер Трэвис из США и команда из примерно 5ти человек в Самаре. И пытаемся мы реализовать довольно уникальную (особенно, на момент старта проекта) идею, а не очередной ремейк.

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

В блоге «Хабрахабр — Идеи для сайта» lomalkin предложил подсвечивать комментарии автора топика.

Штука удобная. Я немного подумал, и написал реализацию для greasemonkey. Проверено в Firefox 2, 3 и Opera 9.52.

Установить.

История изменений

1. исправлена работа в Firefox 2
2. добавлена подсветка новых комментариев (с рамочками)
3. добавлена подсветка комментариев после отправки нового сообщения
4. добавлена подсветка собственных комментариев. Идею подсказал IIIEB4YK
5. добавлен небольшой padding
6. исправлена работа в случае, если пользователь не залогинен
7. добавлены мягкие рамочки, на новых сообщениях рамка не заменяется
8. скрипт оптимизирован, в зависимости от браузера ускорение составляет от двух до пяти раз
9. исправлена ошибка с подсветкой имени автора в переводах
10. скрипт переписан под суперхабр

В последнее время столкнулся с тем, что Prototype не такая уж клевая библиотека. Даже в компрессии напару с scriptaculous занимают много места да и синтаксис странный. Для меня загадка, почему в Rails включили именно его. jQuery по синтаксису намного больше похож на Ruby и более легковесная библиотека. Собственно немного порыскал и нашел неплохие шпаргалки на jQuery, чтоб освоение протекало несколько легче.

1. jQuery Color Cheatsheet (PNG)
   
   
   

Представьте себе абстрактный разговор абстрактного заказчика с абстрактным верстальщиком.

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

Облако тегов, в привычном своем виде, уже мозолит глаза. Хочу поделится с Вами отличным дизайнерским ходом для отображения тегов в виде кирпичиков, которые меняют цвет в зависимости от своей плотности.