sublimeye Сообщение 08/06/2010 23:16 Копия темы
Высказываем советы по оптимизации рабочего процесса html верстальщика :) Интересует кто как организовывает работу по верстке.

- с чего начинаете

- какими вспомогательными программами пользуетесь (кроме PS)

- в какой последовательности выполняете этапы работы (создание структуры, порезка картинок, описание оформлений для текста, организация спрайтов из графики и т.п.)

Делимся опытом, если не жалко)

airus39 Сообщение 08/06/2010 23:20 Копия темы
А чего тут думать)
Нарезал картинки в фотошопе – дальше пошел верстать)

devochka_iulia Сообщение 08/06/2010 23:42 Копия темы
так это.. 4 утра... может о жизни поговорим?..

koenigdesign Сообщение 08/06/2010 23:45 Копия темы
zen coding – первое впечатление – крайне интересная и удобная штука. Не долго пользуюсь(вторую неделю) – рекомендую.
upd: попробовать во всяком случае стоит а там уж – на вкус и цвет, как говорится.

sublimeye Сообщение 09/06/2010 00:53 Копия темы
по поводу zen-coding я zen coding'ом уже больше полугода пользуюсь :)
на самом деле zen-css даже более полезная штука т.к. css кода больше приходится писать :)

Кстати, по работоспособности zen-coding больше всего понравился в dreamweaver, собственно где и работаю. Больше всего фичей поддерживается.

p.s. после месяца работы заменил некоторые стандартные правила:

убрал дефолтовые значения цветов для color, background – color: #000000; или как-то так было изначально

убрал " ; " почти из всех свойств.
Причина:
по дефолту:
вбиваешь w+(shortcut) -> width: | ;
(курсор стоит стоит между ":" и ";", дальше вбиваешь величину, а потом приходится нажимать либо:
вправо + enter (дотягиваться до стрелки вправо достаточно далековато)
tab + enter (textmate zen-coding)
вниз (и ровнять курсор по отступу, но это в случае, если заранее было отбито пару строк)


Изменил это правило на:
w + (shortcut) -> width: |

остается вбить величину и нажать две кнопки рядом: "; + Enter"

koenigdesign Сообщение 09/06/2010 00:56 Копия темы
Насчет ; – принял на вооружение, так будет действительно удобнее, спасибо!

DelphinPRO Сообщение 09/06/2010 01:05 Копия темы
посмотрел видео habrahabr.ru/blogs/webdev... – впечатлило, стоит попробовать

sublimeye Сообщение 09/06/2010 01:18 Копия темы
:-) Ну собственно это я и хотел услышать, только в более развернутом варианте.

Чтоб натолкнуть людей на мысль – расскажу о своем workflow:

1. рассматриваю макет, любуюсь, матерюсь, пью чай и думаю о блоках и сетке и заранее обдумываю "сложные" моменты – что нужно для их реализации, чтоб не оказалось, что что-то не возможно реализовать "одним" образом, и нужно делать "другим".

2. Беру бумагу, открываю fireworks и черчу схему сайта с циферками:
– размеры структурных блоков
– основные блоки
– основные отступы
– позицию блоков (если они будут абсолютные)

3. анализирую нарисованное еще раз (примерно как в пункте 1 :D ) и обдумываю какие будут блоки

4. пишу html (zen coding hello) , сначала базовую структуру, затем сразу же элементы и частично контент. Продумываю из чего лучше сверстать тот или иной элемент\модуль. Стараюсь оптимизировать код по кол-ву элементов и т.п.

5. залажу в CSS и описываю базовое поведение "тянучести" и вообще основной структуры. По принципу от большего к меньшему (header, content, footer -> дальше: left column, right column , navigation ... ну и дальше какие-то блоки новостей и т.п.)
Качество и скорость этого этапа прямопропорционально зависит от нарисованной на бумажке схемы. С хорошей расчерченной схемой эта вся разметка пишеться в один присест. Без щелканья туда-сюда в браузер или сравнения координат в fw.

6. режу основную графику (фон для body и основные большие блоки) – распихиваю все это в файлы со смысловым называнием, но с пометкой temp (либо просто определяюсь, что после всего – нужно делать спрайты :) )

7. описываю правила оформления текста (typography)

8. верстаю внутренние блоки (четкая подгонка под дизайн, подставление графики и т.п.)

9. фиксы, оптимизация (если остаются силы и желание :) )

---

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

Еще не нравится этап 8 – если основную часть работу делаю за час-два, то мелкие блоки обычно занимают вдвое больше времени. Может из-за того, что это нудно и монотонно, а может из-за плохй организации :)

--

Из инструментов:
photoshop – для работы с растром и создание спрайтов и т.п.
fireworks – незаменимая вещь для определния размеров блоков, отступов и определния будущей разметки. А так же для экспорта слайсов и графики. + размер файлов чуть получше в большинстве случаев.
FarStone Capture – отличная утилита для снятия цвета в HEX в любом месте экрана (проще чем кликать в цвета в фотошопе или fw), расширенная замена для printscreen – сохранение в буфер, автоматическое сохранине в заранее выбранную папку (удобная вещь когда хочешь быстро что-то кому-то показать и не хочешь делать screenShare в скайпе. Есть встроенный мини-редактор, который может кропить и сохранять быстро файлы – проще и быстрее чем paint или photoshop. Ну и еще всякие мелочи :)
dreamweaver (сколько другого хлама не перепробовал, остался на нем. По функционалу пока выигрывает (не нервничать, я не юзаю ни одну из его "автосупер" фич типа wysiwig или вставка кода или другие рофлы))
виртуальная машина с IE6 :D



В общем, если у кого-то есть советы и идеи, будет интересно услышать.

sublimeye Сообщение 09/06/2010 01:20 Копия темы
У меня был прикол. Я только посмотрел видео, а потом как-то на следующий день начал кодить и автоматом начал вбивать сокращения и не понимал почему они не обрабатываются))

Это я к тому, что привыкнуть к этой штуке можно за 1 день (по крайней мере у меня так было)

rim89 Сообщение 09/06/2010 04:32 Копия темы
1) Открываю макет в PS. Делю на блоки.
2) На листике накидываю план работы( с чего начинать и чем закончить ) + поиск в загашниках готовых структурных элементов + css-framework ( если нужно)
3) Собвсенно Верстка
4) Баг fix
--------------
ПО:
Photoshop – тут все ясно;
Instant Color Picker – мега пипетка;
Notepad++ и Dreamweaver – верстка;
SnagIT 10 – отличная вещь для снятия скриншотов + импольлую в качестве линейки
-------------
* по сути у меня "оптимизация" – это использование готовых решений , написанных ранее

Smile42RU Сообщение 09/06/2010 04:49 Копия темы
+1

Открыл ФШ, нотпад++, включил хардстайл погромче и вперед :)
Заготовки, шаблоны – есть, изобретать велосипед не требуется :)

vlad43 Сообщение 09/06/2010 08:30 Копия темы
в каком редакторе?
Я прикрутил его в Notepad++, но глюков море. При работе с utf он работает только в css, в html дает только глюки :(

koenigdesign Сообщение 09/06/2010 08:37 Копия темы
dreamweaver

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