Блог

Графика в 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". Получив же контекст рисования, можно начинать создавать графику.

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

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

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

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

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

  • Для чего нужен редизайн сайта

    Редизайн сайта – это комплекс мероприятий, направленных на обновление ресурса, в результате которых он получает актуальное оформление. Обновление может коснуться сайта любой компании, даже всемирно известной, так как быстро меняющаяся жизнь заставляет шагать в ногу со временем.

  • Внедряем coin-slider на страницу сайта на HostCMS v.6

    Coin-slider один из популярных слайдеров, который используется на сайтах. Чаще всего слайдеры используют на Главной странице, для придания ей динамики, привлечения внимания к «горячей» информации. В этой статье рассказывается, как внедрить этот слайдер XSL-шаблон сайта, разработанного на HostCMS.

  • Ключевые Элементы ясного и понятного сайта без “мусора”

    В процессе создания и развития своего бренда неизбежным становится обязательное и качественное присутствие в Интернете с аккуратно оформленной веб страницей без “мусорного” кода. Назначение такой страницы заключается в привлечении внимания целевой аудитории и сохранения уже существующих клиентов.

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

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

  • Создаем удобный сайт

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

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

WEB ДИЗАЙН

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

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

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

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

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

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

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

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