Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/21/2014
|
|
|
- Jorma Jääskeläinen
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 Aulikki Hyrskykari Edellinen luento o sisältömalleista, attribuuteista globaalit attribuutit o <head> osan sisältö o <body> osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön ryhmittely (listat) Tällä kertaa o sisällön ryhmittelystä jatkoa - tekstitason semanttinen merkkaus o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla - kuvaformaateista - kuvankäsittelyohjelmista - kuvien koosta - kuvakartoista o video ja äänitiedostot verkkosivulla o CSS taustaa
2 <span> <em> <strong> <a> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> Ennen oli mahdollista määrittää muotoilukomentoja oesimerkiksi lihavoida <b> elementtiä käyttäen HTML5:ssä ei enää ole muotoiluun liittyviä elementtejä otekstinosia, sanaryhmiä, sanoja tai jopa yksittäisiä merkkejä voi edelleenkin merkata omerkkaus on kuitenkin aina semanttinen omerkattavaan tekstinosaan siis liittyy aina jokin semanttinen arvo, ts. jokin merkitys <span> on poikkeus Geneerinen phrasing elementti, joka kapseloi tekstiä jolle sinällään ei ole annettu merkitystä. Käytetään apuna merkitsemään tekstinosa, johon halutaan vaikuttaa CSSsäännöillä (vastaava elementti lohkotasolla on <div>). Sallittu sisältö: phrasing sisältö Sallitut attribuutit: globaalit attribuutit Sallittu äiti elementti: elementti, joka voi saada flow sisältöä <p> dropzone="<span class="default">copy</span>" "move" "link </p> [W3C] [W3C non normative] [MDN] [W3School]
3 Molemmat tarkoittavat jonkinlaista tekstinosan korostusta o saavat aikaan (useimmissa selaimissa) lihavoinnin tai kursivoinnin o niitä ei pitäisi käyttää ajatellen näiden muotoilujen aikaansaamista Elementin <strong> sisään kapseloidaan erityisen tärkeä tekstinosa o se, miten tärkeä tekstinosa eri ympäristöissä (graafisesti, tai esim. äänenä) vaihtelee asiakasohjelmasta riippuen. Elementin <em> sisään kapseloidaan tekstinosa jota halutaan painottaa o kyse on enemmänkin kielellisestä painotuksesta, ei niinkään tekstinosan tärkeydestä o lauseiden: Ensi kesänä menen Ruotsiin töihin tai Ensi kesänä menen Ruotsiin töihin merkitys on erilainen. o tulisi käyttää <em> elementtiä painotuksen ilmaisemiseen, ei <strong> elementti o vastaava logiikka pätee muihinkin tekstitason elementteihin: Linkit esitellään <a href= arvo > elementin avulla href attribuutin arvo kertoo siirtymiskohteen o o kertoo mistä osoitteesta selaimen sivulle haetaan sisältö osoite voi olla 1. suhteellinen (osoite samalla palvelimella oleviin tiedostoihin) 2. sivun sisäinen siirtymä 3. absoluuttinen
4 Linkki samalla palvelimella olevalle sivulle o osoite on hakemistopolku tiedostoon, tulkitaan viittaavan sivusta lähtien o polussa käytetään - hakemistojen (kansioiden) nimiä ja - pseudohakemistonimen.. avulla (yksi taso rakenteessa ylöspäin) <a href="../esimerkit/index.html"> <a href="kuvat/taulu.jpg"> <a href="../../index.html"> o viimeinen linkki viittaa - kaksi hakemistotasoa ylemmäs - index.html dokumenttiin - nimen voisi jättää pois, koska se on joka tapauksessa oletus: <a href="../../ > Kohta dokumentissa (johon halutaan siirtyä) o merkitään id attributin avulla Viitattaessa o tunnus kirjoitetaan muun osoitteen perään # merkin jälkeen <h1 id="luku 1">1 Luku</h1> <p> Lorem ipsum... </p>..... <a href="#luku 1">Luvun 1 alkuun</a>..
5 Osoite muodostuu o href attribuutin arvona jokin uri osoite o tiedonsiirtoprotokolla voi olla muukin, kuin www sivu o alussa annetaan tiedonsiirtoprotokollan nimi http, https, ftp, mailto, ldap, file, news, gopher tai telnet o esimerkiksi <a href="mailto:asiaspalvelu@yritys.fi">asiakaspalvelu@yritys.fi</a> Protokollan jälkeen palvelimen osoite o esim. // Mahdollisesti palvelimen tietoliikenneportti o tarpeen antaa vain, mikäli se on eri kuin käytettävän protokollan oletus o esimerkiksi http oletus on :80, ftp protokolla :20 sivun osoitteesta palvelimella mahdollisesta elementin tunnuksesta sivun sisällä <a href= US/docs/URIs_and_URLs >URI ja URL</a> <a href= >luennot</a> <a href= http 6 >linkit</a> <a href= >ilmainen sanakirja</a> viimeisessä esimerkissä tiedostonimi puuttuu, noudetaan o oletustiedosto index.html, index.php, index.pl tai index.asp, jos mitään näistä ei löydy o hakemiston sisällysluettelo (jos annettu oikeudet) ja ellei hakemistolle ole r oikeuksia o virheilmoitus, jos näyttäminen estetty ja oletustiedostoa ei ole
6 Esimerkin vuoksi katsaus kaikkiin <a> elementin attribuutteihin Mahdolliset attribuutit: href target hreflang media rel type syntaksi: <a target="_blank" "_self" "_parent" "_top"> Määrittelee mihin linkin osoitteessa oleva sisältö avataan _blank: uuteen selaimeen tai välilehteen _self: samaan selaimen osaan jossa linkki itse sijaitsee _parent: samaan selaimen osaan missä äiti elementti sijaitsee _top: jos linkki iframe:n sisällä, rakenteen ylimmälle tasolle aukaise <a href="osoite" target="_blank">linkki</a> uuteen välilehteen aukaise <a href="osoite" target="_self">linkki</a> tähän ikkunaan aukaise <a href="osoite" target="_parent">linkki</a> äitielementtiin aukaise <a href="osoite" target="_top">linkki</a> koko ikkunaan [W3C] [W3C non normative] [MDN] [w3school] syntaksi: <a hreflang="language subtag"> Hyperlinkin osoittaman dokumentin kieli o lista käytössä olevista tunnisteista löytyy osoitteesta: subtag registry <a href=" hreflang="fi">html5 kurssi</a> [W3C] [W3C non normative] [MDN] [W3School]
7 syntaksi: <a media="arvo"> Millä laitteella dokumentti on suunniteltu esitettäväksi o ts. mille laitteelle optimoitu o arvo voi olla jokin mediakyselyn antama mediatyyppi (media query) o + esitysympäristöä tarkentavia mediapiirteitä (media features). o mediatyyppivaihtoehtoja ovat tällä hetkellä - all, aural, braille, handheld, projection, print, screen, tty ja tv o valikoima laajennee laitteistojen kehittyessä - min width on esimerkki mediapiirteistä (media features) <a href="url" media="screen and (min width: 320px) >linkki</a> [W3C] [W3C non normative] [MDN] [w3school] syntaksi: <a rel= "void" "alternate" "author" "bookmark" "help" "license" "next" "nofollow" "noreferrer" "prefetch" "prev" "search" "tag"> Kuvaa viittaava dokumentin ja linkitetyn dokumentin (href) keskinäisen suhteent. mille laitteelle optimoitu <a href="osoite" rel="next">seuraava luku</a> [W3C] [W3C non normative] [MDN] [w3school]
8 syntaksi: <a type="ei negatiivinen luku"> Kertoo linkattavan dokumentin esitysmuodon, ns. MIME tyypin otällä hetkellä tieto on tiedotuksenomainen otulevaisuudessa sitä saatetaan käyttää eri tavoin - selain saattaisi esim lisätä pienen kaiutinikonin audio/wav linkkiin - MIME tyypit on esitelty IANAn sivuilla: types.. tässä asiaa <a href="url" type="image/png">havainnollistava kuva</a> osoittaa.. [W3C] [W3C non normative] [MDN] [w3school] tekstitason <small> <s> <cite> <q> <dfn> <abbr> <time> <code> pienellä painettua tekstiä, kuten esimerkiksi lakiteksti tai huomautukset vanhentunutta, epätarkkaa tai ei enää relevanttia tietoa, tyypillinen (ei pidä käyttää esittämään tietoa joka halutaan poistaa, tai korvata uudella tekstillä, siihen tarkoitukseen del elementti) viittaus johonkin teokseen, esimerkiksi kirjan, artikkelin, runon, musiikkiteoksen, TV ohjelman, elokuvan, teatteriesityksen, veistoksen tai taulun nimeen; kyseessä ei tarvitse olla teoksen esittely, myös ohimennen mainittu teoksen nimi voidaan antaa cite elementissä jostain muusta lähteestä lainattu teksti merkkaa kohdan, jossa termi määritellään merkkaa lyhenteen tai akronyymin; jos elementillä on title attribuutti, sen tulee sisältää lyhenteen selitys. merkkaa joko kellonajan (24 tuntinen) tai päiväyksen; aika tai päiväys annetaan datetime attribuutin arvona (ohjelmat voivat käyttää hyväkseen tätä ohjelmallisesti luettavissa olevaa esitystä) merkkaa tekstinosan ohjelmakoodiksi
9 tekstitason <var> <samp> <kbd> <sub> <sup> <i> <b> merkkaa muuttujan matemaattisessa lausekkeessa tai ohjelmakoodissa merkkaa tekstinosan ohjelman tulosteeksi. merkkaa tekstinosan joka kuvaa käyttäjän antamaa syötettä merkkaa alaviitteen, ts. osan tekstiä, jonka halutaan tulostuvan rivin perusviivaa alemmas ja muuta tekstiä pienemmällä merkkaa yläviitteen, ts. osan tekstiä, jonka halutaan tulostuvan korkeammalle ja muuta tekstiä pienemmällä merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on kursivoitu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia vaan esimerkiksi mielenalan, tunnelman tai muun merkityksen takia (esimerkiksi ajatus, sananlasku tai laivan nimi) merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on lihavoitu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia (esimerkiksi hakusana artikkelissa, dokumentin abstrakti tai henkilön nimi lehtiartikkelissa) tekstitason <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> merkkaa tekstinosan, joka poikkeaa ympäristöstään, ja jolle tyypillinen esitystapa on alleviivattu teksti; testinosa ei kuitenkaan eroa ympäristöstään tärkeytensä tai painotuksensa takia (voidaan esimerkiksi käyttää kiinan kielessä henkilön nimen alleviivaukseen tai merkkaamaan tekstinosaa, jossa on kirjoitusvirhe) merkkaa tekstinosan, joka merkitään tai korostetaan viittaustarkoituksessa, ts. sen oletetaan olevan tärkeätä jossain toisessa kontekstissa Ruby merkkien (itä aasialaisin merkein kirjoitettu) ääntämisohje, käytetään yhdessä <rt> elementin kanssa sisältää Ruby merkkien (itä aasialainen merkistö) ääntämisohjeen elementti, jonka avulla näytetään teksti (tyypillisesti sulkeet) selaimissa, jotka eivät tue Ruby merkkejä. merkkaa tekstinosan, joka on kaksisuuntaista tekstinkirjoitussuunnan (länsimainen/arabia); suunnan voi määrätä dir attribuutilla (normaalisti attribuutin oletusasrvo on ltr, mutta tässä yhteydessä oletusarvo on auto, ts. attribuutin puuttuessa suunta päätellään tekstiosan sisällön perusteella automaattisesti) muuttaa (käyttäen dir attribuuttia) tekstin oletuskirjoitussuunnan halutuksi
10 Jäsentävät taulukkomaista tietoa riveihin ja sarakkeisiin niitä ei saa käyttää sivun osien asemointiin! Taulukoiden käyttö tulee rajoittaa nimenomaan taulukoidun tiedon esittämiseen ja sivun ulkoasun määritykset, sivun eri osien asemointi tehdään CSS:n keinoin Esittelee taulukon. Sallittu sisältö: o <caption> <colgroup> <thead> <tfoot> <tbody> Sallitut attribuutit: o globaalit attribuutit o border Sallittu äiti elementti: elementti, joka voi saada flowsisältöä <table border="1"> <tr> <td>rivi 1 sarake 1</td> <td>rivi 1 sarake 2</td> </tr> <tr> <td>rivi 2 sarake 1</td> <td>rivi2 sarake 2</td> </tr> </table> [W3C] [W3C non normative] [MDN] [W3School]
11 Tärkeitä o sivuston keventäjinä o ilmeen luojina o usein myös informaatiota sisältävinä elementteinä Kuvia käytettäessä tulee muistaa kuvien tekijänoikeudet o voit tuoda sivulle vain itse ottamaasi kuvan, tai o kuvan, jonka käyttöoikeudet eksplisiittisesti sallivat sen käyttämisen sillä tavalla ja siinä yhteydessä, jossa aiot kuvaa käyttää Creative Commons lisenssoinnin kautta on saatavissa eri tavoin vapaita tai rajoitetusti käytettävissä olevia kuvia Googlen kuvahaku o voit rajoittaa koskemaan vain vapaasti käytettävissä olevia kuvia o tarkennettu haku (kohta: Käyttöoikeudet) Vaikka kuva olisikin vapaasti käytettävissä o kuvan yhteyteen jollain tavoin hyvä liittää mainita kuvan tekijästä o jos se vaan on löydettävissä. Joissain tilanteissa tarpeen piirtää tai luoda kuvia "lennossa oesimerkiksi jossain grafiikkaa sisältävässä nettipelissä o HTML5:ssä uusi <canvas> elementtin o<canvas> on nimensä mukaisesti taustakangas kuvalle oitse kuva luodaan tai tuodaan taustakankaalle esim. javascriptillä tai jollain muulla skriptikielellä Käsitellään tässä <img> elementin avulla sivulle tuotuja kuvia
12 Piirretään käyttäen geometrisia olioita o viivoja, suorakaiteita, ellipsejä, Bezier käyriä, jne. o vektrorigrafiikan iso etu on sen skaalautuvuus o se säilyy terävänä kaikissa kooissa laadun kärsimättä. Vektorigrafiikkaa käytetään o esim. kirjasinten toteutuksessa, ja o logojen ja julisteiden suunnittelussa Vektorigrafiikkaa tukevia piirto ohjelmilla o esim. Freehand, Illustrator o toimisto ohjelmien piirtotyökalut Kun kuva tuodaan sivulle <img> elementin avulla o vektorigraafisena luotu kuvakin muunnetaan useimmiten bittikarttakuvaksi o yleisimmät formaatit: jpeg, gif ja png formaatit o <img> elementin avulla on kuitenkin mahdollista tuoda myös vektorigraafisia kuvia (svg piirrokset tai yksisivuiset pdf tiedostot) Valokuvat ovat aina bittikarttakuvia (rasterigrafiikkakuvia) o bittikarttakuvat koostuvat pisteistä, kuvapikseleistä. o yksi kuvapikseli voi saada arvokseen jonkun värin o kuvan värisyvyys (kuinka monta väriä kuvassa on käytettävissä) o vaikuttaa suoraan kuvan kokoon Esim. o kuvan värisyvyys on 8 bittiä - kunkin kuvapikselin esittämiseen varataan 8 bittiä - kullakin kuvapikselillä voi olla 2 8 =256 toisistaan poikkeavaa väriä o värisyvyys on 24 bittiä o täysvärikuva o yksi kuvapikseli voi tällöin saada yhden 2 24 =16,7 miljoonasta värisävystä o kuvakoko kasvaa kolminkertaiseksi.
13 JPG o (Joint Photographic Expert Group) Suunniteltu tiivistämään jatkuvasävyisiä (continuoustone) väri tai harmaasävykuvia. o + säilyttää värit (täysvärituki, 24 bittiä) o + pakkaussuhteen voi määrätä portaattomasti o pakkaus vaikuttaa kuvan tarkkuuteen o ei tue läpinäkyvyyttä o ei tue animointia GIF o (Graphics Interchange Format) Sopiva tiivistysformaatti piirroksille, logoille ja muille kuville, joissa on käytössä vähän eri värejä. o värisyvyys 8 bittiä o kuvassa maksimissaan 256 väriä o gif pakkausalgoritmi patentoitu Unisys yhtiölle o + säilyttää kuvan tarkkuuden o + tukee läpinäkyvyyttä o + tukee animointia (peräkkäisten kuvien sitominen animaatioksi PNG o Portable Network Graphics GIF korvaajaksi kehitetty patenteista vapaa tiivistysformaatti o + säilyttää kuvan tarkkuuden, mutta tiivistys tehokkaampaa kuin GIF kuvissa o + tukee läpinäkyvyyttä o ei tue animointia o selainten vanhat versiot eivät tue tätä formaattia Yleisohje: PNG kuvia voi käyttää muuten paitsi isohkoissa, paljon pieniä väripintoja sisältävissä valokuvissa, jolloin JPG kuvat toimivat paremmin tai tilanteissa, jossa sivujen toimita vanhoilla selaimilla ovat syystä tai toisesta olennaista Bittikarttakuvan koko (dimensiot) mitataan pikseleissä o esimerkkinä "3 megapikselin" kamera o ottaa kuvia, jotka ovat 2048 pikselin levyisiä ja 1536 pikselin korkuisia o kuva tulostetaan paperille, kuvan fyysinen koko riippuu tulostuksessa käytetystä painojäljestä o paperille, siedettävällä painojäljellä 256 ppi (pixels per inch), tulostettuna 3M kuvan koko olisi noin 20 x 15 cm. Kuvaa ei kuitenkaan voisi näyttää sellaisenaan verkkosivulla o W3schoolin selaininformaatiosivulta nähdään, että resoluutio 1024x768 on tällä hetkellä se "kynnyskoko o lähes kaikilla w3school sivustolla kävijöillä vähintään sen kokoinen näyttö. o kamerasta saadun kuvan koko on siis huomattavasti sitä suurempi (lisäksi on hyvä huomioida, että w3school sivustolla tuskin käydään paljon pieninäyttöisiltä mobiililaitteilta) Näyttöjen tarkkuus vaihtelee välillä ppi o esimerkkivalokuvan fyysinen koko näytöllä olisi näin ollen noin 75 x 54 cm o aivan liian suuri näytöllä esitettäväksi o kuvaa on järkevä käydä pienentämässä jossain kuvankäsittelyohjelmassa ennen sivulle tuontia
14 Termiä käytetään kuvaamaan kahta asiaa o kuvan kokoa - esittämiseen käytettävää kuvapikselien lukumäärää, esim x 768 o tai esitystarkkuutta - pikselien lukumäärää tietyllä pinta alamitalla - esim. 72 ppi on tyypillinen näytön resoluutio Paperille tulostettuna kuvapikselien määrän kasvu voi lisätä kuvan tarkkuutta tai kuvan kokoa Näytöllä pikselien määrän lisäys tarkoittaa aina kuvan fyysisen koon kasvua. Läpinäkyvien kuvien avulla o on mahdollista luoda monimutkaisempia asetteluja o kuvan ääriviivan ei tarvitse olla suorakulmio, tai kuvia on helpompi sijoitella osittain päällekkäin. o GIF ja PNG tukevat läpinäkyvyyttä - kuvankäsittelyohjemissa voi määritellä läpinäkyvät alueet - GIF kuvissa voi yhden 256:sta väristä määritellä läpinäkyväksi, ts. yksi pikseli voi olla läpinäkyvä, tai sillä on väri - PNG kuvat tukevat ns. alpha läpinäkyvyyttä (alpha transparency), jolloin pikseli voi olla osittain tai kokonaan läpinäkyvä - PNG kuvien avulla on helpompi saada pehmeästi häpyviä reunoja tilanteissa joissa GIF kuvan reuna näyttäisi rosoiselta ja pykälikkäältä. o JPG ei tue läpinäkyvyyttä
15 Kuvankäsittelyn perusperiaatteet ovat samat riippumatta käyttämästäsi ohjelmasta o Adoben Photoshop ja sen hiukan halvempi serkku Fireworks suosituimmat o Photoshop on monipuolinen, kallis ja raskas ohjelma o Fireworks hinnaltaa noin kolmanneksen edellisestä, ketterämpi ja erityisesti suunniteltu verkkokäyttöön tulevien kuvien luontiin ja muokkaukseen o Alex J. Wendpap: Which is best for web design Muita o Paint Shop Pro monipuolinen, tehokas, maksaa muutaman kympin (Windows) o GIMP ilmainen open source ohjelma, myös monipuolinen ja tehokas, käyttö vaatii ehkä pientä totuttelua (Windows, Mac). o Paint.net monipuolisuudessaan verrattavissa edellisiin kahteen, ilmainen (Windows) o Acorn ja Pixemator muutaman kympin monipuolisia kuvankäsittelyohjelmia, ilmaiset kokeiluversiot (Mac) Kuva sisällytetään HTML5 dokumenttiin <img> elementin avulla <img src="kuvan verkko osoite" alt="seliteteksti" /> Seliteteksti alt="seliteteksti" on HTML5:ssä pakollinen o näytetään, jos kuvaa jostain syystä ei voida näyttää o esim. tekstipohjaisissa tai audioselaimissa o ruudunlukijat tukeutuvat selitetekstiin kuvan sisällön kuvaamiseksi. Kuva voi olla linkki <a href="#osa 2"> <img src="../img/ff arrow.png" alt="seuraava osa"> <a>
16 Kuva kannattaa o luoda suoraan sen kokoiseksi jona sen aikoo näyttää sivulla, ja o määrittää kuvan koko <a> elementissä height ja width attribuuttien avulla: <img src="kuva.png" width="200" height="165" alt="sanallinen selitys" /> Kuvan dimensiot o kannattaa aina kertoa eksplisiittisesti o silloin kuvan tuonti ei hidasta muun sisällön tuontia o eikä aiheuta ikävän näköistä uudelleenasettelua Ensisijaisesti kuva sivulle omassa koossaan o kuvan laadun säilymisen ja latautumisen nopeuden takia height ja width attribuutit o kuvan voi myös skaalata sivulle sopivaan kokoon o jos samaa kuvaa käytetään sivustolla eri kokoisena eri kohdissa o jos antaa vain leveyden tai korkeuden - toinen ulottuvuus määräytyy oikeassa suhteessa - ei vaaraa kuvan venymisestä tai litistymisestä ole - toisaalta edellä todettiin, että selain hyötyy siitä jos määrää molemmat dimensiot Koon tarkistus esim o kuvankäsittelyohjelmassa o selaimessa (helposti muutakin tietoa kuvasta)
17 Kuvaan voidaan "piilottaa kartta o määrittelee kuvan sisällä alueita o alueisiin voidaan liittää erikseen linkkiominaisuus Kartta: <map> elementin sisällä <area> koordinaatit määrittelevät halutut alueet o kuva ja kartta liitetään toisiinsa usemap attribuuttin arvon avulla <img src="img/pinnin aula.jpg" alt="pinnin aula" usemap="#kello ja kasvi" /> <map name="kello ja kasvi"> <area shape="circle" coords="205,18,13" href="kello.html" alt="kello" /> <area shape="rect" coords="64,67,95,95" href="kasvi.html" alt="viherkasvi" /> </map> Jokainen kartan area elementti määrittelee koordinaatein kuvan sisällä alueen, johon se liittyy Ks. esimerkit kurssisivuilta
Aulikki Hyrskykari Antti Sand
Aulikki Hyrskykari Antti Sand Edellinen luento o sisältömalleista, attribuuteista globaalit attribuutit o -osan sisältö o -osan sisältö - dokumentin rakenteen määrittely - dokumentin sisällön
JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 3/26/2013. Otsikko osan elementit: <base> <link> <script> <style> <title> <meta>
26.3.2013 Aulikki Hyrskykari sisällön ryhmittelyä lohkotasolla Tekstitason semanttisia elementtejä Linkit Taulukot Otsikko osan elementit: Dokumentin runko:
Aulikki Hyrskykari. JWT Hyrskykari, SIS, Tampereen yliopisto 3/20/2014
18.3.2014 Aulikki Hyrskykari Edellinen luento o historiaa tärkeää tietää koska vanhojakin sivuja tulee aina vastaan o HTML / DOM / CSS perusperiaatteet ja yhdessä toimiminen o elementtien syntaksista,
Aulikki Hyrskykari. CSS valitsimista CSS sääntöjen kohditaminen CSS värit Kuvista verkkosivulla
9.4.2013 Aulikki Hyrskykari CSS valitsimista CSS sääntöjen kohditaminen CSS värit Kuvista verkkosivulla Jaoetaan pseudovalitsimet edelleen kahteen alaluokkaan: 1. Pseudoelementtivalitsimet o liitetään
JWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 4/11/2013
9.4.2013 Aulikki Hyrskykari Kuvat verkkosivulla Video ja ääni verkkosivulla Mittayksiköt Tekstin muotoilu Kirjasimet Lokeromalli Bittikarttakuvan koko (dimensiot) mitataan pikseleissä o esimerkkinä "3
Kuvankäsittely. DigiReWork Annamari Mäenhovi Kati Nieminen
Kuvankäsittely DigiReWork 14.11.2017 Annamari Mäenhovi Kati Nieminen Työpajan sisältö Valokuvaamisen karkeat perusteet Kuvien ottamisen ja käyttämisen laillisuus Digitaalinen kuva Erityisvaatimukset alustoille
Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.
TAULUKKO 1 Taulukoiden avulla voidaan informaatio esittää havainnollisesti esimerkiksi palstoitettuna. Lisäksi voidaan sijoittaa eri elementit haluttuihin paikkoihin (taulukkotaitto). Taulukko luodaan
Kotisivuohjeet. Eteläpohjalaiset Kylät ry. Sivupohjien rakenne
Kotisivuohjeet Tässä ohjeessa käydään läpi kotisivujen tekemisen perusteet keskittyen html-koodiin ja sen ominaisuuksiin. Sivupohjissa ulkoasu ja rakenne on pääasiassa jaettu erilliseen css-tyylitiedostoon,
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
Taulukkolaskennan edistyneempiä piirteitä, Kuvakäsittelystä
Taulukkolaskennan edistyneempiä piirteitä, Kuvakäsittelystä Taulukkolaskennasta käsitellään edistyneempiä piirteitä harjoituksen H7 pohjalta Kuvankäsittelystä pikselit, väriresoluutio ja kuvan koko resoluutio,
Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
Kuva xhtml-sivulla. Mirja Jaakkola
Kuva xhtml-sivulla Mirja Jaakkola Sisältö 3. Kuva www-sivulla 4. img-elementti 5. Kuvan koko 6. Kuvan keskitys vaakasuoraan & kuvateksti 7. Kuvan tasaus pystysuoraan 8. Esimerkki: pystysuora tasaus eri
Taulukot. 1. Taulukon rakenne: ICT01D Elina Ulpovaara
Taulukot Taulukoita käytetään XHTML:ssä taulukkomuotoisen tiedon esittämiseen esim. tilastot, hinnastot jne sivun ulkoasun muotoiluun eli taittoon - voidaan korvata CSS:n asemointia käyttäen ICT01D 28.11.2005
Code Camp for Girls. Sanna Nygård. Lokakuussa 2015 www.frantic.com/codecamp/
Code Camp for Girls Sanna Nygård Lokakuussa 2015 www.frantic.com/codecamp/ HTML? HTML? HyperText Markup Language Ei ole nettisivua ilman HTML:ää Rakenteinen, hierarkkinen dokumentti Vain rakenne ja sisältö,
Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
Digitaalisen median tekniikat xhtml Harri Laine 1
Digitaalisen median tekniikat xhtml 30.4.2004 Harri Laine 1 XML-pohjainen HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan Tyypillisessä HTML-dokumentissa
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 5/8: Mediaelementit Edellinen
Kuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
Juha-Pekka Ruuska 17.01.03 BITTIKARTTAGRAFIIKKA, BITTIKARTTAKUVAT ELI RASTERIKUVAT...2
BITTIKARTTAGRAFIIKKA, BITTIKARTTAKUVAT ELI RASTERIKUVAT...2 VEKTORIGRAFIIKKA...2 BITTIKARTTAKUVAT...2 BITTIKARTTAKUVAN PIKSELIKOKO...2 BITTIKARTTAKUVAN RESOLUUTIO...2 RGB-KOLMIVÄRIMALLI...3 BITTIKARTTAKUVANVÄRISYVYYS
Laajuus 5 op Luennot: 12 x 2t Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus
Laajuus 5 op Luennot: 12 x 2t 11.3.2014 29.4.2014 Harjoitukset: 7 viikkoharjoitusta harjoitusten tekemiseen saatavissa apua 2 ryhmää / harjoitus Lähiopetuksen jäkeen harjoitustyö ja tentti Aulikki Hyrskykari
Gimp JA MUUT KUVANKÄSITTELYOHJELMAT
Gimp JA MUUT KUVANKÄSITTELYOHJELMAT Daniela Lund Ti07 A241227 Linux-järjstelmät 01.12.2009 MIKÄ ON KUVANKÄSITTELYOHJELMA? Kuvankäsittelyohjelma on tietokoneohjelma, jolla muokataan digitaalisessa muodossa
LUENTO 6 KUVANKÄSITTELY
LUENTO 6 KUVANKÄSITTELY TIEY4 TIETOTEKNIIKKATAIDOT SYKSY 2017 JUHANI LINNA ANTTI SAND 17.10.2017 LUENTO 6 17.10.2017 Tällä luennolla Taustaa harjoitukseen YH3b Miksi? Digitaalinen kuva Kuvankäsittelyohjelmat
Etikettien suunnittelu. Kuka ja millä välineillä? Tiina Myllymäki
Etikettien suunnittelu Kuka ja millä välineillä? Tiina Myllymäki Myyvä etiketti syntyy tilaajan ja suunnittelijan yhteistyönä Toimeksiannon sisällön määrittelyä varten käydään keskustelu työn taustasta
Muita kuvankäsittelyohjelmia on mm. Paint Shop Pro, Photoshop Elements, Microsoft Office Picture Manager
Missio: 1. Asentaminen 2. Valokuvien tarkastelu, tallennus/formaatit, koko, tarkkuus, korjaukset/suotimet, rajaus 3. Kuvan luonti/työkalut (grafiikka kuvat) 4. Tekstin/grafiikan lisääminen kuviin, kuvien/grafiikan
H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
Hajautetut käyttöliittymät. Kuvat www-sivulla
Hajautetut käyttöliittymät Kuvat www-sivulla Perusteita Pikselien väri näytöllä muodostuu punaisesta, sinisestä ja vihreästä valosta, jotka erilaisina yhdistelminä muodostavat kaikki muut värit ja yhdessä
KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA
KUVANKÄSITTELY THE GIMP FOR WINDOWS OHJELMASSA Ohjeistuksessa käydään läpi kuvan koon ja kuvan kankaan koon muuntaminen esimerkin avulla. Ohjeistus on laadittu auttamaan kuvien muokkaamista kuvakommunikaatiota
KUVANKÄSITTELYN TEORIAA
KUVANKÄSITTELYN TEORIAA BITTIKARTTAKUVA Pikseli Resoluutio Bittisyys Värimallit RGB ja CMYK Kuvan tallennusmuotoja VEKTORIGRAFIIKKA Pikseli Bittikarttakuva muodostuu pienistä vierekkäisistä neliöistä eli
Kuvankäsi*ely 1. Digitaaliset kuvat ja niiden peruskäsi3eet. Kimmo Koskinen
Kuvankäsi*ely 1 Digitaaliset kuvat ja niiden peruskäsi3eet Kimmo Koskinen Mitä kuvankäsi3ely on? Digitaalisten kuvien monipuolista muokkausta: - korjailua: roskien poisto, punaiset silmät jne - muuntelua:
MOBISITE-TYÖKALUN SISÄLTÄMÄT TOIMINNOT
MOBISITE-TYÖKALU MobiSite on työkalu matkapuhelimeen soveltuvan mobiilisivuston rakentamiseen. AIMO-järjestelmän jatkuvasti päivittyvä päätelaitetunnistus tunnistaa useimmat puhelinmallit ja mukauttaa
TEEMA 2 TAULUKKODATAN KÄSITTELY JA TIEDON VISUALISOINTI LUENTO 4
TEEMA 2 TAULUKKODATAN KÄSITTELY JA TIEDON VISUALISOINTI LUENTO 4 TIEY4 Tietotekniikkataidot Kevät 2019 Juhani Linna 27.3.2019 Taustaa harjoituksiin 5 ja 6: 1. Harjoituksen 6 esittely 2. Taulukkolaskenta
Internetsivujen perusrakenne. Html-dokumentin keskeiset elementit ja attribuutit
Internetsivujen perusrakenne Html-dokumentin keskeiset elementit ja attribuutit Websivu html-dokumentti Internetsivun rakenne kuvataan html-kielellä Html-dokumentti on tekstimuotoinen tiedosto, jossa luetellaan
H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki 13.9.2006
H T M L eli kuinka laadin itselleni päheät kotisivut Janne Käki 13.9.2006 Mikä ihmeen HTML? HyperText Markup Language hypertekstiä eli toisiinsa linkitettyjä dokumentteja merkintäkieli, perustuu erilaisiin
Proseduraalinen dokumentti: sisältö, rakenne ja ulkoasu yhdessä, esim. worddokumentti
1 XHTML - aloitus Sisältö: s.2 Taustaa s.4 Elementin rakenne s.7 XHTML dokumentti s.8 DOCTYPE s.11 html s.13 head s.14 meta s.16 title s.17 link s.18 style s.19 body s.22 Lohko- ja inline-elementit s.23
XHTML - harjoitus. Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa. Tiedoston tallennus notepad (muistio) ohjelmassa:
XHTML - harjoitus Tehtävä1: Tee xhtml tiedosto käyttäen notepad (muistio) ohjelmaa Tiedoston tallennus notepad (muistio) ohjelmassa: Jokaisen XHTML-dokumentin tulisi alkaa XML-määrittelyllä(engl.XML-prologue),
JWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari
JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti
2. PEHMEÄ XHTML XRAJAHTML
Luennot 1. Intro 2. PEHMEÄ XHTML XRAJAHTML Dokumentin (matalan tason) rakenne DOCTYPE ja merkistökoodaukset Elementtien syvät rajat 3. CSS 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys &
Aulikki Hyrskykari Antti Sand
Aulikki Hyrskykari Antti Sand Edellinen luento o historiaa tärkeää tietää koska vanhojakin sivuja tulee aina vastaan o HTML / DOM / CSS perusperiaatteet ja yhdessä toimiminen o elementtien syntaksista,
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 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan
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 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne selkeämmin erotettu toisistaan
Digitaalisen median tekniikat xhtml
Digitaalisen median tekniikat xhtml 11.9.2007 Harri Laine 1 XML-pohjainen Viimeisin versio XHTML 1.1 vuoden 2007 alussa. HTML:n korvaaja Rakenne HTML:ää paremmin määritelty Muotoilu ja sisällön rakenne
HTML & CSS. HTML (HyperText Markup Language) Antti Koivisto. ! HTML on sivujen kuvauskieli.
HTML & CSS Antti Koivisto HTML (HyperText Markup Language)! HTML on sivujen kuvauskieli.! Se ei ole ohjelmointikieli.! HTML on merkintäkieli, joka koostuu monista merkintä tägeistä ().! Voidaan
HTML5 video, audio, canvas. Mirja Jaakkola
HTML5 video, audio, canvas Mirja Jaakkola Video webbisivulla HTML5 mahdollistaa videon lisäämisen webbi-sivuille ilman plugineja. Yleisimmät videoformaatit webissä: Mpeg-4 eli H.264 Ogg Flash Perustuu
Local Disk (C:)/Documents and Settings/OMATIETOKONEApplication Data/Adobe/Adobe PDF/Settings
Käytössämme olevat ohjelmat: Adobe Indesign CS5.5 (Mac/PC) Adobe Photoshop CS5.1 (Mac/PC) Adobe Illustrator CS5.1 (Mac/PC) Adobe Acrobat X Pro (Mac/PC) Microsoft Office Aineistosuositus Suosittelemme aineiston
Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi.
Yleisohjeet mainosaineistoille Aineistot tulee toimittaa aineistoaikataulun ja -ohjeiden mukaisesti ennen kampanjan alkua osoitteeseen: verkkomainonta@almamedia.fi. Kun lähetät aineistoja sähköpostitse,
SeaMonkey pikaopas - 1
SeaMonkey pikaopas SeaMonkey on ilmainen ja yksinkertainen www-sivujen teko-ohjelma. Sillä on kätevää koostaa yksinkertaisia sivuja ilman, että täytyy tietää jotain HTML-koodista. Tämä opas esittelee sivuston
MAASEUDUN SIVISTYSLIITON GRAAFINEN OHJEISTO 1.1. Maaseudun Sivistysliiton graafinen ohjeisto 1.1
Maaseudun Sivistysliiton graafinen ohjeisto 1.1 Hahmo Design Oy 2.3.2018 Sisällysluettelo Ydinilme MSL:n tunnus 3 Tunnuksen käyttö 4 Tunnusoriginaalitiedostot 5 Värit 6 Typografia 7 2 ydinilme > tunnus
L A TEX, pdfl A TEX ja grafiikka
L A TEX, pdfl A TEX ja grafiikka Ari Lehtonen Perinteinen TEXin tiedostotyyppien kulku on tex dvi ps pdf pdf PdfL A TEXissa välivaiheen dvi-tiedosto ohitetaan kokonaan, eli tex-tiedostosta tuotetaan suoraan
URL-osoitteiden suunnittelu
Tim Berners-Lee: Jos olisin arvannut kuinka suosittu Webistä tulee, olisin yrittänyt keksiä URL-osoitteiden alkuosalle jonkin toisen muodon. http-alkuosa on hankala erityisesti puhelinkeskusteluissa. URL
Verkkosivut perinteisesti. Tanja Välisalo 11.2.2009
Verkkosivut perinteisesti Tanja Välisalo 11.2.2009 WWW-sivujen vieminen omaan kotisivutilaan yliopiston mikroverkossa https://salasana.jyu.fi Klikkaa painiketta Activate WWW Klikkaa painiketta Activate
8 Kuvat, sovelmat ja objektit
97 Tässä kappaleessa käsitellään kuvien ja sovelmien (Applets) liittämistä HTMLdokumenttiin. Kuvia on periaatteessa olemassa kolmea päätyyppiä, tekstin sisäisiä, tekstin ulkoisia ja kolmanneksi kuvakarttoina
JOKKY OSK. Logo ja graafinen ohjeistus. Jaana Salo. JEDU / Piippola, Media 15A
JOKKY OSK Logo ja graafinen ohjeistus Jaana Salo JEDU / Piippola, Media 15A 12.2.2016 JOKKY osuuskunnan logo TAUSTAA -Värit samat, kuin JEDU:n logossa -Osuuskunnan logo kuvastaa verkostoa ja osuuskunnan
Tekstieditorin käyttö ja kuvien käsittely
Tekstieditorin käyttö ja kuvien käsittely Teksti- ja kuvaeditori Useassa Kotisivukoneen työkalussa on käytössä monipuolinen tekstieditori, johon voidaan tekstin lisäksi liittää myös kuvia, linkkejä ja
Valmiustaitoja biokemisteille
Valmiustaitoja biokemisteille jatkuu 3-Harjoituskerta Kuvan käsittely Microsoft PowerPointilla, kuvan tuominen Wordiin ja kuvatekstin lisääminen Ma 11.2.2019 Valmiustaitoja biokemisteille - Aikataulu Ryhmä
HTML ja CSS. Tästä se lähtee: portfolio-sivusto. Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot.
HTML ja CSS Tästä se lähtee: portfolio-sivusto Sivuston pääkansio, jonka sisällä on kaikki sivustoon kuuluvat alikansiot ja tiedostot. index.html Sivuston pääsivu, joka avautuu selaimeen ensimmäisenä sivujen
Editorin käyttö. TaikaTapahtumat -käyttöohje
Editorin käyttö TaikaTapahtumat -käyttöohje Yleistä ohjelmasta etaika-järjestelmän HTML-moduuli sisältää tekstieditorin, joka on monipuolinen apuväline tehtäessä materiaalia sivustolle (esim. tapahtumakohtaiset
http://www.microsoft.com/expression/
Verkkojulkaisuharjoitus1 TAVOITE Harjoituksen tarkoituksena on opiskella käyttämään verkkojulkaisueditoria (Microsoft Expression Web) ja käynnistämään verkkosivu internetissä. VERKKOSIVUEDITORIN KÄYTTÖOHJEITA
6 Linkit ja ankkurit 69
69 HTML mahdollistaa käytännöllisen tavan rakenteisten dokumenttien esittämiseen, mutta mikä erottaa sen muista merkkauskielistä, on sen hypertekstiominaisuudet ja mahdollisuus toteuttaa interaktiivisia
Kun suunnitelma on valmiina niin itse sivuston rakentaminen on jo helpompaa. (jatketaan tätä rakentelu vaiheessa.
WWW-sivun teko Niko Rautava 2006 http://koti.mbnet.fi/nrautava/ Kannattaa aloittaa www-sivun suunnittelu ihan paperille laittamalla siihen seuraavia tietoja: - sivujen määrä - alasivut (määrä, ulkonäkö)
Cascading Style Sheets
Cascading Style Sheets CSS - Cascading Style Sheets tyylikuvauskieli suunniteltu HTML:ää varten 1996, oma syntaksi CSS1 (1996), CSS2 (1998), CSS Mobile Profile CSS3 (tuleva) selaintuki nykyään hyvä, mutta
Ulkoasun muokkaus CSS-tiedostossa
Ulkoasun muokkaus CSS-tiedostossa Nellin ulkoasun muokkaus CSS-tiedostossa Lähes kaikki on muokattavissa css-tyylitiedosta käsin. Jokaiselle kieliversiolle on oma tyylitiedostonsa: www_v_fin/metalib.css
CSS - tyylit. 13.11.2000 Seppo Räsänen
CSS - tyylit 13.11.2000 Seppo Räsänen Sivu 2 1 CSS-tyylit Dynaaminen HTML tai DHTML on standardi, joiden käyttöä tukevat uusimmat Netscapen ja Microsoftin selaimet. DHTML:n ominaisuuksia ovat tyylitiedostot
Elisa Kirja. PDF e-kirjojen käsittelyohjeet
Elisa Kirja PDF e-kirjojen käsittelyohjeet Elisa Oyj ja yhteistyökumppanit 2 (5) Ulkoasun ja sisällön muokkaus E-kirja julkaisu ei saa koostua monesta PDF-tiedostosta. Liitä PDF-tiedostot tarvittaessa
Hämeenlinnan Offset-Kolmio Paino Oy:n aineisto-ohjeet
Hämeenlinnan Offset-Kolmio Paino Oy:n aineisto-ohjeet Sivun koko Painotuotteen sivun koon tulee olla taitto-ohjelmassa määritetty sivun lopulliseksi kooksi. Tarvittavat leikkuuvarat (Bleed), vähintään
Tiedostomuodon valitseminen kuville
Kuvan lisääminen sivulle Valitse työkaluriviltä Lisää Kuva tiedostosta painike 1. Ruudulle aukeaa sekä Kuva-ikkuna että Valitse tiedosto ikkuna 2. Selaa Valitse tiedosto ikkunassa esiin se kuva, jonka
5 Taulukot 51. Onnettomuusprosentti Vahingonkorvaukset/onnettomuus Stor Ab mk Liten Ab 4
51 Taulukon avulla voidaan esittää tietoa helposti ymmärrettävässä muodossa. Taulukko koostuu riveistä (vaakasuoraan) ja sarakkeista (pystysuoraan). Taulukko koostuu soluista. Yleensä taulukossa on otsikkosoluja,
Sisältö. XML, XHTML ja CSS XML XML. XML:n ja HTML:n ero. XML kieliä XML XHTML CSS XSL. T Hypermediadokumentin laatiminen 2002
, XHTML ja CSS T-111.361 Hypermediadokumentin laatiminen 2002 XHTML CSS XSL Sisältö EXtensible Markup Language W3C Recommendation helmikuu 1998 SGML:n osajoukko Standard Generalized Markup Language Kevyempi
Tähtitieteen käytännön menetelmiä Kevät 2009 Luento 4: Ohjelmointi, skriptaus ja Python
Tähtitieteen käytännön menetelmiä Kevät 2009 Luento 4: Ohjelmointi, skriptaus ja Python 31. tammikuuta 2009 Ohjelmointi Perusteet Pythonin alkeet Esittely Esimerkkejä Muuttujat Peruskäsitteitä Käsittely
HTML5 -elementit jatkuu
HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 8/8: Esteettömyys Edellinen osa-alue
1 www-sivujen teko opetuksessa
RäsSe, Tekniikka/Kuopio Sivu 1 1 www-sivujen teko opetuksessa 1.1 Yleistä Mitä materiaalia verkkoon? Tyypillisesti verkossa oleva materiaali on html-tiedostoja. Näitä tiedostoja tehdään jollakin editorilla
ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu
ETAPPI ry JOOMLA 2.5 Artikkeleiden hallinta ja julkaisu ETAPPI ry JOOMLA 2.5 Sivu 1(16) Sisällysluettelo 1 Joomla! sivuston sisällöntuotanto... 2 2 Artikkeleiden julkaisu sivustolla... 4 3 Artikkelin julkaisemista
Verkkojulkaiseminen Minna Väisänen. HTML5-tehtävä
Verkkojulkaiseminen Minna Väisänen HTML5-tehtävä Kirjoita Dreamweaverissa oheisen nettisivun koodi. Lisää xx-kohtiin omat tietosi. Kuvan nimi on joki.jpg. Ensin tehdään sivusto ja sitten yksittäinen sivu.
CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.
CSS1 CSS (Cascading Style Sheets) CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia. Esim.
DIGI PRINT. Aineistovaatimukset ja aineiston siirto
DIGI PRINT Aineistovaatimukset ja aineiston siirto Glass Jet - Digitaalipainotekniikka Tulostettavan kuvan maksimikoko 2400 x 4000 mm. 6 perusväriä ja hiekkapuhallusta jäljittelevä etch-väri. Väreistä
Gimp perusteet. Riitta, Jouko ja Heikki
Gimp perusteet Riitta, Jouko ja Heikki Jos haluat vaihtaa ohjelman kielen (asentaa oletuksena saman kuin käyttöjärjestelmä): käyttöjärjestelmän lisäasetuksista lisätään uusi ympäristömuuttuja:lang arvo:en
Digitaalisen median tekniikat. Luento 3: CSS
Digitaalisen median tekniikat Luento 3: CSS Luennot 1. Intro 2. XHTML 3. CSS Box Model Selektorit Esimerkkiä yms. 4. JavaScript 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus 7. Palvelinohjelmointi
Mitä direktiivi käytännössä velvoittaa?
Mitä direktiivi käytännössä velvoittaa? Web Content Accessibility Guidelines - Verkkosisällön saavutettavuusohjeet Timo Övermark Tapio Haanperä http://papunet.net/saavutettavuus WCAG 2.1 - Verkkosisällön
NÄYTTELYPOSTERI. 1) 2)
1 (6) NÄYTTELYPOSTERI Yleiskuvaus Posterin tulee sisältää Posteri on tietotaulu, juliste. Posteri esittelee ryhmätyön tuloksen: idea (mitä on tuotettu) argumentaatio (miksi on päädytty kyseiseen ideaan)
Digitaalisen median tekniikat css tyylimääritykset
Digitaalisen median tekniikat css tyylimääritykset 18.9.2007 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
Graafinen ohjeisto
Graafinen ohjeisto 241018 Yhteisötunnus Yhteisötunnuksen esittely Maa- ja metsätalousministeriö / Graafinen ohjeisto 241018 / 5 Maa- ja metsätalousministeriön tunnuksen ja koko uuden ilmeen idea lähtee
G R A A. Kaarinan Pojat ry:n graafinen ohjeistus
G R A A FI O HJ E IS Kaarinan Pojat ry:n graafinen ohjeistus N E N T US Logo Kaarinan Pojat ry:n logon tulee näkyä kaikissa KaaPon materiaaleissa, myös joukkueiden tuottamissa materiaaleissa. Logoa käytetään
WCAG 2.1 Uudet kriteerit
WCAG 2.1 Uudet kriteerit Web Content Accessibility Guidelines 2.1 Verkkosisällön uudet saavutettavuuskriteerit (WCAG 2.1) Kimmo Sääskilahti Tero Pesonen WCAG:n versiot 1.0 toukokuu 1999 2.0 joulukuu 2008
CMS Made Simple Perusteet
CMS Made Simple Perusteet 1. Hallintaan kirjautuminen Kirjautumisruutuun pääset lisäämällä osakaskuntasi www-osoitteen perään liitteen /admin. Käyttäjätunnuksena toimii onkija ja salasanana postitse saamasi
Tiedostojen siirto ja FTP - 1
Tiedostojen siirto ja FTP Tiedonsiirto Sibelius-Akatemian hakemistosi ja jonkun muun koneen välillä (esim. kotikoneesi) Taustaa FTP on lyhenne sanoista File Transfer Protocol. Se on yhteystapa jolla siirretään
Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle
Suomalainen Verkkokauppa: Ohjeita verkkokaupan ulkoasun suunnittelijalle Pyydämme suunnitelijaa ottamaan huomioon seuraavat ohjeet verkkokaupan ulkoasun suunnittelua koskien. Näin vältämme lisäkustannukset
WWW-Sivustojen suunnittelu. Miten WWW toimii. Suunnittelun lähtökohdat 14.10.2010
WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi
WWW-Sivustojen suunnittelu
WWW-Sivustojen suunnittelu Miten WWW toimii Web-selain hakee Web-sivun HTML-kielisen kuvauksen Sivuun liittyvät kuvat (jpeg, gif, png) Sivuun liittyvät muut elementit Palvelimen URL-osoite esim. http://www.metropolia.fi
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö
Artikkelien muokkaaminen sekä sisältöeditorin peruskäyttö Sisällysluettelo Kirjautuminen ja ylläpito...3 Kirjautuminen sivustolle...3 Ylläpitovalikko...3 Artikkeleiden muokkaaminen...4 Artikkelin asetukset...4
ARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 7/8: Tekninen toteutus Edellinen
Digitaalisen median tekniikat css tyylimääritykset
Digitaalisen median tekniikat css tyylimääritykset 26.3.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
Digitaalisen median tekniikat css tyylimääritykset Harri Laine 1
Digitaalisen median tekniikat css tyylimääritykset 30.4.2004 Harri Laine 1 Sisällön ja ulkoasun erottaminen toisistaan tavoiteltavaa sama sisältö pitäisi voida esittää erilaisilla alustoilla esim. esittää
Bioenergia.fi VERKKOPALVELUKOHTAINEN OHJE 03.09.2009
Bioenergia.fi VERKKOPALVELUKOHTAINEN OHJE 03.09.2009 Osoite Puhelin Fax Pankkiyhteys 1/19 Sisällysluettelo Yleistä...3 Ilmoitetut tapahtumat ja uutiset...3 Ilmoita tapahtuma ja Ilmoita uutinen sivujen
Sivuston nopeus. (vanhentumista ei ole määritetty)
Sivuston nopeus 93 / 100 Nopeus Harkitse korjaamista: Hyödynnä selaimen välimuistia Asettamalla umpeutumispäivän tai enimmäisiän staattisten resurssien HTTP-header-osissa neuvot selainta lataamaan aiemmin
Mobiili ennen desktoppia!
Liiketoiminta kehittyy, kehity sinäkin! Mobiili ennen desktoppia! Helsinki, Tampere, Turku, Tukholma, Göteborg www.tieturi.fi Copyright Tieturi 10.1.2011 1 Kysymys Pitääkö web-sivuston näyttää täsmälleen
SISÄLLYS JOHDANTO 5. KUVAT 1. TUNNUS - SANOMA 6. VERKKOSIVUT 2. TUNNUS - KÄYTTÖ 7. TUOTEKORTIT JA ESITTEET. 2.1 Suoja-alue. 7.
GRAAFINEN OHJEISTO SISÄLLYS JOHDANTO 1. TUNNUS - SANOMA 2. TUNNUS - KÄYTTÖ 2.1 Suoja-alue 2.2 Eri osien käyttö 2.3 Minimikoot 5. KUVAT 6. VERKKOSIVUT 7. TUOTEKORTIT JA ESITTEET 7.1 Tuotekortit 7.2 Esitteet
Grafiikka julkaisuun. Tietohallintokeskus Markku Könkkölä Sisällys
Grafiikka julkaisuun Tietohallintokeskus Markku Könkkölä 7.4.2011 Sisällys Kuva tietokoneella Kaaviot ja piirrokset vektorimuodossa Vektorigrafiikan muokkaus (InkScape, Illustrator ) Valokuvat bittimuodossa
HTML perusteita (ei julkiseen jakeluun)
HTML perusteita (ei julkiseen jakeluun) Tämä opas pyrkii selvittämään joitain verkkoviestintään liittyviä käsitteitä ja antamaan perustiedot HTML- kielestä sekä musiikin WWW- julkaisusta. Internetissä
QR-koodit INNOSTAVAA HAUSKAA PALJON KÄYTTÖTAPJA HELPPOA ILMAISTA MOTIVOIVAA
QR-koodit QR-koodit INNOSTAVAA HAUSKAA PALJON KÄYTTÖTAPJA HELPPOA MOTIVOIVAA ILMAISTA QR-koodi paljon tietoa Koodin avulla pääsee nopeasti halutulle verkkosivulle tai esim. YouTube-videoon ilman osoitteen
Kuvaruudun striimaus tai nauhoitus. Open Broadcaster Software V.20. Tero Keso, Atso Arat & Niina Järvinen (muokattu )
Kuvaruudun striimaus tai nauhoitus Open Broadcaster Software V.20 Tero Keso, Atso Arat & Niina Järvinen (muokattu 28.11.2017) OBS 1 (12) Sisällysluettelo Mikä on OBS... 2 Ohjelman perusasetukset... 2 Tarvittavat