Архив рубрики "Мультимедийные елементы"

Другое мультимедийное содержимое

12 Январь 2009 | Автор: admin

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

Ссылки на аудио, видео и изображения
Вы ссылаетесь на любой внешний документ, независимо от его типа или формата, при помощи традиционной гиперссылки (якоря <a>):
<a href=»sounds/anthem.au»>Гимн Кумкватоводов</a> воодушевляющий на новые
трудовые подвиги тысячи кумкватоводов всего мира.

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

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

Броузеры опознают форматы и соответственно обращаются с мультимедийными файлами, пользуясь одной из двух подсказок – либо MIME типом (Multipurpose Internet Mail Extension), который указывает сервер, либо суффиксом в имени файла. Броузеры предпочитают MIME как более полное описание формата файла и его содержимого,
но могут догадаться о содержимом (о его типе и формате) по расширению: .gif или .jpg для GIF и JPEG носителей соответственно или .au для специальных аудиофайлов.

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

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

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

Рассмотрим для примера компанию, обширная маркетинговая документация которой подготовлена при помощи какого либо популярного средства макетирования, например Adobe Acrobat, FrameMaker, QuarkXPress или PageMaker, и хранится в соответствующем формате. Хотя конвертирование всех этих материалов в HTML или XHTML может оказаться слишком дорогостоящим, существует способ обеспечить распространение таких документов в сети.

Решение проблемы состоит в том, чтобы подготовить небольшое количество HTML или XHTML документов, которые содержат ссылки на эти файлы в альтернативных форматах и вызывают подходящий воспроизводящий эти документы апплет. Или же следует убедиться, что броузеры пользователей располагают нужными плагинами или сконфигурированы для вызова пригодных вспомогательных приложений. Adobe’s Acrobat Reader, например, является очень популярным плагином. Если документ подготовлен в формате Acrobat (.pdf) и выбрана ссылка на Acrobat документ, плагин запускается и соответственно отображает материал – зачастую прямо в окне броузера.

Анимация текста

7 Январь 2009 | Автор: admin

Тег <marquee>
Тег <marquee> определяет текст, который будет отображаться в бегущей строке окна. Тег <marquee> не является стандартным. Этого достаточно, чтобы мы не рекомендовали вам его употреблять.
Текст, заключенный между <marquee> и обязательным </marquee>, бежит в горизонтальном направлении через окно броузера. Атрибуты тега управляют областью отображения, внешним видом, выравниванием по отношению к окружающему тексту и скоростью бегущей строки. Тег <marquee> и его атрибуты игнорируются другими броузерами, но его содержимое не опускается. Оно выводится как статический текст
без учета выравнивания и прочих свойств, определенных атрибутами данного тега.

Атрибут align
Популярные броузеры размещают текст из тега <marquee> так же, как если бы это было вложенное изображение. Следовательно, можно выровнять бегущую строку по отношению к окружающему тексту.
Атрибут align принимает значения top, middle и bottom, устанавливающие, что определенная точка строки будет выровнена с соответствующей точкой в окружающем тексте. Таким образом:
<marquee align=top>
выравнивает верхний край области вывода текущей строки с верхним краем облегающего текста.

Атрибуты behaviour, direction, loop
Вместе эти атрибуты управляют стилем, направлением и продолжительностью отображения бегущей строки. Атрибут behaviour принимает три значения:
scroll (принимается по умолчанию)

Значение scroll заставляет бегущую строку вести себя подобно огромной бегущей строке на Times Square. Первоначально область ее размещения пуста. Текст начинает бежать от одного края (атрибут direction определяет от которого), добегает до противоположного
и затем исчезает. В конце концов, область текущей строки снова пуста.

slide

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

alternate

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

Если значение атрибута behaviour явно не указано, то по умолчанию он принимает значение scroll.
Атрибут direction устанавливает направление движения строки на экране. Допустимые значения – это left (принимается по умолчанию) или right. Заметьте, что начальный пункт движения находится на краю, противоположном значению direction. Значение left определяет, что текст начинает движение справа и перетекает налево. Помните
также, что текст, бегущий слева направо, противоречит интуиции людей, читающих слева направо. Атрибут loop определяет число «прогонов» строки. Если ему присвое
но целое значение, строка пробежит по экрану указанное число раз. Если атрибуту loop назначено значение infinite, строка будет пробегать раз за разом, пока пользователь не перейдет к другому документу.

Соберем несколько описанных атрибутов вместе:
<marquee align=center loop=infinite>
Кумкваты без начинки
………. Очень вкусно!
</marquee>

Сообщение из примера появляется у правого края (по умолчанию), пробегает, двигаясь налево, весь свой путь и пропадает из окна, затем появляется снова и снова, пока пользователь не перейдет к другому документу. Обратите внимание на промежуточные точки и пробелы в текст примера. Вы не можете присоединить одну бегущую строку к другой. Отметим также, что строка стиля slide неприятно дергается при повторениях и ее следует запускать лишь однажды, тогда как другим значениям behaviour повторение показано.

Атрибуты hspace и vspace
Атрибуты hspace и vspace позволяют оставлять некоторое расстояние между бегущей строкой и окружающим текстом, что делает ее более заметной.
Оба атрибута принимают целые значения, определяющие нужные расстояния в пикселах. Атрибут hspace оставляет промежутки над бегущей строкой и под ней. Атрибут vspace вводит их слева и справа от бегущей строки. Чтобы оставить промежутки в 10 пикселов со всех сторон бегущей строки, напишите:
<marquee vspace=10 hspace=10>

Альтернативная поддержка аудио

3 Январь 2009 | Автор: admin

Существуют другие способы вставить аудио в документы. Эти способы задействуют более общие механизмы, поддерживающие вложение и других мультимедийных элементов. Самая обычная альтернатива тегу – это тег , изначально введенный Netscape и вытесненный тегом в cтандартах HTML и XHTML.

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

Тег bgsound

1 Январь 2009 | Автор: admin

Используйте тег для фонового исполнения звуковой дорожки. Этот тег поддерживают только Internet Explorer и Opera. Все другие броузеры его игнорируют. Он загружает и запускает аудиофайл при загрузке содержащего его документа. Фоновое звуковое сопровождение будет возобновляться при обновлении отображаемого документа.

Звуковой фон

29 Декабрь 2008 | Автор: admin

Существует еще один мультимедийный элемент, как правило доступный веб серферам: это аудио. Большинство броузеров обращаются с аудио как с отдельными документами, которые исполняются специальными вспомогательными приложениями, апплетами или плагинами. Internet Explorer и Opera, кроме того, имеют встроенный звуковой декодер и поддерживают специальный тег (), позволяющий интегрировать аудиофайл с документом в качестве фонового звукового сопровождения страницы.

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

Дополнения и расширения тега body

27 Декабрь 2008 | Автор: admin

Атрибуты, управляющие фоном и полями документа, а также цветом
текста, используются с тегом <body>.

Атрибут bgcolor

Стандартный (но уже объявленный нежелательным) способ изменить принятый по умолчанию цвет фона состоит в использовании атрибута bgcolor для тега <body>. Как и для атрибута color тега <font>, обязательное значение bgcolor может быть выражено одним из двух способов – с помощью указания красного, зеленого и синего (RGB) компонентов выбранного цвета или его стандартного наименования. Приложение G
содержит RGB кодировки цветов вместе с таблицей наименований, которые следует применять в качестве значений атрибута bgcolor.

Установить цвет фона легко. Чтобы получить ярко красный фон, используя RGB кодировку, попробуйте написать:
<body bgcolor=»#FF0000″>
А более нежный фон, персикового цвета, так:
<body bgcolor=»peach»>

Атрибут background

Если однотонный фон вас не устраивает, то с помощью атрибута background тега <body> можно поместить на его место изображение.
<body background=»pics/wood_panel.gif»>

Обязательным значением атрибута background является URL изображения. Броузер автоматически повторяет (в виде мозаики) картинку по вертикали и по горизонтали, заполняя все окно.

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

Атрибут bgproperties

Популярные броузеры больше не поддерживают атрибут расширение bgproperties для тега <body>. Он работает только вместе с атрибутом background. Атрибут bgproperties имеет лишь одно значение, fixed. Оно «замораживает» фоновое изображение, которое перестает прокручиваться вместе с другим содержимым окна. И, следовательно, фоновое
изображение H2Omark.gif может служить для документа гербовой бумагой с водяными знаками:
<body background=»pics/H2Omark.gif» bgproperties=»fixed»>

Атрибуты style и class

Также можно устанавливать различные относящиеся к стилю свойства тела при помощи CSS. Но хотя для оформления всего содержимого тела можно включить атрибут style в тег <body>, мы рекомендуем устанавливать стили для всего тела на уровне документа (используя тег <style> в его заголовке) или на уровне собрания документов (применяя импортируемую таблицу стилей). Используйте атрибут class и его значение для применения характеристики заранее определенного класса стилей к содержимому тега <body>. (Поскольку в одном документе может быть только одно тело, зачем еще нужно название класса?)

Играя с цветами фона, вы также столкнетесь с множеством проблем.

• Выбранный цвет тешит ваш глаз, а пользователям кажется ужасным. Зачем же их раздражать, отменяя ту окраску фона, которую они сами установили для применения по умолчанию?
• В то время как вы, скажем, принадлежите к школе дизайнеров, твердо придерживающейся принципа «светлый текст на темном фоне», многим людям нравится также стиль «темный текст на светлом фоне», сохраняющий популярность последние три тысячи лет.
• Вместо того чтобы плыть против течения, допустите на минуту, что пользователи уже настроили свои броузеры на устраивающую их цветовую схему.
• Некоторые читатели – дальтоники, не различающие цветов. То, что будет прелестным красочным сочетанием для вас, может оказаться совершенно неразборчивым для них. Одну комбинацию следует особенно избегать: зеленый цвет для неиспользованных ссылок и красный – для тех, что уже были посещены. Миллионы людей не различают красный и зеленый.
• По тем же причинам активные, неиспользованные и использованные гиперссылки на дисплее с ограниченным набором цветов могут оказаться неразличимыми.
• Изменяя цвета текста, особенно в случае использованных и неиспользованных гиперссылок, вы можете совершенно запутать читателя. Достаточно сказать, что это эффективно стимулирует пользователей к экспериментам со страницей. Они будут щелкать на ссылках там и здесь, разучивая вашу цветовую схему.
• Большинство дизайнеров веб страниц не получили специального образования в области когнитивной психологии1, изящных искусств или промышленного дизайна, но чувствуют себя уверенно, подбирая цвета для документа. Если вам нужно принять цветовые
решения, обратитесь к профессионалу.

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

Проблемы с фоновыми изображениями

20 Декабрь 2008 | Автор: admin

Здесь перечислены некоторые неприятности, связанные с фоновыми изображениями.
• Время, необходимое на загрузку документа, увеличивается за счет загрузки фонового изображения, до завершения которой вывод документа не происходит.
• Фоновое изображение занимает место в локальном кэше броузера, порой выталкивая изображения, содержащие действительно полезную информацию. Это может увеличить время загрузки других документов, даже не включающих фоновой живописи.
• Цвета изображения оказываются иногда недоступными для дисплея пользователя, заставляя броузер «расщеплять» исходную палитру. В результате большие области, представленные в оригинале одним цветом, будут заполнены чередующимися слоями различной, хотя и близкой по цвету окраски. Документ, вероятно, будет труднее читать.
• Поскольку броузеру приходится постоянно перерисовывать фоновое изображение (а это совсем не то же самое, что заполнить область одним цветом), прокручивание документа может занимать значительно больше времени.
• Даже если все хорошо выглядит на дисплее, напечатанный поверх изображения текст всегда трудно, а бывает и невозможно прочитать.
• Шрифты на разных машинах могут сильно различаться. Те, что неплохо сочетаются с выбранным фоном на вашем броузере, поройнельзя будет прочитать на другом компьютере.

Видеорасширения

14 Декабрь 2008 | Автор: admin

Internet Explorer поддерживает специальные видеорасширения атрибута тега <img>, которые позволяют вам встраивать видеоролики в HTML документы. Это controls, dynsrc, loop, и start. Они не являются частью HTML 4 и вряд ли станут стандартными в XHTML. Пользователям приходится явно включать эту функциональность броузера Internet
Explorer флажком «Воспроизводить видео на веб страницах» на вкладке «Дополнительно».

Эквивалентное поведение других популярных броузеров достигается за счет программных расширений, известных как плагины (plug-ins). Плагины доставляют читателям лишние хлопоты: каждый пользователь должен раздобыть и установить подходящую программу, прежде чем сможет просматривать встроенное в страницу видео. Расширения тега <img>, которые принял Internet Explorer, напротив, делают видео собственной частью броузера.