1 / 29

Standardeid järgiv veebidisain: XHTML ja CSS algajale

Standardeid järgiv veebidisain: XHTML ja CSS algajale. Hans Põldoja hans@tpu.ee. Natuke ajaloost. Milleks standardeid järgida?. Hüpertekstisüsteemide ajaloost. 1945 esitas Vannevar Bush artiklis “As We May Think” oma visiooni süsteemist Memex

aimon
Download Presentation

Standardeid järgiv veebidisain: XHTML ja CSS algajale

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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/

More Related