Тестирование верстальщика

[Ялекс]

Здравствуйте, столкнулся с проблемой оценки знаний у одного верстальщика.

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

Но сверстаный макет говорит лишь о красоте кода и о паре моментов, иногда самого главного и не видно.

Поэтому предлагаю разработать ряд небольших универсальных задач по верстке: типичных и экзотических.

Задачи можно кидать по блочной, и по табличной верстке.

Edited June 30, 2009 by Ялекс

[psywalker]

Ялекс

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

А насчёт экзотики держи например картинку видишь: http://psywalker.ru/Forum/shadow-2.jpg

А вот задание:

Нужно сделать абсолютно такой-же блок с содержанием внутри, который будет:

1) Центрирован

2) Который может растягиваться по ширине и высоте и растягивается по высоте в зависимости от содержания

3) Должен быть полный кросс, не считаю ИЕ6

4) Строго можно использовать не больше..ммм, ну скажем ладно, МАксимум 5 элементов, на всю конструкцию

5) Картинки использовать нельзя! - обрати внимание на этот пункт!

6) Тень должна быть реальная и отбрасываться, вобщем всё, как в реале)))

[s0rr0w]

Знания верстальщика можно определить по пяти вопросам.

Например по таким

1. Что общего между тегом LI и BLOCKQUOTE

2. Расставьте стили в порядке их применения к ноде

* b.cool { color: green; background-color: #ccc; }

* style="color: red"

* .textBlock .cool { background-color: #fc3 }

И так далее... надеюсь, ход мыслей понятен?

[Great Rash]

Вы знаете, устраивался я как то на работу и на одном из собеседований мне принесли тест по HTML и CSS. По моим ощущениям я этот тест завалил напрочь.

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

Самое лучшее это именно дать кандидату макеты для верстки (как и написано в первом посте).

2Ялекс:

иногда самого главного и не видно.

это чего же вам не видно?

[s0rr0w]

Вы знаете, устраивался я как то на работу и на одном из собеседований мне принесли тест по HTML и CSS. По моим ощущениям я этот тест завалил напрочь.

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

Самое лучшее это именно дать кандидату макеты для верстки (как и написано в первом посте).

Макеты можно сверстать и с чьей-то помощью, а вот ответить на вопросы на собеседовании придется самому.

На собеседованиях я обычно смотрю не на уровень знаний, а на реакцию человека, когда он оценивает свои знания в предметной области в районе 8-9 баллов по 10-ти бальной шкале, а после вопросов оказывается, что у него реально 2-3 балла. Но тут в ход вступают другие вещи - мышление. Если мне нравится мышление человека и способность на минимальных знаниях достичь правильного ответа, то такого человека стоит брать в команду.

Хотя зеленчак уже реально поднадоел.

[Great Rash]

Не надо отпускать человека домой. Посадил его за комп в сторонку дал макет, который реально сделать часика за 2-3, и пусть себе делает. Через пару часов проверить, что сделано, что нет и почему.

[Ялекс]

Например даешь верстать макет человеку, где нужно всего то применить стандартный float. Человек лезет на форум или к докам, спрашивает, делает задание, но сути флоата не понимает.

Вот я про это. Нужны тесты, которые позволят ответить на вопрос: "Понимает человек суть вопроса или нет?".

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

Я предлагаю разработать задания на:

* знание float

* нюансы верстки в IE6

* понимание padding, margin в нюансах

* background-position

* абсолютное позицирование

* z-index в различных браузерах, включая IE6

* знание селекторов

* javascript

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

Edited June 30, 2009 by Ялекс

[Great Rash]

Вообще имхо яваскрипт к верстке не относится. Надо отделять мух от котлет.

знание float

а без понимания float разве возможно верстать дивами?

понимание padding, margin в нюансах

скорее понимание как маргин и паддинг влияют на размер блока в правильных браузерах

background-position

а это кто-то не понимает?

Да и вообще все это видно по верстке. Как грится, покажи мне свою верстку и я сажу кто ты.

[psywalker]

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

А у хорошего человека, который знает своё дело, а главное ЛЮБИТ свою работу, всё разложено по полочкам, отличная организация кода и его приятно смотреть и разбираться в таком коде 5 секунд, но к сожалению таких людей очень мало, но если попадётся, бери сразу, не раздумывая..

Вот тебе кстати пример простенькой работы, но посмотри на организацию и качество кода HTML и CSS, такой сайт будет стоять даже при самом жутком урагане, если ты понимаешь, о чём я! http://psywalker.ru/Raira/main-page.html

Edited June 30, 2009 by psywalker

[Ялекс]

Ясно, идею тестирования никто развивать не хочет. Будем думать сами.

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

Хотел вместе с вами придумать ряд вопросов, которые и будут в будущем этими самыми тестами.

s0rr0w, спасибо.

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

а без понимания float разве возможно верстать дивами?

Некоторые забивают абсолютом. В коде это не видно, если стиль пристально не смотреть - не заметишь, а когда добавишь инфы - все лезет.

Некоторые просто не учитывают clear или overflow из за чего макет становиться хрупким.

скорее понимание как маргин и паддинг влияют на размер блока в правильных браузера

да и это тоже

> background-position

а это кто-то не понимает?

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

тесты типа: видите картинку. здесь так то и так то. что будет, если изменить величину на 20px? и варианты ответов... возможно на время.

Edited June 30, 2009 by Ялекс

[s0rr0w]

Я предлагаю разработать задания на:

* знание float

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

* нюансы верстки в IE6

Забыть как страшный сон

* понимание padding, margin в нюансах

Этому можно уделить максимум внимания.

* background-position

Тут можно особо не заморачиваться

* абсолютное позицирование

Пока жив IE, про это можно забыть.

* z-index в различных браузерах, включая IE6

Используется 1 раз на 10 проектов. Смысла не вижу.

* знание селекторов

* javascript

Это полезно, но не критично.

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

ОТВЕТЫ ПРИСЫЛАЙТЕ В ЛИЧКУ!!!

1. Чем отличается тег TABLE от UL

2. Какой из тегов используется для выравнивания текста по правому краю

a ) B

b ) TT

c ) S

d ) BLOCKQUOTE

e ) SPAN

3. Что неправильно в этой таблице

<TABLE>

<THEAD><TR><TH>#</TH><TH>Values</TH></TR></THEAD>

<TBODY>

<TR><TH>Section 1</TH><TD>Yes</TD></TR>

</TBODY>

<TBODY>

<TR><TH>Section 2</TH><TD>Yes</TD></TR>

</TBODY>

<TFOOT><TR><TH>#</TH><TH>Values</TH></TR></TFOOT>

</TABLE>

4. Для чего служит <!DOCTYPE>? Является ли данный элемент тегом?

5. При каких условиях данная строка становится валидной?

<div class="button">

<a href="index.html">

<div class="buttonTitle">Home page</div>

</a>

</div>

a ) .button { float: left }

b ) .buttonTitle { display: inline }

c ) .buttonTitle { color: #fc3 }

d ) .button { position: relative }

e ) .buttonTitle { border: 1px solid red }

6. Какая будет ширина красного бокса, если известно, что контейнер данного элемента имеет ширину 500px;

<div style="margin: 10px 5px 15px ; padding: 5px ; width: 300px ; background-color: red">Red Box</div>

7. Какие элементы допускаются внутри тега P

a ) ABBR

b ) TABLE

c ) BLOCKQUOTE

d ) IMG

e ) P

8. На странице указан следующий CSS

html { font-size: 10pt}

body, td { font-size: 90% }

.special { font-size: 110% }

Какого размера шрифт будет в ячейках таблицы

a ) 11pt

b ) 10pt

c ) 8,1pt

d ) 8.91pt

e ) ни один из вышеперечисленных вариантов

9. В какой строке содержится ошибка

1. <div id="xDiv" class="xComponent"><span class="xComponent">

2. <b lang="en">User</b> <img src="ico_user.png" alt="User Icon" id="UserIcon"><br />

3. </span></div> <div class="xComponent"><span id="xDiv">Next ></span></div>

10. Какое расстояние будет между двумя блоками

<div style="margin: 10px 15px;">Div 1</div>

<div style="margin: 20px; padding: 0px 10px;">Div 2</div>

a ) 10px

b ) 20px

c ) 30px

d ) 35px

e ) 45px

JAVASCRIPT + DOM

1. Какое значение выведет алерт.

myFunc = function(x,y) {

x = 10;

y = y || x--;

alert( y )

}

myFunc( 11 );

a ) 9

b ) 10

c ) 11

d ) undefined

e ) В скрипте ошибка, алерт не будет вызван.

2. Какие значения переменных будут высланы на сервер при нажатии на кнопку Send

<form action="script.cgi" method="GET">

<select id="sel_1" name="select_1">

<option value="1">Option 1</option>

<option value="2" selected="selected">Option 2</option>

</select>

<select id="sel_2" name="select_2">

<option value="3" selected="selected">Option 3</option>

<option value="4">Option 4</option>

</select>

<input type="submit" name="action" value="Send" onclick="myFunc(); return false;">

</form>

<script type="text/javascript">

myFunc = function() {

document.getElementById( 'sel_2' ).appendChild( document.getElementById('sel_1').options[1] );

}

</script>

a ) script.cgi?action=Send&sel_1=2&sel_2=3

b ) script.cgi?action=Send&sel_1=1&sel_2=2

c ) script.cgi?action=Send&select_1=2&select_2=3

d ) script.cgi?action=Send&select_1=1&select_2=2

e ) script.cgi?action=Send

f ) Ни один из вышеперечисленных вариантов.

3. Какой из методов удаляет HTML ноду.

a ) removeNode

b ) deleteNode

c ) removeChild

d ) deleteChild

e ) innerHTML

4. Что выведет алерт?

<b onclick="alert(this.nextSibling.nodeType)">Test</b>

<p>Completed</p>

a ) 1 (ELEMENT_NODE)

b ) 2 (ATTRIBUTE_NODE)

c ) 3 (TEXT_NODE)

d ) 4 (CDATA_SECTION_NODE)

e ) В скрипте ошибка, алерт не будет вызван.

5. Чему равен x?

y = 10;

z = 3;

x = ( y % 5 > 0 )? ( z == 3)? z * 2 : y + 3 : ( z < 3 )? y - z : z++;

a ) 6

b ) 13

c ) 7

d ) 4

e ) 3

f ) В скрипте ошибка.

[Ялекс]

s0rr0w, отлично. тебя стоит уважать только за то, что ты не троллишь...

Вопросы зафиксил. Будет голова почище - тоже придумаю десяток.

float-ом я не пугаю, но многое в блочной верстке зависит от этого св-ва, поэтому все же стоит уделить ему внимание.

Хотелось бы узнать еще точки зрения...

По z-index и другим способам, которые редко используются: я просто обучаю человека верстке, обучаю всесторонне, поэтому хотелось бы затронуть редко используемые "фишки", которые расширят мировоззрение, а следовательно человек будет видеть новые нестандартные способы решения задач.

Edited June 30, 2009 by Ялекс

[s0rr0w]

s0rr0w, отлично. тебя стоит уважать только за то, что ты не троллишь...

[Great Rash]

2s0rr0w:

Я б ваш тест 100% завалил. Но это не значит, что я плохой верстальщик

[Ялекс]

Great Rash, как раз это говорит о вашем уровне. Может вы хороший человек, но если нужен специалист срочно, и времени на подготовку, утирание соплей нет, то лучше прибегнуть к тестам.

[s0rr0w]

2s0rr0w:

Я б ваш тест 100% завалил. Но это не значит, что я плохой верстальщик

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

[Great Rash]

Great Rash, как раз это говорит о вашем уровне.

О, я уверяю вас, что вы не верно оценили мой уровень

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

И вы тоже неверно оценили мой уровень и мое отношение к трудностям.

Что я и пытаюсь доказать.

Судить о том хороший верстальщик или нет можно только по его работам. Тест в 70% случаев даст неверное представление о кандидате.

[s0rr0w]

Судить о том хороший верстальщик или нет можно только по его работам. Тест в 70% случаев даст неверное представление о кандидате.

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

[Great Rash]

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

[s0rr0w]

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

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

[Ялекс]

Еще я хотел бы внести в тест знания Photoshop или других программ работы с графикой. Потому что многие не совсем адекватно умеют нарезать графику и работать со слоями. Некоторых в тупик заводит размножить бэкграунд или слить несколько слоёв, хотя знают HTML и CSS на уровне.

Edited July 1, 2009 by Ялекс

[s0rr0w]

Еще я хотел бы внести в тест знания Photoshop или других программ работы с графикой. Потому что многие не совсем адекватно умеют нарезать графику и работать со слоями. Некоторых в тупик заводит размножить бэкграунд или слить несколько слоёв, хотя знают HTML и CSS на уровне.

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

[psywalker]

s0rr0w

А скажи пожалуйста, как бы ты сам порезал этот макет и какую стратегию вёрстки ты бы замутил?

[s0rr0w]

А скажи пожалуйста, как бы ты сам порезал этот макет и какую стратегию вёрстки ты бы замутил?

Руками

В данной верстке нужно понять места разреза.

Самое первое - что есть базисный фон. Штрихованый фон ложим в body.

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

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

Дальше делаем два основных класса, например leftColumn и rightColumn, которые будут у нас делать две колонки.

И создаем слоеный пирог из отдельных блоков

* переключалка языков

* лого + телефоны

* меню + поиск

* контен

* футер

Футер располагаем абсолютно, чтобы он был всегда снизу.

Дальше, фоны блоков сделал бы одним куском, так как дизайн имеет фиксированную ширину. И двумя дивами сделал бы закругления.

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

[psywalker]

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

Edited July 2, 2009 by psywalker