Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 7969 / 742 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Лекция 34:

Проектирование, компоновка и представление форм с помощью CSS

Создание уровней поддержки платформы

Последний раздел демонстрации показывает разновидность стилей оформления, отложенных для Internet Explorer 6 и 7, и требует обсуждения, насколько широко различные браузеры рассматриваются добросовестной командой разработчиков сайта.

Реальность Web состоит в том, что пользователи используют множество всевозможных браузеров во всевозможных рабочих средах. Некоторые из них являются старыми, в то время как другие находятся на переднем крае развития. Некоторые выполняются на полнофункциональных компьютерах, в то время как другие выполняются на мобильных устройствах, таких как телефоны. Все они разработаны в определенных операционных системах, а затем перенесены на другие с различной степенью поддержки стандартов. За исключением Opera, все поставщики браузеров, поставляют продукты, которые создаются для использования вместе с другими продуктами в более обширных пакетах -- требование разработки, которое делает эти браузеры более сложными, чем требуется для единственной задачи просмотра Web. Как будто бы было недостаточно рассмотрения множества сильных и слабых сторон браузеров, но существует также вопрос ошибок -- ошибок системы безопасности, ошибок компонентов, и особенно ошибок визуализации. Пользователи Safari 3.x обнаружили, что в определенный момент документ демонстрации выявляет разрушительную ошибку визуализации в их собственном браузере. Лучшим способом разрешения таких вопросов является определение уровней поддержки. Такая практика была впервые провозглашена командой разработки интерфейса в Yahoo!, которые назвали его "Ранжированной поддержкой браузеров".

Обычно уровни поддержки попадают в четыре широкие категории:

  1. Сайт выводится, как первоначально задумывался, в пределах возможностей этих браузеров, и все свойства полностью поддерживаются. Платформа разработки определяет, так называемый иногда уровень "A+".
  2. Отклонение от предпочтительной композиции является очевидным, возможно в существенной степени; однако, сайт все еще можно использовать, и большинство, если не все, свойства сайта поддерживаются.
  3. Сайт, предлагаемый пользователям этих браузеров, является настолько простым, насколько может поддерживаться без потери бренда владельца сайта, и свойства сайта вполне могут отключаться. Эти браузеры имеют обычно относительно небольшие базы установки, и предполагаются устаревшими, нестабильными, или неполноценными.
  4. Называемый в документации Yahoo! как поддержка степени "X Grade", этот уровень поддержки зарезервирован для нетестированных платформ — обычно более новых браузеров с небольшими базами установки (часто Opera, естественно). После тестирования такие браузеры перемещают на более высокий уровень.

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

Сложные компоновки форм на практике (… вместо теории)

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

  • Чтобы наметить в общих чертах последовательность демонстраций на основе временной шкалы было бы необходимо поддерживать журнал (или хранить таблицу стилей в системе контроля версий) - что никогда не делалось. К тому времени, когда этот недосмотр был замечен, эта статья была и так слишком просрочена, чтобы исправлять это.
  • Представление согласно порядку исходного кода существенно облегчает создание документов демонстрации — еще одна уступка идеала практике.
  • Так как исходная таблица стилей демонстрации была написана со значительной (если не исчерпывающей) заботой о нормализации и порядке исходного кода — как и должно быть для всех производственных таблиц стилей — представление демонстрации в порядке исходного кода гарантирует, что тем студентам, которые хотят "видеть исходный код", будет значительно легче понять смысл того, что реально делается.

В качестве агента пользователя во время разработки использовался браузер Opera 9.6 для OS X; с учетом этой оговорки и отмеченных выше других замечаний, ниже представлен общий порядок, в котором изменения и дополнения были сделаны в таблице стилей:

  1. Применяются стили документа (т.е., body)
  2. Перезадаются значения по умолчанию списков, форм, и fieldset
  3. Определяется набор текста
  4. Объекты списка ограничиваются и очищаются (clear)
  5. Метки (label) размещаются в целом
  6. Определяется и нормализуется компоновка элементов управления формы (главным образом размеры)
  7. Создается кнопка отправки
  8. Задаются крайние случаи
  9. Тестируются браузеры Safari и Firefox и изменяются значения таблицы стилей, чтобы отразить компромиссы (где возможно)
  10. Тестируются браузеры Internet Explorer 6 и 7 и в условную таблицу стилей добавляются настройки свойство/значение

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

Заключение

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

Контрольные вопросы

  • Какой тип обтекания у элементов управления формы, которые принимают ввод пользователя, и какие две характеристики делают их выделяющимися в отношении компоновки?
  • Какие два атрибута отличные от value и disabled управляют настройками элементов управления формы до взаимодействия пользователя, и к каким элементам они применяются?
  • Документ демонстрации обеспечивает требуемые поля. Напишите, по крайней мере, одно правило таблицы стилей, которое будет разом изменять внешний вид поля, которое содержит образец ошибки или пропуск ввода пользователя.
  • Опишите по одному случаю использования для каждого из элементов управления select, checkbox, и radio. Обоснуйте каждое описание объяснением преимуществ, которое предоставляет сделанный выбор, при сравнении с другими возможными вариантами выбора.
  • Используя сетевую ссылку, выбранную инструктором, найдите и кратко опишите альтернативы для input type="submit".
  • Создайте элемент select, который позволяет выбрать несколько options, добавляя пару атрибут/значение multiple="multiple". После анализа поведения этого элемента, объясните, почему он редко встречается на производственных сайтах.

Таблица: преобразование простых дробей в десятичные

В следующей таблице цифры, находящиеся в скобках со звездочкой после них, бесконечно повторяются; например, 0.2(6*) эквивалентно 0.266666666666666… (6 повторяется бесконечно).

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

x 1/x 2/x 3/x 4/x 5/x 6/x 7/x 8/x 9/x 10/x 11/x 12/x 13/x 14/x 15/x
2 .5 - - - - - - - - - - - - - -
3 .(3*) .(6*) - - - - - - - - - - - - -
4 .25 .5 .75 - - - - - - - - - - - -
5 .4 .6 .8 - - - - - - - - - - -
6 .1.(6*) ..3*) .5 .(6*) .8(3*) - - - - - - - - - -
7 .(142857*) .(285714*) .(428571*) .(571428*) .(714285*) .(857142*) - - - - - - - - -
8 .125 .25 .375 .5 .625 .75 .875 - - - - - - - -
9 .(1*) .(2*) .(3*) .(4*) .(5*) .(6*) .(7*) .(8*) - - - - - - -
10 .1 .2 .3 .4 .5 .6 .7 .8 .9 - - - - - -
11 .(09*) .(18*) .(27*) .(36*) .(45*) .(54*) .(63*) .(72*) .(81*) .(90*) - - - - -
12 .08(3*) .1(6*) .25 .(3*) .41(6*) .5 .58(3*) .(6*) .75 .8(3*) .91(6*) - - - -
13 .(076923*) .(153846*) .(230769*) .(307692*) .(384615*) .(461538*) .(538461*) .(615383*) .(692307*) .(769230*) .(846153*) .(923076*) - - -
14 .0(714285*) .(142857*) .2(142857*) .(285714*) .3(571428*) .(428571*) .5 .5(714285*) .6(428571*) .(714285*) .7(857142*) .(857142*) .9(285714*) - -
15 .0(6*) .1(3*) .2 .2(6*) .(3*) .4 .4(6*) .5(3*) .6 .(6*) .7(3*) .8 .8(6*) .9(3*) -
16 .0625 .125 .1875 .25 .3125 .375 .4375 .5 .625 .625 .6875 .75 .8125 .857 .9375

Библиография

  1. Бос, Берт, и др. 2007. Спецификация каскадных таблиц стилей уровня 2 ревизии 1 (CSS 2.1). Консорциум WWW. http://www.w3.org/TR/2007/CR-CSS21-20070719 и т.д. (доступно 28 мая 2008 г.).
  2. Хеник, Бен. 2006. 12 уроков для тех, кто боится CSS и стандартов. A List Apart. http://www.alistapart.com/articles/12lessonsCSSandstandards (доступно 16 декабря 2008 г.).
  3. Хоротон, Сара, и Линч, Патрик. 2002. Руководство по стилевому оформлению Web (http://www.webstyleguide.com/): базовые принципы создания Web-сайтов, 2-е изд., New Haven, Conn.: Yale University Press.
  4. Knott, Ron. 2008. The golden section ratio: phi. Department of Mathematics, University of Surrey (UK). http://www.mcs.surrey.ac.uk/Personal/R.Knott/Fibonacci/phi.html (доступно 18 декабря 1008 г.).
  5. Meyer, Eric. 2007. Formal weirdness. Meyerweb.com. http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ (доступно 17 декабря 2008 г.).
  6. Microsoft Corporation. msnbc.com. http://msnbc.msn.com/ (доступно 17 декабря 2008 г.).
  7. Рагетт, Дейв, и др., 1999. Спецификация HTML 4.01. Консорциум WWW. http://www.w3.org/TR/1999/REC-html401-19991224 etc. (доступно 30 июня 2008 г.).
  8. Рейнольд, Гарр. 2005. От золотого среднего к "правилу третей". Presentation Zen. http://www.presentationzen.com/presentationzen/2005/08/from_golden_mea.html (доступно 16 декабря 2008 г.).
  9. Santa Maria, Jason. 2008. Making modular layout systems. 24 Ways. http://24ways.org/2008/making-modular-layout-systems (доступно 16 декабря 2008 г.).
  10. Wikipedia. 2008. Fahrner image replacement. http://en.wikipedia.org/wiki/Fahrner_Image_Replacement (доступно 19 декабря 2008 г.).
  11. Yahoo! Developer Network. 2008. Ранжированная поддержка браузеров. http://developer.yahoo.com/yui/articles/gbs/ (доступно 16 декабря 2008 г.).

Предыдущая статья — Оформление таблиц

Следующая статья — Плавающие элементы и очистка

Об авторе

Бен Хеник создает Web-сайты различного вида начиная с сентября 1995 г., когда он взялся за свой первый Web-проект как академический доброволец. С тех пор большая часть его работы была сделана в качестве фрилансера.

Бен является универсалом, его навыки касаются почти любого аспекта создания и разработки сайта, от CSS и HTML до проектирования и написания текста, и до PHP/MySQL и JavaScript/Ajax.

Он живет в Лоуренсе, Канзас с тремя компьютерами и без телевизора. Вы может прочитать больше о нем и его работе на сайте henick.net ( http://www.henick.net/).

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.
Марина Медведева
Марина Медведева

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

Кристина Семенова
Кристина Семенова

Здравствуйте,подскажите,можно ли оплатить курс частями?

Александр Стеценко
Александр Стеценко
Украина, Мелитополь