Aulikki Hyrskykari Antti Sand
|
|
|
- Juuso Hakala
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 Aulikki Hyrskykari Antti Sand
2 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
3 <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 o esimerkiksi lihavoida <b>-elementtiä käyttäen HTML5:ssä ei enää ole muotoiluun liittyviä elementtejä o tekstinosia, sanaryhmiä, sanoja tai jopa yksittäisiä merkkejä voi edelleenkin merkata o merkkaus on kuitenkin aina semanttinen o merkattavaan tekstinosaan siis liittyy aina jokin semanttinen arvo, ts. jokin merkitys - <span> on poikkeus
4 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]
5 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:
6 Linkit esitellään <a href= arvo >-elementin avulla href-attribuutin arvo kertoo siirtymiskohteen o kertoo mistä osoitteesta selaimen sivulle haetaan sisältö o osoite voi olla 1. suhteellinen (osoite samalla palvelimella oleviin tiedostoihin) 2. sivun sisäinen siirtymä 3. absoluuttinen
7 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="../../ >
8 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>..
9 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>
10 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 osoite palvelimella mahdollinen elementin tunnus sivun sisällä <a href= >URI ja URL</a> <a href= >luennot</a> <a href= http >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
11 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]
12 syntaksi: <a hreflang="language-subtag"> Hyperlinkin osoittaman dokumentin kieli o lista käytössä olevista tunnisteista löytyy osoitteesta: <a href=" hreflang="fi">html5-kurssi</a> [W3C] [W3C non-normative] [MDN] [W3School]
13 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]
14 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]
15 syntaksi: <a type="ei-negatiivinen luku"> Kertoo linkattavan dokumentin esitysmuodon, ns. MIME-tyypin o tällä hetkellä tieto on tiedotuksenomainen o tulevaisuudessa sitä saatetaan käyttää eri tavoin - selain saattaisi esim lisätä pienen kaiutinikonin audio/wav linkkiin - MIME-tyypit on esitelty IANAn sivuilla: tässä asiaa <a href="url" type="image/png">havainnollistava kuva</a> osoittaa.. [W3C] [W3C non-normative] [MDN] [w3school]
16 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
17 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)
18 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
19 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
20 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]
21 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ä.
22 Joissain tilanteissa tarpeen piirtää tai luoda kuvia "lennossa o esimerkiksi jossain grafiikkaa sisältävässä nettipelissä o HTML5:ssä uusi <canvas>-elementtin o <canvas> on nimensä mukaisesti taustakangas kuvalle o itse kuva luodaan tai tuodaan taustakankaalle esim. javascriptillä tai jollain muulla skriptikielellä Käsitellään tässä <img> elementin avulla sivulle tuotuja kuvia
23 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)
24 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 Jos värisyvyys on 24 bittiä - täysvärikuva - yksi kuvapikseli voi tällöin saada yhden 2 24 =16,7 miljoonasta värisävystä - kuvakoko kasvaa kolminkertaiseksi.
25 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
26 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
27 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.
28 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 (1 bit, 0 tai 1) - PNG kuvat tukevat ns. alpha läpinäkyvyyttä (alpha transparency), jolloin pikseli voi olla osittain tai kokonaan läpinäkyvä (8 bit, 0 255) - PNG kuvien avulla on helpompi saada pehmeästi häipyviä reunoja tilanteissa joissa GIF kuvan reuna näyttäisi rosoiselta ja pykälikkäältä. o JPG ei tue läpinäkyvyyttä
29 Kuvankäsittelyn perusperiaatteet ovat samat riippumatta käyttämästäsi ohjelmasta o Adoben Photoshop lienee suosituin o Photoshop on monipuolinen, kallis ja raskas ohjelma (nykyään SAAS, eli käyttömaksullinen, ei perinteisessä mielessä ostettavissa) o Fireworks hinnaltaa noin kolmanneksen edellisestä, ketterämpi ja erityisesti suunniteltu verkkokäyttöön tulevien kuvien luontiin ja muokkaukseen Eikä ole, Fireworksia ei ole ollut enää aikoihin 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, Linux). o Paint.net - monipuolisuudessaan verrattavissa edellisiin kahteen, ilmainen (Windows) o Acorn ja Pixelmator - muutaman kympin monipuolisia kuvankäsittelyohjelmia, ilmaiset kokeiluversiot (Mac) Verkossa o Esimerkiksi Autodesk Pixlr (
30 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>
31 Kuva kannattaa o luoda suoraan sen kokoiseksi jona sen aikoo näyttää sivulla, ja o määrittää kuvan koko <img>-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
32 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)
33 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
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/21/2014
20.3.2014 Aulikki Hyrskykari 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
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
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
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
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,
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
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
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,
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
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
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,
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
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
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
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
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ä
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
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
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
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
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ö,
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
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
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:
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
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
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),
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
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
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
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ä
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
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
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
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ä
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
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
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
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
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
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
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
SUOMEN KUNTALIITTO RY
Karttaliittymä Versio: 18.10.2011 Julkaistu: 27.10.2011 Voimassaoloaika: Toistaiseksi Sisällys 1 Johdanto... 2 1.1 Suosituksen tausta... 2 1.2 Suosituksen rakenne... 2 2 Soveltamisala... 2 3 Lyhenteet...
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
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
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
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
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
Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla
Kuvan pienentäminen Paint.NET-kuvankäsittelyohjelmalla Avaa Paint.NET tuplaklikkaamalla sen pikakuvaketta. Paint.NET avautuu tämän näköisenä. Edessä on tyhjä paperi. Saadaksesi auki kuvan, jota aiot pienentää
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
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
Vasteaika. Vasteaikaa koskeva ohje ei ole juuri muuttunut Robert B. Millerin vuonna 1968 pitämästä esityksestä:
Nielsen: "Olen tutkinut Webin käytettävyyttä vuodesta 1994, ja jokaisessa tutkimuksessa esiin on noussut sama asia: käyttäjät haluaisivat sivujen latautuvan nopeammin. Aluksi olin sitä mieltä, että käyttäjät
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
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,
Digikuvan peruskäsittelyn. sittelyn työnkulku. Soukan Kamerat 22.1.2007. Soukan Kamerat/SV
Digikuvan peruskäsittelyn sittelyn työnkulku Soukan Kamerat 22.1.2007 Sisält ltö Digikuvan siirtäminen kamerasta tietokoneelle Skannaus Kuvan kääntäminen Värien säätö Sävyjen säätö Kuvan koko ja resoluutio
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
Oma kartta Google Maps -palveluun
TAMPERE 1 (6) Oma kartta Google Maps -palveluun Google Maps palveluun on mahdollista luoda karttoja omilla paikkamerkeillä. Tilin luonti Google-palveluihin Tehdäksesi karttoja omilla paikkamerkinnöillä,
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
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
Pro gradun kuvaluettelon tekemisen ohjeet
Pro gradun kuvaluettelon tekemisen ohjeet 1. Johdanto 2. Pikselimäärä ja resoluutio 3. Kuvien tallennusmuoto 4. Kuvien asettelu Word-ohjelmassa 5. Kuvaluettelon tekstit 6. Kuvaluettelon tallentaminen ja
Luento 8 Kuvankäsittelyn periaatteita. 27.10.2015 Aulikki Hyrskykari
Luent 8 Kuvankäsittelyn periaatteita 27.10.2015 Aulikki Hyrskykari Miksi? Kuvankäsittelyssä mukataan kuvista spivampia jhnkin tarkitukseen Khteiden pistaminen tai lisääminen, kuvien yhdistely Efektit Rajaus,
Purot.net Wiki. Tutkielma. Paavo Räisänen. Centria Ammattikorkeakoulu 24.10.2012
Purot.net Wiki Tutkielma Paavo Räisänen Centria Ammattikorkeakoulu 24.10.2012 Sisällysluettelo 1: Esittely 2: Perustaminen 3: Uuden sivun luonti 4: Kuvien lisääminen 5: Linkin lisääminen 6: Lopuksi 1:
Kuvassa on 18 * 20 pikseliä 133 * 149 pikseliä 266 * 298 pikseliä Tiedostokoko: 2 kb 19 kb 120 kb
P E R U S T E E T LSET KUVAT Kuva muodostuu pikseleistä Vie paljon tilaa (Tiedostoon tallentuu jokaisen yksittäisen pisteen paikka ja väri) Kuvan laatu kärsii etenkin kuvaa suurennettaessa Ohjelmia: Photoshop,
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
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
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
Tämä dokumentti on tehty pohjaan Muistiopohja_logolla.ott
Muistio 1 (5) Asiakirjapohjien dokumentaatio Asiakirjapohjien tiedostot Tämä dokumentti kuvaa joukon SFS 2487 -standardin mukaisia OpenOfficeasiakirjapohjia. Pohjat on laatinut Martti Karjalainen oikeusministeriön
Kuvankäsittelyn mahdollisuudet
Kuvankäsittelyn mahdollisuudet Johdanto digikuvien käsittelyyn mikko.kaariainen@opisto.hel.fi Bittikartat ja vektorit Bittikarttagrafiikka Kuva muodostuu pikseleistä, joista jokaisella tietty väriarvo
8 Multimedian elementtejä: kuva
8 Multimedian elementtejä: kuva Näyttävän hypermedian keskeinen elementti on kuva. Kuvankäsittelyyn liittyy sekä teknisiä (miten) että sisällöllisiä piirteitä (mitä ja kenelle). Seuraavassa käsitellään
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"
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
740150P Valmiustaitoja biokemisteille
740150P Valmiustaitoja biokemisteille jatkuu 3-Harjoituskerta Kuvan käsittely Microsoft Wordissa Ma 13.2.2017 Valmiustaitoja biokemisteille - Aikataulu Ryhmä 1 Ma 6.2. 10:15 TF103 Ti 7.2. 12:15 TF103 Ma
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
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ö)
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)
Kuvien käyttö opetuksessa
Kuvien käyttö opetuksessa Tekijänoikeudet ammatin opetuksessa Opentekoa.fi Avainsanat: teoskynnys, CC, kuvaruutukaappaus, kartat, kuvauslupa Creative Commons, kuva, Google, YouTube, Flickr, jakaminen,
FrontPage 2000 - Näkymät
FrontPage 2000 - Näkymät FrontPagessa on kuusi erilaista näkymää sivustoon. Sivunäkymä Tässä näkymässä luodaan sivut eli näkymä vastaa paljolti Wordin tekstinkäsittelyohjelman näkymää. Tässä on myös muokattava
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
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
Tehtävä: FIL Tiedostopolut
Tehtävä: FIL Tiedostopolut finnish BOI 2015, päivä 2. Muistiraja: 256 MB. 1.05.2015 Jarkka pitää vaarallisesta elämästä. Hän juoksee saksien kanssa, lähettää ratkaisuja kisatehtäviin testaamatta esimerkkisyötteillä
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
Tunnuksen käyttö 28.4. 2014
Tunnuksen käyttö 28.4. 2014 Sisältö Saatteeksi Tässä ohjeistossa määritellään Lähienergiatunnuksen käyttöä, linjataan ehdot sen käyttöoikeudelle ja kerrotaan valvonnasta. Ohjeiston tarkoituksena on selkeyttää
Rasterikarttojen ja liiteaineistojen päivitysohje SpatialWeb5 Karttapaikka
SpatialWeb5 Karttapaikka 22.3.2006 sivu 1 (7) Rasterikarttojen ja liiteaineistojen päivitysohje SpatialWeb5 Karttapaikka SpatialWeb5 Karttapaikka 22.3.2006 sivu 2 (7) Sisältö: 1. KARTTAPAIKKASIVUJEN HAKEMISTORAKENNE...
Testidatan generointi
Testidatan generointi Anu Ahonen Kevät 2008 Tämä työ on tehty Creative Commons -lisenssin alla Työn tarkasti 9.4.2008 Jouni Huotari (JAMK/IT) 1 SISÄLTÖ 1 TYÖN LÄHTÖKOHDAT JA TOTEUTUS...2 2 TESTIDATAN GENEROINTI
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
Navigointi Verkkomultimedia ICT1tn004. Käytettävyys navigoinnista
Navigointi Verkkomultimedia ICT1tn004 27.9.2009 Elina Ulpovaara Käytettävyys navigoinnista Sivuston sisältö hahmottuu nopeasti hyvän navigoinnin avulla. Navigointi on helppoa ja nopeaa. Mitä sivulla on?
Visma Business AddOn Tositteiden tuonti. Käsikirja
Visma Business AddOn Tositteiden tuonti Käsikirja Oppaan päiväys: 10.2.2012. Asiakaspalvelu: Helpdesk: www.visma.fi Visma Software Oy pidättää itsellään oikeuden mahdollisiin parannuksiin ja/tai muutoksiin
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
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
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 &