Upload
aimon
View
61
Download
5
Embed Size (px)
DESCRIPTION
Standardeid järgiv veebidisain: XHTML ja CSS algajale. Hans Põldoja [email protected]. Natuke ajaloost. Milleks standardeid järgida?. Hüpertekstisüsteemide ajaloost. 1945 esitas Vannevar Bush artiklis “As We May Think” oma visiooni süsteemist Memex - PowerPoint PPT Presentation
Citation preview
Standardeid järgiv veebidisain: XHTML ja CSS algajale
Hans Põ[email protected]
Natuke ajaloost
Milleks standardeid järgida?
http://www.tpu.ee/~hans/www/ 3
Hüpertekstisüsteemide ajaloost
• 1945 esitas Vannevar Bush artiklis “As We May Think” oma visiooni süsteemist Memex
• 1968 esitles Douglas C. Engelbart esimest töötavat hüpertekstisüsteemi NLS
• 1981 kirjeldas Ted Nelson süsteemi Xanadu, mis erinevalt eelkäijatest pidi töötama personaalarvutil
• 1987 avaldati Bill Atkinsoni loodud lihtne hüpertekstisüsteem HyperCard, mis levis laialdaselt aastatel 1987-1992
http://www.tpu.ee/~hans/www/ 4
Memex
http://www.tpu.ee/~hans/www/ 5
NLS
http://www.tpu.ee/~hans/www/ 6
HyperCard
http://www.tpu.ee/~hans/www/ 7
WWW ajaloost
• 1989-1990 leiutas Tim Berners-Lee veebi ja kirjutas esimese brauseri WorldWideWeb
• 1992 ilmus esimene HTML standard• 1993 ilmus Mosaic, esimene laialt levinud
graafiline brauser Windowsile• 1994 ilmus Netscape 1.0 (koodnimega Mozilla)• 1994 asutas Tim Berners-Lee World Wide Web
konsortsiumi (www.w3.org)
http://www.tpu.ee/~hans/www/ 8
W3C eesmärgid
• Universaalne ligipääs – muuta veeb ligipääsetavaks kõigile inimestele propageerides tehnoloogiaid, mis arvestavad kõikidel kontinentidel elavate inimeste laiade erinevustega kultuuris, keeles, hariduses, võimetes, materiaalsetes ja tehnilistes võimalustes ning füüsilistes piirangutes.
• Semantiline veeb – luua tarkvarakeskkond, milles dokumentide sisu on arvutiprogrammidele arusaadava tähendusega.
• Usaldatav veeb – suunata veebi arengut, pidades hoolikalt silmas selle tehnoloogia õiguslikke, majanduslikke ning sotsiaalseid aspekte.
http://www.tpu.ee/~hans/www/ 9
W3C standardid
• HTML (viimane versioon HTML 4.01 aastast 1999)• XHTML• XML - laiendatav märgendikeel• CSS1 ja CSS2 - veebilehtede kujunduse kirjeldamiseks• WCAG - veebilehekülgede ligipääsetavusjuhised• PNG - graafikaformaat• SVG - vektorgraafika kirjeldamise keel• MathML - matemaatiliste sümbolite esitamine veebis• ...
http://www.tpu.ee/~hans/www/ 10
“The Browser Wars”
• 1995 ilmus Internet Explorer 1.0 (Microsoft ostis Mosaic’i lähtekoodi)
• 1995-1997 tihedad IE ja Netscape versiooniuuendused
• Uued funktsionaalsused, brauserispetsiifilised HTML elemendid, ebastabiilsus, turvaaugud
• 1998 AOL ostab Netscape, IE saavutab ülekaaluka turuosa
• 1999 Ilmub IE 5.0, mis on väga tolerantne vigase HTML koodi suhtes
http://www.tpu.ee/~hans/www/ 11
IE vs Netscape (1997)
http://www.tpu.ee/~hans/www/ 12
Brauserite sõja tagajärjed
• HTML kasutatakse kujunduslikel eesmärkidel, mitte dokumendi struktuuri kirjeldamiseks
• Leheküljed pole ligipääsetavad erivajadustega kasutajatele
• Leheküljed paistavad erinevates brauserites erinevalt ning vanema versiooni jaoks loodud leheküljed ei pruugi töötada uuema brauseriga
• Veebirakenduste loomine nõuab rohkem aega ja raha, kui luuakse erinevatele brauseritele oma versioonid
• Kuna kujundus ja sisu ei ole lahus, on problemaatiline lehekülgede portimine õhukestele klientidele kasutatavale kujule
http://www.tpu.ee/~hans/www/ 13
Üleminek standardite järgimisele
• 1998 juhtivate veebidisainerite poolt asutati Web Standards Project (www.webstandards.org)
• 2000 ilmus Internet Explorer 5.0 Mac’i versioon, mis oli esimene standardeid suurel määral toetav brauser
http://www.tpu.ee/~hans/www/ 14
Standardeid järgivad brauserid
• Mozilla 1.0 ja uuemad• Mozilla Firefox• Netscape Navigator 6.0 ja uuemad• Internet Explorer 6.0 ja uuemad Windowsil• Internet Explorer 5.0 ja uuemad Macintoshil• Opera 7.0 ja uuemad• Safari• ...
http://www.tpu.ee/~hans/www/ 15
Brauserite sõda 2?
http://www.tpu.ee/~hans/www/ 16
Müüdid standardite kohta
• Standardeid järgivad leheküljed on inetud ja igavad
• Standardite järgimine on vajalik ainult puuetega inimestele ligipääsu tagamiseks
• Standardid on keerulised
http://www.tpu.ee/~hans/www/ 17
Inetu ja igav?
http://www.tpu.ee/~hans/www/ 18
Ligipääsetav?
http://www.tpu.ee/~hans/www/ 19
Ligipääsetav?
XHTML ja CSS
Keeruline? Üldsegi mitte...
http://www.tpu.ee/~hans/www/ 21
XHTML mõisted
• <img src=“minupilt.jpg” alt=“Mina” />• märgis (tag)• img - element• src, alt - atribuudid (attribute)• minupilt.jpg, Mina - atribuutide väärtused
(attribute value)
http://www.tpu.ee/~hans/www/ 22
Sammud veebilehestiku loomisel
1. Dokumenditüübi valik2. Dokumendi sisu lisamine ainult struktuuri
kirjeldavate HTML elementide abil (<h1>, <h2>, <p>, <ul>, <ol>, <li>, <table>, <img>, ... )
3. Dokumendi kontrollimine validaatori abil4. Dokumendi kujundust kirjeldava CSS faili
loomine5. CSS kontrollimine validaatori abil6. CSS testimine erinevatel brauseritel
http://www.tpu.ee/~hans/www/ 23
XHTML dokumenditüübid (1)
• XHTML 1.0 Strict. Dokumendi struktuuri kirjeldamine. Kõikide kujundusega seotud märgiste asemel tuleb kasutada CSS'i.
• XHTML 1.0 Transitional. Sobivaim dokumenditüüp olukorras, kui tahetakse, et lehekülg vastaks XHTML'i standarditele kuid kujundus töötaks ka CSS'i mittetoetavate brauseritega. Võimalik kasutada kujunduseks mõeldud HTML'i märgiseid.
• XHTML 1.0 Frameset. Kasutatakse juhul, kui soovitakse jaotada brauseriakent paneelideks.
http://www.tpu.ee/~hans/www/ 24
XHTML dokumenditüübid (2)
• XHTML 1.0 Basic. See dokumenditüüp on mõeldud klientidele, mis ei toeta kõiki XHTML'i võimalusi: mobiiltelefonid, pihuarvutid jne. Dokumenditüüp võimaldab kasutada pilte, ekraanivorme, lihtsamaid tabeleid ja objekte.
• XHTML 1.1. Modulaarse ülesehitusega XHTML, millest on kõrvaldatud kõik hüljatud HTML märgised, sarnaneb XHTML 1.0 Strict dokumenditüübiga, kuid sobib paremini XHTML edasiarendamise aluseks ning teiste keeltega integreerimiseks.
http://www.tpu.ee/~hans/www/ 25
XHTML erinevused HTML’ist (1)
• Kohustuslik DOCTYPE• Kohustuslik XML nimeruum HTML avamärgises: <html
xmlns="http://www.w3.org/1999/xhtml">• Sisutüüp: <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />• XHTML on tõstutundlik - kõik HTML elemendid ja
atribuutide nimed tuleb kirjutada väikeste tähtedega: <h1>, <p>, ...
• Atribuutide väärtused võivad olla suurte tähtedega: <img src=“MinuFoto.jpg” />
• Atribuutide väärtused peavad olema jutumärkides: height=“80”
http://www.tpu.ee/~hans/www/ 26
XHTML erinevused HTML’ist (2)
• Kõikidel atribuutidel peab olema väärtus• Iga algusmärgisega peab kaasas käima ka
lõpumärgis: <h1>See on pealkiri</h1>• “Tühjad” märgised peavad ka olema suletud:
<img src=“minupilt.jpg” alt=“Mina” />• < asemel <• & asemel &• > asemel > (see pole kohustuslik, kuid nii on
ilus)
http://www.tpu.ee/~hans/www/ 27
Ülesanne
• Kontrollige eelmisel korral loodud kooli kodulehekülge W3C HTML validaatoriga
• Määrake dokumenditüübiks XHTML 1.0 Transitional ja parandage vead
http://www.tpu.ee/~hans/www/ 28
CSS näide
h1 {font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;font-weight : bold;font-size : 10pt;
}
http://www.tpu.ee/~hans/www/ 29
Ülesanne 2
• Kujundada kooli kodulehekülg välise CSS laadilehe abil (värvid, kirjatüüp jne)