You are browsing the archive for Web-suunnittelu ja julkaisu.

Adoben Ink, Slide, Sketch and Line

23.9.2014 in Kuvankäsittely ja digikuvaus, Mobiili ja Tabletit, Web-suunnittelu ja julkaisu, Yleinen by Mauri Meronen

cc14

Adobe Ink & Slide

Adobe julkaisi kesällä ensimmäisen kerran oman digitaalisen stylus-kynänsä (Ink) ja digitaalisen viivoittimen (Slide). Tuotteet on ostettavissa Adoben sivuilta 199 dollarin pakettihintaan, mutta toistaiseksi tuotteet ovat myynnissä vain Amerikan maaperällä. Julkaisun yhteydessä saimme kuitenkin myös kaksi uutta ilmaista iPad-sovellusta Line ja Sketch.

Halusin tarkastella näitä uusia ohjelmia ja selvittää, onko niistä vielä oikeiksi työkaluiksi graafiseen työhön? Sillä varmasti pian tulee myös päivä, jolloin InDesignin kaltaista taittotyötä voidaan tuottaa suoraan mobiililaitteilla.

Read the rest of this entry →

Retina-näytöt ja valokuvat webissä

25.1.2014 in Web-suunnittelu ja julkaisu by Panu Korpela

Parasta mahdollista palvelua käyttäjälle!

Jo nyt ja erityisesti lähitulevaisuudessa tämä tarkoittaa supertarkkojen retina-näyttöjen huomioimista valokuvien osalta. Miksi?

Mitä retina tarkoittikaan? CSS-pikseli?

Nykynäyttöjen fyysiset pikselit ovat aiempia näyttöjä paljon pienempiä, tyypillisesti luokkaa 300 pikseliä tuumalla (pixels per inch, PPI). Tällaisista näytöistä käytetty sana ”retina” on varsinaisesti Applen markkinointitermi, mutta vakiintuneempi puhekieleen kuin oikeampi termi ”high-PPI”.

Jos web-sivu näytettäisiin esimerkiksi Lumia 925 -älypuhelimella sen fyysisellä resoluutiolla 1280 &#x2715 768, olisi sisältö lukukelvottoman pientä. Tämän vuoksi laitteiden selaimet valehtelevat itselleen sivua näyttäessä ja toimivat kuin niissä olisi vähemmän pikseleitä. Tyypillistä on jakaa pikselilukumäärä puolellatoista tai kahdella; Lumian tapauksessa jakaja on 5/3 ja se ilmoittaa pikselikooksi 768 &#x2715 461. Näistä käytetään termiä ”CSS-pikseli”.

Ja ongelma oli?

Valokuvat näytetään oletusarvoisesti CSS-pikselikoon mukaisesti. Niiden käyttäjälle näkyvä fyysinen koko säilyy järkevänä, mutta näytön suurta tarkkuutta ei päästä hyödyntämään.

  1. Kuvat näyttäisivät siis tarkemmilta, jos retina-tarkkuus huomioidaan
  2. Retina-näytöllisen käyttäjän olisi mahdollista skaalata retina-kuvaa suuremmaksi kohtalainen tarkkuus säilyttäen; tämä on erityisen tärkeää mikäli kuva sisältää esimerkiksi tekstiä, graafisia käyriä tai muuta vastaavaa tietoa

Tarkempien kuvien käyttäminen vaatii suurta tarkkuutta ☺: toteuttajan tulee varmistua että päätelaite ei lataa sekä normaali- että retina-tarkkuuden kuvaa.

Ratkaisuvaihtoehtoja valokuville

A) Taustakuvat

Retina-taustakuvat on tuettu suoraan CSS-määrityksissä paremmin kuin tavalliset kuvat. Alla on esimerkki, joka osaa ottaa huomioon kaikki yleisimmät selaimet (esimerkissä kuvan X-siipi-korkea.jpg oikea koko on 1200 &#x2715 800 pikseliä):

@media only screen and (min-resolution: 1.5dppx),
       only screen and (min-resolution: 144dpi),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2) {
  #retinaKuva {
    background-image: url('X-siipi-1200.jpg');
    width: 600px;
    height: 400px;
  }
}

Näillä näkymin CSS4 tuo mukanaan helpomman syntaksin image-set-attribuutin muodossa, mutta tukea tälle on vasta WebKit-selaimissa (-webkit-image-set), joten en käsittele aihetta tarkemmin.

Hankaluutena yllä olevassa taustakuvaratkaisuissa on kuvan staattinen koko, eli se ei osaa pienentyä selainikkunaa pienennettäessä. Tämä voidaan onneksi korjata CSS3:n background-size: contain; -säännöllä.

B) Tavalliset kuvat (img)

Kirjastoratkaisut

Sekä erilaisilla JavaScript-kirjastoilla (suuri määrä) että palvelinratkaisuilla on mahdollista vaihtaa kuvia lennosta. Näitä en käsittele artikkelissa tarkemmin.

srcset, src-n ja picture

HTML5-spesifikaatio on tuomassa ongelmaan omia ratkaisujaan, mutta kirjoitushetkellä tilanne on vielä vakiintumaton. WebKit-selainten nightly build tukee ehdotettua srcset-attribuuttia, eli eri tarkkuuden kuvia voidaan esittää seuraavasti:

<img alt="X-siipinen" src="X-siipi-640.jpg" srcset="X-siipi-1200.jpg 2x">

Sekä srcset-attribuutin että picture-elementin muutaman ilmaisuvoimaongelman vuoksi on tehty myös toinen attribuuttiehdotus, src-n. Tukea selaimissa ei toistaiseksi vielä ole.

Jos kuva ei ole valokuva?

Jos kuva ei ole valokuva, kannattaa ehdottomasti miettiä voisiko käyttää joko vektorimuotoista SVG-kuvaa tai ohjelmallista piirtoa canvas-elementillä.

Uusi osaamisvaatimus web-suunnittelijoille: HTML ja CSS

22.1.2014 in Julkaisujärjestelmät, Taittaminen ja julkaiseminen, Web-suunnittelu ja julkaisu by Panu Korpela

<!DOCTYPE html>
<html dir="ltr" lang="fi">
<head>
<title>Soveltaja</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Web-suunnittelija käski ja sivut toteuttava sovelluskehittäjä vikisi. Totuus viidentoista vuoden ajan. Ensin mainitun ei tarvinnut ymmärtää ylempänä olevasta HTML-lähdekoodista ripaustakaan, jälkimmäinen puhui sitä toisena äidinkielenään.

Muutaman viime vuoden aikana mullistunut päätelaitteiden kirjo on salakavalasti aloittanut muutoksen web-projektien prosessissa: suunnittelijan on osattava HTML- ja CSS-tekniikoita lähdekooditasolla! Miksi muka?

Photoshop-leiskat ovat hyödyttömiä Responsive Web Design1 (RWD) -sivustojen suunnittelussa. Pienet muutostarpeet aiheuttavat paljon työtä, kun kaikki layoutit pitää korjata käsin. Suunnitelmien tarkastelu eri laitteilla on kömpelöä. RWD:n mukaista sisällön skaalautumista ei ole mahdollista ilmaista.

Muutos ajattelumaailmassa on monelle web-suunnittelijalle valtaisa. Mutta toisaalta kyse on vain muutoksesta ajattelumaailmassa. Opeteltavat tekniikat:

  • Ovat opeteltavissa
  • Ovat opeteltavissa pala kerrallaan, vaikka yksi elementti päivässä

Liikkeellä kannattaa olla pian, sillä muutoksen aiheuttama kliseinen ”markkinaosuuksien uusjako” on alkanut.


1 Responsive Web Design:

Google Web Designer – vai Google Banner Designer?

2.10.2013 in Digimarkkinointi, Mobiili ja Tabletit, Taittaminen ja julkaiseminen, Web-suunnittelu ja julkaisu by Mauri Meronen

Google julkaisi toissapäivänä uuden Web-suunnittelijoille suunnatun ilmaisen työkalun – Google Web Designer. Mistä oikein on kyse? Read the rest of this entry →

Creative Cloud on nyt päivittynyt- Uudet versiot ja CC työpöytäapplikaatio ladattavissa

18.6.2013 in Digimarkkinointi, Kuvankäsittely ja digikuvaus, Mobiili ja Tabletit, Taittaminen ja julkaiseminen, Uutiset, Web-suunnittelu ja julkaisu, Yleinen by Juha Laamanen

Eilen suomen aikaa se nyt sitten tapahtui. Uudet CC versiot tutuista sovelluksista tulivat ladattavaksi osoitteessa creative.adobe.com/apps . Melko paljon sovelluksissa kaikkea uutta ja uusia applikaatioitakin erityisesti webbisuunnittelijoille tuli aika lailla. Yhteenvetoa uusista jutuista voi lukea vaikka täältä .

Aikaisemmat versiot (CS6) voi jättää rinnalle mikäli jostain syystä haluaa. CC versiot asennetaan kokonaan erikseen eikä päivityksenä vanhan päälle. Jatkossa ei enää ole versionumeroita vaan ohjelmistot saavat päivityksia sitä mukaa kun ne ovat julkaisukunnossa. Ohjelmiston asennukseen ja päivittämiseen on nyt myös ladattavissa erillinen applikaatio työpöydälle.

Creative Cloud App

Creative Cloud App

Read the rest of this entry →