Составление кроссплатформенного лабораторного практикума

 

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

 

Другой популярный эффект, достижимый с помощью GIF-изображений (точнее, изображений  в формате GIF89а), – это возможность  сделать некоторую их часть прозрачной, так что подкладка, находящаяся внизу (обычно фон окна браузера), будет сквозь нее проступать. Прозрачное GIF-изображение выделяет один из цветов в своей палитре, назначая его для окраски фона. Браузер просто игнорирует всякий пиксель, употребляющий этот цвет, позволяя таким образом фону окна проступать сквозь рисунок. Тщательно подрезав края изображения и выбрав сплошной монотонный фон, можно достичь впечатления, что картинка вписывается в страницу без скачков и видимых швов или плывет над ней.

 

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

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

 

Недостатком прозрачных изображений может быть их ужасный вид, когда они окружены прямоугольной рамкой, как, например, бывает при включении их в якорь гиперссылки (тег a), если рамка не удалена явным предписанием. Поток текста также будет «обтекать» прямоугольные границы рисунка, а не его видимые очертания. Результат может выглядеть как «очень одинокое изображение», висящее в пустоте.

 

Третья замечательная  «примочка», реализуемая с помощью изображений в формате GIF89а, – это простая мультипликация. Используя специальную утилиту для GIF-анимации, можно приготовить отдельный GIF89а-файл, содержащий последовательность картинок. Броузер отображает картинки, хранящиеся в файле, одну за другой, создавая эффект, подобный возникающему при быстром перелистывании анимационного буклета, какой у нас был или который мы даже рисовали сами в детстве. Специальные управляющие сегменты между отдельными картинками в GIF-файле позволяют устанавливать число прокруток всей последовательности, продолжительность паузы перед появлением очередного образа, указывать, нужно ли стирать предыдущую картинку (обнажая фон) перед появлением следующей, и тому подобное. Комбинируя эти средства управления с теми, что применяются к обычным GIF-изображениям, включая индивидуальные палит-ры, прозрачность и эффект всплывания, можно создавать очень привлекательные и сложные мультики.

 

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

 

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

 

Формат JPEG

Joint Photographic Experts Group (JPEG) –  это организация по стандартизации, разработавшая то, что теперь называется JPEG-форматом кодировки изображений. Подобно GIF-форматам, JPEG-изображения являются платформно-независимыми и специально сжатыми для скоростной передачи посредством цифровых коммуникационных технологий. В отличие от GIF, формат JPEG поддерживает десятки тысяч цветов для отображения более детальных, фотореалистических изображений. При этом JPEG использует специальные алгоритмы, обеспечивающие значительно больший коэффициент сжатия. Нередко удается, например, 200-килобайтное GIF-изображение сократить до

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

 

Хотя для фотографий JPEG подходит великолепно, он не особенно хорош для иллюстраций. Алгоритмы, используемые при сжатии и восстановлении изображений, оставляют заметные следы на больших пространствах, заполненных одним цветом. Следовательно, если вы

хотите отобразить рисунок, формат GIF может оказаться предпочтительнее.

 

Формат JPEG, обычно обозначаемый расширением .jpg (или .JPG), распознается почти всеми современными графическими броузерами. Изредка встречаются старые браузеры, которые не могут сами воспроизводить JPEG-изображения.

 

Формат PNG

Технология PNG (Portable Network Graphics, переносимая сетевая графика) была создана в качестве замены GIF, но не из-за того, что GIF плохо справлялся со своими обязанностями. В действительности GIF был и остается самым востребованным форматом в Интернете. Многие пользователи были возмущены, когда в 1993 году, после того как GIF приобрел популярность и широкое распространение, компания Unisys решила зарегистрировать свои авторские права и собирать дань за использование технологии сжатия GIF. Эта акция противоречила философии свободного обмена информацией, которой придерживалось тогдашнее сообщество пользователей Интернета, состоявшее, в основном, из научных работников. Она подтолкнула неформальную группу, возглавляемую Томасом Бутеллом (Thomas Boutell), к разработке альтернативы, а именно PNG.

 

Преимущества технологии PNG над GIF и JPEG (помимо того, что она  предоставляет формат, пользователи которого не рискуют оказаться ответчиками в суде) заключаются в более широком выборе цветовых форматов (24-битовый RGB, шкала оттенков серого и 8-битовая GIF-подобная палитра) и в меньших потерях при сжатии. Уникальными и весьма привлекательными чертами технологии PNG являются альфа-каналы, позволяющие указывать огромное количество слоев прозрачности (более 65 тыс. против одного слоя в GIF) и способные симулировать трехмерные изображения; гамма-коррекция, управляющая

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

 

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

Когда следует использовать изображения

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

 

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

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

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

Видео является одной  из важнейших функций, появившихся  в формате HTML 5. Видео в www уже давно не новость, но тем не менее возможности HTML 5 дают доступ к видеоизображению прямо с web-страниц, что было недостижимо в рамках предыдущих сборок языка  HTML.

 

Глава 2 РЕАЛИЗАЦИЯ ЛАБАРАТОРНЫХ РАБОТ ПО ДИСЦИПЛИНЕ «КОМПЬЮТЕРНЫЕ СЕТИ, ИНТЕРНЕТ И МУЛЬТИМЕДИЙНЫЕ ТЕХНОЛОГИИ» С ПРИМЕНЕНИЕМ СТАНДАРТА HTML5

§2.1 ВЫБОР КРОССПЛАТФОРМЕННОГО ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ

Главными критериями послужили:

1. Простота использования
• Удобный интерфейс;
• Подсветка текста;
• Бесплатно распространяемый;
2. Возможность дополнения
• Подключение дополнительных плагинов;

Были рассмотрены следующие  программы для работы с синтаксисом HTML 5. Bluefish, jEdit, Komodo Edit и Adobe Dreamweaver/

Выбор был сделан на jEdit — это бесплатный, распространяемый под свободной лицензией, текстовый редактор для динамических языков программирования. Он отлично подходит для работы разработчиков, пишущих на различных скриптовых языках. Также редактор поддерживает русский язык. В нем поддерживаются все основные функции, такие как вкладки и подсветка синтаксиса, для более чем 130 языков программирования. Имеется огромное количество расширенных функций, таких как собственный браузер FTP и мощный макроязык.

§2.2 УСТАНОВКА ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ

Дистрибутив доступен на сайте разработчика. Там присутствует как бесплатная, так и платная версии программ. Разница только в функционале.

Дополнительно потребуется  установка Java, в чем тоже нет особых проблем.

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

§2.3 ЛАБОРАТОРНЫЙ ПРАКТИКУМ

Лабораторная  работа №1:

Создание простейшей web-страницы.

Цель работы: Знакомство учащихся с общими положениями создания WEB-страниц и базовыми тегами языка HTML

Теоретическая часть:

HTML — это теговый  язык разметки документов. Элементы  — это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег — это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/". Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.

Базисные теги

Тип документа <HTML></HTML> Начало и конец файла арибуты

 

Имя документа <TITLE></TITLE> Должно быть в заголовке 

Заголовок <HEAD></HEAD> Описание документа 

Тело <BODY></BODY> Содержимое    страницы 

Оформление тела Веб-страницы

Атрибут  Действие  Значения атрибута

BACKGROUND="URL" Фоновая картинка *.jpg, *.gif, .png. графический   файл расположен в одной папке с вашим документом

BGCOLOR="цвет " - Цвет фона; 

TEXT=”color” - Цвет текста; 

LEFTMARGIN="40" - Определяет ширину левого и правого полей документа;

MARGINWIDTH="40" - Определяет ширину верхнего и нижнего полей документа; 

Таблица цветов НТМL

• Pink - розовый ;
• Blue – синий;
• Cyan - оттенок бирюзового; 
• Teal - ярко-голубой;
• Orange – оранжевый; 
• Gray - серый;
• Brown – коричневый;
• Yellow – желтый;
• Fuchsia - ярко-фиолетовый;
• Olive – оливковый;
• Aqua – бирюзовый;
• Purple – фиолетовый;
• Silver - светло-серый; 
• Red – красный;
• Black – черный; 
• Green – зеленый;