Powerpoint Htmlcss
221
-
Upload
hans-rossel -
Category
Technology
-
view
2.545 -
download
2
Transcript of Powerpoint Htmlcss
Erkend door de
Vlaamse regering Met de steun van
HTML & CSS
www.koba.be
Erkend door de
Vlaamse regering Met de steun van
Geschiedenis
Pre-HistoriePre-Historie 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.
HistorieHistorie 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
Recente geschiedenisRecente geschiedenis 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-design
8 april 2014: Einde van IE6: https://www.modern.ie/en-us/ie6countdown
Te onthoudenTe onthouden 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)
Erkend door de
Vlaamse regering Met de steun van
Planning website project
Project stappenProject stappenAnalyse fase Doelen, doelgroep (user personas), planning, team Keuze domeinnaam en hosting
Voorbereidende fase Informatie architectuur: sitemap, trefwoordena, navigatie,
inhoudstypes Wireframes Interactie design
Project stappenProject stappenOntwikkelingsfase Grafsch ontwerp (photoshop) Xhtml/css prototype Programmatie CMS systeem
Testfase: bugfxes, usability
Lanceringsfase
Onderhoudsfase: backups & updates
Erkend door de
Vlaamse regering Met de steun van
Domeinnaam
Domeinnaam kiezenDomeinnaam 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?Domeinnaam beschikbaar?
Voor .com, .net, .org domeinnamen
http://whois.domaintools.com/
Voor .be domeinenwww.dns.be
Domein aanvragen & instellenDomein 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
Erkend door de
Vlaamse regering Met de steun van
Hosting - Webruimte
Waar komen de pagina’s terecht?Waar komen de pagina’s terecht?
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
Belangrijke elementenBelangrijke elementen 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)
ControlepaneelControlepaneel Cpanel Plesk Webmin Open Shift Eigen controlepaneel van het
hostingbedrijf
Erkend door de
Vlaamse regering Met de steun van
HTML & CSS
De taal van webpagina’s
Wat is HTML?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 (Chrome - Internet Explorer – Firefox - Safari)
Voorbeeld : http://www.syntrawest.be
Html paginaHtml pagina
Elementen (Tags)Elementen (Tags) 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
HTML AttributenHTML 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. Opmerking: dergelijke attributen kunnen tegenwoordig beter in css worden gedaan vermits ze de presentatie doen van de tekst.
CSS tag opmaak voorbeeldCSS tag opmaak voorbeeld 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?
Html + cssHtml + css
Erkend door de
Vlaamse regering Met de steun van
Basis elementen webpagina
Index.htmlIndex.html 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>
Erkend door de
Vlaamse regering Met de steun van
Doctype
DOCTYPEDOCTYPE1. 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>
Erkend door de
Vlaamse regering Met de steun van
Tekst invoegen
TekstenTeksten Niet opgemaakt
◦ Via notepad opmaak verwijderen Mooi opgemaakte teksten omzetten
naar .pdf formaat: afdrukbaar met behoud van layout en opmaak.
Taal? Meertalige website?
Erkend door de
Vlaamse regering Met de steun van
Body instellingen
KleurenKleuren RGB – monitor : Red Green Blue
FF 00 00 : volledig rood, geen groen, geen blauw00 FF 00 : geen rood, volledig groen, geen blauw
Css bodyCss bodybody {
background-color: #404040;
font-family: Verdana, Helvetica, sans-serif;
font-size:12px;
line-height:180%;
color:#ffffff;
margin: 0;
padding: 0;
}
Css headersCss headersh1 {
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
Erkend door de
Vlaamse regering Met de steun van
Werkomgeving
WerkomgevingWerkomgevingHtml Editors Dreamweaver Sublime text
Firefox en plugins https://getfrebug.com https://addons.mozilla.org/en-US/frefox/addon/web-deve
loper/
Erkend door de
Vlaamse regering Met de steun van
Links
HyperlinksHyperlinks 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)
LinksLinks 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
Css LinksCss Linksa:link, a:visited {
text-decoration: none;
color: #039;
}
a:hover {
text-decoration: underline;
background-color: #e4F4e3;
color: #333;
}
Erkend door de
Vlaamse regering Met de steun van
Afbeeldingen
Grafsche elementen : enkele tipsGrafsche 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)
Grafsche elementenGrafsche 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 fx: http://homepage.ntlworld.com/bobosola/pnghowto.htm
Foto's en logo'sFoto'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.
AfbeeldingenAfbeeldingen <img src=“logo.gif" width="105" height="125"
border=“0” alt=“De post">
img : Tag voor afbeeldingenwidth : breedteheight : hoogteborder : rand rondom afbeeldingalt : alternatieve tekst
Combinatie hyperlink afbeeldingCombinatie hyperlink afbeelding 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>
Grafsche elementen : editorsGrafsche elementen : editors 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, ...
Afbeeldingen vindenAfbeeldingen vinden• Professioneel: – http://www.istockphoto.com– http://www.shutterstock.com
• Google afbeeldingen zoeken: copyright!• Vrij van copyright– http://www.freeimages.com–Www.fickr.com (soms)
Afbeeldingen htmlAfbeeldingen html <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)
Css afbeeldingenCss afbeeldingenimg {
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 */}
Erkend door de
Vlaamse regering Met de steun van
Verschillen html & xhtml stijl
Verschillen html vs xhtmlVerschillen html vs xhtmlI
In xhtml is DOCTYPE verplichtA
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> O
Ook lege elementen moeten gesloten worden
◦ Incorrect: <br>, <hr>, <img>
◦ Correct: <br />, <hr />, <img />E
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>
Html vs xhtml (vervolg)Html vs xhtml (vervolg)A
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” />A
Alle elementen en attributen moeten klein geschreven worden
◦ Incorrect: <BODY><P ID="iets">Tekst</P></BODY>
◦ Correct: <body><p id="iets">Tekst</p></body> A
Attributen mogen niet geminimaliseerd worden
◦ Incorrect: <option selected>, <frame noresize>, <input checked>
◦ Correct: <option selected="selected">, <frame noresize="noresize">, <input checked="checked“>
Overschakelen html -> xhtmlOverschakelen 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.ht
ml#dreamweaver
Erkend door de
Vlaamse regering Met de steun van
Bestandsstructuur
Bestandsstructuur websiteBestandsstructuur websiteMappen Css Javascript ImagesBestanden Index.htm 404.htm & .htaccess Robots.txt Cgi-bin
Erkend door de
Vlaamse regering Met de steun van
Layout:Frames, Tabellen en CSS
Een grove structuur voor de pagina
SchermformatenSchermformaten 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 FramesLayout 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 framesHtml frames <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>
Layout met TabellenLayout 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◦ Grafsch designers kunnen hun ontwerp slicen
en als puzzel terug samenstellen◦ Programmeurs kunnen resultaten van code
makkelijk weergeven
TabellenTabellen
<table width="93"><tr>
<td width="85">eerste rij</td></tr><tr>
<td width="85">tweede rij</td></tr>
</table>
Layout via div lagenLayout via div lagen 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-stellingenVast-stellingenHoe 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
Structuur: Lagen makenStructuur: Lagen maken
<div id=“container”><div id=“head”></div><div id=“content”>
</div><div id=“nav”></div></div>
Centreren 1 kolom liquidCentreren 1 kolom liquidLiquid layouts
div#container{margin-left: 10%; margin-right: 10%;}
1 Kolom gecentreerd1 Kolom gecentreerd
CSS met auto margin:
#container {
width: 960px;
margin: 0 auto;
}
1 Kolom gecentreerd (versie 2)1 Kolom gecentreerd (versie 2)
CSS met negatieve margin:
#container {
width:720px;
position:relative;
left:50%;
margin-left:-360px;
}
2 Kolommen – fxed – xhtml 2 Kolommen – fxed – xhtml <div id=“container">
<div id=“header”></div>
<div id=“content”> <!-- Voor navigatie:screenreaders -->
</div> <div id=“navigatie”>
</div><div id=“footer”></div>
</div>
2 Kolommen – fxed – css 2 Kolommen – fxed – css #content {
width:720px;
foat:right;
}
#navigatie {
width:180px;
foat:left;
}
#footer {
clear:both;
}
2 Kolommen fxed - padding2 Kolommen fxed - padding
#navigatie {
padding-top: 20px;
padding-bottom: 20px;
}
3 Kolommen fxed – xhtml 3 Kolommen fxed – xhtml <div id=“content”>
<div id=“hoofdcontent”>
</div>
<div id=“contentblok”>
</div>
</div>
3 Kolommen fxed – css3 Kolommen fxed – css
#hoofdcontent {
width: 320px;
foat: left;
}
#contentblok {
width:180px;
foat: right;
}
3 Kolommen fxed – padding3 Kolommen fxed – padding
#contentblok h1, #contentblok h2, #contentblok p {
padding-left: 20px; // box model bug IE5
padding-right: 20px; // box model bug IE5
}
3 Kolommen liquid – css3 Kolommen liquid – css#container {
width: 85%;
margin: 0 auto;
}
#navigatie {
width: 23%;
foat: left;
}
#content {
width: 75%;
foat: right;
}
3 Kolommen elastisch – css3 Kolommen elastisch – css
Default font-size = 16px
10px = 62.5% van 16px
body {
font-size: 62.5%
}
3 Kolommen elastisch – css3 Kolommen elastisch – css#container {
width: 72em;
margin: 0 auto;
}
#navigatie {
width: 18em;
foat: left;
}
#content {
width: 52em;
foat: right;
}
3 Kolommen elastisch – css3 Kolommen elastisch – css
#hoofdcontent {
width: 32em;
foat: left;
}
#contentblok {
width: 18em;
foat: right;
}
Hybrid liquid-elastisch – cssHybrid liquid-elastisch – css#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;
}
Hybrid liquid-elastisch – cssHybrid liquid-elastisch – css
#hoofdcontent {
width: 32em;
max-width: 66%;
foat: left;
}
#contentblok {
width: 18em;
max-width: 31%;
foat: right;
}
Liquid en elastische afbeeldingenLiquid 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 alternatiefHeader afbeelding alternatief
#header {
width: 100%
overfow: hidden;
}
<div id=”header”>
<img src=”images/hoofding.png” width=”1600” height=”171” />
</div>
Faux ColumnsFaux 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;
}
Erkend door de
Vlaamse regering Met de steun van
Positioning
Box modelBox model
Block level & Inline elementsBlock 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 fow
•Float
•Absolute positioning & fxed positioning
Relative positioningRelative 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 positioningRelative positioning
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;
}
Absolute positioningAbsolute positioningElement neemt geen plaats in. Andere elementen houden er geen rekening meeZwevendPositie enkel tov ancestor/parent elementz-index
#box2 {
position: absolute;
width:150px;
height: 100px;
top:20px;
left:20px;
z-index:2;
background-color:green;
}
Fixed positioningFixed positioning
Gelijkaardig principe als absolute positioningPositie enkel tov venster zelfUsability: menu of invulformulier blijft steeds zichtbaarNiet ondersteund door IE6
#box2 {
position: fxed;
width:150px;
height: 100px;
top:20px;
left:20px;
z-index:2;
background-color:green;
}
FloatingFloating
Boxen kunnen links of rechts gefoat wordenAls box waarin de 3 boxen vervat zit niet breed genoeg is valt de derde box eronderClear: 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;
}
ClearClear
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;
}
Problemen met foatProblemen met foat
Voorbeeld: Image met tekst rechts
.news {
background-color:gray;
border:solid 1px black;
foat:left;
}
.news img {
foat:left;
}
.news p {
foat:right;
}
Problemen met foatProblemen met foatOplossing 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
Erkend door de
Vlaamse regering Met de steun van
Lijsten
Styling van lijstenStyling van lijsten
ul { margin:0;
padding:0;
list-style-type:none;
}
li { background: url(bullet.gif) no-repeat 0 50%;
padding-left:30px;
}
Erkend door de
Vlaamse regering Met de steun van
Navigatie
Opstellen inhoudstafel en menuOpstellen 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 lijstenListamatic: css menu’s met lijsten
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)
Vertikale navigatieVertikale navigatie
<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>
CSS SpritesCSS Sprites
http://www.alistapart.com/articles/sprites
http://www.koba.be/lesimages/pixy-rollover.gif
Vertikale navigatie cssVertikale navigatie cssul {
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 cssVertikale navigatie css
a:hover, .selected a {
background-color: #369;
background-position: right bottom;
color: #fff;
}
.frst a {
height: 40px;
line-height: 40px;
}
Horizontale navigatie htmlHorizontale navigatie html
<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>
Horizontale navigatie cssHorizontale navigatie css
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;
}
Horizontale navigatie cssHorizontale navigatie cssul 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;
}
Suckerfsh drop down menuSuckerfsh drop down menuZie: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
Erkend door de
Vlaamse regering Met de steun van
<head>
<head><head>
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>
<head> Beveiliging<head> Beveiliging
<meta name="author" content="[email protected], 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
<head> zoekmachines<head> zoekmachines<title>titel</title>
<meta name="keywords" content="keywords,keyword,other keyword" />
<meta name="description" content="description" />
<head> meta tags<head> meta tags<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)
<head> nutteloze meta tags<head> nutteloze meta tags<!-- 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“ />
Robots.txtRobots.txt User-agent: * Disallow: /cgi-bin/ Disallow: /javascript/ Disallow: /Templates/ Disallow: /css/
Bemerk• Gehoorzaamheid?
• Gevaar hele site niet geïndexeerd
<head> css<head> css<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
Erkend door de
Vlaamse regering Met de steun van
VerschillendeStyle sheets
Voor print en handheldVoor 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
StyleswitcherStyleswitcherhttp://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/
Conditional comments voor IEConditional comments voor IE
<!--[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
Erkend door de
Vlaamse regering Met de steun van
Tabellen
Tabellen htmlTabellen 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)Tabellen html (vervolg) th ipv td Width Colspan, rowspan Align, valign Cellpadding, cellspacing Centreren tabel <caption>Dit is het bijschrift</caption>
Tabellen cssTabellen 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 captionSummary en caption<tab le ce llspacing="0" id="p lay listTab le" 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>
TheadThead
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
TbodyTbody
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
Odd en evenOdd en even
<tr class=”odd”></tr>
<tr class=”even”></tr>
Table cssTable csstable {
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 cssCaption css
caption {
font-size: 1.2em;
font-weight: bold;
margin: 1em 0;
}
Thead cssThead cssthead {
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;
}
AfwerkingAfwerking.odd {
background-color :#edf5ff; }
tr :hover {
background-color :#3d80df;
color : #fff; }
thead tr :hover {
background-color : transparent;
color : inherit; }
Erkend door de
Vlaamse regering Met de steun van
Formulieren
Eenvoudig formulierEenvoudig formulier
< form id="comments_form " action="#"
method="post">
</form>
Fieldset & LegendFieldset & Legend
<feldset>
<legend>Your Contact Details</legend>
</feldset>
Label en InputLabel en Input <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>
Message (textarea)Message (textarea)<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>
Form cssForm cssform {
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;
}
label {
display: block; }
label .required {
font-size: 0.75em;
color:#760000; }
input {
width: 200px; }
input.radio, input.submit {
width: auto;
}
/* style form e lements on focus */
input:focus, textarea:focus {
background: #ffc; }
input.radio {
foat: left;
margin-right: 1em; }
textarea {
width: 300px;
height: 100px; }
Wat zijn formulierenWat zijn formulieren
Gegevens verkrijgen van surfers
Formulieren aanmakenFormulieren aanmaken
<FORM name="enquete" method="post" action="mailto:[email protected]">
<P>Familienaam <INPUT type="text"
name="familienaam" size="50" maxlength="50“ />
</P></FORM>
Input tekstInput tekst
<form>Voornaam: <input type="text" name=“voornaam“ /> <br> Naam: <input type="text" name=“naam“ /> <textarea name=“bericht" cols="40" rows="5“></textarea>
</form>
Input radio buttonsInput radio buttons
<form> <input type="radio" name=“geslacht" value=“man“ /> Man <br> <input type="radio" name=“geslacht" value=“vrouw“ /> Vrouw
</form>
Input checkboxInput checkbox
<form> <input type="checkbox" name=“fets“ /> Ik heb een fets <br> <input type="checkbox" name=“auto“ /> Ik heb een auto
</form>
Drop down menuDrop down menu
<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>
Formulieren css: SubmitFormulieren css: Submit<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“ />
Formulieren css vervolgFormulieren css vervolg
#submit{
background:#BC4819;
color:#FFF;
width:auto;
padding: 2px 10px;
border:none;
}
Formulieren css: InputFormulieren css: Input
<style tyle=text/css>input.pink { background-color: #ffcccc;
font-size: 10px;}</style>
<input class="pink" type="text" name=“voornaam" size="20“ />
Formulieren css: TextareaFormulieren css: Textarea
<style tyle=text/css>textarea.violet { background-color: #ccccff;}</style>
<textarea class="violet" rows="4" name=“uwvraag" cols="20">
Formulieren cssFormulieren css
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;
}
CSS checkbox, drop downCSS checkbox, drop down
<input class="red" type="radio" value="V1" checked name="R1">
<option class="pink" value= “introhtml.htm">- Intro to HTML</option>
Verwerking van formulierenVerwerking 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 formulierVolledig formulier<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_REFERER" />
<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>
Contrôle formulierContrôle formulier
Kan server side of client side (of beide)
Server side:nms
Client sidehttp://www.quirksmode.org/dom/error.html
NMS FormmailNMS FormmailZie: http://nms-cgi.sourceforge.net/scripts.shtml
Basisinstellingen:
• $max_recipients = 2;
• $mailprog = '/usr/sbin/sendmail -oi -t';
• $postmaster = '[email protected]';
• @referers = qw(wmw.be 216.193.202.92 localhost);
• @allow_mail_to = qw([email protected] [email protected]);
• %recipient_alias = ('1' => '[email protected]', '2' =>
• $send_confrmation_mail = 0;
NMS Formmail 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 antwoordEmail formulier antwoordHieronder is het formulier dat verstuurd werd door ([email protected]) 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
Erkend door de
Vlaamse regering Met de steun van
Media invoegen
<embed> en <object><embed> en <object>http://www.handleidinghtml.nl/html/elementen/embed.htmlhttp://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).
Grafsche elementen : Grafsche elementen : bewegende beeldenbewegende beelden Animated gif .swf bestanden : vectorgebaseerde
animaties door middel van bv. Macromedia Flash : (www.macromedia.com(
.mpg / .avi / … : flmmateriaal, maar grotere bestanden
Muziek toevoegen aan siteMuziek toevoegen aan site<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
Quicktime flmpjesQuicktime flmpjeshttp://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>
Enkel met <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> QuicktimeEnkel <object> Quicktime<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>
Via YoutubeVia Youtube<object width="425" height="350"><param name="movie"
value="http://www.youtube.com/v/synxFmQJ_0A"></param>
<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>
Via Google videoVia Google video
<embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-fash" src="http://video.google.com/googleplayer.swf?docId=3913745262811179417&hl=en-CA">
</embed>
Flash flmpjesFlash flmpjes<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>
Microsoft patent probleemMicrosoft 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/em
bed.html
◦ http://www.adobe.com/designcenter/popular_topics/click_to_activate/
.fv videoformaat.fv videoformaat
Ffmpeg: conversie op server naar .fv +
compressie
Flash players◦ Jeroen We ijring◦ Flowplayer◦ ...
Iframe:Iframe: 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
Erkend door de
Vlaamse regering
CSS Frameworks & GridsCSS Frameworks & Grids
CSS3 VoorstelWorkflow & optimalisatie
Het belang van snelheidHet belang van snelheid Frameworks = Sne ller werken
Compressie & optimalisatie = snellere pagina's◦ Amazon : 100 m s extra laadsne lhe id geeft 1% m inder 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: N icole Sullivan,
Yahoo!)
YslowYslow 80% van laadtijd is voor het laden van e lementen vanu it
html: css, js, videos.
14 regels: http://developer.yahoo.com/performance/rules.htm l
Google tech & yslow
http ://www.youtube .com /watch?v=BTHvs3V8DBA
Yslow p lugin voor frebug: http://developer.yahoo.com/yslow
Compressie & optimalisatieCompressie & optimalisatie Eerst valideren!
Kleinere css = sneller laden
Automatisch:
http://foele .fyspray.org/csstidy//css_optim ise
r.php: compressie & optimalisatie
CSS3 Template layoutCSS3 Template layout Geavanceerd templating met css3 (draft):
http://www.w3.org/TR/css3-layout
Jquery implementatie?
http://ejohn.org/blog/css3-template-layout
Grid systemenGrid 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
VoordelenVoordelen Vertrekken van vaste basiscode (w ie l n iet heru itvinden)
Browser compatibiliteit: Herbruikbaarheid css en hacks voor IE6 (en zelfs IE5,
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-ups
Clean code
Klein <5kb
Iphone viewport is 960px
NadelenNadelen Jij en iedereen die aan de site werkt moet
het framework kennen
Er is code die je niet gebruikt
Beperkingen in design◦ De xhtm l 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)
SamenstellingSamenstelling reset.css
typography.css
grid.css
ie.css
print.css
forms.css
Reset: Tripoli & compressieReset: 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/ Compatibe l met W indows: 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
BlueprintBlueprint 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.gs960.gs http://960.gs
Ook fuid: http://www.designinfuences.com/fuid960gs
En elastic
http://csswizardry.com/typogridphy
Uitgewerkt voorbeeld:http ://nettuts.com /tutoria ls/htm l-css-techn iques/prototyp ing-w ith-the-grid-960-css-framework
Meer infoMeer info http://www.alistapart.com/articles/framewo
rksfordesigners http://www.smashingmagazine.com/2007/09/
21/css-frameworks-css-reset-design-from-
scratch
__ __ _____ ___ Met de steun van Erkend door de
Vlaamse regering
JQUERY
10/08/07
JqueryJquery● 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
10/08/07
Populairiteit jquery groeitPopulairiteit 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)&c
tab=0&geo=all&date=all
10/08/07
Jquery toevoegenJquery toevoegen● 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
10/08/07
VoorbeeldenVoorbeelden
__ __ _____ ___ Met de steun van Erkend door de
Vlaamse regering
Core functionaliteit
http://www.simonwhatley.co.uk/blog/wp-content/uploads/2008/02/jquery12_api_reference.png
10/08/07
Meer jqueryMeer jquery
● http ://docs.jquery.com
● http://learningjquery.com
● http://ajaxian.com/archives/hacking-digg-with-frebug-and-jquery
● http://plugins.jquery.com/
●
Erkend door de
Vlaamse regering Met de steun van
Speciale technieken
JavascriptJavascript http ://www.webappers.com
www.dynamicdrive.com
plugins.jquery.com
OpacityOpacity
http://www.mandarindesign.com/opacity.html
Verschillende opacity technieken
Advanced selectorsAdvanced selectors
External links
Erkend door de
Vlaamse regering Met de steun van
CSS HacksMet dank aan Internet Explorer
WebstandaardenWebstandaarden 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.orgSVG testhttp://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-flters-displace-
01-f.html
Gekende bugsGekende bugs Star hack
Box model hack
3 pixel gap
Double foat bug
Has content
Oplossing via javascriptOplossing via javascript Ie7 en ie8.js
◦ http ://code .goog le .com /p/ie7-js
Erkend door de
Vlaamse regering Met de steun van
CSS Hacks
Box modelBox model
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
Tantek (box model) hackTantek (box model) hack#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. */}
Escape hackEscape hack
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; wid\th: 750px; /* IE 5 en 5.5 zien dit niet*/
}
CSS Hacks en IE7CSS Hacks en IE7
Let op: Hacks moeten voorwaarts compatibel zijn!
http://www.positioniseverything.net/articles/ie7-dehacker.html
Erkend door de
Vlaamse regering Met de steun van
Web 2.0
Web 2.0Web 2.0
Web 2.0Web 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: http://code.google.com
Web 2.0 websitesWeb 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
AjaxAjax
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.
Erkend door de
Vlaamse regering Met de steun van
Lanceren van de site
FTPFTP 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
CuteftpCuteftp Een FTP-programma om bestanden te
uploaden naar uw webruimte
Pagina’s testen onlinePagina’s testen online• 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/
Erkend door de
Vlaamse regering Met de steun van
Lanceren van de sitePromotie & Zoekmachines
Site-bekendheidSite-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, ...
MetatagsMetatags Meta-informatie (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">
Gevonden door de zoekmachineGevonden door de zoekmachine 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.
Spam-indexingSpam-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/
