JWT Hyrskykari, SIS, Tampereen yliopisto 4/11/2013

Transkriptio

1 Aulikki Hyrskykari Kuvat verkkosivulla Video ja ääni verkkosivulla Mittayksiköt Tekstin muotoilu Kirjasimet Lokeromalli 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

2 Termiä käytetään kuvaamaan kahta asiaa o kuvan kokoa - esittämiseen käytettävää kuvapikselien lukumäärää, esim. 640 x 480 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ä

3 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>

4 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 tilanteita, uudelleenasetteluja 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, kuvalle kannattaisi aina määrätä molemmat dimensiot Koon tarkistus esim o kuvankäsittelyohjelmassa o selaimessa (helposti muutakin tietoa kuvasta)

5 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 Aiemmin audio ja videotiedostot verkkosivulle o plug in lisäosien avulla o kolmansien osapuolien tarjoamia ohjelmia o Esim. Adoben Flash player, Applen Quicktime Niiden käytössä on ongelmansa o lisäosan tulee olla asennettuna koneelle o esim Flash videon upottamiseksi sivulle - koodi, joka yhdellä selaimella toimii - ei välttämättä toimikaan toisella selaimella HTML5 tukee tiettyjä video ja ääniformaatteja natiivisti o suoraan selaimessa, ei plug in tarvetta o tarkoitus: yksi formaatti videolle, yksi formaatti äänitiedostoille o ei ihan onnistunut (Apple ja Nokia)

6 Analoginen esitys kuvien kanssa o video tallennettuna joko sivuston kanssa samalle palvelimelle o johonkin osoitteeseen saataville internettiin (src attribuutti) <video src="media/pelikaani.webm">... </video> Videon esittämistä voidaan säädellä elementin muiden attribuuttien avulla o height, width: videonsoittoalueen koko o poster: soittoalueella aluksi näytettävä kuva (ennen videon käynnistystä) o preload: videon videon noutamiseen liittyviä ohjeita o autoplay: automaattinen käynnistäminen sivulle tultaessa o controls: ohjauspaneelin näyttäminen o muted, loop: videon mykistys ja automaattinen toisto o mediagroup: videoiden ryhmittelyyn (esim. synkronoitia varten) <video src="media/pelikaani.webm" width="500" height="281" controls poster="img/pelikaani.jpg">... </video>

7 Kaikki selaimet eivät kuitenkaan tue WebM videoformaattia Alkuperäinen ajatus ei siis ihan toiminut o videot joutuu aina antamaan sivulla ainakin kahdessa eri formaatissa o lisäksi, sekä Apple ja Microsoft vaativat, että koneelle on asennettu tietyt ohjelmistot asennettuna - Apple: Quicktime, jotta Safari (ja myös Chrome, koska molemmat ovat WebKit pohjaisia selaimia) toimisi - MS: Windows Media Player, jotta IE9 toimisivat <source> elementin avulla o tällöin src="url" attribuutti jätetään <video> elementistä pois o jos attribuutti on mukana, se syrjäyttää <source> elementtien vaikutuksen <video> <source src="img/pelikaani.webm" type="video/webm"> <source src="img/pelikaani.mp4" type="video/mp4"> <p>selaimesi ei pysty näyttämään videota, pahoittelen.</p> </video>> o selain etenee <source> elementtien listaa o poistuu <video> elementistä kun on pystyy tunnistamaan jonkun tarjotuista videotiedostoista <source> elementillä src attribuutin lisäksi attribuutit o type: vaaditaan videon MIME tyypin määrittelemiseksi (video/ogg, video/mp4, video/webm) o media: välittää tietoa siitä millaisille laitteille video on optimoitu näytettäväksi <track> elementin avulla videoon mahdollista lisätä tekstitys

8 Muista oikeudet myös videoiden kohdalla o YouTube videoita voit käyttää vapaasti, jos upotat ne suoraan YouTubesta omalle sivullesi o upottaminen tapahtuu HTML5:ssä <iframe> elementin avulla o <frame> elementtiä ei HTML5:ssä enää ole, mutta <iframe> elementti kyllä o videon yhteydestä löytyy upota/embed koodi o kurssisivuille upotettu video joka opastaa tämän tekemiseen <audio> elementti o äänitiedoston soittaminen - palvelimelta tai - jonnekin url osoitteen osoittamaan paikkaan tallennetusta äänitiedostosta verkkosivulla o tapahtuu analogisesti videon esittämisen kanssa, avulla <audio autoplay="autoplay" loop="loop"> <source src="audio/ella.wav" type="audio/wav"> <source src="audio/ella.mp3" type="audio/mp3"> <a href="audio/ella.mp3">download the audio</a> </audio> <audio> elementin attribuutit vastaavat <video> elementissä (visuaaliset luonnollisestikin vain puuttuvat) o src, preload, autoplay, controls, muted, loop ja mediagroup

9 CCS:ssä käytetyt mittayksiköt ovat joko o suhteellisia tai o absoluuttisia Myös prosenttilukuja voidaan käyttää (suhteellisia) em:käytetyn kirjasimen korkeus ex:kirjaimen "x" korkeus käytetyssä kirjasimessa (ts. pienen kirjaimen korkeus) o suhteessa elementissä käytettyyn kirjasimeen o mittayksikön edessä mittaluku, joko kokonaisluku tai desimaaliluku o mittaluvun ja mittayksikön väliin ei saa kirjoittaa välilyöntiä o esimerkiksi: 2em, 0.5em, 2.5ex px:pikseli o suhteellinen, ei absoluuttinen mittayksikkö o ei välttämättä sama kuin laitteen pikseli o CSS määritys: pienimmäksi mittayksikkö, joka on paljain silmin nähtävissa ja joka ko. tulostuslaitteessa voidaan tuottaa tarkkana

10 maaginen mittayksikkö Voi luottaa, että o yhden pikselin (ja sen kerrannaisten) viiva tulostuu tarkkana laitteesta riippumatta o bittikarttakuvien (jpg, png, gif) pikselit hahmonnetaan suoraan yksi yhteen CSSpikseleihin o esimerkiksi 320 x 215 kuvapisteen kuva näkyy sivulla täsmälleen 320 px leveänä ja 215px korkeana Huomaa, että px mittasuhde ei tarkoita samaa kuin kirjasinten kirjasinkoko Bert Bos: em, px, pt, cm, in... Kokonaisulukuina, esim. 40% o prosenttiarvot annetaan aina suhteessa johonkin toiseen arvoon o yleensä suhteessa vanhempielementin ko. piirteen arvoon Esimerkiksi.vasenpalsta { width: 40%; }.oikeapalsta { margin right: 5%; }

11 in:tuuma cm:senttimetri mm:millimetri pt:piste pc:pica Absoluuttisia mittoja, keskinäiset suhteet: 1in = 2.54cm = 25.4mm = 72pt = 6 pc o pysyvästi samanmittaisia riipumatta välineestä, missä ne esitetään o riippuu laitteesta, kuinka tarkasti se toteuttaa mittoihin liittyvät standardit Eivät juurikaan käytössä sivujen toteutuksessa o absoluuttisella mitalla määritetty elementti veisi esim. puhelimessa kovin erilaisen tilan näytöstä suhteessa isoon näyttöön Sivustojen ulkoasua määritettäessä CSSsäännöissä olähes poikkeuksetta suhteellisia mittoja em, ex, px tai prosentit otällöin sivu skaalautuu kulloinkin käytettävään sivunkokoon. okirjasinten koot suositellaan annettavaksi em yksiköissä.

12 text decoration: none underline overline line through blink inherit text align: left right center justify inherit text indent: pituusyksikkö prosentti inherit text overflow: clip ellipsis merkkijono text shadow: none x offset y offset [blur] [väri] text transform: capitalize uppercase lowercase none inherit line height: normal mittayksikkö kokonaisluku prosentti inherit letter spacing: normal mittayksikkö inherit word spacing: normal mittayksikkö inherit white space: normal pre nowrap pre wrap pre line inherit word wrap: normal break word font family: [kirjasinperhe]* [geneeringn kirjasin perhe] Elementissä käytettävän kirjasinperheen määritäminen o kirjasinperhe :jokainen kirjasin sisältää useampia leikkauksia kirjasimesta (normaali, kursivoitu, lihavoitu,...). Piirteen arvoksi voi antaa listan kirjasinperheitä o käyttöön ensimmäinen joka sivun tulkintaympäristössä on käytettävissä o viimeisenä vaihtoehtona suositellaan käytettävän jotakin ns. geneeristä kirjasinperhettä Esimerkiksi:.body { font family: verdana, arial, sans serif; }.lainaus { font family: "new century schoolbook", serif; }

13 sans serif o päätteetön kirjasin o nykyisin paljon verkkosivuilla ja yleensäkin elektronisessa muodossa esitetyissä teksteissä käytetty o esim. Arial, Geneva, Helvetica, Lucida Sans, Trebuchet, Verdana serif o päätteellinen kirjasin, käytetään yleisesti paperille tulostetussa tekstissä o esim. Garamond, Georgia, New York, Times, Times New Roman Monospace o tasavälinen kirjasin o tyypillisesti koodin kirjoittamiseen tai konekirjoitukseomaisen tekstin vaikutelman aikaansaamiseksi o kirjasimen kaikki kirjaimien vievät riviltä saman tilan ts. ovat samanlevyisiä o esim. Courier, Courier New, Lucida Console, Monaco. cursive fantasy o käytetään erikoistilanteissa, otsikoissa tai lyhyissä huuhahduksenomaisissa tekstpaloissa o pitkissä teksteissä käytettynä tekee tekstistä vaikealukuista o kirjasinperhe /merkistökokoelma ei välttämättä ole kattavasti toteutettuna o esim. Impact, Copperplate, Desdemona, Kino Eri kirjasinten luettavuudesta on tehty vuosikymmenten kuluessa paljon tutkimusta o nykytiedon valossa on todettu enemmän tai vähemmän hataraksi Erityisesti sarif ja san serif vertailusta löytyy paljon tutkimusta o vaikuttaa siltä että luettavuuteen vaikuttaa enemmänkin tottumus (ja kirjasimen selkeys, toki) kuin itse käytetty kirjasinleikkaus Hyvä yhteenveto aiheesta: Alex Poole: Which Are More Legible: Serif or Sans Serif Typefaces? are more legible serif or sans serif typefaces Verkkosivuilla voi halutessaan käyttää myös ns. Webbikirjasimia (Web fonts) o kirjasinleikkaukset haetaan serverille tallennetusta tiedostoista o usein maksullisia o liitetään sivulle CSS face avulla

14 Tekstin kokoa elementissä voi hallita kahdella tavalla oabsoluuttisina kokoina - määrätään absoluuttisen kirjasinkoon käyttäen CSS:n nimettyjä arvoja - xx small, x small, small, medium, large, x large, xx large - tai absoluuttisia mittayksiköitä osuhteellisin mittayksiköin prosentteina tai em/ex mittayksiköillä Suhteellinen joustavampi omuista kuitenkin, että kirjasimen koko on periytyvä ominaisuus - sisäkkäiset elementit Anna ensin dokumentin rungossa tekstille peruskoko säännöllä body { font size=100% } o tuottaa useimmissa sealaimissa kirjasinkoon 16px o skaalataan muut elementit suhteessa tähän kirjasinkokoon o esim. kappaleiden kirjasinkooksi 14 px = 14/16em = 0.875em p { font size = 0.875em }

15 @charset "UTF 8"; body { font family: "Palatino Linotype", Palatino, serif; font size: 100%; } h1, h2 { font family: "Arial Black", Arial, sans serif; font weight: normal; } h1 { /* 22px/16px */ font size: 1.375em; } h2 { /* 18px/16px */ font size: 1.1em; } p { /* 14px/16px */ font size:.875em; } font style: normal italic oblique inherit font variant: normal small caps inherit font weight: normal bold bolder lighter inherit

16 margin top Sisältö (content) Täyte (padding) border top padding top margin left border left padding left ELEMENTIN SISÄLTÖ (content area) padding right border right margin right Reunus (border) Marginaali (margin) padding bottom border bottom margin bottom