Paradigm.ru » html http://paradigm.ru Блог Александра Мусаева Wed, 23 Nov 2011 19:10:35 +0000 en hourly 1 «Резиновость» в рамках разумного http://paradigm.ru/max-width-for-ie http://paradigm.ru/max-width-for-ie#comments Thu, 27 Dec 2007 22:10:08 +0000 admin http://www.paradigm.ru/2007/12/28/max-width-for-ie/ Как известно, для определения минимального и максимального значения размеров «резиновых» блоков в (X)HTML, предусмотрены свойства CSS max-width и max-height. Все браузеры уже года полтора правильно их интерпретируют. Кроме IE, разработчики которого по каким-то умным маркетинговым причинам клали болт на многие детали стандартов.

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

Раньше я решал этот вопрос с помощью JavaScript: небольшая функция автоматически корректировала ширину «резиновых» контейнеров при изменении размера окна браузера. Вчера был найден довольно более красивый способ заставить IE ограничивать масштабируемые блоки. Тоже на основе JS.

В имлементации CSS IE есть своя-собственная конструкция — expression, чье значение может вычисляться с помощью client-side скрипта. Например, так:

div {
   width: expression(750 + "px");
}

Что эквивалентно:

div {
   width: 750px;
}

Используя expression в сочетании со стандартными свойствами CSS, можно добиться необходимого эффекта в отношении масштабируемых блоков:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Limiting width</title>
<style type="text/css">
div#cont { 
// min-width и max-width для IE
   width:expression(document.body.clientWidth > 776 ? 
      "777px" : (document.body.clientWidth < 334 ? "333px" : "auto"));
// то же, для всех остальных
   max-width: 777px;
   min-width: 333px;

   height:320px;
   text-align:center;
   color:black;
   background:#f5f5f5;
}
</style>
</head>

<body>

<div id="cont">Hello World!</div>

</body>
</html>

Файл лежит здесь: http://things.paradigm.ru/limited-width.html. Я проверил работоспособность этого кода в IE 5.55, 6, 7, Firefox и Opera. Теоретически, должно работать и в IE 5.01, т.к. expression появился именно в ней, но проверить не начем — эта версия на моем компьютере почему-то не уживается с пятью другими инсталяциями IE (:

Точно таким же образом, как и ширину, можно контролировать высоту блоков. Разница в том, что вместо параметра document.body.clientWidth, потребуется использовать this.scrollHeight, а изменять, вместо width, CSS свойство height.

Основано на материалах perishablepress.com.

]]> http://paradigm.ru/max-width-for-ie/feed 4 Идентификация «тела» http://paradigm.ru/using-id-with-body http://paradigm.ru/using-id-with-body#comments Sat, 22 Dec 2007 22:48:18 +0000 admin http://www.paradigm.ru/2007/12/23/using-id-with-body/ В статье рассматриваются примеры использования атрибута id тега body для оформления специфических элементов веб-страниц.

Автор: Chris Coyier, css-tricks.com Оригинал: http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/ Перевод: Александр Мусаев, paradigm.ru

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

  • Для страницы контактов можно определить отдельный CSS файл. Это не идеальный вариант, влекущий за собой дополнительную работу. При необходимости внести любое изменение в таблицу стилей, понадобится каждый раз редактировать два отдельных файла.
  • Для всех ссылок на странице контактов можно задать отдельный класс. Способ так же не идеален, по причине своей избыточности и противоречия семантическому подходу (почему у всех ссылок на одной странице сайта класс определен, в то время как на всех остальных — нет, при том, что никакой логической разницы между ними не наблюдается?).
  • Лучший вариант решения — задать уникальный идентификатор элементу body на нужной странице. Это наиболее грамотное решение задачи, при котором можно использовать один единственный список стилей, ограничившись добавлением в него всего одного селектора.

Реализация

Во-первых, зададим значение тага id для тега body нужной страницы:

   ...
</head>



<body id="contact-page">
   ...

Во-вторых, добавим новый селектор в CSS файл, определив в нем альтернативный цвет для всех ссылок внутри контейнера body с заданным идентификатором:

a {
color: blue;
}



body#contact-page a {
   color: red;
}

Как еще можно использовать этот метод? Описанная техника может быть не менее полезной при оформлении навигационных элементов. Рассмотрим конкретный пример:

На скриншоте закладка «Forums» выделена как активная. По всей видимости это реализовано изменением в ее CSS оформлении (например, сдвигом фонового изображения). HTML код может выглядеть так:

...
<li><a href="/fieldtips">Field tips</a></li>
<li class="active"><a href="/forums">Forums</a></li>
...

В данном случае, нужное изменение в стиле задается в описании класса «active», который определен для соответствующего элемента списка. Но что произойдет, когда мы перейдем на другую страницу? Понадобится перенести определитель класса на соответствующий элемент списка, что не очень удобно, т.к. требует уникальности кода навигационного блока на каждой странице. А если понадобится добавить в список еще один элемент, это потребует еще большей работы. Так не годится.

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

<?php include_once("nav.html"); ?>

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

   ...
</head>



<body id="field-tips">
   ...
   <li class="fieldtips"><a href="/fieldtips">Field tips</a></li>
   <li class="forums"><a href="/forums">Forums</a></li>
   ...

Теперь мы имеем возможность определять специфику оформления активного элемента с помощью CSS:

#field-tips li.fieldtips, #forums li.forums {
   background-position: bottom;
}

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

Еще немного облегчить себе жизнь можно автоматизировав идентификацию тега body:

<body id="<?= basename($_SERVER['PHP_SELF'], ".php")?>">

Теперь id на каждой странице не придется прописывать вручную. Его значение будет соответствовать имени соответствующего файла (например, index для index.php).

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

<?php



function generate_nav($menu_items, $active_page = false) {
    if(!is_array($menu_items) || !count($menu_items)) {
        exit();
    }



$html = '';

foreach($menu_items as $lnk =&gt; $ttl) {
    $a = ($active === $lnk)?' class="active"':'';
    $html .= '&lt;li'.$a.'&gt;&lt;a href="'.$lnk.'"&gt;'.$ttl.'&lt;/a&gt;&lt;/li&gt;';
}

return'&lt;ul&gt;'.$html.'&lt;/ul&gt;';




}



$menu = array(
        'contact' => 'Contact',
        'design' => 'Design to fit',
        'fields' => 'Fields tips',
        'forums' => 'Forums',
        'store' => 'Store'
    );



$active = basename($_SERVER['PHP_SELF'], ".php");



echo generate_nav($menu_items, $active_page);



?>

(в примере предполагается, что каждой странице соответствует файл с аналогичным именем и расширением .php)

Но это решение использует принципиально другой подход, не относящийся к теме статьи. Ценность приведенного в ней решения в помощью CSS заключается в том, что такой вариант пригоден для использования на хостинге, где PHP или другие серверные средства генерации динамического контента отсутствуют. Кстати в последнем случае вставку навигационного блока с помощью PHP кода можно было бы заменить на SSI директиву:

<!--#include virtual=”hav.html” -->

]]> http://paradigm.ru/using-id-with-body/feed 0 XRAY: HTML-штангельциркуль http://paradigm.ru/xray http://paradigm.ru/xray#comments Fri, 14 Dec 2007 21:55:38 +0000 admin http://www.paradigm.ru/2007/12/15/xray/ Пиксельная линейка — довольно полезный инструмент, используемый при «отладке» кода веб-страниц. С ее помощью можно проверять размеры различных блоков, правильность их позиционирования и другие подобные детали. На свете существует множество реализаций этого средства, как в виде встроенной фичи специализированных редакторов, так и в виде stand-alone утилиты. В качестве примера первого варианта можно привести Dreamweaver, о котором шла речь в одном из недавних постов. Что же касается отдельных программ — ни одна из них сейчас не приходит на ум. У меня на компьютере когда-то была установлена «линейка», но давным-давно потерялась из-за общей склонности к этому всех мелких программ (особенно под Windows, когда раз в год-два возникает необходимость профилактической переустановки ОС и всего софта заодно). Найти линейку снова — несложно (и гугл в помощь тем, кто захочет это сделать), но сейчас я бы хотел рассказать об одной более удобной и гораздо более функциональной альтернативе, которую нашел на прошлой неделе.

Она называется XRAY и представляет собой букмарклет, который может демонстрировать разную полезную информацию о всех «внутренностях» страницы. В частности, размеры всех элементов, координаты их расположения, CSS-свойства, названия HTML тагов, соответствующих отображаемым блокам, и некоторые другие детали. Для того, чтобы увидеть все эти данные в специальном окошке, достаточно нажать на букмарклет и кликом отметить интересующий элемент.

Ниже приведен скриншот главной страницы paradigm.ru в «просвеченном» виде:

Удобство заключается в том, что реализация выполнена на JavaScript, и для получения возможности пользоваться такой штукой нет необходимости устанавливать какие-либо программы или расширения для браузера (последнее бывает крайне неудобно, когда рабочих мест больше одного). Понадобится просто перетащить ссылку с сайта XRAY на панель браузера с линками. Не стану копировать ее в этот пост, т.к. возможны модификации скрипта и наиболее свежую версию лучше брать на домашней странице.

По заявлению разработчиков, букмарклет дружит со всеми распространенными браузерами (Internet Explorer 6+, Safari, Firefox, Camino и Mozilla).

Ссылки на тему:

]]> http://paradigm.ru/xray/feed 3 Первый взгляд на HTML 5 http://paradigm.ru/html5-preview http://paradigm.ru/html5-preview#comments Mon, 10 Dec 2007 02:50:18 +0000 admin http://www.paradigm.ru/2007/12/10/html5-preview/ Preamble

В статье рассматриваются новые интересные возможности, которые предоставит пятая версия стандарта HTML. Приводится несколько примеров кода с применением новых тегов, а так же поясняются понятия HTML- и XML-сериализации с описанием преимуществ применения каждой из них.

Вводная «лирическая» часть текста сокращена, т.к. она во многом пересекается с ранее опубликованным обзорным постом об HTML 5, в котором был приведен фрагмент интервью того же автора.

Автор: Лахлан Хант, http://lachy.id.au
Оригинал: http://www.alistapart.com/articles/previewofhtml5
Перевод: Александр Мусаев, http://paradigm.ru

Введение

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

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

Структура

HTML 5 предоставляет множество новых элементов, благодаря которым структурирование веб-документов будет существенно упрощено. Множество страниц, основанных на HTML 4, содержали в себе типичные структурные фрагменты, таких как заголовок, колонки текста, нижний колонтитул и т.д. На сегодняшний день обычным решением считается определение этих блоков с помощью контейнеров div с указанием для каждого из них имени соответствующего класса или уникального идентификатора.

На иллюстрации приведена типовая разметка страницы с двумя колонками, сделанная с помощью контейнеров div с атрибутами class и id. В ней содержится «шапка», горизонтальный блок навигационных элементов, блок для основного текста страницы, вспомогательная колонка справа от него и нижний колонтитул.

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

Контейнеры div заменяются в нашем примере новыми элементами: header, nav, section, article, aside, и footer. HTML-код при этом принимает следующий вид:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

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

В следующем примере совместно используются контейнеры section и h1:

<h1>Level 1</h1>
<section>
  <h1>Level 2</h1>
  <section>
    <h1>Level 3</h1>
  </section>
</section>

Обратите внимание, что для лучшей совместимости с существующими браузерами, помимо h1 так же возможно использование заголовков других уровней (h2-h6).

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

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

<header>
  <h1>A Preview of HTML 5</h1>
  <p class="byline">By Lachlan Hunt</p>
</header>

<header>
  <h1>Example Blog</h1>
  <h3>Insert tag line here.</h3>
</header>

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

<footer>© 2007 Example Inc.</footer>

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

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Контейнер aside используется для вспомогательных материалов, например, для определения дополнительных колонок с второстепенным текстом (сайдбаров).

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/2007/09/">September 2007</a></li>
    <li><a href="/2007/08/">August 2007</a></li>
    <li><a href="/2007/07/">July 2007</a></li>
  </ul>
</aside>

Элемент section интерпретируется как секция общего назначения. Такой секцией может быть, например, параграф.

<section>
<h1>Chapter 1: The Period</h1>
<p>It was the best of times, it was the worst of times,
   it was the age of wisdom, it was the age of foolishness,
   it was the epoch of belief, it was the epoch of incredulity,
   it was the season of Light, it was the season of Darkness,
   ...</p>
</section>

(в примере приведена выдержка из «Повести о двух городах» Чарльза Диккенса)

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

<article id="comment-2">
  <header>
    <h4><a href="#comment-2" rel="bookmark">Comment #2</a>
        by <a href="http://example.com/">Jack O'Niell</a></h4>
    <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
  </header>
  <p>That's another great article!</p>
</article>

Аудио- и видеоматериалы

В последние годы аудиозаписи и видеоролики получили широкое распространение в интернете благодаря многочисленным сервисам, облегчающим их публикацию (YouTube, Google Video, MySpace, etc.). Из-за недостатка встроенных возможностей HTML, большинство сайтов, размещающих подобный контент, используют Flash, в качестве вспомогательного средства. Выбор этой технологии обычно обоснован тем, что Flash на данный момент имеет наиболее широкую поддержку среди браузеров, по-сравнению с альтернативными технологиями, с помощью которых можно было бы обеспечить воспроизведение мультимедиа-контента (QuickTime, Windows Media).

Огромное количество мультимедиа-плееров, написанных на Flash, является подтверждением того, что разработчики чаще всего предпочитают самостоятельно формировать их интерфейс, не смотря на то, что в большинстве случаев пользователям предоставляется одна и та же функциональность (воспроизведение, пауза, перемотка и управление громкостью). Планируется, что в будущем эти функции будут поддерживаться самими браузерами, что обеспечит базовую возможность для встраивания аудио- и видеозаписей в веб-страницы, а так же возможность управлять этими элементами через DOM API.

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

У Opera и WebKit уже есть релизы с частичной поддержкой тега video. Уже сейчас можно загрузить экспериментальную версию браузера Opera или последнюю еженочную сборку WebKit для демонстрации работы приведенных ниже примеров кода. Opera имеет поддержку Ogg Theora, а WebKit понимает все форматы, что и QuickTime, включая кодеки сторонних разработчиков.

Самый простой способ вставки видеозаписи в веб-страницу состоит в применении контейнера video, как показано на следующем примере. Атрибут controls предназначен для определения того, нужно ли будет отобразить интерфейс стандартного медиаплеера или нет (в нашем случае элементы управления воспроизведением будут отображены).

<video src="video.ogv" controls poster="poster.jpg" 
   width="320" height="240">

   <a href="video.ogv">Download movie</a>

</video>

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

Точно таким же образом можно встраивать в документы аудиозаписи с помощью элемента audio. Большинство атрибутов у тегов audio и video совпадают, но у audio по понятным причинам отсутствуют width, height и poster.

<audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
</audio>

В стандарте HTML 5 предусмотрен элемент source для вставки ссылок на аудио- и видеофайлы в нескольких альтернативных форматах, из которых браузер сможет делать выбор наиболее предпочтительного варианта, на основе поддерживаемых им кодеков и указанных в коде типов формата контента. При использовании вложенных тегов source, атрибут src контейнеров audio и video должен быть опущен, в противном же случае, теги source будут проигнорированы.

<video poster="poster.jpg">
    <source src="video.3gp" type="video/3gpp" 
       media="handheld">
    <source src="video.ogv" type="video/ogg"
       codecs="theora, vorbis">
    <source src="video.mp4" type="video/mp4">
</video>

<audio>
  <source src="music.oga" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>

Для разработчиков, которые сами желают контролировать функционирование пользовательского интерфейса и обеспечивать лучшее его соответствие общему дизайну страниц, предоставлен специальный API, через который можно управлять процессом воспроизведения. В этом API определены методы play() и pause() (смысл которых понятен из названия), а так же свойство currentTime, которое в следующем примере используется для «перемотки» видеозаписи в начало.

<video src="video.ogg" id="video"></video>

<script>
  var video = document.getElementById("video");
</script>

<p>
   <button type="button" onclick="video.play();">Play</button>
   <button type="button" onclick="video.pause();">Pause</button>
   <button type="button" onclick="video.currentTime = 0;">
      << Rewind</button>
</p>

(похожий пример на opera.com)

Существует множество других атрибутов и функций API, помимо перечисленных в данной статье. Их подробное описание можно найти в актуальной на данный момент рабочей версии спецификации.

Представление документов

В отличии от предыдущих версий HTML и XHTML, описанных в терминах их собственного синтаксиса, HTML 5 описывается согласно терминам Document Object Model (DOM). Для внутреннего представления документа браузером используется древовидная структура.

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

Такое дерево содержит в себе элемент title в контейнере head, а так же h1 и p в body.

Основная причина (и преимущество) выбора DOM для определения стандарта HTML 5 состоит в том, что сам язык в таком случае может быть описан независимо от синтаксиса. Существуют два основных типа синтаксиса, согласно которым может быть представлен HTML документ: HTML-сериализация (так же известная как HTML 5) и XML-сериализация (или XHTML 5).

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

<!DOCTYPE html>
<html>
  <head>
    <title>An HTML Document</title>
  </head>

  <body>
    <h1>Example</h1>
    <p>This is an example HTML document.
  </body>
</html>

Как и в предыдущих версиях HTML, некоторые теги остаются опциональными, и их наличие автоматически подразумевается.

XML-сериализация использует XML 1.0 и пространства имен, так же как и XHTML 1.0.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>An HTML Document</title>
  </head>

  <body>
    <h1>Example</h1>
    <p>This is an example HTML document.</p>
  </body>
</html>

В отличие от предыдущего примера, здесь присутствует атрибут xmlns, а так же закрывающий тег p (чье наличие в контексте XML обязательно).

Для определения разницы между сериализациями, браузеры будут использовать значение MIME-типа. Любой документ, определенный как text/html, должен соответствовать требованиям HTML-сериализации. В случае же если MIME-тип имеет значение application/xhtml+xml, должны быть удовлетворены требования XML-сериализации.

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

Преимущества использования HTML-сериализации:

  • Обратная совместимость.
  • Хорошо знакомый синтаксис по предыдущим версиям стандарта HTML.
  • «Мягкие» синтаксические правила, которые прощают мелкие ошибки. Благодаря этому, пользователи с меньшей вероятностью смогут увидеть сообщение от браузера о невозможности отображения документа (даже если ошибки в нем действительно присутствуют).
  • Удобный, лаконичный синтаксис, в котором можно опускать некоторые теги и значения ряда атрибутов.

Примечание переводчика: многие из перечисленных преимуществ так же являются и недостатками. В частности, снижение жесткости синтаксических правил автоматически провоцирует порождение небрежного, «грязного» кода.

Преимущества применения XHTML-сериализации:

  • Жесткие синтаксические правила XML заставляют писать более качественную разметку, что часто облегчает дальнейшую работу с контентом.
  • Интеграция с другими основанными на XML стандартами (например, SVG и MathML).
  • Совместимость со стандартными средствами обработки XML (часто применяется при обработке и публикации материалов).

Содействие развитию стандарта

Не смотря на то, что работа над HTML 5 идет семимильными шагами, до ее завершения остается еще немалое количество времени (по сегодняшним оценкам потребуется еще 10-15 лет). В течении этого времени, отзывы со стороны веб-дизайнеров, разработчиков CMS и браузеров, а так же иных специалистов, остаются крайне актуальными для успешного развития проекта. Инициатива всех желающих внести свой вклад в развитие HTML 5 не только приветствуется, но и активно поощряется.

Вспомогательные материалы и ссылки по теме:

Обсуждение на Хабре: http://habrahabr.ru/blog/webdev/32158.html.

]]> http://paradigm.ru/html5-preview/feed 7 HTML5: о том, как это может быть http://paradigm.ru/what-is-html5 http://paradigm.ru/what-is-html5#comments Thu, 29 Nov 2007 20:51:29 +0000 admin http://www.paradigm.ru/2007/11/29/what-is-html5/ Когда я в первый раз услышал о пятой версии HTML, первое, что пришло в голову, — это первоапрельская шутка. В тот раз, прочитав краткий список новых возможностей языка разметки, я действительно решил, что это байка и не стал искать дополнительных опровержений ее существования. Как выяснилось, напрасно. Новая версия стандарта действительно существует, хотя и в черновом варианте. Ее разработка была инициирована группой WHATWG (Web Hypertext Application Technology Working Group), а через некоторое время поддержана подразделением W3C — HTML WG.

В HTML5 появится немалое количество новых возможностей, например, встроенные средства для более эффективного создания интерсактивных веб-приложений, интеграции мультимедийного контента, etc. В принципе, это хорошо и правильно, тем не менее, само существование и развитие этого стандарта порождает вопросы относительно его позиционирования. Для чего нужно возрождать HTML, когда уже много лет W3C рекомендует переход на XHTML, а в перспективе — на еще более суровый стандарт XHTML2? На фоне этих рекомендаций, логика которых вполне понятна, HTML5 кажется шагом назад, не смотря на нововведения в его функциональности.

Я нашел интервью одного из инсайдеров WHATWG, где затрагивается эта тема. Ниже приведен перевод ответов на некоторые наиболее интересные вопросы оттуда, в которых Lachlan Hunt говорит об HTML5 и предназначении этого стандарта.

[Q] …Итак, что же представляет собой HTML5? [A] HTML5 представляет собой новое поколение стандарта HTML, над которым сейчас ведется разработка в WHATWG. Это попытка документировать и стандартизировать многие возможности HTML и DOM, которые уже давно и активно применяются разработчиками, но при этом имеют очень слабое описание в HTML4 а в более ранних версиях стандарта — вообще не присутствуют. Кроме того, HTML5 предлагает нововведения, разработанные для удовлетворения актуальных на сегодняшний день нужд разработчиков. [Q] Как HTML5 уживется с XHTML2? Найдется ли применение им обоим? Спецификация XHTML2 находилась в закрытой разработке, начиная с 2001-2002 годов, и рассчитывалась для замены стандарта HTML. Тем не менее, сейчас в ней имеются серьезные недостатки, кроме того качество этой спецификации оставляет желать лучшего. В ней изначально не предполагалась обратная совместимость и был определен ряд новых возможностей, которые будет либо невозможно, либо крайне трудно реализовать в наиболее распространенных на сегодняшний день браузерах. Многие из нас так же видели двусмысленность и недостатки в описаниях некоторых деталей, что могло сделать их совместимость недостижимой. В итоге, мы скорее всего так никогда и не увидим имплементацию XHTML2 в основных браузерах. W3C принял решение продолжить работу над спецификацией XHTML2 в рамках отдельной группы, но смысл этого шага остался понятен тогда очень немногим. Для разъяснения ситуации была опубликована статья «Architectural vision for HTML/XHTML2/Forms Chartering». Если разработка XHTML2 когда-нибудь завершится, скорее всего применение этого стандарта будет ограничено внутренними корпоративными сетями, где разработчики имеют больше возможностей влиять на выбор аппаратного и программного обеспечения на клиентских машинах. В то же время HTML5 ориентирован на использование в глобальной сети. Таким образом, HTML5 и XHTML2 могут существовать одновременно, будучи ориентированы на разные рынки, но, с моей точки зрения, существование XHTML2 необязательно. [Q] Что такое WHATWG и какова его роль? Некое подобие подпольной группы сопротивления, состоящей из злобных гиков? [A] В 2004 году Apple, Mozilla и Opera обеспокоились пренебрежительным отношением W3C к стандарту HTML, а заодно и к нуждам разработчиков. Эти компании противостояли инициативе W3C полностью перейти на XML и оставить HTML в прошлом. На сегодняшний день, WHATWG — растущее сообщество производителей браузеров, веб-разработчиков и других людей, заинтересованных в создании нового поколения HTML и сопутствующих технологий, целенаправленно ориентированных на разработку и внедрение приложений для WWW. Если бы не было WHATWG, мы до сих пор оставались бы в прошлом 10-летней давности. Прямым результатом их деятельности является открытие в W3C специальной группы для продолжения работы над HTML5. В отличии от иных рабочих групп W3C, она открыта для всех желающих принять участие. На момент написания этих строк, на рассылку WHATWG подписаны более 700 человек, и еще 300 учувствуют в W3C HTML WG. Среди них есть представители четырех главных разработчиков браузеров — Mozilla, Opera, Safari и IE, а так же множество веб-программистов, дизайнеров и других заинтересованных лиц.

Такие дела. Не могу сказать, что подписываюсь под высказываниями LH, т.к. смысл в переходе от HTML к XHTML все же есть (и смысл немалый), но констатация ряда фактов в этом интервью наводит на некоторые размышления.

В любом случае, каких-то революционных изменений не произойдет. HTML5 — это скорее смена направления развития. На wiki WHATWG сказано, что стандарт выйдет (внимание!) не ранее 2022 года (: А если учесть, что в оценке сроков разработчики обычно выдают слишком оптимистичные значения, так и вовсе можно расслабиться. Такие сроки делают цель проекта призрачной и аморфной. За это время слишком многое может измениться, и не исключено, что появится какой-нибудь XHTML3 с исправленными недочетами второй версии. Посмотрим.

Ссылки по теме:

]]> http://paradigm.ru/what-is-html5/feed 2