Jump to content
  • Sign Up
Sign in to follow this  
Vlad

Решения по вёрстке формы

Recommended Posts

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

Ссылки вставляйте между кодами [ hide ] и [ /hide ] пишутся они без пробелов.

Share this post


Link to post
Share on other sites

Ссылка

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

HTML5:

Особо много элементов HTML5 вы там не заметите, так как я считаю, что всё таки эта форма и она, хоть и разрешено по спеке, не должна кишить всякими элементами из html5. Я имею ввиду <article>, <section>, <aside> и т.д. Т.е. я считаю, что я внёс в неё по максимуму возможностей этого языка, ровно столько, сколько она заслуживает, учитывая и ИЕ8 конечно же.

CSS3:

Всё, что возможно, я сделал на на CSS3, т.е. по полной, табы, ползунки, кнопки и т.д.

Скрипты:

Все скрипты, от А до Я, писал лично сам, на чистом JavaScript (кстати, получил большой опыт). Т.е. не использовал никаких библиотек, jQuery и прочих вещей. Всё сам, своими руками и головой.

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

В общем в краце расскажу, что и как.

1. Страница "Описание"

1. Все <textarea> изначально имеют одну высоту, но написав в ней несколько строк, она само-увеличивается по высоте, в зависимости от их количества.

Наглядный пример

2. Страница "Состав"

1. Поиск. Всё таки изначально он был в задании, поэтому я решил его всё же сделать. Как работает. Очень просто. Вбиваем слова в поля, снизу вылазит список с нужными и отсортированными по алфавиту напитками или украшениями, содержащих вводимые символы.

Пример

Так же из списка можно выбирать напитки с помощью клавиатуры, стрелок и энтера.

Всё, что выбрано, появляется наверху, прямо над поиском.

2. Выпадающее меню. Внутри ещё один, бесконечно крутящийся список.

Пример

3. Галерея с всплывающими подсказками. Крутится бесконечно.

Пример

3. Страница "Как готовить"

1. Загрузка фото. Всё таки решил так же сделать эту вещь.

2. Про <textarea> уже рассказывал выше.

3. Ну и конечно же, добавление шагов, так же посчитал, что без этого шага, форма не будет полноценной.

4. Страница "Параметры"

1. Эмуляция чекбоксов. Тут всё понятно.

2. Выпадающие списки. Тут, я думаю, тоже.

3. Ползунки. Все отчитывают чёткое время, сложность и крепость. Ровно по шкале. Окончание у текста "минут" меняется в зависимости от единицы времени.

5. Страница "Подтвердить"

Механизм сборки

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

Значит у нас есть Класс с приватными объектами и свойствами, которые скрыты и не могут быть изменены снаружи. Единственное, что связывает их с внешним миром, это методы, которые делают свою работу, занимаются сборкой информации со страниц, валидируют все обязательные элементы, при этом собирая приватные объекты, внутри своего Класса.

Как итог, мы имеем один, главный объект, который представляет из себя полную сборку всех деталей, необходимых нам для заполнения блоков с инфой, которые находятся на последней странице нашей формы.

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

Табы и Редактирование.

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

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

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

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

Пример

В целом, я постарался продумать каждую мелочь, типа ввода только чисел в нужные инпуты, соответствующих своим именованиям ёмкостей и ещё очень много мелочей, благодаря которым, я надеюсь, мне удалось вас порадовать и может быть даже где-то и удивить :)

Приятного пользования, господа :rolleyes:

Ссылка

Share this post


Link to post
Share on other sites

Задание не выполнил до конца, неверно распределил своё время :) может и не стоило выкладывать вообще, обязательно доделаю до конца, хотя бы для себя.

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

http://re-surs.ru/files/forma/forma.html

http://re-surs.ru/files/forma/forma2.html

Share this post


Link to post
Share on other sites

Akaciya, нижние кнопки-ссылки в Firefox 6 переносятся.

Посмотрела сейчас в Win7 FF6.0.2 - вроде намана, не переносятся

Share this post


Link to post
Share on other sites

Всем привет.

Большое спасибо за конкурс организаторам и участникам, отдельное спасибо дизайнеру, форма шик!

К сожалению не успеваю доверстать((, выкладываю что есть.

http://we1st.tk/htmlbook/ver1/step1.html

http://we1st.tk/htmlbook/ver1/step2.html

http://we1st.tk/htmlbook/ver1/step3.html

http://we1st.tk/htmlbook/ver1/step4.html

http://we1st.tk/htmlbook/ver1/ver1.zip

Share this post


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

  • Member Statistics

    46,837
    Total Members
    159
    Most Online
    Мишкин
    Newest Member
    Мишкин
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Как облачные технологии помогают малому и среднему бизнесу экономить   Любой инструмент создают, когда какой-то процесс нужно сделать удобнее, эффективнее, выгоднее. Облака — такой же инструмент. С ними бизнес трансформируется, обретает новую форму и развивается быстрее.   Облака обеспечивают высокую производительность за адекватные деньги. Бизнес, который выбрал облака для решения задач, платит только за то, что использует. В отличие от тех, кто еще работает по старинке.   Давайте разберёмся по порядку.   Бизнес без облачных технологий   Это классическая схема. Так работают многие компании, которые ещё не решились использовать облака.   Представьте небольшой бизнес: 10 сотрудников, каждый из которых работает на своём компьютере и выполняет задачи. Все компьютеры соединены сетевым кабелем в мини-сеть и могут обмениваться между собой информацией.       Ещё где-то на стене висит маршрутизатор, который отвечает за то, чтобы у каждого сотрудника был интернет.   Каждому компьютеру в такой системе требуется:                                  Лицензионные операционные системы и приложения.                                 Периодический ремонт и обслуживание.                                Модернизация при необходимости.   Так каждый компьютер превращается в объект, который регулярно требует вложения денег.   Ещё нужен человек, который постоянно будет в офисе компании на случай, если что-то пойдёт не так. Его функция — быстро прийти на помощь и исправить косяки и поломки, которые возникают в рабочем процессе. Как правило, это штатный ИТ-специалист, которому нужно платить зарплату.     С ростом компании появляются новые рабочие места, оборудование, серверные комнаты. Общий бюджет на содержание и обслуживание оборудования растёт.   Штат ИТ-специалистов тоже растёт. Так появляется новый отдел, сотрудникам которого тоже нужно платить зарплату.     Для малого и среднего бизнеса это нецелесообразно. И этого можно избежать, если начать использовать облака. Чем раньше бизнес понимает это и переносит работу в облака, тем больше получается сэкономить в итоге.   При переходе в облако малый и средний бизнес экономит, а сэкономленные ресурсы направляет на развитие бизнеса.   Бизнес с облачными технологиями   При облачной организации ИТ-инфраструктуры вся информация хранится на виртуальном сервере в облаке, а уже к нему подключены все компьютеры.     Когда бизнес переходит в облако, появляются новые возможности:                                  Использовать старенькие системные блоки в качестве терминалов доступа к облаку.                                Перестать покупать дорогие рабочие станции и новое серверное оборудование.                                 При выходе старых системников из строя покупать недорогие тонкие клиенты.                                 Вычеркнуть из бюджета расходы на содержание и модернизацию оборудования.                                 Перестать тратить деньги на специализированные помещения, электроэнергию.                                 Использовать ресурс ИТ-специалистов для решения задач развития компании.                                 Увеличивать и уменьшать ИТ-инфраструктуру в нужный момент.                                 Организовать мобильную работу сотрудников, сэкономив на офисе.   Некоторые компании боятся переходить облака, только потому, что для них это что-то новое и неизвестное. Но в Украине, как и во всем мире, это уже норма. Как и сопутствующие переходу преимущества.   1.                             Бизнес в облаке платит только за то, что использует. Если требуется увеличить мощность, скорость, производительность или другие характеристики, нужно только сказать об этом провайдеру. Он всё сделает. 2.                             Обновлять или добавлять мощности рабочим станциям не потребуется, потому что теперь вся мощность берётся с сервера. При необходимости её можно добавить или убрать без покупки дополнительного оборудования. 3.                             Если у компании ещё нет ИТ-специалиста, можно доверить администрирование ИТ-инфраструктуры в облаке провайдеру. Это выгоднее, чем нанимать для этих задач отдельного специалиста. Если специалисты в штате уже есть, им можно поручить более серьезные задачи, чем чистить кулеры от пыли и восстанавливать с разной степенью успешности случайно удаленные кем-то из сотрудников данные. 4.                             Облака универсальны. Их легко адаптировать под любые проекты со своим набором характеристик и программ. 5.                             Есть возможность резервного копирования информации и восстановления при необходимости. 6.                             При использовании облаков появляется возможность планировать расходы и избежать спонтанных трат, которые возникают в связи с внезапными неисправностями оборудования в офисе. 7.                             Компании, которые отказываются от облаков и покупают свои серверы в офис, оборудуют серверные комнаты, через 3-5 лет вынуждены обновлять, дополнять или вовсе менять серверы на новые. Это всегда дорого. С облаками этого делать не нужно. При необходимости можно добавить мощности за небольшую плату, но покупать сервер нет необходимости. 8.                             Часто при размещении своего сервера в офисе есть риск, что информация о вашем бизнесе окажется под угрозой. Физические серверы могут изъять или украсть и получить доступ к данным. С облачной инфраструктурой, особенно если облако расположено в зарубежных дата-центрах, этот риск сведён к минимуму. Даже если кто-то получит физический доступ к компьютерам в офисе, не зная реквизитов доступа к облаку, доступ к информации получить не получится. На компьютере её просто не будет. Всё останется на сервере.   У облачных технологий много преимуществ. Для каждого бизнеса есть свои плюсы. Поэтому компании всё чаще отказываются от классической модели инфраструктуры в компании и переходят в облака. Как легко перейти в облако   Чтобы компании убедились в выгодах и почувствовали преимущества использования облаков, мы предоставляет тестовый бесплатный период на 7 дней.   Это хорошая возможность попробовать все функции и примерить решение на свой бизнес.   При этом совсем не обязательно сразу переводить в облако всю компанию. Можно попробовать на филиале, отделе или нескольких сотрудниках.   Закажите тестовую среду или, если у вас есть дополнительные вопросы, задавайте их нашей службе поддержки. Мы работаем для вас 24х7.
    • Воспользуйтесь поиском Google
  • Popular Contributors

×
×
  • Create New...