Helsingin yliopisto/tktl XML-metakieli k2013 CSS XML-dokumenttien käsittely. XML-dokumenttien käsittely

Samankaltaiset tiedostot
Helsingin yliopisto/tktl XML-metakieli CSS XML-dokumenttien käsittely. XML-dokumenttien käsittely

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

Digitaalisen median tekniikat. JSP ja XML

Digitaalisen median tekniikat. Luento 3: CSS

Cascading Style Sheets

Helsingin yliopisto/tktl XML-metakieli XSL-FO XSL - extensible stylesheet language XSL-FO

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

Helsingin yliopisto/tktl XML-metakieli XSL-FO XSL-FO. XSL-FO sivut

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

Muotoilutoliot. XSL:n muotoiluoliot. Muotoiluolio. Muotoilualueet. Lohkoalueiden sijoittelu. Muotoilualueiden sijoittelu. Rivialueiden ominaisuuksia

Code Camp for Girls. Sanna Nygård. Lokakuussa

XML / DTD / FOP -opas Internal

2. PEHMEÄ XHTML XRAJAHTML

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

XSL Formatting Objects

3 Verkkosaavutettavuuden tekniset perusteet

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

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

Digitaalisen median tekniikat css tyylimääritykset jatkuu

Digitaalisen median tekniikat css tyylimääritykset jatkuu Harri Laine 1

XML & CSS. WWW-sovellus??

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

Ulkopuolisen tyylitiedoston käyttö

HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

Kylänetti projektin sivustojen käyttöohjeita Dokumentin versio 2.10 Historia : 1.0, 1.2, 1.6 Tero Liljamo / Deserthouse, päivitetty 25.8.

Johdatusta selainohjelmointiin

M. Merikanto 2012 XML. Merkkauskieli, osa 2

XML kielioppi. Elementtien ja attribuuttien määrittely. Ctl230: Luentokalvot Miro Lehtonen

CSS - tyylit Seppo Räsänen

WWW-sivujen Verkkosivujen ulkoasu (CSS)

XML rakenteen suunnittelu. Jaana Holvikivi

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Digitaalisen median tekniikat xhtml

Digitaalisen median tekniikat xhtml Harri Laine 1

P e d a c o d e ohjelmointikoulutus verkossa

Lyhyt kertaus osoittimista

Ctl160 Tekstikorpusten tietojenkäsittely p.1/15

HTML5 -elementit jatkuu

6 XML-työkalut 1. 6 XML-työkalut

CSS - aloitus. ICT01D syksy 2005 Mirja Jaakkola, Helia. Ulkopuolisen tyylitiedoston käyttö

Luento 11: XSL-FO & SVG

Digitaalisen median tekniikat xhtml

Ulkoasun muokkaus CSS-tiedostossa

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

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

KAPPALEMUOTOILUT. Word Kappalemuotoilut

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

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

WWW-sivujen Verkkosivujen ulkoasu (CSS)

Hohde Consulting 2004

Pythonin Kertaus. Cse-a1130. Tietotekniikka Sovelluksissa. Versio 0.01b

Luento 5. Timo Savola. 28. huhtikuuta 2006

Extensible Stylesheet Language (XSL)

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta:

Kotisivujen teko. Jan Lindholm Kirkkonummen kansalaisopisto Syksy koodari.eu jsbin.com

DOORSin Spreadsheet export/import

Kuvat. 1. Selaimien tunnistamat kuvatyypit

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

Rakenteisen oppimateriaalin tuottaminen verkossa esimerkki Rhaptos. Antti Auer Koordinaattori, HT Jyväskylän yliopisto Virtuaaliyliopistohanke

Helsingin yliopisto Tietojenkäsittelytieteen laitos XML-metakieli (2011) Harri Laine 1. Jäsennys ja sarjallistaminen

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

1 Yleistä Web-editorista Web-editori -dokumentin luominen Pikatoimintopainikkeet Tallenna... 3

Sosiaalihuollon asiakirjastandardi kehittyy. Konstantin Hyppönen Erikoissuunnittelija Tietojenkäsittelytieteen laitos Kuopion yliopisto

Verkkosivujenulkoasu

SÄHKE-hanke. Abstrakti mallintaminen Tietomallin (graafi) lukuohje

MITÄ JAVASCRIPT ON?...3

WWW-sivujen Verkkosivujen ulkoasu (CSS)

Editorin käyttö. TaikaTapahtumat -käyttöohje

Cascading Style Sheets

StanForD-XML. Juha-Antti Sorsa, Tapio Räsänen, Vesa Imponen

Digitaalisen median tekniikat. Esteettömyys ja käytettävyys

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

Ajatus kaiken taustalla

Johdatus XML teknologioihin

Digitaalisen median tekniikat. Esteettömyys ja käytettävyys Harri Laine 1

linux: Ympäristömuuttujat

Paikkatiedot metsäkeskussanomissa soveltamisohjeet

Katsotaan tarkemmin seuraavaksi: Reunus (border) Täyte (padding) Marginaali (margin)

Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä

Lisätehtävät. Frantic 2015 sivu 1

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

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

TIEDEJUTTUKURSSI FM VILLE SALMINEN

Vaasan yliopiston toimintaa tukevat informaatiopalvelut ovat käytettävissä WWW:n kautta.

Muutokset suoran sanoma-asioinnin webservicepalvelun

Tiedonlouhinta rakenteisista dokumenteista (seminaarityö)

Suunnitteluvaihe prosessissa

UML-kielen formalisointi Object-Z:lla

ESIKATSELU, TULOSTAMINEN, TUNNISTEET

Hohde Consulting 2004

CSS. Tekstin muotoilua

Aktivoi dokumentin rakenteen tarkistamiseksi piilomerkkien näyttäminen valitsemalla valintanauhasta Kappale-kohdasta painike Näytä kaikki.

1. Lohkon korkeus ja leveys

ARVO - verkkomateriaalien arviointiin

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

Transkriptio:

XML-dokumenttien käsittely XML-dokumenttien käsittely XML-kielten yleisrakenne mahdollistaa karkean rakennetarkistuksen suorittamisen XML-dokumenteille niitä tallennettaessa tai käyttöön otettaessa. Kielen määrittelyn (DTD, Schema, joku muu tekniikka) käyttö lisää tarkistusmahdollisuuksia samoissa tilanteissa. Dokumentin laatinen voi tapahtua Jonkin sovellusohjelman toimesta, jolloin ohjelma tarjoaa käyttöliittymän dokumentin sisällön toimittamiseen Käyttäjä ei tyypillisesti tiedä tuottavansa xml-tietoa XML-rakenteen kanssa puuhastelu on ohjelmien tehtävä eikä käyttäjille tarjota mitään mahdollisuuksia päästä käsiksi sisäiseen esitysmuotoon vaikka se olisikin XML-muotoista Tiedon esittäminen ja haku samojen ohjelmien kautta Onko tarvetta järjestelmien sisäisen XML:n käsittelyyn muussa tilanteessa kuin siirrossa toiseen ohjelmaan, jolloin voidaan tarvita muunnos? Dokumentin laatinen voi tapahtua Käyttäjälle näkyvästi Rakennetietoa hyödyntävä XML-editori / tekstieditori XML-rakenteen tuottaminen muusta aineistosta esim. relaatiotietokannasta (ohjelmallisesti) XML-muoto (puu tai tekstuaalinen) ei sovellu hyvin ihmisten luettavaksi Dokumentit tai niistä poimittu tieto on saatettava ymmärrettävämpään esitysmuotoon Usein ei ole tarvetta esittää koko aineistoa vaan vain osia siitä 1 2 XML-aineiston esittäminen XML ja Esittäminen Erillinen esitysmuodon räätälöimällä tuottava sovellusohjelma, esim. SVG-grafiikkaa ei saa aikaan yleiskäyttöisillä esitystyökaluilla kullekin kielelle omat ohjelmat Muunnostyökalut yhdestä muodosta toiseen esimerkiksi resepti-kielestä xhtml:ään Jollekin esitysvälineelle tarkoitetut esitystavan määrittelytekniikat, esimerkiksi 3 XML-kieliselle dokumentille ei ole yleiskäyttöistä esitystapaa Osa selaimista osaa näyttää XML-tiedon hierarkkisena rakenteena Myös HTML:ssä on pyrkimyksenä erottaa sisältö ja esittäminen, vaikka sivujen elementteihin liittyykin jonkinlainen esitystulkinta Uusimmissa HTML- ja XHTML-versioissa esitystapaan liittyviä attribuutteja on poistettu elementeistä esitys on tarkoitus kuvailla (Cascading Style Sheet) määrityksillä. :ää voi käyttää myös XML-datan esitystavan 4 kuvaamiseen XML ja XML ja :stä on useita versioita: Cascading Style Sheets, level 1, W3C Recommendation 17 Dec 1996, revised 11 Jan 1999 (http://www.w3.org/tr/rec-1) Cascading Style Sheets Level 2 Revision 1 ( 2.1) Specification, W3C Recommendation April 2008 (http://www.w3.org/tr/2008/rec-2-20080411/) Viimeisin working draft: http://www.w3.org/tr/2 3: muutamasta moduulista virallinen suositus, working draft versioita ja osittaisia suosituksia -sääntöjä voidaan liittää XML-dokumenttiin xmlstylesheet tyyppisinä käsittelyohjeina <?xml-stylesheet href="my-style.css" type="text/css"?>... rest of document here... Ohjeita voi olla useampia, mutta niiden on kaikkien oltava dokumentissa ennen ensimmäistä varsinaista elementtiä. Ohjeilla kytketään dokumenttiin ulkoisia -sääntötiedostoja Muista kytkentätavoista ei ole virallisia määrityksiä 5 6 1

XML ja ja XML -sääntö koostuu kahdesta osasta: kohdemäärittelystä (selector) mihin elementteihin muotoiluohjeita sovelletaan Säännössä voidaan antaa monta kohdetta muotoiluohjeista (block) miten kohteen elementit muotoillaan Sääntöjen määrittämät muotoilut periytyvät puussa solmulta sen jälkeläisille Pintamääreet periytyvät Taustamääreet tyypillisesti eivät Periytymistä voidaan säätää 7 8 * Mikä tahansa elementtityyppi E E F Tyyppiä E oleva elementti Tyyppiä F oleva elementti edellyttäen, että sillä on E tyyppinen esi-isä E>F Tyyppiä F oleva elementti kun se on E- tyyppisen elementin lapsielementti E:first-child Tyyppiä E oleva elementti kun se on vanhempansa ensimmäinen lapsi E:hover E:lang(c) E + F Tyyppiä E oleva elementti kun, sitä 'käpälöidään' (muut tila-attribuutit eivät XML:n tapauksessa tule oikein kyseeseen (:active ehkä) Tyyppiä E oleva elementti, jos sen kieli (määritelty tai peritty) on c. esim. osoite:lang(fi) Tyyppiä F oleva elementti edellyttäen, että sitä välittömästi edeltävä velisolmu on E-tyyppinen 9 10 E[foo] Tyyppiä E oleva elementti, jos sillä on attribuutti foo E:first-line Tyyppiä E olevan elementin ensimmäinen tekstirivi E[foo="bar"] Tyyppiä E oleva elementti, jos sen foo attribuutilla on arvo "bar". E:first-letter Tyyppiä E olevan elementin ensimmäinen teskstimerkki E[foo~="bar"] Tyyppiä E oleva elementti, jos arvo "bar" sisältyy sen foo-attribuutin arvolistaan (arvot erotetaan toisistaan tyhjätilamerkeillä) E:before E:after Heti ennen tyyppiä E olevaa elementtiä Heti tyyppiä E olevan elementin jälkeen E#myid Tyyppiä E oleva elementti kun sen IDtyyppisen attribuutin arvo on "myid" 11 12 2

-sääntöjen kohdemäärittelyosalla pyritään samaan kuin XPath-polkumääreillä eli valitsemaan kohde-elementtejä XPath:sta puuttuvat pseudo-luokat (:hover, jne) ja pseudoelementit (:first-line), muutoin kieli on ilmaisuvoimaisempi miksi sama organisaatio tuottaa samaan tarkoitukseen useita tekniikoita? :n muotoilumääreet voi karkeasti jakaa rakenteellisiin miten elementti suhtautuu ympäristöönsä tekstin ulkoasuun vaikuttaviin fontti, merkkikoko, väri, korostukset sijoitteluun vaikuttaviin ladontamalli, tilanhallinta tietoa generoiviin erityisesti XML:ssä, järjestysnumerot yms. 13 14 Rakenteellisilla muotoilumääreillä vaikutetaan siihen, miten elementti suhteutetaan ympäristöönsä Merkittävin määre tässä suhteessa on display Tällä määritellään miten ladonnassa tulisi suhtautua elementtiin Lohkot (block) käsitellään erillisinä ladontalaatikoina, jotka perusladonnassa ladotaan allekkain Lohkoille voidaan määritellä marginaaleja reunuksia tyhjää tilaa reunuksen ja sisällön väliin taustaväri tai -kuva laatikon koko jopa normaaliladonnasta poikkeava sijoittelu 15 16 Upotetut elementit (inline) ladotaan osaksi tekstivirtaa. Niille voi määritellä pelkästään tekstin ulkoasuun liittyviä muotoiluja, mutta ei lohkojen yhteydessä mainittuja asioita, yllä oleva 'inline' voisi olla upotettu elementti Upotetut lohkot ovat lohkon ja upotetun elementin välimuoto Ladotaan osaksi tekstivirtaa, mutta lohkomäärityksiä voidaan käyttää esimerkiksi sisältöä ympäröivän tyhjän tilan määrittelyyn. Normaalista poikkeavaa ladontanmallia ei näille voi määritellä. 17 ohitettu elementti (display:none) on elementti, jota ei oteta lainkaan mukaan ladontaan lista-alkio (list-item) on lohkoelementti joka on tarkoitettu ladottavaksi peräkkäin järjestetyn listan alkioksi taulukko (table), taulukkorivi (table-row), taulukkoalkio (table-cell) sekä 7 muuta taulukkoelementtiä voivat tulla kyseeseen jos halutaan esittää xml-tietoa taulukkona 18 3

Esim. <prices> <prod><code>abc10</code><price>23.50</price></prod> <prod><code>abc20</code><price>53.50</price></prod> <prod><code>cop10</code><price>213.00</price></prod> </prices> Sääntöjä: prices {display:table} prod {display:table-row} code {display:table-cell} price {display:table-cell} abc10 abc20 cop10 23.50 53.50 213.00 Normaalista poikkeavassa ladonnassa ladontalaatikoille voidaan määritellä absoluuttinen sijoittelu (annetaan paikka) vain pienillä aineistoilla, tai aineiston osilla suhteellinen sijoittelu (siirretään jonkin verran normaalipaikastaan) lähinnä tehosteina leijuva sijoittelu, jolloin normaalisti allekkain olevat laatikot saadaan rinnakkain esimerkiksi palstoitus 19 20 Normaali float:left Tekstin ulkoasuun voidaan vaikuttaa säätämällä fontteja kirjainkokoa korostuksia tekstin ja taustan värejä kirjainten välejä sanojen välejä reunojen tasauksia 21 22 Tyhjätilamerkkien käsittelyä voi myös säätää white-space määreellä normal: karsitaan ja tiivistetään. kaikki korvataan välilyöntimerkeillä, alusta ja lopusta karsitaan, välisekvenssit korvataan yhdellä pre: jätetään kaikki, rivejä ei pätkitä nowrap: muuten kuten normaali, mutta rivinvaihdot jätetään. pre-wrap: jätetään kaikki, mutta pätkitään ylipitkät rivit pre-line: tiivistetään, jätetään rivinvaihdot ja pätkitään ylipitkät Tiedon generoinnille on XML:n muotoilussa enemmän käyttöä kuin html:n tapauksessa Tägeihin liittyvä semantiikka pitäisi saada mukaan esitykseen. 23 24 4

content määreellä voidaan määritellä tulostettavan elementin sisältö puhelin::before {content:"puh."} Ennen puhelinnumeroa teksti "puh." Sisältö voi olla: merkkijono, kuten yllä uri, jolloin sen osoittama sisältö, esim. kuva, otetaan mukaan attr(x), missä x on kohde-elementin attribuutin nimi, ja sen arvo tulostetaan 25 laskuriarvo counter-reset alustaa counter-increment kasvattaa counter() tulostaa body { counter-reset: section; /* Create a section counter */ } h1::before {counter-increment: section; /* Add 1 to section */ content: Section " counter(section) ". ";} h1 { counter-reset: subsection; /* Set subsection to 0 */ } h2::before {counter-increment: subsection; content: counter(section) "." counter(subsection) " ";} Huom: jos samassa tilanteessa tulostetaan ja asetetaan laskuri käytetään aina asetuksen jälkeistä arvoa. 26 ja mediatyypit ja mediatyypit xml-stylesheet käsittelyohjeeseen voidaan liittää media attribuutti ilmaisemaan, mitä mediaa ohjeet koskevat Jos samassa tiedostossa on useaa mediaa koskevia ohjeita nämä erotetaan @mediamääreellä @media print { em{font-style:italic} } @media screen { em{font-style:bold} } Mediatyyppejä on useita: näyttö, kirjoitin, kännykkä, äänitulostus, Kirjoitintulostuksen sivun ominaisuuksia lähinnä marginaaleja voi muotoilla @page määreellä Sivunvaihtojen säätelyn on tarjolla attribuutit page-break-before page-break-after page-break-inside arvot: auto. always, avoid, left, right esim: product {page-brake-before:always} 27 28 ja XML ja XML :n käyttö datan esittämisen kuvaamiseen Ei pysty vaihtamaan elementtien järjestystä, paitsi pienissä absoluuttisesti ladottavissa tilanteissa Mukaan otettavaa aineistoa voi valikoida vain rajoitetusti Elementin tyypin ja attribuuttiarvojen avulla Ei pysty hyödyntämään valmiiksi määriteltyjä muotoiluohjeita (hyviä paketteja, mutta eri elementtinimillä) Tuki vajavaista Katso esimerkki http://www.cs.helsinki.fi/u/laine/xml/k08/recipes3.xml http://www.cs.helsinki.fi/u/laine/xml/k08/recipe1.css WWW-materiaalia W3C-kotisivut www.w3.org/style// -spesifikaatiot level 1, 2.1 CR, 3 WD XML-tyylitiedostoista www.w3.org/tr/xml-stylesheet/ (2010) 29 30 5