Standaarden. Wat is het internet? Wat zijn standaarden? Wat gaan we doen dit jaar? CMDA Internet Standaarden

Standaarden Wat is het internet? Wat zijn standaarden? Wat gaan we doen dit jaar? CMDA | Internet Standaarden | [email protected]

1

Vandaag •  •  •  •  • 

Vakoverzicht Internet Standaardisering Ontwikkelen van websites XHTML

CMDA | Internet Standaarden | [email protected]

18

Internet Standaarden (PIST) •  XHTML, CSS(2) en jQuery •  Semantiek •  Scheiding van vormgeving, inhoud en functionaliteit •  7 Hoorcolleges (di/wo)

•  Leesopdrachten (HTML and CSS, Web Standards Solutions) •  Tentamen (1 nov. 18.30 @ SGG) (spiekbrief!)

•  7 Practica •  Praktijkopdrachten (huiswerk) •  Eindopdracht (website) CMDA | Internet Standaarden | [email protected]

19

Syntax, semantiek, html-elementen, navigatie, opdelen met div en span Scheiding van vormgeving en inhoud, CSS basics, inheritance, fonts en kleuren Lay-out en positionering, boxmodel, id’s en classes, validerem van css, uploaden met ftp pseudo classes, cascading, advanced css, verticaal menu, liquid layout, sprites Wat is je DOM, jQuery, scheiding van vormgeving, inhoud en gedrag

reces

WG Huiswerk bespreken, criteria voor eindopdracht vaststellen, oefeningen Huiswerk bespreken, demo css, oefeningen

Huiswerk presentaties, wireframes schetsen, oefeningen Huiswerk bespreken, mondriaan oefening, werken aan eindopdracht jQuery oefening, werken aan de eindopdracht

reces

4 5


6 7 8 TENTAMEN

3

beoordeling website

2

Voorbereiding op de toekomst

Geschiedenis internet, standaardisering, opvragen van een pagina, html basics, nesten

1

aanwezigheid verplicht

HC

Drieluik analyse websites, tools installeren, oefeningen

Vakoverzicht 9 10

20

Verplichte literatuur


21


22


23

Contents at a glance About the Authors Acknowledgments Introduction

xvii xix xxi

Part One: A Solid XHTML Foundation Chapter 1: Are You a Web Standardista? Chapter 2: Building Basic Web Pages Chapter 3: Structured Markup Chapter 4: Markup That Adds Meaning Chapter 5: Including Images Chapter 6: Creating Links with Anchors Chapter 7: Getting Your Site Online

3 17 39 65 91 117 145

Part Two: Adding Style with CSS Chapter 8: CSS 101 Chapter 9: Styling Text Chapter 10: A One-Column CSS Layout Chapter 11: A Two-Column CSS Layout Chapter 12: List-O-Matic Chapter 13: Harnessing the Power of External Style Sheets Chapter 14: Where to from Here? Index

167 195 229 275 313 343 377 399


24

?

? ?

? ?

?


?

25


26

Afgedwongen striktheid HTML 4.01

XHTML 1.0


HTML5

! deze

27


28


29


30


31

Internet Standaarden XHTML, CSS, jQuery


32

Sorry voor de citaten :(


33

The Machine Stops – E.M.Forster "Very well. Let us talk, I will isolate myself. I do not expect anything important will happen for the next !ve minutes-for I can give you fully !ve minutes, Kuno. Then I must deliver my lecture on Music during the Australian Period.” [...] But it was fully !fteen seconds before the round plate that she held in her hands began to glow. A faint blue light shot across it, darkening to purple, and presently she could see the image of her son, who lived on the other side of the earth, and he could see her. [...] Vashanti’s next move was to turn o" the isolation switch, and all the accumulations of the last three minutes burst upon her. The room was !lled with the noise of bells, and speaking-tubes. What was the new food like? Could she recommend it? Has she had any ideas lately? Might one tell her one"s own ideas? Would she make an engagement to visit the public nurseries at an early date? - say this day month. [...] The clumsy system of public gatherings had been long since abandoned; neither Vashti nor her audience stirred from their rooms. Seated in her armchair she spoke, while they in their armchairs heard her, fairly well, and saw her, fairly well.


34

Man-Computer Symbiosis - J.C.R. Licklider It seems reasonable to envision, for a time 10 or 15 years hence, a ‘thinking center’ that will incorporate the functions of present-day libraries together with anticipated advances in information storage and retrieval and the symbiotic functions suggested earlier in this paper. The picture readily enlarges itself into a network of such centers, connected to one another by wide-band communication lines and to individual users by leased-wire services. In such a system, the speed of the computers would be balanced, and the cost of the gigantic memories and the sophisticated programs would be divided by the number of users.


35

Arthur C. Clarke - BBC 1964


36

1965: Eerste verbinding TX-2


Q-32

37

1969: Internet telt 4 hosts


38

1972: Internet telt ~25 hosts


39

1974: Internet telt ~44 hosts


40

1983: Overgang naar TCP/IP 50.000 netwerken op 7 continenten en in de ruimte MFENET

BITNET SPAN

DECNet

CSNET USENET

Sna PSI

HEPNET

NSFNET JANET

CO+RE


UUNET 41

1989: Tim Berners-Lee @ CERN


42


43

256 * 256 * 256 * 256 = 4.294.967.296 adressen CMDA | Internet Standaarden | [email protected]

44

1992: W3C Accessibility (All), Accessible Rich Internet Applications (WAI-ARIA), Authoring Tool Accessibility Guidelines (ATAG), Best Practices for Authoring HTML, CC/PP, Content Transformation, CSS, CSS Mobile, DCCI, Declarative Web Applications, Device Description Repository, Device Independence Authoring, DOM, DOM events, E"icient XML Interchange, eGovernment, Electronic Commerce Evaluation and Report Language (EARL), Geospatial, GRDDL, Health Care and Life Sciences (Semantic Web), HTML, HTML for User Agents, HTTP, InkML, Internationalization (All), Internationalization of Web Architecture, Internationalization of Web Design and Applications, Internationalization of Web Services, Internationalization of XML, Javascript APIs, MathML, Media Access, Mobile Web Applications, Mobile Web Authoring, Mobile Web for Social Development, Multimodal Web Applications, OWL Web Ontology Language, P3P, PICS, Plugins, PNG, POWDER, Quality Assurance (QA) Framework, RDF, RDF Best Practices, RDF Relationship to Other Formats, RDFa, RIF Rule Interchange Format, Security for User Agents, Security for Web Applications, Semantic Annotation for WSDL and XML Schema, Service Modeling Language (SML), SKOS, SMIL, SOAP, SPARQL, Stylesheets in XML, SVG, SVG Tiny, Timed Text, URI, User Agent Accessibility Guidelines (UAAG), Voice, Web and TV, Web Architecture, Web Content Accessibility Guidelines (WCAG), Web Fonts, Web IDL, Web Services Addressing, Web Services Architecture, Web Services Choreography, Web Services Policy, Web Services Resource Access, WebCGM, WICD, Widgets, WSDL, XBL, Xforms, XHTML, XHTML 2, XHTML For Mobile, XHTML Modularization, Xinclude, XKMS, XLink, XML, XML Base, XML Canonicalization, XML Design Techniques, XML Encryption, XML Events, XML Fragments, XML Pipeline (XProc), XML Relationship to other formats, XML Schema, XML Signature, XML-binary Optimized Packaging, xml:id, XPath, XPointer, XQuery, XSL-FO, XSLT CMDA | Internet Standaarden | [email protected]

45

1992: Mosaic


46

Website opvragen •  Wat gebeurt er als je een URL intypt •  Maak met je buurman een schets


47

Website opvragen http://www.csszengarden.com

geen bestand opgegeven, lever het standaard bestand HTTP_REQUEST

HTTP_RESPONSE index.html

Hogeschool van Amsterdam – Instituut voor Interactieve Media

48

Website bekijken


49

Website bekijken


50

Website bekijken


51

Website bekijken


52

Website bekijken


53


54

Hoe werkt een browser?


55

Browser componenten User Interface

Data Persistence

Browser Engine

Rendering engine

Networking

JavaScript Interpreter


UI Backend

56


Data Persistence

Browser Engine

Rendering engine

Networking


UI Backend


Adresbalk, BackForward Knoppen, Bookmarks, Reload, Stop Alles behalve de inhoud van de webpagina 57


Data Persistence

Browser Engine

Rendering engine

Networking


Regelt acties tussen de user interface en de rendering engine

UI Backend


58


Data Persistence

Browser Engine

Rendering engine

Regelt afhandeling van informatie op de harddisk : cache, cookies, downloads etc. (HTML5 databases)

Networking


UI Backend


59

Browser componenten Handelt netwerk af

User Interface

Data Persistence

Browser Engine

Rendering engine

Networking


UI Backend


Voert JavaScript uit Geeft standaardcomponenten weer bijv. knopjes, pulldowns en pop-ups 60


Data Persistence

Browser Engine

Rendering engine

Networking


UI Backend


Zorgt voor de weergave van de opgevraagde informatie. Bijv. correct weergeven van XHTML en CSS 61

Rendering engine •  Chrome: Webkit (open-source) •  Safari: Webkit •  Firefox:

Gecko (Mozilla, open-source)

•  IExplorer: Trident (Microsoft) •  Opera: Presto (Opera Software) CMDA | Internet Standaarden | [email protected]

62

Render engine #ow Inlezen HTML en opbouw DOM-boom

Inlezen CSS en opbouw render-boom

Exacte layout (in pixels) van render-boom

Systematische weergave van render-boom

html

head

body

title

div

h1

hier kom ik later uitgebreider op terug p

a

strong


63

Pauze ~10 min. •  Discussiepunten: •  Waarom heeft Microsoft zich in het verleden niet aan de standaarden van het W3C gehouden? •  Is het als webdesigner zinvol om alle browsers te ondersteunen? •  Hoe belangrijk is het dat je internetpagina door blinden bekeken kan worden? Hogeschool van Amsterdam – Instituut voor Interactieve Media

64

Componenten van een website

USABILITY

Techniek Hogeschool van Amsterdam – Instituut voor Interactieve Media

65

Componenten van een website

T


A

Techniek

66

Componenten van een website Maatschappij & interactie Taal in context Mediageschiedenis

Understanding design Design for interaction User centred design Vormgeving

USABILITY

Techniek Hogeschool van Amsterdam – Instituut voor Interactieve Media

67

XHTML basics •  Boek •  Titel •  Inhoudsopgave •  Inhoud •  Hoofdstukken Titel Alinea’s Afbeeldingen Vetgedrukte woorden •  Italic woorden •  •  •  • 

•  Antwoordkaart Hogeschool van Amsterdam – Instituut voor Interactieve Media

68

XHTML Basics •  Pagina •  Header •  Title

•  Body •  Heading •  Alinea’s •  Vetgedrukte woorden •  Italic woorden •  ...

•  Afbeeldingen •  Links •  Formulieren Hogeschool van Amsterdam – Instituut voor Interactieve Media

69

Basisrecept XHTML •  Elementen ‘genest’ in andere elementen •  Begin: •  Eind:

<...>


70

Basisrecept XHTML Element Lorem ipsum dolor Begin tag

Inhoud


Eind tag

71

Basisrecept XHTML ... ... Hogeschool van Amsterdam – Instituut voor Interactieve Media

72

Nesten HTML elementen zijn ‘genest’

Lorem ipsum dolor sit amet

73

Nesten Geneste elementen mogen NIET overlappen

Fout:
text text text

Goed:
text text text

74

Nesten in een boom… DOM? xhtml

head

title

body

h1

strong

p

ul

a

em


75

basisrecept.html

1.  Geef aan welk type HTML-document 2.  HTML document 1.  ‘header’ met daarin meta-informatie 1.  Titel van het document

2.  ‘body’ met daarin de inhoud van het document 1.  Een afbeelding met alternatieve tekst


76

Anatomie van een tag xhtml tag tag

attribuut waarde


77

3 typen tags •  Block level •  Inline •  Invisible


78

Block level tags
...

...

...


79

Inline tags ... ... Geen ...

... Geen ...


80

Invisible tags
...
... ...


81

Zonder links geen web


BELANGRIJK!

82

Semantisch opmaken se·man·tiek (de ~ (v.)) 1.  leer van de betekenis van de woorden en woordgroepen => betekenisleer 2.  [!l.] leer van de interpretatie van formele systemen

Juiste ‘tag’ bij de juiste tekst Hogeschool van Amsterdam – Instituut voor Interactieve Media

83

Vragen? CMDA | Internet Standaarden | [email protected]

84

Huiswerk •  Voor hoorcollege 2: •  Lezen uit HTML and CSS Web Standards Sollutions •  Chapter 2: Building Basic Webpages (18p) •  Chapter 3: Structured Markup (21p)


85

Bronnen •  Forster, The Machine Stops. 1909 http://www.manybooks.net/titles/ forstereother07machine_stops.html •  Harder. NCSA Mosaic on the Mac. 2010 http://blog.iharder.net/2010/09/14/ ncsa-mosaic-on-the-mac/ •  Garsiel, Irish. How Browsers Work. 16/08/2011 http:// www.html5rocks.com/en/tutorials/internals/howbrowserswork/


86

Standaarden. Wat is het internet? Wat zijn standaarden? Wat gaan we doen dit jaar? CMDA Internet Standaarden

Recommend Documents

...