Разное

Здравствуйте.
Сколько по времени вы верстали бы эту страницу? Условие: картинки порезанные вам даны и тексты тоже (не надо ничего перепечатывать с картинки) . Я уже сверстал, пока не скажу за сколько.

от 30мин до 2ч с перерывом на чай и просмотр новостей.

Час работы

хотел бы я посмотреть на результат работы отписавшихся выше :)

Я прикреплю потом и попрошу покритиковать, потомучто я так всегда верстку делаю, мне мой результат не нравится. Верстка у нас процесс долгий.

Я делал это 2 часа, при этом у меня на на скайпе висел директор - никуда не отвлечешься. Вот моя работа (см. аттач). Шаблонами кода (сниппетами) почти не пользовался кроме шаблона html страницы и шаблона тегов <style>. Таким образом, почти все печатал вручную. Картинки были порезаны, тексты даны.

видно, что вы не профессиональный верстальщик, всё плохо. самое худшее то, что результат не соответствует исходной картинке и это даже просто на глаз, не сравнивая в фотошопе. потом этот текст на картинках, не знаю, это условие такое наверное было, но это ужасно. далее стили...нельзя так стили блоками <style> разбрасывать по всему документу, я даже не знаю что будет, когда нужно будет что-то где-то поменять. стили должны быть в отдельном файле и никак не фигурировать в структуре html-документа. или же только внутри head, но только в одном блоке style. доктайп устаревший, зачем над доктайпом <?xml version="1.0" encoding="UTF-8"?> это для меня вообще загадка...
плюс еще куча субъективных вещей, что очень не нравится, вроде одинарных кавычек в html-документе, маленьких отступов, перечисления стилей в css в одну строку в странной последовательности (где-то width...; margin: ...; position: ..., где-то padding..; position...;margin и т.п).
в общем, если бы мне предложили переделать данный шаблон, то я бы посмотрел и либо ужаснулся и отказался, либо 90% того что там содержится переделал бы с нуля. хотя я тоже не верстальщик, но иногда приходится.

>видно, что вы не профессиональный верстальщик, всё плохо

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

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

Вымерять по пикселю не требовалось. Более того, у нас результат может на 80/90% отличаться от макета. Нарисовано одно, сделано другое. Тогда дизайнер висит у меня на скайпе и говорит как и что нужно делать. Спрашиваю почему? Дизайнер говорит - верь мне, я знаю, что хочет заказчик и он это примет (и по итогу, как правило принимает). Мы с дизайнером оба иррационалы, нас такие изменения по ходу не пугают. Вообще, смотря какой заказчик, есть у нас и милиметровщики, которым вплоть до милиметра (пикселя) нужно соответствие.

> потом этот текст на картинках, не знаю, это условие такое наверное было, но это ужасно

Это не ко мне.

>нельзя так стили блоками <style> разбрасывать по всему документу, я даже не знаю что будет, когда нужно будет что-то где-то поменять. стили должны быть в отдельном файле и никак не фигурировать в структуре html-документа. или же только внутри head, но только в одном блоке style

Это годами выработанная практика. Отдельные стилевые файлы мы уже проходили. Представьте несколько страниц и огромный стилевой файл, где стили еще не вытянуты в 1 строчку, а написаны по классической схеме - 1 правило = 1 строчка. Замучаешься переключаться между файлом стилей и html-шаблоном Smarty, а потом прокручивать css-файл, причем html-блок уникальный и только на одной странице. Я тут далеко не первооткрыватель, если посмотреть исходные коды сайтов - многие так делают. Если нужно будет что-то поменять, а как правило, менять надо что-то кардинально, я открываю шаблон smarty, нахожу блок со стилями и правлю его (или совсем удаляю) и никакой возни с css-файлами. Что скажут другие форумчане?

>доктайп устаревший, зачем над доктайпом <?xml version="1.0" encoding="UTF-8"?> это для меня вообще загадк

Спросите авторов редактора Komodo Ide на мак, зачем они добавили это в xhtml шаблон страницы.

>плюс еще куча субъективных вещей, что очень не нравится, вроде одинарных кавычек в html-документе

К одинарным кавычкам давно привык..

>перечисления стилей в css в одну строку в странной последовательности

Чтобы избежать длинной прокрутки. По опыту скажу, длинная прокрутка - зло. Вытягивание стилей в 1 строчку пока только у себя видел. Последовательность правил действительно рандомная, но я хорошо в них ориентируюсь. Вы, наверное, рационал, стремитесь разложить все по полочкам - одно, строго после другого и это хорошо, а я иррационал, поэтому у меня нет четкой последовательности правил в css-блоке и мне никто пенделя за это не даст. Хотя, наверное. вы тут правы. Если выработать даже для себя последовательность что, после чего - тогда можно и работать быстрее.

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

Мы недавно сделали интернет-магазин с похожей версткой. В результате у заказчика, реального магазина, на четверть выросли продажи. Собирал сайт 100% я (php, html, js, css). Принимали несколько человек: мой дизайнер, сотрудники гос. конторы, с которой мы работаем, заказчик. Вопрос: нужно ли переделывать здесь верстку?

>> Что скажут другие форумчане?

1. Раскидывание стилей по шаблонам - абсолютное зло в условиях больших проектов. Так как это гарантированно приводит у дублированию css кода. Если у вас один блок повторяется более чем на одной странице, его css правила вы тоже будете копировать?

2. Если давать css классам говорящие имена и грамотно организовать структуру папки со стилями, то в html код и лазить не придётся. Просто правите стили.

3. Освойте препроцессоры типа SASS или LESS. Я потратил на них пару дней (в общей сложности), зато теперь уже обычный css без миксинов, вложений, циклов и переменных просто не могу. Отвращение вызывает :) А про скорость разработки и говорить нечего (субъективно - раза в два быстрее стал верстать)

4. Освойте какой-нибудь фреймворк, типа bootstrap. Помимо гарантированной работы во всех вменяемых браузерах получаете адаптивные функции из коробки бонусом. Ну и +50 к скорости вёрстки.

>> если посмотреть исходные коды сайтов - многие так делают

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

PS Кстати говоря, вот такие отдельные лендинги как вы показали верстать можно не заморачиваясь ни на какие правила, хоть таблицами. Хотя на том же бутстрапе я б сверстал такую страницу минут за 15. Ещё столько же на мелкую доводку. Feel the power of frameworks :)

PPS Тоже ни разу не профессиональный верстальщик. Просто стараюсь во всём оптимизировать работу.

>Если у вас один блок повторяется более чем на одной странице, его css правила вы тоже будете копировать?

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

>2. Если давать css классам говорящие имена и грамотно организовать структуру папки со стилями, то в html код и лазить не придётся. Просто правите стили.

Вот это для меня большая проблема. Много времени трачу на обдумывание названий, и далеко не всегда названия названия хорошие приходят в голову. Пробовал для скорости называть блоки .a, .b, .c. Не прокатило. Заказчик всегда поменяет порядок блоков. Никогда не ограничивался правкой только css. При редизайне надо было и html много править.

PS А за советы спасибо. 15 мин вашего времени, 2 часа моего. Это если я им последую, это получается, у нас верстка в 8 раз быстрее идти будет :)

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

Я немного не про это. Есть семантически (по смыслу) похожие вещи. Например таблицы. Они могут быть разными с точки зрения контента (разные шапки, последовательность столбцов, формат ячеек и т.д.) но одинаковые с точки зрения оформления.

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

>Я немного не про это. Есть семантически (по смыслу) похожие вещи. Например таблицы. Они могут быть разными с точки зрения контента (разные шапки, последовательность столбцов, формат ячеек и т.д.) но одинаковые с точки зрения оформления.

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

>> Создается общий отдельный css-файл (format.css)

Собственно, ЧТД :)

вот оно ))))

Но я же не дурак, чтобы css-оформление каждого абзаца, заголовка, таблицы вставлять в каждую страницу Но стили отдельных блоков размещаются вместе с html.

>> Но стили отдельных блоков размещаются вместе с html.

Ок. А теперь прикинем классическое пожелание заказчика "давайте поиграем цветами, шрифтами, толщиной линий и т.д.".

С вашим подходом вы лазите по шаблонам и правите везде код, попутно комментируя старые значения. Айс?

А в ситуации с css файлами вы просто создаёте style_green.css style_blue.css и т.д. и просто меняете их показывая результат заказчику.

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

Вот только дизайнер парит меня поблоково - сначала один блок до идеала доведем, потом второй. Поменять цвета на всем сайте - с такой задачей не сталкивался просто. А если встречусь - будет очень трудно с моим подходом. Может, у меня верстка под конкретного дизайнера/специалиста по работе с клиентами сложилась, 10 лет вместе работаем.

PS Если бы я пришел работать в контору, где стили надо было делать отдельно, я делал бы отдельно и вообще следовал бы требованиям конторы к верстке.

Современный веб дизайнер должен владеть азами вёрстки и UX. Иначе у него будет исключительно полиграфия получаться.

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

>Вымерять по пикселю не требовалось. Более того, у нас результат может на 80/90% отличаться от макета. Нарисовано одно, сделано другое. Тогда дизайнер висит у меня на скайпе и говорит как и что нужно делать. Спрашиваю почему? Дизайнер говорит - верь мне, я знаю, что хочет заказчик и он это примет (и по итогу, как правило принимает). Мы с дизайнером оба иррационалы, нас такие изменения по ходу не пугают. Вообще, смотря какой заказчик, есть у нас и милиметровщики, которым вплоть до милиметра (пикселя) нужно соответствие.

это очень плохо. исходный макет для того и рисуется и утверждается заказчиком, чтобы потом сайт на 100% ему соответствовал и в случае чего можно было на этот макет сослаться. как вы сможете это сделать, если у вас макет один а результат другой? это же глупо с самого начала так себя подставлять.


>Это годами выработанная практика. Отдельные стилевые файлы мы уже проходили. Представьте несколько страниц и огромный стилевой файл, где стили еще не вытянуты в 1 строчку, а написаны по классической схеме - 1 правило = 1 строчка. Замучаешься переключаться между файлом стилей и html-шаблоном Smarty, а потом прокручивать css-файл, причем html-блок уникальный и только на одной странице. Я тут далеко не первооткрыватель, если посмотреть исходные коды сайтов - многие так делают. Если нужно будет что-то поменять, а как правило, менять надо что-то кардинально, я открываю шаблон smarty, нахожу блок со стилями и правлю его (или совсем удаляю) и никакой возни с css-файлами. Что скажут другие форумчане?

понятия не имею кто её вырабатывал, тем более годами. почему тогда не пишите стили инлайном, если для вас так принципиален размер? ваш подход ничем не выигрывает у описания стилей инлайном. а слышали что-нибудь о наследовании стилей?
так делать нельзя. причем тут вообще smarty? если ваш редактор / IDE не умеет при клике по названию класса в HTML-документе быстро переходить к его описанию в CSS-файле, то это только ваша проблема и проблема вашего редактора. это ни в коем случае не значит, что надо продолжать и дальше лепить этот ужас только из-за того, что с вашими кривыми тулзами так легче работать. ни на одном мало мальски значимом и известном сайте я такого не видел, все уже давно пользуются нормальными IDE и отделяют мух от котлет. вы бы еще PHP-логику в этот единственных файл с шаблоном запихнули только потому, что вам переключаться между файлами неудобно
более того, я совсем не уверен, что браузер будет кэшировать такие стили, хаотично разбросанные по документу. так же, я не уверен что страница будет адекватно рендерится, т.к стили не в head и какие-то картинки вряд ли успеют прогрузиться


>Спросите авторов редактора Komodo Ide на мак, зачем они добавили это в xhtml шаблон страницы.

ну вот опять, делаете неправильно только из-за того, что ваша кривая IDE делает так. посмотрите какая структура должна быть у HTML-документа
http://www.w3schools.com/html/default.asp
https://ru.wikipedia.org/wiki/HTML#.D0.A1.D1.82.D1.80.D1.83.D0.BA.D1.82.D1.83.D1.80.D0.B0_HTML-.D0.B4.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0
http://htmlbook.ru/samhtml/struktura-html-koda


>Мы недавно сделали интернет-магазин с похожей версткой. В результате у заказчика, реального магазина, на четверть выросли продажи. Собирал сайт 100% я (php, html, js, css). Принимали несколько человек: мой дизайнер, сотрудники гос. конторы, с которой мы работаем, заказчик. Вопрос: нужно ли переделывать здесь верстку?

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

Как едко.

>рано или поздно претерпевает определенные изменения. и лучше если он будет изначально написал правильно, а не по принципу "после меня хоть трава не расти"

Наши проекты еще ни разу никто кроме нас не правил. Ни один заказчик не ушел. Через 2 года опять редизайн сайта и делаем его опять мы, но чаще приходится дорабатывать сайт, делать новый функционал. У меня проблем с таким кодом ни разу не возникало. Я-то знаю, что любые доделки на сайте буду я делать, мне нельзя делать по принципу: "после меня хоть трава не расти". Пока меня не устраивает только время, затрачиваемое на верстку.

ни в коем случае не хотел обидеть. дело ваше, нравится так делать - делайте.

Знаете, не то, что нравится, я к этому пришел. Если бы мне все нравилось, я бы не дал покритиковать образец моей верстки. У нас верстка больное место, очень медленно идет в отличие от php-части (за php, я чувствую тоже бы пенделя здесь получил, и не только от psychomc'а :)

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

psychomc - поправьте пожалуйста ваше сообщение от (02.10.2014 в 11:42). Читать тему очень неудобно с горизонтальной прокруткой. Вот скриншот.

PS Уже поправили. Спасибо.

Я работаю не на время, а на результат. Тех, кто сидит "на шее" и
заглядывает через плечо, послала бы далеко и надолго. Я вообще
версткой не занимаюсь. И обязательно буду проверять, как нарезаны
картинки. Ненавижу "дизайнерские" габариты типа 401*256px.

Ненавижу "дизайнерские" габариты типа 401*256px.

А что такое, почему?

Какими они должны быть?

Ровными. Гладкими. Круглыми. Один пиксель ничего не решает,
а резать приятней 400, чем 401. Нет, конечно, если эта картинка -
часть большой и отрезанный пиксель будет заметен, тогда при
дефиците времени оставлю, как есть. Но в идеале скорее все
картинки переделаю.