Главная

Html must die?

2012-05-09 в 16:09, admin, рубрики: html, веб-дизайн, Веб-разработка, метки: html

В последнее время на хабре частенько проскакивают статьи о том, что html сильно устарел и вообще он не тру. В качестве замены ему предлагается использовать для разметки подобие XML, при это главная проблема — смешивание кода шаблона с данными — не решается.

Посмотрим такой пример пользователя denver

<html>
<head>
    <meta http-equiv="refresh" content="0; url=http://www.site.com"> <!-- мгновенно редиректим на стандартный HTML для браузеров не поддерживающих HTML10 -->
</head>
<data template="/templates/mainpage.js">
    <!-- пошли данные, например в xml -->
    <posts>
        <post>
            <title>...</title>
            <text>...</text>
        </post>
        ...
    </posts>
    ...
</data>
</html>

Как видим, опять все смешанно. Т.е. получаем тот же HTML, только с XML разметкой. Как это можно решить? Идею решения этой проблемы я увидел в технологии WPF от microsoft, с той лишь разницей, что там она используется для разметки окна приложения. Как это можно применить для веба: у нас имеется два файла, один файл с шаблоном, второй файл с данными. Файл шаблона может иметь следующий вид:

<!-- Страничка начинаеться с обьявления главного тега Page -->
<Page language="ru" version="1.0" encoding="utf-8">
  <!--  Создаем главный элемент для размещения данных - Сетка 
        В ней мы задаем ширину и высоту главного элемента -->
  <Grid Width = "900px" Min-Height = "600px" Name = "body" Background="Green">
    <!-- Разбиваем страницу на блоки. 
          Как видим, страница разбита на 3 блока:
          - Верхний для заголовка, высотой 100 пикселей
          - Средний для тела высотой по содержимому
          - Нижний для подвала высотой 100 пикселей
    -->
    <Grid.Definitions>
      <Grid.Row Height="100px" />
      <Grid.Row Height="*" />
      <Grid.Row Height="100px" />
    </Grid.Definitions>

      <!--  Создаем элемент, в котором будут размещаться элементы заголовка
            Свойством Grid.Row="0" задаем ему нахождение в верхнем блоке
      -->
      <StackPanel Grid.Row="0" Name="header"  Orientation="Horizontal" >
        <Image Name="Logo" Width="100px" Heigth="100px" />
        <Label Name="UserName" Color="#FFAABB" />
      </StackPanel>

    <!-- Элемент для тела статьи -->
    <StackPanel Grid.Row="1" Name="article" Orientation="Vertical">
      <Label Name="Title" Color="Black" Size="20px" />
      <TextBlock Name="ArticleBody" Color="Black" Size="14px" />
    </StackPanel>

    <!-- Элемент для подвала -->
    <StackPanel Grid.Row="2" Name="footer" Orientation="Horizontal">
      <Label Name="About" Color="Grey" Size="10px" />
    </StackPanel>
  </Grid>
</Page>

Здесь мы создаем страничку, шириной 900 пикселей и разбиваем её на 3 блока. Элементы Grid и StackPanel представляют собой всего лишь слои: с фиксированным расположение элементов и плавающим. На первый взгляд, не удобно да и не очень понятно. Но поработав с WPF, я понял насколько удобна данная технология, позволяющая делать практически любые окна приложений по желанию. Как же будет тогда выглядеть файл с данными:

   Logo.src = "/logo.png";
   UserName.Text = "Habraman";
   Title.Text = "Заголовок статьи";
   ArticleBody.Text = "Тело статьи";
   ArticleBody.Color = "Red"; // Пример того, что и к другим свойствам элементов можно обращаться
   About.Text = "О нас";

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

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

<List Name="PopularList" Width="600px" Height="170px">
  <ItemTemplate>
    <Grid Width="100px" Height="150px">
      <Image src="Bind(productImage)" />
      <Label Text="Bind(productName)" />
      <Label Text="Bind(productPrice)" />
    </Grid>
  </ItemTemplate>
</List>

Что здесь произошло: мы создали элемент списка, и описали в нем шаблон для одного элемента. Теперь при задании ему в файле данных списка из этих элементом, данная конструкция сама создаст список, для связывание информации указывается имя с помощью Bind(). Как будет выглядеть файл с данными (задаем нашему списку массив элементов в формате JSON):

  PopularList.Items = 
{
  "Elements" : [
    {
      "productImage" : "1.png",
      "productName"  : "First product",
      "productPrice" : "123.45"
    }, 
    {
      "productImage" : "2.png",
      "productName"  : "google",
      "productPrice" : "100500"
    }, 
    {
      "productImage" : "3.png",
      "productName"  : "Лунопарк с блекджеком",
      "productPrice" : "infinite"
    }
  ]
}

P.S. Писал некоторым псевдокодом, так что, возможно, это не самый лучший вариант для разметки.

Автор: vyacheslav_ka