Оцените верстку
3563 сообщения
#17 лет назад
SolNikolay, не сказал бы, если верстка перевод картинки в HMTL, то ее задача, сделать "как на картинке". Логическая структура кода вторична. Хотя дял работ высокого уровня, на мой взгляд, обязательна (ее и програмировать, и переделывать легче).
77 сообщений
#17 лет назад
SmartDesign, ссылка в H1 может быть поводом для бана. Впрочем, наверное, я перестраховываюсь. Но уж лучше перестраховаться. Тем более мне там не нужно ключевое слово "новости" в H1. 
По поводу совершенства не согласна. Дивная верстка и позволяет отделить визуальную структуру от кодовой, что и приводит к настоящему совершенству. Например, к тому, чтобы код начинался непосредственно с контента, а не с огромной шапки с формой и левого меню, которые визуально идут ПЕРЕД контентом. Пример тут: ссылка , и на velurr.ru тоже. В результате имеем плюсы как в быстрой загрузке непосредственно информации (юзерам с диалапом не надо ждать загрузки шапки), так и хорошую индексацию.
Я понимаю, что вы говорите про ВНУТРЕННЮЮ логику в блоках, но если продолжать вашу мысль, то получится, что и шапку надо в коде сверху располагать.
Если честно, не вижу реальной пользы от предложенной вами схемы новостей.
Я сомневаюсь, что туториал на эту тему нужен. Потому как от сайта к сайта встречаюсь с тем, что вроде бы при внешней схожести структуры (шапка, колонки, новости и прочая), в каждом конкретном случае приходится решать разные задачи... и верстать в итоге по-разному. То элементы дизайна диктуют, то цели сайта, то упор на раскрутку, то условия для CMS...
710 сообщений
#17 лет назад
SmartDesign, гм, вёрстка не является простым "переводом" картинки в HTML. Помнится, и стандарт XHTML создавался именно для разделения логической структуры и представления.Насчёт учебников - лучше искать по специализированным ресурсам.
3563 сообщения
#17 лет назад
letayushaya, да, я говорю о логике, а не о порядке блоков или способе их задания (естественно хорошо когда контент идет первым).Что касается бана за ссылку в заголовке, или заголовке в ссылке (к стати как повашему правильно?), то это пустые опасения. Хотя правльнее тут использовать не H1 конечно.
если продолжать вашу мысль, то получится, что и шапку надо в коде сверху располагать
Вот ключевое расхождение. НЕТ. Я не говрою о порядке расположения длоков, я говорю о их лигической целостности. Это означает, что если на верхнем уровне у вас 3 блока (top, head, footer), то на этом же уровне иерархии не может находиться скажем текст или картинка.
OK:
<body>
<div id="block-top">
<div id="block-head">
<div id="block-footer">
</body>
Но нельзя:
<body>
<div id="block-top">
<div id="logo">
<div id="menu-top">
<div id="login-form">
<div id="block-footer">
</body>
То есть на одном уровне (слое), тип блоков должен совпадать. Блок "Новости", только иллюстрация, того как неоправдано, на мой взгляд, разорвана логически цельная сущность "новость".
SolNikolay, Верстка бывает разная =), для многих, к сожалению, даже "перевод картинки" задача непосильная.
XML действительно проедназанчен для отделения данных от представления (все данные в XML, всё оформление в стилях), xHTML - компромис. Я хочу(мне нравиться), что бы он был больше похож на XML чем на HMTL.
XML заставляет строго логически верно представит данные, и там всегда будет
<news>
<item>
<item>
<item>
</news>
и никогда
<news>иначе закидают тухлыми яйцами.
<item part 1>
<item part 2>
<item part 1>
<item part 2>
</news>
77 сообщений
#17 лет назад
SmartDesign, а то вы сами не знаете, как правильно: ссылка в заголовке или заголовок в ссылке. 
И я тоже знаю. 
Ну, почему нельзя то????? Есть какие-то, кроме эстетики, правила по этому поводу? Я не завожусь, я понять хочу, почему вот так плохо:
<body>
<div id="block-top">
<div id="logo">
<div id="menu-top">
<div id="login-form">
<div id="block-footer">
</body>
Вам не понравилось, что картинка идет отдельным блоком? Вот про эти "мелочи" я и говорю: меня не устраивало то, как картинка встраивается в параграф. То есть
<p><img src="#" align="#">бла бла бла</p>
не позволял учесть все возможные варианты расположения: когда картинки нет, когда она разного размера, когда текст маленький, когда текст большой и т.п. И кстати программисту то удобнее, когда для закачки фото есть отдельный блок, куда ее пихаешь.
289 сообщений
#17 лет назад
Цитата:сделать "как на картинке"
Почему закачики этого не понимают?
Мне приходится иногда собирать сайт по "кускам"...
А то, что общая картина сайта - это работа дизайнера, заказчики и слышать не хотят. :unsure:
Это я не про "логику" и "структуру"
Цитата:
хорошую индексацию
и не только индексацию. этим мы меняем соотношение код/контент.
Чем меньше это соотношение, тем лучше!
Цитата:
то это пустые опасения
совсем даже не пустые.
Цитата:
почему вот так плохо
ох... ну и насоветуют вам сейчас!
верстка у вас хорошая, не обращайте внимание.
3563 сообщения
#17 лет назад
letayushaya, Я ни в коем случае не пытаюсь вас убедить в том что ваша верстка плоха.1. Мне это не нужно.
2. Она хорошая.
Разговор затеян ради обмена мнениями (мне интересно узнать, почему вы делаете так, а не иначе). Мне это может быть полезно, т.к. я отшлифую свое представление о идеальной верстке, и узнаю что то новое.
По поводу ссылок-заголовков, однозначного ответа на вопрос не нашел. Склоняюсь к <a><h></a>. Еще раз повторю, я не сверстал ни одного сайта, это помогает смотреть с другой стороны.
По поводу картинки в новости, можно ее ставить отдельным блоком, и даже нужно, если она идет как отдельная характеристика новости.
читай XML такой:
<news>
=<item>
==<zagolovok>
==<image>
==<text>
=...
</news>
Но нельзя делать так:
<news>
=<zagolovok>
=<image>
=<text>
=<zagolovok>
=<image>
=<text>
=<zagolovok>
=<image>
=<text>
</news>
По поводу правил — единственное требование, что бы в браузере смотрелось, вы уже давно выполнили. Теперь можно разговаривать о таких мелочах.
Что касается запрета на такое
<body>
<div id="block-top">
<div id="logo">
<div id="menu-top">
<div id="login-form">
<div id="block-footer">
</body>
Его нет, но попробуйте назовите каждый див на русском языке. Если именовать такую структуру получиться что то вроде
-Фрукты
-Земляника
-Клубника
-Вишня
-Овощи
Я считаю что правильно так:
=Фрукты
=Ягоды
=Овощи
Вы тоже, но не до конца.
madkaban, не расстраивайтесь, иногда программистам приходиться собирать новые страницы из кусков, это еще хуже. Они совсем далеки от дизайна.
77 сообщений
#17 лет назад
madkaban, фенькс. ЗначиЦЦа, идем правильным путем! SmartDesign, да я и не говорю, что вы говорите, что у меня плохая верстка.
Обмен мнениями - это гуд.По поводу ссылок-заголовков:
<A> - элемент инлайновый, <H1> - элемент блочный.
Блочный может содержать инлайновый, инлайновый содержать блочный не может.
То есть верно:
<h1><a href=''>Ссылка</a></h1>
Вот вы пишете: "Но нельзя делать так:
<news>"
=<zagolovok>
=<image>
=<text>
=<zagolovok>
=<image>
=<text>
=<zagolovok>
=<image>
=<text>
</news>
П О Ч Е М У ??? Как правило выглядит и где про него прочитать можно?
Если вы ратуете за соблюдение правил XML, то зря: браузеры используют то на html-сайтах html-льный парсер. Чтобы браузер начал отображать документ именно по правилам XHTML, нужно и прописывать это в doctype, и тогда всеми любимый браузер не сможет показать документ, как надо.
В отношении "фруктов, овощей и ягод" я поняла, что вы хотели бы видеть в идеале. НО: если сайт имеет сложную структуру, в дизайне есть плавающие элементы, картинки-подложки, независимые наложения одной части на другую, то этот ваш огород приходится разбивать на отдельные грядочки.
Например, делать отдельные блоки абсолютным позиционированием - таки отдельно ото всех, непосредственно в body, потому что иначе никак. Они ни к какому иному блоку не подходят, висят сами по себе.
710 сообщений
#17 лет назад
Цитата ("letayushaya"):Вот вы пишете: "Но нельзя делать так:<news>"
=<zagolovok>
=<image>
=<text>
=<zagolovok>
=<image>
=<text>
=<zagolovok>
=<image>
=<text>
</news>
П О Ч Е М У ??? Как правило выглядит и где про него прочитать можно?
Оно заложено в основу XML. Конкретно про новости, живой пример правильного расположения - rss-лента.
77 сообщений
#17 лет назад
SolNikolay, так речь то про HTML...
710 сообщений
#17 лет назад
letayushaya, оооо, простите. Тогда считайте мои посты офтопом Я уж было подумал, что мы плавно перетекли к обсуждению XHTML. А оказалось нет
77 сообщений
#17 лет назад
SolNikolay, таки по-прежнему о HTML толкуем. Все о нем, все о нем, любимом... 3563 сообщения
#17 лет назад
letayushaya, По поводу ссылок-заголовков:
Цитата:
<A> - элемент инлайновый, <H1> - элемент блочный.
Блочный может содержать инлайновый, инлайновый содержать блочный не может.
Сразу спрошу, что такое инлайновый и блочный элементы.
Я рассуждал несколько по-другому. Заголовком является текст, а заголовок является ссылкой, по этому <a><h></a> выглядит логично.
Хотя и под другим порядком есть логическое обоснование. Так что сдесь готов положиться на технологические особенности. (вот кое-чему и научился).
Цитата:
П О Ч Е М У ??? Как правило выглядит и где про него прочитать можно?
Про это нельзя прочитать в учебниках по верстке. Потому что это не уровень разметки.
Выглядеть это должно (по моему личному мнению, тсходя из моих принципов) так:
<news>
=<item>
==<zagolovok>
==<image>
==<text>
==<zagolovok>
=</item>
=<item>
==<zagolovok>
==<image>
==<text>
==<zagolovok>
=</item>
</news>
Т.е. на одном уровне расположены однородные элементы.
Вместо:
Ягоды
=кожура
=мякоть
=косточка
=кожура
=мякоть
=косточка
=кожура
=мякоть
=косточка (а во всех она есть?)
/Ягоды
Нужно:
Ягоды
=Ягода
==кожура
==мякоть
==косточка
=Ягода
==кожура
==мякоть
==косточка
/Ягоды
Такой подход дает ряд положительных "сверх-эфектов":
Мы завязываем оформление относящиеся к элементам на сами элементы, а не части. (для страницы, это могут быть разделители, которые ставятся между блоками, и не являются частью текста новости, например) если не понятно - попробую объяснить по-другому.
Дисциплинирует дизайнера (делает структуру страницы более логичной).
Как видно, я не ратую за использования определенного языка, я призываю пользоваться лучшими принципами заложенными в XML (структурированность и однородность).
Я например считаю, что в дизайне мы должны придерживаться тех же принципов (единообразность формы содержания, целостность элементов и т.д.). Например можно посмотреть на эти же принципы применительно к дизайну страницы ставок на проект ссылка
Цитата:
В отношении "фруктов, овощей и ягод" я поняла, что вы хотели бы видеть в идеале. НО: если сайт имеет сложную структуру, в дизайне есть плавающие элементы, картинки-подложки, независимые наложения одной части на другую, то этот ваш огород приходится разбивать на отдельные грядочки.Конечно, это не догма. И есть исключения, не все поддается логике и порой приходиться жертвовать стройность ради гибкости. К счастью - это редкость.
3563 сообщения
#17 лет назад
Цитата ("letayushaya"):SolNikolay, так речь то про HTML...
речь про верстку =) не важно что это, HMTL, xHTML таблицы или дивы. Принцыпы общие.
710 сообщений
#17 лет назад
SmartDesign, лучше всё же привязывать обсуждение к определённым стандартам.
77 сообщений
#17 лет назад
Цитата ("SmartDesign"):речь про верстку =) не важно что это, HMTL, xHTML таблицы или дивы. Принцыпы общие.
О, нет! Почитайте литературу по этому поводу.
Если вы хотите заняться самообразованием в сфере верстки, то рекомендую найти хорошие ресурсы по этому вопросу. Там вы сможете прочитать в частности про то, что такое инлайновые, а что такое блочные элементы.
Теперь ясно: вы считаете, исходя из лично вашего мнения, определенную структуру разметки логичной и красивой. Это ваше право... но никак НЕ ПРАВИЛО.
Когда все стараются придерживаться тенденции облегчать код и не лепить того, без чего можно обойтись без ущерба для валидности, внешнего вида и работы программера, то вы предлагаете по сути обратное.
Дисциплинирует дизайнера... о, пардон, о какоих дизайнерах речь?... :unsure:
Дисциплинирует верстальщика не только, и не столько предложенный вами подход, а совокупность факторов, как то: скрупулезность, внимательность, собранность, грамотность, планомерность и поэтапность работы и многое другое.
Лучшие принципы XML - пусть и остаются обязательными для XML. А наш родной HTML позволяет нам разными путями достичь нужного результата с большой гибкостью.
Мне кажется, вы уцепились за эту фишку с однородностью, но в силу того, что сами - не верстальщик, целой картины не видите.
Своим примером вы открываете велосипед.
Поговорите с верстальщиками: вложенность однородных блоков в общий объединяющий часто является вынужденной мерой - иначе они не встают. Если без этого МОЖНО обойтись, то без этого таки МОЖНО обходиться.Цитата ("SmartDesign"):
Конечно, это не догма. И есть исключения, не все поддается логике и порой приходиться жертвовать стройность ради гибкости. К счастью - это редкость.
Никакая стройность не потеряна, вам только так кажется. Это во-первых. А во-вторых, такие вот "исключения" встречаются у меня лично практически при верстке каждого дизайна, где либо я сама, либо кто-то другой напридумывал "эдакое".
3563 сообщения
#17 лет назад
Цитата ("letayushaya"):Цитата ("SmartDesign"):речь про верстку =) не важно что это, HMTL, xHTML таблицы или дивы. Принцыпы общие.
О, нет! Почитайте литературу по этому поводу.
С этго места поподробнее =).
Когда в табличной верстке (ради упрощения) кладут картинку товара и его цены в разные строки таблицы, очень зочется стукнуть по рукам. Хотя, на отображение это не влияет.
Цитата:
Теперь ясно: вы считаете, исходя из лично вашего мнения, определенную структуру разметки логичной и красивой. Это ваше право... но никак НЕ ПРАВИЛО.
Конечно не правило, я об этом говорю в каждом посте. Правило одно — что бы было как на макете ;-)
Цитата:
Когда все стараются придерживаться тенденции облегчать код и не лепить того, без чего можно обойтись без ущерба для валидности, внешнего вида и работы программера, то вы предлагаете по сути обратное.
Интересный момент, тут вы выделили 4 вещи (если я неправльно понял, поправьте):
1. минимализм (облегчать код и не лепить того, без чего можно обойтись)
2. валидность
3. внешний вид (как на макете)
4. структурированность/читабельность (работа программера)
Для меня приоритеты таковы (действительно близко к обратному порядку):
1. внешний вид (как на макета)
2. структура (понятен и логичен)
3. валидность (валиден)
4. минимализм (небольшой)
Опыт показывает, что то что хорошо снаружи (как на макете, применительно к верстке) и структурировано внутри (понятно и просто), то само собой получается валидным и небольшим. Не только в верстке.
Цитата:
Дисциплинирует дизайнера... о, пардон, о каких дизайнерах речь?... :unsure:
О любых. У классных и опытных это получается само-собой. Молодые должны себя спрашивать, эта плашка закрывает блок, или начинает следующий?
Цитата:
Дисциплинирует верстальщика не только, и не столько предложенный вами подход, а совокупность факторов, как то: скрупулезность, внимательность, собранность, грамотность, планомерность и поэтапность работы и многое другое.
Безусловно, все перечисленные личные качества важны при работе, не только верстальщика. Я говорю о простом методе построения структуры большинства страниц.
Цитата:
Мне кажется, вы уцепились за эту фишку с однородностью, но в силу того, что сами - не верстальщик, целой картины не видите.Как раз то что я не верстальщик, позволяет свободнее смотреть на вещи, не заостряя внимания на словах, концентрируясь на универсальных принципах. То что вы называете вынужденной мерой, я называю универсальным подходом.
Своим примером вы открываете велосипед.
Скажите, чем плохи такие обертки? И где они неподходят.
Цитата:
Никакая стройность не потеряна, вам только так кажется. Это во-первых. А во-вторых, такие вот "исключения" встречаются у меня лично практически при верстке каждого дизайна, где либо я сама, либо кто-то другой напридумывал "эдакое".
1. Стройность в моем понимании четкая иерархия блоков, безусловно, может быть потеряна.
2. Давайте откроем ваш (или мой) портфель, и посчитаем, сколько работ потребуют нарушения иерархии.
Резюме:
Наконец мы выявили расхождение. Если я не ошибся — мы оба за выбрасывание всего ненужного, только понятие ненужности у нас разное.
Ваше "не нужно" то, без чего сайт нормально смориться и программист сможет разобраться.
Мое "не нужно" то, что нарушает иерархическую структуру.
Если я где, то напутал — смело исправляйте.
3563 сообщения
#17 лет назад
Цитата ("SolNikolay"):SmartDesign, лучше всё же привязывать обсуждение к определённым стандартам.
Если обсуждаем "как лучше поставить блок по центру экрана используя блоки" — да.
Если обсуждаем на каких принципах строить документ — нет.
Для примера возьмем табличную и блочную верстку. Принципы построения документов одинаковые. Приемы — разные.
710 сообщений
#17 лет назад
SmartDesign, просто возникли разночтения (по крайней мере у меня).Стандарт HTML изначально не предполагал никакой структурированности и служил только как средство "отображения" картинки дизайнера на мониторе. При переходе к XHTML стали накладываться требования структурированности кода (видимо пришло от программеров
).Цитата ("letayushaya"):
Лучшие принципы XML - пусть и остаются обязательными для XML. А наш родной HTML позволяет нам разными путями достичь нужного результата с большой гибкостью.
Вы, видимо, не занимались программирование
77 сообщений
#17 лет назад
SmartDesign, я не планировала и не собираюсь писать здесь ликбез по основам верстки.
Знаете, если хотите давать советы по верстке, вам стоит самому для начала сверстать десяточек сайтов.
А иначе ваши пространные посты выглядят не более чем философствованием, увы.
Больше не могу тратить время на пустое обсуждение - работа ждет.
SolNikolay, программированием я действительно не занималась. Но моя фраза, которую вы цитируете, относилась исключительно к верстке.