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

[lexxcode]

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

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

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

[nightgremlin]

Я скажу так: все участники молодцы. Отдал голос за Волкера

[s0rr0w]

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

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

[paracelso]

Поддерживаю s0rr0w, но, по моему небезосновательному мнению, при таких малых объемах важен не размер копеечных изображений, а количество обращений к серверу, на котором они лежат. Загрузка одного файла весом 11Кб произойдет быстрее, нежели загрузка 5 файлов по 2Кб. Я об этом. Да и hover-элементы тоже в спрайт должны быть внесены, в таком случае не будет дополнительных элементов и скриптов для подгрузки изначально скрытых изображений.

В общем, я придерживаюсь идеи со спрайтом и она мне сильно импонирует.

[Shift-Web]

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

бестолку, если графика в base64 утрамбована, главное чтобы сервер сжатое отдавал, есть небольшие издержки

[s0rr0w]

Поддерживаю s0rr0w, но, по моему небезосновательному мнению, при таких малых объемах важен не размер копеечных изображений, а количество обращений к серверу, на котором они лежат. Загрузка одного файла весом 11Кб произойдет быстрее, нежели загрузка 5 файлов по 2Кб. Я об этом. Да и hover-элементы тоже в спрайт должны быть внесены, в таком случае не будет дополнительных элементов и скриптов для подгрузки изначально скрытых изображений.

В общем, я придерживаюсь идеи со спрайтом и она мне сильно импонирует.

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

[paracelso]

Вот поэтому я и предпочел бы одну карту забитым сотней пикчей папкам.

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

[lexxcode]

paracelso, так s0rr0w, и говорит, что "Да, количество обращений к серверу важно."

Я не совсем согласен с "Но это все экономия на спичках.", как бы да в данном конкретном случае по большому счету, прирост в производительности не большой, просто потому, что сам объект маленький. И разница в 780ms и 8кб трафика не существенна. Просто я хотел показать на своем примере как можно уменьшить объем загружаемого и количество запросов.

s0rr0w

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

У человека же есть голова, и наверное ею нужно думать)

[s0rr0w]

s0rr0w

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

У человека же есть голова, и наверное ею нужно думать)

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

Разговоры о том, что посмотрите какой классный код, сделал спрайты, на фоне отсутствия 80% интерактива - это непонятный китч.

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

[psywalker]

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

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

[Nekromancer]

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

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

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

[s0rr0w]

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

Не завершив проекта, никогда не узнаешь его узких мест. Реально узких мест, а не крохоборства.

Простой пример: уменьшение количества файлов экономит 500 милисекунд из 5 секунд, а оптимизация базы данных - 3 секунды. Вопрос, какую оптимизацию лучше проводить?

Еще один пример: на 90% реализации проекта стало понятно, что вместо 5 страниц настройки можно сделать всего одну, и весь графический контент этих страниц можно выкидывать. А вы потратили на преждевременные оптимизации неделю работы. Вопрос, стоило ли тратить эту неделю, если результат нулевой?

[psywalker]

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

Не завершив проекта, никогда не узнаешь его узких мест. Реально узких мест, а не крохоборства.

Простой пример: уменьшение количества файлов экономит 500 милисекунд из 5 секунд, а оптимизация базы данных - 3 секунды. Вопрос, какую оптимизацию лучше проводить?

Еще один пример: на 90% реализации проекта стало понятно, что вместо 5 страниц настройки можно сделать всего одну, и весь графический контент этих страниц можно выкидывать. А вы потратили на преждевременные оптимизации неделю работы. Вопрос, стоило ли тратить эту неделю, если результат нулевой?

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

[Vlad]

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

I psywalker

II Akaciya

Напишите мне письмо, какую книгу на books.ru вы хотите получить. Также свяжусь со спонсором на предмет хостинга.

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

[paracelso]

Псай, еще момент касательно селектов на втором шаге: скролл подвешен на click, из-за этого крутить неудобно. Было бы идеальным повесить на mousedown c определенным интервалом. Конечно, поиск это с головой окупает, однако кому-то, вероятно, удобнее листать список.

Так или иначе, все равно работа очень понравилась.

[psywalker]

Псай, еще момент касательно селектов на втором шаге: скролл подвешен на click, из-за этого крутить неудобно. Было бы идеальным повесить на mousedown c определенным интервалом. Конечно, поиск это с головой окупает, однако кому-то, вероятно, удобнее листать список.

Согласен, уже работаю над этим.

[exessqd1]

После драки конечно кулаками не машут, но psywalker

1. 49 запросов к серверу, то есть по запросу за каждую картинку.

2. Полное отсутствие поддержки ie6,ie7. (раз уж отказался от ie6, ie7 спрайт поклеить вдвойне проще - не надо чистить альфа прозрачность)

3. Без javascript форма не то что не раскрывается, она вообще не отображается. (в среднем пользователей без js больше чем пользователей ie6)

4. <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> - ну еп! - отсутствие понимая зачем нужна семантика html5.

Из маленького:

1. Лишний код для каждой отдельной подсказки ошибки.

Ну и какбы, конкурс не на javascript, и не на юзабилити, а на html,css и оценивать его стоит только по критериям html,css.

[paracelso]

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

[psywalker]

4. <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> - ну еп! - отсутствие понимая зачем нужна семантика html5.

Дружище, а объясни вот этот пункт плиз, поподробнее.

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

Спасиб)

[lexxcode]

Вообще-то это <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

для того чтоб IE<9 понимали теги html5. При чем тут семантика, в данном случае?

psywalker, мои поздравления)))

Edited September 30, 2011 by alexriz

[Vlad]

На этой странице надо поискать по ключевому слову Реми Шарп.

http://htmlbook.ru/html5/semantics

[psywalker]

Вообще-то это <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

для того чтоб IE<9 понимали теги html5. При чем тут семантика, в данном случае?

Ну да, именно, чтобы ИЕ8 понимал эти теги. Что тут не так? Я тоже не понял?

psywalker, мои поздравления)))

Спасибо. Но это только начало

[lexxcode]

...

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

Что-то у меня не 30, а 60 добавилось...

[Vlad]

До 30 считать умею, ошибки нет.

[psywalker]

alexriz, Ща будешь возникать, мы тебе ещё 200 накинем, понял?