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

Автор работы: Пользователь скрыл имя, 27 Июня 2013 в 13:46, курсовая работа

Описание работы

Цель – составление кроссплатформенного лабораторного практикума.
Теоретическое исследование цели дало возможность сформулировать гипотезу, согласно которой составление лабораторного практикума будет более результативным в том случае, если будет учтена кроссплатформенность.
В соответствии с целью и гипотезой исследования были поставлены следующие задачи:
1. Анализ учебной, научной и методической литературы по теме исследования.
2. Систематизация теоретического и подбор задачного материала.

Скачать архив (50.16 Кб) Сколько стоит заказать работу?
Файлы: 1 файл

Диплом, окончательный вариант.doc

— 219.00 Кб (Скачать файл)

Наберите в редакторе  текст следующего HTML-документа:

 

 

<html>

 

<head>

<title> Вставка изображения </title>

 

</head>

<body>

 

<H1> Зимний пейзаж </H1>

 

<p><center><img src=”img/волк.jpg” alt=”это изображение волка”></center></p>

 

<p><center><img src=”img/фрукт.jpg” alt=”это изображение фрукта”></center></p> 

 

<p><center><img src=”img/безмятежность.jpg” alt=”это безмятежность”></center></p>

 

</body>

</html>

 

Сохраните документ с  именем пример4_1.htm, откройте в браузере.

 

Обтекание графики  текстом в документе html

Если хотите, чтобы  графический рисунок органически вписывался в дизайн вашей Вэб-страницы, то в этом вам поможет атрибут ALIGN тэга <IMG>.

Этот атрибут допускает  задание двух значений - left right.

Значение left заставляет браузер помещать изображение слева  от текста, а right - справа от него. Если надо, чтобы форматированию подвергался только определенный фрагмент текста, следует применить тэг BR с атрибутом CLEAR, указывающими позицию в тексте, начиная с которой действие механизма обтекания графики текстом отменяется. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики.

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

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

Наберите в редакторе  текст следующего HTML-документа:

 

<html>

 

<head>

<title> Вставка изображения </title>

 

</head>

<body>

 

<H1> Зимний пейзаж </H1>

 

<p><center><img src=”img/волк.jpg”  alt=”это изображение волка”></center></p>

 

<p><center><img src=”img/фрукт.jpg” alt=”это изображение фрукта”></center></p>

 

<p><center><img src=”img/безмятежность.jpg” alt=”это безмятежность”></center></p>

 

</body>

</html>

 

Откройте в редакторе  файл и сохраните его под именем web10.html. В новом документе измените размеры рисунка в два раза.

 

 

<HTML>

 

<HEAD>

<TITLE>Моя персональная  страничка </TITLE>

</HEAD>

<BODY background =../images/pic2.jpg>

<p><FONT SIZE=+3><b> На  данной страничке текст и изображения  будут располагаться на фоне "обоев"</b>

</FONT></p>

<center> <img src="../images/pic3.jpg" width=250 height=150></center>

<p>Изображение увеличено  в три раза – WIDTH = 250 pix., HEIGHT=150 pix.

</BODY>

</HTML>

Посмотрите как выглядит изображение на экране.

 

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

Теги <audio> и <video>

Ну и ещё одна возможность - это теги <audio> и <video>. Данные элементы позволяют вставлять в страницу аудио или видео контент одним тегом.

 

Например так:

 

<video width="300" height="200" poster="posters/poster1.jpg" controls="controls">

<source src="video/123.ogv"  type='video/ogg;  codecs="theora, vorbis"'>

Таки да, у вас браузер  не поддерживает HTML5-тег Video...

</video>

С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег <audio> на ваших сайтах.

Тег <audio> поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.

 

<audio controls>

  <source src="sound.ogg">

  <source src="sound.mp3">

</audio>

При воспроизведении  файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload. Он может принимать 3 значения:

none — если вы не  хотите использовать буфер файлов;

auto — если вы хотите, чтобы браузер беферизировал  файл целиком;

metadata — для загрузки  лишь служебной информации (продолжительность  звучания и др.).

Итак, чтобы видео появилось на вашей веб-страничке пишем следующий код:

<video>

  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />

</video>>

 

Сразу обратим внимание на тэг < source >, который позволяет включать видео разных форматов, что важно в тех случаях когда один из них не поддерживается тем или иным браузером.

 

Само собой есть и  более простой вариант вставки  видео:

<video src="movie.webm"></video>

А теперь стоит сказать  об еще одной важной вещи. Не забудьте выставить верный MIME type в заголовках Content-Type на вашем сервере. Иначе видео либо не будет вообще работать, либо будет работать не у всех. В случае Apache все решается добавлением следующих строк в httpd.conf:

 

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

 

Если же вы работает с Google App Engine, то для каждого видео  формата в файл app.yaml вам надо добавить запись вида:

- url: /(.*\.ogv)

static_files: videos_folder/\1

mime_type: video/ogg

upload: videos_folder/(.*\.ogv)

 

 

И еще одна очень важная вещь, о которой стоит упомянуть. Надо указывать значения параметра type в тэге source, для того чтобы браузер  автоматически смог распознать нужный формат и подгрузить именно его, что  позволит увеличить производительность.

Видео файл в любом  из видео форматов, следует воспринимать как zip-архив содержащий видео поток  и аудио поток. Вот три видео  формата, наиболее распространенных в  сети:

mp4 = H.264 + AAC

.ogg/.ogv = Theora + Vorbis

.webm = VP8 + Vorbis

 

 

Задание:

На примере предыдущих лабораторных работ, придумать сочетание  картинок, но вместо текста под ними будут аудио записи. Содержание на ваш выбор.

 

ГЛАВА 3 МЕТОДИЧЕСКАЯ ПРОГРАММА

     

§ 3.1 СОДЕРЖАНИЕ ПРОГРАММЫ

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

Обучение начинается с вводных  лекций.

Изучение основного раздела  начинается с работы со структурой документа HTML 5. На примерах работы учащиеся получают первоначальные навыки и умения  работы с web-страницами.

 

Содержание программы  представлено в таблице:

Раздел

Цель

1. Вводный

Ознакомление:

  • С начальными знаниями html 5;
  • С основными элементами оформления текста;

2. Основной

Разработка  подробной структуры документа HTML 5.

Работа с тегами для  структурирования текста. Создание начального эскиза. Элементы в рамках языка HTML 5.

Таблицы и табличные  данные.

Роль табличных данных, для построения документа HTML 5.

Работа с  изображениями.

Понятие изображение, как  способа оформления документа HTML 5. Развитие культуры использования изображений.

Теги <audio> и <video>.

Способы использования  аудио и видео, как расширения диапазона средств языка HTML 5. 

3. Заключительный

Итоги работы студентов.


 

 

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

В результате обучения учащиеся узнают и освоят:  

    • первоначальные сведения о документах HTML 5;
    • назначение тегов;
    • приемы работы с CSS3;
    • основные элементы таблиц;
    • приемы работы с редакторами HTML кода;
    • приемы использования таблиц и табличных стилей;
    • правила пользования тегов;
    • работу с тегами <audio> и <video>;
    • простейшие  приемы и элементы создания web-страниц.

 

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

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

 

 

 

 

 

 

ЗАКЛЮЧЕНИЕ

 

С развитием информационных технологий появилось множество  программного обеспечения, позволяющего работать с документами HTML 5. Целый ряд вычислительных пакетов, таких как BlueGriffon, Komodo Edit, jEdit имеют огромный инструментарий. Специальное программное обеспечение значительно упрощают процесс работы.

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

Проанализировав учебную, научную и методическую литературу был систематизирован теоретический  и подобран задачный материал по теме исследования.

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

Результаты выпускной квалификационной работы могут быть использованы как преподавателями в рамках дисциплины «Исследование операций», так и студентами при выполнении индивидуальных заданий.




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