Консультации и оценка качества html-вёрстки (бесплатно)

ari100krat · 16.10.2011

Ув., Del, помогите ламеру в решении вопроса - есть магазин на Джумле\VirtueMart - в валюте не могу гривну найти, чтоб цена товара была в грн. Помогите пожалуйста!

Del · 16.10.2011

ari100krat
это к программерам

у нас тут - обсуждение как сайты отображаются и что с этим делать.

Nebohod · 18.10.2011

Del сказав(ла):
Также можем разбирать уже готовую вёрстку: что хорошо, что плохо, как сделать лучше. Если вам кто-то сверстал сайт - тоже можно смело спрашивать - "ну как?"

Вот и спрашиваю -

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

- ну как?

kaksmog · 02.11.2011

Что лучше использовать php или связку html5 + css + javascript? Да и сразу вопрос - для чего применяются javaaplet, теорию знаю, практиковался, но в жизни не встречал. И встречал ли где апплеты на других языках?

zoofun · 17.11.2011

Хай Del еще раз!

История.

Разместил я резюме на Job.ukr.net. На должность верстальщика , сразу же позвонили с 1design или turboseo (называю их имена потому что вакансия уже закрыта и я на них обиделся, так как моя работа по их словам заняла второе место ," они взяли одного кандидата,к который занял первое", И НЕ покритиковали меня на мою просьбу ,все таки имею право на такую просьбу). Поэтому обращаюсь к Вам за помощью в разборе .

Проблема .

Они прислали весьма веселое задание, где запнулся на вертикальном меню.Должно быть резиновое , круглые углы, эелементы растянуты на всю длину ,и плюс спрайты все элементы вместе с круглыми углами, Минимальная ширина 1024 px документа , Максимальная ширина 1440 px.
Естественно кроссбраузерно.

Мое решение

PHP:

<!--html-->

PHP:

    <head>
        <
        
        <link media="all" href="styles.css" type="text/css" rel="stylesheet">
    
        <!--[if lt IE 9]>
<script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
        <!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="forie.css" />
<![endif]-->

    </head>
<div class="nav-container">
             <nav>
                 <ol id="nav">
                    <li><a href="#">Каталог</a></li>
                     <li><a href="#">Новости</a></li>
                     <li><a href="#">Акции</a></li>
                     <li><a href="#">Подбор вина</a></li>
                     <li><a href="#">Кависты METRO</a></li>
                     <li><a href="#">Винопедия</a></li>
                     <li><a href="#">Спроси сомелье</a></li>
                     <li><a href="#">Контакты</a></li>
                 </ol>
             </nav>
</div>

PHP:

.nav-container {display: block; margin: 0 20px ;}

.nav-container  li {
	width: auto; 
	display: table-cell;
	text-align: center;	
	height: 37px; 
	
	vertical-align: bottom;
       background: url(images/NavBack.png) repeat-x left top ;
        border-right: 1px solid #bebebe;
        
}
.nav-container  li:hover {
	width: auto; 
	display: table-cell;
	text-align: center;	
	height: 37px; 
	
	vertical-align: bottom;
        background: url(images/NavBack.png) repeat-x left bottom ;
        
}
.nav-container  li:hover {
	width: auto; 
	display: table-cell;
	text-align: center;	
	height: 37px; 
	
	vertical-align: bottom;
       
        
}
.nav-container li:last-child {
	margin: 0;
        border-right: none;
        
        
}
        
.nav-container  a {
	width: 1000px; 
	height: 37px;
	display: table-cell; 
	vertical-align: middle; 
     ;
}

.nav-container li:first-child  a {
	width: 1000px; 
	height: 37px;
	display: table-cell; 
	vertical-align: middle; 
        background: url(images/NavLeft.gif) no-repeat left top ;
     ;
}
.nav-container li:first-child  a:hover {
	width: 1000px; 
	height: 37px;
	display: table-cell; 
	vertical-align: middle; 
        background: url(images/NavLeft.gif) no-repeat left bottom ;
     ;
}
.nav-container  li:last-child a {
	width: 1000px; 
	height: 37px;
	display: table-cell; 
	vertical-align: middle; 
        background: url(images/NavRight.gif) no-repeat right top ;
     ;
}
.nav-container  li:last-child a:hover {
	width: 1000px; 
	height: 37px;
	display: table-cell; 
	vertical-align: middle; 
        background: url(images/NavRight.gif) no-repeat right bottom ;
     ;
}

PHP:

<!--[if lte IE 7]>
<style>
.nav-container nav {
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.nav-container li {
	display: inline;
	zoom:1;
	overflow: hidden;
}

.nav-container ol {
	display: block;
	position: relative;
	height: 37px;        
        
      
	overflow: hidden;
	
	z-index: expression(runtimeStyle.zIndex = 1, function(node) {	
		var	list = node.childNodes, i = list.length, iWidth = node.offsetWidth/i;
	
			while(i--) {
				list[i].style.width = iWidth+'px';
			}
			node.style.width=node.offsetWidth+10+"px"; /* 10 - это значение побдираем по обстоятельствам */
		}(this));)
}
.nav-container a {
	width: auto;
	height: auto;
	display: block;
	z-index: expression(runtimeStyle.zIndex = 1, this == ((50/2)-parseInt(offsetHeight)/2) <0 ? (style.paddingTop="0",style.height="50px") : (style.paddingTop=(50/2)-(parseInt(offsetHeight)/2) +'px', style.height="50px"));
}
.nav-container a:hover {
background: url(images/NavBack.png) repeat-x  0px -37px ;
 }
 .nav-container  li {
	width: auto; 
	display: table-cell;
	text-align: center;	
	height: 37px; 
	
	vertical-align: bottom;
       background: url(images/NavBack.png) repeat-x left top ;
        border-right: 1px solid #bebebe;
        
}
.nav-container  li:hover {
	width: auto; 
	display: table-cell;
	text-align: center;	
	height: 37px; 
	
	vertical-align: bottom;
        background: url(images/NavBack.png) repeat-x left bottom ;
        
}

</style>

<script>
window.onresize = function()
{

	var nav = document.getElementById("nav");
	nav.style.width = "100%";
	var	list = nav.childNodes, i = list.length, iWidth = nav.offsetWidth/i;
	
			while(i--) {
				list[i].style.width = iWidth+'px';
			}
			nav.style.width=nav.offsetWidth+10+"px";
}
</script>
<![endif]-->
<!--[if IE 6]>
<style>
li {
z-index: expression(
runtimeStyle.zIndex = 1,
this == parentNode.firstChild ? (className += " first-child") : 0
)
}
.first-child {
	padding-left: 100px;
}
</style>
<![endif]-->

Последние хаки нашел

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

. Подозреваю что что можно сделать это проще с таблицами , но пока не пробовал . Хочеться услышать мнение экспертов.

Вложил полное задание, картинку общюю зазадание. и менюшку.jpg .
Макеты сорри не кинул , ХФ не разрешает больше 2метров заливать.

Del · 18.11.2011

Nebohod сказав(ла):
Вот и спрашиваю -
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
- ну как?

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

Поехали.

Соответствие макету, сетка.
Т.к. эталонных дизайнов нет, будем смотреть на сетку сайта.
Дизайн - стандартный на джумле, смотреть нечего. Вот это бы я выровнял:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Кроссбраузерность, кодировка и DOCTYPE
С кроссбраузерностью всё ок, было бы странно если бы было не так, сайт то простой.
Кодировка, доктайп - выданы джумлой, что тут смотреть, всё стандартно.

Валидность, доступность, микроформаты
Сайт не валидируется, но если вбить руками получаем лишь стандартные для xhtml ошибки об отсутствии замены & на & и незакрытых одиночных тегов. Ничего серьёзного.

С доступностью норм, сайт-то простой.

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

, но то мелочи.
Ломаться нечему особо.

Микроформатов нет, ну тут особо и не требуются (разве что контакты разметить).

Корректная работа при вбивании реального текста, надёжность вёрстки
А вот тут по-хуже. Собственно сайт-то информационный, тут упор на тексты делать надо. А стилей для текста нет. Элементарная вещь - вбиваешь список - он не оформляется.

...
В общем, можно было-бы

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

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

При 1024 - плохо, владельцы нетбуков негодуют.
На iPad - тоже, спонсоры не увидят картинку дирижабля по-людски.

Советы

Сайт грузится долго. webo site speedup в помощь.
Типографика!!
Где она? Если бы я специально не почитал пару предложений из абзацев - так и не узнал бы о чём сайт. Глазу зацепиться не за что. Не в смысле картинок и дизайна, речь о типографике. У нас вообще с ней проблема, даже в глянце. Но хорошие примеры есть. Журнал Країна например - отлична работа с текстом.
Огромное кол-во пунктов меню. Сократить до 7 ссылок на всю главную.
Дизайн. Уберите картинку из шапки. Она ни о чём. Уберите илюстративные фоны плашечек. Работайте с текстом. Можно делать офигенные сайты просто текстом. Вам нужно донести мысль, текст. Дизайнера нет, да и тема техническая. Пусть сайт выглядит научно и строго. Ну вот например так:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Контакты? Где они на видном месте? Как спонсору с вами связаться?

О сайте? Зачем? Кому это интересно? Интересно - Об авторе. Кто такой? Почему ему стоит дать денег? Помочь проекту - спрятать. Тут не милостыню просят у метро. Комментарии - тоже. Вообще всё лишнее уберите. Уберите всё, кроме того что уже ну никак нельзя убрать.

Счётчики спрятать, там пока нечем гордится.
Социалочка. Кому нужны ваши закладки на linkedin и digg? Убрать всё - поставить вконтактик и ко.

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

kaksmog сказав(ла):
Что лучше использовать php или связку html5 + css + javascript? Да и сразу вопрос - для чего применяются javaaplet, теорию знаю, практиковался, но в жизни не встречал. И встречал ли где апплеты на других языках?

Что лучше: газовая плита или мясо?
Не понимаю сути вопроса.

добавлено

zoofun сказав(ла):
Разместил я резюме на Job.ukr.net. На должность верстальщика , сразу же позвонили с 1design или turboseo (называю их имена потому что вакансия уже закрыта и я на них обиделся, так как моя работа по их словам заняла второе место ," они взяли одного кандидата,к который занял первое", И НЕ покритиковали меня на мою просьбу ,все таки имею право на такую просьбу). Поэтому обращаюсь к Вам за помощью в разборе .

Вах, зачем обижатся? Они могли вообще ничего не ответить. На большинство резюме вообще не приходит никаких ответов, тем более разборов.

Отвечая на письма касательно своей вакансии, я отправил подробные разборы только первым 30 претендентам. Дальше - только отказы с комментом что разбор задания будет на ХФ, там сможете оценить свою работу. И ещё под сотню неотвеченных-непроверенных писем ждёт. За работой последние недели совсем некогда, некрасиво, но я не ожидал столько откликов, расчитывал на 10-15, а не 100-150.

Ну давай смотреть.

zoofun сказав(ла):
Вложил полное задание, картинку общюю зазадание. и менюшку.jpg .
Макеты сорри не кинул , ХФ не разрешает больше 2метров заливать.

Соответствие макету: есть большие расхождения:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

,

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Кроссбраузерность
В IE всё плохо:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Разгадка проста - комменты перед doctype сбрасывают его в quirks mode.

Валидность
Ошибки мелкие, но для тестового - непростительно.
Кстати, хочешь историю про валидность? Когда я устраивался на работу в 2005, сделал тестовое, отдаю шефу, от пишет в аську - мол спасибо, щас глянем валидацию (тогда особо критериев проверки вёрстки не было)... у меня холодеет в груди, понимаю что за всё время я ни разу не проверил валидность кода! Допустить опечатку где-то, что-то забыть, тем более в жэстачайшем xhtml ... сейчас красный квадратик и всё. Быстро открываю, мать твою, зелёный, фух, заебись.

... продолжим проверку завтра

zoofun · 18.11.2011

О спасибо , да я как честно говоря халтурно отнесся к выполнению . Соответстве с макетом, Pixel perfect вообще не использовал , так тупо с макета.
Ie-tester у меня все почему то поизящней изображает .
У меня проблема IE заглючил и у меня снести его не получалось . пользовался ie-tester'om/
Про quirks mode. я про такое и не знал...... блин....изза случайности теперь знаю что это есть. Вот тут и скрылась загадкас топ меню.
На счет валидности - это тоже про меня . вообще не делал никогда . с твоим задание впервые попробовал .

Nebohod · 18.11.2011

Del сказав(ла):
Оценивать буду согласно стандартного чек-листа, которым проверяю проекты в компании, где работаю + просто оценка удобства использования и качества на мой взгляд.

Поехали.

Соответствие макету, сетка.
Т.к. эталонных дизайнов нет, будем смотреть на сетку сайта.
Дизайн - стандартный на джумле, смотреть нечего. Вот это бы я выровнял:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Кроссбраузерность, кодировка и DOCTYPE
С кроссбраузерностью всё ок, было бы странно если бы было не так, сайт то простой.
Кодировка, доктайп - выданы джумлой, что тут смотреть, всё стандартно.

Валидность, доступность, микроформаты
Сайт не валидируется, но если вбить руками получаем лишь стандартные для xhtml ошибки об отсутствии замены & на & и незакрытых одиночных тегов. Ничего серьёзного.

С доступностью норм, сайт-то простой.
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
, но то мелочи.
Ломаться нечему особо.

Микроформатов нет, ну тут особо и не требуются (разве что контакты разметить).

Корректная работа при вбивании реального текста, надёжность вёрстки
А вот тут по-хуже. Собственно сайт-то информационный, тут упор на тексты делать надо. А стилей для текста нет. Элементарная вещь - вбиваешь список - он не оформляется.

...
В общем, можно было-бы
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
, но это сайт на джумле набитый текстом, что проверять)

При 1024 - плохо, владельцы нетбуков негодуют.
На iPad - тоже, спонсоры не увидят картинку дирижабля по-людски.

Советы

Сайт грузится долго. webo site speedup в помощь.

Типографика!!
Где она? Если бы я специально не почитал пару предложений из абзацев - так и не узнал бы о чём сайт. Глазу зацепиться не за что. Не в смысле картинок и дизайна, речь о типографике. У нас вообще с ней проблема, даже в глянце. Но хорошие примеры есть. Журнал Країна например - отлична работа с текстом.

Огромное кол-во пунктов меню. Сократить до 7 ссылок на всю главную.

Дизайн. Уберите картинку из шапки. Она ни о чём. Уберите илюстративные фоны плашечек. Работайте с текстом. Можно делать офигенные сайты просто текстом. Вам нужно донести мысль, текст. Дизайнера нет, да и тема техническая. Пусть сайт выглядит научно и строго. Ну вот например так:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Контакты? Где они на видном месте? Как спонсору с вами связаться?

О сайте? Зачем? Кому это интересно? Интересно - Об авторе. Кто такой? Почему ему стоит дать денег? Помочь проекту - спрятать. Тут не милостыню просят у метро. Комментарии - тоже. Вообще всё лишнее уберите. Уберите всё, кроме того что уже ну никак нельзя убрать.

Счётчики спрятать, там пока нечем гордится.

Социалочка. Кому нужны ваши закладки на linkedin и digg? Убрать всё - поставить вконтактик и ко.

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

Спасибо за советы. Практически со всем согласен, будем переделывать.

zoofun · 18.11.2011

-Nebohod фиксированные размеры выползают, при стандартных размерах окна.
так лучше
<img width="100%" border="0" style="display: block; margin-left: auto; margin-right: auto;" alt="nebohod" src="/images/nebohod.jpg">

Del · 18.11.2011

или ещё лучше так:

HTML:

.postcontent img {max-width: 100%;}

zoofun · 18.11.2011

а да...тоже верно

Nebohod · 18.11.2011

zoofun сказав(ла):
-Nebohod фиксированные размеры выползают, при стандартных размерах окна.
так лучше
<img width="100%" border="0" style="display: block; margin-left: auto; margin-right: auto;" alt="nebohod" src="/images/nebohod.jpg">

Да, спасибо, я знаю, правда сам только недавно это увидел что на маленьком разрешении картинка выползает, всё собирался исправить, откладывал, но вы меня прям заставили

Сделал width в процентах, height убрал, картинка стала "резиновая" но резкость немного ухудшилась.

Del сказав(ла):
или ещё лучше так:

HTML:

.postcontent img {max-width: 100%;}

Да, вот так получше будет, спасибо.

zoofun · 22.11.2011

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

ну как ?)
Сайт недавно обновлял , скажем так ресталинг и внутряк всякий .

Del · 11.12.2011

zoofun сказав(ла):
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
ну как ?)
Сайт недавно обновлял , скажем так ресталинг и внутряк всякий .

Обсудим его на собеседовании, думаю это будет лучший вариант

zoofun · 11.12.2011

ок.

ijik · 24.12.2011

здравствуйте. проверьте, пожалуйста, и мою верстку.

_KurT_ · 27.02.2012

Здравствуйте.
Del, вы еще смотрите чужую верстку ?

Del · 28.02.2012

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

_KurT_ · 29.02.2012

Вот, делал другу:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

проверял в:
IE7+
FF 3.6+
Opera 10.5+
Safari 5.1
Chrome

Что можете сказать ?

Del · 02.03.2012

Итак, собственно с zoofun и ijik мы общались на собеседовании, ну а качать что-то с файлопомоек от преведов не буду.

Итак, _KurT_, давай смотреть.
Вижу макет. Отлично! Наконец я вижу макет в этой теме

Pixel Perfect проверял? Вёрстка макету не соответствует:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Валидацию проходим, doctype htm5, кроссбраузерно, это гуд. Кстати зачем смотреть в FF3.6? Смотрим только мажорные версии + три последних IE.

Котик у вас жирный:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

надо хотя бы в 2 раза меньше.

Раз уже поставили html5 doctype то и остальные html5-теги юзайте: header, footer, nav, и т.д.

Сайт фиксрованный по ширине - зачем резать его как колбасу на полоски и внутри каждой вложенными блоками центрировать контент, оберните всё в один wrapper и всё.

Не используйте id.

Очень много зря вложенных блоков.

Не надо использовать <p> для не-абзацев.

За класс .contentTrTd хочется немножко расстрелять)

Буллеты в списках традиционно делают через background а не list-style, да идеологически непривычно, но надежней и настраиваемей.

Почему ластик (* {margin: 0; padding: 0}) вместо reset? Ластик - очень плохо. Где заново выставленные стили?

Код:

border-radius: 45px;
-o-border-radius: 45px;
-moz-border-radius: 45px;

неверный порядок, официальное css3-свойство должно идти последним, смотрите доклад Макеева про префиксы. Кстати border-radius префиксы уже не нужны.

Microdata хотелось бы увидеть.

Давайте отполируйте до блеска, сделайте "идеально" на ваш взгляд, и повторим

Консультации и оценка качества html-вёрстки (бесплатно)

ari100krat

Del

Nebohod

kaksmog

Привіт!

zoofun

Вкладення

Del

zoofun

Nebohod

zoofun

Del

zoofun

Nebohod

zoofun

Del

zoofun

ijik

_KurT_

Del

_KurT_

Del