Конкурс по вёрстке формы

[Vlad]

Конкурс пройдёт с 15 по 27 сентября, приём работ завершается в 10:00 UTC (13 Киева, Минска, 14 Москвы, 15 Ташкента, 16 Екатеринбурга, 17 Омска, 18 Красноярска, 19 Иркутска, 20 Якутска).

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

Победитель определяется путём открытого голосования посетителей форума. Для участия в голосовании надо иметь не менее трёх сообщений, при этом можно голосовать сразу за нескольких претендентов. Места распределяются согласно набранным голосам. Если участников будет больше 20, то устроим двухэтапную систему. Вначале происходит отбор 10 лучших участников, затем уже из них голосованием выбирается победитель.

Задание

Необходимо сверстать предложенную форму для ввода коктейля. Автор дизайна exessqd1

В процессе работы учтите следующие условия.

• Разрешается использовать JavaScript, а также любые библиотеки и фреймворки.
  
• Валидная вёрстка на HTML5.
  
• Валидность CSS не важна.
  
• Корректное отображение в браузерах IE9, Opera 11.10, Firefox 5, Safari 5, Chrome 12 и их старших версиях.
  
• Работоспособность формы в IE8.
  
• Допустимы незначительные отклонения от макета при отображении в разных браузерах.
  

Награждение

• Первые три участника получат книги по их выбору и медаль победителя с указанием места. Также им предоставляется хостинг от компании TelePark. На выбор - хостинг для WordPress или хостинг для Джумлы.
  
• Первым десяти участникам, набравшим максимальное число голосов, в профиль на форуме добавляется медаль о том, что её обладатель является лауреатом мини-конкурса по вёрстке. Также его репутация повышается на 30 единиц.
  

Файлы

Вид всех форм

http://htmlbook.ru/sites/default/files/form4/all.png

Архив с PSD первого окна (Описание), кнопками и фотографиями бокалов

http://htmlbook.ru/sites/default/files/form4/01.zip

Архив с PSD окна Состав

http://htmlbook.ru/sites/default/files/form4/02.zip

Уточнения

Надо сделать 5 (пять) макетов в итоге по числу окон.

Макет 1 (файл 01.psd)

1. при нажатии на (+) в поле «Название коктейля» появляется дополнительное поле «Альтернативное название».

2. При наведении курсора мыши на (?) в поле «Краткое описание» отображается всплывающая подсказка. Она пропадает, если курсор убрать с иконки.

3. Подсказывающий текст внутри полей пропадает при получении фокуса и появляется вновь, когда фокус теряется.

4. При нажатии на кнопку «Дальше», если поле «Название коктейля» не заполнено, выводится сообщение об ошибке.

Макет 2 (файл 02.psd)

1. Бокалы прокручиваются по кругу, после 14 бокала идёт сразу 1. Прокручиваются тройками.

2. При нажатии на кнопку «Выбрать» в ингредиентах и украшениях выводится список из семи видимых пунктов. Прокручивание списка по вертикали происходит с помощью стрелок. Сделайте не менее 10 произвольных пунктов.

3. При наведении курсора на фотографию бокала выводится всплывающая подсказка с названием бокала.

4. Делать поиск и подстановку при наборе текста ингредиента и украшения не надо.

5. Подсказывающий текст внутри полей пропадает при получении фокуса и появляется вновь, когда фокус теряется.

6. При щелчке по фотографии бокала добавляется элемент «Выбрано», если щёлкнуть по другому бокалу, элемент переносится на другую фотографию. Таким образом, выбирается только один бокал.

7. При нажатии на крестик возле ингредиента, он удаляется.

8. Рядом с ингредиентом есть поле для ввода количества.

9. При нажатии на единицу измерения открывается список для выбора единиц. Он имеет фиксированное число пунктов и не прокручивается.

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

[Akaciya]

плохо, что иконки на кнопках не отдельными слоями в psd

п.с. а не, нашла отдельно иконки на этом шаблоне http://dump.ru/file/5384542

Edited September 15, 2011 by Akaciya

[Varnavsky]

Есть несколько вопросов:

1. В каком виде нужно сдавать работу? Это должна быть ссылка на сайт в сети или архивом выкладывать на форуме?

2. Кнопка "Дальше" должна быть активна, если да, то переход по ней должен реализовать переход на следующий макет?

3. Макет "Параметры": как должны себя вести ползунки, тип коктейля, метод приготовления?

4. Макет "Подтвердить": при нажатии на иконку карандаша что должно происходить?

[exessqd1]

Есть несколько вопросов:

1. В каком виде нужно сдавать работу? Это должна быть ссылка на сайт в сети или архивом выкладывать на форуме?

2. Кнопка "Дальше" должна быть активна, если да, то переход по ней должен реализовать переход на следующий макет?

3. Макет "Параметры": как должны себя вести ползунки, тип коктейля, метод приготовления?

4. Макет "Подтвердить": при нажатии на иконку карандаша что должно происходить?

1. На выбор.

2. Да, переход на следующую вкладку.

3. Двигаться я думаю?

4. Переход на соответствующую вкладку.

+ состояния :focus,:active,:hover в макете не оформлены, включаем фантазию.

[Varnavsky]

3. Двигаться я думаю?

Это понятно. Двигаться по делениям или не зависимо от делений?

Ну и правильно ли я понял, функционал добавления данных с последующим их выводом на следующих вкладках не нужно реализовывать, например последняя вкладка не берет данные из предидущих, а просто отображает текст по умолчанию?

[Vlad]

Ну и правильно ли я понял, функционал добавления данных с последующим их выводом на следующих вкладках не нужно реализовывать, например последняя вкладка не берет данные из предидущих, а просто отображает текст по умолчанию?

Да, именно так.

[Joyfit]

хах) не зря зашел почитать) сижу все делаю в 1 макете с активными кнопками) возможен такой вариант?)

Edited September 16, 2011 by Joyfit

[s0rr0w]

+ состояния :focus,:active,:hover в макете не оформлены, включаем фантазию.

Кодер не обязан включать фантазию. Это задача дизайнера. Или зачем тогда он такой красивый нужен?

Некрасиво так посылать людей.

[Vlad]

Не надо включать фантазию. Не оформлено, значит, не делаем, в данном случае так.

хах) не зря зашел почитать) сижу все делаю в 1 макете с активными кнопками) возможен такой вариант?)

Возможен.

[Varnavsky]

А добавятся ли макеты 3, 4, 5?

[Vlad]

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

[Nekromancer]

Извините конечно, но нельзя ли было выложить фоновые текстуры и вон ту вот шестерёнку синенькую отдельными картинками/слоями?

(Вопрос к автору макета конечно же)

[exessqd1]

Извините конечно, но нельзя ли было выложить фоновые текстуры и вон ту вот шестерёнку синенькую отдельными картинками/слоями?

(Вопрос к автору макета конечно же)

Все в макете слой64, слой 71

[Great Rash]

Все в макете слой64, слой 71

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

[Nekromancer]

Извините конечно, но нельзя ли было выложить фоновые текстуры и вон ту вот шестерёнку синенькую отдельными картинками/слоями?

(Вопрос к автору макета конечно же)

Все в макете слой64, слой 71

В общем полазил я по соседним темам, нашёл таки ещё какие то PSD. В самом гигантском PSD где как бы все состояния я таки нашёл эту шестерёнку но увы, без прозрачности. Так же крайне огорчает, что вообще приходится что то искать. В это теме 2 архива которых явно не хватает, в соседней теме ещё 3 каких то других PSD. Во всех слои раскиданы по разному, что то найти сложновато, а чего то я уверен таки и нету. В общем всё больше пропадает желание верстать этот макет. И остаётся конечно же вопрос - зачем торопится и устраивать конкурс по не готовому макету, когда дизайнер не может предоставить всё, что может понадобится кодеру?.

[exessqd1]

И остаётся конечно же вопрос - зачем торопится и устраивать конкурс по не готовому макету, когда дизайнер не может предоставить всё, что может понадобится кодеру?.

http://gentleface.com/free_icon_set.html иконки из макета фулсет.

Можешь свои добавить, суть не иконках.

[Nekromancer]

Можешь свои добавить, суть не иконках.

Действительно, суть в общей картине складывающейся из таких вот "иконок".

[Varnavsky]

суть не иконках.

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

Edited September 19, 2011 by Varnavsky

[psywalker]

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

[exessqd1]

Действительно, суть в общей картине складывающейся из таких вот "иконок".

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

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

ну плохому танцору как известно

Edited September 19, 2011 by exessqd1

[Nekromancer]

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

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

Ещё хочу заметить, что не стоит переходить на оскорбления, даже такие в стиле "шутки". То что вы автор дизайна не даёт вам повода заставлять кодеров "включать фантазию" и напрягаться в поисках PSD файла.

[psywalker]

exessqd1,

А у меня вопрос к тебе, как к автору.

Страницы должны быть одинаковой высоты?

[Vlad]

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

[psywalker]

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

А я могу просто дать людям все изображения, так не проще?

[Nekromancer]

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

Спасибо большое, но со мной уже благородно поделился картинками Макс. Сейчас просто уже дело не в невозможно получить картинку, а в небрежности отношения автора макета к данному конкурсу. Как например участника конкурса и члена администрации форума меня это немного задевает (задевает не понимать как раздражает, а как волнует).