Vlad

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

Recommended Posts

Конкурс пройдёт с 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. При нажатии на единицу измерения открывается список для выбора единиц. Он имеет фиксированное число пунктов и не прокручивается.

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

1. На выбор.

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Edited by Joyfit

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Возможен.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites
Все в макете слой64, слой 71

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Edited by Varnavsky

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

Edited by exessqd1

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

exessqd1,

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Member Statistics

    46,452
    Total Members
    3,128
    Most Online
    rhouland
    Newest Member
    rhouland
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.