COAP:COAP-2100/week7: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
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]] ===
=== Week 7 ===


==== Topics Covered ====
==== Topics Covered ====


* Web server architectures
* Video with Flash
* Running a webserver on your own PC
** Encoding of Flash videos
* [[HTML5]] for information ...
** Creating Flash files with the video component
* [[HTML forms tutorial]] (continued)
** Adding captions (sub-titles) with [[Timed Text]]
* XML principles and demo of example applications, in particular [[SVG]]
* XML (some principles as explained in the [[Editing XML tutorial]])
* The concept of server-side scripting and web applications


==== Teaching materials ====
==== Teaching materials ====


* [[HTML forms tutorial]] (includes '''both''' JavaScript and server-side scripting with PHP)
* [http://en.wikipedia.org/wiki/Image_file_formats Image File Formats] (Wikipedia)
* [[HTML5]] (just FYI)
<!-- * [[Wiki]] and [[Mediawiki]] (background information and links) -->
* [http://tecfa.unige.ch/guides/te/files/internet-intro.pdf internet-intro.pdf]
* [[Video streaming]], [[Multimedia container format]], [[Codec]] (some short background info with links)
* [[Editing XML tutorial]] (Chapter 2 "XML Principles" only)
* [[Flash video component tutorial]] (only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")


==== Classroom activities ====
==== Classroom activities ====


=== Monday ===
; Monday


; What do we mean by the Internet (part II - web application architectures)  
* Creating Flash videos: [[Flash video component tutorial]]
* 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]].
** Video formats ([[Multimedia container format]])
* [[Internet tutorial]] (first part of the slides above spelled out ...)
** http://video.google.com/videoadvancedsearch (Google video search)
** https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool, FF extension)
** Video encoding for Flash and Timed Text ([[Flash video component tutorial]], only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")


; Using a web server
Code template for timed text:
* Short demo of [[Modular Webserver System]], including installation and configuration discussion
<source lang="actionscript">
* 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".
<?xml version="1.0" encoding="UTF-8"?>
* Finding errors with php
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
** Either look at the log file, i.e. '''./apache2/logs/error.log'''
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
** or make the following change to file '''./php5/php.ini''' on line 538 (needs server restart):
  <head><styling></styling></head>
: ''display_errors = On''
  <body>
* 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.
  <div xml:lang="en">
* If the web server or the mysql server doesn't want to start: You like have other ones running. Kill them !
      <p begin="1" dur="4">Let´s start</p>
* 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
    </div>
* We shall make modifications to the example discussed in [[HTML_forms_tutorial#Processing_forms_with_PHP|Processing forms with PHP]]
  </body>
* 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.
</tt>
** Log file location: '''apache2/logs/error.log'''
</source>
** 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.
Code template for times text (advanced):
* Looking at the PHP configuration and the data that PHP will receive:
<source lang="actionscript">
** 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).
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
    </styling>
  </head>
  <body>
  <div xml:lang="en">
      <p begin="0" dur="9" style="title">Something</p>
      <p begin="30" dur="5">My
        <span tts:backgroundColor="yellow" tts:color="black">
        something</span>
      </p>
      <p begin="35" dur="5">
        <span tts:backgroundColor="transparent"></span>
        Working hard ....
      </p>
      <p begin="40" dur="4">The outside (not my bike)</p>
    </div>
  </body>
</tt>
</source>


; Playing with HTML and PHP
==== Homework 7 ====
* Make sure that the webserver and the database is started (Modular Web Server icon in the status bar)
* Create a new ''quiz'' subdirectory '''under''' the '''mowes/www''' directory. The web server only will serve contents from this place
* 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]]. You also may copy these from [http://tecfa.unige.ch/guides/te/coap2100/files/quiz/ here]. Grab the html and the *.phps file (not the *.php) and rename the *.phps to php.
** 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 ===
Create a Flash video with captions


Topics
* Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end of the film and select an appropriate output format)
* HTML forms processing with PHP (continued)
* Prepare a flash "movie clip" that includes playback with the video component plus captions.
* You can choose any film you like, but preferably one that you made yourself (originality bonus)


* Short introduction to XML
Bonus points: Extra elements in the Flash page, interesting captions, good timing, etc. I.e. the result should look professional and be useful.
** Basic XML principles (see [[XML]] and/or [[Editing XML tutorial]])
** Short demo of important document standards like [[SVG]], [[EPub]], [[Open Packaging Conventions and Office Open XML]] (docx), etc.


; Playing with some SVG
I suggest that those who already turned in 3-4 homeworks skip this exercice. I will not test Flash in the final exam. I only require that you have some very basic understanding of timed text (i.e. use the "p" tag to define start and duration of captions ....)
* Create a little drawing with [http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html SVG-edit], an online editor implemented in JavaScript
* Find a graphic in http://openclipart.org/, save it, then display it in your browser. Make changes with Inkscape.
* (If time left), demo of the XML Exchanger Editor.


; The future of HTML
When you upload the result, make sure to include all files needed to see the Flash clip, i,e, html, swf, component swf, flv, js. To get this right, I suggest to use a new folder for this project.
* Not covered since we don't have HTML5 browsers installed
* You may read [[HTML5]] and if you can, install either Chrome 9beta, IE 9Beta, FF 4Beta or Opera 11 on your own PC. HTML5 is the future and more advanced students ought to start learning it...


=== Homework 7 ===
Due: Wednesday, week 8
 
; Task
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]].
 
* You can reuse elements from the JavaScript (hw 6) exercise. You also could relate the topic of the quiz to the term project.
* 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.
 
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.
 
; Tips
* Validate your HTML code
* Use the server log files for finding PHP errors or reconfigure PHP as explained above and then keep the following line at the start of your PHP code:
: error_reporting(E_ALL);
 
; Evaluation criteria
* 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
* Before Wednesday week 8 class
 
; Submission
* Submit the files (*.html, *.php and if needed *.css, pictures, etc.) to the world classroom


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

Revision as of 20:32, 29 April 2012

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 Covered

  • Video with Flash
    • Encoding of Flash videos
    • Creating Flash files with the video component
    • Adding captions (sub-titles) with Timed Text
  • XML (some principles as explained in the Editing XML tutorial)

Teaching materials

Classroom activities

Monday

Code template for timed text: 

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head><styling></styling></head>
  <body>
   <div xml:lang="en">
      <p begin="1" dur="4">Let´s start</p>

    </div>
  </body>
</tt>

Code template for times text (advanced): 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
    </styling>
  </head>
  <body>
   <div xml:lang="en">
      <p begin="0" dur="9" style="title">Something</p>
      <p begin="30" dur="5">My 
        <span tts:backgroundColor="yellow" tts:color="black">
        something</span>
      </p>
      <p begin="35" dur="5">
        <span tts:backgroundColor="transparent"></span>
        Working hard ....
      </p>
      <p begin="40" dur="4">The outside (not my bike)</p>
    </div>
  </body>
</tt>

Homework 7

Create a Flash video with captions

  • Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end of the film and select an appropriate output format)
  • Prepare a flash "movie clip" that includes playback with the video component plus captions.
  • You can choose any film you like, but preferably one that you made yourself (originality bonus)

Bonus points: Extra elements in the Flash page, interesting captions, good timing, etc. I.e. the result should look professional and be useful.

I suggest that those who already turned in 3-4 homeworks skip this exercice. I will not test Flash in the final exam. I only require that you have some very basic understanding of timed text (i.e. use the "p" tag to define start and duration of captions ....)

When you upload the result, make sure to include all files needed to see the Flash clip, i,e, html, swf, component swf, flv, js. To get this right, I suggest to use a new folder for this project.

Due: Wednesday, week 8

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