Searcher

Спор вроде уже закончился, сейчас уже просто обсуждаем теоритические проблемы... s0rr0w, смотри, может так? Типографика в вебе: отступы, интерлиньяж, размеры шрифта, контрастность, акценты - это восновном должно способствовать просто удобному восприятию текстовой информации, тут есть, конечно доля эмоциональности, но очень незначительная. Хотя, конечно, есть исключения, когда сам дизайн основан на расположении, построении в перспективе, различных размерах букв, расположении слов для образования контуров объектов и т.п. Такие решения обычно несут минимум информации, и они неприменимы для сайтов, где есть больше чем 1 абзац текста. Так что я считаю, что типографика для веба - это всего лишь удобство и комфорт для посетителя, не более. Потом, гештальт широкое понятие, но в плане расстановки блоков информации и, вообще, структуры страницы он никак не формирует психо-эмоционального восприятия, это опять таки просто ускорение и улучшение восприятия информации. Правильно расставленные блоки не вызовут какого-то особого эмоционального отклика связанного с содержанием. Максимум, что человек подумает: "как удобно все читать". А вот формирование эмоционального отклика дают изобразительные образы и общая цветовая гамма. Ну например вот сайт: http://www.milkywaygalaxy.ru Без фона это стандартный сайт, который вызывает какие-то эмоции, только когда начинаешь усваивать информацию на нем, но если есть фоновое изображение - ощущения от сайта гораздо сильнее и возникают с первого взгляда и посетитель становится более заинтересован в получении информации оттуда. Вот по этим причинам я хочу разделить в теории составляющие: дизайн и типографика с юзабилити. А дальше идет гармонизация этих составляющих.

psywalker, вижу у тебя к JS сложилось какое-то отношение с предрассудками Ты уже изначально к нему относишься как к чему-то выше твоего понимания. Видимо это просто из-за того, что ты никогда не сталкивался с языками программирования. Все эти языки построены на обыкновенной логике и математике. А математика - она и в Африке - математика Вся сложность только в словаре и синтаксисе. Если ты видишь операции сложения, умножения и т.п., то не теряйся - это обычная математика. Чтобы получить 80% от какого-то числа что мы делаем? Умножаем это число на 0.8 Вот и вся задача. А прибавление к этому числу строки "px" что делает? Мы это недавно обсуждали...

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

это хостинг добавляет всякую хрень... хотя я в firebug удалил эти баннеры и все равно прокрутка осталась... а насчет юзабилити... я не буду категоричен, как предыдущие ораторы. в принципе уже лучше чем было, но еще очень много проблем. Первое, что бросается в глаза: - тяжелый верх, легкий низ - это против всех законов восприятия - надпись "главная" хотябы заменить на "Каталог" и внести этот пункт в меню, а то путаница какая-то возникает - пунктирное подчеркивание принято для псевдоссылок, которые не перегружают страницу, если тут будет так реализовано, то можно оставить, но если нет - то надо думать еще над их оформлением. - про картинки в меню не знаю что сказать, но сюда они никак не вписываются - левый столбец - это 1-ый уровень, а "все сайты" и т.п. - это 2-ой уровень. надо чтобы это было сразу понятно, а пока меню не особо назовешь меню. я бы и работу Лебедева на Яндекс.каталоге не назвал хорошей со стороны юзабилити, но она все же удобнее. - выделение в каталоге тоже какое-то непонятное, если нет грида или еще какого-то разделения, то и выделение пунктов должно происходить при наведении на слово, а не на строку. - справа ваще бардак... содержимое почему-то выползает влево из под заголовков... надо соблюдать вертикали. - облако тэгов из-за размеров шрифта слишком много внимания на себя оттягивает, возможно его стоит либо уменьшить, либо цветовое решение другое применить - в подвале почему вдруг ссылки красные? тоже перебор с обращением внимания - а какую семантику вы имеете ввиду я не понял... семантику содержимого или семантику кода?

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

ну кроме hasLayout в ИЕ еще: 3-х пиксельный баг непонимание всех min-... и max-... height ведет себя как min-height непонимание одновременного указания top и bottom и/или left и right непонимание :hover для элементов отличных от "a" и т.д. и т.п. 3 инструмента для решения проблем именно в ИЕ: zoom:1; expression; условные комментарии Единого сайта, где собраны все эти вещи не встречал... Хорошая мысль создать такой раздел на форуме!

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

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

да, psywalker, ты монстр!

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

так топикстартер хотел резину и в высоту тоже... я указал overflow:hidden чтобы ИЕ не растягивал в высоту при переполнении блока. можно указать и auto. я просто представлял себе область сайта с отступами по всем краям и содержимым в центре, и содержимое будет прокручиваться в центре, а макет весь не будет растягиваться... если надо как Мишка сделал, то я тогда не понял зачем высоту на все 100 делать...

Так вот именно для этого на мой взгляд в теории необходимо разделять эмоциональную составляющую и логическое оформление информации для понимания необходимости баланса и соответствия между ними. Это помоему очень полезно будет для процесса обучения. Так ведь проще понять каждую составляющую и уже потом легче найти гармонию между ними.

Justnewone, вот тут самое оно использовать адаптивную разметку

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

да нет, psywalker установил ширину и высоту родителя в 500px, так что у него все нормально работает, но если устанавливать относительные размеры, как скорее всего делает Игорь, то эти размеры должны быть прописаны до самого body и html. Вобщем так: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0;} /* Нужно что-бы блок <div class="content"></div>: 1. Высоты 100% минус 50px со всех сторон а блок wrap я разместил по центру и добавил отступы по 10%, но если на всё окно, то можно и без wrap обойтись. Главное, чтобы все высоты родителей были прописаны. 2. absolute и растягивался в зависимости от своего родителя div.wrap 3. Вобщем точно так же, как и в Файрфоксе, так же должно быть и в ИЕ6 */ html, body { width: 100%; height: 100%; } div.wrap { position: relative; overflow: hidden; width: 80%; height: 80%; top: 10%; left: 10%; border: 1px solid #000; } div.content { position: absolute; overflow: hidden; top: 50px; bottom: 50px; left: 50px; right: 50px; background: red; /*_height: expression(this.parentNode.offsetHeight-50-50+'px');*/ /*_width: expression(this.parentNode.offsetWidth-50-50+'px');*/ _height: expression(this.parentNode.offsetHeight-100+'px'); _width: expression(this.parentNode.offsetWidth-100+'px'); } </style> </head> <body> <div class="wrap"> <div class="content"></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html>

expression - это просто Java Script не, psywalker, ты не накосячил, просто надо указывать высоту у всех родителей, а если относительная высота то вплоть до body

так ты и не начинающий!

Пожалуйста! Ну так вот какой-то параметр в урл тоже может быть флажком

знания без практики - бесполезный груз еще стоит изучить отличия html от xhtml, а потом начните разрабатывать сайты и тогда поймете, что вам нужно, JS или php или xml или что-то еще. Или вообще захотите заниматься не сайтами а серверами... что такое работа в области веб? это очень широкое понятие, в области веб работают специалисты многих разных профилей.

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

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

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

Естественно условия! А уж что там будет флажком - не принципиально. Есть и более мудреные способы, но в данной ситуации помоему не стоит мучиться.

Веб-дизайн еще включает непосредственно сам дизайн, изображения, сочетания цветов и т.п. Т.е. создание психо-эмоциональной атмосферы. Я же в начале разделил принципы создания сайта на 3 состовляющие. Вот для первой составляющей нет названия. Хотя её тоже можно разделить на несколько...

должно работать... попробуйте от body возможно еще доктайп влияет... попробуйте поменять на нестрогий или на html задайте еще для body высоту в 100%