Лучшая вёрстка формы

[Akaciya]

Akaciya:

Траблы тоже начинаются с самого начала. У подсказки над плюсиком отсутствует иконка. Тоже самое с вопросиком. Переходим ко второму шагу. Поде "Добавить основной ингредиент", оно стилизовано, это конечно хорошо, но ингредиент выбрать невозможно (кликал как сумасшетший, надеясь, что область клика просто неочевидно расположена). Идем дальше, кнопка "загрузить фото" не работает. Когда отмечаю чекбоксы, они съезжают на пиксель вправо вниз. Поле "Тип коктейля" пустое. Стилизация выпадающих списков не соответствует макету. В общем низачот.

Спасибо за коммент

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

>>Когда отмечаю чекбоксы, они съезжают на пиксель вправо вниз

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

>>Тип коктейля

В макете там ничего нет, то бишь "Не указано". А значит и писать туда нечего. Фунционал тоже не описан.

Остальные выпадающие списки (мл, гр. эти наверн)- тоже в макете не отрисованы, сделала на свой лад.

[Анна]

Молодцы, ребята!

Работа psywalker-а впечатлила, очень! Дотошный ты человек наверное в жизни, на все внимание обратил))) Прямо все, как в макете, подсказки при введении первых букв при добавлении ингредиентов(просто здорово!), еще и проверка текста в шагах как готовить!

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

[Great Rash]

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

<input type="file"> - если вы знаете как на сервер можно еще передать файл (например модальным окном), то с удовольствием почитаю про это. Поведение этого поля в каждом браузере одинакавое и очевидное.

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

Т.е. галочка, по-вашему, не достаточно показывает юзеру, что поле чекнуто?

[psywalker]

Молодцы, ребята!

Работа psywalker-а впечатлила, очень! Дотошный ты человек наверное в жизни, на все внимание обратил))) Прямо все, как в макете, подсказки при введении первых букв при добавлении ингредиентов(просто здорово!), еще и проверка текста в шагах как готовить!

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

Спасибо, очень рад, что тебе понравилось, старался, не могу отрицать!

На счёт вёрстки, я, кстати так же уделил этому много внимание, работа была сделана с помощью http://pixelperfectplugin.com/, т.е. так же попиксельно и дотошно.

[web-monster]

За psywalker'а голос отдал.

А говорил, что JavaScript не знаешь

[Gidroplan]

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

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

[DrStrangeLove]

DrStrangeLove

Теперь всё понятно! Спасибо! Молодец! Хорошо сделал! Только в конце, когда жму кнопку "Готово", почему-то ничего не происходит...

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

P.S: Сколько всего времени ушло на всю эту работу??

Да делал по мере возможности. Каждый день по чуть-чуть, но бывало и что тратил больше пол-дня)

Зная, что ты всё написал без фреймворков, я бы за тебя проголосовал 2 раза если бы мог..

Только вот как тебе идея:

В своём коде ты в самом конце вешаешь formsScripts на window.onload

Не лучше обойтись без этого используя formsScripts как самовызывающую функцию??

var formsScripts = (function(){

// весь твой код..


})();

Edited September 27, 2011 by DrStrangeLove

[psywalker]

DrStrangeLove

Теперь всё понятно! Спасибо! Молодец! Хорошо сделал! Только в конце, когда жму кнопку "Готово", почему-то ничего не происходит...

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

P.S: Сколько всего времени ушло на всю эту работу??

Да делал по мере возможности. Каждый день по чуть-чуть, но бывало и что тратил больше пол-дня)

Зная, что ты всё написал без фреймворков, я бы за тебя проголосовал 2 раза если бы мог..

Только вот как тебе идея:

В своём коде ты в самом конце вешаешь formsScripts на window.onload

Не лучше обойтись без этого используя formsScripts как самовызывающую функцию??

var formsScripts = (function(){

// весь твой код..


})();

Спасибо!

На счёт formsScripts на window.onload, считаю, что сделал правильно всё же. Дело в том, что в твоём случае:

(function(){

// весь твой код..


})();

ничего не возвращает и переменная formsScripts будет равна undefined. Тогда вопрос, зачем так делать?

[Akaciya]

Цитата

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

<input type="file"> - если вы знаете как на сервер можно еще передать файл (например модальным окном), то с удовольствием почитаю про это. Поведение этого поля в каждом браузере одинакавое и очевидное.

Цитата

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

Т.е. галочка, по-вашему, не достаточно показывает юзеру, что поле чекнуто?

1. При станадартном загрузчике - да, но там картинка, а значит нужно подключать дополнительный плагин, жаваскрипт и т.д. Возник вопрос - а обязятельно ли надо? В общем, не стала... Может это и минус. В жаваскрипте - я новичок.)

2. Хм, мне как с не очень хорошим зрением, так заметней. Да и мониторы у всех разные. В общем это чисто субъективно.

[Great Rash]

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

Ок, представим, что я реальный заказчик. Я посмотрел вашу работу, работу Akaciya и работу psywalker. У вас и у Akaciya документ проходит валидацию, но форма нерабочая и не соответствует дизайну. У psywalker одна ошибка (отсутствует атрибут alt), но при этом форма полностью рабочая и 1 в 1 как в макете.

И как вы думаете, что выберет заказчик? Что бы вы сами выбрали?

1. При станадартном загрузчике - да, но там картинка, а значит нужно подключать дополнительный плагин, жаваскрипт и т.д. Возник вопрос - а обязятельно ли надо? В общем, не стала... Может это и минус. В жаваскрипте - я новичок.)

<input type="file"> стилизуется без участия яваскрипта. Да это непросто сделать, но все равно можно. В любом случае в задании специально разрешили использовать любые плагины и фреймворки. То, что вы их не знаете (знаете плохо) это только в минус вам же.

[DrStrangeLove]

DrStrangeLove

Теперь всё понятно! Спасибо! Молодец! Хорошо сделал! Только в конце, когда жму кнопку "Готово", почему-то ничего не происходит...

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

P.S: Сколько всего времени ушло на всю эту работу??

Да делал по мере возможности. Каждый день по чуть-чуть, но бывало и что тратил больше пол-дня)

Зная, что ты всё написал без фреймворков, я бы за тебя проголосовал 2 раза если бы мог..

Только вот как тебе идея:

В своём коде ты в самом конце вешаешь formsScripts на window.onload

Не лучше обойтись без этого используя formsScripts как самовызывающую функцию??

var formsScripts = (function(){

// весь твой код..


})();

Спасибо!

На счёт formsScripts на window.onload, считаю, что сделал правильно всё же. Дело в том, что в твоём случае:

(function(){

// весь твой код..


})();

ничего не возвращает и переменная formsScripts будет равна undefined. Тогда вопрос, зачем так делать?

прошу прощения.. а что сейчас возвращает formsScripts?? не undefined?? Она же вроде как контейнер для остального кода, (чтобы он не попал в глобальный scope)так??

[Great Rash]

DrStrangeLove, по-моему в этой теме не стоит обсуждать яваскрипты. Хотите поговорить об этом? Создавайте тему в соответствующем разделе.

[Shift-Web]

Волкер -- маньяк. Проголосовал, но действительно не понятно почему не использовать один из фрэймворков? Круто конечно, но выглядит ржачно и не оптимизировано

[Great Rash]

Круто конечно, но выглядит ржачно и не оптимизировано

Эх, не понимаете вы. Он скилл прокачивает, скилл в нативном программировании дорогого стоит. Зная, например, один только jQuery, очень сложно будет перейти, скажем, на PHP. Зная чистый программинг, сделать это будет проще в разы.

[Gidroplan]

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

Ок, представим, что я реальный заказчик. Я посмотрел вашу работу, работу Akaciya и работу psywalker. У вас и у Akaciya документ проходит валидацию, но форма нерабочая и не соответствует дизайну. У psywalker одна ошибка (отсутствует атрибут alt), но при этом форма полностью рабочая и 1 в 1 как в макете.

И как вы думаете, что выберет заказчик? Что бы вы сами выбрали?

Как заказчик – я выберу форму psywalker, она действительно лучшая, человек явно потратил времени больше всех на эту работу и учёл все мелочи, очень круто, респект.

Представим конкурс красоты со своими требованиями, там участвуют красивые и стройный девушки (90x60x90, 180+см), низкорослую пышечку туда просто не допустят (а вы сидите в жюри и просто безумного любите низкорослых пышечек, к примеру ), но увы и ах, придется выбирать из того, что прошло "отсев".

[Great Rash]

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

Худышки с большими сиськами на конкурсе красоты - тоже мнение большинства.

[Синдром]

У Синдрома загрузка файла на странице "Как готовить" работает в Firefox и криво отображается в Хроме. Можно было изменить курсор мыши, иначе непонятно, что по этой картинке можно щёлкать.

да это файл инпут, курсор изменить не получаеться, если только сдвинуть и показывать кнопку выбора файла, дефолтная стрелочка, в хроме что и происходит.. но нужно было по другому делать. Была идея фикс сделать аякс загрузку фото, не успел. Кстати скрипты сам писал, с использованием jQuery. Кроме слайдеров недоделаных, туда судорожно в последние часы пытался сунуть Ui. В общем для себя вывод сделал, в следующий раз если не успел сделать то и не участвую. Это кстати первый мой конкурс.

[psywalker]

За psywalker'а голос отдал.А говорил, что JavaScript не знаешь

Спасибо. Но я его и правда не знаю. Мне ещё учиться, учиться и учиться

Волкер -- маньяк. Проголосовал, но действительно не понятно почему не использовать один из фрэймворков? Круто конечно, но выглядит ржачно и не оптимизировано

Дружище, ты, как обычно в своём репертуаре) Я тебе так скажу, что УЖАСНО рад, что смог сам, своими силами и умом, написать столько скриптов и решить столько задач на чистом JS. Благодаря этому поднялась планка моего опыта и знаний по этой технологии. А это, друг мой, ой, как немаловажно. И, уверен, что тот, кто адекватно рассуждает, обязательно меня поддержат.

А вообще я не пойму некоторые споры, на счёт какой-то валидности кода, если речь идёт о работоспособности самого сайта

Я, кстати, уделил много времени той же структуре, но, скажу честно - это для меня не на первом месте. Тут я согласен с Great Rash. Пусть у тебя хоть трижды обёрнут элемент, но при этом он отлично выполняет свои функции и качественный, я выберу эти обёртки - не задумываясь!

[novicheG]

Самое первое неудобство - кликаешь по альтернативному полю, и его невозможно убрать, а заполнять обязательно, почему-то только один exessqd сделал возможность удаления, но и оно не работает

Edited September 27, 2011 by novicheG

[psywalker]

Самое первое неудобство - кликаешь по альтернативному полю, и его невозможно убрать, а заполнять обязательно, почему-то только один exessqd сделал возможность удаления, но и оно не работает

Альтернативное поле заполнять необязательно. Где ты это увидел?

[Vlad]

Самое первое неудобство - кликаешь по альтернативному полю, и его невозможно убрать, а заполнять обязательно, почему-то только один exessqd сделал возможность удаления, но и оно не работает

Этот функционал не был прописан в задании, альтернативное название должно появляться, но не убираться. И оно не обязательно к заполнению.

[Shift-Web]

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

Нативное программирование это замечательно, никто с этим даже не спорит. Вдвойне замечательно, когда для задач выбираются правильные решения. Минус такого подхода очень маленький, но он есть. Кто потом будет это хозяйство поддерживать? Удобно ли это? Есть ещё так сказать разумная планка, временная и ценовая политики.

psywalker, ни в коей мере не хочу кинуть в тебя помидоркой и уважаю твои старания. Валидность наверное всё таки для себя больше делается А вот насчёт тройных обёрток и всяких хитровывернутых изысков -- это треш сто пудовый. Если можно сделать проще -- надо делать проще, хотя бы из чувства солидарности к тому, кто потом с этим будет ковыряться.

>> Худышки с большими сиськами на конкурсе красоты - тоже мнение большинства.

Кто сказал такую ерунду? В большинстве своём дело даже не во внешности и устройстве. Это как с сайтами Всё очень таки относительно

>> Спасибо. Но я его и правда не знаю. Мне ещё учиться, учиться и учиться

Лучше бы пышечек пробовал

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

p.s.: давайте ещё про руби поговорим он без рельсов вообще нахрен никому не сдался. это конечно не жабакод, но пример весьма удачный

Edited September 27, 2011 by Shift-Web

[novicheG]

оно не обязательно к заполнению.

у кого-то одного - у Синдром такая ошибка, перейти на следующий шаг без заполненного поля нельзя.

[psywalker]

psywalker, ни в коей мере не хочу кинуть в тебя помидоркой и уважаю твои старания. Валидность наверное всё таки для себя больше делается А вот насчёт тройных обёрток и всяких хитровывернутых изысков -- это треш сто пудовый. Если можно сделать проще -- надо делать проще

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

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

оно не обязательно к заполнению.

у кого-то одного - у Синдром такая ошибка, перейти на следующий шаг без заполненного поля нельзя.

Ну значит это его косяк.

[Great Rash]

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

А alt у картинки не указал