Блог

Графика в HTML 4.01 и HTML 5: сравнительный анализ


В этой статье мы последовательно рассмотрим различия двух версий html, в особенности их возможности в области дизайна изображений.

1. HTML 4.01

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

Прежде всего, HTML 4.01 работает с таким тегом, как всем известный IMG. Он позволяет размещать в вебе изображения, хранящиеся в самостоятельных отдельных файлах. В этом теге поддерживаются такие форматы изображений, как GIF, JPEG, BMP, PNG.

Код здесь выглядит так: img src= «image.jpg»

Главное достоинство IMG — это простота. Изображение вставляется в веб страницу посредством одного простого тега. Однако есть у него и недостатки.

Здесь поддерживаются всего три формата графики, поскольку упомянутый BMP поддерживает только Internet Explorer, а реально этот формат практически не используется.

Графические объекты, которые помещаются на веб-страницах посредством IMG, статичны, их нельзя дорабатывать, дорисовывать и т.п.

С развитием и разработкой HTML появились средства, помогающие преодолеть недостатки тега IMG. Такими средствами стали теги EMBED и OBJECT, с помощью которых можно поместить на странице файлы любого формата. Здесь можно использовать для их обработки и представления на экране различные программы, работающие вместе с браузером — элементы ActiveX, а также модули расширения.

Достоинства кодов этих тегов таковы:

— С их помощью можно выводить на страницу графику практически любого существующего сегодня формата: Adobe PDF или Adobe Shockwave/Flash и проч. В принципе, тут есть только одно требование к системе – она должна содержать модуль расширения, но это может быть же элемент ActiveX с поддержкой данного формата данных.

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

Также много неудобств связано с тем, что изображение, как правило, хранится в отдельном файле; даже чтобы просто увидеть картинку, созданную с помощью модуля расширения или элемента ActiveX, пользователь должен иметь их на своем компьютере. Также есть и проблема с веб-браузерами: они поддерживают и не поддерживают эти программы по-разному. К примеру, программы с ActiveX поддерживает единственно Internet Explorer. Идеальным было бы решение, позволяющее и выводить на экран изображения, содержащиеся в отдельных файлах, и работать непосредственно с графикой, используя различные программы, причем последние должны быть встроены в сам веб-браузер, чтобы не привлекать дополнительные программы.

2.HTML 5

Язык программирования HTML 5 и поддерживающие его браузеры способны выполнить задачи, поставленные выше:

— Графика помещается на веб-страницу с помощью одного простого тега.

— Также есть возможность вставлять картинку, находящуюся в самостоятельном файле.

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

— Нет необходимости в дополнительных программах – браузер уже содержит все необходимые элементы.

Тем не менее, и у HTML 5 есть недостатки. К примеру, вся без исключения графика создается программно, посредством веб-сценариев. А если нужно просто вставить изображение, находящееся в постороннем файле, удобнее воспользоваться знакомым тегом IMG.

Тег CANVAS

Необходимо помнить, что графика в HTML 5 выводится только если помещена в определенном месте страницы. Это место называют «канва», или «холст». За пределами такой канвы никакую графику разместить невозможно. Канва задаётся на сайте с помощью тега CANVAS. Код выглядит так:

<CANVAS ID="CAN1"></CANVAS>

Канва должна всегда иметь имя, для чего используется атрибут ID, который поддерживают практически все теги. Значением этого атрибута как раз и является имя канвы. Кроме того, тег CANVAS, в свою очередь, поддерживает пару весьма полезных атрибута: Атрибут HEIGHT — это пиксельная высота канвы. По умолчанию же высота канвы всегда равняется 150 пикселям. Атрибут WIDTH —пиксельная ширина канвы. По умолчанию — 300 пикселей.

Код таков:

<CANVAS ID="CAN1" WIDTH="400" HEIGHT="300"></CANVAS>

Контекст рисунка

Абсолютно все виды графики создаются на канве с помощбю программ посредством веб-сценариев, что означает создание загрузочного веб-сценария или обработчика события. Далее в нем пишутся теги и коды, которые и нарисуют картинку.

Набор необходимых для рисования на канве инструментов содержится в так называемом контексте рисования – объекте CanvasRenderingContext2D. Чтобы заполучить объект CanvasRenderingContext2D — контекст рисования канвы – нужно вызвать метод getContext объекта HTMLCanvasElement. Его единственным новым параметром станет строка », а результатом ее введения — контекст рисования. Строка «2d», параметр, передаваемый методу getContext, указывает на то, что задается двухмерный контекст рисования. Это единственный вид контекста рисования, который поддерживают веб-браузеры на сегодняшний день. Возможно, в будущем веб-браузеры будут поддерживать и рисование в 3D…

Коды такие: var oCan1 = document.getElementById("can1") var ctx1 = oCan1.getContext("2d"). Здесь веб-сценарий получает объект HTMLCanvasElement, он представляет канву "can1", и вставляет ее в переменную "Can1". Затем, получив контекст рисования —CanvasRenderingContext2D — веб-сценарий присваивает этот контекст переменной "ctx1". Получив же контекст рисования, можно начинать создавать графику.

Примитивы и координаты

Графика на канве представляется набором простых геометрических фигур, называемых примитивами. Это такие формы, как прямоугольники, прямые и кривые, рисунки, взятые из других самостоятельных файлов, и проч. Примитивы иногда состоят из нескольких частей – они называются сегментами. Чтобы нарисовать какой-нибудь примитив, требуется написать координаты, которые укажут его положение на канве. Координаты отсчитывают, начиная от левого верхнего угла канвы; проще говоря, система координат канвы начинается в этом месте. Все координаты на канве задаются в пикселях.

Вас может заинтересовать:

  • Мелкие "полезности" при работе с XSL

    Заметка для тех, кто начинает работать с языком XSL. Небольшие хитрости, которые моут быть полезны при написании сайтов.

    Подробную информацию о языке XSL можно узнать в онлайн учебнике на сайте w3schools.com...

  • Анимация на сайте и в рассылках

    Если вы заметили, в последнее время все чаще стали применять на сайтах и в почтовых рассылках анимационные элементы в формате gif - совмещенные фрагментов фильмов и статичные элементы, воспроизводящиеся в непрерывной последовательности, что получается вполне симпатично и привлекательно...

  • Вы можете разработать индивидуальный дизайн сайта без верстки?

    Да, мы можем разработать дизайн интернет-сайта, предоставив вам файлы в формате. psd. Отдельно без верстки сайта стоимость данной услуги составит от 13 000 руб.
    Заказать дизайн вы можете в нашей веб студии

  • Как правильно подобрать изображение для вебсайта

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

  • Красный цвет в дизайне сайтов

    Вы неравнодушны к красному цвету? Тогда эта статья для вас. Смотрите и комментируйте.

  • Используем готовые шаблоны для сайтов

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

Наши услуги по созданию сайтов

WEB ДИЗАЙН

Разработка дизайна сайта. Использование шаблонов для "быстрых" проектов.

ПОДДЕРЖКА САЙТА

Поддержка работоспособности и безопасности. Написание текстов и статей. Наполнение товаром.

ПРОДАЖА ГОТОВЫХ РЕШЕНИЙ

Готовые интернет-магазины и интеграционные решения для сайтов на HostCMS

ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ

Графический дизайн (разработка логотипа). Написание seo-текстов. Редизайн сайта. Замена CMS. Кодинг

Подробный ПРАЙС-ЛИСТ