Введение в гипермедиа Лекция по дисциплине Программные средства

Скачать презентацию Введение в гипермедиа Лекция по дисциплине Программные средства

713af83c01dcfa62ba251b9759b99346.ppt

Количество слайдов: 40

Введение в гипермедиа Лекция по дисциплине «Программные средства гипермедиа» Подготовил: Д. А. Быстров 3/19/2018

Идея гиперссылки n Сама идея, но не термин, была введена В. Бушем в 1945 году в предложениях по созданию электромеханической информационной системы Меmех, основанной на использовании техники микрофильмирования n n Ванневар Буш Существенной чертой Memex является возможность ассоциативной индексации, то есть возможность немедленного перехода от одного документа (в оригинале - item) к другому, связанному с ним. Когда документы включены в цепочку таких связей, они могут быть просмотрены как страницы обычной книги путем отклонения рычага. Программные средства гипермедиа (c) 2011 Д. А. Быстров

Нелинейный текст n n n В 1965 году Теодор Нельсон ввел в обращение сам термин "гипертекст“ Нельсон определил гипертекст как нелинейный текст Расширение понятия гипертекста за счет других информационных ресурсов, включая графику, аудио- и видеоинформацию, привело к появлению понятия гипермедиа Программные средства гипермедиа (c) 2011 Д. А. Быстров

8 Гипертекст n n Гипертекстом называется текст со встроенными в него гипертекстовыми ссылками Гиперссылка - это адрес другого HTML документа или информационного ресурса Internet Программные средства гипермедиа (c) 2011 Д. А. Быстров

9 Классы медиа-компонентов Медиа-компонент Визуальный ряд Звуковой ряд Текст Рисунок Фотография Анимация Видео Реалистичный звук Синтезированный звук 3 D-объект Программные средства гипермедиа (c) 2011 Д. А. Быстров

10 Гипермедиа от гипертекста n Расширение понятия гипертекста за счет других информационных ресурсов, включая графику, аудио- и видеоинформацию, привело к появлению понятия гипермедиа Гипертекст + Медиа компоненты = Гипермедиа Программные средства гипермедиа (c) 2011 Д. А. Быстров

11 Гипермедиа от мультимедиа n Размещение мультимедиа ресурсов в сети, разбиение мультимедиа контента на части с навигацией с помощью гиперссылок дает гипермедиа систему Мультимедиа + Гиперссылки = Гипермедиа Программные средства гипермедиа (c) 2011 Д. А. Быстров

13 Программные средства гипермедиа n Гипермедиа от гипертекста ¨ Dynamic HTML ¨ AJAX n Гипермедиа от мультимедиа ¨ Active. X и Firefox plugin ¨ Adobe Flash ¨ Виртуальные компьютерные среды Программные средства гипермедиа (c) 2011 Д. А. Быстров

URL – адрес ресурса в Internet URL – Uniform Resource Locator (единообразный локатор ресурса) n URL был изобретён Тимом Бернерсом-Ли в 1990 году в стенах Европейского совета по ядерным исследованиям (CERN) n URL применяется для обозначения адресов почти всех ресурсов Интернета. n Программные средства гипермедиа (c) 2011 Д. А. Быстров

Структура URL <схема>: //<логин>: <пароль>@<хост>: <порт>/<путь> n n n <схема> – схема обращения к ресурсу; протокол <логин> – имя пользователя доступа к ресурсу <пароль> – пароль для с указанного пользователя <хост> – полностью прописанное доменное имя хоста в системе DNS или IP-адрес. <порт> – порт хоста для подключения <путь> – уточняющая информация о месте нахождения ресурса (зависит от протокола) Программные средства гипермедиа (c) 2011 Д. А. Быстров

URL-пути в HTTP-протоколе <файл> ? <парам>=<знач> [ &<парам>=<знач> ] n n n <файл> – путь к файлу <парам> – имя параметра <знач> – значение параметра /search. php? source=chrome&query=train Программные средства гипермедиа (c) 2011 Д. А. Быстров

Кодирование URL n Ограниченный набор ASCII-символов ¨ “A”-”Z”, “a”-”z”, “ 0”-” 9”, “: ”, “/”, “%”, “&”, “? ”, “=“, “#”, “@” n Остальные символы кодируются: ¨ %<шестнадцатеричный код> Программные средства гипермедиа (c) 2011 Д. А. Быстров

Веб-приложение и гипертекст n n Веб-приложение – программная система, построенное на основе технологии «клиент/сервер» , где в качестве сервера используется веб-сервер, а в качестве клиента – веб-броузер Гипертекстовые документы используется для создания пользовательского интерфейса Программные средства гипермедиа (c) 2011 Д. А. Быстров

Язык гипертекстовой разметки HTML n n Язык гипертекстовой разметки HTML (Hyper. Text Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году в качестве одного из компонентов технологии разработки распределенной гипертекстовой системы World Wide Web В качестве основы HTML был взят стандарт языка разметки печатных документов – Standard Generalised Markup Language (SGML) Программные средства гипермедиа (c) 2011 Д. А. Быстров

HTML. Терминология Открывающий тэг Атрибут – задает параметры элемента Значение атрибута Тэг – ключевое слово языка HTML, Some text. вставляет элемент Содержимое тэга Закрывающий тэг Программные средства гипермедиа (c) 2011 Д. А. Быстров

Типы тэгов n Все тэги НТМL по их назначению и области действия можно разделить на следующие основные группы: ¨ определяющие структуру документа; ¨ оформление блоков гипертекста (параграфы, списки, таблицы, картинки); ¨ гипертекстовые ссылки и закладки; ¨ формы для организации диалога; ¨ вызов программ Программные средства гипермедиа (c) 2011 Д. А. Быстров

Основные тэги n <html> </html> – HTML-документ ¨ <head> </head> – информация о документе Основные тэги n – HTML-документ ¨ – информация о документе n – название документа ¨ – тело документа n n n – заголовок первого уровня

– абзац – полужирный текст – курсивный текст – изменение шрифта

Структура HTML-документа <html> <head> <title> Пример HTML-документа </title> <head> <body> <h 1> Пример HTML-документа Структура HTML-документа Пример HTML-документа Пример HTML-документа

Здравствуй, Мир! Ты прекрасен!

Структура HTML-документа и контейнеры Пример HTML-документа Пример HTML-документа Пример HTML-документа

Здравствуй, Мир! Ты прекрасен!

Пример HTML-документа <p> Здравствуй, Мир! Ты прекрасен! <body> </html> HTML-документ состоит из контейнеров, включающих в себя другие контейнеры или простой текст. По сути сам HTML-документ является контейнером Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="<head> n n n n base – определяет базовый путь bgsound – фоновый звук" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-26.jpg" alt="<head> n n n n base – определяет базовый путь bgsound – фоновый звук" /> <head> n n n n base – определяет базовый путь bgsound – фоновый звук link – вставка другого документа meta – вставка дополнительной информации о документе script – вставка программ на скрипте style – описание стилей title – название документа Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Тэги форматирования текста n <h 1> </h 1> – заголовок первого уровня <p> </p>" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-27.jpg" alt="Тэги форматирования текста n <h 1> </h 1> – заголовок первого уровня <p> </p>" /> Тэги форматирования текста n <h 1> </h 1> – заголовок первого уровня <p> </p> – абзац <b> </b> – полужирный текст <i> </i> – курсивный текст <font> </font>– изменение шрифта n <div> n <span> n n – универсальный тэг форматирования блока текста – универсальный тэг форматирования последовательности текста Блок текста (block) ограничен прямоугольником Последовательность текста (inline) – последовательность символов в тексте Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Выравнивание текста Код HTML Описание <p>Текст</p> Добавляет новый параграф, по умолчанию выровненный по левому" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-28.jpg" alt="Выравнивание текста Код HTML Описание <p>Текст</p> Добавляет новый параграф, по умолчанию выровненный по левому" /> Выравнивание текста Код HTML Описание <p>Текст</p> Добавляет новый параграф, по умолчанию выровненный по левому краю. Перед параграфом и после него автоматически добавляются небольшие вертикальные отступы. <p align="center">Текст</p> Выравнивание по центру. <p align="left">Текст</p> Выравнивание по левому краю. <p align="right">Текст</p> Выравнивание по правому краю. <p align="justify">Текст</p> Выравнивание по ширине. <nobr>Текст</nobr> Отключает автоматический перенос строк, даже если текст шире окна браузера. Текст<wbr> Разрешает браузеру делать перенос строки в указанном месте, даже если используется NOBR тег. Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Вставка изображений n <img src="URL" alt="альтернативный текст"> n <img src="sample. gif" width="100" height="111" alt="Исходный" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-29.jpg" alt="Вставка изображений n <img src="URL" alt="альтернативный текст"> n <img src="sample. gif" width="100" height="111" alt="Исходный" /> Вставка изображений n <img src="URL" alt="альтернативный текст"> n <img src="sample. gif" width="100" height="111" alt="Исходный размер"> n <img src="sample. gif" width="200" height="222" alt="Увеличенный размер"> Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Выравнивание изображений Значение Описание align Пример bottom Нижняя граница изображения выравнивается по базовой линии" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-30.jpg" alt="Выравнивание изображений Значение Описание align Пример bottom Нижняя граница изображения выравнивается по базовой линии" /> Выравнивание изображений Значение Описание align Пример bottom Нижняя граница изображения выравнивается по базовой линии текстовой строки. Это значение установлено по умолчанию. left Lorem ipsum dolor sit Изображение располагается по amet, consectetuer левому краю родительского элемента. adipiscing elit. . . middle Середина изображения выравнивается по базовой линии текущей строки текста. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. . . right Изображение выравнивается по правому краю родительского элемента. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. . . top Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. . . Lorem ipsum dolor sit amet, consectetuer adipiscing elit. . . Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Таблица n n n Таблица состоит из строк. Строки состоят из ячеек данных <table>" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-31.jpg" alt="Таблица n n n Таблица состоит из строк. Строки состоят из ячеек данных <table>" /> Таблица n n n Таблица состоит из строк. Строки состоят из ячеек данных <table> – описание таблиц <tr> (Таble Row) – строка таблицы <td> (Таble Data) – ячеек таблицы Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Ссылки n <a href="http: //www. yandex. ru">Поисковая система Яндекс</a> n /demo/ Ссылки называется неполной" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-32.jpg" alt="Ссылки n <a href="http: //www. yandex. ru">Поисковая система Яндекс</a> n /demo/ Ссылки называется неполной" /> Ссылки n <a href="http: //www. yandex. ru">Поисковая система Яндекс</a> n /demo/ Ссылки называется неполной и указывает веб-серверу загружать файл index. html, который находится в корне сайта или папке demo. /images/pic. gif Слэш перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведет на рисунок pic. gif, который находится в папке images. А та в свою очередь размещена в корне сайта. . . /help/me. html Две точки перед именем указывает браузеру перейти на уровень выше в списке каталогов сайта. manual/info. html Если перед именем папки нет никаких дополнительных символов, то она размещена внутри текущего каталога. n n n Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Моделирование навигации n n n Какие страницы может увидеть пользователь? По каким гиперссылкам происходит" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-33.jpg" alt="Моделирование навигации n n n Какие страницы может увидеть пользователь? По каким гиперссылкам происходит" /> Моделирование навигации n n n Какие страницы может увидеть пользователь? По каким гиперссылкам происходит переход между страницами? На какую страницу может перейти пользователь с заданной страницы? Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Схема навигации основана на диаграмме состояний Языка моделирования UML Начальное состояние отмечает стартовую страницу" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-34.jpg" alt="Схема навигации основана на диаграмме состояний Языка моделирования UML Начальное состояние отмечает стартовую страницу" /> Схема навигации основана на диаграмме состояний Языка моделирования UML Начальное состояние отмечает стартовую страницу Веб-сайта Главная страница Выбор книги Этот переход возникает при ошибке Одна HTML-страница Переход по гиперссылке Комментарии Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Простой пример n n n Пользователь просматривает список книг Пользователь выбирает книгу, щелкая на" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-35.jpg" alt="Простой пример n n n Пользователь просматривает список книг Пользователь выбирает книгу, щелкая на" /> Простой пример n n n Пользователь просматривает список книг Пользователь выбирает книгу, щелкая на ссылку Веб-броузер посылает запрос на сервер Сервер обрабатывает запрос, формирует ответ и отправляет его клиенту Пользователь попадает на страницу с детальным описанием книги Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Простой пример Выбор книги <<страница>> Список книг <<страница>> Описание книги Программные средства гипермедиа (c)" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-36.jpg" alt="Простой пример Выбор книги <<страница>> Список книг <<страница>> Описание книги Программные средства гипермедиа (c)" /> Простой пример Выбор книги <<страница>> Список книг <<страница>> Описание книги Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Два типа событий Выбрать книгу <<система>> Доступ запрещен Клиентские события Системные события Программные средства" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-37.jpg" alt="Два типа событий Выбрать книгу <<система>> Доступ запрещен Клиентские события Системные события Программные средства" /> Два типа событий Выбрать книгу <<система>> Доступ запрещен Клиентские события Системные события Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Два типа событий. Пример Авторизация <<страница>> Главная страница <<страница>> Страница авторизации <<страница>> Страница регистрации" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-38.jpg" alt="Два типа событий. Пример Авторизация <<страница>> Главная страница <<страница>> Страница авторизации <<страница>> Страница регистрации" /> Два типа событий. Пример Авторизация <<страница>> Главная страница <<страница>> Страница авторизации <<страница>> Страница регистрации Регистрация <<система>> Неправильный пароль <<страница>> Сообщение об ошибке Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Условные переходы Поиск [книги не найдены] <<страница>> Поиск книг Поиск [найдено несколько книг] Поиск" src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-39.jpg" alt="Условные переходы Поиск [книги не найдены] <<страница>> Поиск книг Поиск [найдено несколько книг] Поиск" /> Условные переходы Поиск [книги не найдены] <<страница>> Поиск книг Поиск [найдено несколько книг] Поиск [найдена одна книг] <<страница>> Список книг Выбор книги <<страница>> Описание книги Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Спасибо за внимание Вопросы? Программные средства гипермедиа (c) 2011 Д. А. Быстров " src="https://present5.com/presentation/713af83c01dcfa62ba251b9759b99346/image-40.jpg" alt="Спасибо за внимание Вопросы? Программные средства гипермедиа (c) 2011 Д. А. Быстров " /> Спасибо за внимание Вопросы? Программные средства гипермедиа (c) 2011 Д. А. Быстров </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="" alt="" /> </p> </div> </div> <div id="inputform"> <script>$("#inputform").load("https://present5.com/wp-content/plugins/report-content/inc/report-form-aj.php"); </script> </div> </p>  </div> </article> </section> <div class="three columns"> <div class="widget-entry"> </div> </div> </div> </div>  <footer id="footer" style="padding: 5px 0 5px;"> <div class="container"> <div class="columns twelve">  <script type="text/javascript"></script> <a href="https://slidetodoc.com/" alt="Наш международный проект SlideToDoc.com!" target="_blank"><img src="https://present5.com/SlideToDoc.png"></a> <script> $(window).load(function() { var owl = document.getElementsByClassName('owl-carousel owl-theme owl-loaded owl-drag')[0]; document.getElementById("owlheader").insertBefore(owl, null); $('#owlheader').css('display', 'inline-block'); }); </script> <script type="text/javascript"> var yaParams = {'typepage': '1000_top_300k', 'author': '1000_top_300k' }; </script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(32395810, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/32395810" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <nav id="top-nav"> <ul id="menu-top" class="top-menu clearfix"> </ul> </nav> </div> </div> </footer> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/present5.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.4'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/jquery.shuffle.js?ver=4.9.26'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.13'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.9.26'></script>  <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/notify.js?ver=1772405368'></script> <script type='text/javascript'> /* <![CDATA[ */ var my_ajax_object = {"ajax_url":"https:\/\/present5.com\/wp-admin\/admin-ajax.php","nonce":"d4c854d092"}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/filer.js?ver=1772405368'></script> </body> </html>