INTERNET STANDAARDEN HC1

Transcriptie

1 9 September 2008 INTERNET STANDAARDEN HC1 Wat is het internet? Wat zijn standaarden? Wat gaan we doen dit jaar? Hogeschool van Amsterdam Instituut voor Interactieve Media

2 Hogeschool van Amsterdam Instituut voor Interactieve Media 2

4 RULES OF ENGAGEMENT Als wij praten zijn jullie stil, bij vragen steek je je hand op; Een laptop is enkel nodig als wij dat zeggen; Koffie (cq drinken) wordt gedoogd, eten niet; Ruim je eigen troep op; Je pakt pas in als wij aangeven dat de les voorbij is; Ja, je mag naar het toilet. Hogeschool van Amsterdam Instituut voor Interactieve Media 17

5 VANDAAG Internet Standaarden (PIST) Internet Standaardisering Ontwikkeling van websites XHTML Hogeschool van Amsterdam Instituut voor Interactieve Media 18

6 INTERNET STANDAARDEN (PIST) XHTML en CSS Semantiek en Scheiding van vormgeving en inhoud 4 Hoorcolleges (op maandag) Leesopdrachten (CSS; Lie & Bos) Tentamen (15 okober 18:00 20:00) 5 Practica Praktijkopdrachten Portfolio website (eindopdracht) Hogeschool van Amsterdam Instituut voor Interactieve Media 19

7 ONSTAAN VAN HET INTERNET Hogeschool van Amsterdam Instituut voor Interactieve Media 20

8 HET INTERNET 1962 Massachusets Institute of Technology (MIT) Galactisch netwerk van J.C.R. Licklider Hoofd Computer DARPA Hogeschool van Amsterdam Instituut voor Interactieve Media 21

9 L. G. MIT: HET INTERNET 1965 Eerste verbinding tussen 2 computers (TX 2 en Q 32) Hogeschool van Amsterdam Instituut voor Interactieve Media 22

10 HET INTERNET 1967 Presentatie ARPANET door L. G. Roberts Standaard snelheid van 2.5kbps naar 50kbps Bolt Beranek and Newman (BBN) winnen de rechten om te ontwikkelen MIT Massachusets Institute of Technology, USA RAND militair onderzoek, USA NPL National Physics Laboratory, UK Hogeschool van Amsterdam Instituut voor Interactieve Media 23

11 HET INTERNET 1969 Het internet bestaat reeds uit 4 hosts University of California, Los Angeles (UCLA) Stanford Research Institute (SRI) University of California, Santa Barbara (UCSB) University of Utah (UU) Hogeschool van Amsterdam Instituut voor Interactieve Media 24

12 HET INTERNET 1972 Presentatie van ARPANET op International Computer Communication Conference (ICCC) door Bob Kahn van BBN, eerste e mail! Hogeschool van Amsterdam Instituut voor Interactieve Media 25

13 HET INTERNET januari 1983, overgang van NCP naar TCP/IP MFENET BITNET HEPNET SPAN CSNET DECNet USENET NSFNET SNa JANET PSI CO+RE UUNET netwerken, op 7 continenten en de ruimte Hogeschool van Amsterdam Instituut voor Interactieve Media 26

14 HET INTERNET 1989 Tim Berners CERN bedenkt Hypertext Hogeschool van Amsterdam Instituut voor Interactieve Media 27

15 HET INTERNET ANNO 1998 Hogeschool van Amsterdam Instituut voor Interactieve Media 28

16 HET INTERNET 1992 World Wide Web Consortium (W3C) Hogeschool van Amsterdam Instituut voor Interactieve Media 29

17 STANDAARDISERING ONE WORLD WIDE WEB Communicatie, commercie en delen van informatie. Ongeacht hardware, software, infrastructuur, moedertaal, cultuur, locatie, fysieke of mentale vermogen. Hogeschool van Amsterdam Instituut voor Interactieve Media 30

18 STANDAARDISERING W3C STANDAARDEN Hogeschool van Amsterdam Instituut voor Interactieve Media 31

19 EEN WEBSITE OPVRAGEN Wat gebeurt er als je een URL intypt Maak met je buurman een schets Ongeveer 5 minuten Hogeschool van Amsterdam Instituut voor Interactieve Media 32

20 EEN WEBSITE OPVRAGEN HTTP- REQUEST Ik wil de pagina Hier is de pagina HTTP- RESPONSE Hogeschool van Amsterdam Instituut voor Interactieve Media 33

21 EEN WEBSITE OPVRAGEN Hogeschool van Amsterdam Instituut voor Interactieve Media 34

22 EEN WEBSITE BEKIJKEN Hogeschool van Amsterdam Instituut voor Interactieve Media 35

27 EEN WEBSITE BEKIJKEN In het college word hier de pagina csszengarden.com met een screenreader opgelezen deze is in de PDF-versie van het college niet beschikbaar Hogeschool van Amsterdam Instituut voor Interactieve Media 40

28 Discussiepunten: PAUZE (10 MINUTEN) Waarom houdt microsoft zich niet aan de standaarden van het W3C? Is het als webdesigner nuttig om alle browsers te ondersteunen? Hoe belangrijk is het dat je internetpagina door blinden bekeken kan worden? Hogeschool van Amsterdam Instituut voor Interactieve Media 41

29 MAKEN VAN EEN WEBSITE USABILITY Techniek Hogeschool van Amsterdam Instituut voor Interactieve Media 42

30 MAKEN VAN EEN WEBSITE USABILITY Techniek Hogeschool van Amsterdam Instituut voor Interactieve Media 43

31 Boek Titel Inhoudsopgave Inhoud Hoofdstukken Titel Alinea s Afbeeldingen Vetgedrukte woorden Italic woorden Antwoordkaart XHTML BASICS Hogeschool van Amsterdam Instituut voor Interactieve Media 44

32 XHTML BASICS Pagina Header Title Body Heading Alinea s Vetgedrukte woorden Italic woorden... Afbeeldingen Links Formulieren Hogeschool van Amsterdam Instituut voor Interactieve Media 45

33 BASISRECEPT XHTML ( ) Elementen genest in andere elementen Begin: <...> Eind: </...> Hogeschool van Amsterdam Instituut voor Interactieve Media 46

34 BASISRECEPT XHTML ( ) Element <tag>lorem ipsum dolor</tag> Begin tag Inhoud Eind tag Hogeschool van Amsterdam Instituut voor Interactieve Media 47

35 BASISRECEPT XHTML ( ) <html> <head>...</head> <body>...</body> </html> Hogeschool van Amsterdam Instituut voor Interactieve Media 48

36 NESTEN HTML elementen zijn genest <html> <body> <p> Lorem ipsum dolor sit amet </p> </body> </html> Hogeschool van Amsterdam Instituut voor Interactieve Media 49

37 NESTEN Geneste elementen mogen NIET overlappen Fout: <div> text text <em> text </div> </em> Goed: <div> text text <em> text </em> </div> Hogeschool van Amsterdam Instituut voor Interactieve Media 50

38 NESTENINEENBOOM, DOM? xhtml head body title h1 p ul a strong em Hogeschool van Amsterdam Instituut voor Interactieve Media 51

39 BASISRECEPT XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="en" xml:lang="en"> <head> <title>dit is de titel</title> </head> <body>... <img src= img.jpg alt= Foo />... </body> </html> Hogeschool van Amsterdam Instituut voor Interactieve Media 52

40 ANATOMIE VAN EEN TAG xhtml tag <img src= img.jpg alt= Foo /> tagtype attribuut waarde Hogeschool van Amsterdam Instituut voor Interactieve Media 53

41 3 TYPEN TAGS Block level Inline Invisible Hogeschool van Amsterdam Instituut voor Interactieve Media 54

42 BLOCK LEVEL TAGS <p>...</p> <h1>...</h1> <ul>...</ul> Hogeschool van Amsterdam Instituut voor Interactieve Media 55

43 INLINE TAGS <a href= >...</a> <strong>...</strong> Geen <b>...</b> <em>...</em> Geen <i>...</i> Hogeschool van Amsterdam Instituut voor Interactieve Media 56

44 INVISIBLE TAGS <br> <span>...</span> <crap>...</crap> Hogeschool van Amsterdam Instituut voor Interactieve Media 57

45 ZONDER LINKS GEEN WEB <a href= > BELANGRIJK! Hogeschool van Amsterdam Instituut voor Interactieve Media 58

46 SEMANTISCH OPMAKEN se man tiek (de ~ (v.)) 1. leer van de betekenis van de woorden en woordgroepen => betekenisleer 2. [fil.] leer van de interpretatie van formele systemen Juiste tag bij de juiste tekst Hogeschool van Amsterdam Instituut voor Interactieve Media 59

47 BELANGRIJKSTE PUNTEN Standaardisering W3C Opvragen van een site Nesten van elementen XHTML Boomstructuur Block vs. Inline vs. Invisible Links zijn de ducktape van het WWW Semantisch opmaken Hogeschool van Amsterdam Instituut voor Interactieve Media 60

49 Voor hoorcollege 2: Lezen uit CSS; Lie & Bos Chapter 2 Chapter 3 OPDRACHT(EN) CSS The amazing em unit and other best practices Proeftentamen maken 100 Minuten Open boek Eén A4 met handgeschreven aantekeningen Hogeschool van Amsterdam Instituut voor Interactieve Media 62

50 GEBRUIKTE BRONNEN Lie, Bos. Cascading Style Sheets: Designing for the web. Addison Wesley. ISBN: Shea, Holzschlag. The zen of css design: visual enlightment for the web. New Riders. ISBN: Hogeschool van Amsterdam Instituut voor Interactieve Media 63