Быстрая верстка

[codriter]

Вопрос для опытных кодеров.

У каждого кодера есть свои фишки и способы верстки либо способы о которых вы наслышаны.

Меня интересуют способы повышения скорости вестки при неизменном качестве. Давайте меняться.

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

[psywalker]

Да кстати, и мне тоже как новичку интересно узнать ответ на вопрос: Как же правильно по мнению опытных кодеров Сократить время вёрстки, при этом не потеряв её качества? Каким способом вообще в принципе вы пользуетесь, было бы интересно послушать варианты

[rus]

Не знаю как другие, а я сначала верстаю костяк, тоесть основу и сразу вешаю на него стили, а уж потом все остальные мелочи.

[Nekromancer]

раньше делал так, писал хтмл и сразу писал инлайн стили, а потом переносил их.. но это бред..

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

[IceBars]

Архивирую готовые решения, потом при получении задания смотрю, не верстал ли я это раньше

[codriter]

Архивирую готовые решения, потом при получении задания смотрю, не верстал ли я это раньше

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

[s0rr0w]

Тут можно целую книжку написать.

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

Начал бы свое повествование с банальностей для любого менеджера, но сложностей для 95% работников. Кодер является работником, который должен выполнять много рутиной работы. Эффективность труда зависит от ряда подходов. Есть ортодоксы-табличники, которые разумом своим остались в 90-х годах. Есть фанатики-стандартисты, которые доводят свое отношение к стандартам до маразма и этим и гордятся. Есть третий тип людей, которые всю работу расценивают с точки зрения экономической эффективности. Себя я отношу к последним.

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

Приведу простой пример. Вы беретесь за создание сайта-визитки, состоящем из 5-ти страниц. Оплата мизерная - 300 американских рублей. Один день вы тратите на то, чтобы найти темплейты, еще один день на то, чтобы перерисовать какие-то цвета и фоны, и день на наполнение сайта контентом. Ура, проект сдан, заказчик доволен, вы получаете 100 ар в день, и простой математический подсчет вам говорит, что при 100% загрузке вы сможете заработать аж целых 2.4 килоамериканских рублей в месяц. Неплохо, правда?

Все хорошо ровно до того времени, пока заказчик не вернется к вам с расширением. Он помнит, что вы за три дня сделали ему неплохой сайт, и у него со временем возникли идеи по расширению структуры сайта. Вы с относительной легкостью добавляете пару страниц в текущий дизайн, и берете за работу, например, 20 ар. На добавление вы тратите пол дня. Ваш заработок в день составляет уже не 100ар, а всего 40.

Идем дальше. Заказчик приходит к вам еще с десятком страниц. Если вы выставите ему счет в 100ар, он будет приятно удивлен, почему создание сайта стоит 300, а добавление десятка страниц - треть? Максимум, на что он согласится, так это на 30ар. 10 страниц потребуют переработки дизайна, кода и прочих радостей. Вы потратите три дня на разбор кода, переделки и наполнение контентом. Ваш заработок составит всего 10ар в день.

Вы или теряете данного заказчика, или работаете себе в убыток.

Теперь берем другую ситуацию, когда вы тратите на 2 дня больше, и прикручиваете простую ЦМС-инку для этого сайта. Да, однодневный заработок будет меньше, зато наполнение контентом или расширение структуры у вас будет занимать мизер времени, и вы можете вести вполне прибыльную деятельность в среднем. Аппетиты у клиентов растут постоянно, и в итоге вы сможете в конце-концов сожрать кусок пирога больше, чем сможете откусить.

Теперь возвращаемся к кодингу. Закладывая чуть больше универсальности в код, вы сможете легко и быстро менять потом данную структуру. Не решайте задачу в лоб, как любят делать 95% людей на данном форуме, это путь в никуда.

Как это реализуется на практике? Например, я для себя выработал стратегию минимального количества типов тегов в странице. Всякие "семантически-правильные" разметки в HTML считаю атавизмом и старьем. Язык HTML ограничен определенным количеством тегов, которые почти не отражают современные тенденции разметки страниц, и больше востребованы для текстового оформления, чем для оформления всей страницы. XML позволяет создавать свои теги, строить реально правильные семантические структуры, но есть огромная проблема в распространении данного языка в виде Microsoft и их гегемонией на рынке браузеров. Я выкрутился из этой ситуации простым способом, я перенес логическую разметку на классы.

Вместо <ul><li>... я использую <div class="mainMenu"><a class="menuItem">. Становится практически неважными названия тегов, становится важным имя класса. Фанатики-стандартисты подымут бучу, что я нарушаю логику HTML, и списки нужно делать тегом списков, хотя на самом деле меню не является списком в том значении, который был вложен в UL в самом начале развития HTML. Для меню даже свой тег придумали в свое время - MENU, но потом от него отказались.

В итоге в моей верстке используется с два десятка тегов.

Дальнейшее развитие удешевления разработки - использование фиксированных имен классов для множества проектов, которые делают одну и ту же работу. Например, hiddenBlock, invisibleBlock, w100, w50, etc.

Следующий этап - классовые константы. Например, сначала идет container, потом block, потом box, потом content. Или класс list, в котором есть item. Чтобы было понятнее, приведу простой пример

<div class="menuList"><a href="#" class="menuItem">Menu item</a></div>

<div class="newsList"><a href="#" class="newsItem">News list item</a></div>

Или

<div class="loginBlock"><div class="loginBox">...</div></div>

<div class="pageContentBlock"><div class="pageContentBox"><div class="pageContent">...</div></div></div>

Классы достаточно хорошо структурируются, и без особых усилий решается задача идентификации нужного блока.

Следующий прием - модификаторы. Есть базовый класс, например menuItem, но этому элементу нужно добавить некую иконку как фоновое изображение. Добавляем этому элементу модификатор, например в виде класса redPoint, который будет делать только уникальную часть для этого элемента. Это можно делать инлайн-стилями, нужно смотреть по ситуации.

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

Приучите себя не пользоваться линейкой для вымеривания точных расстояний между элементами. Я 80% размеров ставлю на глаз. Особенно это касается margin'ов и padding'ов.

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

[psywalker]

IceBars

Сколько у тебя уже архивов, тысячи или десятки тысяч?? :)

s0rr0w

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

Edited April 26, 2009 by psywalker

[s0rr0w]

s0rr0w

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

http://www.1plus1.ua/

Правда, я не уверен, что после меня там не перековыряли все.

[psywalker]

s0rr0w

1) А скажите пожалуйста, вы занимаетесь и владеете тольно Вёрсткой или ещё какими нибудь технологиями, может Джава или ПХП?

2) На сколько по 10-ой шкале вы оцениваете своё мастерство Кодинга?

3) А главное расскажите, как долго вы шли к этому, сколько ушло времени на учёбу, каким способом вы поднимали свой уровень, может быть больше читали, если да, то что и сколько.Или больше Верстали и т.д ?

4) Как вы считаете, на Чисто Вёрстке сколько можно заработать в месяц? Стоит ли вообще заниматься всем этим делом или игра не стоит свеч,если можно, поподробнее плиз. Сколько вы зарабатываете, если не секрет, хотябы плюс-минус?

Edited April 26, 2009 by psywalker

[alexspb]

Спасибо, s0rr0w. Все изложено грамотно. Особенно хорошо, что обращаете внимание на необходимость думать о перспективе и с вашим объяснением этого тоже соглашусь:

Аппетиты у клиентов растут постоянно

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

Сколько вы зарабатываете, если не секрет, хотябы плюс-минус?

Неполиткорерректный вопрос . Вы лучше спросите, сколько человек учился на это и сколько часов в день работает...

[psywalker]

alexspb

А я сам понинаю, что вопрос о том, сколько получает человек - некоректен, поэтому и написал, что если Не секрет))

А насчёт времени учёбы и т.д я спросил, почитайте повнимательнее мои вопросы

s0rr0w

1) А скажите пожалуйста, вы занимаетесь и владеете тольно Вёрсткой или ещё какими нибудь технологиями, может Джава или ПХП?

2) На сколько по 10-ой шкале вы оцениваете своё мастерство Кодинга?

3) А главное расскажите, как долго вы шли к этому, сколько ушло времени на учёбу, каким способом вы поднимали свой уровень, может быть больше читали, если да, то что и сколько.Или больше Верстали и т.д ?

4) Как вы считаете, на Чисто Вёрстке сколько можно заработать в месяц? Стоит ли вообще заниматься всем этим делом или игра не стоит свеч,если можно, поподробнее плиз. Сколько вы зарабатываете, если не секрет, хотябы плюс-минус?

[Nekromancer]

Приучите себя не пользоваться линейкой для вымеривания точных расстояний между элементами. Я 80% размеров ставлю на глаз. Особенно это касается margin'ов и padding'ов.

psywalker, детский сад прям..

"Папа, папа.. а почему трава зелёная?"(с)

[psywalker]

Nekromancer

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

Да, может быть мои вопросы для вас кажутся детскими, но я сам ещё в этом деле ребёнок, в отличии от вас, поэтому вместо того, чтобы говорить ерунду,лучшеб посоветовали что нибудь и т.д

Edited April 26, 2009 by psywalker

[Nekromancer]

Совет? пожалуйста..

Например не стоит задавать кучу вопрос, а заниматься практикой.

От такой навязчивости создаётся негативное впечатление о вас.

не в пустую ли я трачу время и какие перспективы у меня могут быть.. mellow.gif

всё зависит от вас, если вы понимаете, что делаете то у вас есть все шансы..

П.С. Я человек нервный, и меня просто раздражают такие вещи.

[psywalker]

Nekromancer

Я тя прекрасно понимаю дружище, но ты представь себе ситуацию, када ты например решил заняться делом,которое будет отнимать у тебя всё свободное время и возможно это будет твоя основная работа в жизни, но при этом ты в этом новичок и тебе важно, чтобы в будущем ты не остался у разбитого карыта, особенно если есть семья, дети и т.д, Хочется побольше узнать о том, с чем будет связана вся жизнь, всё таки это важно

[Nekromancer]

ну.. теперь и я тебя понимаю но всё же останусь при своём мнении

[s0rr0w]

s0rr0w

1) А скажите пожалуйста, вы занимаетесь и владеете тольно Вёрсткой или ещё какими нибудь технологиями, может Джава или ПХП?

2) На сколько по 10-ой шкале вы оцениваете своё мастерство Кодинга?

3) А главное расскажите, как долго вы шли к этому, сколько ушло времени на учёбу, каким способом вы поднимали свой уровень, может быть больше читали, если да, то что и сколько.Или больше Верстали и т.д ?

4) Как вы считаете, на Чисто Вёрстке сколько можно заработать в месяц? Стоит ли вообще заниматься всем этим делом или игра не стоит свеч,если можно, поподробнее плиз. Сколько вы зарабатываете, если не секрет, хотябы плюс-минус?

1) HTML, CSS, JavaScript, XML, Smarty, PHP + много всякого еще.

2) зависит от критериев оценки. Для кого-то на 3, для кого-то на 11.

3) 10 лет на рынке веб-технологий. На учебу времени ушло немного, куда больше времени ушло на переучивание.

4) максимум, как мне кажется, в районе 2 килоамериканских рублей. Дальше нужно расширять мировозрение и количество изученных технологий. Лучше всего для кодера стать ПМ.

Ситуация серьезно изменилась с 2003-2004гг. Кодеры стали важным звеном в веб-производстве. Работодатели начали серьезней относиться к нанимаемым работникам. Однако выбор адекватных соискателей на рынке невелик. Я уже полтора года ищу нормального кодера, который понимает суть всех тех задач, которые стявятся перед командой разработчиков. Увы и ах, польшинство людей работают только за зарплату, и не заинтересованы в творчестве.

[klierik]

верстаю всегда паралельно HTML+CSS

имхо, в проектах которые верстаю, оптимальное решение.

[psywalker]

s0rr0w

1)

На учебу времени ушло немного, куда больше времени ушло на переучивание.

А что значит : На переучивание?

2) Я смотрю вы знаете много технологий, но не означает ли это , что каждую из них вы знаете не На отлично, так как я слышал, что лучше выбрать что нибудь одно и совершенствоваться в этом, а у вас получается, что вы знаете немного того и другого, или я не прав?

3) Скажите, а изучение JavaScript намного сложнее, чем изучение CSS ?

[s0rr0w]

s0rr0w

1)

А что значит : На переучивание?

В конце 90х единственным адекватным способом верстки была табличная верстка. Это накладывает свой отпечаток.

2) Я смотрю вы знаете много технологий, но не означает ли это , что каждую из них вы знаете не На отлично, так как я слышал, что лучше выбрать что нибудь одно и совершенствоваться в этом, а у вас получается, что вы знаете немного того и другого, или я не прав?

Я знаю достаточно хорошо все перечисленное, кроме PHP. Эту технологию я принципиально не учу. Для этого есть програмцы.

3) Скажите, а изучение JavaScript намного сложнее, чем изучение CSS ?

Раза в 3 как минимум.

[psywalker]

s0rr0w

1) Вы говорите что можно зарабатывать Чисто на Вёрстке 2000 долларов в месяц, тогда как вы можете объяснить то, что я заходя на Фриланс вижу заказы и оплата за них просто мизерная, например Заказчик предлагает сверстать ему сайт и хочет заплатить за это 10 баксов, а больше меня удивляет то, что на этот заказ набрасываются куча верстальщиков, за него идёт борьба. Чтоже это получается, что нормальные ребята должны сидеть, зубрить, вникать в это дело, а им за это дают какие то копейки? И почему все так набрасываются и на такие заказы?

2) А сколько времени ушло у вас на JavaScript и каким методом вы его изучали?

Edited April 26, 2009 by psywalker

[s0rr0w]

1) Вы говорите что можно зарабатывать Чисто на Вёрстке 2000 долларов в месяц, тогда как вы можете объяснить то, что я заходя на Фриланс вижу заказы и оплата за них просто мизерная, например Заказчик предлагает сверстать ему сайт и хочет заплатить за это 10 баксов, а больше меня удивляет то, что на этот заказ набрасываются куча верстальщиков, за него идёт борьба. Чтоже это получается, что нормальные ребята должны сидеть, зубрить, вникать в это дело, а им за это дают какие то копейки? И почему все так набрасываются и на такие заказы?

Я фриланс вообще не беру в рассчет. Это использование знаний, а не зарабатывание их.

Веб-студии тоже не будут сильно много платить верстальщикам. Наиболее востребованные кодеры в компаниях, которые выпускают веб-ориентированные продукты.

2) А сколько времени ушло у вас на JavaScript и каким методом вы его изучали?

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

[psywalker]

s0rr0w

1)

Я фриланс вообще не беру в рассчет. Это использование знаний, а не зарабатывание их.

А что значит: Использование знаний, в смысле?

2) Если так плотненько заняться учением JavaScript, то за 2 года реально управиться, выучить и владеть им в совершенстве?

Edited April 27, 2009 by psywalker

[s0rr0w]

s0rr0w

1) А что значит: Использование знаний, в смысле?

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

2) Если так плотненько заняться учением JavaScript, то за 2 года реально управиться, выучить и владеть им в совершенстве?

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

Я не знаю JS на 100%, но того, что я знаю, с головой хватает для работы.

[Игорь Ермаков]

Верстаю параллельно хтмл и ксс

Для ускорения работы использую организацию CSS и комментарии.