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

codriter · April 25, 2009

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

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

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

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

Justnewone · April 29, 2009

А вы отключаете JS?

FF + noscript. Примеры такого комплдекта у меня перед глазами сплошь и рядом. Потому считаю использовать JS не ради эффектов, а как подпорки к верстке крайне нежелательным.

Fioletov · April 29, 2009

2psywalker: год для ксс + хтмл это имхо довольно много. там всех свойств и тэгов - на неделю учить, а потом всё оставшиеся время понимать как они взаимодействуют. по-моему для средне-высокого уровня этого достаточно.

s0rr0w · April 29, 2009

FF + noscript. Примеры такого комплдекта у меня перед глазами сплошь и рядом. Потому считаю использовать JS не ради эффектов, а как подпорки к верстке крайне нежелательным.

Так отключаете или нет? У меня тоже может стоять noscript, но я им могу не пользоваться.

Justnewone · April 29, 2009

Так отключаете или нет? У меня тоже может стоять noscript, но я им могу не пользоваться.

Если плагин установлен и им пользуются, то по крайней мере один раз при первом заходе верстка с помощью JS выглядит "неожиданно". )

Собственно, речь о том, что по моему мнению, опрометчиво доверяться пользователю в вопросе отключенного/включенного JS. Может по старинке а может условия такие, но стараюсь, конечно в гранях разумного, предусмотреть и отключенный JS, и картинки, и даже стили. Временами представляю как сайт может парситься голосовыми браузерами, хотя это, конечно уже перебор ).

Да что говорить, я по инерции порой вертикальное выравнивание делаю не таблицей )))

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

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

s0rr0w · April 29, 2009

2psywalker: год для ксс + хтмл это имхо довольно много. там всех свойств и тэгов - на неделю учить, а потом всё оставшиеся время понимать как они взаимодействуют. по-моему для средне-высокого уровня этого достаточно.

Заучивать нужно не свойства и теги, а действия, которые эти свойства и теги делают.

Nekromancer · April 29, 2009

так скажу вам по секрету, я учил html 6 лет назад..(мне было 11), сейчас (дето по года назад) у меня появилась возможность заниматься этим серьёзно..

так вот, сам html я не помнил, да и нафиг надо ведь есть css.. я тупо начала учить css и его взаимодействие с html.. параленьно вспомнил всё то что было важно из html..

как то так

потом ещё пришлось научиться блочной вёрстке, но это уже были мелочи :lol:

onqu · April 29, 2009

А вы отключаете JS?

На своей машине отключаю в редких случаях. Поясню: мне довелось поработать сисадмином пару лет, обслуживание 2х офисов, порядка 150 пк. После полугода на этой должности мне пришлось запретить js полностью на 80% машин, иначе не хватало времени на устранение проблем пк юзверей. Полные запреты на установку/исполнение сделать было нельзя, начальство было против, т.к. компания занималась рекламой, пиаром, сео и тд.

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

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

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

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

Justnewone · April 29, 2009

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

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

s0rr0w · April 29, 2009

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

Укладывание в рамки ТЗ не характеризует эффективность верстки. Эффективность описывает способ достижения цели, но не саму цель.

psywalker · April 29, 2009

s0rr0w

А как думаете, в будущем возможно такое, что Css себя изживёт, тоесть какие нибудь программеры придумают какую нибудь машину, которая сама будет верстать сайты по запросам автора и верстальщики останутся без работы?

s0rr0w · April 29, 2009

s0rr0w
А как думаете, в будущем возможно такое, что Css себя изживёт, тоесть какие нибудь программеры придумают какую нибудь машину, которая сама будет верстать сайты по запросам автора и верстальщики останутся без работы?

Все идет к тому, что интернет будет похож на Матрицу. :lol:

Игорь Ермаков · April 29, 2009

А как думаете, в будущем возможно такое, что Css себя изживёт, тоесть какие нибудь программеры придумают какую нибудь машину, которая сама будет верстать сайты по запросам автора и верстальщики останутся без работы?

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

Только не забывайте о том, что технологии не стоят на месте, со временем появляется всё больше и больше областей в которых программы пока бессильны.

onqu · April 29, 2009

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

Даже платные cms ломаются. Есть кучи банальных правил для www, и одно из них - Вы выкладывает всю информацию на свой страх и риск, - и в реальной жизни машины угоняют.

Укладывание в рамки ТЗ не характеризует эффективность верстки. Эффективность описывает способ достижения цели, но не саму цель.

Как же? А Ваш первый пост? Ведь время это все, что у нас есть.

s0rr0w · April 29, 2009

Как же? А Ваш первый пост? Ведь время это все, что у нас есть.

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

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

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

alexspb · April 30, 2009

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

Все от контекста зависит: "как проще" в краткосрочном плане может вполне = "как выгоднее.

Самое верное - не возводить в абсолют никакие правила. Чаще работает правило 20/80

Justnewone · April 30, 2009

Даже платные cms ломаются. Есть кучи банальных правил для www, и одно из них - Вы выкладывает всю информацию на свой страх и риск, - и в реальной жизни машины угоняют.

Если машина застрахована - у Вас будет некая компенсация. А если нет - ни машины, ни денег. В опенсорсе, к сожалению, с ответственностью плохо. Именно потому виндавс, хоть и не всем он так уж нравица, но главенствует - юр лица и госпредприятия не будут переходить на опенсорс в массовом порядке именно по причине отсутсвия виноватых если что. Пример. Знакомый, в штатах, работает в конторе, которая занимается хранением некой информации за денежку, у него сетка раид массивов, структуризация по поиску и т.д., как-то так. Так вот, "юникс же круче и бесплатно - у меня стоял раньше юникс, отказался. виндовс приедет ко мне втечение 4-х часов (пункт договора) и без вопросов лечит все и вся (и приезжает ведь, я был очень удивлен), а опенсорсные глюки приходица зачастую решать по ночам и очень болезненно, потому что надо _уже вчера_ и ждать заплаток бывает очень долго". А где начинается ответсвенность - начинаются денежки, да Вы почитайте тексты лицензий, сравните, все станет ясно.

s0rr0w · April 30, 2009

Все от контекста зависит: "как проще" в краткосрочном плане может вполне = "как выгоднее.
Самое верное - не возводить в абсолют никакие правила. Чаще работает правило 20/80

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

А где начинается ответсвенность - начинаются денежки, да Вы почитайте тексты лицензий, сравните, все станет ясно.

Именно поэтому есть такая контора как Novell, которая бесплатно распространяет продукт, но поддержка - за денюжку.

Вообще на продукцию МС переходят не по этим причинам. Стоимость рабочей силы меньше. "Администраторов" виндовс-систем в 10 раз больше, чем *nix систем, но вот суммарное качество знаний у этих групп - одинаковое.

Justnewone · April 30, 2009

Именно поэтому есть такая контора как Novell, которая бесплатно распространяет продукт, но поддержка - за денюжку.

Есть и еще несколько и лицензия у них у же не GNU/GPL на продукт, а лицензия на поддержку. я же говорил о опенсорсах "на свой страх и риск" типа убунты и подобного "скачал и работает".

Zippovich · June 11, 2009

1. Открываю макет в PhotoShop - изучаю макет

2. Открываю: FF3, Opera, Safari, Chrome, IE6, IE7

3. Открываю в notepad++

- index.html (с уже готовым head)

- css/styles.css

- css/ie.css (для всех IE)

- css/ie6.css (для IE6)

4. Верстаю одновременно HTML и CSS

5. После сверстанного блока проверяю во всех броузерах (очень важно сразу локализовать проблему в каком-то броузере, что бы не наблюдать потом в IE6 как все посдвигалось, от чего-то вверху)

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

7. После сверстанного макета и поигравшись им (ресайз окна, просмотр в 1024х768 или что там задумано и пр.) прогоняю валидатором. Обычно ошибок нет, хотя может закрасться парочку, типа забыл выставить cols, rows в textarea или символ & в alt картинки.

8. Отсылаю заказчику.

Средняя страница занимает 4-8 часов, остальные, от 30 минут до 2-х часов, в зависимости от отличий.

Люблю использовать inline-block, float, position: absolute, hacks for ie6, ul li.

Пример CSS:

/* CSS2 Document */
/* ————- */
* {padding: 0; margin: 0}
body {font: 14px Calibri, Verdana, Geneva, Kalimati, sans-serif; background: #86b7d2}
img {border: none}
a {color: #004e9e}
.clear {clear: both}
.pt-20 {padding-top: 20px}
/* —Main markup— */
.min-width-fixer {min-width: 994px}
#container {margin-left: 251px; clear: both}
#wrapper{float: left; width: 100%; margin-left: -251px}
#navigation{float: right; width: 241px; padding: 16px 10px 0 0}
/* —Header— */
#header {height: 131px; background: url('/new/resources/header-background.png') repeat-x; padding-left: 8px; min-width: 986px}
.header-layer {height: 121px; background: url('/new/resources/header-background-2.jpg') no-repeat; padding: 10px 0 0 1px}
.logo {position: relative; display: inline-block; float: left}
.logo span {position: absolute; left: -10000px}
/* —Search— */

Ставлю комментарии, т.е. при выделении их цветом в Notepad++ легче увидеть то что тебе нужно поправить

Код html не привожу, ничего там нет примечательного.

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

psywalker · June 11, 2009

Zippovich

Слушай, а такой вопрос: Сколько обычно платят за чисто Вёрстку по твоим мерам? вот ты сколько за Главную страницу получаешь и за внутренние?

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

Edited June 11, 2009 by psywalker

Zippovich · June 12, 2009

Zippovich
Слушай, а такой вопрос: Сколько обычно платят за чисто Вёрстку по твоим мерам? вот ты сколько за Главную страницу получаешь и за внутренние?
p. s. - а дай пожалуйста ссылочку на какую нибудь твою работу (самую лучшую и чистую на твой взгляд), код поглядеть, поучиться

Ну я сильно цены не загибаю, обычно мне хватает рейта $5 = 1 час

В личку ссылку кину, прошу мои работы в инете не размещать и не давать ссылки на них.

BassEast · June 17, 2009

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

мелочи ага..

BassEast · June 17, 2009

вообще, framework для вёрстки, становится просто необходим..

Я посмотрел некоторые из примеров фреймворков, -- это какой-то честно говоря бред.

Уже второй день пишу кстати свою версию фреймворка.

Что я в него хочу заложить (всё это сырьё, просто хочу донести идею в двух словах) :

1. Всякие эти наборы: h1, h2, h3 ... это вообще на мой взгляд не к фреймворку, но включить стоит.

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

Что содержит он? Да самое минимальное для того, чтобы страница не распечаталась к примеру на четверть листа: стили для: body, a, a img, h1, h2, h3, p...

2. В шапку вставить (мой пример) основных стилей:

/* main styles */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0; padding:0;
}

fieldset, img { border:0; }
address, caption, cite, code, dfn, em, strong, th, var {
font-style:normal; font-weight:normal;
}
ol, ul { list-style:none; }
caption, th { text-align:left; }
h1, h2, h3, h4, h5, h6 { font-size:100%; }
q:before, q:after {content:”;}

/* delete all lines in FF */
*|*:-moz-any-link:focus {
outline: none;
}

table {
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	padding: 0;
}

table td, table th {
	padding: 0;
}

a {
	color: black;
	text-decoration: underline;
}

a:hover {
	color: silver;
	text-decoration: none;
}

body {
	margin: 0px;
	padding: 0px;
	background: #fff;
	text-align:center;
}

body, td, th {
	font: 9.0pt/1.2em Tahoma;
	color: #000;
	coding: Andrey Sotnikov;
}

form, h1, h2, h3, h4, h5, p, ul, ol, li {
	margin:0;
	padding:0;
	list-style: none;
}

input,
select,
textarea {
	font: 9pt Tahoma;
	color: #000;
}

.cb {
	clear:both;
	height: 1px;
	margin: 0px 0 -1px 0;
	display: block;
}

.cl {
	clear: left;
}

/* end main styles */

/* delete all lines in FF */
*|*:-moz-any-link:focus {
outline: none;
}

- необходим для FF чтобы убрать пунктирную линию при клике по ссылке. (тут по желанию, меня лично это бесит))

2. Поехали.

Фиксим самые дебильные недочёты отображения в IE6!!!

а. Обязательным пунктом хотел бы вставить и забыть такую вещь, как PNG прозрачность в IE6 - при чём такое решение, чтобы это ничему не мешало, и работало с минимум js кода. Варианты с iepngfix.htc... или код:

* html img, 
* html .png{
	behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
		this.src = "http://komodomedia.com/wp-content/uploads/2007/11/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
		this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
		this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)

	);
}

подставляя класс: .png, с сайта: Комодомедиа... наверное самые оптимальные, но это по крайней мере то, что я использую.. но не совсем ими доволен.

б. Перекрытие select-ов в IE6 для блоков с абсолютным позиционированием.

Способ минимализмом своим внушает доверие:

вписываем в свой css файл код:

.iBiliveInGod iframe  { display:none; display/**/:block; position:absolute; top:0px; left:0px; z-index:-1;
  filter:mask(); width:3000px; height:3000px; }

в конец общего блока (к примеру если это pop-up) вставляем это:

<!--[if lte IE 6.5]><iframe></iframe><![endif]-->

в. Добавить вариант решения min-width для IE6

3. Тинэйшузы!

а. Сверстать раз и навсегда: тянущийся блок на 100% с круглыми краями, и такой же блок с фиксированной шириной.

б. Сверстать раз и навсегда: тянущийся блок на 100% с круглыми краями и с тенью, и такой же блок с фиксированной шириной.

+ всё то же самое повторить, но с обычными краями, без закруглений.

в. Сверстать блок с плюсом и минусом. (+ -), здесь нужна ещё будет функция JS, которая будет раскрывать и закрывать этот блок.

г. Скролбар со своим дизайном + JS функция для работы этого скроля.

д. Красивые, тянущиеся, меняющие по свойству:hover кнопки для input type="submit", input type="reset"

е. CSS меню в виде переключающихся табов (горизонтальное, вретикальное) + JS функция для переключения.

4. Сами функции JavaScript.. для реализации вышеуказанного.

вообще вот как-то вот так вот)

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

Edited June 17, 2009 by BassEast

Razor · June 17, 2009

Насчет ПО для автоматической верстки. Вся проблема сейчас, думаю, какраз в реализации стандартов браузерами. Когда все устаканется, например будет CSS3 и реализован всеми браузерами в полной (или почти) полной мере, да хотяб CSS2 - то ПО для автоматической верстке создать будет уже не проблема.

Sign In

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

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

74 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information