Deel I Multimedia IUW Thema Webdesign 17 november 2014 Christof van Nimwegen
Multimedia: Wat is het?
2
Graphics
3
Graphics: Digitaal op het web Twee typen:
Bitmap (raster)
afbeelding als verzameling pixels
Vector graphics
afbeelding als verzameling geometrische vormen
4
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
5
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 14
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
16
Graphics: Kleur
Graphics: Kleurenblindheid 8 % van de mannen, 0.5% van de vrouwen
Graphics: The power of color
Graphics: Kleur in websites
20
Graphics: Kleur in websites
21
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 23
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
40
Graphics: Vector images - SVG
Scalable Vector Graphics
W3C recommendation Steeds beter ondersteund Bv voor diagrammen
41
Graphics: Vector afbeeldingen (Fonts)
42
Graphics: Resumerend Vector vs Bitmap
Resizing Bitmap
Resizing Vector
Vrij vs rechthoekig
Audio, video en animatie op het web
44
Audio: formaten
Ongecomprimeerd
Lossless compressie
WAV, AIFF, …. Lossless WMA
Lossy Compression
Lossy WMA, MP3, Vorbis, AAC, others
45
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)
48
Video: formaten op WWW
FLV (Flash Video) WMV (Windows Media Video) MPEG-4 MOV (Quicktime) Shockwave RV (RealVideo…) …others, more offline (AVI, MKV, ASF..)
49
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
50
Video: Compressie met MPEG Difference frame, compressie door opslaan verschil
Animatie
Menu’s Transities? Cartoons letterlijk Reclame Games on the web
52
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
53
Animatie
54
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
55
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, embedded zoals alle images
56
Animatie: formaten op WWW
GIF (!) Flash (& Shockwave)
HTML5 + CSS3
Games Video Animaties Menus In development, it ain’t easy!
SVG is ook animeerbaar!! 57
Pauze
58
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
60
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 ………………. 61
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
62
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, ...
63
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 64
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)
65
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 ….. 66
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
68
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!
69
Laat iets zien:
“echo” en “print”
Laat NIET zien: //, # of /*
70
Haakjes en Concateneren
‘ voor lettelijke string, “ voor variabele Concateneren in PHP een “.” :
71
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 ………
72
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 - 20
73
Variabelen Lokaal
BINNEN een functie
Geldt daarbuiten niet
Dus:
Dus: 74
Functies
Ingebouwde functies
Al gezien: “Echo” (laat iets zien), mail, enz.
Zelf functies maken:
75
Variabelen: Globaal
Kan vanaf overal benaderd worden Moet gedeclareerd worden
?
76
Variabelen: Superglobals
PHP Superglobals zijn altijd beschikbaar
$_SERVER, $_FILES, $_SESSION,
Bv:
If statement
Tenminste, als je dit op woensdag of vrijdag laadt
78
Invoer doorgeven vanaf client
Via HTML
