college 4 IUW Multimedia

Deel I: Multimedia
Deel 2: Server Side
Technology
IUW
Thema Web
19 november 2015
Christof van Nimwegen
Huishoudelijk: Procesbeschrijvingen

Het beschrijft het proces wat je als team
doorloopt (de ondernomen acties, planning of
afwijkingen hiervan, wat opgeleverd is, …).

Beschrijf alle genummerde eisen van de 2
opdrachten in je proces beschrijving zodanig dat
ze gemakkelijk en puntsgewijs hierin terug te
vinden zijn.
2
Opdracht Trust Opdracht
Basic Web Skills Opdracht
Huishoudelijk: Procesbeschrijvingen
3
Huishoudelijk: Procesbeschrijvingen

http://www.cs.uu.nl/docs/vakken/b1iuw/opdrachten.html
 Eén voor Opdracht Basic Web Skills (deadline 03-12-15)




Eén voor Opdracht Trust (deadline 21-01-16)
Plaats NU beiden (voor zover ingevuld) online. Doe dit
secuur: download de 2 templates en kopieer ze precies met
de naam die ze al hebben naar je server ruimte, zodat:
http://www.students.science.uu.nl/~1234567/formatprocesbeschrijving-opdracht-trust%202015-2016.docx
http://www.students.science.uu.nl/~1234567/formatprocesbeschrijving-opdracht-basic-web-skills-1.docx
4
Huishoudelijk:

Deadline 1 Trust 26-11





Inleveren: per mail naar [email protected]
De 3 onderdelen in één document!:
[teamnaam]-[studentassistent]-trust1.doc
Vermeld WEL studentnamen-nummer IN document
En: Er staat een PDF met Trust testmateriaal online!
5
Deel 1: Multimedia: Wat is het?
6
Graphics
7
Graphics: Digitaal op het web
Twee typen:

Bitmap (raster)


afbeelding als verzameling pixels
Vector graphics

afbeelding als verzameling
geometrische vormen
8
Graphics: Bitmaps zijn pixels!

Een pixel wordt opgeslagen als binaire code die een kleur representeert

Hoe meer kleur per pixel, en hoe groter het bestand

Een bitmap heeft (eigenlijk) geen fysieke dimensie

Een bitmap heeft wel een pixel-dimensie
9
Graphics: Bitmaps zijn pixels
Ministeck?
Graphics: Lijnen
Een rechte lijn…..
Bestaat als concept wel, en ook op papier,
maar in het geval van pixels kan het niet
altijd
Anti-Aliasing
Een techniek, om toch mooie graphics te
krijgen bij een lagere resolutie. Bijvoorbeeld
bij een lijn zie je op de computer vaak
zogenaamde "trapjes". Door naast deze
trapjes een tussen kleur te zetten lijkt het
trapjes effect minder erg.
Graphics: beeld bewerking

Bewerking waarbij voor elke pixel een nieuwe waarde
berekend wordt
Graphics: beeld bewerking - negatief
Originele afbeelding
Negatief f(p) = Wit - p
Graphics: beeld bewerking - helderheid
Originele afbeelding
Minder helder (per pixel)
Graphics: Pixel point processing- contrast
Originele afbeelding
Hoger contrast
Graphics: Hoe betrouwbaar is het oog?
Graphics: Kleur “erbij verzinnen”
Graphics: Gestalt principes



Ontwikkeld 1e helft 20e
eeuw (Max Wertheimer)
Ordening waargenomen
eenheden tot grotere
gehelen
Gestalt en Web design:

http://www.usabilityweb.nl/
2006/05/gestaltpsychologie
-en-webdesign/
voor- en achtergrond
gelijkenis
nabijheid
18
Graphics: Gestalt-Prägnanz
Simpele dingen zien we het eerst (willen we het eerst zien)!!
Graphics: Gestalt principes
continuïteit
voor- en achtergrond
gelijkenis
geslotenheid
nabijheid
20
Graphics: Kleur
Graphics: Kleurenblindheid
8 % van de mannen, 0.5% van de vrouwen
Graphics: The power of color
Graphics: Kleur in websites
24
Graphics: Kleur in websites
25
Graphics: Kleur in websites
26
Graphics: belang web kleur, bv. online editing
Graphics: Kleur

RGB (red, green, blue) zijn de
additieve primaire kleuren




kleuren van lichtbronnen
pixelkleuren bestaan uit een mix hiervan
schermkleuren gespecificeerd met drie waarden
Gebruikelijk: 1 byte per kleur



range per kleur: 0,255
16,8 miljoen kleuren
mens kan er ongeveer 10 miljoen onderscheiden
28
Graphics: RGB




Op licht gebaseerd
3 additive primaire kleuren
Rood + Groen + Blauw = Wit
Elke mix van 2 is “lichter” dan de losse kleur
Graphics: Direct color vs. Indexed color

Direct:
RGB direct naar
electrons
 255*255*255
: 16.581.375
kleuren

Indexed: met een Palet
CLUT: Color Lookup Table
 Bv. Gif

Graphics: Dithering - suggereren van kleur


Er moet uitgerekend worden welke
combinatie van het beperkte kleurenpalet de
oorspronkelijke kleur kan weergeven.
Stel dat een grijs kleur getoond zou moeten
worden, dan is na dithering de kleuren wit en
zwart dicht tegen elkaar aan gezet, waardoor
het grijs lijkt.
Graphics: Dithering met kleur
Graphics: Kleurdiepte
Het aantal beschikbare kleuren (per pixel) en dus in mijn beeld






1 bit 2¹
2 bit 2²
......
8 bit
16 bit
24 bit
(2 kleuren)
(4 kleuren
(256 kleuren)
(65.536 kleuren)
(> 16.000.000)
True color (3 kanalen van 256)
Graphics: Kleurdiepte

Monochrome graphics 1-bit pixel diepte.
(puur zwart - wit)
Graphics: Kleurdiepte

Grijswaarden graphics: meer pixel diepte (bv 4bit, 16 kleuren)
(alleen wit, grijstinten en zwart)
Graphics: Kleurdiepte

8 bits per pixel: 256 kleuren
Graphics: Kleurdiepte

24 bits per pixel: miljoenen kleuren
Graphics: Bitmap beeldformaten


GIF (compuserve) slechts 256 kleuren, transparantie voor 1
kleur, prima voor simpele afbeeldingen. Lost het ‘rectangular’
probleem deels op, zijn beperkt animeerbaar (animated gif)
JPEG goed met foto’s, kleine files

PNG kwam als alternatief voor GIF, vele kleuren, vaak
ondersteund door browsers, steeds meer gebruikt

Buiten web:

Bitmaps: TIFF, BMP, TGA
Graphics: Compressie
 Waarom?
 Bandbreedte, Opslag
 Lossless compressie
 Geen verlies. Het bestand (beeld) kan exact gereconstrueerd worden
 Omkeerbaar. Bekendste voorbeeld: ZIP
 Essentieel in Medische beeldbestanden, Archivering, software)
 Lossy compressie
 Wanneer informatie-verlies geen probleem is.
 Vaak effectiever dan lossless
 Onomkeerbaar. bekendste voorbeeld: JPEG
Graphics: Lossless compression



Runlength encoding (RLE), puur sequentieel
IPV 12x12 = 144 pixelwaardes:
Analyseer opeenvolging van dezelfde waarden
Nu nog maar 37x pixelwaardes!
Graphics: Lossless compression

LZW: dictionary based
Graphics: Lossy compression - JPEG

Lossles kan eigenlijk met alles / lossy niet: Er wordt data weggehaald
Bekijkt de afbeelding iets meer zoals een mens het zou beschrijven,
kijkende naar gebieden, patronen en kleuren. Informatie uit hoge
frequenties minder belangrijk voor perceptie


Is goed met een groot scala aan en verloop van kleuren
Behaalt goede compressieresultaten, kleine files….(vaak tot 5%)
….Maar is nooit 100% reconstrueerbaar

….Goed oppassen met compression artefacts


Graphics: Vectorafbeeldingen

Een geometrische definitie:
coordinaten-beschrijving

Voordelen:





Goed resizable: resolutie onafhankelijk
Kleine files
Vrije vorm: geen achtergrond
Geschikt voor gebruik bij animaties
Nadelen:



Slecht voor fotorealistiche afbeeldingen,
is cartoon-achtig
Kan niet zonder meer op webpagina
Minder effecten mogelijk
Graphics: Vectoren zijn niet goed voor foto’s
Graphics: Vector afbeelingen


moeten uiteindelijk naar pixels worden vertaald
probleem: eindige grootte pixels


als je een lijn tekent, wordt die hakkelig
oplossing: anti-aliasing (browser-taak!)

voeg grijstinten (overgangstinten) toe
45
Graphics: Vector images - SVG

Scalable Vector
Graphics



W3C recommendation
Steeds beter
ondersteund
Bv voor diagrammen
46
Graphics: Vector afbeeldingen (Fonts)
47
Graphics: Resumerend Vector vs Bitmap
Resizing Bitmap
Resizing Vector
Vrij vs rechthoekig
Audio, video en animatie op het web
49
Audio: formaten

Ongecomprimeerd


Lossless compressie


WAV, AIFF, ….
Lossless WMA
Lossy Compression

Lossy WMA, MP3, Vorbis, AAC, others
50
Audio: MP3

Fraunhofer IIS (http://www.iis.fraunhofer.de)
MPEG: Groep audio- /
videoprofessionals die de
standaard samenstellen

Layer: Mate van
complexiteit van de
compressie
Muziek delen via internet
 Voorheen MP3 sites, later P2P netwerken, en Itunes
 Kleinere bestanden sneller verzonden
Audio: MP3
Perceptuele compressie: maakt gebruik van karakteristieken menselijk oor




Minimum gehoordrempel:
Zachte geluiden worden niet geheel
verwijderd, maar ze hoeven er ook niet
zo nauwkeurig op te staan als de
hardere geluiden.
Masking: Op basis van het principe dat
onze oren geen zachte geluiden
kunnen horen op het moment dat er
een harder geluid klinkt dat erop lijkt.
Joint stereo: Bezuinigen op bitratio
door te veronderstelt links en rechts
vele identieke frequenties > als mono
gecodeerd
Huffman coding veel voorkomende
“geluiden: krijgen kortere bitcodes
(lossless, niet perceptueel)
Video


Registratie van de
beweging in de
werkelijkheid
Sequentie van
afzonderlijke beelden
(still images, stills)
vastgelegd in frames
(24 beelden per
seconde)
53
Video: formaten op WWW







FLV (Flash Video)
WMV (Windows Media Video)
MPEG-4
MOV (Quicktime)
Shockwave
RV (RealVideo…)
…others, more offline (AVI, MKV, ASF..)
54
Video compressie:


Niet: 24 keer een jpeg comprimeren 
Gebruikt redundantie
 veel overlap tussen opeenvolgende beelden
 inter-frame compressie slaat verschillen tussen frames
op
 zwarte pixels: waarde 0 => efficiënte compressie
 Inder frames
 Zoals bij JPEG: maak gebruik van kennis over
menselijke perceptie
 Ook hier geluid comprimeren
55
Video: Compressie met MPEG
Difference frame, compressie door opslaan verschil
Animatie






Menu’s
Transities?
Cartoons letterlijk
Reclame
Games on the web
……
57
Animatie



beweging
simuleren
snel achter elkaar
tonen van een
serie afbeeldingen
(frames)
elk frame toont een
afzonderlijke fase
van de beweging
http://webdesignbook.org/Book/Chapters/Examples/6.html
58
Animatie
59
Animatie

Animatie
 frames → beweging
 kunstmatig geproduceerd

Animatieprincipes veranderen, traditioneel bepaald door
film

Animatieconcept uitgebreid door webtoepassingen
 Kort, niet-lineair, interactief, variabele afspeeltijd

Video
 beweging -> frames
 registratie via camera
60
Animaties: Animated GIF




Sequentie van bitmapped
images in 1 file
256 kleuren (custom palette)
Beweging eenmalig of als loop
Afspelen op website zonder
plug-in
 img element
61
Animatie: formaten op WWW


GIF (!)
Flash (& Shockwave)





HTML5 + CSS3


Games
Video
Animaties
Menus
In development, it ain’t easy!
SVG is ook animeerbaar!!
62
Pauze
63
Deel II:
Server Side
Technology
Tot midden, eind 90’s: Statische pagina’s
Client vraagt om pagina
Internet
Web server stuurt gevraagde
HTML pagina naar client
65
Statische pagina’s



De inhoud blijft altijd hetzelfde, enige manier om dit te
veranderen is de file ZELF aan te passen
Prima voor kleine pagina’s die weinig upgedate worden
Niet handig voor:
 Bankieren
 Zoekmachines
 E-commerce
 User generated content
 Email
 Online gaming
 Social media
 ……………….
66
Dynamische pagina’s
Client vraagt
pagina
Server
runt
script
Script
bouwt
HTML
code
Internet
HTML naar client
gestuurd
[ Bv. ASP / PHP
/…..]
HTML
klaar
om te
sturen
67
Server side scripting

Script: eigenlijk een set instructies

Server side scripts worden uitgevoerd op de
webserver (of application server)

Veel variatie in server side scripting talen

Common Gateway Interface (CGI) (Python,
Perl)

PHP, Ruby, ASP, .NET, ...
68
PHP







Ontwikkeld door Rasmus Lerdorf in 1995
Op basis van een verzameling Perl scripts
 Personal Home Page
 Nu: PHP- Hypertext Preprocessor
Specifiek ontwikkeld voor web development
Perl en C invloeden in syntax en werking
PHP is een filter
 Input: stream met tekst / HTML en PHP code
 Output: stream met tekst, meestal HTML
PHP code wordt vervangen door z'n uitvoer
PHP vergt installatie op de webserver
69
Voordelen PHP








Open source
Laagdrempelig
Veel forums etc.
Gratis
Wordt ondersteund op meeste webservers
Speciaal voor web, volgt trends snel
Geen compilers nodig, alleen tekst
Scrips zelf niet na te gaan (veiligheid)
70
Wat kan ik met PHP?









Formulieren
Opslaan informatie in Database
Opslaan informatie in textfiles
Omgaan met cookies
E-mailen
File management, downloads
Website (enigszins) beveiligen
Niet alleen HTML, maar ook XML, PDF, docs, vele
anderen nog
…..
71
PHP als scripting taal

Goede voorzieningen voor tekstmanipulatie

Reguliere expressies

Veel functies in de core language

Vele tools

Pragmatisch, eenvoudig te leren, it just works

Eén ding is PHP niet...

Elegant
Hoe werkt het: genereer HTML
<html><body>
<?php
echo ‘Test informatiekunde’;
?>
</body></html>
73
Veel aan PHP is herkenbaar

Lijkt op JavaScript (en vooral op Perl)
 variabelen beginnen met $
 ; aan einde statement
 veel gebruikelijke operatoren
 “ ” en ‘ ‘
 “ ” (kan variabele zijn) en ‘ ‘ (letterlijk wat er staat)

Virtual server!
74
Laat iets zien:

“echo” en “print”
Laat NIET zien:
 //, # of /*
75
Haakjes en Concateneren


‘ voor lettelijke string, “ voor variabele
Concateneren in PHP een “.” :
76
Variabelen




$, gevolgd door naam
Case sensitive!!
Na $ komt _ of letter
Daarna, cijfers, of andere letters







Integers (1,2,3)
Floating point (3.14)
Boolean (true or false)
String (“informatiekunde”)
Resource (bv. Database verbinding)
Array
………
77
Variabelen




Zelf maken
Hoeven niet eerst gedeclareerd te worden
Ook type wordt getermineerd
Variabele: “$” teken



Bv.:
Of:
Of gecombineerd:
$txt="Hallo Utrecht";
$mooinummer = 100
$jong = $christofsleeftijd - 25
78
Variabelen
Lokaal

BINNEN een
functie

Geldt
daarbuiten niet

Dus:

Dus:
79
Functies

Ingebouwde functies


Al gezien: “Echo” (laat iets zien), mail, enz.
Zelf functies maken:
80
Variabelen: Globaal


Kan vanaf overal benaderd worden
Moet gedeclareerd worden
?
81
Variabelen: Superglobals

PHP Superglobals zijn altijd beschikbaar

$_SERVER, $_FILES, $_SESSION,

Bv:
If statement
Tenminste, als je dit op
woensdag of vrijdag
laadt 
83
Invoer doorgeven vanaf client



Via HTML <form> element
 action: naam PHP pagina
 je kunt ook hidden input fields gebruiken
 method: POST of GET
GET: parameters zichtbaar in URL request (data halen)
 handig voor bookmarking, linking
POST: onzichtbaar, meer data
 is (wat) veiliger dan GET
84
Dus:
Server runt
“hallo.php”
Client stuurt data
naar server
HTML
gebouwd,
terug naar
client
85
POST: Invoer doorgeven vanaf client
Christof
Utrecht
HTML
IN BROWSER
PHP
86
Files schrijven op de server

Kan in een database



Maken, lezen en schrijven in files op server




Veelgeziene combinatie is PHP en MySQL (ook gratis)
Niet op ingegaan hier
fopen(), fclose(), fwrite
bv.: fopen("test.txt","a")—opent file om data aan einde toe
te voegen (‘append’)
r, r+, w, a, a+
Let bij schrijfacties op toegangsrechten op server
87
File schrijven
Christof
Utrecht
HTML
IN BROWSER
PHP
88
Sessions


State in de gedaante van generieke session
data
De session data is opgeslagen op de server




In een file of in een database
Minimale identifier ping-pongt heen en weer
Script uitgevoerd in context van de session data
PHP ondersteunt op transparante wijze
sessions


PHPSESSID cookie bevat meestal de session
identifier
Bijvoorbeeld: vgdo5afs4o220s6d991cr1nhg0
Nog wat handige zaken
<?php
$to = "[email protected]";
$subject = "Test mail";
$message = "Hello! This is a simple email message.";
$headers = "From: [email protected]";
mail($to,$subject,$message,$headers);
?>

functies



mail()
date() met heel veel formatting options
time(): secondes sinds 1 januari 1970, 00:00:00
90
Vragen?
91