Блог NunDesign

Девчушку, которая пришла к нам работать недавно верстальщиком на простенькие рекламные сайты (для сложных дотнетовских проектов ей ещё изрядное количество времени придётся нарабатывать опыт), посадила рисовать тренировочные эскизы как бы для этой же ветки веб-сайтов. Честно критиковала композицию, сетку, отрисовку каких-то объектов, оформление навигации, блоков, кнопок. У неё получилось два не очень плохих эскиза, которые, думаю, в компаниях с менее [чем наши канадские] придирчивыми заказчиками, очень даже прошли бы как достойные. А задачу я такую поставила с конкретной целью: не достаточно верстальщику знать html+css, не достаточно очень поверхностных знаний о работе с графикой в фотошопе. Фотошоп - такой же инструмент верстальщика, как и редактор кода, чем доскональнее ты знаешь этот инструмент, чем более гибко владеешь им, чем больше у тебя знаний о том, как создаётся макет рисующим дизайнером, тем быстрее будет твоя работа во время интеграции визуального стиля в реальный сайт, тем проще будет договариваться с твоими же партнёрами по разработке. Здесь речь в ПОНИМАНИИ процесса, ещё одна капелька к статусу ХОРОШЕГО ВЕРСТАЛЬЩИКА, к теме, которую мы обсуждали вчера в комментариях к посту в этом блоге и к ярушной трансляции.

Обсуждение вообще вышло довольно примечательным; я, кажется, с чрезмерными претензиями к личным качествам и профессиональным навыкам специалиста, из которого получается хороший верстальщик, а ребята в комментариях только подчёркивали это; Женя Бондарев писал:

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

В какой-то степени Женя прав, даже с меркантильной точки зрения в нашей компании (где программеров в любом случае раз в 5 больше, чем дизайнеров) хороший (а значит, как минимум ведущий) программист будет получать больше хорошего верстальщика, но здесь вот ещё в чём сложность расчётов: на больших проектах задачи распределяются на подзадачи и направления, и кроме PM`а на проекте есть несколько подкоманд программистов, каждой из которых управляет ведущий программист, лучший. Т.е. он не только лучше всех программирует, он ещё занимается менеджерской работой, распределяет задачи внутри своей команды и отвечает за качество кода своих подзадач. Это всё-таки другая ответственность. К сожалению, всегда бывает так (это я по себе знаю), что большую часть задач, которые ставятся перед командой, ведущий специалист может выполнить сам, и, более того, быстрее, лучше, качественнее (и дальновиднее, потому что умеет видеть проект в целом и перспективу), но задач в какой-то момент становится несколько… больше, чем может выполнять один человек за один рабочий день, а клонировать этого самого ведущего программиста пока технологии не позволяют.

(more…)

Как часто заглядываете вы в статистику вашего сайта или блога? Оценить кривую посещаемости, отметить новых реферреров, ковырнуть да перепроверить страницы, на которых чаще всего “сразу” закрывают ваш сайт? Почитываете список ключевых слов, по которым находят вас в поисковиках? Если манимейкерский у вас проект, то, может, и каждый день, а ежели блог для души да без рекламы, то хотя бы раз в месяц неплохо бы проверять данные. Сегодня глянула и я в Google Analytics да некоторые рейтинги; кое-что порадовало, кое-что напомнило о том, что своими проектами неплохо бы хоть иногда заниматься. Обратила внимание на статистику по “ключевым словам” для этого блога: очень много людей приходит по “верстальщик”, “кто такой верстальщик” и даже “нравится ли вам работа верстальщиком?” Кто такой, кто такой… наша бухгалтерия говорит, что нет такого в реестре должностей, придумали вы что-то, господа хорошие.

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

(more…)

Сержусь. На дотнет, микрософт, билагейтса и ленивых программеров. Можно сколько угодно говорить о валидной вёрстке, с умным видом вещать о том, что таблицы в гипертексте используются для табличных данных, а макет, все контейнеры документа, весь этот дизайн - для этого есть другие теги, что избыточность в вёрстке - это дурной тон, код должен быть оптимальным и совершенным, как алмазная призма. А потом с таким старанием размеченный шаблон верстальщик отдаёт программеру, и на стерильность можно забить уже через пять минут (и, кстати, не первый раз на эту тему пишу).

Из простейшей (на первый взгляд) странице с редактированием профайла юзверя только что убила четыре (!) избыточные одноячеечные таблицы. Одна обрамляющая контент, одна - для блока с общими данными юзера, одна - для Change Password если юзер кликнул сменить пароль и одна - на Confirmation, если всё прошло успешно. На четвёртой не сдержалась, подзываю программера, мол, шо за дела? Мы же договаривались - ты вообще никакую вёрстку на странице не делаешь, кидаешь свои контролы в линейном порядке, я сама разрулю, как они должны ОТОБРАЖАТЬСЯ! А он мне отвечает… я, говорит, и не добавлял никакую разметку… оно, говорит, само. Он в студии, в режиме дизайн за один клик просто добавляет целый блок (размеченную форму) для, к примеру, смены пароля - со всеми необходимыми тегами, айдишниками и прочими атрибутами. Охренительная экономия времени! И вот при таких вот автоматизированных для ускорения работы программера действиях и добавляется, автоматически же, “контейнер” в виде одноячеечной таблицы, обрамляющей этот блок.

Спрашиваю - а что, у нас программеры уже напрочь ручками код перестали писать? Или вся работа верстальщика должна заключаться в том, чтобы каждую страницу при доработке сначала долго вычищать от избыточного кода, самодобавляющегося при пользовании программистами режимом “дизайн”, от самопрописавшихся атрибутов width и height, которые появляются, когда программер в том же блин режиме “дизайн” случайно где-то что-то дёрнет? Или - ещё хуже, когда программист, утомившись программировать, вместо того, чтобы пойти чайку попить садится, и начинает “оформлять” созданные им только что формы.

И вот я вышкаливаю пару талантливых юных верстальщиков. Ругаю за ошибки при анализе сетки. Если позволяет проект - заставляю перевёрстывать, объясняю, что вёрстка веб-страниц - это как раз та отрасль, где уместно применять свои способности к анализу. Потому что на самом деле это так, прежде чем вырезать из эскиза первую картинку, прежде чем написать первую строчку кода, первый контейнер, имеет смысл потратить время на то, чтобы понять макет, продумать для него его модульную структуру; и если на недовёрстанной ещё первой странице макета появляется необходимость какому-то классу переназначить правила с помощью ! important - значит, недопроанализировал, значит - всё заново (ага, и как раз пару дней назад такое было) перевёрстывать, благо есть возможность. В отличие, к примеру, от тех ситуаций, когда приходит сюда давно свёрстанный проект на доработку программерам, и спустя месяц вспоминают про дизайн (ой-ё, Таня, тут бы поправить бы), и ты прекрасно понимаешь, что поправить “честно” не выйдет. Или вместо 30 минут надо затребовать 3-4 дня на перемакетирование и перевёрстку всего этого разросшегося уже проекта, или - переназначение доменных правил, увы. Но если есть возможность - давайте продумывать макет изначально так, чтобы не было необходимости во всех этих important`ах.

И вот они, такие продвинутые верстальщики, откроют свой проект через какое-то время, когда уже динамика, посмотрят на код страниц… На все эти самодобавившиеся и саморасплодившиеся таблицы. На разъехавшиеся контейнеры из-за самопрописавшихся в их содержимом ширин и высот. И спросят меня - Таня, а к чему был весь этот предварительный цирк с логичной и валидной вёрсткой? И я не буду знать, что им ответить. Или - как мне сегодня программер посоветовал - посоветую им так же написать гневное письмо Биллу Гейтсу, или разработчикам Visual Studio, чтобы они укротили свой сервис с такими полезными автоматическими решениями. И режим “design” в Visual Studio прибили нафиг, навсегда. О. И Visual Studio тоже прибить, и тоже навсегда. Пусть на Java переучиваются, ибо нефиг.

Да, объявлено, что сформирована программа конференции Client Side’2007, а я до сих пор не получила подтверждения от руководства о том, что меня вообще туда отпускают (хоть бы даже и за свой счёт).

Секция “AJAX, JavaScript, JSON, GWT”

1. Отладка JS/Ajax и профилирование / Александр Шуркаев;
2. Разработка, оптимизация и тестирование тонких клиентов / Петр Макаров, Иван Кузнецов;
3. Использование jQuery в связке Google Gears / Евгений Пальчевский, Алексей Захлестин;
4. Произвольные события - клей сложных веб-приложений / Андрей Сумин.
5. Технология Google Web Toolkit / Аскар Рахимбердиев;

Мастер-класс “Модульность в JavaScript” / Андрей Сумин;
Мастер-класс “Векторная графика в Вебе (SVG, VML, Canvas)” / Леонид Хачатуров;

Секция “Производительность”

1. Управление скоростью реакции сайта / Артемий Трегубенко, Николай Мациевский;
2. Оптимизацию html, css, js на часто показываемых страницах (на примере морды и результатов поиска Яндекса) / Александр Моисеев + Особенности верстки крупных проектов / Александр Тимофеев;

Секция “Flash, AIR, Flex, SilverLight”

1. Adobe Integrated Runtime (Adobe AIR): платформа для создания десктопных RIA / Константин Ковалев;
2. Сравнение современных технологий для создания насыщенных интернет-приложений (RIA) / Константин Ковалев;
3. Работа с данными в формате XML в среде Adobe Flash / Дмитрий Поклонский + Создание standalone приложений с использованием Adobe Flash и Northcode SWF / Дмитрий Поклонский;

Мастер-класс “Геометрия во Flash: кривые Безье второго порядка” / Иван Дембицкий;

Секция “Веб-стандарты, верстка, HTML 5.0”

1. Семантическая вёрстка / Вадим Макеев;
2. Веб-стандарты в ASP.NET / Сергей Мезенцев;
3. Верстка независимыми блоками / Виталий Харисов;
4. Тонкий CSS для Internet Explorer / Павел Корнилов;
5. HTML 5.0 / Петр Керзум;

Мастер-класс “Применение XSLT на стороне клиента” / Алексей Остапенко;
Мастер-класс “Профессиональный верстальщик. Кто он?” / Вадим Макишвили, Павел Корнилов;

Секция “Веб-дизайн”

1. Тезисы доклада “Нюансы веб-типографики” / Артемий Ломов;
2. Графический дизайн для веб-среды / Андрей Оконечников;
3. Управление проектами. Информационный дизайн / Анна Тихонина;
4. Как выжить дизайнеру в веб 2.0 стартапе / Алексей Сергеев;

Мастер-класс “Интерфейс на экране, на бумаге и в жизни” / Артем Горбунов;

Секция “Дизайн интерфейсов, юзабилити, accessability”

1. Качество человеко-компьютерного взаимодействия: подход в международных стандартах / Константин Самойлов;
2. Особенности проектирования интерфейсов для начинающих пользователей / Андрей Золотов;
3. Состояние потока (FLOW) как цель проектирования взаимодействия / Денис Бесков-Доронин;
4. Влияние юзабилити на конверсию и эффективность сайта / Иван Макарчук;
5. Доступность информации на государственных сайтах / Денис Бесков-Доронин;
6. Формат предоставления работы проектировщика интерфейса / Алексей Копылов;

Мастер-класс “Юзабилити аспекты проектирования пользовательских интерфейсов в среде Microsoft Expression Blend” / Сергей Швецов;
Мастер-класс “Юзабилити-тестирование? Легко!” (или как в домашних условиях протестировать программный продукт) / Катерина Умнова;

Секция “Шаблонизаторы”

1. Почему XSL? / Сергей Бережной;
2. Эффективное использование XSLT / Александр Мартынов и Александр Ермолаев;
3. Как проще и эффективнее строить работу с унаследованным от других разработчиков (xsl-)кодом / Евгения Фирсова.

Секция “Мобильные технологии (WAP, PDA-проекты)”

1. Юзабилити программ для мобильных устройств / Федор Ежов;
2. Мобильные магазины и платежи / Александр Штучкин.

Секция “Качество, тестирование”

1. Автоматизация тестирования WEB-интерфейсов с использованием Selenium / Виталий Помазенков;
2. Что такое XSS и как их искать / Алексей Капранов;
3. Автоматизированное тестирование смешанных web и win интерфейсов / Екатерина Ивахина (Rambler);
4. Автоматизация тестирования сложных Flash интерфейсов / Александр Комлев;
5. Автоматическое удаленное юзабилити-тестирование / Дмитрий Филев;

Недавно один из наших программеров в личке поделился сокровенным: оказывается во многих софтконторах, где уровень проектов плюс-минус приближен к нашему, одно из важных требований к программерам - обязательное знание html (xhtml)+css на достаточно глобальном уровне! Надо же… Раньше на эту тему никто у нас и не задумывался, а тут вдруг попёрло что-то, да ещё и подхлёстывается неожиданными дискуссиями в тему “разделения/распределения обязанностей”.

У наших программеров (.NET) такого требования не было и на собеседованиях никто ничего по теме вёрстке у них не спрашивал - основная среда разработки - M$VS, и знания тестировались только возвышенно-программерские. Вёрстку, как следствие, в большинстве своём публика знает только в первом приближении, и в том случае, когда начинается работа с интерфейсом и публике всё же приходится свои рабочие контролы как-то размещать на странице, они городят совершенно безумный код, разумеется, не ручками, а в режиме “design” - этого лучше не видеть, скажу только, что, когда я получаю в работу очередную страницу, основное время уходит на удаление всего того кода, который там предусмотрительно набодяжен.

Клиенты ныне настолько разбалованные аяксом, что требования к интерфейсам (во всяком случае служебным интерфейсам на сервисы) у них довольно масштабные, посему в конторе очень много используют как готовых решений типа telerik, RadControl и иже. Деревья, закладки (имитация виндовых “табов”), хитрые “комбобоксы” с расширенной функциональностью и прочее, и прочее. Иногда прокатывает - просто взять готовое и - напильником (в том числе и визуал), иногда так складывается, что напильником приходится из подводной лодки допиливать реактивный самолёт, и, оценив масштаб /когда готовый контрол доработать теоретически реально, но, для узкой задачи он, с одной стороны, является избыточным и тяжеловесным, с другой стороны - ковыряться детальнейше в больших объёмах чужого кода - то ещё удовольствие/, принимаем решение делать свой контрол (но на это понадобится, к примеру, один рабочий день. Как правило это самое трудное - выбить этот самый один рабочий день). (more…)