Электронные учебные пособия
Понятие электронного учебного учебника и его роль в учебном процессе. Отличительные особенности электронного учебника, разработанного на основе гипертекстовых технологий. Описание программных средств для создания электронного пособия. Каскадная таблица.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | дипломная работа |
| Язык | русский |
| Дата добавления | 25.09.2017 |
| Размер файла | 558,2 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Для создания абзаца в языке HTML предусмотрены несколько возможностей. Простейшая из них - это использование тегов <p> и <p>, между которыми помещается текст абзаца.
Код страницы содержащей абзацы, может иметь вид:
<HTML>
<HEAD>
<TITLE> Разбиение на абзацы </TITLE>
</HEAD>
<BODY>
<p>Ричард Бах</p>
<p>Единственная</p>
<p>Мы прошли долгий путь, правда?</p>
<p>Впервые мы встретились двадцать пять лет тому назад. Тогда я был летчиком, очарованным полетом, и пытался найти смысл жизни в показаниях приборов. Двадцать лет назад наше путешествие привело нас в новый необычный мир, распахнутый для нас крыльями Чайки.</p>
</BODY>
</HTML>
В окне браузера будет выводиться как показано на рисунке 1.4.
Размещено на http://www.allbest.ru/
Рисунок 1.4. Разбиение на абзацы.
2.2 Каскадная таблица стилей CSS
Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере. Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают, как он должен выглядеть. Таким образом, каскадные таблицы стилей дают возможность хранить содержимое отдельно от его представления.
Стиль включает все типы элементов дизайна: шрифт, фон, текст, цвета ссылок, поля и расположение объектов на странице.
CSS разрабатывались так, чтобы обеспечить больший уровень контроля над размещением текста и графики. Каскадные таблицы стилей обеспечивают должный уровень единства оформления, организации и контроля во время разработки узла, который является недостижимым с помощью одного только HTML.[15]
CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).
Впервые идея форматирования HTML-документов с помощью CSS была рекомендована Консорциумом W3C в 1996 году. Эта рекомендация, которая была обновлена в 1998 году, используется Web-разработчиками, и по сей день.
Что значит слово "каскадный"? Термин "каскадный" означает, что в одной странице HTML могут использоваться разные стили. Браузер, поддерживающий таблицы стилей, будет следовать их порядку (как по каскаду), интерпретируя информацию стилей. Это означает, что вы можете использовать все три типа стилей, и браузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц - с помощью встроенных стилей.
Другой аспект каскадирования - наследование (inheritance). Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML. Например, если вы примените определенный цвет текста в теге <р>, то все теги внутри этого абзаца наследуют этот цвет, если не оговорено иное.
Существует ряд методов, с помощью которых таблицы стилей могут применяться к документу HTML. Синтаксис соответствует реальной структуре информации, содержащейся внутри таблицы стиля.
Существует три метода для применения таблицы стилей к документу HTML:
· Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и браузер отобразит этот абзац с помощью параметров стиля, добавленного в код.
· Внедренный (Embedded) Внедрение позволяет контролировать всю страницу HTML. При использовании тега <style>, помещенного внутри раздела <head> страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.
· Связанный (Linked или External) Связанная таблица стилей - мощный инструмент, который позволяет создавать образцы стилей (master styles), которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение.css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.
Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать.
Синтаксис всех методов, используемых для применения стилей к документа HTML, практически одинаков. Таблицы стилей составляются из определенных частей. Эти части включают следующие элементы:
· Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (H1) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.
· Свойство (Property). Свойство определяет указатель. Например, если в качестве указателя выбран абзац, вы можете включить свойства, определяющие этот указатель. В свойства входят такие элементы, как поля, шрифты и фоновые изображения. В таблицах стилей существует много свойств, которые можно использовать для того, чтобы определить указатель.
· Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1(указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.
· Описание (Declaration). Свойства и значения объединяются, образуя описание.
· Строка (Rule). Указатель и описание образуют строку
Итак, каскадная таблица стилей - это набор правил форматирования тегов HTML. Например, для того, чтобы цвет фона Web-страницы сделать черным, необходимо объявить следующее правило форматирования:
body{background:black}
В данном случае объявлено правило форматирования тега body, а именно - свойству стиля background присвоено значение black (черный). В результате применения этого правила цвет фона всего документа изменится на черный.
Свойства CSS должны находиться в фигурных скобках.
Для каждого тега HTML можно указать не одно, а несколько свойств стиля.
Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).
body{background:black;color:white}
Формат самого правила не имеет значения, главное - правило должно читаться удобно и легко. Например, вышеприведенное правило можно записать и так:
body{
background:black;
color:white}
Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:
body,td,h1{
background:black;
color:white}
Встроенный стиль применяется к любому тегу HTML с помощью атрибута style следующим образом:
<P style="font: 12pt Courier New"> The text in this line will
display as 12 point text using the Courier New font.
</P>
Или:
<p style="font: 12pt Arial">
The text in this line will display as 18 point text using the
Arial font.
</p>
Посмотрим на результат:
The text in this line will display as 12 point text using the Courier New font.
The text in this line will display as 18 point text using the Arial font.
Можно добавлять встроенный стиль в любой тег HTML, в котором эта операция будет иметь смысл. Среди таких тегов можно назвать абзацы, заголовки, горизонтальные линии, якоря и ячейки таблиц. Ко всем этим элементам логично применять встроенные стили.
Существуют два тега, которые помогают применять встроенные стили к разделам страницы. Это теги <div> (division - раздел) и <span> (промежуток).
Эти теги определяют диапазон текста, так что все, находящееся между ними, будет оформлено с помощью нужного стиля. Единственное различие между <div> и <span> состоит в том, что <div> создает принудительный разрыв строки,a <span> -нет. Следовательно, нужно использовать <span> для изменения стиля любой части текста, меньшей абзаца.
Вот пример работы тега <div>:
<div style="font-family: Garamond; font-size: 18 pt;>"AII of the
text within this section is 18 point Garamond.
AII of the text within this section is 18 point Garamond.
и тега <span>:
<span style="color:#ff3300;"> This text appears in the color red,
with no line break after the closing span tag </span> and the rest of
the text.
Далее рассмотрим, как создать и подключить каскадную таблицу стилей к самой простой html страничке.
1. Создаем папку, в которой будут наша html страница, и каскадная таблица стилей. Пусть, папка будет называться "css"
2. Создаем простую html страничку (index.html).
3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.
В результате получится документ показанный на рисунке 2.1 :
Рисунок 2.1
Все, файл который будет содержать в себе стили css готов.
Теперь давайте подключим созданную таблицу стилей к файлу index.html.
Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге <head> прописать тег:
<link href="style.css" rel="stylesheet" type="text/css">
Здесь, в атрибуте href="style.css" прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.
Например, если наш файл index.html будет иметь такой код, рисунок 2.2:
Рисунок 2.2
Если же все будет сделано и сохранено правильно, то в браузере Вы увидите следующее, рисунок 2.3:
Рисунок 2.3
2.3 Язык программирования JavaScript
Рассматривая программный инструментарий для динамического контента был использован язык JavaScript.
JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.
JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA. В рамках данного курса мы во всех случаях будем использовать название JavaScript.
Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Javascript. Версии JavaScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JavaScript.
Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит.
На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или выдать предупреждение.
Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющих как на стороне клиента, так и на стороне сервера. Многие люди считают, что JavaScript - это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере.
При разработке обоих типов приложений используется общий компонент языка, называемый ядром и включающий определения стандартных объектов и конструкций (переменные, функции, основные объекты и средство LiveConnect взаимодействия с Java-апплетами), и соответствующие компоненты дополнений языка, содержащие специфические для каждого типа приложений определения объектов.
Клиентские приложения непосредственно встраиваются в HTML-страницы и интерпретируются браузером по мере отображения частей документа в его окне. Серверные приложения для увеличения производительности предварительно компилируются в промежуточный байт-код.
Основные области использования языка JavaScript при создании интерактивных HTML-страниц:
- динамическое создание документа с помощью сценария;
- оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер;
- создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа;
- взаимодействие с пользователем при решении "локальных" задач, решаемых приложением JavaScript, встроенном в HTML-страницу.
Как и любой другой язык программирования, JavaScript использует переменные для хранения данных определенного типа. Реализация JavaScript является примером языка свободного использования типов. В нем не обязательно задавать тип переменной. Ее тип зависит от типа хранимых в ней данных, причем при изменении типа данных меняется и тип переменной.
JavaScript поддерживает четыре простых типа данных:
- целый;
- вещественный;
- строковый;
- булевой, или логический.
Для присваивания переменным значений основных типов применяются литералы - буквенные значения данных соответствующих типов.
Целые литералы являются последовательностью цифр и представляют обычные целые числа со знаком или без знака:
- 123 // целое положительное число;
- -123 // целое отрицательное число;
- +123 // целое положительное число.
Для задания вещественных литералов используется синтаксис чисел с десятичной точкой, отделяющей дробную часть числа от целой или запись вещественных чисел в научной нотации с указанием после символа "e" или "E" порядка числа. Пример правильных вещественных чисел:
1.25 0.125e01 12.5E-1 0.0125E+2
Строковый литерал - последовательность алфавитно-цифровых символов, заключенная в одинарные (`) или двойные кавычки ("), например: "Ира", `ИРА'. При задании строковых переменных нельзя смешивать одинарные и двойные кавычки. Недопустимо задавать строку, например, в виде "Ира'. Двойные кавычки - это один самостоятельный символ, а не последовательность двух символов одинарных кавычек. Если в строке нужно использовать символ кавычек, то строковый литерал необходимо заключать в кавычки противоположного вида:
"It's a string" // Значение строки равно It's a string
Булевы литералы имеют два значения: true и false, и используются для обработки ситуаций да/нет в операторах сравнения.
Каждая переменная на JavaScript имеет имя, которое должно начинаться с буквы латинского алфавита, либо символа подчеркивания "_", за которым следует любая комбинация алфавитно-цифровых символов или символов подчеркивания. Следующие имена являются допустимыми именами переменных:
- Temp1;
- MyFunction;
- _my_Method.
Язык JavaScript чувствителен к регистру. Это означает, что строчные и прописные буквы алфавита считаются разными символами.
Если при определении переменной ей не присвоено никакого значения, то ее тип не определен. Ее тип будет определен только после того, как ей будет присвоено некоторое значение оператором присваивания "= .
Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно. Как известно, всего два языка претендуют на лавры победителя в браузере. Это VBScript - подмножество Visual Basic-а и JavaScript.
Сами по себе изучать скриптовые языки не имеет смысла, т.к. они тесно связаны с объектной моделью браузера и, по сути дела, большая часть скриптов просто устанавливает соответствующие свойства объектов или вызывает их методы.
Что такое объектная модель? Давным-давно, когда броузеры еще имели номер версии равный единице, информация просто выводилась на дисплей по мере поступления, не подвергаясь никаким изменениям. Все было просто. Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим ее путь:
- страничка скачивается с сайта и размещается в памяти компьютера;
- производится анализ странички, в результате которого она препарируется на составляющие;
- блоки, из которых состоит страничка (<body></body>, <head></head>, <p></p> и т.д.) размещаются во временной базе данных соответственно структуре объектной модели;
- база данных становится доступной другим программам и, в частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных браузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.
Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.
Рассмотрим общую структуру объектной модели. Ниже приведена объектная модель Internet Explorer-а версии 4 и выше:
- window - объект, дающий доступ к окну броузера;
- frames - объект, дающий доступ к фреймам;
- window...;
- window...;
- ...;
- document - объект, содержащий в себе всю страничку;
- all - полная коллекция всех тегов документа;
- forms - коллекция форм;
- anchors - коллекция якорей;
- appleеs - коллекция апплетов;
- embeds - коллекция внедренных объектов;
- filters - коллекция фильтров;
- images - коллекция изображений;
- links - коллекция ссылок;
- plugins - коллекция подключаемых модулей;
- scripts - коллекция блоков <script></script>;
- selection - коллекция выделений;
- stylesheets - коллекция объектов с индивидуально заданными стилями;
- history - объект, дающий доступ к истории посещенных ссылок;
- navigator - объект, дающий доступ к характеристикам броузера;
- location - объект, содержащий текущий URL;
- event - объект, дающий доступ к событиям;
- screen - объект, дающий доступ к характеристикам экрана.
Как видите, структура объектной модели достаточно сложна, но строго определена, и существует однозначный способ доступа к любому свойству или методу. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от выше лежащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа.
То есть, вот здесь-то на сцену и выходит скриптовый язык, который и позволяет нам манипулировать объектами.
Как любой язык программирования, JavaScript имеет определенный набор типов переменных, операторов, встроенных функций и объектов. Изучение JavaScript как такового как раз и заключаются в запоминании всего этого.
Код на JavaScript обычно состоит из двух частей:
1) функции, которые вызываются из кода странички в ответ на какое-то событие;
2) код событий, которые вызывают функции.
Описание функций должно располагаться в теге <head></head> - это гарантирует нам, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки:
<script language="JavaScript">
<!--
function somefunction()
{
// здесь располагается код функции
}
//-->
</script>
Сам код заключен в тег комментария. Это сделано для того, чтобы более старые броузеры игнорировали непонятные им команды. Новые же программы знают о существовании закомментированных скриптов и им это не мешает.
Заметьте также, что закрывающий тег комментария несколько необычен и предваряется двумя косыми чертами. Две косые черты - это комментарий языка JavaScript, т.е. скрипт игнорирует все, что идет после него. А сделана такая сложная конструкция ради совместимости с Netscape, который закрывающий HTML-комментарий воспринимает как непонятную ему команду и, соответственно, вызывает ошибку.
Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга <script>. Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, читатель увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо посреди HTML-документа.
События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:
<form>
<input type="button" value="Click me" onClick="alert('Yo)">
</form>
Данный пример имеет несколько новых особенностей - рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой (как это делать - проблема языка HTML, так что рассматривать это здесь я не буду). Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютере должен выполнить вызов alert('Yo'). Это и есть пример кода на языке JavaScript (Обратите внимание, что в этом случае мы даже не пользуемся тэгом <script>). Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo' [16].
2.4 Flash: мультимедийная платформа
Abode Flash - мультимедийная платформа компании Adobe для создания веб-приложений или мультимедийных презентаций. Широко используется для создания рекламных баннеров, анимации, игр, а также воспроизведения на веб-страницах видео- и аудиозаписей.
Платформа включает в себя ряд средств разработки, прежде всего Adobe Flash Professional и Adobe Flash Builder (ранее Adobe Flex Builder); а также программу для воспроизведения flash-контента - Adobe Flash Player, хотя flash-контент умеют воспроизводить и многие плееры сторонних производителей. Например, SWF-файлы можно просматривать с помощью свободных плееров Gnash или swfdec, а FLV-файлы воспроизводятся через мультимедийные проигрыватели Quicktime, Windows Media Player и различные проигрыватели в UNIX-подобных системах при наличии соответствующих плагинов.
Macromedia Flash- очень мощное, при этом простое в использовании, средство создания анимированных проектов на основе векторной графики с встроенной поддержкой интерактивности. Flash является идеальным рабочим инструментом для художников и дизайнеров, позволяющим дополнять создаваемые ими Web - проекты анимацией и звуком.
После нескольких принятых соглашений об использовании Flash в качестве Web стандарта, он стал легко интегрироваться с HTML, что позволяет встроить Flash проект практически без швов. Flash не требует ничего дополнительного для перехода по ссылке, открытия окна браузера или выполнения чего-либо посредством HTML.
Общеизвестно, что векторная графика занимает меньше места, чем раннее использовавшейся растровая графики. Большое значение было предано совместного использования векторной графики и анимации. Это намного расширило круг интересов пользователей и разработчиков. Также имелась возможность вставки звукового сопровождения в Web страничку, придавая вместе с анимацией большую привлекательность. Внутренний язык программирования ActionScript позволял сопровождать какие-либо действия или события, какими либо звуковыми или видео эффектами. Возможности Action Script сравнимы с возможностями JavaScript и VBScript.
Изначально Flash разработки были малоизвестны, пока корпорация Macromedia не предложила переделать один из разделов сервера Walt Disney, используя Flash. Это дало большую рекламу Flash технологии. Многие дизайнерские студии начали покупать пакеты программных продуктов для разработки Web страничек при помощи Flash технологии.
Первоначально программа называлась Splash Animator и продавалась малоизвестной фирмой Future Animation для изготовления мультфильмов на PC - компьютере. Предназначалась для художников - аниматоров и пользовалась ограниченным успехом, пока в связи с бумом на WWW-приложения такой гигант, как фирма Macromedia, не обратила на нее внимание, купив и переименовав во Flash. Разработчики Flash поменяли интерфейс программы для облегчения и автоматизации разработки проекта. Причем мультимедийный гигант не только сменил название и интерфейс, но и переориентировал пакет на рынок Web-анимации (при этом был предложен и свой, внутренний формат файлов векторной графики "*.swf", и реализована поддержка для других популярных графических форматов, в том числе и для анимированного GIF), и обеспечил пакету хорошую рекламу.
Однако изменения коснулись не только внешнего облика, но и содержания.
Во Flash понятие интерактивности значительно расширилось благодаря использованию сценариев Action Script (Действия), которые позволяют авторам разрабатывать достаточно сложные стили поведения - behaviors (перемещаемые элементы интерфейса, логику и начальную математику), впервые дающие возможность создавать электронные магазины. В результате программа получила широкое распространение в среде Web-разработчиков и продолжает служить хорошим подспорьем профессиональным аниматорам.
С момента появления в 1996 г. технология Flash стала фактическим стандартом для разработки насыщенных мультимедийных Web-сайтов. В качестве наиболее ярких примеров можно назвать серверы Citibank, Fox, PepsiCola, Paramount, Plymouth, Chrysler, Nestle и Warner Bros.
Для работы во Flash не обязательно иметь какой либо опыт в профессиональном программировании - этот позволяет создавать Web - узлы с элементами интерактивности без необходимости написания исходных кодов JavaScript, Java или HTML.
Принцип действия.
При разработке какого либо Web сайта в Интернете, его неотъемлемую часть составляет язык разметки HTML как единый стандарт разметки документа и передачи гипертекстовой информации.
Сама Flash технология никогда не претендовала на место HTML, но, на данный момент, с помощью Flash можно сформировать полноценную страницу-ролик. Такой подход можно действительно расценивать, как некое вытеснение HTML. На многих страницах, использующих Macromedia Flash, присутствует ощущение, как будто HTML нет вовсе. В данном случае HTML-код сведен к минимуму за счет Flash. Смысл этого кода - правильное расположение Flash-клипа. Для варианта с одним большим Flash-роликом, представляющим собой законченную страницу, подойдет следующий вид:
Web-страница=HTML+Flash
В случаях, когда Flash использует Action Sript, эту формулу дополняет JavaScript.
Flash также имеет возможность передавать какие-либо параметры при выполнении CGI. Также CGI может быть вызванным из Flash, выполнить какие-либо действия и выдать ответ в виде заранее подготовленного Flash-клипа. Сгенерировать Flash CGI-программой пока не представляется возможным. Если же того потребуется в связи с повсеместным использованием Flash, то Macromedia может разработать нечто наподобие библиотеки для генерации изображений CGI-программами. Пока самая разумная цель использования технологии Flash есть дополнение полноценного HTML-документа небольшими клипами. Многие популярные сайты, не желая отставать от моды, пошли по этому пути. Пользователь, заходя на такие страницы, либо любуется действиями Flash-ролика, либо видит на его месте просто фон и, не обращая внимания, продолжает знакомиться с содержанием HTML-страницы. Это значит, что Flash-клипы здесь используется скорее, как анимированные GIF и не несут в себе жизненно важного смысла для всего сайта. В таком случае можно применить новую формулу:
Web-страница=HTML+DHTML(JavaScript/VBScript, CSS)+Flash+CGI
Она получилась очень похожей на самую первую формулу. Flash играет роль модного дополнения к дизайну Web-страницы. На данный момент многие технологии ориентированы на это, к примеру, - Metastream, которая позволяет демонстрировать векторную 3D графику на Web-страницах. Все они имеют существенный минус - необходимость наличия у пользователя специального модуля расширения (plug-in).
Возможности Flash.
Создав Flash, компания Macromedia объединила множество мощных идей и технологии в одной программе, позволив пользователям получать через Web целые мультимедийные презентации.
Использование векторной графики
Использование векторной графики как графического режима по умолчанию делает Flash незаменимым средством разработки для Web . Векторная графика - это объекты, определяемыми математическими уравнениями, или векторами, которые содержат информацию о размере, форме, цвете, границе и местоположении. Это эффектный способ обращения с графикой, в результате которого получаются файлы относительно небольших размеров даже при работе со сложными рисунками. Более того, векторная графика не зависит от разрешения, с которым просматривается объект
Векторная графика на сегодня - идеальное решение для разработки Web -сайтов, позволяющее с равной эффективностью воспроизводить изображения практически на всех типах компьютеров (Pc, Mac, NoteBook) и мониторов.
Обычно, растровое изображение состоит из тысяч или даже сотен тысяч точек, информация о цвете и расположении каждой содержится в файле, опираясь на эту информацию, система создает изображение. Поэтому - качественные, многоцветные растровые изображения занимают очень много места. По сути, вектор - это прямая направленная от точки до точки, так как векторное изображение состоит их координат угловых точек, между которыми проходят прямые. Чтобы изобразить простую линию в растровом формате, потребуется указывать местоположение каждой точки этой линии, для изображения той же линии в векторе, необходимо лишь указать две точки и расстояние между ними, плюс - толщина линии и ее цвет. Естественно, что многие цифровые параметры неоднократно повторяются, именно они и позволяют легко сжимать векторные изображения в два, три раза.
В отличие от растровых форматов, таких как GIF и JPEG, используемых в сети повсеместно, векторные изображения - графика, тексты, схемы и анимация легко экспортируются в необычайно компактные файлы формата SWF (Shock Wave Flash), которые быстро грузятся и способны проигрываться непосредственно в Сети при помощи обычного браузера.
Технология Symbol Conversation.
Подход Flash к разработке также облегчает создание сложных мультимедийных презентаций, при этом размеры файлов остаются небольшими. Так как такие элементы, как векторы, растровые изображения и звук обычно используются в одном проекте несколько раз, Flash, благодаря своей внутренней функции Symbol Conversation позволяет создавать единственный экземпляр объекта, который можно повторно использовать вместо того, чтобы каждый раз пересоздавать новый. Такой подход существенно уменьшает размер файла проекта.
К дополнению была разработана библиотека - Library. Она представляет собой перечень всех используемых констант, в качестве которых могут выступать как нарисованные символы, так и импортированные графика и звуки. С помощью библиотеки можно обращаться к любому элементу независимо от того на каком слое или кадре он находится.
Цветовые палитры, а также градиентные заливки можно импортировать (и экспортировать) из других графических приложений (например, Macromedia Fireworks и Adobe Photoshop), что обеспечивает неизменность цветов на всем сайте. Палитра сохраняется в файле.fla и не влияет на размер экспортируемого файла.swf. По умолчанию Flash использует палитру web-safe.
Используя свойства технологии Symbol Conversation можно создавать текстовые поля позволяющие вводить данные во время воспроизведения Flash-проекта для создания всевозможных форм сбора сведений от пользователей: ввода паролей, регистрационных, опросных и др. Это, наиболее значительное нововведение и шаг к созданию полноценных Web-сайтов. Кроме того, поля применяются для динамической замены текста. Такое свойство может быть использовано для отображения постоянно обновляемой информации: биржевой, спортивной, прогнозов погоды. Когда пользователь создает текстовое поле, он назначает ему переменную. При этом возможно передавать переменные в разные сцены ролика, в server-side-приложения для занесения их в базы данных и даже загружать новые данные.
Передача данных в потоковом режиме.
Главный решающий фактор, определяющий способность Flash создавать быстро загружающиеся приложения мультимедиа для Web - это передача содержимого в потоковом режиме. Несмотря на другие его достоинства, без этой особенности Flash вряд ли бы стал практичным для использования в Web.
Потоковая передача содержимого - это ещё один пример технологии, порожденный необходимостью. До её появления ограниченная скорость соединения не позволяла пользователям просматривать или прослушивать файлы, до тех пор, пока всё их содержимое не было полностью загружено на компьютер. Однако разработчики осознали, что пользователям не нужно видеть или слышать каждый байт одновременно: можно получить точно такое же впечатление от содержимого проекта, получая его постепенно. Потоковые возможности означают, что даже большие файлы со звуком, анимацией и растровыми могут начинать отображаться практически сразу.
Работа со звуком.
Озвучивание Web сайта фоновой музыкой пока еще мало распространено, но любители озвучивать Web-страницы иногда используют эту возможность, хотя это, в общем, не принято.
Доказано, что dhtml, html или любой другой стандарт не может быть тесно интегрирован со звуковыми файлами. Фоновый звук, который подключается через тег BGSOUND или EMBED, может иметь формат mid или wav. При использовании первого формата страница начинает бренчать и поскрипывать, но по размеру mid вполне подходит для сети Интернет. Ясно, что mid качеством отличается в обратную сторону. Звуки в формате wav имеют неплохое качество, но размер дает о себе знать, замедляя загрузку сайта, что конечно, зависит от продолжительности звукозаписи.
С появлением и распространением Flash любители озвучивать страницы стали помещать на страницу мало заметный Flash-клип, который повторяется "вечно" и проигрывает один и тот же звуковой фрагмент. При этом соотношение качество/размер остается на приемлемом уровне.
Контроль над звуком происходит с точностью до единичного кадра, и его применение ограничено только воображением. Flash проигрывает звук несколькими способами. Он воспроизводится независимо от времени либо с синхронизацией анимации со звуковой дорожкой. Существует также возможность изменять уровень звука для каждого канала и применять эффект плавного увеличения и уменьшения громкости. Итак, Flash использует два типа звуков - связанный с событием (event sounds) и потоковый (stream sounds). Их главное различие в том, что первый должен полностью загрузиться, а второй начинает воспроизводиться по мере того, как будет получен достаточный объем данных, необходимый для синхронизации с первыми несколькими кадрами. На размер экспортируемого файла.swf значительно влияет степень компрессии, которая может составлять от 8 до 160 kBps и указывается в окне Publish Settings. Flash импортирует звуковые файлы в формате AIFF, WAV и MP3.
Сценарии во Flash.
Мало что пленяет человека, как движение и взаимодействие. Именно это и делает Flash, предоставляя возможность создавать подконтрольные пользователю приложения, которые напрямую от творческого подхода автора к представлению интерактивности.
Возможность создавать кнопки, нажатие которых приводит к выдаче информации и воспроизведению звука или переносящее в другое место фильма проекта. Поэтому презентация в проекте может проходить в предопределённой последовательности или по пути указанному пользователем. Также возможна разработка проекта, с какими-либо расчетными действиями и обработки, какой-либо информации с помощью простого, но мощного языка сценариев "ActionScript".
Action Script можно рассматривать как основной язык программирования во Flash. С его помощью можно запрограммировать проект Flash на выполнение различных задач. Подобно многим другим языкам программирования, термины Action Script определяют смысловую нагрузку, порядок их следования - логическую структуру, а знаки препинания - контекст.
Для разработки интерактивных элементов во Flash используют три основных компонента: событие (event), порождающее определённое действие, действие (action), порождаемое тем или иным образом событием, и целевой объект (target), выполняющий действие или изменяемый событием.
Логическая схема интерактивной функции, при которой происходят действия в проекте, может быть представлена следующим образом:
Событие - является инициатором, какого-либо действия в проекте. Во Flash события подразделяются на:
1 . События мыши/клавиатуры - эти события инициируются пользователем.
2. События кадров - если разрабатывается Flash ролик, то по достижении какого либо кадра возникает событие.
3. События переменных - событие происходит либо по истечении определённого интервала времени, либо значение переменной достигло того условия для которого запланировано событие.
Целевой объект - это непосредственно объект, над которым будет проведено действие вызванное событием. Целевые объекты подразделяются на четыре основных типа:
1. Текущий проект и его свойства.
2. Другой проект и его свойства (если проект находится в рамках основного проекта)
3. Графические элементы проекта (кнопка, рамка, фон и т.п.)
4. Внешние приложения (Интернет браузер или другие программы)
Действие - действия которые выполняются над целевым объектом. Действия в Action Script состоят из самих действий, ссылок на целевой объект и параметров выполнения действий. Параметрами выполнения может быть, как и изменение свойств объекта, так и вычисление математического или логического выражения и присвоения результата его либо свойству объекта, либо какой либо переменной.
Для идентификации объектов или экземпляров проектов в сценариях Action Script им назначаются имена, что позволяет управлять отдельными объектами при помощи Action Script.
В последних версиях Flash было включено множество дополнительных возможностей для управления проектов при помощи Action Script. Теперь Flash стал не просто красивой фоновой заставкой для Web сайтов, а полнофункциональным средством для разработки сложных Web сайтов. Flash может вполне применятся и для простых "статических" страничек, так и для многоцелевых сайтов, например: продажа в Интернете, электронная почта и чат.
Принципы Macromedia Flash.
В процессе создания Flash-проекта, особенно, когда уже есть сравнительный опыт, разработки в других средствах рисования графики или редакторах Web дизайна, то можно отметить ряд преимуществ перед ними, которыми по некоторой мере Flash получил свою популярность:
1. Использование обозначений для элементов, которые появляются больше одного раза.
2. Объединение кадров в действиях перемещения (motion tweens), которые позволяет автоматически просчитать некоторые промежуточные моменты перемещения, для ускорения разработки проектов.
3. Объединение кадров в действиях трансформации (shape tweens), которые позволяет автоматически просчитать некоторые промежуточные моменты трансформации объектов, для ускорения разработки проектов.
4. Сокращение числа различных типов линий (пунктир, точки и т.п). Линии, нарисованные инструментом карандаш, требуют меньше памяти, чем мазки кистью.
5. Использование слоёв, для разбиения перекрывающихся объектов клипа.
6. Сокращение числа различных шрифтов и стилей, путём преобразования их в объекты векторной графики.
7. Применение звукового формата mp3, как самого высококачественного и экономного музыкального формата.
8. Использование возможности анимации растровых изображений, или для статических элементов закраски объектов и фона.
9. Применение сценариев (Actions Script) вплоть до вставка их в отдельные кадры фильма.
10. Возможность сгруппировывать объекты на различных слоях.
11. Использование встроенных инструментов для изменения цветовых эффектов одного и того же объекта.
12. Использование единой палитры web-safe, во избежание расхождений с цветами броузеров.
13. Применение компонента управления проектом Library, который позволяет быстро найти любой объект и поменять его свойства.
14. Возможность вставки в текущий проект раннее созданный другой проект.
Применение Macromedia Flash в Web.
Способы применения Flash, несмотря на некоторые небольшие минусы такие как требование от пользователя специального модуля расширения (plug-in), очень широки. Flash-проект способен сделать Web-страницу более привлекательной и стильной, а Flash баннер - затмить обычные анимированные GIF, тем более, что Flash-клипы (и любые действия в них) можно озвучивать. По этим причинам возникает неугасаемое желание каким-либо из способов применить технологию Macromedia Flash. Способы применения этой технологии выражаются в следующих объектах:
· Flash баннер
· Заставка в виде Flash-ролика
· Целая страница, представляющая собой Flash Movie
· Элемент дизайна в HTML-документе
· Фоновый звук к HTML-странице (в формате mp3)
Следует отметить, что Macromedia снабжает все свои продукты очень хорошо организованной и всеобъемлющей справочной системой и обучающими примерами в формате Flash, по которым можно освоить основные навыки работы с символами и текстом, организации flash-презентаций, синхронизации звука и создания кнопок.
Macromedia выпустила Flash-проигрыватели для всех основных операционных систем и типов браузеров, что обеспечило необходимую для Internet кросс-платформенность и популярность этой технологии. Согласно последним опросам в Cети, приблизительно 80% пользователей могут просматривать содержимое Web-сайтов на Flash без загрузки дополнительного программного обеспечения, и только 61% - Web-страницы с элементами Java. Скорее вынужденным шагом было свободное лицензирование Macromedia кода (Free Source licensing program) проигрывателя для Flash, которое ускорит использование формата swf в Web-приложениях нового поколения сторонними производителями программных продуктов.
Литература
1. СкакунВ.А. Методическое пособие для преподавателей специальных и общетехнических предметов профессиональных учебных заведений.-2001-155с.
2. Максимов, Г.Н. Электронный учебник - что это? / Г.Н. Максимов, А.В. Вишняков // Открытое образование. - 2002. - № 2. - С. 19-22
3. Башмаков, А.И. Разработка компьютерных учебников и обучающих систем / А.И. Башмаков, И.А. Башмаков. - М. : Филинъ, 2003. - 4 с.
4. Зайнутдинова Л.Х. Создание и применение электронных учебников: Монография. - Астрахань: Изд-во "ЦНТЭП", 1999. - 364с
5. Яшников С.А. Создание электронного учебника. - М.: Издательство ИНФРА - М, 2006-45с
6. Зимина О.В., Кириллов А.И. Печатные и электронные учебники в современном высшем образовании: Теория, методика, практика. М.: "МЭИ", 2003, - 167-169 с.
7. Захарова, И.Г. Информационные технологии в образовании / И.Г. Захарова. - М. : Академия, 2003. - 183,192 с.
8. Лапчик, М.П. Методика преподавания информатики: учебник / М.П. Лапчик. - М. : Академия, 2003. - 112 с.
9. Козлов, О.А. Некоторые аспекты создания и применения компьютеризованного учебника / О.А. Козлов, Е.А. Солодова // Информатика и образование. - 1995. - № 3. - С. 97-99.
10. Ефимова, О. Курс компьютерной технологии с основами информатики: учебник / О. Ефимова. - М. : АСТ, 2000. - 132 с.
11. Лаврентьев, В.Н. Электронный учебник / В.Н. Лаврентьев, Н.И. Пак // Информатика и образование. - 2000. - № 9. - С. 91-97.
12. Христочевский, С.А. Электронные мультимедийные учебники и энциклопедии / С.А. Христочевский // Информатика и образование. - 2000. - № 2. - С. 70-77.
13. Вуль,В.А. Электронные издания. Глава 9. Электронные учебники. http://www.hi-edu.ru/e-books/xbook119/01/part-010.htm
14. А.Ю. Гаевский, В.А. Романовский 100% самоучитель. Создание WEB-страниц и WEB-сайтов ? М.:Триумф, 2008.
15. Каскадные таблицы стилей// http://html-exp.narod.ru/css.htm
16. Р. Вагнер, А. Вайк. JavaScript. Энциклопедия пользователя - М.:АСТ, 2001.
Размещено на Allbest.ru
...Подобные документы
Концептуальные основы разработки электронного учебника на основе гипертекстовых технологий. Архитектура учебного пособия. Этапы построения электронного учебника "Информатика" и его структура. Анализ практического использования электронного учебника.
дипломная работа [104,9 K], добавлен 02.05.2012Создание одной из форм обучения с использованием средств новых информационных технологий - электронного учебника. Администрирование электронного учебного пособия на тему "Линейное программирование". Проектирование структуры электронного учебника.
курсовая работа [1,7 M], добавлен 09.06.2010Особенности электронных учебных пособий и основные принципы их создания. Сбор и подготовка исходного материала для электронного учебного пособия. Разработка структуры электронного пособия. Выбор программ и разработка интерфейса электронного учебника.
дипломная работа [738,5 K], добавлен 27.06.2012Понятие электронного учебного пособия. Виды электронных учебных изданий, дидактические требования к ним. Компонент основной формы "Button1". Поэтапная разработка мультимедийного электронного учебника по дисциплине "Компьютерные сети", его интерфейс.
курсовая работа [613,6 K], добавлен 31.01.2016Структурные элементы электронного учебника. Основные этапы разработки электронного учебника. Варианты структуры электронного образовательного издания. Подготовка электронного издания к эксплуатации. Методическое обеспечение электронного учебника.
презентация [506,5 K], добавлен 28.12.2014Использование программы Microsoft Word 2010 при создании электронного учебника. Структура учебника, навигация, полнотекстный поиск, защита информации от изменений. Алгоритм разработки программного продукта. Описание технологических средств учебника.
контрольная работа [196,9 K], добавлен 06.05.2014- Разработка электронного практикума по дисциплине "Математика" в программе Microsoft Office FrontPage
Отличительные признаки электронного учебника от печатного. Преимущества и недостатки компьютерных систем обучения. Аспекты применения информационных технологий в образовании. Типы педагогических программных средств. Этапы создания электронного практикума.
курсовая работа [3,0 M], добавлен 28.05.2015 Различные определения сущности электронного учебника, его основные формы. Этапы разработки электронного учебно-методического пособия: подбор материала, выбор программы, создание, отладка и тестирование, защита. Содержание руководства пользователя.
дипломная работа [2,6 M], добавлен 20.09.2012Описание электронного учебника, требования к его внутренней структуре и элементам. Технические характеристики и основные программные средства, используемые в процессе разработки. Формирование руководства пользователя, информационный интерфейс учебника.
курсовая работа [1,5 M], добавлен 17.08.2015Внедрение информационных технологий в систему образования. Понятие, отличительные признаки, виды, структура и предназначение электронного учебника. Принципы его создания и основные этапы разработки в интегрированной среде программирования Delphi.
дипломная работа [2,3 M], добавлен 03.07.2015Исследование значения современных информационных и мультимедийных технологий. Понятие и классификация электронных учебников. Характеристика особенностей представления и восприятия информации при самообучении. Проектирование электронного учебного пособия.
реферат [1,9 M], добавлен 29.12.2014Разработка методики создания электронного учебника по дисциплине "Дешифрирование аэроснимков", оценка программных средств. Методика сканирования изображений в больших количествах с помощью программы ABBYY FineReader. Особенности программы ScanTailor.
дипломная работа [5,2 M], добавлен 11.12.2015Интернет-технологии в образовании, основные аспекты и принципы их применения на современном этапе. Этапы создания электронного пособия, его внутренняя структура, предъявляемые требования и технологическое обеспечение. Листинг разработанного кода.
дипломная работа [1,4 M], добавлен 03.01.2014Понятие электронного учебного пособия, специфика работы с ним, оценка преимуществ и недостатков, анализ эффективности. Виды и формы электронных учебных изданий. Учебно-теоретические обучающие издания: назначение, требования, структура, разработка.
курсовая работа [47,2 K], добавлен 17.05.2011Рассмотрение понятия, принципов построения (гиперактивность, мультимедийность), структуры, особенностей подготовки и реализации электронного учебного пособия. Подбор наглядного и справочного материала и их связь с текстом при помощи гиперссылок.
курсовая работа [49,1 K], добавлен 18.06.2010Основные элементы Web-конструирования в современных курсах информатики. Роль Web-технологий в современном обществе. Электронные учебные пособия и технологии их разработки. Электронное пособие "Создание Web-документов", его содержание и структура.
дипломная работа [2,1 M], добавлен 11.04.2012Электронный учебник как средство самообразования. Основные принципы самообразования. Этапы проектирования электронного учебника, построение интерфейса системы. Язык гипертекстовой разметки HTML. Структура электронного учебника по "Численным методам".
дипломная работа [5,9 M], добавлен 15.03.2012Функциональное назначение и структура электронного учебника. Особенности его верстки. Элементы интерфейса. Психолого-педагогические аспекты представления образовательного контента в ЭУ. Выбор дизайн-эргономических решений. Программная реализация пособия.
дипломная работа [2,5 M], добавлен 16.02.2015Обзор средств создания электронных обучающих систем. Требования к системе проектирования "электронного учебника". Разработка теоретической части и интерактивных примеров. Классификация средств создания электронных учебников. Принципы изложения материала.
дипломная работа [7,8 M], добавлен 10.01.2013Электронный учебник как средство самообразования. Основные этапы проектирования электронного учебника. Методика использования электронных учебников. Язык гипертекстовой разметки HTML. Структура электронного учебника по дисциплине "Численные методы".
дипломная работа [4,9 M], добавлен 02.05.2012
