XML & CSS. WWW-sovellus??

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

Cascading Style Sheets

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

Cascading Style Sheets

Digitaalisen median tekniikat. Luento 3: CSS

selector { CSS property: value; property2: value; Code Camp for Girls Sonja Jaakkola & Sanna Nygård

WWW-sivujen Verkkosivujen ulkoasu (CSS)

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

Johdatusta selainohjelmointiin

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

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

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

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

HTML ja CSS. T WWW-palvelun suunnittelu Mikko Pohja

CSS - tyylit Seppo Räsänen

WWW-sivujen Verkkosivujen ulkoasu (CSS)

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

Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1

Digitaalisen median tekniikat css tyylimääritykset

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

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

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

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

Tikon Web-sovellukset

Code Camp for Girls. Sanna Nygård. Lokakuussa

1. Lähteet 2 2. Linkkejä 2 3. Tuntitehtävä Esipuhe Mikä ihmeen XML? Historiaa Välineet Hello World! 6 9.

Ulkoasun muokkaus CSS-tiedostossa

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

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

Ulkopuolisen tyylitiedoston käyttö

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

Johdatus XML teknologioihin

Timo Rautio. Mainosnäyttöjen etähallintaohjelmisto TosiMedia Ay:lle

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

10 Nykyaikainen WWW-arkkitehtuuri

Ohjeita informaation saavutettavuuteen

ARVO - verkkomateriaalien arviointiin

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

Digitaalisen median tekniikat css tyylimääritykset

2. PEHMEÄ XHTML XRAJAHTML

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

M. Merikanto 2012 XML. Merkkauskieli, osa 2

3 Verkkosaavutettavuuden tekniset perusteet

Tikon Web-sovellukset

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

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

3.11 HTML-dokumentin ulkoasu?

Aulikki Hyrskykari. CSS Taustaa CSS syntaksi CSS Valitsimet Kuvat verkkosivulla

Visma Fivaldi. Ohjeet Java web startin ja HTML5-työkalun aktivointiin

CSS. Historia. Tämä materiaali vastaa kysymyksiin kuten:

Rakenteiset dokumentit Mitä hyötyä niistä on?

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

Kopseptisuunnittelu Verkkomultimedia ICT1tn004

Digitaalisen median tekniikat. JSP ja XML

Verkkosivut perinteisesti. Tanja Välisalo

8 Hypermedian suunnitteleminen

ARVO - verkkomateriaalien arviointiin

Korkeakoulujen prosessipalvelin: mallintajan palvelinohje Versio 0.2

WWW-Sivustojen suunnittelu

WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat

Johdatus rakenteisiin dokumentteihin

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

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

Tikon Web-sovellukset

XML johdanto, uusimmat standardit ja kehitys

Written by Administrator Wednesday, 05 October :06 - Last Updated Monday, 17 October :28

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

HTML5 -elementit jatkuu

XML / DTD / FOP -opas Internal

Saavutettavuus > Tapio Haanperä Saavutettavuusasiantuntija tel

Verkkosivujenulkoasu

PÄIVITÄ TIETOSI OPTIMASTA! KOOSTE

valitsin on useimmiten html-elementti, jolle tyyli halutaan luoda

WWW-sivujen Verkkosivujen ulkoasu (CSS)

P e d a c o d e ohjelmointikoulutus verkossa

W3C ja Web-teknologiat

Kurssin hallinta -työväline

Selaimen asetukset. Toukokuu (7) Selaimen asetukset Tikon Oy. All rights reserved.

W3C ja Web-teknologiat

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

Validaattorit o HTML 5 validaattori: o CSS validaattori: validator/validator.html.

Web sovelluksen kehittäminen sähkönjakeluverkon suojareleisiin

3 Verkkosaavutettavuuden tekniset perusteet

TYPO3 - Open Source Enterprise CMS

Kotisivut helposti - osa 4

W3C ja alueellinen standardointi

in condition monitoring

Notepad++ on ilmaisohjelma ja sen voi ladata osoitteesta:

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

Esimerkki: ulkoisen tyylitiedoston valinta median mukaan

ruovedellä pohjois-hämeessä. lepounit.com (yritys) lepo.net (oma)

Sivuston tiedotcite4me.org

LC Profiler. - Oppimisympäristön keskeisiä piirteitä. Antti Peltonen, LC Prof Oy

NTG CMS. Julkaisujärjestelm. rjestelmä

XML-merkkaus. Merkkidata, prosessointikomennot, kommentit

Extensible Stylesheet Language (XSL)

WinOodin käyttö VDI-ympäristössä

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Sivuston tiedotqbooksupportpho nenumber.com

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

Transkriptio:

XML & Näkökulmia WWW-ympäristön sovelluksiin ja käyttöliittymiin ILKKA PALOLA Citec Information WWW-sovellus?? Informaationhallinta, julkaisutoiminta Verkkoviestintä ESIMERKKEJÄ käyttäjistä ja käyttökohteista: - Web-kirjakaupat ~ E-commerce - Verkkolehdet - Portaalit ~ SoneraPlaza - Virtuaaliyhteisöt ja -yritykset intranet, extranet... KÄYTTÖLIITTYMÄ SOVELLUS TIETOKANTA

WWW-sovellus?? Esimerkki: Projektitietokanta yrityksen sisäinen informaationhallintajärjestelmä WWW-selain WWW-selain (Netscape/IE) (Netscape/IE) WWW-selain WWW-selain (Netscape/IE) (Netscape/IE) HTTP/HTML/XML WWW Palvelin OHJELMA (perl) KÄYTTÖLIITTYMÄ SOVELLUS TIETOKANTA MySQL & XML Cascading Style Sheets = kaskadiset tyylisäännöt 1 (W3C Recommendation) 2 (W3C Recommendation) Asiasisältö (XML/HTML) Rakenne ja asiasisältö Selain Esitysmuodon kuvaus (/XSL) Ulkoasu (fontit, sijoitus, taustat, välistykset, värit, taittoelementit jne.)

& XML Selain Selain XML XML XML XML XML XML XML & XML :n (ja XML:n) etuja: standardi tapa ulkoasun kuvaukseen järjestelmä/laitteistoriippumaton mahdollistaa sisällön muokkauksen ja uudelleenkäytön helpottaa informaation ylläpitoa verkkoystävällinen merkkaus matala soveltamiskynnys monijulkaiseminen

& XML: monijulkaiseminen WWW CDROM Eri näkymät ja näkökulmat - käyttäjien mukaan - laitteistojen mukaan - käyttötark. mukaan a a a a a a a a a Paper Kieliversiot Intranet & XML ongelmia ja rajoituksia :n syntaksi poikkeaa XML:n syntaksista yksi uusi kieli opeteltavaksi Pelkästään ulkoasun kuvaamista ei rakenteen muokkausta (~XSL) Muokkaamiseen ja toiminnallisuuteen tarvitaan ohjelmointikieli Selainten XML& tuki? 1 siedettävä, 2 osittain mediatuki?? Grafiikkatuki?? Taulukoiden käsittely?? elementtien asettelu?? automaattinen numerointi?? tulostuksen ohjaus??

& XML VIHJEET JA VINKIT Hanki lähdemateriaali http://www.w3.org/tr/ Opiskele dokumentin rakenne Tarkista tyylisääntöjen syntaksi validaattorilla http://jigsaw.w3.org/css-validator/ Testaa tyylisääntöjen toimivuus eri käyttöympäristöissä (Unix, Mac, Win) eri mediassa (print, screen...) eri selaimilla (Mozilla, IE, Opera?) Valitse itsellesi sopivimmat työkalut. Parhaiten oppii kokeilemalla. Speksit ovat hakuteoksia eivät oppaita & XML ~ XUL Mozilla-selaimen käyttöliittymän (valikot, painikkeet, ikkunat jne. ) kuvaamiseen käytettävä kieli Netscape Communicator 5.0 perustuu tälle tekniikalle. XUL-tiedosto XML-syntaksin mukainen Käyttöliittymän ulkoasu kuvataan :llä. Käyttöliittymän toiminnallisuus ohjelmoidaan JavaScriptillä KÄYTTÖLIITTYMÄ

& XML ~ XUL SOVELLUSIDEOITA palvelinkohtaiset käyttöliittymät profiloidut käyttöliittymät esim. Lapset Lisätietoja: http://www.mozilla.org/ KÄYTTÖLIITTYMÄ & XML ~ XUL

& XML ~ XUL & XML ~ XUL

& XML ~ XUL Käyttöliittymä XUL Selain Sisältö ja ulkoasu XML & XML elementti määrite (attribuutti) <author class= company >Ilkka Palola</author> alkutunniste sisältö lopputunniste Elementtien rakenneosat

& XML tyylisääntö author { color: navy; font-family: Arial, sans-serif; } selektori deklaraatiot Tyylisääntöjen rakenneosat & XML Tyylisäännöstön liittäminen XML-dokumenttiin <?xml-stylesheet href= tyyli.css type= text/css?> Tyylisäännöstön liittäminen (X)HTML-dokumenttiin <link rel= stylesheet href= tyyli.css type= text/css > <?xml-stylesheet href= tyyli.css type= text/css title= Basic Style?> <?xml-stylesheet href= tyyli2.css type= text/css title= Plain Style alternate= yes?> <?xml-stylesheet href= tyyli3.css type= text/css title= Fancy Style alternate= yes?>

& XML Tyylisäännöstön kohdemedian määritteleminen <link rel= stylesheet href= tyyli.css media= xx type= text/css > xx = All Aural Handheld Print Projection Screen... kaikki mediatyypit puhesyntetisaattorit kannettavat (esim. kännykkä) Tulostimet Siirtoheittimet Tietokoneen näyttö & XML esitelma.xml <?xml version="1.0"?> <?xml-stylesheet href="start.css" type="text/css" title="start"?> <presentation xmlns:html='http://www.w3.org/tr/rec-html40'> <header> <title>:n käyttö XML-sovelluksissa</title> <author> <name>ilkka Palola</name> <company>citec Information</company> <address>silmukkatie 2</address> <postalcode>65200 Vaasa</postalcode> <tel>06 3240 704</tel> <fax>06 3240 800</fax> <email>ipa@citec.fi</email> <www>http://www.citec.fi/</www> </author> </header> <chapter> <title>1 JOHDANTO</title> <para>tekstipohjaisessa informaationhallinnassa XML:ään kohdistuvat odotukset ovat suuria. Stadler (1998) vakuutti XML:n tuovan helpotusta wwwylläpitäjien elämään ja vastaavasti XML:n sanotaan yksinkertaistavan SGML:n moniulotteista ja vaikeatulkintaista maailmaa. Myös eri yritykset ja yhteisöt ovat jo pitkään. /* Start View Style */ presentation { display: block; background-color: white; color: black; margin: 1em; font-family: Times, serif; font-size: large; } header:before { display: block; content: url(citec.gif); text-align: center; margin-top: 1em; margin-bottom: 2em; } header, author, chapter, subchapter { display: block; } tyyli.css

& XML Lähdemateriaalia, lisätietoa Ilkka Palola, Citec Information ipa@citec.fi http://www.citec.fi/ http://www.doczilla.com/ World Wide Web Consortium http://www.w3.org/ Mozilla Organisation http://www.mozilla.org/ MozillaZine http://www.mozillazine.org/ Professional Style Sheets for HTML and XML Frank Boumphrey (1988)