Лекция 12
Для каких типов графики используются форматы SVG и СANVAS?
Элементы CANVAS позволяют создавать растровые изображения программными методами, при помощи JavaScript.
Вторая технология - SVG, основана на векторной графике, что позволяет создавать иллюстрации и анимации при помощи синтаксиса языка XML, сходного с HTML.
Каким образом выполняется размещение SVG-графики?
Все файлы SVG должны начинаться с объявления, что документ является файлом XML: <?xml version="1.0" standalone="yes"?>
Вслед за этим расположена информация, разъясняющая SVG-документ. Первая строка устанавливает версию SVG, которую вы используете. <svg version="1.1"
Затем указываем свойство viewBox, задающее размеры холста, на котором будет расположено изображение. Это свойство состоит из четырех параметров, которые определяют положение левого верхнего угла, а также ширину и высоту. viewBox="0.0 0.0 300.0 800.0"
Рисование осуществляется посредством нескольких элементов, главный из которых - РАТН. В завершение кода ставится закрывающий элемент. </svg>
Из каких элементов строится код SVG?
Код SVG построен из элементов, используемых для построения изображений. Основные элементы, которые пригодятся при создании иллюстраций:
LINE- для описания линий
POLYLINE- для описания фигур, составленных из линий
RECT - для описания прямоугольников
CIRCLE- для описания кругов
ELLIPSE- для описания эллипсов
POLYGON- для описания многоугольников
РАТН- для описания произвольных кривых.
<line x1=25 y1=150 x2=300 y2=150 style="stroke:red; stroke-width:10"/>
Что из себя представляет элемент РАТH?
Рисование осуществляется посредством нескольких элементов, главный из которых - РАТН. Роль элемента РАТН состоит в построении изображения путем проведения линий, соединяющих точки по заданным координатам, точка за точкой.
Каждый рисунок, создаваемый при помощи элемента РАТН, построен из серии специальных кодов, которые описывают, как на экране должна проходить кривая
Для чего и где используются команды М и L?
М = movе to (двигаться к)
L = liпе to (провести линию к)
Н = horizontal line to (провести горизонтальную линию к)
V = vertical line to (провести вертикальную линию к)
С = curve to (провести кривую к)
S = smooth curve to (провести гладкую кривую к)
Q = quadratic Bezier (провести кривую Безье к) и ряд других
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
Что применяют чтобы раскрасить рисунки, созданные в формате SVG?
Чтобы раскрасить рисунки, созданные в формате SVG, следует задействовать стили CSS. Атрибут style размещается непосредственно в соответствующем элементе рисования.
<ellipse cx="300" cy="150" rx="250" ry="120" style= "fill:blue; stroke:#999; stroke-width:1cm" />
Для чего используются контейнеры linegradient и radialgradient и где они размещаются?
Для добавления градиентов используется контейнер defs, внутри которого размещаются контейнеры linegradient и radialgradient, определяющие линейный и радиальный градиенты.
<defs>
<radialgradient id="yellow_red" cx="50%" cy="50%" r="50%" fx="50%">
<stop offset="0%" style="stop-color:yellow; stop-opacity:1" />
<stop offset="25%" style="stop-color:red; stop-opacity:1" />
<stop offset="50%" style="stop-color:blue; stop-opacity:1" />
<stop offset="100%" style="stop-color:black; stop-opacity:1" />
</radialgradient>
</defs>
<text x="100" y="140" style="font-family:Arial; font-size:96pt; stroke:red; fill: url(#yellow_red);">
Это были лучшие времена? </text>
</svg>
Какие 2 составляющие требуются для создания визуального элемента при помощи формата CANVAS?
Для создания визуального элемента при помощи формата CANVAS понадобятся две составляющие. Первая - это собственно элемент CANVAS, вставленный в HTML- код. Вторым элементом является код скрипта, обычно размещаемый в разделе HEAD документа
Какие четыре элемента применют для описания фигур используя CANVAS ?
Существует четыре элемента, которые можно применять для описания фигур - линии, дуги, кривые Безье и квадратичные кривые. Эти элементы позволяют создать фигуру любого типа.
Какие методы скрипта используются для рисования линий и рисования дуг?
Для рисования линий используются методы - beginPath, moveTo (задает начальную точку рисования), lineTo, closePath. Для создания дуг используется метод Arc, в котором указываются - координаты центра окружности, радиус, начальная и конечная точки дуги, логическое значение, определяющее напрвление рисования дуги (true - против часовой стрелки). В частности метод Arc позволяет рисовать окружности. Для рисования квадратичных кривых и кривых Безье используются методы quadraticCurveTo, bezierCurveTo.
Что может обеспечить сервис Goog1e Docs?
Сервис Goog1e Docs обладает встроенным инструментом рисования в формате SVG.
сервис Google Docs- для создания документoв онлайн. Функция Insert Image (вставить изображение) использует формат SVG для рисунков. Кроме того, сервис Google содержит сложный редактор символов (Glyph editor), чтобы встроить шрифт.
Какие параметры используются в методах quadraticCurveTo, bezierCurveTo?
quadraticCurveTo(controlX, controlY, endX, endY) controlX, controlY — координаты контрольной точки; endX, endY — координаты окончания кривой.
bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); controlX, controlY, controlX2, controlY2... — координаты контрольных точек, может быть сколько угодно; endX, endY — координаты окончания кривой.
Лекция 13
В чем заключается проблема организации видео на основе технологии Flash?
Проблема заключается в том, что добавление видео на основе технологии Flash по-прежнему непростая задача. В частности требуется цифровую версию видеоролика конвертировать в видеоформатFlash, опубликовать Flash-ролик и добавить корректный HTML-код на страницу.
Какие атрибуты используются с тегом video?
autoplay - видео начинает воспроизводиться автоматически после загрузки страницы
controls - будет добавлена простая панель, кнопки управления которой напоминают клавиши «Воспр.Пауза» у видеомагнитофона
loop - повторяет воспроизведение видео с начала после его завершения
src - указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится
preload - используется для загрузки видео вместе с загрузкой веб-страницы (Этот атрибут игнорируется, если установлен autoplay).
Последний из указанных атрибутов может принимать следующие значения
none - не загружать видео (значение по умолчанию)
metadata - загрузить только служебную информацию (размеры видео, первый кадр, продолжительность и др.
auto - загрузить видео целиком при загрузке страницы.
poster - Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
Ітакожатрибути устанавливающие размер области для видеоролика (height, width)
Для чего используется тег source?
Тегsource обеспечивает для браузера выбор подходящего формата и файла для воспроизведения.
Приведите пример применения тега video!
<video width="400" height="300" controls="controls" poster="video/duel.jpg">
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'>
Тег video не поддерживается вашим браузером.
<a href="video/duel.mp4">Скачайтевидео</a>.
</video>
Перечислите форматы видео, которые используются для применения с HTML5?
В настоящее время язык HTML5 поддерживает три видеокодека. Это видеостандарт Н.264 (или MPEG4) и комплексная разработка с открытым кодом формат ogg/Theora или webm (кодеки - theora, vorbis или vp8, vorbis).
Приведите пример тега audio!
<audio controls>
<source src="audio/music.ogg" type="audio/ogg; codecs=vorbis">
<source src="audio/music.mp3" type="audio/mpeg">
Тег audio не поддерживается вашим браузером
<a href="audio/music.mp3">Скачайтемузыку</a>
</audio>
Какие аудиоформаты используются для применения с HTML5?
Перечисленных в примере форматов ogg (ogg/Vorbis) и mpeg3 достаточно, чтобы обеспечить воспроизведение аудиофайлов в различных браузерах, хотя часть браузеров дополнительно могут воспроизводить аудиофайлы в форматах wav и AAC.
Какие существуют способы доставки аудио и видео на веб-страницы:?
Существуют два способа доставки аудио и видео на веб-страницы: потоковое вещание и полная загрузка. При потоковом вещании аудио- и видеопотоки разбиваются на маленькие пакеты данных, а затем передаются в виде серии последовательных фрагментов. Веб-браузер получает эти фрагменты, а затем воспроизводит аудиоили видеофайл как единое целое. В конечном счете пользователь видит единый, плавный файл. 2-й способ загрузки требует того, чтобы видеофайл был полностью передан на компьютер до того, как начнется его воспроизведение.
Найдите в Интернете аудио- и видеоконвертеры для создания аудио- и видеофайлов, используемых с video и audio тегами!
VSDS конвертер, Total Audio Converter, AVS Video/Audio Converter,Audacity
Определите для себя подходящий инструментарий для преобразования файлов в формате PowerPointв форматы ogg, mp4, webm!
В браузере Firefox установить модуль Firefogg в браузер для ogg. IТиnesPm4. ISpringPresenter 7 forPowerPoint
Лекция 14
Что из себя представляет язык ECMAScript?
JavaScript стандартизован ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript.
Перечислите четыре способа функционального применения JavaScript!
гипертекстовая ссылка (схема URL)
обработчик события (в атрибутах, отвечающих событиям)
подстановка
вставка - контейнер SCRIPT.
В чем суть схемы включения скрипта - URL?
Для того чтобы отличить стандартный переход по протоколу HTTP от перехода, программируемого на JavaScript, разработчики языка ввели новую схему URL - JavaScript:
<A HREF="JavaScript:код_программы">...</A>
<FORM ACTION="JavaScript:код_программы" ...> ... </FORM>
Как скрипт включается в документ для обработки события?
Такие программы, как обработчики событий, указываются в атрибутах контейнеров, с которыми эти события связаны. <div id="layer" ondblclick="colorDiv()">
Подстановка . Подстановки имеют формат: &{код_программы}; и используются в качестве значений атрибутов HTML-контейнеров. Вставка
Для чего и как может использоваться контейнер <SCRIPT>?
Для вставки джава скрипт кода
Для чего в теге SCRIPT используется атрибут async?
браузер при возможности запускает скрипт асинхронно. Т.е., указанный в атрибуте src файл будет выполняться без ожидания загрузки и отображения веб-страницы
Для чего в теге SCRIPT используется атрибут src?
указывает размещение скрипта во внешнем файле
Как в скриптах выглядит создание переменных?
Переменные создаются либо с помощью оператора var вида: var имя-переменной [= выражение-инициализации]; либо при непосредственном присвоении значений оператором присваивания.
Могут ли переменные создаваться без var-оператора?
да
На что ссылается и для каких целей может использоваться оператор this?
Оператор this ссылается к оконному объекту, который содержит документ и его объекты, в т.ч. программу.
Назначение оператора with?
Оператор with является аналогом оператора case-of языка Паскаль:
with (имя-объекта)
{
последовательность-операторов
}
Оператор позволяет непосредственно обращаться к методам и свойствам объекта без использования соответствующего префикса. Если адресуемое свойство или метод отсутствуют у объекта, то выполняется их поиск вверх по иерархии областей видимости.
Как выполняются операторы === и !==?
Операторы ===, !== дают возможность сравнения данных на эквивалентность как по значению так и по типу
В чем отличие выполнения операторов && и &?
хз
Как выглядит и для чего применяется оператор "Итерации по свойствам объекта"?
for(key in obj) {
... obj[key]...
}
Для того, чтобы исключить унаследованные свойства
Как записываются строки-литералы в JavaScript?
могут быть представлены в окружении одинарных или двойных кавычек
Как создаются в скриптах строки-объекты?
Строки-объекты создаются применением оператора new и соответствующего конструктора: var y = new String("John");
Могут ли к обычным строкам-литералам применяться методы строк-объектов?
да
На какие 2 категории разделяются методы работы со строками?
обычные операции над строками
операции преобразования строк в теги HTML.
Самостоятельно рассмотреть примеры использования операторов try/catch/throw, а также continue и break с меткой или без нее!
Еще одной категорией операторов языка JavaScript являются операторы перехода. Как следует из названия, эти операторы заставляют интерпретатор JavaScript переходить в другое место в программном коде. Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции. Оператор continue заставляет интерпретатор пропустить оставшуюся часть тела цикла, перейти обратно в начало цикла и приступить к выполнению новой итерации. В языке JavaScript имеется возможность помечать инструкции именами, благодаря чему в операторах break и continue можно явно указывать, к какому циклу или к какой другой инструкции они относятся.
Оператор throw возбуждает исключение и предназначен для работы в сочетании с операторами try/catch/finally, которые определяют блок программного кода для обработки исключения.