Veebistandardid

    Hans Põldoja
   Tallinna Ülikool
See materjal on avaldatud Creative Commons Attribution-ShareAlike
3.0 litsentsi alusel. Litsentsi terviktekstiga tutvumise...
WWW ajaloost

•   1989-1990 leiutas Tim Berners-Lee veebi ja kirjutas
    esimese brauseri WorldWideWeb

•   1992 ilmus es...
http://www.w3.org
W3C eesmärgid


•   Kõigile ligipääsetav veeb

•   Kõigil seadmetel töötav veeb

•   Veeb kui andmebaas

•   Usaldus ja ki...
W3C spetsifikatsioonid
•   HTML (viimane versioon HTML 4.01 aastast 1999)

•   XHTML

•   XML - laiendatav märgendikeel

• ...
IE vs Netscape

•   1995 ilmus Internet Explorer 1.0 (Microsoft ostis
    Mosaic’i lähtekoodi)

•   1995-1997 tihedad IE j...
“Brauserite sõja” tagajärjed

•   HTML kasutatakse kujunduslikel eesmärkidel, mitte dokumendi
    struktuuri kirjeldamisek...
Üleminek standardite
            järgimisele


•   1998 juhtivate veebidisainerite poolt asutati Web
    Standards Project...
http://www.webstandards.org
XHTML
XHTML mõisted

•   <img src=“minupilt.jpg” alt=“Mina” />

•   märgis (tag)

•   img - element

•   src, alt - atribuudid (...
XHTML dokumenditüübid (1)

•   XHTML 1.0 Strict. Dokumendi struktuuri kirjeldamine.
    Kõikide kujundusega seotud märgist...
XHTML dokumenditüübid (2)

•   XHTML 1.0 Basic. See dokumenditüüp on mõeldud
    klientidele, mis ei toeta kõiki XHTML'i v...
XHTML erinevused HTML’ist (1)
•   Kohustuslik DOCTYPE

•   Kohustuslik XML nimeruum HTML avamärgises: <html
    xmlns=quot...
XHTML erinevused HTML’ist (1)

•   Kõikidel atribuutidel peab olema väärtus

•   Iga algusmärgisega peab kaasas käima ka l...
HTML koodinäide

<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01
Transitional//ENquot; quot;http://www.w3.org/TR/html4/
l...
XHTML koodinäide

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0
Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/...
http://validator.w3.org
XML
Mis on XML?

•   XML tuleb sõnadest EXtensible Markup Language

•   XML on samalaadne märgendikeel nagu HTML

•   XML on l...
XML koodinäide


<teade>
<kellelt>Hans</kellelt>
<kellele>IFI7033 kuulajad</kellele>
<pealkiri>Meeldetuletus</pealkiri>
<s...
CSS
CSS


•   Astmelised laadilehed — spetsifikatsioon
    veebilehtede kujunduse kirjeldamiseks

•   Cascading Style Sheets 1 ...
CSS lisamine veebilehele


•   Väline laadileht
    <link rel=quot;stylesheetquot; type=quot;text/cssquot;
    href=quot;k...
CSS koodinäide


p {
      color: #000000;
      background-color: #ffffff;
      font-family: Helvetica, Verdana, sans-se...
http://jigsaw.w3.org/css-validator/
WCAG
WCAG


•   Web Content Accessibility Guidelines — veebisisu
    käideldavusjuhised

•   Web Content Accessibility Guidelin...
WCAG 2.0 kontrollküsimused


•   Tajutav (Perceivable) - 4 küsimust

•   Töötav (Operable) - 4 küsimust

•   Arusaadav (Un...
Kohandatustasemed


•   A — veebileht vastab kõigile A taseme küsimustele

•   AA — veebileht vastab kõigile A ja AA tasem...
http://www.contentquality.com
Veebistandardid Eestis


•   Veebide koosvõime raamistik 0.6: http://
    www.riso.ee/et/files/VeebidRaamistikV06-loplik.pd...
Tänud kuulamast!



•   hans.poldoja@tlu.ee

•   Skype: hanspoldoja

•   http://www.slideshare.net/hanspoldoja/
Upcoming SlideShare
Loading in...5
×

Veebistandardid I

1,313

Published on

Tallinna Ülikooli kursuse \"E-õppe vahendite standardid ja spetsifikatsioonid\" loenguslaidid. 21. september 2008, Tallinn.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,313
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Veebistandardid I

  1. 1. Veebistandardid Hans Põldoja Tallinna Ülikool
  2. 2. See materjal on avaldatud Creative Commons Attribution-ShareAlike 3.0 litsentsi alusel. Litsentsi terviktekstiga tutvumiseks külastage aadressi http://creativecommons.org/licenses/by-sa/3.0/ või kirjutage aadressil Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California, 94105, USA.
  3. 3. 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)
  4. 4. http://www.w3.org
  5. 5. W3C eesmärgid • Kõigile ligipääsetav veeb • Kõigil seadmetel töötav veeb • Veeb kui andmebaas • Usaldus ja kindlustunne
  6. 6. W3C spetsifikatsioonid • 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
  7. 7. IE vs Netscape • 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
  8. 8. “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
  9. 9. Üleminek standardite järgimisele • 1998 juhtivate veebidisainerite poolt asutati Web Standards Project: http://www.webstandards.org • 2000 ilmus Internet Explorer 5.0 Mac’i versioon, mis oli esimene standardeid suurel määral toetav brauser
  10. 10. http://www.webstandards.org
  11. 11. XHTML
  12. 12. 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)
  13. 13. 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.
  14. 14. 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.
  15. 15. XHTML erinevused HTML’ist (1) • Kohustuslik DOCTYPE • Kohustuslik XML nimeruum HTML avamärgises: <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> • Sisutüüp: <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=iso-8859-1quot; /> • 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”
  16. 16. XHTML erinevused HTML’ist (1) • 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)
  17. 17. HTML koodinäide <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot; quot;http://www.w3.org/TR/html4/ loose.dtdquot;> <html> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/ html;charset=utf-8quot;/> <title></title> </head> <body> </body> </html>
  18. 18. XHTML koodinäide <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/ html;charset=utf-8quot;/> <title></title> </head> <body> </body> </html>
  19. 19. http://validator.w3.org
  20. 20. XML
  21. 21. Mis on XML? • XML tuleb sõnadest EXtensible Markup Language • XML on samalaadne märgendikeel nagu HTML • XML on loodud andmevahetuseks, mitte andmete kuvamiseks • XML sildid ei ole eeldefineeritud. Igaüks võib valida oma sildid. • XML 1.0 esimene versioon 1998, praegune 2006
  22. 22. XML koodinäide <teade> <kellelt>Hans</kellelt> <kellele>IFI7033 kuulajad</kellele> <pealkiri>Meeldetuletus</pealkiri> <sisu>Loeng toimub laupäeval 04.10 kell 14.00</sisu> </teade>
  23. 23. CSS
  24. 24. CSS • Astmelised laadilehed — spetsifikatsioon veebilehtede kujunduse kirjeldamiseks • Cascading Style Sheets 1 (1996) • Cascading Style Sheets 2.1 (2007, Candidate Recommendation)
  25. 25. CSS lisamine veebilehele • Väline laadileht <link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;kujundus.cssquot;/> • HTML dokumendi päises paiknev laadileht • HTML märgiste juurde kirjutatud style-atribuudid
  26. 26. CSS koodinäide p { color: #000000; background-color: #ffffff; font-family: Helvetica, Verdana, sans-serif; font-size: 90%; line-height: 1.5em; }
  27. 27. http://jigsaw.w3.org/css-validator/
  28. 28. WCAG
  29. 29. WCAG • Web Content Accessibility Guidelines — veebisisu käideldavusjuhised • Web Content Accessibility Guidelines 1.0 (1999) • Web Content Accessibility Guidelines 2.0 (2008, Candidate Recommendation): http://www.w3.org/ TR/WCAG20/
  30. 30. WCAG 2.0 kontrollküsimused • Tajutav (Perceivable) - 4 küsimust • Töötav (Operable) - 4 küsimust • Arusaadav (Understandable) - 3 küsimust • Lihtne (Robust) - 1 küsimus
  31. 31. Kohandatustasemed • A — veebileht vastab kõigile A taseme küsimustele • AA — veebileht vastab kõigile A ja AA taseme küsimustele • AAA — veebileht vastab kõigile A, AA ja AAA taseme küsimustele
  32. 32. http://www.contentquality.com
  33. 33. Veebistandardid Eestis • Veebide koosvõime raamistik 0.6: http:// www.riso.ee/et/files/VeebidRaamistikV06-loplik.pdf • Valitsusasutuste veebide käideldavuse testimine (2006)
  34. 34. Tänud kuulamast! • hans.poldoja@tlu.ee • Skype: hanspoldoja • http://www.slideshare.net/hanspoldoja/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×