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

[Vlad]

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

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

Советовать все мастера, как же. Возьмите и сверстайте сами, а мы все дружно поругаем.

[Nanto]

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

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

Советовать все мастера, как же. Возьмите и сверстайте сами, а мы все дружно поругаем.

Над Вами есть вышестоящее руководство? Маркетологи, менеджеры всякие? Скорее всего нет...

Одно дело заказчик - его можно ПОПРОБОВАТЬ пугануть сроками и стоимостью, а вот если руководство сказало "поддерживать IE6 и IE7, незначительные косяки допустимы" - ничего не поделаешь... А ещё помню одного менеджера проекта - она тестовые варианты смотрела в IE7! Тётя курирует веб-разработку и смотрит проекты в седьмом осле... Ну чтож - я довольно быстро привык пользовать DebugBar и писать все свойства CSS через * (типа *width:99%

[lexxcode]

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

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

Советовать все мастера, как же. Возьмите и сверстайте сами, а мы все дружно поругаем.

Вот, Влад, истинный герой современности, вот на кого ровняться нужно.

Я например делаю, только, чтоб в ie7 не падало уж совсем, не более того.

А на всякие попытки навязать ie6, говорю мол $100500 сверху, и будет вам поддержка и красивости в ie6, но за последствия ответственности не несу, все делается на ваш страх и риск)))

[Vlad]

Над Вами есть вышестоящее руководство? Маркетологи, менеджеры всякие? Скорее всего нет...

Одно дело заказчик - его можно ПОПРОБОВАТЬ пугануть сроками и стоимостью, а вот если руководство сказало "поддерживать IE6 и IE7, незначительные косяки допустимы" - ничего не поделаешь... А ещё помню одного менеджера проекта - она тестовые варианты смотрела в IE7! Тётя курирует веб-разработку и смотрит проекты в седьмом осле... Ну чтож - я довольно быстро привык пользовать DebugBar и писать все свойства CSS через * (типа *width:99%

Что вы софистикой занимаетесь! Речь шла о конкретном задании с конкретными условиями. В них чётко дал понять, что верстать под IE6 и IE7 не надо. Для IE8 соблюдается же формальная работа формы без всяких красивостей. Тогда чего вы вдруг настаиваете о возврате к IE6-7? Только потому что вам руководство сказало.

А на всякие попытки навязать ie6, говорю мол $100500 сверху, и будет вам поддержка и красивости в ie6, но за последствия ответственности не несу, все делается на ваш страх и риск)))

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

[psywalker]

А на всякие попытки навязать ie6, говорю мол $100500 сверху, и будет вам поддержка и красивости в ie6, но за последствия ответственности не несу, все делается на ваш страх и риск)))

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

Тоже считаю абсолютно верным подходом, я у себя в объявлении так же делаю

[LuxCore]

Отдал голос за Psywalker`а. Отлично работает всё. Есть чему научиться. 10 баллов по 5-ти бальной шкале.

У других участников понравились некоторые анимашки, но вёрстка понравилась Psywalker`а, проверка на заполненность полей. Молодец!

[Nekromancer]

10 баллов по 5-ти бальной шкале.

Это перебор конечно, но ладно.

[Shift-Web]

Nanto,

Сентябрь 2011 по рунету:

IE7 - 4,8%

IE6 - 1,8%

Т.е. 6,5% юзеров идут лесом вообще! Им даже никакой затычки нет, хотя бы в виде стандартной формы...

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

Просмотр сообщенияNekromancer (28 сентября 2011 - 12:35) писал:

Просмотр сообщенияpsywalker (28 сентября 2011 - 11:45) писал:

А что это? Расскажи поподробнее плиз

Ну это он понтанулся, что знает английский. Только перепутал incuded c supported

Правда? А мне кажется что я ничего не перепутал, дорогой мой горе-модератор!

Да харош вам уже, ты лучше объясни, что ты имел ввиду?

Максим, используй jQuery и лопатить не придётся

[psywalker]

LuxCore

Отдал голос за Psywalker`а. Отлично работает всё. Есть чему научиться. 10 баллов по 5-ти бальной шкале.

У других участников понравились некоторые анимашки, но вёрстка понравилась Psywalker`а, проверка на заполненность полей. Молодец!

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

Кое что я уже исправил, но заливать на сервак не планирую, так как работа уже сдана и поезд ушёл. Но как только закончиться конкурс, я сразу же это сделаю.

Максим, используй jQuery и лопатить не придётся

Я не прикоснусь к jQuery, до тех пор, пока как следует не изучу чистый JS. Таков мой метод изучения.

[Simon]

работа exessqd1 возвращает 404. Файл не найден. Спасибо, все сурсы сохранил себе а ребята молодцы

[int03e]

2 Psywalker под "пай" наверно имели ввиду это.

[psywalker]

2 Psywalker под "пай" наверно имели ввиду это.

Ааа, это ужас. Я понял. Неее, к этому дерьму я детей ближе, чем на километр не подпущу

[Shift-Web]

2 Psywalker под "пай" наверно имели ввиду это.

Ааа, это ужас. Я понял. Неее, к этому дерьму я детей ближе, чем на километр не подпущу

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

[psywalker]

2 Psywalker под "пай" наверно имели ввиду это.

Ааа, это ужас. Я понял. Неее, к этому дерьму я детей ближе, чем на километр не подпущу

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

Какой смысл в этом костыле, если он создаёт больше проблем, чем помогает?

[Shift-Web]

2 Psywalker под "пай" наверно имели ввиду это.

Ааа, это ужас. Я понял. Неее, к этому дерьму я детей ближе, чем на километр не подпущу

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

Какой смысл в этом костыле, если он создаёт больше проблем, чем помогает?

Как же так? Ты избегаешь красивых, правильных и православных решений? После ковыряния сабжа можно понять природу проблем, а это уже 70% решения Ну и конечно же там много жабакода

[psywalker]

Как же так? Ты избегаешь красивых, правильных и православных решений?

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

[Shift-Web]

Как же так? Ты избегаешь красивых, правильных и православных решений?

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

Если аккуратно, то проблем нет Главное box-shadow большими площадями не юзать Ну и как бэ ... навеска бехавиор само по себе не идеальное решение и его можно заменить прямым expression, который на порядок производительнее. Ты же должен быть в курсе, что избыточная универсальность приводит к избыточным нагрузкам, равно как и избыточная узкость решения приводит к повышенной дубовости твоего кода )

[paracelso]

Основной браузер - Opera 11.51, косяки и аргументы:

---

Критерии:

Общее - Общие впечатления, некоторые конкретные замечания по данному типу элементов и скрытые недоработки.

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

Оформление - Мнение касательно реализации того, что представлено в дизайнерском эскизе. Точнее, реализации активных элементов дизайнерского эскиза (например, анимация действий и вылезание подсказок): всё остальное должно эскизу априори соответствовать.

---

Psywalker:

Общее:

+ Самая тщательная работа.

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

- Почему шагов в третьем пункте "Как готовить" должно быть минимум 3?

- Кнопки в галлерее не доставляют позитива.

- Во втором пункте в среде оперы уродливый выбор количества ингридиентов/украшений.

Логика:

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

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

Оформление:

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

- Кнопки в галлерее не доставляют позитива.

---

alexriz:

Общее:

+ Подгрузка изображений кнопочек и прочей лабуды сделана по фэн-шую.

+ Меньше резкости, больше активных элементов и т.п.

- Недоделаны куски формы (точнее, просто отсутствуют), углубляться в пункт не буду

- Полоски в параметрах некошерные как-то. Мало делений, "ощущения не те".

Логика:

- Отсутствует

Оформление:

+ "По ощущениям", нравятся больше, чем у psywalker'а, но, вероятно, из-за недоделанных модулей. Под "по ощущениям" понимаю делэи, анимации и прочую мишуру.

+ Кнопки управления лучшие

- Cursor:pointer не везде, эффект не лучший.

- Селекты не сделаны.

- Отсутствует текст в hover-подсказках на втором шаге.

- Кнопки в галлерее не доставляют позитива.

---

Gidroplan:

Общее:

+ Очень понравилась подсветка хэдера активного пункта шага.

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

- Placeholder'ы в IE не работают.

Логика:

- Отсутствует.

Оформление:

- Ну, hover на первом шаге вылезает правильно, но сам по себе уродлив.

---

Akaciya:

Общее:

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

+ Лучший среди участников выбор количества ингридиентов/украшений. Имхо.

+ В галерее стаканов наконец-то нормальные кнопки.

- Явные недостатки поганят всю проделанную работу, а именно:

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

- Если прошлое - симптом, то диагноз - нулевая логика в работе с формой.

- Placeholder'ы в IE не работают.

Логика:

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

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

- Селекты на втором шаге не работают.

Оформление:

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

- Cursor:pointer не везде, эффект не лучший.

---

Julia:

Общее:

+ Не худшая работа, видны старания и старательное замазывание косяков

+ В галерее стаканов наконец-то нормальные кнопки.

- Стакан не выбрать

Логика:

- На шаг назад не перейти

- Исключения не обрабатываются

- Селектов нет, подгрузки по введенной фразе нет, как итог - нерабочий второй шаг.

Оформление:

+ За исключением стаканов, тут косяков не нашел.

- Селекты не сделаны

---

Синдром:

Общее:

+ Довольно органично

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

- Подсказки отвратительны.

- Помимо гидроплана, самая "тяп-ляп"истая работа

Логика:

- Исключения, кроме первого шага, нигде не обработаны

- На последнем шаге полоски не несут функционала. Значений не возвращают, комментариев к позиции нет, для чего они - неясно.

- Форма на разных страницах, зачем?

- Какая функция у этой страницы?

Оформление:

+ Всё по эскизу

- Селекты не сделаны.

- Чекбоксы не сделаны.

- Кнопки в галлерее не доставляют позитива.

---

Комментарий к комментарию:

Что примечательно, о красивых кнопках в галлерее позаботились только два участника, вернее, участницы Можно сделать некоторые важные выводы:

а) Только девушки замечают и обрабатывают такие приятные мелочи

б) Все девушки замечают и обрабатывают такие приятные мелочи

в) Все парни не замечают и не обрабатывают такие приятные мелочи

Вёрстка как таковая добросовестно сделана у psywalker'а, он, имхо, и победитель. Хотя более импонирует мне работа акации, но, к сожалению, в ней море косяков.

P.S. Я очень хотел, чтобы нечто подобное кто-то написал на конкурсе дизайна формы. Я очень расстроился из-за того, что никто так этого и не сделал.

Edited September 28, 2011 by paracelso

[psywalker]

paracelso,

Спасибо тебе, дружище, за подробные ответы. Но есть вопросы:

Общее:

+ Самая тщательная работа.

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

- Почему шагов в третьем пункте "Как готовить" должно быть минимум 3?

- Кнопки в галлерее не доставляют позитива.

- Во втором пункте в среде оперы уродливый выбор количества ингридиентов/украшений.

Логика:

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

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

Оформление:

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

- Кнопки в галлерее не доставляют позитива.

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

А ты имел ввиду один спрайт на всю старницу?

- Почему шагов в третьем пункте "Как готовить" должно быть минимум 3?

А какая разница? Ну я так сделал, потому что на этой странице по сути три разных элемента.

А ты бы как поступил и почему?

- Кнопки в галлерее не доставляют позитива.

А я рисовать не умею к сожалению, а автор макета картинки не предоставил(((

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

Интересный вариант, нужно обдумать.

И отдельный вопрос.

+ Лучший среди участников выбор количества ингридиентов/украшений. Имхо.

Где у неё это всё? Я не заметил.

[paracelso]

А ты имел ввиду один спрайт на всю старницу?

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

Ну я так сделал, потому что на этой странице по сути три разных элемента.

А ты бы как поступил и почему?

А если их два?) Или один? Сделал бы один и оставил скрипт на добавление шагов, было бы самое оно. Имхо.

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

Где у неё это всё? Я не заметил.

Вероятно, ведь у неё попросту нету стрелочек (+1/-1). А смысл в них? С другой стороны, я только сеичас заметил, что тип количества украшений в её работе отличается своей неповторимой спецификой, что еще больший минус, нежели обсуждаемый плюс.

[Nekromancer]

Я вообще все картинки на base64 сделал, кроме бокалов.

[lexxcode]

alexriz:

Общее:

+ Подгрузка изображений кнопочек и прочей лабуды сделана по фэн-шую.

+ Меньше резкости, больше активных элементов и т.п.

- Недоделаны куски формы (точнее, просто отсутствуют), углубляться в пункт не буду

- Полоски в параметрах некошерные как-то. Мало делений, "ощущения не те".

Логика:

- Отсутствует

Оформление:

+ "По ощущениям", нравятся больше, чем у psywalker'а, но, вероятно, из-за недоделанных модулей. Под "по ощущениям" понимаю делэи, анимации и прочую мишуру.

+ Кнопки управления лучшие

- Cursor:pointer не везде, эффект не лучший.

- Селекты не сделаны.

- Отсутствует текст в hover-подсказках на втором шаге.

- Кнопки в галлерее не доставляют позитива.

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

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

Я вообще все картинки на base64 сделал, кроме бокалов.

Интересно на твою работу посмотреть.

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

Edited September 29, 2011 by alexriz

[s0rr0w]

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

Объем формы копеечный. На спичках экономите? Никто не заметит разницы в скорости.

[lexxcode]

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

Объем формы копеечный. На спичках экономите? Никто не заметит разницы в скорости.

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

[s0rr0w]

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

Преждевременная оптимизация? Не доделав основную задачу? Ну-ну...