Powerpoint Htmlcss
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,281
On Slideshare
3,279
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
64
Comments
0
Likes
3

Embeds 2

http://www.slideshare.net 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Erkend door de Vlaamse regering Met de steun van HTML & CSS hansrossel@koba.be www.koba.be
  • 2. Erkend door de Vlaamse regering Met de steun van Geschiedenis
  • 3. PPrree--HHiissttoorriiee  1960 IBM ontwierp GML (interne publicaties) ◦ Generalized Markup Language  1986 SGML wordt ISO-standaard  1991 Tim Berners-Lee (CERN) ontwerpen tag-based taal HTML oorspronkelijk bedoeld om researchers toe te laten info uit te wisselen. HTML is dus een applicatie van SGML.  Samen met oa Robert Cailliau lanceert hij het WWW.
  • 4. HHiissttoorriiee  1993: img tag voorgesteld: http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html  Netscape (1994) en Internet Explorer (1995) voeren de Browser Wars  Interactieve technologieën worden toegevoegd ◦ Scripts: Javascript ◦ Java-applets ◦ Plugins: Flash  1998: Netscape geeft Netscape Communicator 4.0 broncode vrij in Open Source Mozilla Project.  2004: Firefox wordt de Mozilla browser
  • 5. RReecceennttee ggeesscchhiieeddeenniiss  2004: Web Standards: http://www.webstandards.org en http://www.csszengarden.com  2010: HTML5 (Living standard), CSS3 en Webfonts: http://www.whatwg.org/html  2011: Mobile en Responsive Design: http://alistapart.com/article/responsive-web-desi gn  8 april 2014: Einde van IE6: https://www.modern.ie/en-us/ie6countdown
  • 6. TTee oonntthhoouuddeenn  HTML : (Hyper Text Markup Language) bepaalt de structuur van een webpagina  CSS : (Cascading Style Sheets) : bepaalt de presentatie (kleur/grootte/positie) van een webpagina  JavaScript: voor dynamische effecten in webpagina's (en tegenwoordig nog veel meer)
  • 7. Erkend door de Vlaamse regering Met de steun van Planning website project
  • 8. PPrroojjeecctt ssttaappppeenn Analyse fase  Doelen, doelgroep (user personas), planning, team  Keuze domeinnaam en hosting Voorbereidende fase  Informatie architectuur: sitemap, trefwoordena, navigatie, inhoudstypes  Wireframes  Interactie design
  • 9. PPrroojjeecctt ssttaappppeenn Ontwikkelingsfase  Grafsch ontwerp (photoshop)  Xhtml/css prototype  Programmatie CMS systeem Testfase: bugfxes, usability Lanceringsfase Onderhoudsfase: backups & updates
  • 10. Erkend door de Vlaamse regering Met de steun van Domeinnaam
  • 11. DDoommeeiinnnnaaaamm kkiieezzeenn  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
  • 12. DDoommeeiinnnnaaaamm bbeesscchhiikkbbaaaarr?? www.dns.be Voor .be domeinen Voor .com, .net, .org domeinnamen http://whois.doma intools.com/
  • 13. DDoommeeiinn aaaannvvrraaggeenn && iinnsstteelllleenn  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
  • 14. Erkend door de Vlaamse regering Met de steun van Hosting - Webruimte
  • 15. k Waar koommeenn ddee ppaaggiinnaa’’ss tteerreecchhtt?? Mogelijkheden :  Gratis webruimte vb http://www.hostinger.nl  Gratis website bij ISP: Telenet, Belgacom (geen php/mysql)  Shared hosting  VPS: Virtual Private Server  Dedicated Server: eigen webserver  Cloud Hosting
  • 16. BBeellaannggrriijjkkee eelleemmeenntteenn  Geografsche locatie server?  Bandbreedte?  Php/mysql?  Opslagruimte?  Snelheid: hangt af van •Processor server •RAM server •Aantal sites op server: whois.domaintools.com (soms >4000 vb bij one.com)  Betrouwbaarheid en service 365/7/24 (zie Twitter)
  • 17. CCoonnttrroolleeppaanneeeell  Cpanel  Plesk Webmin  Open Shift  Eigen controlepaneel van het hostingbedrijf
  • 18. Erkend door de Vlaamse regering Met de steun van HTML & CSS De taal van webpagina’s
  • 19. WWaatt iiss HHTTMMLL??  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 (Chrome - Internet Explorer – Firefox - Safari)  Voorbeeld : http://www.syntrawest.be
  • 20. HHttmmll ppaaggiinnaa
  • 21. EElleemmeenntteenn ((TTaaggss))  Tags : meestal in paren  Bijvoorbeeld : <h1>Welkom</h1>  <h1> duidt op het starten van het defnië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
  • 22. HHTTMMLL Attttrriibbuutteenn  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. Opmerking: dergelijke attributen kunnen tegenwoordig beter in css worden gedaan vermits ze de presentatie doen van de tekst.
  • 23. CCSSSS ttaagg ooppmmaaaakk vvoooorrbbeeeelldd  Voorbeeld : h1 {text-align: center; color:blue;}  h1 : Selector : de geselecteerde tag  Color : Eigenschap : welke eigenschap moet gewijzigd worden?  Blue : waarde : welke waarde krijgt de gekozen eigenschap?
  • 24. HHttmmll ++ ccssss
  • 25. Basis elementen webpagina Erkend door de Vlaamse regering Met de steun van
  • 26. IInnddeexx.hhttmmll  De structuur van een webpagina : <!DOCTYPE html> <html lang="nl"> <head> <title>Interne titel</title> Allerlei onzichtbare zaken zoals meta-tags, css en scripts </head> <body> De zichtbare inhoud van de webpagina </body> </html>
  • 27. Erkend door de Vlaamse regering Met de steun van Doctype
  • 28. DDOOCCTTYYPPEE 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 "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-strict.dtd“>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd“>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-frameset.dtd"> 3. Html5 <!DOCTYPE html>
  • 29. Erkend door de Vlaamse regering Met de steun van Tekst invoegen
  • 30. TTeekksstteenn  Niet opgemaakt ◦ Via notepad opmaak verwijderen  Mooi opgemaakte teksten omzetten naar .pdf formaat: afdrukbaar met behoud van layout en opmaak.  Taal? Meertalige website?
  • 31. Erkend door de Vlaamse regering Met de steun van Body instellingen
  • 32. KKlleeuurreenn  RGB – monitor : Red Green Blue  FF 00 00 : volledig rood, geen groen, geen blauw 00 FF 00 : geen rood, volledig groen, geen blauw
  • 33. CCssss bbooddyy body { background-color: #404040; font-family: Verdana, Helvetica, sans-serif; font-size:12px; line-height:180%; color:#ffffff; margin: 0; padding: 0; }
  • 34. CCssss hheeaaddeerrss 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
  • 35. Erkend door de Vlaamse regering Met de steun van Werkomgeving
  • 36. WWeerrkkoommggeevviinngg Html Editors  Dreamweaver  Sublime text Firefox en plugins  https://getfrebug.com  https://addons.mozilla.org/en-US/frefox/addon/web-deve loper/
  • 37. Erkend door de Vlaamse regering Met de steun van Links
  • 38. HHyyppeerrlliinnkkss  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="http://www.google.be">deze site</a> (=externe hyperlink)
  • 39. LLiinnkkss  Structuur: <a href="http://www.handleidinghtml.nl">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
  • 40. CCssss LLiinnkkss a:link, a:visited { text-decoration: none; color: #039; } a:hover { text-decoration: underline; background-color: #e4F4e3; color: #333; }
  • 41. Erkend door de Vlaamse regering Met de steun van Afbeeldingen
  • 42. GGrraaffsscchhee eelleemmeenntteenn :: eennkkeellee ttiippss  Resolutie : 72 dpi aanvaardbaar voor scherm  Grootte : 50 kb  Afbeeldingen in verschillende pagina’s gebruiken: caching  “Slicen” van afbeeldingen  “Clickable maps” (hotspots)
  • 43. GGrraaffsscchhee eelleemmeenntteenn  .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 fx: http://homepage.ntlworld.com/bobosola/pnghowto.htm
  • 44. FFoottoo''ss eenn llooggoo''ss  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.
  • 45. Affbbeeeellddiinnggeenn  <img src=“logo.gif" width="105" height="125" border=“0” alt=“De post">  img : Tag voor afbeeldingen width : breedte height : hoogte border : rand rondom afbeelding alt : alternatieve tekst
  • 46. CCoommbbiinnaattiiee hhyyppeerrlliinnkk aaffbbeeeellddiinngg  Afbeelding aanklikbaar maken : plaats de <img> tag tussen <a href> en </a> tags <a href=“http://www.website.be"> <img src=“logo.gif“ width="38" height="34“ border="0"></a>
  • 47. GGrraaffsscchhee eelleemmeenntteenn :: eeddiittoorrss  Foto's: Adobe Photoshop, Fireworks en vele andere bij digitale camera's geleverde pakketten.  Grafsch: Adobe Illustrator  Open source: Paint.net (www.getpaint.net), Gimp (www.gimp.org), Picasa, ...
  • 48. Affbbeeeellddiinnggeenn vviinnddeenn • Professioneel: – http://www.istockphoto.com – http://www.shutterstock.com • Google afbeeldingen zoeken: copyright! • Vrij van copyright – http://www.freeimages.com –Www.fickr.com (soms)
  • 49. Affbbeeeellddiinnggeenn hhttmmll  <img src=“foto.jpg" width="140" height="100“ />  Alt en title: accessibility  Link  Align: top, left, right + <br clear="all“ />  Centreren: <div align=“center“></div>  Responsive design: width en height weglaten (wordt procentueel gedaan door de div errond)
  • 50. CCssss aaffbbeeeellddiinnggeenn 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 fxeren */ }
  • 51. Verschillen html & xhtml stijl Erkend door de Vlaamse regering Met de steun van
  • 52. VVeerrsscchhiilllleenn hhttmmll vvss xxhhttmmll In xhtml is DOCTYPE verplicht Alle 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> Ook lege elementen moeten gesloten worden ◦ Incorrect: <br>, <hr>, <img> ◦ Correct: <br />, <hr />, <img /> Elementen moeten correct genest worden ◦ Incorrect: <em><strong>Dit is tekst met nadruk.</em></strong> ◦ Correct: <em><strong>Dit is tekst met nadruk.</strong></em>
  • 53. HHttmmll vvss xxhhttmmll ((vveerrvvoollgg)) Attribuutwaarden moeten tussen aanhalingstekens ◦ Incorrect: <td rowspan=3> of <img src="plaatje.gif" width=100 height=50> ◦ Correct: <td rowspan="3"> of <img src="plaatje.gif" width="100" height="50” /> Alle elementen en attributen moeten klein geschreven worden ◦ Incorrect: <BODY><P ID="iets">Tekst</P></BODY> ◦ Correct: <body><p id="iets">Tekst</p></body> Attributen mogen niet geminimaliseerd worden ◦ Incorrect: <option selected>, <frame noresize>, <input checked> ◦ Correct: <option selected="selected">, <frame noresize="noresize">, <input checked="checked“>
  • 54. OOvveerrsscchhaakkeelleenn hhttmmll -->> xxhhttmmll  HTML Tidy ◦ http://cgi.w3.org/cgi-bin/tidy: online ◦ http://tidy.sourceforge.net/: download • Dreamweaver plugins ◦ http://www.nypl.org/styleguide/xhtml/tips.ht ml#dreamweaver
  • 55. Erkend door de Vlaamse regering Met de steun van Bestandsstructuur
  • 56. BBeessttaannddssssttrruuccttuuuurr wweebbssiittee Mappen  Css  Javascript  Images Bestanden  Index.htm  404.htm & .htaccess  Robots.txt  Cgi-bin
  • 57. Erkend door de Vlaamse regering Met de steun van Layout: Frames, Tabellen en CSS Een grove structuur voor de pagina
  • 58. SScchheerrmmffoorrmmaatteenn  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
  • 59. LLaayyoouutt mmeett FFrraammeess  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.
  • 60. HHttmmll ffrraammeess  <frameset cols="150,*">  <frame name="links“ scrolling="no" noresize target="rboven" src="links.htm">  <frameset rows="20%,*">  <frame name="rboven“ target="ronder" src="boven.htm">  <frame name="ronder“ src="rechtsonder.htm">  </frameset> </frameset>
  • 61. LLaayyoouutt mmeett TTaabbeelllleenn  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 ◦ Grafsch designers kunnen hun ontwerp slicen en als puzzel terug samenstellen ◦ Programmeurs kunnen resultaten van code makkelijk weergeven
  • 62. TTaabbeelllleenn <table width="93"> <tr> <td width="85">eerste rij</td> </tr> <tr> <td width="85">tweede rij</td> </tr> </table>
  • 63. LLaayyoouutt vviiaa ddiivv llaaggeenn  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.
  • 64. VVaasstt--sstteelllliinnggeenn Hoe ziet de surfer mijn webpagina?  Grootte van het browserscherm ◦ 800x600, 1024x768, smartphones, laptop wide, ...  Verschillen tussen browsers ◦ Internet Explorer ◦ Chrome,Firefox (open source opvolger van Netscape) ◦ Opera, Safari  Verschillen tussen versies  Verschillen tussen MAC, PC, Linux
  • 65. SSttrruuccttuuuurr:: LLaaggeenn mmaakkeenn <div id=“container”> <div id=“head”> </div> <div id=“content”> </div> <div id=“nav”> </div> </div>
  • 66. CCeennttrreerreenn 11 kkoolloomm lliiqquuiidd Liquid layouts div#container{ margin-left: 10%; margin-right: 10%; }
  • 67. 11 KKoolloomm ggeecceennttrreeeerrdd CSS met auto margin: #container { width: 960px; margin: 0 auto; }
  • 68. 11 KKoolloomm ggeecceennttrreeeerrdd ((vveerrssiiee 22)) CSS met negatieve margin: #container { width:720px; position:relative; left:50%; margin-left:-360px; }
  • 69. 22 KKoolloommmmeenn –– ffxxeedd –– xxhhttmmll <div id=“container"> <div id=“header”> </div> <div id=“content”> <!-- Voor navigatie:screenreaders --> </div> <div id=“navigatie”> </div> <div id=“footer”> </div> </div>
  • 70. 22 KKoolloommmmeenn –– ffxxeedd –– ccssss #content { width:720px; foat:right; } #navigatie { width:180px; foat:left; } #footer { clear:both; }
  • 71. 22 KKoolloommmmeenn ffxxeedd -- ppaaddddiinngg #navigatie { padding-top: 20px; padding-bottom: 20px; }
  • 72. 33 KKoolloommmmeenn ffxxeedd –– xxhhttmmll <div id=“content”> <div id=“hoofdcontent”> </div> <div id=“contentblok”> </div> </div>
  • 73. 33 KKoolloommmmeenn ffxxeedd –– ccssss #hoofdcontent { width: 320px; foat: left; } #contentblok { width:180px; foat: right; }
  • 74. 33 KKoolloommmmeenn ffxxeedd –– ppaaddddiinngg #contentblok h1, #contentblok h2, #contentblok p { padding-left: 20px; // box model bug IE5 padding-right: 20px; // box model bug IE5 }
  • 75. 33 KKoolloommmmeenn lliiqquuiidd –– ccssss #container { width: 85%; margin: 0 auto; } #navigatie { width: 23%; foat: left; } #content { width: 75%; foat: right; }
  • 76. 33 KKoolloommmmeenn eellaassttiisscchh –– ccssss Default font-size = 16px 10px = 62.5% van 16px body { font-size: 62.5% }
  • 77. 33 KKoolloommmmeenn eellaassttiisscchh –– ccssss #container { width: 72em; margin: 0 auto; } #navigatie { width: 18em; foat: left; } #content { width: 52em; foat: right; }
  • 78. 33 KKoolloommmmeenn eellaassttiisscchh –– ccssss #hoofdcontent { width: 32em; foat: left; } #contentblok { width: 18em; foat: right; }
  • 79. HHyybbrriidd lliiqquuiidd--eellaassttiisscchh –– ccssss #container { width: 72em; max-width: 100%; margin: 0 auto; } #navigatie { width: 18em; max-width: 23%; foat: left; } #content { width: 52em; max-width: 75%; foat: right; }
  • 80. HHyybbrriidd lliiqquuiidd--eellaassttiisscchh –– ccssss #hoofdcontent { width: 32em; max-width: 66%; foat: left; } #contentblok { width: 18em; max-width: 31%; foat: right; }
  • 81. LLiiqquuiidd eenn eellaassttiisscchhee aaffbbeeeellddiinnggeenn #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)
  • 82. HHeeaaddeerr aaffbbeeeellddiinngg aalltteerrnnaattiieeff #header { width: 100% overfow: hidden; } <div id=”header”> <img src=”images/hoofding.png” width=”1600” height=”171” /> </div>
  • 83. FFaauuxx CCoolluummnnss 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; }
  • 84. Erkend door de Vlaamse regering Met de steun van Positioning
  • 85. BBooxx mmooddeell
  • 86. BBlloocckk lleevveell && IInnlliinnee eelleemmeennttss  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 fow •Float •Absolute positioning & fxed positioning
  • 87. RReellaattiivvee ppoossiittiioonniinngg #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; }
  • 88. RReellaattiivvee ppoossiittiioonniinngg Volgt normal fow 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; }
  • 89. Abbssoolluuttee ppoossiittiioonniinngg 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; }
  • 90. FFiixxeedd ppoossiittiioonniinngg Gelijkaardig principe als absolute positioning Positie enkel tov venster zelf Usability: menu of invulformulier blijft steeds zichtbaar Niet ondersteund door IE6 #box2 { position: fxed; width:150px; height: 100px; top:20px; left:20px; z-index:2; background-color:green; }
  • 91. FFllooaattiinngg Boxen kunnen links of rechts gefoat 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 gefoate box mag zijn. #box2 { foat:right; width:150px; height: 100px; background-color:green; }
  • 92. CClleeaarr 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 gefoate box mag zijn. img { foat:left; }
  • 93. PPrroobblleemmeenn mmeett ffooaatt Voorbeeld: Image met tekst rechts .news { background-color:gray; border:solid 1px black; foat:left; } .news img { foat:left; } .news p { foat:right; }
  • 94. PPrroobblleemmeenn mmeett ffooaatt Oplossing 1: clear CSS: .clear { clear:both; } XHTML: <div class=”clear”></div> Nadeel: extra markup Oplossing 2: box zelf foaten CSS: .news {foat:left;} Nadeel: volgend element is ook beïnvloed door foat => alles foaten en clearen in de footer Oplossing 3: •Html: <br clear="all" /> •Nadeel: oude techniek, extra markup en extra hoogte van br Meer oplossingen: http://www.positioniseverything.net/easyclearing.html
  • 95. Erkend door de Vlaamse regering Met de steun van Lijsten
  • 96. SSttyylliinngg vvaann lliijjsstteenn ul { margin:0; padding:0; list-style-type:none; } li { background: url(bullet.gif) no-repeat 0 50%; padding-left:30px; }
  • 97. Erkend door de Vlaamse regering Met de steun van Navigatie
  • 98. OOppsstteelllleenn iinnhhoouuddssttaaffeell eenn mmeennuu  Usability: snel informatie vinden  Accessibility ◦ Slechtzienden ◦ Mobiel internet ◦ Zoekmachines  Menu positie: boven, links, rechts, elders  Inhoudstafel opstellen
  • 99. LLiissttaammaattiicc:: ccssss mmeennuu’’ss mmeett lliijjsstteenn Zie: http://css.maxdesign.com.au/listamatic/ Opmerkingen: • list-style-type • Achtergronden via background • Browser support chart • Horizontale lijsten: foat: left; of display: inline; (geen IE5)
  • 100. VVeerrttiikkaallee nnaavviiggaattiiee <ul> <li class="frst selected"><a href="home.htm">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="services.htm">Our Services</a></li> <li><a href="work.htm">Our Work</a></li> <li><a href="news.htm">News</a></li> <li><a href="contact.htm">Contact</a></li> </ul>
  • 101. CCSSSS SSpprriitteess http://www.alistapart.com/articles/sprites http://www.koba.be/lesimages/pixy-rollover.gif
  • 102. VVeerrttiikkaallee nnaavviiggaattiiee ccssss 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; }
  • 103. VVeerrttiikkaallee nnaavviiggaattiiee ccssss a:hover, .selected a { background-color: #369; background-position: right bottom; color: #fff; } .frst a { height: 40px; line-height: 40px; }
  • 104. HHoorriizzoonnttaallee nnaavviiggaattiiee hhttmmll <ul> <li class="frst"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Case Studies</a></li> </ul>
  • 105. HHoorriizzoonnttaallee nnaavviiggaattiiee ccssss ul { margin: 0; padding: 0; foat: left; width: 720px; background: #FAA819 url(images/mainNavBg.gif) repeat-x; list-style: none; text-transform: uppercase; } ul li { foat: left; }
  • 106. HHoorriizzoonnttaallee nnaavviiggaattiiee ccssss ul a { padding: 0 2em; line-height: 2.1em; background: url(images/mainNavBorder.gif) repeat-y left top; text-decoration: none; color: #fff; foat: left; display: block; } ul a:hover { color: #333; } ul .frst a { background: none; }
  • 107. SSuucckkeerrffsshh ddrroopp ddoowwnn mmeennuu Zie: http://www.htmldog.com/articles/suckerfsh/dropdowns/ • Volledig css gebaseerd (met javascript voor IE) • Volledig zichtbaar voor zoekmachines • Probleemloos uitbreidbaar naar verschillende niveaus • Diverse sons of suckerfsh
  • 108. Erkend door de Vlaamse regering Met de steun van <head>
  • 109. <<hheeaadd>> Karakterset  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> Javascript  <script language="JavaScript" src="../javascript/scripts.js" type="text/javascript"></script>
  • 110. <<hheeaadd>> BBeevveeiilliiggiinngg <meta name="author" content="info@koba.be, www.koba.be" /> <meta http-equiv="imagetoolbar" content="no“ /> <meta http-equiv="Window-target" content="_top“ /> <meta name="MSSmartTagsPreventParsing" content="true“ /> Hotlink + index protection op server
  • 111. <<hheeaadd>> zzooeekkmmaacchhiinneess <title>titel</title> <meta name="keywords" content="keywords,keyword,other keyword" /> <meta name="description" content="description" />
  • 112. <<hheeaadd>> mmeettaa ttaaggss <meta http-equiv=“refresh" content="4;url=http://www.domain.com/link.html” /> (of uur verversen) <meta http-equiv="content-language" content=“nl“ /> <meta name="robots" content=“index, follow“ /> (of noindex, nofollow of noarchive)
  • 113. <<hheeaadd>> nnuutttteelloozzee mmeettaa ttaaggss <!-- HTML Comments (treated as HTML markup) --> : tenzij voor uitleg <meta name="DC.title" lang="en" content="DC Dublin Core META Tags - DCMI Dublin Core Metadata Initiative“ /> <meta name="revisit-after" content="7 days“ />
  • 114. RRoobboottss.ttxxtt  User-agent: *  Disallow: /cgi-bin/  Disallow: /javascript/  Disallow: /Templates/  Disallow: /css/ Bemerk • Gehoorzaamheid? • Gevaar hele site niet geïndexeerd
  • 115. <<hheeaadd>> ccssss <link href="../css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="../css/print.css" rel="stylesheet" type="text/css" media="print" /> Belangrijk: volgorde, zie cursus p122
  • 116. Erkend door de Vlaamse regering Met de steun van Verschillende Style sheets
  • 117. VVoooorr pprriinntt eenn hhaannddhheelldd 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
  • 118. SSttyylleesswwiittcchheerr http://www.alistapart.com/stories/alternate/ <script type="text/javascript" src="/scripts/styleswitcher.js"></script> <a href="#" onclick="setActiveStyleSheet('default'); return false;">change style to default</a> <a href="#" onclick="setActiveStyleSheet('paul'); return false;">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/
  • 119. CCoonnddiittiioonnaall ccoommmmeennttss vvoooorr IIEE <!--[if IE]> <link rel="stylesheet" type="text/css" href="iehacks.css" /> <![endif]--> <!--[if IE 5]> <link rel="stylesheet" type="text/css" href="iehacks-5.css" /> <![endif]--> <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="iehacks.css" /> <![endif]--> Voor IE vanaf versie 5: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp
  • 120. Erkend door de Vlaamse regering Met de steun van Tabellen
  • 121. TTaabbeelllleenn hhttmmll  <table>  <th>titel</th> <tr> <td>a1</td> <td>a2</td> </tr> <tr> <td>b1</td> <td>b2</td> </tr> </table>
  • 122. TTaabbeelllleenn hhttmmll ((vveerrvvoollgg))  th ipv td  Width  Colspan, rowspan  Align, valign  Cellpadding, cellspacing  Centreren tabel  <caption>Dit is het bijschrift</caption>
  • 123. TTaabbeelllleenn ccssss  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 »>
  • 124. SSuummmmaarryy eenn ccaappttiioonn <table cellspacing="0" id="playlistTable" summary="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."> <caption>Top 15 Playlist</caption>
  • 125. TThheeaadd <thead> <tr> <th></th> <th></th> </tr> </thead>
  • 126. TTbbooddyy <tbody> <tr> <td></td> <td></td> </tr> </tbody>
  • 127. OOdddd eenn eevveenn  <tr class=”odd”></tr>  <tr class=”even”></tr>
  • 128. TTaabbllee ccssss 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”
  • 129. CCaappttiioonn ccssss caption { font-size: 1.2em; font-weight: bold; margin: 1em 0; }
  • 130. TThheeaadd ccssss 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; }
  • 131. Affwweerrkkiinngg .odd { background-color:#edf5ff; } tr:hover { background-color:#3d80df; color: #fff; } thead tr:hover { background-color: transparent; color: inherit; }
  • 132. Erkend door de Vlaamse regering Met de steun van Formulieren
  • 133. EEeennvvoouuddiigg ffoorrmmuulliieerr <form id="comments_form" action="#" method="post"> </form>
  • 134. FFiieellddsseett && LLeeggeenndd <feldset> <legend>Your Contact Details</legend> </feldset>
  • 135. LLaabbeell eenn IInnppuutt <p> <label for="author">Name: <em class="required">(Required)</em></label> <input name="author" id="author" type="text" /> </p> <p> <label for="email">Email Address:</label> <input name="email" id="email" type="text" /> </p> <p> <label for="url">Web Address:</label> <input name="url" id="url" type="text" /> </p>
  • 136. MMeessssaaggee ((tteexxttaarreeaa)) <feldset> <legend>Comments</legend> <p> <label for="text">Message: <em class="required">(Required)</em></label> <textarea name="text" id="text" cols="20" rows="10"></textarea> </p> </feldset>
  • 137. FFoorrmm ccssss form { font-size: 1.4em; width: 30em; } feldset { margin: 1em 0; /* space out the feldsets a little*/ padding: 1em; border : 1px solid #ccc; } legend { font-weight: bold; }
  • 138. label { display: block; } label .required { font-size: 0.75em; color:#760000; } input { width: 200px; } input.radio, input.submit { width: auto;
  • 139. /* style form elements on focus */ input:focus, textarea:focus { background: #ffc; } input.radio { foat: left; margin-right: 1em; } textarea { width: 300px; height: 100px; }
  • 140. WWaatt zziijjnn ffoorrmmuulliieerreenn Gegevens verkrijgen van surfers
  • 141. FFoorrmmuulliieerreenn aaaannmmaakkeenn <FORM name="enquete" method="post" action="mailto:hansrossel@koba.be"> <P>Familienaam <INPUT type="text" name="familienaam" size="50" maxlength="50“ /> </P> </FORM>
  • 142. IInnppuutt tteekksstt <form> Voornaam: <input type="text" name=“voornaam“ /> <br> Naam: <input type="text" name=“naam“ /> <textarea name=“bericht" cols="40" rows="5“></textarea> </form>
  • 143. IInnppuutt rraaddiioo bbuuttttoonnss <form> <input type="radio" name=“geslacht" value=“man“ /> Man <br> <input type="radio" name=“geslacht" value=“vrouw“ /> Vrouw </form>
  • 144. IInnppuutt cchheecckkbbooxx <form> <input type="checkbox" name=“fets“ /> Ik heb een fets <br> <input type="checkbox" name=“auto“ /> Ik heb een auto </form>
  • 145. DDrroopp ddoowwnn mmeennuu <form> <select name=“autos"> <option value="volvo">Volvo</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form>
  • 146. FFoorrmmuulliieerreenn ccssss:: SSuubbmmiitt <style tyle=text/css> input.red { background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;} </style> <input class="red" type="submit" value=“Verzenden“ />
  • 147. FFoorrmmuulliieerreenn ccssss vveerrvvoollgg #submit{ background:#BC4819; color:#FFF; width:auto; padding: 2px 10px; border:none; }
  • 148. FFoorrmmuulliieerreenn ccssss:: IInnppuutt <style tyle=text/css> input.pink { background-color: #ffcccc; font-size: 10px;} </style> <input class="pink" type="text" name=“voornaam" size="20“ />
  • 149. FFoorrmmuulliieerreenn ccssss:: TTeexxttaarreeaa <style tyle=text/css> textarea.violet { background-color: #ccccff;} </style> <textarea class="violet" rows="4" name=“uwvraag" cols="20">
  • 150. FFoorrmmuulliieerreenn ccssss input, textarea{ font-family: "Lucida Sans Unicode","Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1em; border: 1px solid #CDC6B2; border-left-width: 3px; padding:2px 0; width: 240px; overfow:hidden; }
  • 151. CCSSSS cchheecckkbbooxx,, ddrroopp ddoowwnn <input class="red" type="radio" value="V1" checked name="R1"> <option class="pink" value= “introhtml.htm">- Intro to HTML</option>
  • 152. VVeerrwweerrkkiinngg vvaann ffoorrmmuulliieerreenn  Verstuurd via e-mail  Verwerking via CGI-scripts (nms)  Verwerking via Server Side scripttalen (ASP – PHP – ColdFusion - …)  Afhankelijk van wat de provider aanbiedt
  • 153. VVoolllleeddiigg ffoorrmmuulliieerr <form name="example" id="example" action="http://www.website.be/cgi-bin/berichtje.cgi" method="post" /> <input type="hidden" name="subject" value="Vraag via contactpagina op website" /> <input type="hidden" name="recipient" value="1" /> <input type="hidden" name="redirect" value="http://www.website.be/bevestiging.htm" /> <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,REMOTE_USER,HTTP_USER_AGENT,HTTP_REFER ER" /> <p><label for="name">Naam</label> <input type="text" id="name" name="name" /></p> <p><label for="email">E-mailadres</label> <input type="text" id="email" name="email" /></p> <p><label for="tel">Telefoon</label> <input type="text" id="tel" name="tel" /></p> <p><label for="message">Bericht</label> <textarea id="message" name="message" cols="40" rows="5"></textarea><br /></p> <p><input type="submit" id="submit" name="submit" value="verzenden" style="margin-top:10px;" /></p> </form>
  • 154. CCoonnttrrôôllee ffoorrmmuulliieerr Kan server side of client side (of beide) Server side: nms Client side http://www.quirksmode.org/dom/error.html
  • 155. NNMMSS FFoorrmmmmaaiill 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 info@koba.be); • %recipient_alias = ('1' => 'hansrossel@yahoo.com', '2' => 'info@koba.be'); • $send_confrmation_mail = 0;
  • 156. NNMMSS FFoorrmmmmaaiill  Beveiliging spambots: oa « berichtje », geen bevestigingsmail, recente versie gebruiken, …  Chmod: 755 ◦ aanvinken: owner: read, write, execute group: read, execute other: (world) read execute
  • 157. EEmmaaiill ffoorrmmuulliieerr aannttwwoooorrdd Hieronder is het formulier dat verstuurd werd door (s@s.nl) 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
  • 158. Erkend door de Vlaamse regering Met de steun van Media invoegen
  • 159. <<eemmbbeedd>> eenn <<oobbjjeecctt>> 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).
  • 160. GGrraaffsscchhee eelleemmeenntteenn :: bbeewweeggeennddee bbeeeellddeenn  Animated gif  .swf bestanden : vectorgebaseerde animaties door middel van bv. Macromedia Flash : (www.macromedia.com(  .mpg / .avi / … : flmmateriaal, maar grotere bestanden
  • 161. MMuuzziieekk ttooeevvooeeggeenn aaaann ssiittee <object width="300" height="42"> <param name="src" value=“housefnch.mp3"> <param name="autoplay" value="true"> <param name="controller" value="true"> <param name="bgcolor" value="#FF9900"> <embed src=“housefnch.mp3" autostart="true" loop="false" width="300" height="42" controller="true" bgcolor="#FF9900"> </embed> </object> http://digitalmedia.oreilly.com/2005/02/23/mp3_embed.html
  • 162. QQuuiicckkttiimmee ffllmmppjjeess http://www.handleidinghtml.nl/html/objecten/objecten07.html http://developer.apple.com/quicktime/quicktimeintro/tools/embed2.html Voorbeeld  <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">  <PARAM NAME="src" VALUE="test.mov">  <PARAM NAME="autoplay" VALUE="false">  <PARAM NAME="volume" VALUE="25">  <EMBED SRC="test.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOPLAY="false" VOLUME="25"></EMBED>  </OBJECT>
  • 163. EEnnkkeell mmeett <<oobbjjeecctt>> http://alistapart.com/articles/byebyeembed Vermijden van de niet standaard <embed> te gebruiken. Alternatieve oplossing voor de dubbele oplossing <object> én <embed>
  • 164. EEnnkkeell <<oobbjjeecctt>> QQuuiicckkttiimmee <object classid="clsid:02BF25D5-8C17-4B23-BC80- » D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="260"> <param name="src“ value="http://www.sarahsnotecards.com/catalunyalive/ » diables.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <!--[if !IE]>--> <object type="video/quicktime“ data="http://www.sarahsnotecards.com/catalunyalive/” “diables.mov" width="320" height="260"> <param name="autoplay" value="false" /> <param name="controller" value="true" /> </object> <!--<![endif]--> </object>
  • 165. VViiaa YYoouuttuubbee <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/synxFmQJ_0A"></pa ram> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/synxFmQJ_0A" type="application/x-shockwave-fash" wmode="transparent" width="425" height="350"></embed> </object>
  • 166. VViiaa GGooooggllee vviiddeeoo <embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave- fash" src="http://video.google.com/googleplayer. swf? docId=3913745262811179417&amp;hl=en -CA"> </embed>
  • 167. FFllaasshh ffllmmppjjeess <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000" WIDTH="128" HEIGHT="96" TYPE="application/x-shockwave- flash" CODEBASE="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0"> <PARAM NAME="movie" VALUE="test.swf"> <PARAM NAME="play" VALUE="true"> <PARAM NAME="loop" VALUE="true"> <PARAM NAME="quality" VALUE="high"> <EMBED SRC="test.swf" WIDTH="128" HEIGHT="96" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" PLAY="true" LOOP="true" QUALITY="high"></EMBED> </OBJECT>
  • 168. MMiiccrroossoofftt ppaatteenntt pprroobblleeeemm  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/em bed.html ◦ http://www.adobe.com/designcenter/popular_t opics/click_to_activate/
  • 169. .ffvv vviiddeeooffoorrmmaaaatt  Ffmpeg: conversie op server naar .fv + compressie  Flash players ◦ Jeroen Weijring ◦ Flowplayer ◦ ...
  • 170. IIffrraammee::  Insluiten van andere html documenten <IFRAME SRC="iframes-vb.html" WIDTH="275" HEIGHT="100" FRAMEBORDER="0" ALIGN="left" STYLE="margin-right: 20px;“> </IFRAME> http://www.handleidinghtml.nl/html/frames/ frames08.html
  • 171. CSS Frameworks & Grids CSS Frameworks & Grids CSS3 Voorstel Workflow & optimalisatie Erkend door de Vlaamse regering
  • 172. HHeett bbeellaanngg vvaann ssnneellhheeiidd  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!)
  • 173. YYssllooww  80% van laadtijd is voor het laden van elementen vanuit html: css, js, videos.  14 regelsh: ttp://developer.yahoo.com/performance/rule s.html  Google tech & yslow http://www.youtube.com/watch?v=BTHvs3V8DBA  Yslow plugin voor frebhutgt: p://developer.yahoo.com/ys low
  • 174. CCoommpprreessssiiee && ooppttiimmaalliissaattiiee  Eerst valideren!  Kleinere css = sneller laden  Automatisch: http://foele.fyspray.org/csstidy//css_optimise r.php : compressie & optimalisatie
  • 175. CCSSSS33 TTeemmppllaattee llaayyoouutt  Geavanceerd templating met css3 (draft): http://www.w3.org/TR/css3-layout  Jquery implementatie? http://ejohn.org/blog/css3-template-la yout
  • 176. GGrriidd ssyysstteemmeenn  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
  • 177. VVoooorrddeelleenn  Vertrekken van vaste basiscode (wiel niet heruitvinden)  Browser compatibiliteit: Herbruikbaarheid css en hacks voor IE6 (en zelfs maar als zelfs msn.com die niet meer respecteert...)  Professionele grid structuur  Flexibele voorgedefnieerde classes voor basiselementen: lijsten, tabellen, forms  Sneller werken, rapid prototyping (ipv wireframing) opstellen van mock- Clean code  Klein <5kb  Iphone viewport is 960px
  • 178. NNaaddeelleenn  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 het design, niet omgekeerd ◦ Fixed width vb 960px, voor 1280px schermen wil je soms 960px + extra niet belangrijke kolom (reclame)
  • 179. SSaammeennsstteelllliinngg  reset.css  typography.css  grid.css  ie.css  print.css  forms.css
  • 180. RReesseett:: TTrriippoollii && ccoommpprreessssiiee * {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 Safari, Firefox 2, Firefox 3, OS X: IE5, Firefox 2, Firefox 3, Safari 2, Safari 3, Camino
  • 181. BBlluueepprriinntt  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/
  • 182. 996600.ggss  http://960.g s  Ook fuid h:ttp://www.designinfuences.com/fuid960gs  En elastic http://csswizardry.com/typogridphy  Uitgewerkt voorbeeld: http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework
  • 183. BBlluueettrriipp  http://bluetrip.o:r cgombinatie van blueprint en 960.gs
  • 184. MMeeeerr iinnffoo  http://www.alistapart.com/articles/framewo rksfordesigners  http://www.smashingmagazine.com/2007/21/css-frameworks-css-reset-design-from-scratch
  • 185. Met __ __ de _____ steun ___ JQUERY Erkend door de van Vlaamse regering
  • 186. 10/08/07 JJqquueerryy ● Voordelen ● Unobtrusive ● Klein en licht ● Trekt goed op css, eenvoudig te leren ● Browser compatibiliteit ● Concurrenten ● MooTools, Prototype/Scriptaculous ● Let op: conficten en performance bij 2 frameworks
  • 187. PPooppuullaaiirriitteeiitt jjqquueerryy ggrrooeeiitt B: http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx 10/08/07 Bron:
  • 188. 10/08/07 JJqquueerryy ttooeevvooeeggeenn ● http://www.learningjquery.com/2008/06/updated-jquery-bookmarkl et ● 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
  • 189. 10/08/07 VVoooorrbbeeeellddeenn
  • 190. Met __ __ de _____ steun ___ Core functionaliteit http://www.simonwhatley.co.uk/blog/wp-content/uploads/2008/02/jquery12_api_reference.png Erkend door de van Vlaamse regering
  • 191. 10/08/07 MMeeeerr jjqquueerryy ● http://docs.jquery.co m ● http://learningjquery.co m ● http://ajaxian.com/archives/hacking-digg-with-frebug-and-jquery ● http://plugins.jquery.com/ ●
  • 192. Erkend door de Vlaamse regering Met de steun van Speciale technieken
  • 193. JJaavvaassccrriipptt  http://www.webappers.com  www.dynamicdrive.com  plugins.jquery.com
  • 194. OOppaacciittyy http://www.mandarindesign.com/opacity.html Verschillende opacity technieken
  • 195. Addvvaanncceedd sseelleeccttoorrss External links
  • 196. Erkend door de Vlaamse regering Met de steun van CSS Hacks Met dank aan Internet Explorer
  • 197. WWeebbssttaannddaaaarrddeenn  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/fles/acid2/test.html ◦ Acid 3: http://acid3.acidtests.org SVG test http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-flters-displace- 01-f.html
  • 198. GGeekkeennddee bbuuggss  Star hack  Box model hack  3 pixel gap  Double foat bug  Has content
  • 199. OOpplloossssiinngg vviiaa jjaavvaassccrriipptt  Ie7 en ie8.js ◦ http://code.google.com/p/ie7-js
  • 200. Erkend door de Vlaamse regering Met de steun van CSS Hacks
  • 201. BBooxx mmooddeell Verschil tussen traditionele en W3C interpretatie van content/padding/margin bij een box. Oplossingen 1. CSS3 en Mozilla specifcaties: http://www.quirksmode.org/css/box.html 2. Box model hack voor IE5 en 5.5: http://www.afterimage.nl/box-model-hack.htm
  • 202. TTaanntteekk ((bbooxx mmooddeell)) hhaacckk #box{ border: 10px solid black; width: 770px; /* IE5.x/win sees this.. */ voice-family: ""}""; voice-family: inherit; width: 750px; /* ..but not this "standards" width value.. */ } html>body #box{ width: 750px; /* ..or this reinforcement of the standards width. */ }
  • 203. EEssccaappee hhaacckk De escape hack is een nieuwere en eenvoudiger versie van de Tantek hack die juist hetzelfde doet: een andere breedte defniëren voor Internet Explorer 5 en 5.5 #box{ width: 770px; width: 750px; /* IE 5 en 5.5 zien dit niet*/ }
  • 204. CCSSSS HHaacckkss eenn IIEE77 Let op: Hacks moeten voorwaarts compatibel zijn! http://www.positioniseverything.net/articles /ie7-dehacker.html
  • 205. Erkend door de Vlaamse regering Met de steun van Web 2.0
  • 206. WWeebb 22.00
  • 207. WWeebb 22.00 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: http://code.google.com
  • 208. WWeebb 22.00 wweebbssiitteess • Gebruik van Ajax: http://www.adaptivepath.com/publications/e ssays/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
  • 209. Ajjaaxx 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.
  • 210. Erkend door de Vlaamse regering Met de steun van Lanceren van de site
  • 211. FFTTPP  Uploaden van de webpagina : ◦ Wat is het ftp-adres? ◦ Wat is uw gebruikersnaam? ◦ Wat is uw wachtwoord?  FTP-programma’s : bv. Filezilla (http://flezilla.sourceforge.net/ ), CuteFTP
  • 212. CCuutteeffttpp  Een FTP-programma om bestanden te uploaden naar uw webruimte
  • 213. PPaaggiinnaa’’ss tteesstteenn oonnlliinnee • www.browsershots.org • Webdeveloper toolbar: https://addons.mozilla.org/frefox/60/ • Broken links: http://home.snafu.de/tilman/xenulink.html • Validators • html http://validator.w3.org/ • css: http://jigsaw.w3.org/css-validator/
  • 214. Lanceren van de site Promotie & Zoekmachines Erkend door de Vlaamse regering Met de steun van
  • 215. SSiittee--bbeekkeennddhheeiidd  Onderschat traditionele reclame niet!  Briefwisseling – contactkaartjes –  Forums, nieuwsgroepen, blogs  Zoekmachines en linksites  Pay per Click: Google Adwords  Klantenservice – productondersteuning bieden via internet: handleidingen downloaden, ...
  • 216. MM Meeetttaaat-tiaangfgossrmatie (informatie over informatie op de pagina) gedefnieerd in <HEAD>  Zoekmachine / Zoekdirectory gebruikt de info in Meta-tags Voorbeelden :  <META http-equiv=“refresh” content=“5;URL=www.youiware.be”>  <META name="description" content=“website over auto, velo, moto">
  • 217. GGeevvoonnddeenn ddoooorr ddee zzooeekkmmaacchhiinnee  Inkomende links, linkopbouw, linktekst  Metatag “keywords” : niet gebruikt  Metatag “description” : beschrijving  Title tags gebruiken!  Bovenste gedeelte van de <BODY>!  Opgepast met grafsche onderdelen, javascript, Flash, frames, image maps  <ALT> tags gebruiken, <NOFRAMES> gebruiken  Sleutelworden en synoniemen consistent gebruiken in content en code.
  • 218. SSppaamm--iinnddeexxiinngg  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/