rossomachin27 янв 2007 в 15:17

О том, как свёрстан «Хабрахабр»

1 мин

830

Комментарии 64

korowkin 27 янв 2007 в 16:29

Сверстайте профессионально, why not? :) Кстати, на сайте http://futurico.ru есть пара вакансий ;)
А лучший валидатор — все же, браузер. Кажется, © Тёма :)

rossomachin 27 янв 2007 в 17:32

Сверстайте профессионально, why not? :)

У меня уже есть такой пункт в личном to-do листе ;-).

Кстати, на сайте http://futurico.ru есть пара вакансий ;)

Видел.

А лучший валидатор — все же, браузер. Кажется, © Тёма :)

Думаю, даже Тёма согласился бы с тем, что заголовки надо верстать заголовками, а не дивами :-)

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

iljava 27 янв 2007 в 17:51

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

rossomachin 27 янв 2007 в 18:03

Кажется, это называется "олдскульная вёрстка" :)

Всё не так плохо на самом-то деле :-). И решаемо. Тем более, что проект развивается и всё время в нём что-то меняется. Хотя фронт работ действительно велик.

Я для себя отметил три пункта:

1. Позиционирование (можно и таблично, в принципе, но блоками непременно стоит попробовать).
2. Семантичность кода (её чаще нет, чем есть).
3. Надо что-то делать с CSS — в таком виде с ним крайне неудобно работать.

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

BBSoD 27 янв 2007 в 20:47

По поводу того, что "лучший валидатор - это браузер" у Лебедева на сайте своеобразное пасхальное яйцо. Хотите убедиться - вам именно сюда.
ЗЫ: Тёма - человек с великолепным чувством юмора!

rossomachin 28 янв 2007 в 04:21

Воистину! :-)

НЛО прилетело и опубликовало эту надпись здесь

Zitrix 2 фев 2007 в 20:22

Мило :) Кстати, не типографировано)

Junior 28 янв 2007 в 10:26

Думаю, даже Тёма согласился бы с тем, что заголовки надо верстать заголовками, а не дивами :-)

Несомненно. См. статью

rossomachin 28 янв 2007 в 10:41

Читал. И не сомневался, что у них там вменяемые люди работают. Со своей позицией.

rossomachin 27 янв 2007 в 18:42

Вот, чуть-чуть подрихтовал код на главной:

если убрать у перечня меток class="populartag", и вместо

.populartag:link { color: #336699; margin-bottom: 10px; text-decoration: none; padding-bottom: 2px; }
.populartag:visited { color: #6699cc; text-decoration: none; }
.populartag:hover { color: #ffffff; text-decoration: none; background: #999966; }
.populartag:active { color: #ffffff; text-decoration: none; background: #FF0084; }

вставить более гибкое и понятное

.TagsBox a:link { color: #336699; margin-bottom: 10px; text-decoration: none; padding-bottom: 2px; }
.TagsBox a:visited { color: #6699cc; text-decoration: none; }
.TagsBox a:hover { color: #ffffff; text-decoration: none; background: #999966; }
.TagsBox a:active { color: #ffffff; text-decoration: none; background: #FF0084; }

то можно сэкономить примерно 2,1 килобайта чистого «веса» :-)

В принципе, можно и ещё чего-нибудь облегчить, я думаю.

Junior 28 янв 2007 в 10:18

Я бы Темину фразу расширил: "Лучший валидатор - голосовой браузер."

rossomachin 7 фев 2007 в 05:01

А лучший валидатор — все же, браузер.

Всё забывал спросить — а какой именно браузер? :-)

nekt 8 дек 2008 в 09:55

lynx

deniskin 27 янв 2007 в 18:15

Все верно, верстка у нас так себе, именно поэтому ищем верстальщика, а лучше сразу двух.
Нет желание заверстать Хабр по-новому? С микроформатами и всем остальным -)

НЛО прилетело и опубликовало эту надпись здесь

NaFigator 29 янв 2007 в 12:21

Лучше если

rossomachin этим займётся :)

НЛО прилетело и опубликовало эту надпись здесь

NaFigator 29 янв 2007 в 12:40

Не сомневаюсь нисколько, но у него есть пара преимуществ:
1. http://www.habrahabr.ru/blog/microformat…
2. Сей топик создал он ;)

НЛО прилетело и опубликовало эту надпись здесь

NaFigator 29 янв 2007 в 13:07

Да я беззлобно, просто "отдал свой голос в пользу N" :)

rossomachin 29 янв 2007 в 15:23

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

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

NaFigator 29 янв 2007 в 16:34

Замечательно :)

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

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

Junior 30 янв 2007 в 09:44

А мона потом покритиковать будет? :) Страсть как люблю придраться к чему-нибудь =)

p.s. Если повод дадите, конечно :)

rossomachin 1 фев 2007 в 17:18

Дадим

entze 27 янв 2007 в 18:16

А зачем картинка с результатами валидатора JPEGом сделана? Да еще с таким ужасным сжатием.

rossomachin 27 янв 2007 в 18:26

При попытке запостить картинку через форму Хабра появилось сообщение «К сожалению, мы сейчас умеем сжимать только JPEG :(» — я изначально делал скриншот пингом (PNG). А сжал так только потому, чтобы трафик людям уберечь, сохранив хотя бы минимальную читаемость текста :-)

Coogle 27 янв 2007 в 21:06

rossomachin, ты бы не критиковал по чём зря, а взял бы и помог людям.

Как говорится, языком молоть, не мешки ворочать.

entze 28 янв 2007 в 08:00

Можно было временно разместить картинку на любом картиночном хостинге в смотрибельном виде, если уж делаем этот мир лучше ;)

rossomachin 28 янв 2007 в 08:54

fixed.

Кстати, ошибок стало 104 вместо 108.

entze 28 янв 2007 в 09:08

Ок :)
Но по поводу правок, облегчения и т.д. - интересно все это только применительно к исходным шаблонам. Т.к. вполне может быть, что избыточность финального HTML вызвана проблемами сборки из разных блоков самой CMS (Framework). Тоже самое относится к CSS - упрощая его ведь надо расковырять все блоки и могут вылезти конфликтные ситуации. Лучше начинать последовательно с начала и правильно.
Кстати насчет CSS - у меня сложилось впечатление что года до 2004 Лебедев вообще его оч. стеснялся.

Flack 27 янв 2007 в 20:34

Макс, можешь рассчитывать на мою помощь, если что ;)

rossomachin 28 янв 2007 в 04:13

Ну куда бы я без вас делся? :-) Группа будет извещена о затевающемся деле. Подробности изложу в сам-знаешь-где.

rossomachin 28 янв 2007 в 04:50

В сам-знаешь-где только что опубликована вводная информация. Прочитай и передай другим.

Junior 28 янв 2007 в 10:28

Эх, времени сейчас маловато... Я бы к вам присоединился. Опыт есть неплохой.

NaFigator 29 янв 2007 в 12:26

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

urbansheep 1 фев 2007 в 16:44

В дополнение к вёрстке «каркаса» ещё оказалось, что хабр внутрь пропускает только весьма ограниченный набор тегов. Ни одного из заголовков в списке разрешённых нет. И без этого очень тяжело, когда привыкаешь к структурированным текстам.

Хотя бы пару h2/h3 добавили в список. Тогда заголовки на страницах бы логично обрамлялись в заголовки h1, а дальнейшая структура материала — в h2/h3. Все были бы счастливы — семантическая разметка для тех, кто знает про неё, и никаких изменений для тех, кто «просто пишет тексты».

rossomachin 1 фев 2007 в 17:25

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

Увы и ах. Отсутствие заголовков мешает и мне. Ещё осенью поднимал этот вопрос, но безрезультатно.

Если всё пройдёт так, как задумано, то «Хабр» обретёт качественную начинку уже к марту-апрелю.

Pavel 1 фев 2007 в 17:26

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

rossomachin 1 фев 2007 в 17:40

О, не извиняйтесь.

Мне нравится «Хабрахабр», нравятся люди, его создавшие и развивающие,— отсюда моё желание сделать «Хабрахабр» лучше. Самый интересный для меня рунетовский стартап прошлого года просто обязан быть свёрстан профессионально.

la_terra 1 фев 2007 в 18:33

есть у меня мнение: надо ввести термин "авторская верстка", подстать авторской пунктуации ))

rossomachin 1 фев 2007 в 18:37

Для него и синонимичное сочетание искать не надо: «tag soup». :-)

la_terra 1 фев 2007 в 18:41

оставьте, право... ) ну что вы к форме докапались, пиная на то что это содержимое? Содержимое это все же контент, а вот на него мы точно можем повлиять ))

Dogen 1 фев 2007 в 20:40

Подход "трафик, процессоров и дисков еще докупим, пусть верстка остается как есть" непрофессионален. Хорошая продуманная верстка может сэкономить немножко денег, особенно если посещаемость сайта будет расти. Так что ветка очень даже в тему. То, сколько весит облако тегов, и правда пугает - хоть в gif его сливай и html map делай ;) Шутка

la_terra 1 фев 2007 в 20:50

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

Dogen 2 фев 2007 в 06:54

Да здесь даже речь о косметике вроде бы идет :) Переделывать не много придется.

Силой мысли проникаю, что хозяин занят концептуальными вопросами бытия Хабра :)))

rossomachin 2 фев 2007 в 15:24

Переделывать не много придется.

Переделывать придётся всё.
Нет семантики, бардак со стилями, хотелось бы внедрить микроформаты etc. Работы очень много, но она весьма интересна.

Dogen 2 фев 2007 в 15:27

А поясните ньюбу, что означает "нет семантики".

Вообще я смотрю, кашу из топора варить придется фигурантам предполагаемой переверстки. Может быть, стоит говорить о Habrahabr 2.0 beta ;)

rossomachin 2 фев 2007 в 16:03

А поясните ньюбу, что означает "нет семантики".

Заголовки не свёрстаны заголовками и тому подобное. Таблицы в качестве основного средства построения макетов. Много чего.

Может быть, стоит говорить о Habrahabr 2.0 beta ;)

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

Vive la XHTML 1.0 Strict!

Zitrix 2 фев 2007 в 20:47

Не в железе и трафике дело, не факт что они будут стоить больше, чем html-верстальщик. Вы — прямо на этой страничке — превьюшку печати посмотрите: неужто на ней кому-то понадобятся убивающие треть горизонтали названия тэгов и объявление со ссылкой? А что до гифа :), то, ИМХО, ссылки от корня и короткие названия классов подойдут поболе.

la_terra 1 фев 2007 в 18:28

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

Pavel 1 фев 2007 в 20:19

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

la_terra 1 фев 2007 в 20:36

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

я тебя понимаю, я например по той же причине не пытаюсь разобраться в устройстве автомобиля, работает как надо, а как оно работает мне не интересно ) Но есть же дотошные и таких много... я не навязываю тебе мнение, особенно если сама скорее склоняюсь к твоему, я просто говорю что для кого-то это НОРМАЛЬНО )

b14cKc47 1 фев 2007 в 21:10

Хабр призван собрать вокруг себя людей занятых в интернет-индустрии (и не только). Заглянуть почитать исходник - просто профессиональных интерес многих хабрлюдей.

Dogen 2 фев 2007 в 06:55

Ага, я смотрел только из любопытства, как задается размер шрифта в облаке тегов.

rossomachin 2 фев 2007 в 15:45

Кстати, целая проблема с этим. Вернее, нужно ещё придумать, как бы это сделать получше. Вот отличный анализ уже внедрённых облаков тегов (Flickr и т.п.) — все решения неидеальны с точки зрения вёрстки. Inline-стили лучше бы вынести во внешний CSS-файл, в котором задать классы типа popular, popular-1, popular-2 И т.п., в каждом из классов увеличивать на 5-10% величину шрифта по сравнению с предыдущим. Как-то так.

Dogen 2 фев 2007 в 16:16

Минимальный выигрыш.

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

Мне так показалось красивее.

rossomachin 2 фев 2007 в 17:55

Минимальный выигрыш.

Дело не столько в попытке снизить размер кода, сколько в желании отделить контент от представления (это исключено, если используются inline-стили). Снижение «веса» скорее следствие.

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

Нет. Опытным путём подобрать полный диапазон классов начиная от самого мелкого и заканчивая самым крупным размерами шрифта. И сделать это не через px (не в каменном веке живём), а через em-ы. Все эти классы заранее вбить в tagcloud.css, а далее можно работать по вашей схеме, чуть её доработав (я думаю, это по силам программистам?).

Ну и, конечно, вместо <a href="" style="font-size:12px;"></a> будем иметь что-то типа <a href="" class="pop-1"></a>

Dogen 2 фев 2007 в 19:11

Осознанное жертвование логической красивостью - тоже признак профессионального подхода :0 Это, знаете, вроде как если осознанно денормализовать структуру БД при проектировании в угоду высоким характеристикам будущей информационной системы ;)