• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Powerpoint Htmlcss
 

Powerpoint Htmlcss

on

  • 3,152 views

 

Statistics

Views

Total Views
3,152
Views on SlideShare
3,150
Embed Views
2

Actions

Likes
3
Downloads
62
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Powerpoint Htmlcss Powerpoint Htmlcss Presentation Transcript

    • Met de steun van HTML & CSS
        • [email_address]
        • www.koba.be
    • Met de steun van Geschiedenis
        • Documenten vorm geven
        • op een gestandaardiseerde manier
    • Historie
      • 1960 IBM ontwierp GML (interne publicaties)‏
        • Generalized Markup Language
      • IBM ontwierp SGML (formattering van legale documenten
        • Standard Generalized Markup Language
      • 1986 SGML wordt ISO-standaard
      • 1991 Tim Berners-Lee & Anders Berglund (CERN) ontwerpen tag-based taal HTML
      • HTML is dus een applicatie van SGML !
    • Historie
      • HTML bedoeld voor statische informatie
      • Interactieve technologieën worden toegevoegd
        • Scripts: Javascript
        • java-applets
        • Plugins: Flash
      • 1996 W3C (World Wide Web Consortium)‏
        • HTML ontbreekt:
          • Uitbreidbaarheid
          • structuur
          • validatie
      • 1998 (feb) XML 1.0 specificaties (W3C)‏
    • CSS Document style semantics and specification language Document Type Definition Standard Generalized Markup Language HyperMedia Time Based structuring HyperText Markup Language Cascading Style Sheet SGML DTD DSSSL HTML CSS
    • XML ?
      • XML eXtensible Markup Language
        • standaard tekst formaat
        • voor gestructureerde informatie op het web
      • 10% van de SGML-specificaties
      • XML is een metataal
        • metadata = informatie over informatie
    • Kortom
      • Applicaties
        • HTML (SGML)‏
        • XHTML (XML)‏
      • XML alleen inhoud -
        • voor display:
          • CSS Cascading Style Sheets
          • XSL eXtensible Stylesheet Language
    • Te onthouden
      • HTML : (Hyper Text Markup Language) is afgeleid van SGML (Standard Generalized Markup Language)‏
      • DTD : ingebouwd in browser, ter herkenning van de opdrachten
      • CSS : Cascading Style Sheets : bedoeling inhoud en opmaak te splitsen
    • Met de steun van Planning website project
    • Project stappen
      • Analyse fase
      • Doelen, doelgroep, planning, team
      • Keuze domeinnaam en hosting
      • Voorbereidende fase
      • Informatie architectuur: sitemap, taxonomie, metadata, navigatie, content types
      • Wireframes
      • Interactie design
    • Project stappen
      • Ontwikkelingsfase
      • Grafisch ontwerp (photoshop)‏
      • Xhtml/css prototype
      • Programmatie CMS systeem
      • Testfase: bugfixes, usability
      • Lanceringsfase
      • Onderhoudsfase: backups & updates
    • Met de steun van Domeinnaam
    • Domeinnaam kiezen
      • Naam kiezen:
        • Origineel en kort
        • Sleutelwoorden ivm SEO
        • Beschrijvend of uniek: www.google.com of www.search.com ?
      • Extensie kiezen
        • Landen: .be, .nl, .fr, .nu, .tm
        • Europa – VS: .eu, .us
        • Algemeen: .com, .org, .net, .info, .biz
    • Domeinnaam beschikbaar? Voor .com, .net, .org domeinnamen www.whois.net Voor .be domeinen www.dns.be
    • Domein aanvragen & instellen
      • Bij één van de vele agentschappen
      • Uiteenlopende prijs, service en kwaliteit
        • Mailbox, redirect inbegrepen?
      • Jaarlijks bedrag te betalen (auto renew?)‏
      • Doorsturen
        • Naar hosting: Domain name servers instellen
        • Domain forwarding - Frame forwarding – Redirects
        • Parked domains - Addon domain
    • Met de steun van Hosting - Webruimte
    • Waar komen de pagina’s terecht?
      • Mogelijkheden :
      • Gratis webruimte
      • Website bij ISP
      • Subdomeinen bij ISP
      • VPS: Virtuele webservers: shared
      • Eigen webserver: dedicated
    • Belangrijke elementen
      • Geografische locatie server?
      • Bandbreedte?
      • Beschikbare scripts? (formulierverwerking, counters, scripts, gastenboeken, …)‏
      • Opslagruimte?
      • Snelheid
      • Databases koppelen?
      • Betrouwbaarheid en service 365/7/24
    • Controlepaneel
      • Cpanel cfr. wmw
      • Plesk
      • Eigen controlepaneel
    • Met de steun van HTML & CSS
        • De taal van webpagina’s
    • Wat is HTML?
      • HTML : Hyper Text Markup Language
      • Hypertext : klikbare verwijzingen binnen de pagina’s die verwijzen naar andere documenten, beelden, …
      • Markup : d.m.v. code worden de pagina’s opgebouwd
      • HTML beschrijft hoe de pagina moet weergegeven worden en bevat ook de inhoud van de pagina
      • Weergegeven in een browser die code verwerkt (Internet Explorer – Firefox - Safari)‏
      • Voorbeeld : http://www.syntrawest.be
    • Html pagina
    • Elementen (Tags)‏
      • Tags : meestal in paren
      • Bijvoorbeeld : <H1>Welkom</H1>
      • <H1> duidt op het starten van het definiëren van de tekst als hoofdtitel 1
      • </H1> duidt op het afsluiten van deze opmaak
      • De tekst komt tussen de beide tags
      • In een teksteditor in te tikken
      • Pagina’s de extensie .htm meegeven, zodat ze verwerkt worden door de browser
    • HTML Attributen
      • Attributen bepalen de tags preciezer
      • Bijvoorbeeld : <H1 align=“center”>Deze tekst staat in het midden</H1>
      • Het attribuut : align=“center” duidt aan hoe deze tekst met opmaak <H1> moet weergegeven worden
    • CSS tag opmaak voorbeeld
      • Voorbeeld :
      • H1 {color:blue}
      • H1 : Selector : de geselecteerde tag
      • Color : Eigenschap : welke eigenschap moet gewijzigd worden?
      • Blue : waarde : welke waarde krijgt de gekozen eigenschap?
    • Html + css
    • Met de steun van Basis elementen webpagina
    • Opbouw van een webpagina
      • De structuur van een webpagina :
      <DOCTYPE> <HTML> <HEAD> <TITLE>Hier komt de titel</TITLE> </HEAD> <BODY>   </BODY> </HTML>
    • Index.htm <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=“nl&quot; lang=“nl&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /> <title>Untitled Document</title> </head> <body> </body> </html>
    • Met de steun van Doctype
    • DOCTYPE
        • 1. Html 4.01 of xhtml 1.0
        • http://www.w3.org/tr/xhtml1/
        • http://www.w3schools.com/xhtml/xhtml_html.asp
        • 2. Strict – transitional – frames
          • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/tr/xhtml1/DTD/xhtml1-strict.dtd“ >
          • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd“ >
          • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/tr/xhtml1/DTD/xhtml1-frameset.dtd&quot;>
          • 3. Met of zonder link
    • Met de steun van Tekst invoegen
    • Teksten
      • Niet opgemaakt
        • Via notepad opmaak verwijderen
      • Mooi opgemaakte teksten omzetten naar .pdf formaat: afdrukbaar met behoud van layout en opmaak.
      • Taal? Meertalige website?
    • Lettertype en layout
      • Kleurgebruik
        • www.colorschemer.com
        • 216 “websafe” kleuren: voorbijgestreefd
      • Huislettertype:
        • Serif of sans serif
        • Windows/MAC lettertypen
        • Speciale lettertypen in gif of Flash
        • Vectorieel: anti-alias en transparantie
    • HTML tekst tags : enkele voorbeelden Nieuwe paragraaf <P> Tekst springt in <BLOCKQUOTE> Beeld invoegen <IMG> Unordered List List Item <UL> <LI> Font (lettertype): Let op: afgeraden tag, vervangen door <span> en style <span styl=&quot;Verdana, Arial, Helvetica, sans-serif&quot;> Ordered List List Item <OL> <LI> Tekst wordt letterlijk weergegeven <PRE> Header 1 … Header 6 … <H1> … <H6> Line Break <BR>
    • HTML tekst tags : enkele voorbeelden Laag - blok <DIV> Vet <StrONG> of <B> Tabel <table> Emphasis <EM> Programmacode <CODE> Teletype <TT> Ingave gegevens <INPUT> Onderlijn <U> Italic <I>
    • Met de steun van Body instellingen
    • <BODY>
      • Attributen kunnen meegegeven worden aan de <BODY> tag : bepalen gehele uitzicht van de pagina
      • Bijvoorbeeld : <BODY BGCOLOR=&quot;#FFFFFF&quot; TEXT=&quot;#000000&quot; LINK=&quot;#0000FF&quot; VLINK=&quot;#FF0000&quot; ALINK=&quot;#FF0000&quot;> </BODY>
      • BGCOLOR : achtergrondkleur TEXT : tekstkleur LINK : hyperlinkkleur VLINK : visited link ALINK : active link
    • Kleuren
      • RGB – monitor : Red Green Blue
      • FF 00 00 : volledig rood, geen groen, geen blauw 00 FF 00 : geen rood, volledig groen, geen blauw
      • 216 “Websafe” kleuren : voorbijgestreefd
    • Css body body { background-color: #404040; background-repeat: no-repeat; font-family: Verdana, Helvetica, sans-serif; font-size:12px; line-height:180%; color:#FFFFFF; margin: 0; padding: 0; }
    • Css headers h1 { color: #F2612A; /* color: #BC4819; */ font-size: 24px; font-family: Tahoma, Geneva, serif; font-variant:small-caps; line-height:24px; text-align:left; font-weight:bold; display:block; margin-bottom:25px; border-bottom: 2px solid #f1f1f1; letter-spacing: 1px; } Idem voor h2, h3, …. h6
    • Met de steun van Werkomgeving
    • Werkomgeving
      • Html Editors
      • Dreamweaver
      • Nvu
      • http://www.chami.com/html-kit/download/
      • http://www.aptana.com/download_all.php
      • Firefox en plugins
      • http://www.mozilla-europe.org/en/products/firefox/
      • http://chrispederick.com/work/web-developer/
      • http://www.getfirebug.com/
    • Met de steun van Links
    • Hyperlinks
      • HTML : Hyperlinks : klikbare delen van de pagina die naar andere pagina’s / onderdelen verwijzen
      • Bijvoorbeeld : <a href=“test.htm”> Klik hier</a> (=interne hyperlink)
      • Bijvoorbeeld : <a href=&quot;http://www.google.be&quot;>deze site</a> (=externe hyperlink)‏
    • Links
      • Structuur: <a href=&quot;http://www.handleidinghtml.nl&quot;>Handleiding HTML</a>
      • Absolute en relatieve links
      • Ankers
      • Target
      • Base: voor 404 pagina
      • Title
      • mailto links: let op spam: encrypt of encode email adres via javascript vb http://automaticlabs.com/products/enkoderform
      • Accesskey
    • Css Links a:link, a:visited { text-decoration: none; color: #039; } a:hover {text-decoration: underline; background-color: #e4F4e3; color: #333; }
    • Met de steun van Afbeeldingen
    • Grafische elementen : enkele tips
      • Resolutie : 72 dpi aanvaardbaar voor scherm
      • Grootte : 50 kb
      • Afbeeldingen in verschillende pagina’s gebruiken: caching
      • “ Slicen” van afbeeldingen
      • “ Clickable maps” (hotspots)‏
    • Grafische elementen
      • .jpg (Joint Photographics Expert Group)‏
        • Gecomprimeerd met verlies
        • Sterkte compressie instelbaar
        • 16.7 miljoen kleuren
      • . gif (Graphics Interchange Format)‏
        • Gecomprimeerd zonder verlies
        • 256 kleuren
        • Transparantie mogelijk
        • Geanimeerde .gif mogelijk
      • .png (Portable Network Graphics)‏
        • Gecomprimeerd zonder verlies
        • 16.7 miljoen kleuren
        • Transparantie mogelijk
        • Geanimeerde foto's niet mogelijk (wel via .MNG)‏
        • IE6: png fix: http://homepage.ntlworld.com/bobosola/pnghowto.htm
    • Foto's en logo's
      • Foto's
        • Hoe groter formaat hoe beter
        • Verbeteren: contrast, niveaus, kleurdiepte
        • Resizen: bicubic smoother/sharper
        • Herknippen en verkleinen: .jpg 7
      • Logo's
        • Liefst in vectoriële vorm (.eps): schaalbaar
        • Voorkeur .gif en .png: formaat, transparantie, kleuren, browserbeperkingen.
    • Afbeeldingen
      • <img src=“logo.gif&quot; width=&quot;105&quot; height=&quot;125&quot; border=“0” alt=“De post&quot;>
      • img : Tag voor afbeeldingen width : breedte height : hoogte border : rand rondom afbeelding alt : alternatieve tekst
    • Combinatie hyperlink afbeelding
      • Afbeelding aanklikbaar maken : plaats de <IMG> tag tussen <A HREF> en </A> tags
      • <a href=“http://www.unizo.be&quot;> <img src=“logo-unizo.gif“ width=&quot;38&quot; height=&quot;34“ border=&quot;0&quot;></a>
    • Grafische elementen : editors
      • Foto's: Adobe Photoshop, Fireworks en vele andere bij digitale camera's geleverde pakketten.
      • Grafisch: Adobe Illustrator, Corel Draw
      • Open source: Paint.net ( www.getpaint.net ), Gimp ( www.gimp.org ), Picasa, ...
    • Afbeeldingen vinden
      • Professioneel: Corbis, Getty
      • Google afbeeldingen zoeken: copyright!
      • Vrij van copyright
        • www.sxc.hu
        • http://www.masternewmedia.org/news/2005/04/01/where_to_find_free_images.htm
        • www.yotophoto.com : zoeken op kleur!
    • Afbeeldingen html
      • <img src=“foto.jpg&quot; width=&quot;140&quot; height=&quot;100“ />
      • Alt en title: accessibility
      • Link
      • Align: top, left, right + <br clear=&quot;all“ />
      • Centreren: <div align =“center“></div>
      • Spacer vb min-width
    • Css afbeeldingen img { border: 0; /* lelijke blauwe linkrand weg */ margin: 0 0 10px 10px; /* marge start boven + wijzerszin */ /* voor een rechts uitgelijnde foto */ width: 200px; height: 200px; /* breedte en hoogte fixeren */ }
    • Fotoalbums
      • http://jalbum.net/
      • http://www.stegmann.dk/mikkel/porta/
      • http://www.bananalbum.com/
      • http://www.airtightinteractive.com/simpleviewer/ : Flash
      • Indien je Photoshop cs2 hebt: de webalbums die je daarmee kunt maken en oa de extra Flash fotoalbums op http://www.adobe.com/support/downloads/detail.jsp?ftpID=2961  
    • Met de steun van Verschillen html & xhtml
    • Verschillen html vs xhtml
      • IIn xhtml is DOCTYPE verplicht
      • AAlle elementen moeten gesloten worden
        • Incorrect: <p>Dit is een paragraaf.<p>Dit is nog een paragraaf.
        • Correct: <p>Dit is een paragraaf.</p><p>Dit is nog een paragraaf.</p>
      • OOok lege elementen moeten gesloten worden
        • Incorrect: <br>, <hr>, <img>
        • Correct: <br />, <hr />, <img />
      • EElementen moeten correct genest worden
        • Incorrect: <em><strong>Dit is tekst met nadruk.</em></strong>
        • Correct: <em><strong>Dit is tekst met nadruk.</strong></em>
    • Html vs xhtml (vervolg)‏
      • AAttribuutwaarden moeten tussen aanhalingstekens
        • Incorrect: <td rowspan=3> of <img src=&quot;plaatje.gif&quot; width=100 height=50>
        • Correct: <td rowspan=&quot;3&quot;> of <img src=&quot;plaatje.gif&quot; width=&quot;100&quot; height=&quot;50” />
      • AAlle elementen en attributen moeten klein geschreven worden
        • Incorrect: <BODY><P ID=&quot;iets&quot;>Tekst</P></BODY>
        • Correct: <body><p id=&quot;iets&quot;>Tekst</p></body>
      • AAttributen mogen niet geminimaliseerd worden
        • Incorrect: <option selected>, <frame noresize>, <input checked>
        • Correct: <option selected=&quot;selected&quot;>, <frame noresize=&quot;noresize&quot;>, <input checked=&quot;checked“>
    • Overschakelen html -> xhtml
      • HTML Tidy
        • http://cgi.w3.org/cgi-bin/tidy : online
        • http://tidy.sourceforge.net/ : download
        • Dreamweaver plugins
        • http://www.nypl.org/styleguide/xhtml/tips.html#dreamweaver
    • Met de steun van Bestandsstructuur
    • Bestandsstructuur website
      • Mappen
      • Css
      • Javascript
      • Images
      • Bestanden
      • Index.htm
      • 404.htm & .htaccess
      • Robots.txt
      • Cgi-bin
    • Met de steun van Layout: Frames, Tabellen en CSS
        • Een grove structuur voor de pagina
    • Schermformaten
      • Standaard 1024x768
        • Favorieten open?
        • Bovenmenu aftrekken
        • Toolbar
        • Laptop widescreen
        • Oudere pc’s 800x600, nieuwere 1152x…
        • Verschillen mac/pc
        • Verschillen IE en Firefox
        • Eventueel oplossen met styleswitcher
    • Layout met Frames
      • Uitgevonden in 1996 door Netscape.
      • Het is sterk afgeraden frames te gebruiken
        • Frames schaden het basisidee van het internet: 1 pagina = 1 url (daarom ook afgeraden door W3C)‏
        • Zoekmachines, schermlezers voor slechtzienden, printers en pda's hebben allen problemen met frames.
        • Frames zijn een makkelijke oplossing om een vast menu op elke webpagina te krijgen en worden daarom nog vaak gebruikt op amateursites.
    • Html frames
      • <frameset cols=&quot;150,*&quot;>
      • <frame name=&quot;links“ scrolling=&quot;no&quot; noresize target=&quot;rboven&quot; src=&quot;links.htm&quot;>
      • <frameset rows=&quot;20%,*&quot;>
      • <frame name=&quot;rboven“ target=&quot;ronder&quot; src=&quot;boven.htm&quot;>
      • <frame name=&quot;ronder“ src=&quot;rechtsonder.htm&quot;>
      • </frameset> </frameset>
    • Layout met Tabellen
      • Tabellen worden nog vaak gebruikt als basislayout voor webpagina's
      • Het W3C raadt het gebruik van tabellen als basis van layout af. Tabellen dienen voor “tabular data”.
      • Voordelen van tabellen als layout
        • Grafisch designers kunnen hun ontwerp slicen en als puzzel terug samenstellen
        • Programmeurs kunnen resultaten van code makkelijk weergeven
    • Tabellen <table width=&quot;93&quot;> <tr> <td width=&quot;85&quot;>eerste rij</td> </tr> <tr> <td width=&quot;85&quot;>tweede rij</td> </tr> </table>
    • Layout via div layers
      • Cascading Style Sheets
      • Opmaak scheiden van inhoud
      • Precies positioneren van elementen (meer bekend als ‘layers’)‏
      • Geïmplementeerd in browsers vanaf de 4.0 versies, maar nog correcties nodig.
      • CSS is de beste en meest recente manier om webpagina’s op te stellen.
    • Vast-stellingen
      • Hoe ziet de surfer mijn webpagina?
      • Grootte van het browserscherm
        • 800x600, 1024x768, pda's, laptop wide, ...
      • Verschillen tussen browsers
        • Internet Explorer
        • Firefox (open source opvolger van Netscape)‏
        • Opera, Safari
      • Verschillen tussen versies
      • Verschillen tussen MAC en PC
    • Structuur: Lagen maken <div id=“container”> <div id=“head”> </div> <div id=“content”> </div> <div id=“nav”> </div> </div>
    • Centreren 1 kolom liquid Liquid layouts div#container{ margin-left: 10%; margin-right: 10%; }
    • 1 Kolom gecentreerd CSS met auto margin: #container { width:720px; margin: 0 auto; }
    • 1 Kolom gecentreerd + hacks CSS met auto margin: body { text-align:center; // IE 5/6 quirks mode hack min-width:760px; // Netscape 6 bug: body > wrapper } #container { width:720px; margin: 0 auto; text-align:left; // IE 5/6 quirks mode hack compensatie }
    • 1 Kolom gecentreerd (versie 2)‏ CSS met negatieve margin: #container { width:720px; position:relative; left:50%; margin-left:-360px; }
    • 2 Kolommen – fixed – xhtml <div id=“container&quot;> <div id=“header”> </div> <div id=“content”> <!-- Voor navigatie:screenreaders --> </div> <div id=“navigatie”> </div> <div id=“footer”> </div> </div>
    • 2 Kolommen – fixed – css #content { width:520px; float:right; } #navigatie { width:180px; float:left; } #footer { clear:both; }
    • 2 Kolommen fixed - padding #navigatie { padding-top: 20px; padding-bottom: 20px; } #navigatie li { padding-left: 20px; // box model bug IE5 padding-left: 20px; // box model bug IE5 } #content h1, #content h2, #content p { padding-right: 20px; // box model bug IE5 }
    • 3 Kolommen fixed – xhtml <div id=“content”> <div id=“hoofdcontent”> </div> <div id=“contentblok”> </div> </div>
    • 3 Kolommen fixed – css #hoofdcontent { width: 320px; float: left; } #contentblok { width:180px; float: right; }
    • 3 Kolommen fixed – padding #contentblok h1, #contentblok h2, #contentblok p { padding-left: 20px; // box model bug IE5 padding-right: 20px; // box model bug IE5 }
    • 3 Kolommen liquid – css #container { width: 85%; margin: 0 auto; } #navigatie { width: 23%; float: left; } #content { width: 75%; float: right; }
    • 3 Kolommen elastisch – css Default font-size = 16px 10px = 62.5% van 16px body { font-size: 62.5% }
    • 3 Kolommen elastisch – css #container { width: 72em; margin: 0 auto; } #navigatie { width: 18em; float: left; } #content { width: 52em; float: right; }
    • 3 Kolommen elastisch – css #hoofdcontent { width: 32em; float: left; } #contentblok { width: 18em; float: right; }
    • Hybrid liquid-elastisch – css #container { width: 72em; max-width: 100%; margin: 0 auto; } #navigatie { width: 18em; max-width: 23%; float: left; } #content { width: 52em; max-width: 75%; float: right; }
    • Hybrid liquid-elastisch – css #hoofdcontent { width: 32em; max-width: 66%; float: left; } #contentblok { width: 18em; max-width: 31%; float: right; }
    • Liquid en elastische afbeeldingen
      • #header {
      • height: 171px;
      • background: url(images/hoofding.png) no-repeat left top;
      • }
      • Voordelen:
      • Cache
      • Schalen van de afbeelding bij elastische of liquid layouts (afbeelding op maximale grote nemen die niet volledig getoond wordt bij kleiner resizen)‏
    • Header afbeelding alternatief #header { width: 100% overflow: hidden; } <div id=”header”> <img src=”images/hoofding.png” width=”1600” height=”171” /> </div>
    • Faux Columns Het creëren van een kolom effect voor de navigatie. Gebaseerd op: http://alistapart.com/articles/fauxcolumns #container { background: #fff url(images/fauxcolumns.gif) repeat-y left top; }
    • Met de steun van Positioning
    • Box model
    • Block level & Inline elements
      • Block-level elements: <p>, <h1>, <div>
        • Worden onder elkaar weergegeven
        • Inline via display:none;
      • Inline elements: <strong>, <span>, <a>
        • Worden naast elkaar weergegeven
        • block via display:block;
      • Positionering:
        • Normal flow
        • Float
        • Absolute positioning & fixed positioning
    • Relative positioning
        • #box1 {
        • position: relative;
        • width:150px;
        • height: 100px;
        • background-color:red;
        • }
        • #box2 {
        • position: relative;
        • width:150px;
        • height: 100px;
        • background-color:green;
        • }
        • #box3 {
        • position: relative;
        • width:150px;
        • height: 100px;
        • background-color:blue;
        • }
    • Relative positioning
        • Volgt normal flow van andere blokken en positie tov elkaar.
        • Boxen staan gepositioneerd relatie tov elkaar.
        • #box2 {
        • position: relative;
        • width:150px;
        • height: 100px;
        • top:20px;
              • left:20px;
              • z-index:2;
        • background-color:green;
        • }
    • Absolute positioning
        • Element neemt geen plaats in.
        • Andere elementen houden er geen rekening mee
        • Zwevend
        • Positie enkel tov ancestor/parent element
        • z-index
        • #box2 {
        • position: absolute;
        • width:150px;
        • height: 100px;
        • top:20px;
        • left:20px;
        • z-index:2;
        • background-color:green;
        • }
    • Fixed positioning
        • Gelijkaardig principe als absolute positioning
        • Positie enkel tov venster zelf
        • Usability: menu of invulformulier blijft steeds zichtbaar
        • Niet ondersteund door IE6
        • #box2 {
        • position: fixed;
        • width:150px;
        • height: 100px;
        • top:20px;
        • left:20px;
        • z-index:2;
        • background-color:green;
        • }
    • Floating
        • Boxen kunnen links of rechts gefloat worden
        • Als box waarin de 3 boxen vervat zit niet breed genoeg is valt de derde box eronder
        • Clear: left, right, both, none: geeft aan welke kant van een box niet naast een gefloate box mag zijn.
        • #box2 {
        • float:right;
        • width:150px;
        • height: 100px;
        • background-color:green;
        • }
    • Clear
        • Voorbeeld: Image met paragraaf ernaast en eronder. Vermijden van “wezen”.
        • Clear: left, right, both, none: geeft aan welke kant van een box niet naast een gefloate box mag zijn.
        • img {
        • float:left;
        • }
    • Problemen met float
        • Voorbeeld: Image met tekst rechts
        • .news {
        • background-color:gray;
        • border:solid 1px black;
        • float:left;
        • }
        • .news img {
        • float:left;
        • }
        • .news p {
        • float:right;
        • }
    • Problemen met float
        • Oplossing 1: clear
          • CSS: .clear {
          • clear:both;
          • }
          • XHTML: <div class=”clear”></div>
          • Nadeel: extra markup
        • Oplossing 2: box zelf floaten
        • CSS: .news {float:left;}
        • Nadeel: volgend element is ook beïnvloed door float => alles floaten en clearen in de footer
        • Oplossing 3:
          • Html: <br clear=&quot;all&quot; />
          • Nadeel: oude techniek, extra markup en extra hoogte van br
        • Meer oplossingen: http://www.positioniseverything.net/easyclearing.html
    • Met de steun van Lijsten
    • Styling van lijsten
        • ul { margin:0;
        • padding:0;
        • list-style-type:none;
        • }
        • li { background: url(bullet.gif) no-repeat 0 50%;
        • padding-left:30px;
        • }
    • Met de steun van Navigatie
    • Opstellen inhoudstafel en menu
      • Usability: snel informatie vinden
      • Accessibility
        • Slechtzienden
        • Mobiel internet
        • Zoekmachines
      • Menu positie: boven, links, rechts, elders
      • Inhoudstafel opstellen
    • Listamatic: css menu’s met lijsten
      • Zie:
      • http://css.maxdesign.com.au/listamatic/
      • Opmerkingen:
      • list-style-type
      • Achtergronden via background
      • Browser support chart
      • Horizontale lijsten: float: left; of display: inline; (geen IE5)
    • Vertikale navigatie
        • <ul>
        • <li class=&quot;first selected&quot;><a href=&quot;home.htm&quot;>Home</a></li>
        • <li><a href=&quot;about.htm&quot;>About</a></li>
        • <li><a href=&quot;services.htm&quot;>Our Services</a></li>
        • <li><a href=&quot;work.htm&quot;>Our Work</a></li>
        • <li><a href=&quot;news.htm&quot;>News</a></li>
        • <li><a href=&quot;contact.htm&quot;>Contact</a></li>
        • </ul>
    • CSS Sprites
        • http://www.alistapart.com/articles/sprites
        • http://www.koba.be/lesimages/pixy-rollover.gif
    • Vertikale navigatie css
        • ul {
        • margin: 0;
        • padding: 0;
        • list-style-type: none;
        • }
        • li {
        • display: inline: /* :hack: Removes large gaps in IE/Win */
        • }
        • a {
        • display: block;
        • width: 200px;
        • height: 39px;
        • line-height: 39px;
        • color: #000;
        • text-decoration: none;
        • background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left bottom;
        • text-indent: 50px;
        • text-transform: uppercase;
        • }
    • Vertikale navigatie css
        • a:hover, .selected a {
        • background-color: #369;
        • background-position: right bottom;
        • color: #fff;
        • }
        • .first a {
        • height: 40px;
        • line-height: 40px;
        • }
    • Horizontale navigatie html
        • <ul>
        • <li class=&quot;first&quot;><a href=&quot;#&quot;>Home</a></li>
        • <li><a href=&quot;#&quot;>About</a></li>
        • <li><a href=&quot;#&quot;>News</a></li>
        • <li><a href=&quot;#&quot;>Products</a></li>
        • <li><a href=&quot;#&quot;>Services</a></li>
        • <li><a href=&quot;#&quot;>Clients</a></li>
        • <li><a href=&quot;#&quot;>Case Studies</a></li>
        • </ul>
    • Horizontale navigatie css
        • ul {
        • margin: 0;
        • padding: 0;
        • float: left;
        • width: 720px;
        • background: #FAA819 url(images/mainNavBg.gif) repeat-x;
        • list-style: none;
        • text-transform: uppercase;
        • }
        • ul li {
        • float: left;
        • }
    • Horizontale navigatie css
        • ul a {
        • padding: 0 2em;
        • line-height: 2.1em;
        • background: url(images/mainNavBorder.gif) repeat-y left top;
        • text-decoration: none;
        • color: #fff;
        • float: left;
        • display: block;
        • }
        • ul a:hover {
        • color: #333;
        • }
        • ul .first a {
        • background: none;
        • }
    • Suckerfish drop down menu
      • Zie:
      • http://www.htmldog.com/articles/suckerfish/dropdowns/
      • Volledig css gebaseerd (met javascript voor IE)‏
      • Volledig zichtbaar voor zoekmachines
      • Probleemloos uitbreidbaar naar verschillende niveaus
      • Diverse sons of suckerfish
    • Met de steun van <head>
    • <head>
      • Karakterset
      • <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; />
      • Javascript
      • <script language=&quot;JavaScript&quot; src=&quot;../javascript/scripts.js&quot; type=&quot;text/javascript&quot;></script>
    • <head> Beveiliging <meta name=&quot;author&quot; content=&quot;info@koba.be, www.koba.be&quot; /> <meta http-equiv=&quot;imagetoolbar&quot; content=&quot;no“ /> <meta http-equiv=&quot;Window-target&quot; content=&quot;_top“ /> <meta name=&quot;MSSmartTagsPreventParsing&quot; content=&quot;true“ /> Hotlink + index protection op server
    • <head> zoekmachines <title>titel</title> <meta name=&quot;keywords&quot; content=&quot;keywords,keyword,other keyword&quot; /> <meta name=&quot;description&quot; content=&quot;description&quot; />
    • <head> meta tags <meta http-equiv=“refresh&quot; content=&quot;4;url=http://www.domain.com/link.html” /> (of uur verversen)‏ <meta http-equiv=&quot;content-language&quot; content=“nl“ /> <meta name=&quot;robots&quot; content=“index, follow“ /> (of noindex, nofollow of noarchive)‏
    • <head> nutteloze meta tags <!-- HTML Comments (treated as HTML markup) --> : tenzij voor uitleg <meta name=&quot;DC.title&quot; lang=&quot;en&quot; content=&quot;DC Dublin Core META Tags - DCMI Dublin Core Metadata Initiative“ /> <meta name=&quot;revisit-after&quot; content=&quot; 7 days “ />
    • Robots.txt
      • User-agent: *
      • Disallow: /cgi-bin/
      • Disallow: /javascript/
      • Disallow: /Templates/
      • Disallow: /css/
      • Bemerk
      • Gehoorzaamheid ?
      • Gevaar hele site niet geïndexeerd
    • <head> css <link href=&quot;../css/screen.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> <link href=&quot;../css/print.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; /> Belangrijk: volgorde, zie cursus p122
    • Met de steun van Verschillende Style sheets
    • Voor print en handheld
      • Invoegen externe style sheet: p127
      • Printstyle:
      • zie cursus p209
      • Css discuss: http://css-discuss.incutio.com/?page=PrintStylesheets
      • Eric Meyer: http://www.alistapart.com/articles/goingtoprint/
      • Zeldman: http://www.zeldman.com/essentials/print/
      • Handheld style: zie cursus p199
    • Styleswitcher http://www.alistapart.com/stories/alternate/ <script type=&quot;text/javascript&quot; src=&quot;/scripts/styleswitcher.js&quot;></script> <a href=&quot;#&quot; onclick=&quot;setActiveStyleSheet('default'); return false;&quot;>change style to default</a> <a href=&quot;#&quot; onclick=&quot;setActiveStyleSheet('paul'); return false;&quot;>change style to paul</a> http://www.csszengarden.com Ofwel met php (indien geen javascript): http://www.gigadesign.be/2005/08/styleswitcher-opnieuw-met-php/
    • Conditional comments voor IE <!--[if IE]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iehacks.css&quot; /> <![endif]--> <!--[if IE 5]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iehacks-5.css&quot; /> <![endif]--> <!--[if lt IE 8]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iehacks.css&quot; /> <![endif]--> Voor IE vanaf versie 5 : http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp
    • Met de steun van Tabellen
    • Tabellen html
      • <table>
      • <th>titel</th> <tr>
      • <td>a1</td>
      • <td>a2</td>
      • </tr> <tr>
      • <td>b1</td>
      • <td>b2</td>
      • </tr> </table>
    • Tabellen html (vervolg)‏
      • th ipv td
      • Width
      • Colspan, rowspan
      • Align, valign
      • Cellpadding, cellspacing
      • Centreren tabel
      • <caption>Dit is het bijschrift</caption>
    • Tabellen css
      • table { border-collapse: collapse; border: 1px solid #C0C0C0; background-color: #FFFF99; width:300px; }
      • td { border: 1px solid #C0C0C0; text-align: center; color: #000000; background-color: #99FFCC; }
      • caption { caption-side: bottom; /* niet in IE */
      • text-align: left; }
      • Achtergrondkleur
      • .kolomgrijs { background-color:#CCCCCC; }
      • <td class=« kolomgrijs »>
    • Summary en caption
      • <table cellspacing=&quot;0&quot; id=&quot;playlistTable&quot; summary=&quot;Top 15 songs played. Top artitst include Coldplay, Yeah Yeah Yeahs, Snow Patrol, Deeper Water, Kings of Leon, Embrace, Oasis, Franz Ferdinand, Jet, The Bees, Blue States, Kaiser Chiefs and Athlete.&quot;> <caption>Top 15 Playlist</caption>
    • Thead
      • <thead>
      • <tr>
      • <th></th>
      • <th></th>
      • </tr>
      • </thead>
    • Tbody
      • <tbody>
      • <tr>
      • <td></td>
      • <td></td>
      • </tr>
      • </tbody>
    • Odd en even
      • <tr class=”odd”></tr>
      • <tr class=”even”></tr>
    • Table css
      • table {
      • border-collapse: collapse; (dus niet separate standaard)‏
      • width: 50em;
      • border: 1px solid #666;
      • }
      • th, td {
      • padding: 0.1em 1em;
      • }
      • Maar voor IE6: cellspacing=”0”
    • Caption css
      • caption {
      • font-size: 1.2em;
      • font-weight: bold;
      • margin: 1em 0;
      • }
    • Thead css
      • thead {
      • background: #ccc url(images/bar.gif) repeat-x left center;
      • border-top: 1px solid #a5a5a5;
      • border-bottom: 1px solid #a5a5a5;
      • }
      • th {
      • font-weight: normal;
      • text-align: left;
      • }
    • Afwerking
      • .odd {
      • background-color:#edf5ff; }
      • tr:hover {
      • background-color:#3d80df;
      • color: #fff; }
      • thead tr:hover {
      • background-color: transparent;
      • color: inherit; }
    • Met de steun van Formulieren
    • Eenvoudig formulier
      • <form id=&quot;comments_form&quot; action=&quot;#&quot; method=&quot;post&quot;>
      • </form>
    • Fieldset & Legend
      • <fieldset>
      • <legend>Your Contact Details</legend>
      • </fieldset>
    • Label en Input
      • <p>
      • <label for=&quot;author&quot;>Name: <em class=&quot;required&quot;>(Required)</em></label>
      • <input name=&quot;author&quot; id=&quot;author&quot; type=&quot;text&quot; />
      • </p>
      • <p>
      • <label for=&quot;email&quot;>Email Address:</label>
      • <input name=&quot;email&quot; id=&quot;email&quot; type=&quot;text&quot; />
      • </p>
      • <p>
      • <label for=&quot;url&quot;>Web Address:</label>
      • <input name=&quot;url&quot; id=&quot;url&quot; type=&quot;text&quot; />
      • </p>
    • Message (textarea)‏
      • <fieldset>
      • <legend>Comments</legend>
      • <p>
      • <label for=&quot;text&quot;>Message: <em class=&quot;required&quot;>(Required)</em></label>
      • <textarea name=&quot;text&quot; id=&quot;text&quot; cols=&quot;20&quot; rows=&quot;10&quot;></textarea>
      • </p>
      • </fieldset>
    • Form css
      • form {
      • font-size: 1.4em;
      • width: 30em; }
      • fieldset {
      • margin: 1em 0; /* space out the fieldsets a little*/
      • padding: 1em;
      • border : 1px solid #ccc; }
      • legend {
      • font-weight: bold;
      • }
      • label {
      • display: block; }
      • label .required {
      • font-size: 0.75em;
      • color:#760000; }
      • input {
      • width: 200px; }
      • input.radio, input.submit {
      • width: auto;
      • }
      • /* style form elements on focus */
      • input:focus, textarea:focus {
      • background: #ffc; }
      • input.radio {
      • float: left;
      • margin-right: 1em; }
      • textarea {
      • width: 300px;
      • height: 100px; }
    • Wat zijn formulieren Gegevens verkrijgen van surfers
    • Formulieren aanmaken <FORM name=&quot;enquete&quot; method=&quot;post&quot; action=&quot;mailto:hansrossel@koba.be&quot;> <P>Familienaam <INPUT type=&quot;text&quot; name=&quot;familienaam&quot; size=&quot;50&quot; maxlength=&quot;50“ /> </P> </FORM>
    • Input tekst <form> Voornaam: <input type=&quot;text&quot; name=“voornaam“ /> <br> Naam: <input type=&quot;text&quot; name=“naam“ /> <textarea name=“bericht&quot; cols=&quot;40&quot; rows=&quot;5“></textarea> </form>
    • Input radio buttons <form> <input type=&quot;radio&quot; name=“geslacht&quot; value=“man“ /> Man <br> <input type=&quot;radio&quot; name=“geslacht&quot; value=“vrouw“ /> Vrouw </form>
    • Input checkbox <form> <input type=&quot;checkbox&quot; name=“fiets“ /> Ik heb een fiets <br> <input type=&quot;checkbox&quot; name=“auto“ /> Ik heb een auto </form>
    • Drop down menu <form> <select name=“autos&quot;> <option value=&quot;volvo&quot;>Volvo</option> <option value=&quot;volvo&quot;>Volvo</option> <option value=&quot;saab&quot;>Saab</option> <option value=&quot;fiat&quot; selected=&quot;selected&quot;>Fiat</option> <option value=&quot;audi&quot;>Audi</option> </select> </form>
    • Formulieren css: Submit <style tyle=text/css> input.red { background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;} </style> <input class=&quot;red&quot; type=&quot;submit&quot; value=“Verzenden“ />
    • Formulieren css vervolg #submit{ background:#BC4819; color:#FFF; width:auto; padding: 2px 10px; border:none; }
    • Formulieren css: Input <style tyle=text/css> input.pink { background-color: #ffcccc; font-size: 10px;} </style> <input class=&quot;pink&quot; type=&quot;text&quot; name=“voornaam&quot; size=&quot;20“ />
    • Formulieren css: Textarea <style tyle=text/css> textarea.violet { background-color: #ccccff;} </style> <textarea class=&quot;violet&quot; rows=&quot;4&quot; name=“uwvraag&quot; cols=&quot;20&quot;>
    • Formulieren css input, textarea{ font-family: &quot;Lucida Sans Unicode&quot;,&quot;Lucida Sans&quot;, &quot;Trebuchet MS&quot;, Arial, Helvetica, sans-serif; font-size:1em; border: 1px solid #CDC6B2; border-left-width: 3px; padding:2px 0; width: 240px; overflow:hidden; }
    • CSS checkbox, drop down <input class=&quot;red&quot; type=&quot;radio&quot; value=&quot;V1&quot; checked name=&quot;R1&quot;> <option class=&quot;pink&quot; value= “introhtml.htm&quot;>- Intro to HTML</option>
    • Verwerking van formulieren
      • Verstuurd via e-mail
      • Verwerking via CGI-scripts (nms)‏
      • Verwerking via Server Side scripttalen (ASP – PHP – ColdFusion - …)‏
      • Afhankelijk van wat de provider aanbiedt
    • Volledig formulier <form name=&quot;example&quot; id=&quot;example&quot; action=&quot;http://www.website.be/cgi-bin/berichtje.cgi&quot; method=&quot;post&quot; /> <input type=&quot;hidden&quot; name=&quot;subject&quot; value=&quot;Vraag via contactpagina op website&quot; /> <input type=&quot;hidden&quot; name=&quot;recipient&quot; value=&quot;1&quot; /> <input type=&quot;hidden&quot; name=&quot;redirect&quot; value=&quot;http://www.website.be/bevestiging.htm&quot; /> <input type=&quot;hidden&quot; name=&quot;env_report&quot; value=&quot;REMOTE_HOST,REMOTE_ADDR,REMOTE_USER,HTTP_USER_AGENT,HTTP_REFERER&quot; /> <p><label for=&quot;name&quot;>Naam</label> <input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; /></p> <p><label for=&quot;email&quot;>E-mailadres</label> <input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot; /></p> <p><label for=&quot;tel&quot;>Telefoon</label> <input type=&quot;text&quot; id=&quot;tel&quot; name=&quot;tel&quot; /></p> <p><label for=&quot;message&quot;>Bericht</label> <textarea id=&quot;message&quot; name=&quot;message&quot; cols=&quot;40&quot; rows=&quot;5&quot;></textarea><br /></p> <p><input type=&quot;submit&quot; id=&quot;submit&quot; name=&quot;submit&quot; value=&quot;verzenden&quot; style=&quot;margin-top:10px;&quot; /></p> </form>
    • Contrôle formulier Kan server side of client side (of beide)‏ Server side: nms Client side http://www.quirksmode.org/dom/error.html
    • NMS Formmail
      • Zie: http://nms-cgi.sourceforge.net/scripts.shtml
      • Basisinstellingen :
      • $max_recipients = 2;
      • $mailprog = '/usr/sbin/sendmail -oi -t';
      • $postmaster = 'hansrossel@yahoo.com';
      • @referers = qw(wmw.be 216.193.202.92 localhost);
      • @allow_mail_to = qw(hansrossel@yahoo.com [email_address] );
      • %recipient_alias = ('1' => 'hansrossel@yahoo.com', '2' => 'info@koba.be');
      • $send_confirmation_mail = 0;
    • NMS Formmail
      • Beveiliging spambots: oa « berichtje », geen bevestigingsmail, recente versie gebruiken, …
      • Chmod: 755
        • aanvinken: owner: read, write, execute group: read, execute other: (world) read execute
    • Email formulier antwoord Hieronder is het formulier dat verstuurd werd door ( [email_address] ) op dinsdag, november 07, 2006 at 15:07:56 -------------------------------------------------------------------------- naam: vvvzv adres: azvrv email: avzvz 12 bericht: nopeikd$jc Submit: Verzenden ! --------------------------------------------------------------------------- REMOTE_ADDR: 81.246.76.162 HTTP_USER_AGENT: Mozilla/5.0 (Windows; U; Windows NT 5.1; nl; rv:1.8.1) Gecko/20061010 Firefox/2.0
    • Met de steun van Media invoegen
    • <embed> en <object> http://www.handleidinghtml.nl/html/elementen/embed.html http://www.handleidinghtml.nl/html/elementen/object.html Het EMBED element wordt gebruikt om multimedia objecten in te sluiten in een HTML-document. Het kan gaan om geluidsfragmenten met de extensie wav, au en mid, maar bijvoorbeeld ook om QuickTime filmpjes (mov), Shockwave Flash animaties (swf) en video clips (avi).
    • Grafische elementen : bewegende beelden
      • Animated gif
      • .swf bestanden : vectorgebaseerde animaties door middel van bv. Macromedia Flash : ( www.macromedia.com )‏
      • .mpg / .avi / … : filmmateriaal, maar grotere bestanden
    • Muziek toevoegen aan site <object width= &quot;300&quot; height= &quot;42&quot; > <param name= &quot;src&quot; value= “housefinch.mp3&quot; > <param name= &quot;autoplay&quot; value= &quot;true&quot; > <param name= &quot;controller&quot; value= &quot;true&quot; > <param name= &quot;bgcolor&quot; value= &quot;#FF9900&quot; > <embed src= “housefinch.mp3&quot; autostart= &quot;true&quot; loop= &quot;false&quot; width= &quot;300&quot; height= &quot;42&quot; controller= &quot;true&quot; bgcolor= &quot;#FF9900&quot; > </embed> </object> http://digitalmedia.oreilly.com/2005/02/23/mp3_embed.html
    • Quicktime filmpjes
      • http://www.handleidinghtml.nl/html/objecten/objecten07.html
      • http://developer.apple.com/quicktime/quicktimeintro/tools/embed2.html
      • Voorbeeld
      • <OBJECT CLASSID=&quot;clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B&quot; WIDTH=&quot;136&quot; HEIGHT=&quot;176&quot; TYPE=&quot;video/quicktime&quot; CODEBASE=&quot;http://www.apple.com/qtactivex/qtplugin.cab&quot;>
      • <PARAM NAME=&quot;src&quot; VALUE=&quot;test.mov&quot;>
      • <PARAM NAME=&quot;autoplay&quot; VALUE=&quot;false&quot;>
      • <PARAM NAME=&quot;volume&quot; VALUE=&quot;25&quot;>
      • <EMBED SRC=&quot;test.mov&quot; WIDTH=&quot;136&quot; HEIGHT=&quot;176&quot; TYPE=&quot;video/quicktime&quot; PLUGINSPAGE=&quot;http://www.apple.com/quicktime/download/&quot; AUTOPLAY=&quot;false&quot; VOLUME=&quot;25&quot;></EMBED>
      • </OBJECT>
    • Enkel met <object> http://alistapart.com/articles/byebyeembed Vermijden van de niet standaard <embed> te gebruiken. Alternatieve oplossing voor de dubbele oplossing <object> én <embed>
    • Enkel <object> Quicktime <object classid=&quot;clsid:02BF25D5-8C17-4B23-BC80- » D3488ABDDC6B&quot; codebase=&quot;http://www.apple.com/qtactivex/qtplugin.cab&quot; width=&quot;320&quot; height=&quot;260&quot;> <param name=&quot;src“ value=&quot;http://www.sarahsnotecards.com/catalunyalive/ » diables.mov&quot; /> <param name=&quot;controller&quot; value=&quot;true&quot; /> <param name=&quot;autoplay&quot; value=&quot;false&quot; /> <!--[if !IE]>--> <object type=&quot;video/quicktime“ data= &quot;http://www.sarahsnotecards.com/catalunyalive/” “diables.mov&quot; width=&quot;320&quot; height=&quot;260&quot;> <param name=&quot;autoplay&quot; value=&quot;false&quot; /> <param name=&quot;controller&quot; value=&quot;true&quot; /> </object> <!--<![endif]--> </object>
    • Via Youtube <object width=&quot;425&quot; height=&quot;350&quot;> <param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/synxFmQJ_0A&quot;></param> <param name=&quot;wmode&quot; value=&quot;transparent&quot;></param> <embed src=&quot;http://www.youtube.com/v/synxFmQJ_0A&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed> </object>
    • Via Google video <embed style=&quot;width:400px; height:326px;&quot; id=&quot;VideoPlayback&quot; type=&quot;application/x-shockwave-flash&quot; src=&quot;http://video.google.com/googleplayer.swf?docId=3913745262811179417&amp;hl=en-CA&quot;> </embed>
    • Flash filmpjes <OBJECT CLASSID=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; WIDTH=&quot;128&quot; HEIGHT=&quot;96&quot; TYPE=&quot;application/x-shockwave-flash&quot; CODEBASE=&quot;http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0&quot;> <PARAM NAME=&quot;movie&quot; VALUE=&quot;test.swf&quot;> <PARAM NAME=&quot;play&quot; VALUE=&quot;true&quot;> <PARAM NAME=&quot;loop&quot; VALUE=&quot;true&quot;> <PARAM NAME=&quot;quality&quot; VALUE=&quot;high&quot;> <EMBED SRC=&quot;test.swf&quot; WIDTH=&quot;128&quot; HEIGHT=&quot;96&quot; TYPE=&quot;application/x-shockwave-flash&quot; PLUGINSPAGE=&quot;http://www.macromedia.com/go/getflashplayer&quot; PLAY=&quot;true&quot; LOOP=&quot;true&quot; QUALITY=&quot;high&quot;></EMBED> </OBJECT>
    • Microsoft patent probleem
      • Voor Flash, Quicktime, …: « click to activate and use this control… »
      • Adobe Flash Player, Authorware Player, Shockwave Player, Adobe Reader, Sun Java, Apple QuickTime, RealNetworks RealPlayer en andere ActiveX controls.
      • Oplossing via javascript:
        • http://www.apple.com/quicktime/tutorials/embed.html
        • http://www.adobe.com/designcenter/popular_topics/click_to_activate/
    • .flv videoformaat
      • Ffmpeg: conversie op server naar .flv + compressie
      • Flash players
        • Jeroen Weijring
        • Flowplayer
        • ...
    • Iframe:
      • Insluiten van andere html documenten
      • <IFRAME SRC=&quot;iframes-vb.html&quot; WIDTH=&quot;275&quot; HEIGHT=&quot;100&quot; FRAMEBORDER=&quot;0&quot; ALIGN=&quot;left&quot; STYLE=&quot;margin-right: 20px;“>
      • </IFRAME>
      • http://www.handleidinghtml.nl/html/frames/frames08.html
    • CSS Frameworks & Grids
        • CSS Frameworks & Grids
        • CSS3 Voorstel
        • Workflow & optimalisatie
    • Het belang van snelheid
      • Frameworks = Sneller werken
      • Compressie & optimalisatie = snellere pagina's
        • Amazon: 100 ms extra laadsnelheid geeft 1% minder verkoop (Bron: Greg Linden, Amazon)‏
        • Google: 500 ms extra laadsnelheid geeft 20% minder zoekopdrachten. (Source: Marrissa Mayer, Google)‏
        • Google: de pagina 30% kleiner maken geeft 30% meer kaart zoekopdrachten. (Bron: Marrissa Mayer, Google)‏
        • Yahoo!: 400 ms extralaaddtijd geeft een verhoging van 5 tot 9% van het aantal personen dat op de Back knop klikt vooraleer de pagina volledig geladen is. (Bron: Nicole Sullivan, Yahoo!)‏
    • Yslow
      • 80% van laadtijd is voor het laden van elementen vanuit html: css, js, videos.
      • 14 regels: http://developer.yahoo.com/performance/rules.html
      • Google tech & yslow http://www.youtube.com/watch?v=BTHvs3V8DBA
      • Yslow plugin voor firebug: http://developer.yahoo.com/yslow
    • Compressie & optimalisatie
      • Eerst valideren!
      • Kleinere css = sneller laden
      • Automatisch:
      • http://floele.flyspray.org/csstidy//css_optimiser.php : compressie & optimalisatie
    • CSS3 Template layout
      • Geavanceerd templating met css3 (draft): http://www.w3.org/TR/css3-layout
      • Jquery implementatie? http://ejohn.org/blog/css3-template-layout
    • Grid systemen
      • 974 grid: 2, 3, 4 kolommen met 14px margin
      • CSS Frameworks
        • http://en.wikipedia.org/wiki/List_of_CSS_frameworks
        • http://960.gs : 960px met 12 of 16 kolommen en 20px margin
        • http://www.blueprintcss.org : 950px met 24 kolommen en 10px margin
        • YAML: http://www.yaml.de/en
        • YUI Grids: http://developer.yahoo.com/yui/grids
    • Voordelen
      • Vertrekken van vaste basiscode (wiel niet heruitvinden)‏
      • Browser compatibiliteit: Herbruikbaarheid css en hacks voor IE6 (en zelfs IE5, maar als zelfs msn.com die niet meer respecteert...)‏
      • Professionele grid structuur
      • Flexibele voorgedefinieerde classes voor basiselementen: lijsten, tabellen, forms
      • Sneller werken, rapid prototyping (ipv wireframing) opstellen van mock-ups
      • Clean code
      • Klein <5kb
      • Iphone viewport is 960px
    • Nadelen
      • Jij en iedereen die aan de site werkt moet het framework kennen
      • Er is code die je niet gebruikt
      • Beperkingen in design
        • De xhtml layout zou moeten gebaseerd zijn op het design, niet omgekeerd
        • Fixed width vb 960px, voor 1280px schermen wil je soms 960px + extra niet belangrijke kolom (reclame)‏
    • Samenstelling
      • reset.css
      • typography.css
      • grid.css
      • ie.css
      • print.css
      • forms.css
    •  
    • Reset: Tripoli & compressie
      • * {margin:0; padding:0;}: traag
      • Eric Meyer: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded
      • Tripoli: http://devkick.com/lab/tripoli/
      • Compatibel met Windows: IE5, IE5.5, IE6, IE7, IE8, Opera 8, Opera 9, Safari, Firefox 2, Firefox 3, OS X: IE5, Firefox 2, Firefox 3, Safari 2, Safari 3, Camino
    • Blueprint
      • Framework : http://blueprintcss.org
      • Tools :
        • http://kematzy.com/blueprint-generator
        • http://code.google.com/p/blueprintcss/wiki/Tools
      • Plugins
        • In core: Fancy Type, RTL (right-to-left text and column layout support), Buttons, Link Icons (bestandstypes, external, ...)‏
        • Tabs: http://github.com/Montoya/blueprint-plugin---tabs/tree/master
        • Liquid: http://github.com/Montoya/blueprint-plugin---liquidgrid/tree/master
        • Silk icons: http://github.com/Montoya/blueprint-plugin---silksprite/tree/master
        • Voorbeeld: http://nettuts.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/
    • 960.gs
      • http://960.gs
      • Ook fluid: http://www.designinfluences.com/fluid960gs
      • En elastic http://csswizardry.com/typogridphy
      • Uitgewerkt voorbeeld: http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework
    • Bluetrip
      • http://bluetrip.org : combinatie van blueprint en 960.gs
    • Meer info
      • http://www.alistapart.com/articles/frameworksfordesigners
      • http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch
    • JQUERY
    • Jquery
      • Voordelen
        • Unobtrusive
        • Klein en licht
        • Trekt goed op css, eenvoudig te leren
        • Browser compatibiliteit
      • Concurrenten
        • MooTools, Prototype/Scriptaculous
        • Let op: conflicten en performance bij 2 frameworks
    • Populairiteit jquery groeit B: http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx Bron: http://www.google.com/trends?q=jquery%2C+mootools%2C+yahoo+ui%2C+dojo+(toolkit%7Cjavascript%7Clibrary%7Cframework)%2C+prototype+(toolkit%7Cjavascript%7Clibrary%7Cframework)&ctab=0&geo=all&date=all
    • Jquery toevoegen
      • http://www.learningjquery.com/2008/06/updated-jquery-bookmarklet
      • scripts.js maken in theme map met
        • $(document).ready(
        • function() {
        • $(‘p’).hide(‘slow’);
        • });
      • In template.php
        • drupal_add_js(path_to_theme().‘scripts.js’, ‘theme’, ‘header’); of via .info file toevoegen aan theme map
        • Jquery wordt automatisch geladen bij drupal_add_js
    • Voorbeelden
    • Core functionaliteit http://www.simonwhatley.co.uk/blog/wp-content/uploads/2008/02/jquery12_api_reference.png
    • Meer jquery
      • http://docs.jquery.com
      • http://learningjquery.com
      • http://ajaxian.com/archives/hacking-digg-with-firebug-and-jquery
      • http://plugins.jquery.com/
    • Met de steun van Speciale technieken
    • Javascript
      • http://www.webappers.com
      • www.dynamicdrive.com
      • plugins.jquery.com
    • Opacity http://www.mandarindesign.com/opacity.html Verschillende opacity technieken
    • Advanced selectors External links
    • Met de steun van CSS Hacks Met dank aan Internet Explorer
    • Webstandaarden
      • http://validator.w3.org En http://jigsaw.w3.org/css-validator
      • http://www.webstandards.org
      • Acid 2 en 3 test
        • Acid 2: http://www.webstandards.org/files/acid2/test.html
        • Acid 3: http://acid3.acidtests.org
        • SVG test
        • http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-filters-displace-01-f.html
    • Gekende bugs
      • Star hack
      • Box model hack
      • 3 pixel gap
      • Double float bug
      • Has content
    • Oplossing via javascript
      • Ie7 en ie8.js
        • http://code.google.com/p/ie7-js
    • Met de steun van CSS Hacks
    • Box model Verschil tussen traditionele en W3C interpretatie van content/padding/margin bij een box. Oplossingen 1. CSS3 en Mozilla specificaties: http://www.quirksmode.org/css/box.html 2. Box model hack voor IE5 en 5.5: http://www.afterimage.nl/box-model-hack.htm
    • Tantek (box model) hack #box{   border: 10px solid black;   width: 770px; /* IE5.x/win sees this.. */   voice-family: &quot;&quot;}&quot;&quot;;   voice-family: inherit;   width: 750px; /* ..but not this &quot;standards&quot; width value.. */   }   html>body #box{   width: 750px; /* ..or this reinforcement of the standards width. */ }
    • Escape hack De escape hack is een nieuwere en eenvoudiger versie van de Tantek hack die juist hetzelfde doet: een andere breedte definiëren voor Internet Explorer 5 en 5.5 #box{   width: 770px;   wid th: 750px; /* IE 5 en 5.5 zien dit niet*/ }
    • CSS Hacks en IE7 Let op: Hacks moeten voorwaarts compatibel zijn! http://www.positioniseverything.net/articles/ie7-dehacker.html
    • Met de steun van Web 2.0
    • Web 2.0
    • Web 2.0
      • http://en.wikipedia.org/wiki/Web_2
      • Kenmerken
      • Interactieve inbreng van bezoekers
      • Pagina’s moeten niet refreshen
      • Geen plugins nodig
      • User oriented
      • Databases combineren:
        • Mashups: http://www.programmableweb.com/mashups
        • api’s: ht tp://code.google.com
    • Web 2.0 websites
      • Gebruik van Ajax:
      • http://www.adaptivepath.com/publications/essays/archives/000385.php
      • Scriptaculous: http://script.aculo.us : web 2.0 javascript. Showpiece: http://www.gucci.com
      • Ruby on rails: ontwikkelingsplatform http://www.rubyonrails.org
      • Nieuwe ontwikkelingen volgen:
        • Blog: http://www.techcrunch.com
        • Podcast: http://www.twit.tv/ITN
    • Ajax
      • Gebaseerd op volgende technologieën:
      • Javascript: uitgebreid
      • CSS
      • DOM: objecten die de structuur vormen van webpagina’s
      • XMLHttpRequest-object: op achtergrond gegevens van de webserver ophalen in XML of tekst formaat.
    • Met de steun van Lanceren van de site
    • FTP
      • Uploaden van de webpagina :
        • Wat is het ftp-adres?
        • Wat is uw gebruikersnaam?
        • Wat is uw wachtwoord?
      • FTP-programma’s : bv. Filezilla ( http://filezilla.sourceforge.net/ ), CuteFTP
    • Cuteftp
      • Een FTP-programma om bestanden te uploaden naar uw webruimte
    • Pagina’s testen online
        • www.browsershots.org
        • Webdeveloper toolbar: https://addons.mozilla.org/firefox/60/
        • Broken links: http://home.snafu.de/tilman/xenulink.html
        • Validators
          • html http://validator.w3.org/
          • css: http://jigsaw.w3.org/css-validator/
    • Met de steun van Lanceren van de site Promotie & Zoekmachines
    • Site-bekendheid
      • Onderschat traditionele reclame niet!
      • Briefwisseling – contactkaartjes –
      • Forums, nieuwsgroepen, blogs
      • Zoekmachines en linksites
      • Pay per Click: Google Adwords
      • Klantenservice – productondersteuning bieden via internet: handleidingen downloaden, ...
    • Metatags
      • Meta-informatie (informatie over informatie op de pagina) gedefinieerd in <HEAD>
      • Zoekmachine / Zoekdirectory gebruikt de info in Meta-tags
      • Voorbeelden :
      • <META http-equiv=“refresh” content=“5;URL=www.youiware.be”>
      • <META name=&quot;description&quot; content=“website over auto, velo, moto&quot;>
    • Gevonden door de zoekmachine
      • Inkomende links, linkopbouw, linktekst
      • Metatag “keywords” : niet gebruikt
      • Metatag “description” : beschrijving
      • Title tags gebruiken!
      • Bovenste gedeelte van de <BODY>!
      • Opgepast met grafische onderdelen, javascript, Flash, frames, image maps
      • <ALT> tags gebruiken, <NOFRAMES> gebruiken
      • Sleutelworden en synoniemen consistent gebruiken in content en code.
    • Spam-indexing
      • Herhaling van bepaalde trefwoorden in commentaartags, bv. <!– ferrari, ferrari, ferrari, ferrari --!>
      • Doorway pages
      • Tekst in het <BODY>-gedeelte van de tekst onzichtbaar maken d.m.v. kleur
      • Linkfarms
      • Google bombing – keyword spamming
      • Zie www.google.nl/webmasters/