Вёрстка в Латвии: Вчера. Сегодня! Завтра?

Версия моего выступления на Web Standards Days Riga 2010 вызвавшего неоднозначную реакцию.

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

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

Вчера

Итак, что же можно назвать «вчера»?

  • ASCII кодировка
  • Не использование DOCTYPE
  • DOCTYPE с указанием спецификации
  • Валидация ради валидации

Список можно продолжить, но мне лениво.

Кодировка

Для начала рассмотрим какие кодировки использовались на проанализированных сайтах.

Здесь всё замечательно, почти на всех сайтов используется кодировка utf-8. Это проще, чем подбирать для каждого языка свою. Здесь могу только посоветовать, тем 7 %, кто остался переходить на uft-8. Больше говорить не о чем.

DOCTYPE

Многие до сих пор не понимают значения доктайпа. Для того, чтобы это понять, нужно сначала обратиться к истории. Ну долго копаться в ней не будем, единственно упомянем, что существует два режима отображения веб-страницы — Standards Mode  и Quirks Mode,  ну так исторически сложилось. Первый — это режим отображения согласно веб-стандартам W3C, второй — режим поддержки старых сайтов, написанных в 90-е годы. Чем конкретно они отличаются читайте на W3C или в Википедии, ищите в Гугле… информации полно, но я на этом зацикливаться не буду. (Ну там ещё есть almost standards, который от standards почти не отличается)

Если вы не пишете доктайп, то включается Quirks Mode. Если пишете — Standards Mode. Но есть исключения:

  • Internet Explorer воспринимает декларацию HTML 4.0 и старее как Quirks Mode.
  • В случае с XHTML по правилам требуется xml-декларация. И её фактически никогда не пишут, поскольку из-за неё IE6 переключается в Quirks Mode.
  • Опера вообще не поддерживает Quirks Mode. Даже без DOCTYPE страница рендерится в Standards Mode.

Более подробные нюансы о QuirksMode можно почитать в Википедии.

Итог: Чтоб избежать проблем нужно использовать DOCTYPE обязательно.

DOCTYPE с указанием спецификации или валидация ради валидации

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

Великолепно! 68 % указывают XHTML  декларацию. А теперь проверим, проходят ли они валидацию?

Внимание, вопрос! Зачем для сайтов указывать доктайпы со спецификацией, если валидацию они не проходят?

Если почитать спецификацию XHTML, то такой документ по сути должен передаваться в формате application/xhtml+xml. Это можно сказать «чистый» XHTML. Правильный. Мы все любим правильность и я в том числе, поэтому большинство сайтов написаны в формате XHTML. Там и правильные закрывающие теги и правильная вложенность и дубрирующееся написание значения атрибутов-флагов.

А на самом деле все передают такой документ в формате text/html. Почему? Во-первых многие не знают, что он должен передаваться как application, а во-вторых — незачем! Чаще всего модульные технологии расширения, для которых был создан XHTML, не используются. Ни прстранства имён, ни MathML, ни семантическая вёрстка через RDF и другие крутые вещи не нужны для создния веб-сайтов и сервисов.

Так зачем же мы пишем такой сложный Доктайп? И при чём он у всех такой разный. Он вам не нужен такой! Напишите его проще. Вот так:

<!DOCTYPE html>

Дело в том, что именно по этой части DOCTYPE браузер определяет, переходить ли ему в режим Standards Mode или нет. Указание дальнейшей спецификации и соответствующего адреса браузеру не нужно, он прекрасно справится. Спецификация нужна только для валидатора. Тем более что данная декларация, вот именно в таком виде уже включена в стандарт HTML 5 и тупые ошибки вы сможете определить W3C-валидатором.

Хорошо, допустим вы такой упрямый и всё равно считаете, что будете верстать в XHTML и указывать соответствующий доктайп, просто потому, что так правильней и можно проверить в валидаторе ту самую паранойю «disabled=”disabled”». Но на какой стадии вы это делаете? На стадии девелопинга! Так на продакшен-сервере, то он вам зачем?! Вот то-то и оно…

Холивар про «em vs. px» напишу чуть позже.

Дата: 27.05.2010
«
Google     
27 05.10

Вёрстка в Латвии: Вчера. Сегодня! Завтра?

Версия моего выступления на Web Standards Days Riga 2010 вызвавшего неоднозначную реакцию. Много было регистраций работников различных дизайн студий, компаний занимающихся разносторонней веб-разработкой, банков, министерств, фрилансеров и просто интересующихся. Я не зря добавил в форму регистрации поле для адреса сайта. Те люди, что собрались на конференцию, скромно говоря, флагманы, пионеры латвийской веб-разработки. Поэтому не грех было покопаться в их работах и попробовать понять, что же всё-таки у нас происходит с текущим использованием технологий? Статистика вещь интересная, но только если она связанна с интересными темами. Мне было интересно заняться небольшим статистическим анализом, результатами которого я с вами сейчас поделюсь. Конечно в дебри я не полез, из-за большой лени, но то, чего успел накопать хватает достаточно, чтобы составить небольшую рекомендацию, с чего стоит начать осовременивать свою вёрстку. Вчера Итак, что же можно назвать «вчера»? ASCII...

Категории: Исследования | Брaузеры | Статистика | xhtml/xml | htmlТэги: » Читать полностью » Комментарии (12)
09 02.10

Восприятие информации по горизонтали и вертикали

Почему мы воспринимаем информацию слева направо и сверху вниз (как говорят некоторые «буквой Z»)? Правильно, потому что мы так пишем. Так пишет добрая половина человечества, а создатели компьютеров «навязали» такой стиль и восточным народам (хотя те и сопротивляются). А почему мы так пишем? Да потому что писать справа налево неудобно так же как писать левшам слева направо. Мы же себе строчку рукой закрывать будем! «Лево-право, право-лево…» © Фунтик Т. е. вывод какой? Виновата физиология, а не мозги (у востока — наоборот). Посмотрим правде в глаза… человека: Если вы не знали, то глаза находятся на одной горизонтали и угол обзора по горизонтали больше, чем по вертикали. Соответственно в обзор попадает гораздо больше информации располагающейся по горизонтали, а не по вертикали. В силу опять-таки особенности физиологии человеческого глаза, мышцы двигающие глаза по горизонтали гораздо сильнее (или более развиты, не знаю как правильно), чем те, что двигают глаза по вертикали....

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (9)
25 08.09

Всемирная HTML 5 истерия

Я не знаю, об этом просто сейчас модно писать или народ действительно в восторге? На самом деле, я бы с удовольствием, присоединился к толпе ликующих, если бы событие произошло год назад, именно тогда я написал статью «HTML должен быть…». Чему всё-таки радуется человечество? Например, одна из самых распространённых тем в блогах, это новые тэги: header, footer, nav, article, aside, section и др. Очнитесь ребята! Эти тэги можно было использовать с тех пор как регламентировали стандарт xhtml! Все бразуеры, кроме IE воспринимали их как строчные элементы, а с помощью CSS их можно сделать блочными. Ну да, Internet Explorer… Но почему только когда официально консорциум объявил об отказе от XHTML 2.0 (кстати, я это пророчил), появился простой и понятный код, решающий эту проблему? document.createElement("header"); Это тоже работа группы WHATWG? Ах, да! Ещё и Firefox 2, в котором работают эти тэги, но только в режиме парсинга xhtml+xml. Это большая проблема, которая решилась...

Категории: ЖурналТэги: » Читать полностью » Комментарии (11)
16 08.09

Seleckis’ method vs Pixy’s method

Честное слово, пытался найти и убедить себя в том, что этот метод уже существует. Не нашёл. Исправьте меня если я не прав. Pixy’s method отображение картинок с надписями заключался в том, чтобы внутрь блока с текстом поместить пустой <span>, и вставить картинку как фон для этого span-а. Причём, для того чтобы текст показывался в случае если картинки отключены, необходимо span поместить поверх текста. В методе Pixy, для того чтобы <span> с картинкой налез на текст используется абсолютное позиционирование. В таких условиях кнопка не может находиться в строке, она может существовать только как блочный элемент. Почему? Потому что Firefox 2 не поддерживает свойство «display: inline-block». Для отображения блока в строке в Firefox-е используется проприетарное свойство «display: -moz-inline-box» или «display: -moz-inline-stack». Но в таком случае браузер не совсем адекватно позиционирует помещённые внутрь элементы. В частности некорректно работает абсолютное...

Категории: CSSТэги: » Читать полностью » Комментарии (9)
06 08.09

Min-width и max-width в IE6 с помощью expression

Уже писали много раз, просто приведу свой код. В JavaScript-файле размещаем такую функцию: function width(min,max){ w = document.documentElement.clientWidth; return (w = max) ? max + "px" : "auto"); } Функция всего лишь принимает значения максимальной и минимальной ширины, проверяет текущую ширину документа и возвращает значение: Если ширина документа меньше минимальной ширины, то возвращается минимальная ширина; Если ширина документа больше максимальной ширины, то возвращается максимальная ширина; Иначе ширина указывается автоматическая. Функция из CSS вызывается следующим образом: div { width: expression(width(600,1000)); /* далее для нормальных браузеров */ min-width: 600px; max-width: 1000px; } 600 и 1000 — минимальная и максимальная ширина. Поскольку expression работает только для IE, а min-width и max-width уже работают в IE7 и IE8, то этот CSS нужно изолировать и вынести в отдельный css-файл и подключить его с помощью...

Категории: Брaузеры | CSS | JavaScriptТэги: » Читать полностью » Комментарии (7)
31 07.09

«Резиновое» поле ввода в форме

Как известно у полей ввода ширина не может рассчитываться автоматически относительно контейнера, как это работает у блочных элементов. Значение ширины можно задать фиксированное, либо относительное. Есть сервисы в интернете с полями ввода (например, поиском) у которых ширина задана фиксированно. Соответственно, если шаблон сайта резиновый, то поле ввода растягиваться не будет. Как правило такие сайты имеют фиксированную вёрстку. К примеру, если вы зайдёте на «Yahoo Answers» и с помощью Firebug (Firefox), Web Inspector (Safari, Chrome) или Developer Tools (Opera, IE8) отключите у элемента <div id="y-ks-whole-page"> свойство «width: 750px;» в стилях, то сайт растянет на всю ширину, а поле поиска вопросов останется той же ширины. Конечно, кроме всего прочего, некоторые другие элементы останутся фиксированными, но мы говорим о полях ввода. И вспомним работу студии Артемия Лебедева, поисковик «Яндекс» и его страницу ya.ru — облегчённую версию поисковика или посмотрим на давно...

Категории: CSSТэги: » Читать полностью » Комментарии (23)
28 07.09

Элементы управления в веб-сервисах

В продолжение предыдущей статьи посвящённой организации навигации в социальных сетях, пройдусь по другим темам. Существуют следующие виды элементов управления в веб-проектах: Контент-ссылки Контролы Контент-ссылки — это те ссылки которые позволяют перейти на страницу с каким-либо содержимым. Они могут быть следующего вида: Ссылки Иконки Ссылки с иконками Кнопки Табы Навигационное меню Контролы — это те ссылки, которые подразумевают какие-либо действия: добавить, удалить, изменить, искать, отправить и т. д. Внешний вид может быть: Ссылки Иконки Ссылки с иконками Кнопки И кстати говоря, кнопки могут быть тоже разные: С текстом С иконкой С текстом и иконкой Иконка сверху Иконка слева Иконка справа Также контролы можно классифицировать по эмоциональному признаку: Позитивные Негативные Нейтральные Бонусы Их может быть и больше, но эти основные. Следующим примером иллюстрируются различия этих контролов по...

Категории: Веб‑дизайн | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (6)
17 03.09

Навигация веб-сервисов и социальных сетей

Меня удивляет непоследовательность разработчиков интерфейсов различных социальных сетей и веб-сервисов в организации навигации. Простая и понятная навигация встречается на очень редких сайтах. Это свидетельствует о том, что в разработке не участвуют специалисты по юзабилити, либо по каким-то техническим, экономическим, амибициозависимым соображениям их рекомендации не берутся во внимание. Конечно я допускаю мысль о том, что часто изначально разработчики сами не знают какие функции будут доступны в их детище. Разработка циклична и возможно некоторые функциональные особенности будут со временем убраны или реорганизованны. В любом случае в такого рода разработке нужен системный подход. В этой статье я расскажу, как я вижу сложную навигацию веб-сервиса (на примере социальной сети). Как правило, социальная сеть состоит из пользователей, и содержимого, которое эти пользователи создают. Поэтому мы можем представить их взаимоотношение такой схемой: Если раскрыть значение этих...

Категории: Исследования | Usability | Разработка сайтовТэги: » Читать полностью » Комментарии (5)
28 02.09

Строчная кнопка как кнопка submit

Требуется создать строчную кнопку submit неопределённой ширины с фоновой картинкой. Почему это нельзя сделать стандартными средствами? Т. е. мы конечно можем поместить на страницу кнопку и спокойно её использовать. Но нет, нам же этого мало. Нужно чтобы кнопочка была красивая, градиентная, с закруглёнными уголками. Стандартным способом мы можем указать фон для кнопки, добавить рамочку и в браузерах FF и Safari добавить закругления. Но проблема в том, что это во-первых не будет работать в IE и Opera, а во вторых, размеры кнопочек, положение текста и отступы везде будут разные. В FF2 вообще фон вылез за край закруглений. Можно попробовать поместить кнопку submit в элемент span, чтобы использовать метод Sliding Doors. В этом случае можно будет без проблем поставить в качестве фона картинки как для элемента «span», так и для элемента «input». Но к сожалению и этот способ не подойдёт, поскольку нет возможности адекватно выровнять текст по...

Категории: CSSТэги: » Читать полностью » Комментарии (16)