COAP:COAP-2100/week7: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
=== Week 7 [[Help:COAP-2100|COAP 2100]] ===


==== Topics Covered ====
=== Week 7  ===


* Web server architectures
==== Topics ====
* Running a webserver on your own PC
* [[HTML5]] for information ...
* [[HTML forms tutorial]] (continued)
* XML principles and demo of example applications, in particular [[SVG]]
* The concept of server-side scripting and web applications


==== Teaching materials ====
* Nice HTML5/SVG site: http://middle-earth.thehobbit.com/ (Read [http://www.html5rocks.com/en/tutorials/casestudies/hobbit-front-end/ The Front-end of Middle-earth])
* Video editing
* Using HTML5 Players
* Creating HTML5 captions with WebVTT
* Dealing with a [[JavaScript]] library
* Creating Screencasts
* (Simple) editing video files


* [[HTML forms tutorial]] (includes '''both''' JavaScript and server-side scripting with PHP)
; Discussion of homework, term project, mid term
* [[HTML5]] (just FYI)
* Mid-term feedback
* [http://tecfa.unige.ch/guides/te/files/internet-intro.pdf internet-intro.pdf]
* [[COAP:COAP-2100/term project|term project]]
* [[Editing XML tutorial]] (Chapter 2 "XML Principles only)
* [[COAP:COAP-2100/exams|exams]]


==== Classroom activities ====
==== Monday ====


=== Monday ===
* Recall of HTML5 video principles (week 6)


; What do we mean by the Internet (part II - web application architectures)
* Video editing
* Slides used: [http://tecfa.unige.ch/guides/te/files/internet-intro.pdf internet-intro.pdf]. I also just may use pictures from the [[HTML forms tutorial]].
** [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker] (MovieMake download)
* [[Internet tutorial]] (first part of the slides above spelled out ...)
** [http://windows.microsoft.com/en-us/windows-live/movie-maker#t1=movies Short help] at MS
** [http://www.apple.com/mac/imovie/ Imovie] (download/propaganda at Apple)


; Using a web server
* Screencasting
* Short demo of [[Modular Webserver System]], including installation and configuration discussion
** Use or download [http://www.screencast-o-matic.com/ ScreenCast-O-Matic]
* To start the webserver, go to the mowes directory and click '''mowes.exe'''. Make sure that no other web server is running. Also shut down applications like Skype that do grab the "webserver port".
** See also [[Screencast]] (includes some links)
* Finding errors with php
** Either look at the log file, i.e. '''./apache2/logs/error.log'''
** or make the following change to file '''./php5/php.ini''' on line 538 (needs server restart):
: ''display_errors = On''
* Web hosting (demo by a student ?) and file transfer. What's different between a web server on a PC, a web hosting provider, and a server you own.
* If the web server or the mysql server doesn't want to start: You like have other ones running. Kill them !
* If you see "Access denied": Go to the www directory and kill the '''.htacess''' file.


; Processing forms with PHP - a few things that you should know
* Video and audio converters
* We shall make modifications to the example discussed in [[HTML_forms_tutorial#Processing_forms_with_PHP|Processing forms with PHP]]
** [http://www.online-convert.com/ Online-convert.com] Online converter service for various file formats.
* Make sure to understand that you '''must''' either look at log files or change the PHP configuration if you plan to develop some PHP code and deal with errors.
** [http://www.onlinevideoconverter.com/ OnlineVideoConverter.com]. Online converter. Heavy adds.
** Log file location: '''apache2/logs/error.log'''
** Install [http://firefogg.org/ FireOgg], a Firefox plugin for creating ogg and webm video files
** If you change the php.ini file or one of the options in the Mowes control panel, you will have to restart the server. Also see the access denied problem above.
* Looking at the PHP configuration and the data that PHP will receive:
** Insert the following line of code at the end of your PHP code: ''phpinfo();'' and look at the ''PHP Variables'' (reload the file and then scroll down to end).


; Playing with HTML and PHP
* HTML5 Captions
* Make sure that the webserver and the database is started (Modular Web Server icon in the status bar)
** Track languages: SRT, WebVTT, [[Timed Text]], etc.
* Create a new ''quiz'' subdirectory '''under''' the ''mowes/www''' directory. The web server only will serve contents from this place
** [[WebVTT]] (A video track language)
* Create two files: '''quiz.html''' and '''quiz-processing.php''' using the example code from [[HTML_forms_tutorial#Processing_forms_with_PHP|Processing forms with PHP]].
** Using JavaScript libraries
** If you are using Kompozer: Copy/Paste into the '''source''' window. Also, you probably need Kompozer 0.8xbeta to edit the PHP file. Else just use a text editor like NoteTab.
* Look at the files by opening the following URL: http://localhost/quiz/
* Make changes to the HTML and PHP and reload.


=== Wednesday ===
; LeanBackPlayer exercise


Topics
* [http://leanbackplayer.com/ LeanBack Player]
* HTML forms processing with PHP (continued)
* Download from [http://leanbackplayer.com/player_download.html?type=player here] and unzip the library within a folder that you could name "project6".


* Short introduction to XML
* Create the player code with the [http://leanbackplayer.com/generator/ HTML5 Generator].
** Basic XML principles (see [[XML]] and [[Editing XML tutorial]]
** Tick most everything except autoplay and loop
** Short demo of important document standards like [[SVG]], [[E-Pub]], [[Open Packaging Conventions and Office Open XML]] (docx), etc.
** You already can substitute the video file names (but you also can do that later). We suggest doing it ''now'', e.g. use myvideo.mp4, myvideo.webm, etc.
** Keep the browser tab open (you will need to copy/paste the code)


* The future of HTML
* In the directory you just created, create a new HTML5 file using the template below:
** [[HTML5]] (if you can, install either Chrome 9beta, IE 9Beta, FF 4Beta or Opera 11)
<source lang="XML">
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>HTML 5 video</title>


==== Homework 7 ====
    <!-- Insert the header code about here and kill this line -->
 
  </head>
    <body>
 
      <h1>Title that you should set </h1>
      <p>Intro that you should change ....</p>
 
  <!-- Insert the body code about here and kill this line -->
 
 
      <hr/>
      <a href="http://validator.w3.org/">W3C validator</a>
    </body>
</html>
</source>
 
* Fix the URLs in the code:
** Reaplce the abolute "http://yourdomain.com/..." URL by "js.player" and css.player. '''Look at the code and think !'''.
** Change the name of the video files if needed.
** Change the name of the poster files, i.e. substitute "http://leanbackplayer.com/videos/poster/elephants_dream_640x360.jpg" by "myposter.jpg".
 
* Test: If the video does ''not'' show then you likely:
** must have put the JS  and CSS libraries in some other place (not the same directory). Fix the URLs, '''look''' at your directory !
** must have deleted some important line of code
** must have have syntax errors: validate your code
** Tip: Open the error console in your browser: In Firefox: Tools->Web Developer->Error console
 
; Using track with LeanbackPlayer
* See [[WebVTT]]
* Look at the code of http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html
** Code below is taken from this file and should be inserted right after the source elements
 
Track elements
<source lang="XML">
<track enabled="true" kind="subtitles" label="EN"
      src="subtitles_en.srt" srclang="en" type="text/x-srt"/>
<track enabled="true" kind="subtitles" label="EN VTT"
      src="subtitles_en.vtt" srclang="en" type="text/vtt"/>
<track enabled="true" kind="subtitles" label="FR"
      src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>
</source>
WebVTT template to copy/paste into a file called something like ''subtitles_en.vtt''
* Live example: http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt
 
<source lang="text">
WEBVTT
 
Introduction
00:00:01.000 --> 00:01:10.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour
 
Disclaimer
00:01:10.000 --> 00:02:10.000
This is just a track demo using VTT
</source>
 
; Optional
* [[Javascript tutorial - basics]]
 
 
 
==== Wednesday ====
 
'''1) Exam/term project Q/A'''


; Task
'''(2) WebVTT hands-on'''
Create a PHP program that can process a simple quiz made with radio buttons. In addition, it should include 1-2 text input fields that ask for a name. Start from the example presented in the [[HTML forms tutorial]].
* Get the HTML file done on Monday and add captions files, look at [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html this example]
* You can start from this VTT file: [http://tecfa.unige.ch/guides/html/html5-video/subtitles_en.vtt subtitles_en.vtt] (rename it if necessary)


* You can reuse elements from the JavaScript (hw 6) exercise. You also could relate the topic of the quiz to the term project.  
If you missed class:
* You may use questionnaire items from other sources, but do '''not plagiarize'''. If you reuse assets from another source, cite the source. Plagiarism is simply not accepted and will be sanctioned.
* Download and dezip [http://leanbackplayer.com/player_download.html?type=player LeanBack Player]
* Save the following file and start from there: [http://tecfa.unige.ch/guides/html/html5-video/html5-video-track-leanbackplayer.html html5-video-track-leanbackplayer.html]


Note: CS students familiar with HTML forms and PHP can use other HTML forms but be warned that, for example,  processing checkboxes is more difficult.
'''(3) Creating screencasts:'''
* http://www.screencast-o-matic.com


; Tips
'''(4) Video and audio editing (part II)'''
* Validate your HTML code
* Use the server log files for finding PHP errors or keep the following line at the start of your PHP code:
error_reporting(E_ALL);


; Evaluation criteria
* [http://windows.microsoft.com/en-us/windows7/products/features/movie-maker Windows Movie Maker]
* Ergonomics and content (does the quiz "make sense" and is it interesting)
* User experience (does it look good)
* HTML and CSS code (is it valid)
* Style and presentation
* PHP (is your code running, does it compute ok)


; Due
==== Homework 7 ====
* Before Wednesday week 8 class


; Submission
None, but see homework 6 announced in [[COAP:COAP-2100/week6|week 6]]
* Submit the files (*.html, *.php and if needed *.css, pictures, etc.) to the world classroom


[[Category: COAP 2100]]
[[Category: COAP 2100]]

Latest revision as of 21:43, 25 February 2014

COAP 2100
COAP 2100 Archive
COAP:COAP-2100
COAP:COAP-2100/exams
COAP:COAP-2100/term project
COAP:COAP-2100/week1
COAP:COAP-2100/week2
COAP:COAP-2100/week3
COAP:COAP-2100/week4
COAP:COAP-2100/week5
COAP:COAP-2100/week6
COAP:COAP-2100/week7
COAP:COAP-2100/week8

Week 7

Topics

Discussion of homework, term project, mid term

Monday

  • Recall of HTML5 video principles (week 6)
  • HTML5 Captions
    • Track languages: SRT, WebVTT, Timed Text, etc.
    • WebVTT (A video track language)
    • Using JavaScript libraries
LeanBackPlayer exercise
  • LeanBack Player
  • Download from here and unzip the library within a folder that you could name "project6".
  • Create the player code with the HTML5 Generator.
    • Tick most everything except autoplay and loop
    • You already can substitute the video file names (but you also can do that later). We suggest doing it now, e.g. use myvideo.mp4, myvideo.webm, etc.
    • Keep the browser tab open (you will need to copy/paste the code)
  • In the directory you just created, create a new HTML5 file using the template below:
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/> 
    <title>HTML 5 video</title>

    <!-- Insert the header code about here and kill this line -->

  </head>
    <body>

      <h1>Title that you should set </h1>
      <p>Intro that you should change ....</p>

   <!-- Insert the body code about here and kill this line -->


      <hr/>
      <a href="http://validator.w3.org/">W3C validator</a> 
    </body>
</html>
  • Test: If the video does not show then you likely:
    • must have put the JS and CSS libraries in some other place (not the same directory). Fix the URLs, look at your directory !
    • must have deleted some important line of code
    • must have have syntax errors: validate your code
    • Tip: Open the error console in your browser: In Firefox: Tools->Web Developer->Error console
Using track with LeanbackPlayer

Track elements 

	<track enabled="true" kind="subtitles" label="EN"
	       src="subtitles_en.srt" srclang="en" type="text/x-srt"/>
	<track enabled="true" kind="subtitles" label="EN VTT"
	       src="subtitles_en.vtt" srclang="en" type="text/vtt"/>
	<track enabled="true" kind="subtitles" label="FR" 
	       src="subtitles_fr.vtt" srclang="fr" type="text/vtt"/>

WebVTT template to copy/paste into a file called something like subtitles_en.vtt 

WEBVTT

Introduction
00:00:01.000 --> 00:01:10.000
Wikipedia is a great adventure. It may have
its shortcomings, but it is the largest collective
knowledge construction endevour

Disclaimer
00:01:10.000 --> 00:02:10.000
This is just a track demo using VTT
Optional


Wednesday

1) Exam/term project Q/A

(2) WebVTT hands-on

  • Get the HTML file done on Monday and add captions files, look at this example
  • You can start from this VTT file: subtitles_en.vtt (rename it if necessary)

If you missed class:

(3) Creating screencasts:

(4) Video and audio editing (part II)

Homework 7

None, but see homework 6 announced in week 6

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week7&oldid=51705"