Standardeid järgiv veebidisain: XHTML ja CSS algajale

1. Standardeid järgiv veebidisain: XHTML ja CSS algajale Hans Põldoja hans@tpu.ee

2. Natuke ajaloost Milleks standardeid järgida?

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? http://www.tpu.ee/~hans/www/

20. XHTML ja CSS Keeruline? Üldsegi mitte...

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 • Dokumenditüübi valik • Dokumendi sisu lisamine ainult struktuuri kirjeldavate HTML elementide abil (<h1>, <h2>, <p>, <ul>, <ol>, <li>, <table>, <img>, ... ) • Dokumendi kontrollimine validaatori abil • Dokumendi kujundust kirjeldava CSS faili loomine • CSS kontrollimine validaatori abil • 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 &lt; • & asemel &amp; • > asemel &gt; (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) http://www.tpu.ee/~hans/www/