logo search
Проектирование инт-прил / лекции / Проектирование инет приложений

Основы верстки: позиционирование участков сайта

  • HTML5

    Как уже указывалось выше, последнего стандарта - HTML5 - в законченном виде не существует до сих пор. Кроме того, каждая особенность должна быть поддержена браузером. Разумеется, не Вашим браузером, а установленным на компьютере пользователя Вашего приложения. Однако из этого не следует, что HTML5 нельзя применять. HTML5 - это не одно большое "нечто", которое "вот-вот придет в сеть". Это - набор технологий, наличие каждой из которых можно проверить на клиентской стороне перед ее использованием. Можно сделать это вручную, создав соответствующий объект и проверив существование его свойств (например, используя JavaScript). А можно использовать готовые библиотеки. Следующий пример демонстрирует определение canvas с использованием библиотеки Modernizr:

    if (Modernizr.canvas) { // Можно что-нибудь рисовать! } else { // Увы, нет встроенной поддержки рисования }

    CANVAS - холст - это одна из технологий HTML5. Это объект, предоставляющий программистам основу для создания растрового двухмерного изображения. Существование этого элемента в HTML5 позволяет писать, например, полноценные Web-игры, используя только браузер, без необходимости применения сторонних компонент типа Adobe Flash.

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

    • Встроенная работа с видео- и аудио- потоками, возможность работы с различными кодеками, APIдля управления потоками.

    • Кэш на стороне клиента, дающий возможность работы с приложением даже в режиме офф-лайн.

    • Геолокация

    • Фоновые вычисления (создание самостоятельно выполняющихся web-потоков).

    HTML5 имеет только один тип документа:

    <!DOCTYPE html>

        1. XML

    XML - Extensible Markup Language - "расширяемый язык разметки". СпецификацияXMLописывает только структуру документа, да и то практически все описываемые элементы обязательными не являются. Можно утверждать, чтоXMLявляется совершенно свободным языком. Точно так же, как и в языкеHTML, существуют тэги. Однако вHTMLнабор тэгов строго определен, а вXMLтэг может быть любым. Важно только, чтобы значение тэга однозначно понималось обеими сторонами: и сервером, и клиентом. СуществованиеXMLобусловлено необходимостью передачи по сети в текстовом виде любых объектов (а не только документов). При этом передаются имена полей, их значения, атрибуты, комментарии и вся прочая информация, необходимая для полного восстановления объекта на принимающей стороне. И, что важно, для передачи объекта может использоваться уже существующая инфраструктура интернета (каналы связи,Web-сервера,URL/URI, служба распознавания именDNSи так далее).

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

    <?xmlversion="1.1"encoding="UTF-8">

    <gingerbread_man>

    <!-- Свойства колобка -->

    <properties>

    <property name="diametr" value="0.15" unit="meters">Диаметр</property>

    <property name="color" value="yellow">Цвет</property>

    <property name="weight" value="0.1" unit="kilogramm">Вес</property>

    </properties>

    <!-- Путь, который он прошел и который еще (может быть) пройдет -->

    <path>

    <step name="away_from_grandfather" completed="true">От дедушки ушел</step>

    <step name="away_from_grandmother" completed="true">От бабушки ушел</step>

    <step name="away_from_granddaughter" completed="false">От внучки ушел</step>

    <!-- Описание дальнейших возможных шагов колобка -->

    </path>

    </gingerbread_man >

        1. JSON

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

    Попробуем колобка из предыдущего раздела описать в формате JSON:

    {

    "gingerbread_man" : {

    "properties" : {

    { "diametr" : 0.15, "color" : "yellow", "weigth": 0.1},

    },

    "path" : {

    { "name" : "away_from_grandfather", "completed": "true"},

    { "name" : "away_from_grandmother", "completed": "true"},

    { "name" : "away_from_granddaughter", "completed" : "false" }

    },

    }

    }