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
Hogeschool van Amsterdam Instituut voor Interactieve Media 2
Hogeschool van Amsterdam Instituut voor Interactieve Media 3
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
VANDAAG Internet Standaarden (PIST) Internet Standaardisering Ontwikkeling van websites XHTML Hogeschool van Amsterdam Instituut voor Interactieve Media 18
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
ONSTAAN VAN HET INTERNET Hogeschool van Amsterdam Instituut voor Interactieve Media 20
HET INTERNET 1962 Massachusets Institute of Technology (MIT) Galactisch netwerk van J.C.R. Licklider Hoofd Computer Research @ DARPA Hogeschool van Amsterdam Instituut voor Interactieve Media 21
L. G. Roberts @ MIT: HET INTERNET 1965 Eerste verbinding tussen 2 computers (TX 2 en Q 32) Hogeschool van Amsterdam Instituut voor Interactieve Media 22
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 1961 1967 MIT Massachusets Institute of Technology, USA RAND militair onderzoek, USA NPL National Physics Laboratory, UK Hogeschool van Amsterdam Instituut voor Interactieve Media 23
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
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
HET INTERNET 1983 1 januari 1983, overgang van NCP naar TCP/IP MFENET BITNET HEPNET SPAN CSNET DECNet USENET NSFNET SNa JANET PSI CO+RE UUNET 50.000 netwerken, op 7 continenten en de ruimte Hogeschool van Amsterdam Instituut voor Interactieve Media 26
HET INTERNET 1989 Tim Berners Lee @ CERN bedenkt Hypertext Hogeschool van Amsterdam Instituut voor Interactieve Media 27
HET INTERNET ANNO 1998 Hogeschool van Amsterdam Instituut voor Interactieve Media 28
HET INTERNET 1992 World Wide Web Consortium (W3C) Hogeschool van Amsterdam Instituut voor Interactieve Media 29
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
STANDAARDISERING W3C STANDAARDEN Hogeschool van Amsterdam Instituut voor Interactieve Media 31
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
EEN WEBSITE OPVRAGEN www.csszengarden.com HTTP- REQUEST Ik wil de pagina www.csszengarden.com Hier is de pagina www.csszengarden HTTP- RESPONSE Hogeschool van Amsterdam Instituut voor Interactieve Media 33
EEN WEBSITE OPVRAGEN Hogeschool van Amsterdam Instituut voor Interactieve Media 34
EEN WEBSITE BEKIJKEN Hogeschool van Amsterdam Instituut voor Interactieve Media 35
EEN WEBSITE BEKIJKEN Hogeschool van Amsterdam Instituut voor Interactieve Media 36
EEN WEBSITE BEKIJKEN Hogeschool van Amsterdam Instituut voor Interactieve Media 37
EEN WEBSITE BEKIJKEN Hogeschool van Amsterdam Instituut voor Interactieve Media 38
EEN WEBSITE BEKIJKEN Hogeschool van Amsterdam Instituut voor Interactieve Media 39
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
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
MAKEN VAN EEN WEBSITE USABILITY Techniek Hogeschool van Amsterdam Instituut voor Interactieve Media 42
MAKEN VAN EEN WEBSITE USABILITY Techniek Hogeschool van Amsterdam Instituut voor Interactieve Media 43
Boek Titel Inhoudsopgave Inhoud Hoofdstukken Titel Alinea s Afbeeldingen Vetgedrukte woorden Italic woorden Antwoordkaart XHTML BASICS Hogeschool van Amsterdam Instituut voor Interactieve Media 44
XHTML BASICS Pagina Header Title Body Heading Alinea s Vetgedrukte woorden Italic woorden... Afbeeldingen Links Formulieren Hogeschool van Amsterdam Instituut voor Interactieve Media 45
BASISRECEPT XHTML (355 368) Elementen genest in andere elementen Begin: <...> Eind: </...> Hogeschool van Amsterdam Instituut voor Interactieve Media 46
BASISRECEPT XHTML (355 368) Element <tag>lorem ipsum dolor</tag> Begin tag Inhoud Eind tag Hogeschool van Amsterdam Instituut voor Interactieve Media 47
BASISRECEPT XHTML (355 368) <html> <head>...</head> <body>...</body> </html> Hogeschool van Amsterdam Instituut voor Interactieve Media 48
NESTEN HTML elementen zijn genest <html> <body> <p> Lorem ipsum dolor sit amet </p> </body> </html> Hogeschool van Amsterdam Instituut voor Interactieve Media 49
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
NESTENINEENBOOM, DOM? xhtml head body title h1 p ul a strong em Hogeschool van Amsterdam Instituut voor Interactieve Media 51
BASISRECEPT XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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
ANATOMIE VAN EEN TAG xhtml tag <img src= img.jpg alt= Foo /> tagtype attribuut waarde Hogeschool van Amsterdam Instituut voor Interactieve Media 53
3 TYPEN TAGS Block level Inline Invisible Hogeschool van Amsterdam Instituut voor Interactieve Media 54
BLOCK LEVEL TAGS <p>...</p> <h1>...</h1> <ul>...</ul> Hogeschool van Amsterdam Instituut voor Interactieve Media 55
INLINE TAGS <a href= >...</a> <strong>...</strong> Geen <b>...</b> <em>...</em> Geen <i>...</i> Hogeschool van Amsterdam Instituut voor Interactieve Media 56
INVISIBLE TAGS <br> <span>...</span> <crap>...</crap> Hogeschool van Amsterdam Instituut voor Interactieve Media 57
ZONDER LINKS GEEN WEB <a href= > BELANGRIJK! Hogeschool van Amsterdam Instituut voor Interactieve Media 58
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
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
Hogeschool van Amsterdam Instituut voor Interactieve Media 61
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
GEBRUIKTE BRONNEN http://www.isoc.org/internet/history/brief.shtml http://www.computerhistory.org/internet_history/ http://www.w3c.org http://www.csszengarden.com Lie, Bos. Cascading Style Sheets: Designing for the web. Addison Wesley. ISBN: 0321193121 Shea, Holzschlag. The zen of css design: visual enlightment for the web. New Riders. ISBN: 0321303474 Hogeschool van Amsterdam Instituut voor Interactieve Media 63