Deel I Multimedia. IUW Thema Webdesign 17 november 2014 Christof van Nimwegen

Transcriptie

1 Deel I Multimedia IUW Thema Webdesign 17 november 2014 Christof van Nimwegen

2 Multimedia: Wat is het? 2

3 Graphics 3

4 Graphics: Digitaal op het web Twee typen: Bitmap (raster) afbeelding als verzameling pixels Vector graphics afbeelding als verzameling geometrische vormen 4

5 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

6 Graphics: Bitmaps zijn pixels Ministeck?

7 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.

8 Graphics: beeld bewerking Bewerking waarbij voor elke pixel een nieuwe waarde berekend wordt

9 Graphics: beeld bewerking - negatief Originele afbeelding Negatief f(p) = Wit - p

10 Graphics: beeld bewerking - helderheid Originele afbeelding Minder helder (per pixel)

11 Graphics: Pixel point processing- contrast Originele afbeelding Hoger contrast

12 Graphics: Hoe betrouwbaar is het oog?

13 Graphics: Kleur erbij verzinnen

14 Graphics: Gestalt principes Ontwikkeld 1e helft 20e eeuw (Max Wertheimer) Ordening waargenomen eenheden tot grotere gehelen Gestalt en Web design: /05/gestaltpsychologie -en-webdesign/ voor- en achtergrond gelijkenis nabijheid 14

15 Graphics: Gestalt-Prägnanz Simpele dingen zien we het eerst (willen we het eerst zien)!!

16 Graphics: Gestalt principes continuïteit voor- en achtergrond geslotenheid gelijkenis nabijheid 16

17 Graphics: Kleur

18 Graphics: Kleurenblindheid 8 % van de mannen, 0.5% van de vrouwen

19 Graphics: The power of color

20 Graphics: Kleur in websites 20

21 Graphics: Kleur in websites 21

22 Graphics: belang web kleur, bv. online editing

23 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

24 Graphics: RGB Op licht gebaseerd 3 additive primaire kleuren Rood + Groen + Blauw = Wit Elke mix van 2 is lichter dan de losse kleur

25 Graphics: Direct color vs. Indexed color Direct: RGB direct naar electrons 255*255*255 : kleuren Indexed: met een Palet CLUT: Color Lookup Table Bv. Gif

26 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.

27 Graphics: Dithering met kleur

28 Graphics: Kleurdiepte Het aantal beschikbare kleuren (per pixel) en dus in mijn beeld 1 bit 2¹ (2 kleuren) 2 bit 2² (4 kleuren... 8 bit (256 kleuren) 16 bit ( kleuren) 24 bit (> ) True color (3 kanalen van 256)

29 Graphics: Kleurdiepte Monochrome graphics 1-bit pixel diepte. (puur zwart - wit)

30 Graphics: Kleurdiepte Grijswaarden graphics: meer pixel diepte (bv 4bit, 16 kleuren) (alleen wit, grijstinten en zwart)

31 Graphics: Kleurdiepte 8 bits per pixel: 256 kleuren

32 Graphics: Kleurdiepte 24 bits per pixel: miljoenen kleuren

33 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

34 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

35 Graphics: Lossless compression Runlength encoding (RLE), puur sequentieel IPV 12x12 = 144 pixelwaardes: Analyseer opeenvolging van dezelfde waarden Nu nog maar 37x pixelwaardes!

36 Graphics: Lossless compression LZW: dictionary based

37 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

38 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

39 Graphics: Vectoren zijn niet goed voor foto s

40 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

41 Graphics: Vector images - SVG Scalable Vector Graphics W3C recommendation Steeds beter ondersteund Bv voor diagrammen 41

42 Graphics: Vector afbeeldingen (Fonts) 42

43 Graphics: Resumerend Vector vs Bitmap Resizing Bitmap Resizing Vector Vrij vs rechthoekig

44 Audio, video en animatie op het web 44

45 Audio: formaten Ongecomprimeerd WAV, AIFF,. Lossless compressie Lossless WMA Lossy Compression Lossy WMA, MP3, Vorbis, AAC, others 45

46 Audio: MP3 Fraunhofer IIS ( 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

47 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)

48 Video Registratie van de beweging in de werkelijkheid Sequentie van afzonderlijke beelden (still images, stills) vastgelegd in frames (24 beelden per seconde) 48

49 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

50 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

51 Video: Compressie met MPEG Difference frame, compressie door opslaan verschil

52 Animatie Menu s Transities? Cartoons letterlijk Reclame Games on the web 52

53 Animatie beweging simuleren snel achter elkaar tonen van een serie afbeeldingen (frames) elk frame toont een afzonderlijke fase van de beweging 53

54 Animatie 54

55 Animatie Animatie frames beweging kunstmatig geproduceerd Video beweging -> frames registratie via camera Animatieprincipes veranderen, traditioneel bepaald door film Animatieconcept uitgebreid door webtoepassingen Kort, niet-lineair, interactief, variabele afspeeltijd 55

56 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

57 Animatie: formaten op WWW GIF (!) Flash (& Shockwave) Games Video Animaties Menus HTML5 + CSS3 In development, it ain t easy! SVG is ook animeerbaar!! 57

58 Pauze 58

59 Deel II: Server Side Technology

60 Tot midden, eind 90 s: Statische pagina s Client vraagt om pagina I n t e r n e t Web server stuurt gevraagde HTML pagina naar client 60

61 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 Online gaming. 61

62 Dynamische pagina s Client vraagt pagina Server runt script [ Bv. ASP / PHP /..] I n t e r n e t Script bouwt HTML code HTML naar client gestuurd HTML klaar om te sturen 62

63 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

64 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

65 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

66 Wat kan ik met PHP? Formulieren Opslaan informatie in Database Opslaan informatie in textfiles Omgaan met cookies en File management, downloads Website (enigszins) beveiligen Niet alleen HTML, maar ook XML, PDF, docs, vele anderen nog.. 66

67 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

68 Hoe werkt het: genereer HTML <html><body> <?php echo Test informatiekunde ;?> <body><html> 68

69 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

70 Laat iets zien: echo en print Laat NIET zien: //, # of /* 70

71 Haakjes en Concateneren voor lettelijke string, voor variabele Concateneren in PHP een. : 71

72 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

73 Variabelen Zelf maken Hoeven niet eerst gedeclareerd te worden Ook type wordt getermineerd Variabele: $ teken Bv.: $txt="hallo Utrecht"; Of: $mooinummer = 100 Of gecombineerd: $jong = $christofsleeftijd

74 Variabelen Lokaal BINNEN een functie Geldt daarbuiten niet Dus: Dus: 74

75 Functies Ingebouwde functies Al gezien: Echo (laat iets zien), mail, enz. Zelf functies maken: 75

76 Variabelen: Globaal Kan vanaf overal benaderd worden Moet gedeclareerd worden? 76

77 Variabelen: Superglobals PHP Superglobals zijn altijd beschikbaar $_SERVER, $_FILES, $_SESSION, Bv:

78 If statement Tenminste, als je dit op woensdag of vrijdag laadt 78

79 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 79

80 Dus: Server runt hallo.php Client stuurt data naar server HTML gebouwd, terug naar client 80

81 POST: Invoer doorgeven vanaf client Christof Utrecht HTML IN BROWSER PHP 81

82 Files schrijven op de server Kan in een database Veelgeziene combinatie is PHP en MySQL (gratis) Niet op ingegaan hier Maken, lezen en schrijven in files op server 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 82

83 File schrijven Christof Utrecht HTML IN BROWSER PHP 83

84 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

85 Nog wat handige zaken functies mail() <?php $to = "c.vannimwegen@uu.nl"; $subject = "Test mail"; $message = "Hello! This is a simple message."; $headers = "From: c.vannimwegen@uu.nl"; mail($to,$subject,$message,$headers);?> date() met heel veel formatting options time(): secondes sinds 1 januari 1970, 00:00:00 85

86 Vragen? 86