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

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

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

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

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ä

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ö

Johdatus XML teknologioihin

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

Digitaalisen median tekniikat. JSP ja XML Harri Laine 1

Ohjeita informaation saavutettavuuteen

CSS aloitus. CSS Cascade Stylesheet Mirja Jaakkola

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.

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

Verkkosivut perinteisesti. Tanja Välisalo

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

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

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.

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

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)

NTG CMS. Julkaisujärjestelm. rjestelmä

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)