css_v_transe's Journal
[Most Recent Entries]
[Calendar View]
[Friends]
Below are the 20 most recent journal entries recorded in
css_v_transe's LiveJournal:
[ << Previous 20 ]
| Wednesday, July 15th, 2009 | | 10:01 am |
UMADE: Внедрение шрифтов — EOT и @font-face
09:46 15.07.2009
Внедрение шрифтов — EOT и @font-face
Уже более декады веб-страницы ограничены так называемым безопасным для интернета набором шрифтов. Один из таких наборов был составлен компанией Microsoft ещё в 1996 году. Arial, Courier New, Georgia, Helvetica, Palatino, Times, Times New Roman, Lucida Sans, Trebuchet, Verdana и ещё несколько красавцев — это те шрифты, которые используются почти на всех страницах интернета. Но теперь, благодаря нарастающему прогрессу и стремлению разработчиков, этот список можно бесконечно расширять. Однако ещё предстоит найти ответы на ряд важных и принципиальных вопросов.
Пример внедрения шрифтов в форматах EOT и OTF.
EOT — Embedded OpenType
Технология Embedded OpenType (встраиваемый формат OpenType) появилась в 1997 году. То есть возможность полноценно использовать любой шрифт на сайте существовала все эти годы, начиная с Internet Explorer 4! Но монополия Microsoft препятствовала популяризации этой технологии. Также свою роль сыграл единственный на то время конкурент Internet Explorer — Netscape, который продвигал другую технологию внедрения шрифтов — TrueDoc.
Технология EOT сжимает и конвертирует шрифты форматов TrueType и OpenType (кроме OpenType PS) в формат EOT. Во время конвертации, в корневую строку (RootString) шрифта прописываются адреса сайтов (или локальные адреса), в рамках которых будет использоваться шрифт. Если адрес сайта не совпадёт с адресом в корневой строке, то шрифт отображаться не будет. Этот механизм защиты от нелегального использования зарекомендовал себя среди известных производителей шрифтов.
До недавнего времени одним из недостатков EOT являлось то, что конвертировать шрифт можно было только с помощью эксклюзивного инструмента от Майкрософта — WEFT (Web Embedding Fonts Tool), который работает только на операционных системах Windows. Вторым, менее значимым недостатком считались “Технические средства защиты авторских прав” — ТСЗАП, задача которых — препятствовать неправомерному копированию файлов.
Устранить эти недостатки удалось благодаря заявлению Microsoft сделать открытыми формат EOT и спецификацию MTX (MicroType Express).
Майкрософт проявила эту инициативу в начале 2008 года, и несколько месяцев спустя, в конце этого же года, было организованно небольшое собрание в W3C с предложением создать Рабочую группу по шрифтам (Fonts WG). На собрании присутствовали представители компаний Bitstream, Microsoft, Mozilla, Opera, W3C, Nokia, Monotype и Inventive Designers.
В ходе дискуссии был выдвинут альтернативный вариант — вместо того, чтобы создавать новый контейнер с так называемой “корневой строкой”, как это делает EOT, можно добавлять эту строку непосредственно в форматы TrueType и OpenType. Ещё один вариант — “закрывать” начальные 100 битов информации, что будет препятствовать использованию интернет-шрифта локально на компьютере.
Сторонники альтернативы считают, что эти действия устранят необходимость в XOR-закрытии, дублировании информации, и компрессии шрифта с помощью технологии MicroType Express. Даже прозвучало возможное расширение нового контейнера — TTW (TrueType-W). Недостаток возможной альтернативы — создание с нуля механизма работы предложенного формата. Но полагается, что для новых приложений, внедрить предложенную схему будет легче, чем внедрить уже существующий EOT.
Зачем вообще использовать EOT или TTW?
Ответ на этот вопрос достаточно очевиден — данные механизмы защищают шрифты от нелегального использования. Цена за лицензию на шрифт может достигать несколько сотен, а то и тысяч долларов. А период разработки только одного шрифта с поддержкой разных языков может достигать нескольких лет! Поэтому производители очень трепетно относятся к использованию своих шрифтов в интернете, так как при просмотре страницы шрифт скачивается локально на компьютер, и становится доступным.
CSS-правило @font-face
Начиная с Firefox 3.5, Google Chrome 2, Opera 10 и Safari 3.1 стало возможным использовать в этих браузерах CSS-правило @font-face. На данный момент эти браузеры обрабатывают любой шрифт форматов OTF и TTF без необходимости конвертации в защищённый формат EOT. Это существенное отличие от Internet Explorer, который поддерживает использование шрифтов только в формате EOT.
Пример внедрения и использования шрифта
/* только для Internet Explorer 4+ */
@font-face {
font-family: EuroSansProLig;
src: url(EuroSansProLig.eot);
}
/* далее для всех остальных браузеров */
@font-face {
font-family: Graublau Sans Web;
src: local("Graublau Sans Web"),
local("GraublauSansWeb"),
url(GraublauWeb.otf) format("opentype");
}
body {
font-family: Graublau Sans Web, EuroSansProLig,
Arial, sans-serif;
}
Пример внедрения шрифтов EOT и OTF — вышеприведённый код в действии.
В примере используется уже ставший популярным шрифт Graublau Sans Web (бесплатная версия полноценного шрифта Graublau Sans Pro). Из примерного списка разрешённых для внедрения шрифтов он единственный на данный момент поддерживает кириллицу. Этот шрифт формата OpenType PS, и WEFT не может конвертировать его в EOT. Поэтому специально для Internet Explorer я выбрал бесплатную версию шрифта Euro Sans Pro.
Свойство local проверяет наличие шрифта на компьютере пользователя, и если шрифт не обнаружен, то он подгружается с сервера. Свойство format указывает формат шрифта (”truetype”, “opentype”,”truetype-aat”, “embedded-opentype” и “svg”). Если шрифты Graublau Sans Web и Euro Sans Pro отсутствуют, то для body будет использоваться Arial или любой рубленый шрифт по умолчанию.
Правило @font-face разрешает использовать 8 различных стилей начертания для одного шрифта. По сути, если сайт использует 8 начертаний, то в CSS нужно прописать 8 правил. Поэтому, чтобы тексту параграфа присвоить полужирное начертание, необходимо указать отдельный файл шрифта соответствующего стиля.
Таким образом к предыдущему примеру добавляется следующий CSS:
/* только для Internet Explorer */
@font-face {
font-family: EuroSansProLigBold;
src: url(EuroSansProLigBold.eot);
}
/* далее для всех остальных браузеров */
@font-face {
font-family: Graublau Sans Web Bold;
src: local("Graublau Sans Web Bold"),
local("GraublauSansWebBold"),
url(GraublauWebBold.otf) format("opentype");
}
p {
font-family: Graublau Sans Web Bold, EuroSansProLigBold,
Arial, sans-serif;
font-weight: bold;
}
Отличную статью на тему использования @font-face опубликовал Джон Даггетт из Mozilla — beautiful fonts with @font-face (англ.). Там можно просмотреть различные примеры в действии.
Сколько «весит» подгружаемый шрифт?
Например, каждое из четырёх стандартных начертаний (нормальный, полужирный, полужирный курсив, курсив) всем известного шрифт Arial, весит от 500 до 800 килобайт. Если использовать на сайте все 4 стиля начертания, то получится более двух мегабайт. Очень приличный объём. Но это мелочи по сравнению с объёмом шрифта Arial Unicode MS — больше 20 мегабайт!
Я воспользовался инструментом WEFT и поэкспериментировал со шрифтом Arial нормального стиля начертания без разложения шрифта по каким-либо признакам. Исходный размер arial.ttf составляет 766 килобайт, а уже сформированный arial.eot стал весить 308 килобайт. Контейнер EOT сжал файл в 2,5 раза. Хороший результат. Для примера, максимальное ZIP-сжатие того же шрифта — 423 килобайта, RAR — 370 килобайт. Что касается gzip, то Владимир Левантовский из Monotype подметил, что “EOT-компрессия лучше компрессии gzip на 20-30% для западных шрифтов”.
Разложение шрифта (font subsetting)
Разложение позволяет разбить шрифт на заранее определённое количество знаков. Такой подход значительно уменьшает объём файла. Как показывает предыдущий пример кода, необходимо использовать разные файлы для каждого из начертаний шрифта. Это своего рода разложение по стилю. Есть также другие признаки. Например, разложение шрифта только по языковому набору знаков. Если заранее известно, что на странице будет использоваться только русский язык, то можно ограничить шрифт набором только кириллических знаков, что существенно сократит размер шрифта.
Ещё WEFT может анализировать страницы сайта, и при создании EOT-контейнера использовать лишь те знаки шрифта, которые находятся на анализируемой странице. Такой подход очень сильно сокращает размер шрифта. Пользоваться этим методом удобно в том случае, если заранее известно, что в будущем текст редактироваться не будет, иначе придётся заново обрабатывать шрифт. Например, если есть вероятность того, что в будущем текст страницы будет изменён, но язык текста останется русским, то лучше ограничивать шрифт кириллическим набором.
Оригинал всё того же шрифта arial.ttf (766 килобайт) после разложения на кириллицу с помощью WEFT стал весить 77 килобайт. Разница очевидна.
В большинстве случаев на российских сайтах одновременно используются кириллические и латинские наборы символов. Для это можно создать два разложенных на кириллицу и латиницу шрифтовых файла, и затем прописать два CSS-правила @font-face для каждого EOT-шрифта.
Есть ещё один, на мой взгляд самый удобный метод — правило @font-face в CSS3 позволяет использовать диапазон unicode. При разложении нет необходимости разбивать шрифт на несколько файлов. Вместо этого можно указать диапазон символов.
/* размер шрифта - размер: 4.5 мегабайт */
@font-face {
font-family: DroidSans;
src: url(DroidSansFallback.ttf);
/* диапазон не указван, по умолчанию полный набор знаков */
}
/* Латинские, кириллические и греческие пунктуация и символы - размер: 190 килобайт */
@font-face {
font-family: DroidSans;
src: url(DroidSans.ttf);
unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}
Лёд тронулся
На сегодняшний день все основные браузеры поддерживают внедрение и использование шрифтов на сайте. Идёт активное обсуждение возможных решений возникших задач. На мой взгляд необходимо решить три задачи: механизм лицензирования, метод сжатия и, естественно, сама технология внедрения. С каждой из этих задач уже справляется EOT. Но мнения пока расходятся.
По сей день спорят, что использование технологии от Майкрософта является политически некорректным, и что в ходе “войны браузеров” у компании появляются преимущества. Лично я полностью согласен с тем мнением, что оптимальным вариантом будет внести изменения и доработать EOT, который отдан в руки сообщества разработчиков. А уже потом можно работать над форматами TTF и OTF, чтобы в конечном итоге рынок сам определял, что для него лучше.
У Майкрософта твёрдая позиция — ради производителей шрифтов, компания хочет поддерживать и развивать EOT. Эту позицию также твёрдо поддерживает Adobe и одобряет Monotype — крупный производитель шрифтов. Однако сообщество разработчиков видит возможные пути внедрения специальных веб-таблиц в шрифты форматов OTF и TTF, что запрещает использование шрифта на компьютере, но разрешает его использование в интернете. Но пока это только разговоры.
Представитель Майкрософта Майк Чемпион (Mike Champion) заявил, что “внедрение оригинальных файлов наносит существенный ущерб независимой индустрии шрифтов”. Свои слова Майк подкрепил тем, что “в Microsoft на высоком уровне принято решение о том, что мы не будем использовать подобный метод внедрения шрифтов”.
В примере я использовал бесплатную версию шрифта Euro Sans Pro компании Linotype. Лицензия на этот шрифт разрешает использовать его в интернете, но только при услови, что этот шрифт не будет использоваться где-либо ещё. А на данный момент это означает EOT.
В любом случае, при желании использовать какой-либо шрифт, большинство официальных сайтов и крупных порталов будут приобретать соответствующие лицензии. Особенно на Западе им некуда деваться — позовут в суд. А для тех, кто не хочет платить сотни баксов за шрифт, есть возможность использовать бесплатные варианты. Благо, такие уже начинают появляться в интернете. Но действительно качественные работы — всё ещё очень большая редкость.
read more at Umade.ru | | Saturday, June 20th, 2009 | | 7:41 pm |
UMADE: CSS. Выравнивание картинки по центру
17:54 20.06.2009
CSS. Выравнивание картинки по центру
Уже давно существуют разные методы выравнивания картинок по центру с помощью CSS. На реализацию этих методов сильно влиял Internet Explorer 5. Но сегодня эта версия браузера мало кого интересует, поэтому можно избавиться от лишнего кода.
Раньше IE5 и IE5.5 диктовали свои правила — для того, чтобы выровнять элемент страницы по центру, необходимо использовать CSS-свойство text-align:center. И чтобы отцентровать, например, картинку, необходимо размещать её внутри дополнительного блока:
<p>Текст параграфа.</p>
<div class="imgCenter">
<img src="фото.gif" border="0" width="5" height="5" alt="" />
</div>
<p>Далее по тексту параграфа.</p>
Для этого дополнительного блока присваивается соответствующие CSS-свойство:
.imgCenter {text-align:center;}
Всё это было необходимо потому, что Internet Explorer пятых версий не поддерживает уже тогда существовавшее и поддерживаемое другими браузерами свойство внешних отступов auto, которое автоматически налету присваивает одинаковое расстояние слева и справа от выравниваемого элемента. Вышеприведённый способ всё ещё используется.
Но IE5 и IE5.5 уже в прошлом, поэтому HTML-код можно сделать проще и элегантнее:
<p>Текст параграфа. <img class="center" src="Фото.gif" border="0" width="5" height="5" alt="" /> Далее по тексту параграфа.</p>
Отсутствие ненужных дополнительных блоков достигается благодаря соответствующему CSS:
.center {display:block; margin:0 auto;}
Свойство display:block присваивает картинке характеристику блочного элемента, что избавляет от необходимости использовать <div> или <p> вокруг картинки. Далее декларация margin:0 auto присваивает верхнему и нижнему отступам нулевое значение, а левому и правому отступам — автоматически равнозначное значение, которое выравнивает картинку по центру.
Нужно присвоить разные отступы сверху и снизу? Без проблем. Не забываем про сокращения:
.imgCenter {display:block; margin:15px auto 25px;}
К сожалению, в отличие от случаев выравнивания картинок по левому и правому краям (float:left и float:right), нет возможности стандартными методами завёртывать текст вокруг отцентрованной картинки. Конечно, если это очень важно, то выполнимо.
Также, если картинка одновременно является ссылкой, то область ссылки распространяется на всю ширину блока, вне зависимости от ширины картинки. В некоторых случаях это недостаток.
Вышеописанный метод выравнивания больше всего подойдёт для сайтов, которые используют картинки внутри текста (новости, статьи). Для фотогалерей, конечно же, существуют свои, более изощрённые способы выравнивания картинок.
read more at Umade.ru | | Wednesday, June 17th, 2009 | | 7:00 am |
UMADE: Кнопка тоже ссылка. Или нет?
23:19 16.06.2009
Кнопка тоже ссылка. Или нет?
 Не секрет, что когда наводишь курсор мыши на ссылку в интернете, стрелка курсора меняется на указатель в виде руки. Это распространяется на текст, картинки и любые другие элементы страницы, которые представляют собой ссылку. Но почему указатель не меняется, если курсор мыши наводится на кнопку?
Лично я считаю кнопку ссылкой. Например Википедия пишет о гиперссылке следующее:
“Гиперссылка — часть электронного (гипертекстового) документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, директория, приложение), расположенный на локальном компьютере или в компьютерной сети, либо на элементы этого объекта.”
Submit button попадает под это определение. Как минимум это относиться к кнопкам поисковиков. Видимо такие гиганты как например Яндекс и Google с этим не согласны. Кнопки этих поисковых систем нажимаются миллионы раз в день. Но указательный пальчик не появляется.
Причём реализовать это проще простого. Например, добавляем к HTML-коду кнопки поиска класс search:
<input type="submit" value="Найти" class="search" />
И в CSS прописываем свойство этого класса:
.search {cursor: pointer;}
Кто-то может сказать, что «это всё мелочи». Но «юзабилити» не согласится.
Представляете, команда Google, выбирая между двумя вариантами синего, проводит тесты 41 оттенка этого цвета (англ.), чтобы определить более подходящий вариант для своих пользователей.
Кнопка заслуживает указателя 
read more at Umade.ru | | Monday, June 15th, 2009 | | 9:01 pm |
UMADE: Сеточный дизайн. Выравниваем сайт
12:30 12.06.2009
Сеточный дизайн. Выравниваем сайт
Во время вёрстки сайта довольно сложно уследить за точным расположением всех элементов дизайна. Различные размеры и отступы мешают определить заранее задуманные пропорции. Но благодаря сеточной разметке, можно с лёгкостью проверять точность расположения элементов и выравнивать их в соответствии с задуманным дизайном.
Чтобы увидеть о чём далее пойдёт речь, добавь значение ?grid=1 в конец любой внутренней ссылки этого сайта, например umade.ru/?grid=1. Появится сетка.
Как используется сетка?
Когда создаётся макет сайта, элементы дизайна должны располагаться задуманным образом. А так как у большинства сайтов колоночная структура, то необходимо соответственно выравнивать эти элементы. В этом помогает сетка с заранее определёнными размерами столбцов и строк. Задать эти размеры, и расчертить дизайн на вертикальные и горизонтальные линии не составляет труда для сегодняшних графических редакторов. Но как перенести созданную сетку в браузер?
После того, как макет сайта свёрстан, я всегда делаю небольшие корректировки через CSS — увеличиваю или уменьшаю отступы, изменяю размер шрифтов и так далее. Если изменения не влияют на общую задумку дизайна, то я не возвращаюсь к оригинальному макету в Photoshop. Не вижу в этом смысла. Но так как сетка с моими пропорциями осталась в Фотошопе, я не могу быть уверенным в том, что все корректировки, которые я делаю на свёрстанном сайте, не повлияют на эти самые пропорции.
Исходя из вышеизложенного, будет логично перенести сетку прямо на сайт. Благо, уже придумано много интересных способов, позволяющих в любой момент проверить пропорции разметки, и сделать соответствующие выравнивания.
Методы выравнивания прямо на сайте
Самым навороченным методом, на мой взгляд, является 960 Gridder (использует jQuery), поиграть с которым можно на странице Implemented Demo с помощью клавиш Ctrl+Alt+Z и Ctrl+Alt+X. При нажатии этих клавиш появляются горизонтальные и вертикальные строки.
Все современные мониторы поддерживают разрешение 1024 x 768, поэтому этот метод использует фиксированную ширину сетки 960 пикселей. Это очень удобное и универсальное значение, так как оно делится на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. При этом можно задать собственную ширину и изменять все параметры под свой дизайн.
Есть другой, менее навороченный метод, который также с помощью jQuery показывает сетку. Этот метод позволяет выравнивать только по столбцам. Автор метода советует использовать калькулятор величин Grid Calculator.
Самый простой способ, который уже давно используют на Западе — HTML-элементу body присваивается CSS-свойство background, в котором прописывается адрес картинки с вертикальной сеткой:
BODY {background: url(images/grid.gif) repeat-y;}
Данный код очень легко применить без необходимости использовать JavaScript. Более того, этот метод, на мой взгляд, является самым удобным — он не требует после каждой перезагрузки страницы нажимать определённое сочетание клавиш.
Выравнивание по горизонтальным линиям
Для большинства сайтов я не вижу смысла в том, чтобы выравнивать элементы по горизонтальным линиям. Сложно предсказать сколько будет на странице строк текста, какая высота будет у картинок и так далее. Если размеры всех элементов сайта заранее определены, то соответственно можно выравнивать как по вертикали, так и по горизонтали.
read more at Umade.ru | | Wednesday, June 10th, 2009 | | 3:42 am |
UMADE: HTML5, XHTML2 и будущее интернета
18:26 12.05.2007
HTML5, XHTML2 и будущее интернета
Работа веб-разработчика связана с уже давно устоявшимися технологиями — HTML 4.01 стал рекомендацией в 1999 году, XHTML 1.0 (переформулирование HTML 4 в XML 1.0) стал рекомендацией в 2000 году. Другими словами — фундаментом современной веб-разработки является восьмилетняя технология.
HTML 4.01 является хорошим фундаментом для веб-разработчиков, но этот фундамент может стать ещё крепче. За последние восемь лет произошло много изменений, повлиявших на то, как люди относятся и используют интернет. Мы, веб-разработчики, осознали недостатки HTML 4.01, и теперь знаем, какими способами можно улучшить этот язык разметки. Настаёт время технологий нового поколения, и они заслуживают внимания. Нововведения коснутся каждого, кто крутится в этом бизнесе.
Кандидаты
W3C давно работает над XHTML2, цель которого взять на себя роль HTML 4.01 и XHTML 1.0. Новый язык обновит или заменит существующие семантические элементы. Ко всему прочему он может считаться полностью новым языком. Это подтверждается тем, что XHTML2 обладает совершенно разными наборами правил (namespace).
HTML5 (его ещё называют Web Applications 1.0) — это технология, разработку которой ведёт WHATWG — открытое сообщество, основанное тремя из четырёх крупнейших разработчиков браузеров: Mozilla, Opera и Apple. Не надо рассматривать HTML5 в качестве замены для HTML 4.01 или XHTML 1.0. Для этой технологии больше всего подходит понятие эволюции технологий. Этот язык нацелен на обратную совместимость. HTML5 поможет избавиться от неопределённостей, присущих HTML 4.01.
Во время обработки страницы браузером (parsing), HTML5 предлагает обрабатывать все тэги определённым способом, чтобы не “поломать” страницу и правильно вывести её содержимое пользователю (даже если на странице есть ошибки). Также HTML5 добавляет чрезвычайно необходимые семантические элементы. Они помогают улучшить валидацию форм, добавляют интерактивные элементы и определяют постоянное место хранения данных.
Интернет и сегодняшний HTML
Формально, HTML 4.01 представляет собой документ в формате SGML, и единственные приложения, которые работают с HTML 4.01 в таком формате — это валидаторы. С другой стороны, браузеры всеми силами пытаются обработать даже сильно искаженную страницу и показать её пользователю в доступной форме.
Неприлично мало страниц интернета написаны на правильном HTML 4.01; большинство из них “поломаны” и неправильно структурированы, но браузерам всё равно приходиться обрабатывать страницы, иначе пользователь будет выбирать тот браузер, который правильно отображает его любимые сайты.
Очень важно при обработке исправлять ошибки, но каждый браузер делает это слегка по-своему. Все пытаются подражать своим большим конкурентам. Если одна и та же страница отображается одинаково в разных браузерах, это не означает, что также одинаково обрабатываются тэги и корректируются ошибки. HTML5 постарается однозначно определить процесс обработки интернет-страницы.
Также задачей HTML5 является то, чтобы установить правила в процессе обработки невалидных и неправильно структурированных сайтов. Это необходимо для того, чтобы разработчики браузеров смогли обеспечить полную совместимость.
Сегодняшний XML в интернете
Большинство сайтов в интернете, написанных на XHTML, выводятся в виде text/html. Другими словами, браузеры обрабатывают страницы в виде набора обычных тэгов, а не в виде XML.
Одна из причин такого подхода кроется в очень жёстком механизме обработки ошибок в XML. Процесс обработки XML-документа остановится на самой первой ошибке. Это означает, что страница будет полностью недоступна в том случае, если существует хотя бы одна ошибка. При этом XML покажет только детали ошибки, но не её содержимое.
Всегда есть риск допустить ошибку даже в правильно построенной и сформированной XML-странице. С этим часто можно столкнуться там, где нет контроля над качеством обработки различных кодировок. Часто ошибки возникают в тех местах, где посетители оставляют комментарии, или где контент появляется из внешних источников (обратная связь, рекламный сервис или какое-нибудь расширение к программе). Всё это часто приводит к появлению ошибок.
Проблемой для XML-страниц является Internet Explorer, который не поддерживает XHTML 1.0 (в виде “application/xhtml+xml”). Этот браузер поддерживает общий XML, но без набора правил XHTML. Он “не обучен” семантике XHTML-элементов, и он даже не распознаёт таблицу стилей, которая должна применяться по умолчанию. (Есть возможность использовать XSLT для трансформации документа в HTML, но DOM ведёт себя непредсказуемо в режиме XML и в режиме обычных тэгов. Это означает, что скрипты, работающие в одном режиме, могут полностью не работать в другом.)
XHTML 1.0 разрешает выдавать страницы в виде text/html, но при этом они должны быть обратно совместимы в соответствии с Аппендиксом C спецификации HTML. Это означает, что документы будут обрабатываться в обычном режиме тэгов, а не в режиме XML. (Есть возможность выдавать страницы в нужном виде для браузеров, которые не поддерживают XHTML должным образом, но при этом стоит учитывать те же недостатки, что и при трансформации документов, используя XSLT на стороне клиента.)
Internet Explorer не поддерживает XHTML в виде XML. Также не все инструменты веб-разработчика совместимы с XML. Всё это снижает стимул использовать XML в интернете. Плюс к этому поисковые системы не индексируют XHTML в виде XML-страниц; очень мало инструментов для работы с XML; очень мало CMS или блоггерских инструментов, корректно поддерживающих XML на протяжении всего пути — от ввода информации в базу данных до генерации информации; и очень мало рекламодателей поддерживают XML.
Появится небольшой стимул, если использовать MathML, SVG и другие XML-приложения в XHTML-страницах, но так поступает очень малая часть разработчиков.
XHTML2 — это XML
А теперь самая большая проблема. Помимо всех сложностей, с которыми сталкиваются разработчики во время работы с XML, XHTML2 добавляет ещё один уровень сложности. Ведь это не просто переформулированный HTML 4.01. XHTML2 — это другой, но похожий язык, в котором изменена семантика для очень многих элементов. Изменения направлены в нужное русло, но во время разработки XHTML2 не учитывалось мнение самих веб-разработчиков. Не адресованы проблемы и недостатки HTML 4.01 и XHTML 1.0 в областях согласования действий, локального хранения данных, или взаимодействия скриптов.
На данный момент XHTML2 является рабочим проектом. Часть этого проекта оставалась без изменений годами, поэтому этот язык всё ещё нестабилен, и плохо поддерживается четырьмя важнейшими направлениями: браузеры, поисковые системы, системы по управлению содержанием и инструменты для разработки. Ни один из крупных разработчиков браузеров не поддерживает XHTML2.
Мачей Стаховьяк (Maciej Stachowiak) из компании Apple сделал следующее заявление:
“Мы отказались принимать участие в рабочей группе XHTML2, так как мы не считаем, что технология XHTML2 подходит для интернета.”
Web Applications 1.0 нечто большее чем HTML5
Спецификация Web Applications 1.0 (WA1) призвана обновить HTML и XHTML 1.0 (со сбивающим с толку названием XHTML5), а также HTML DOM под названием DOM5 HTML.
Поскольку HTML 4.01 формально основан на SGML, то HTML5 позволяет браузерам использовать парсеры, которые автоматически корректируют ошибки. При этом HTML5 определяет SGML-модель, которая включает в себя коррекцию ошибок. (Обработка XHTML5 производиться XML-парсером, и осуществляется по правилам XML, а не по правилам HTML5.)
WA1 также определяет несколько программных интерфейсов (API), которые фактически являются стандартами. В том месте, где XHTML2 делает XHTML улучшенным семантическим языком для описания документа, WA1 проделывает более скромную работу, но при этом улучшает возможность создавать интернет-приложения. WA1 добавляет возможность хранить данные (о последнем действии веб-приложения) в истории браузера, сохранять информацию локально, возможность автономного просмотра; перетаскивать (drag and drop), копировать (copy and paste), повторять и отменять действия (under and redo) и т.д.
В отличие от XHTML2, который никак не поддерживается браузерами, HTML5 поддерживается всеми крупными разработчиками, кроме Майкрософта.
Спецификация ещё не закончена, но находится на стадии завершения — многие её части уже реализованы. Например, элемент canvas, который поддерживается Mozilla, Safari и Opera, и который использовался во многих демонстрациях современной функциональности.
W3C и HTML
W3C создали новую Рабочую Группу HTML, отдельно от группы, работающей над XHTML2. Рабочая группа HTML публично открыта через механизм приглашения экспертов. Будущее покажет, как это связано с работой других групп W3C. Председателями станут Крис Уилсон (Chris Wilson) — архитектор Internet Explorer в Microsoft, и Дэн Коннолли (Dan Connolly) из W3C.
W3C уже приспособила много технологий (созданных WHATWG) через Rich Web Clients Activity для того, чтобы улучшить пользовательскую сторону интернета. Новая рабочая группа по HTML зависит как минимум от одной группы в этой области разработки — рабочей группы WebAPI.
Связь с внешними группами, которые входят в рабочую группу HTML, позволяет предположить, что новая рабочая группа попытается использовать спецификацию HTML5 в виде фундамента для обновления HTML и XHTML (или использовать то, что WHATWG вложила в HTML5).
Что лучше для веб-разработчиков?
XHTML2
Поддержка браузеров — ключевой вопрос для веб-разработчиков. Internet Explorer не поддерживает технологии XHTML должным образом, и у него появляются большие проблемы, когда XHTML обрабатывается в виде XML (проблемы с кодировками, с внешним источником информации, с обработкой содержания в виде цепочки). Это мешает использовать XML. Будет нелегко превращать страницу из форматов HTML 4.01 и XHTML в страницу формата XHTML2. Для этого необходимо изменить структуру документа. Самое критическое — ни один из крупных разработчиков браузеров не поддерживает XHTML2.
HTML5
В большинстве случаев, чтобы из формата HTML 4.01 получить формат HTML5, необходимо просто заменить декларацию DOCTYPE. Браузер обработает страницу обычным методом в том случае, если документ не использует новый API или элементы, которые относятся к HTML5. Для большинства систем по управлению содержанием и для инструментов разработки, сгенерировать HTML5 вместо HTML 4.01 будет проще простого. Пропадают преграды для возможностей HTML5. Уже можно эмулировать с помощью JavaScript много новых возможностей HTML5, которые не поддерживаются тем или иным браузером. Это позволит постепенно перейти от HTML 4.01 к HTML5.
Заключение
XHTML2 является семантическим улучшением технологии XHTML 1.0. Но похоже, что это не будет волновать веб-разработчиков ещё долгое время, особенно учитывая тот факт, что Internet Explorer до сих пор не поддерживает XHTML 1.0 в виде XML. Пройдут года перед тем, как появится поддержка XHTML2.
С другой стороны, уже поддерживаются много аспектов HTML5, и если Microsoft будет принимать активное участие в разработке HTML5, то пройдёт гораздо меньше времени перед тем, как мы увидим всестороннюю поддержку HTML5.
HTML5 — это будущее интернета, поэтому мой совет — пристально следить за развитием этой технологии.
— перевод статьи: umade.ru | оргинал на английском.
read more at Umade.ru | | Monday, June 8th, 2009 | | 4:01 pm |
| | 4:01 pm |
| | 4:01 pm |
| | 4:01 pm |
| | 4:01 pm |
| | 4:01 pm |
| | 4:01 pm |
UMADE: CSS. Распечатываем со стилем
23:20 25.03.2006
CSS. Распечатываем со стилем
Часто на интернет-страницах встречаются ссылки с текстом “версия для печати“. Это словосочетание говорит само за себя — такие ссылки ведут на страницы с идентичным содержанием изначального материала оригинальной страницы, но только предназначены они для того, чтобы распечатать содержимое. Существует более оптимальный вариант распечатывать страницы с интернета — использовать CSS, который отлично справляется с выводом страниц сайта на печать. (more…)
read more at Umade.ru | | 4:01 pm |
| | 4:01 pm |
| | 4:01 pm |
| | Saturday, June 6th, 2009 | | 11:41 pm |
Stopdesign: A Deep Breath
20:38 01.06.2009
A Deep Breath
You’re encouraging the random and random is how you’re going to win. Random is how you’re going to discover a path through a problem that no one else has found and that starts with breathing deeply.
Even though the subject matter and approach differs, this pairs nicely with an article on A List Apart last week: Burnout, by Scott Boms.
Your life should be just that—a life
Good words, all around.
-archive link- 
read more at Stopdesign | | Saturday, May 30th, 2009 | | 5:42 am |
Stopdesign: Introducing Typekit
20:42 28.05.2009
Introducing Typekit
Emphasis is my own…
As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.
Also worth checking out, Jeff posted a preview of the Typekit home page yesterday. Looking forward to how this will change typography and design for the web.
-archive link- 
read more at Stopdesign | | Thursday, May 21st, 2009 | | 9:01 pm |
Stopdesign: Universal Internet Explorer 6 CSS
06:00 21.05.2009
Universal Internet Explorer 6 CSS
Mr. Clarke advocates creating one single universal style sheet to handle all styling in IE6, and to stop worrying about making content in IE6 look anything like the high-end experience.
I'm now advocating to my clients (and to you), that where feasible, not to waste hours in time and a client's money on lengthy workarounds in an unnecessary attempt at cross-browser perfection. Instead, you and I should provide simple but effectively designed HTML elements. This means just great typography for headings, paragraphs, quotations, lists, tables and forms and no styling of layout.
This will work well for content-focused web sites. And then maybe it's officially time to completely drop support of IE6 for web apps.
-archive link- 
read more at Stopdesign | | Wednesday, May 20th, 2009 | | 6:44 am |
Stopdesign: Welcome, Wired. We call this land “Internet”
23:00 19.05.2009
Welcome, Wired. We call this land “Internet”
Interesting take on the future of Wired (mag vs. website).
Wired is great print, but if the magazine can’t make money and is shuttered, taking the website down with it, I’m going to be livid. Not that making money online is easy—it’s not, especially without sacrificing your ethics and your voice—but if any mainstream outlet should be able to make the transition, it should be Wired.
I fear that may be impossible, not just for Wired but for all these old brands, because they can’t accept that the work at which they have excelled for years will be just as important when it’s online—and online only.
Reading though the comments provides an even more interesting story and a broader perspective. Comments by several former and current Wiredlings, including a few responses by Chris Anderson who passes blame to corporate (Conde Nast) decision-making.
-archive link- 
read more at Stopdesign | | Monday, May 18th, 2009 | | 3:01 am |
|
[ << Previous 20 ]
|
![[info]](http://l-stat.livejournal.com/img/userinfo.gif?v=92.1){kind=small}
css_v_transe's journal