3.27 "Tuotantoesimerkkien" rakenne ja viittaukset (1/2)

Samankaltaiset tiedostot
4 Web & tekstiformaatit

Verkkosaavutettavuuden tekniset perusteet. 3.1 Välisoitto

3 Verkkosaavutettavuuden tekniset perusteet

10 Pieni datalähtöinen sovellusesimerkki

3 Verkkosaavutettavuuden tekniset perusteet

XML johdanto, uusimmat standardit ja kehitys

Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002

XML, standardointi ja kehitys

XML, XHTML ja CSS. T Hypermediadokumentin laatiminen. Mikko Pohja

W3C ja alueellinen standardointi

Paikkatiedot ja Web-standardit

W3C & verkkojulkaisun standardit

XML-pohjaiset rakennemäärittelyt

2. PEHMEÄ XHTML XRAJAHTML

HTML 5 Johdanto. Mikä on HTML 5

9.16 XSLT ja nimiavaruudet (1/3): literaali oletusnimiavaruus

Mitä direktiivi käytännössä velvoittaa?

Verkkopalveluiden saavutettavuus

W3C, XML ja sovellukset

Tutkitaan sitten HTML-dokumenttien anatomiaa, jotta päästään käsiksi rakenteisten dokumenttien käsitteistöön esimerkkien kautta.

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

W3C-teknologiat ja yhteensopivuus

ARVO - verkkomateriaalien arviointiin

Luento 13: XML langattomissa päätelaitteissa

Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

3.11 HTML-dokumentin ulkoasu?

Miten Internet toimii. Jyry Suvilehto T Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2010

Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti

VERKKOSOVELLUSTEN OHJELMOINTI, JOHDATUS PHP:HEN

Luento 12: XML ja metatieto

Järjestelmäarkkitehtuuri (TK081702) AJAX, Asynchronous JavaScript And XML. AJAX, Asynchronous JavaScript And XML

4 Verkkosisällön saavutettavuus

Siirtoformaatit. Johdanto Sovellusalueet Vaatimukset Raita- ja oliomalli Reaaliaikainen tiedonsiirto Erilaiset siirtoformaatit Vertailu

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

Digitaalisen median tekniikat. JSP ja XML

Semanttinen Web. Ossi Nykänen Tampereen teknillinen yliopisto (TTY), DMI / Hypermedialaboratorio W3C Suomen toimisto

Semanttinen Web. Ossi Nykänen. Tampereen teknillinen yliopisto (TTY), Digitaalisen median instituutti (DMI), Hypermedialaboratorio W3C Suomen toimisto

Paikkatiedon esittäminen XML-muodossa: Oracle Spatial, SVG ja GML

Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus

W3C: teknologia ja (tieto)yhteiskunta

W3C ja Web-teknologiat

3 Verkkosaavutettavuuden tekniset perusteet

AJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML

SAS:in uudet grafiikkaominaisuudet. Ari Toikka

Kurssin aloitus. AS XML-kuvauskielten perusteet Janne Kalliola

T Multimediatekniikka

W3C, Web-teknologiat ja XML

XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html;

SVG UUSI VANHA VEKTORIFOR- MAATTI

Digitaalisen median tekniikat Luento 1: Intro

XML prosessori. XML prosessointi. XML:n kirjoittaminen. Validoiva jäsennin. Tapahtumaohjattu käsittely. Tapahtumaohjattu käsittely.

Digitaalisen median tekniikat. Luento 3: CSS

Ohjeita informaation saavutettavuuteen

WWW-ohjelmoinnin kokonaisuus. WWW-OHJELMOINTI 1 Merkkauskielet. Merkkauskielten idea. Merkkauskielet (markup languages) Merkkauskielten merkitys

Mediaelementit. Mirja Jaakkola

Microsoft Visual Studio 2005

Hohde Consulting 2004

Code Camp for Girls. Sanna Nygård. Lokakuussa

Johdatusta selainohjelmointiin

Saavutettavuus, syksy 2004

4 Kommentoitu johdanto XML-maailmaan

Ulkoasun muokkaus CSS-tiedostossa

IT-OSAAJA, TIETOJENKÄSITTELYN ERIKOISTUMISOPINNOT

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

05/09/2007. Digitaalisen median tekniikat, s2007 HY/TKTL, XHTML osa 1. Harri Laine 1. XHTML-merkkauskieli. Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml

T Hypermediadokumentin laatiminen. Sisältö. Tavoitteet. Mitä on www-ohjelmointi? Arkkitehtuuri (yleisesti) Interaktiivisuuden keinot

Järjestelmäarkkitehtuuri (TK081702)

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Harri Laine 1

Johdanto. Agenda. Tuotantoprosessi. Historiallinen kehitys. Konsepti. Tuotantoprosessin vaiheet

Järjestelmäarkkitehtuuri (TK081702) Avoimet web-rajapinnat

Skaalautuva vektorigrafiikka mobiiliselaimissa. Mihkel Lind

DXL Library ja DXL-kielen olemus. Pekka Mäkinen SoftQA Oy http/

Pirkanmaan 11. ICT-BAROMETRI klo 11.30

Esteettömiä näkökulmia saavutettavuuteen

Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit

vero.fi: Hankinnasta ylläpitoon Miten varmistaa saavutettavuus?

HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.

WWW-PALVELUN KÄYTTÖÖNOTTO LOUNEA OY

Siirtoformaatit. Johdanto. Yleistä. Sovellusalueet. Eri formaatit. Käyttötarkoitukset

Digitaalisen median tekniikat xhtml - jatkuu

VisualStudio Pikaopas, osa 1: WEB sivujen suunnittelu

Rakenteisten dokumenttien jatkokurssi, syksy 2006

WCAG 2.1 Uudet kriteerit

TIES460 OPPIMATERIAALITUOTANTO,

Teknillinen korkeakoulu T Tietojenkäsittelyopin ohjelmatyö. Testitapaukset - Xlet

Opinnäytetyö Toni Hurskainen Porin ammattiopisto / Tekniikkaopisto Sähköala TT03

Miten Internet toimii. Jyry Suvilehto T Johdatus tietoliikenteeseen ja multimediatekniikkaan kevät 2013

12 Pari sanaa sovelluskehityksestä

HTTP-välityspalvelimen käyttö tapahtumien keräämiseen

Avoimet standardit ja arkistointi

Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne

Heikki Helin Metatiedot ja tiedostomuodot

Uloskirjautuminen Shibbolethissa

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

Johdatus rakenteisiin dokumentteihin

Pedacode Pikaopas. Web-sovelluksen luominen

Transkriptio:

3.27 "Tuotantoesimerkkien" rakenne ja viittaukset (1/2) Tietomalli ja tiedon esitystapa Käsityön määrä ja laatu Palvelinpään vaatimukset Saavutettavuusohjeistuksen ala! #1: Käsityö ope-kkortti.html ope-kkortti.css #2: Template-tekniikka ope-kkortti.css ope-kkortti-tiedot.txt ope-kkortti.php ope-kkortti_phpfunc.php 61

3.28 "Tuotantoesimerkkien" rakenne ja viittaukset (2/2) #3: (Monikanavainen) julkaisuprosessi ja julkaisuputket (nyt kaikki Web-sivuja) ope-kkortti.css ope-kkortti-tiedot.xml teacher-single-html.xsl out.html teacher-all-html.xsl out2.html teacher-table-html.xsl out3.html teacher-single-php.xsl out4.php ope-kkortti_phpfunc.php... 62

3.29 Jonosta (teksti) avaruuteen (grafiikka): SVG XHTML on "vain eräs" XML-tekstiformaatti Samalla perustekniikalla (XML) voidaan kuitenkin kuvailla (tai prosessoida) mitä tahansa tietoa - "yleisesti käytössä olevia" XML-tekstiformaatteja on satoja; "kuka tahansa" voi kehittää niitä lisää (mutta hyvän tekeminen...) Tyyppiesimerkki hyödyllisestä graafisten objektien (ja animaatioiden, yms.) kuvailuformaatista on SVG (Scalable Vector Graphics) Myös SVG-grafiikan saavutettavuuteen voi kiinnittää huomiota - käytännössä: objektirakenteen miettiminen, tekstivastineiden liittäminen objekteihin Kuvat: I. Herman 63

3.30 SVG-dokumentin rakenne SVG-dokumentti on kuten XHTMLdokumentti, mutta XHTML-sanaston ja hypertekstin yms. sijaan puhuu SVG-sanaston avulla grafiikasta, filttereistä, jne. <?xml version="1.0" encoding="iso-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="12cm" height="4cm" viewbox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="600" cy="200" rx="550" ry="175" fill="yellow" stroke="blue" stroke-width="20"/> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /> <text x="470" y="240" font-size="70">tekstiä</text> </svg> 64

3.31 Skriptatut dokumentit XML-sovellukset tarjoavat tyypillisesti mahdollisuuden liittää dokumentteihin (esim. XHTML tai SVG) myös tapahtumaohjattuja selaimessa ajettavia skriptejä (esim. Ecmascript [Javascript], VBScript) - esim. hiiren liike, napinpainallus, ajastettu tapahtuma DOM-manipulointi Yleensä skriptien käyttö heikentää dokumenttien saavutettavuutta (...koska skripti voi toimia "selaimen käyttöliittymän ohi" määrittelemättömyys) Skriptien käytölle on hyvin huonoja, huonoja ja melko hyviä perusteita - hyvin huono syy on turha erikoistehoste, esim. näyttöelementin liikuttelu - melko huono syy voi olla esim. käyttöliittymän hallittu laajentaminen, esim. fiksu statuskenttä (dokumentin loogista rakennetta rikkomatta) - ok- peruste on rajattu sovellus, jonka selain ja käyttäjäkunta on tarkkaan tunnettu (esim. Intranet); joskus käytetään myös esim. syötteiden esitarkistukseen, mutta vaatisi miettimistä (...mutta XForms) 65

3.32 Avaruudesta aikaan Saavutettavuuden luonne hieman muuttuu kun tarkastellaan ajassa muuttuvia esityksiä -...ts. kun "poistutaan kuolleen tekstin maailmasta" vrt. SVG-esimerkki "reversi"... Yleisessä tapauksessa käyttöliittymä voi koostua erilaisista mediaelementeistä jotka ovat aikariippuvaisia Saavutettavuus tarkoittaa tällöin - vaihtoehtoisia tiedon esitystapoja (vrt. tv-ohjelman tai elokuvan tekstitys huonokuuloiselle suomenkieliselle henkilölle vs. tekstitys kuurolle suomenkieliselle henkilölle) ja - mahdollisuutta "pysäyttää aika" (esim. näkövammainen henkilö tai henkilö joka on hidas lukemaan tai haluaa pysäyttää esityksen esim. taustatietojen haun ajaksi) 66

3.33 Synkronoitu multimedia ja SMIL Kuva: CSC Standardin synkronoidun multimedian koostamiseen määrittelee esim. SMIL (Synchronized Multimedia Integration Language) Edellyttää yleensä erillistä soitto-ohjelmaa (esim. RealPlayer) Myös SMIL sisältää saavutettavuuspiirteitä - vaihtoehtoinen sisältö, hakemistot,... -...mutta käytännössä soittoohjelman (käyttöliittymän) saavutettavuus sinänsä voi muodostua esteeksi 67

3.34 SMIL-dokumentin rakenne <?xml version="1.0"?> <!DOCTYPE smil PUBLIC "-//W3C//DTD SMIL 2.0//EN" "http://www.w3.org/2001/smil20/smil20.dtd"> <smil xmlns="http://www.w3.org/2001/smil20/language" xml:lang="en" title="picture-in-picture Television"> <head> <layout> <toplayout width="320px" height="240px"> <region id="main-video" left="0%" top="0%" width="100%" height="100%"> <region id="corner-video" left="67%" top="67%" width="33%" height="33%" fit="scale" soundlevel="0%"/> </region> </toplayout> </layout> </head> <body> <par> <video id="chameleon-video" src="chameleon.mpg" alt="an animated chameleon" region="main-video"/> <video id="earthquake-video" src="earthquake.mpg" alt="san Fransisco earthquake aftermath" region="corner-video" end="chameleon-video.end"/> </par> </body></smil> Kuva ja esimerkki: C. Forno 68

3.35 Lopuksi: tekniset menetelmät ja saavutettavuustyö Käyttäjien, käyttötapojen ja (käyttökelpoisten sovellusten) suunnittelumenetelmien tuntemus on saavutettavuustyön perusta, mutta...... se ei vielä yksin riitä: - kyse on myös esim. verkkosovellusten menetelmien tuntemisesta teknisellä tasolla (esim. monikanavajulkaisu) ja esim. XMLtekstiformaattien teknisten saav.ominaisuuksien osaamisesta (esim. SVG-dokumentin suunnittelu tekstivastineiden näkökulmasta)...muuten käy niin että juututaan puhumaan saavutettavuudesta yläkäsitteiden tasolla, tavalla, jolla ei ole merkittäviä vaikutuksia (verkko)sovelluksen loppukäyttäjän näkökulmasta -...eikä osata esim. arvioida tuotantotyön todellisia kustannuksia Huom. Standardoitujen XML-tekstiformaattien ja esim. näiden selaintoteutusten asteittainen kehittyminen (kenties eri tahdissa) asettavat erittäin suuria haasteita käytännön saavutettavuustyölle 69

3.36 Rajaus (tenttilukijoille tiedoksi) Keskeistä on nyt ymmärtää verkkosovellusten teknisen perustan ja tuotantotyön, sekä saavutettavuusohjeistuksen välinen suhde (muuten saav. jää yläkäsitteiden tasolla ohueksi) Saavutettavuusohjeita ei ole kirjoitettu tietotekniikan ammattilaisen näkökulmasta (olettaen esim. menetelmätason osaamista) - vrt. XHTML-perhe vs. HTML-perusteet ("kotisivun osaavat kaikki tehdä") Tentissä ei oleteta/vaadita seuraavien tekniikoiden yksityiskohtaista hallintaa - PHP, XML/XSL/XSLT, XForms, SVG, SMIL, tiedon formaali mallinnus...mutta koko homman idea ja riippuvuudet olisi syytä ymmärtää Asioita opetetaan tarkemmin osana esim. opintojaksoja HM ohjelmointi,rakenteiset dokumentit ja Rakenteisten dokumenttien jatkokurssi 70