Adobe Edge ReflowADOBE EDGE REFLOW KÄYTTÖ JA ROOLI WEB-TYÖNKULUSSA

Kari Selovuo

Corellia Helsinki Oy◦ Vilhonkatu 5A, 00100 Helsinki◦ Kari Selovuo, Partner, Advisor, ACI, ACP◦ kari@corellia.fi◦ 044 0700 700◦ http://fi.linkedin.com/in/kariselovuo/ ◦ @KariSelovuo

Corellia Helsinki Oy Corellia Helsinki on Adobe auktorisoima koulutuskumppani, AATC.

Koulutamme, konsultoimme, autamme ja toteutamme

Kaikki julkaisemisen muodot ovat meille tuttuja: Printti, sähköinen, tablet -julkaisut sekä web-suunnittelu ja toteutus

http://corellia.fi/

Tästä materiaalista Nämä kalvot ovat otanta Corellia Helsinki Oy:n kurssimateriaalista.

Käyttöoikeus (Copyright)◦ Tämän materiaalin omistaa Corellia Helsinki Oy

Adobe Edge tuoteperheestä Web-tuotantoon tarkoitetut työkalut◦ Animate◦ Reflow◦ Code◦ Inspect◦ Edge Web-fonts◦ Typekit◦ PhoneGap Build

Photoshop suunnitteluvälineenä Photoshop on aiemmin “väärinkäytetty” web-suunnittelun työkalu

Photoshop on pikselinmuokkausohjelma, josta puuttuu mm. web konseptin käsitteet◦ Sivut (page)◦ Tilat (state: hover, visited…)◦ Skaalautuvuus (responsiiviset sivut)◦ Ei kunnolla tuettua työnkulkua suunnittelijalta kehittäjälle

◦ Reflow kytkös on edistystä samoin CSS sääntöjen saaminen suoraan Photoshopista

Viime vuosina Adobe alkanut lisäämään eri sovelluksiin web-suunnittelua helpottavia lisätoiminnallisuuksia

Photoshop: plussat ja miinukset Photoshoppiin on lisätty Web-suunnittelua tukevia ominaisuuksia on mm.

◦ Web assettien helppo generointi◦ CSS koodin tuottaminen◦ Vektorityökalut

Mikä on edelleen pielessä web-suunnittelun näkökulmasta◦ Usean sivun suunnittelu ei mielekästä (tasot/Layers ei ole ratkaisu)◦ Ei edelleenkään tukea responsiivisille leiskoille◦ Generoitu CSS koodi ei parasta mahdollista (koodaajan näkökulmasta)

Vaihtoehtoisia työtapoja web-suunnitteluun

Design in browser◦ Wireframen koodaus suoraan HTML elementeiksi ja CSS asemointi◦ Pelkkä rautalankamalli tai graafiset elementit sisältäen

Photoshop◦ PSD / PDF asiakkaalle◦ PSD:n tarkastelu selaimessa CC tiedostojaosta (uusi ominaisuus julkaistu 21.8.2014)

Photoshop + Edge Reflow◦ PSD leiskasta generoitu Reflow projekti, joka tuottaa HTML mockup:n asiakkaalle

Edge Reflow◦ Leiskan suunnittelu suoraan Reflow:ssa, kuvat Photoshopista tai Illustratorista

Photoshopista Reflow taittoon Photoshop osaa luoda Reflow projektin

Generoi kuvaelementit Luo PSD:ssä tehdyn asemoinnin automaattisesti◦ DOM rakenne ei oikea html –

taittoon◦ Edellyttää manuaalista muokkausta

Photoshop leiskan oikea rakenne Jos haluat viedä Photoshop designisi Reflow ohjelmaan, rakenna tiedostosi oikein Käytä tasojen yhdistelyssä ryhmittelyä ja nimeämistä (mieti tulevaa HTML sivua ja DOM –rakennetta)

Käytä tiedostotarkenninta nimeämisessä◦ Generointi tuottaa halutun tiedoston◦ Voit listata useita tiedostonimiä eri asetuksilla

◦ JPG, PNG, GIF◦ Tiedostokoko◦ Pakkaustaso◦ PNG bittisyvyys◦ Hakemisto, johon tiedosto luodaan

http://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Assettien generointi Photoshopista

Generoi kuvat web-käyttöön◦ File / Generate / Image Assets

Luo Reflow –projekti ◦ Generate / Edge Reflow Project◦ Luo Reflow projektitiedoston◦ Generoi myös kuva-assetit

Reflow käyttötarkoitus Tuottaa HTML sivun elementit ja niiden asemointisäännöt

Mahdollistaa uusien CSS muotoilujen käyttämisen ◦ CSS Regions (tekstin juoksutus

elementistä toiseen)◦ Filtterit

Mockuppien generointiin tai koodarille lähtökohdaksi

Reflow työnkulku Kaksi vaihtoehtoa

◦ Aloitetaan tyhjästä◦ Photoshopista tuodun leiskan

muokkaus

Suunnitellaan desktop –näkymä Lisätään breakpointit ja säännöt pienemmille näytöille

Testaus ja esittely asiakkaalle

Reflow: Ehdotettu työnkulku Photoshop ei ymmärrä selaimen DOM rakennetta

◦ Photoshopista tuodun layoutin rakenne edellyttää työlästä elementtien ryhmittelyä ja järjestämistä Refow:ssa

◦ Ilman tätä organisointia eri layouttien suunnittelu hankalaa – layout hajoaa pahasti

Edotukseni – Kuvaelementit Photoshopissa ja Layout Reflow:ssa◦ Suunnittele sivun rakenne aloittamalla se Reflow ohjelmassa◦ Toteuta asemointi käyttäen “laatikoita” (Box eli div -elementti)◦ Lisää sivulle Photoshopissa tuotetut kuvat ja muu sisältö

Älä turhaan odota Photoshopista tuodun leiskan toimivan automaattisesti Reflowssa!

Reflow projektin luonti File – New Project Vain yksi projekti kerrallaan avoinna

Aloita käyttö tutustumalla Welcome –projektiin◦ Help – Open Welcome Project

Reflow käyttöliittymä Tärkeimmät asetukset paneleissa

◦ Layout ja Styling

Huomaa, että kyseessä ei ole piirto-ohjelma◦ Kaikki säädöt ovat CSS –arvoja◦ HTML ja CSS osaamisesta apua

Työkaluja vähän◦ Valinta, Box, Teksti, Kuva ja Lomake-

elementit

Reflow käyttöliittymä Elements paneelissa sivun DOM rakenne

Muita valintoja◦ Edge Inspect testaus◦ Asset Library◦ Pages◦ Photoshop CC connect

Reflow käyttöliittymä Dokumentin alla on DOM ”valitsin” sekä koodinäkymä valitun elementin CSS koodiin◦ Osoittaa myös eri media query -

lohkojen omat säännöt

Layoutin luonti Piirrä layout Box –työkalulla

◦ Tuottaa HTML div elementtejä

Aseta elementin ominaisuudet Layout ja Styling paneeleissa

Asemoinnin kannalta tärkeää◦ Size % = joustava, px = kiinteä ◦ Advanced kohdassa

asemointisäännöt ja kellutus ◦ Float

Layoutin luonti Nimeä elementit!

◦ Aivan kuten tasojen nimeäminen◦ Tärkeää sivun myöhemmän käytön

kannalta◦ Helpottaa DOM rakenteen hahmottamista

◦ Mieti nimet hyvin◦ Tulevat CSS class -määreiden nimiksi◦ Käytä kuvaavia nimiä

Layoutin luonti Luo ensin ”rautalankamalli”

◦ Pelkkiä asemointielementtejä◦ Voit kopioida elementtejä piirtämisen

sijaan◦ Visuaalisten tyylien kopiointi◦ Siirtäminen ja liikuttaminen helppoa

myös suoraan hiirellä raahaamalla◦ Siirtäminen vaikuttaa DOM

rakenteeseen◦ Vältä ”oransseja” – negatiivisia

margin arvoja

Kuvien lisääminen sivulle Kaksi tapaa

◦ Lisää kuva suoraan sivulle omaksi elementiksi DOM rakenteeseen

◦ Aseta kuva div -elementin taustakuvaksi

Taustakuvalle asetettavissa enemmän sääntöjä

Elementin taustakuva Styling – Backgrounds Yleisesti hyviä sääntöjä

◦ Position – center◦ Scaling – cover◦ Background Position Y säännöllä voit

siirtää kuvaa pystysuunnassa◦ Scale Y skaalaa kuvaa

Vaikutus näkyy elementin koon muuttuessa

Teksti: Lisääminen Tekstityökalun napsautus lisää yksirivisen tekstikentän

Vedä työkalulla alue, johon lisäät pitkän teksti◦ Aseta tekstikentän isäelementin korkeudeksi auto, jolloin se skaalautuu tekstin mukana

Tekstin asemointi elementissä Tekstin asemointi elementin sisälle: Best practices◦ Aseta isäelementille padding◦ Poista tekstielementiltä margin

määreet◦ Aseta tekstikentän leveydeksi 100%

Tekstin muotoilut: Fontit Käytettävissä Edge Webfonts kirjasimet◦ Styling – Typography – Typeface

Muotoiltavissa kaikki mikä CSS säännöillä tehtävissä◦ Väri, tasaus, koko, paino, välistys …

Myös Typekit fontit käytettävissä

Tekstin ja elementtien ryhmittäminen

Edit – Group◦ Ryhmittää elementit yhdeksi◦ Liikuteltavissa yhdessä

Ryhmällä silti oma layout◦ Voivat siirtyä paikoiltaan tilan

pienentyessä◦ Korjaa asettamalla ryhmälle kiinteä

koko◦ Asemoi ryhmä omana

elementtinään (float)

Assets Assets paneelissa näkyvät projektiin lisätyt kuvat◦ Monestiko kuvaa on käytetty ◦ Mikäli kuvaa on muokattu projektin

ulkopuolella◦ Muokatun kuvan päivityspainike◦ Kuvan Replace painike, jolla kuvan

voi vaihtaa toiseen

Tuonti Illustratorista copy – paste liittäminen

◦ Kopioi elementit Illustratorissa◦ Liitä Reflow ohjelmassa

Tekee sivulle <img> elementin, jonka src attribuutiksi kuva .SVG muodossa◦ Varsin hyvin selaimissa tuettu

ominaisuus◦ Ei IE8 ja vanhemmat

Photoshop liitos Voit liittää .PSD tiedoston suoraan Reflow ohjelmaan

Tuo .PSD tiedostossa olevat kuvat asset kirjastoon

Säilyttää kytköksen tiedostojen välillä◦ Muokkaus ja päivitys

Tilat (states) Voit asettaa elementeille eri muotoilut ◦ Hover◦ Active ◦ Focus

Hyödyllinen erityisesti linkeillä

Linkit, navigaatio Lisää linkki ulkoiseen osoitteeseen tai toiseen sivuun◦ Page käytettävissä jo projektissa on

muitakin sivuja◦ Kirjoita ulkoinen osoite URL –

kenttään◦ Avaa ulkoiset linkit uuteen ikkunaan

Lomake-elementit Reflow:ssa on muutamia lomake-elementtejä◦ Painike◦ Text input◦ Pudotusvalinta◦ Checkbox◦ Radiobutton

Asemointi ja Media Queryt Asemointi vaatii kokeilua ja oikeiden asetusten hakemista

Reflow rikkoo välillä DOM:n ◦ Jos jokin näyttää hajoavan asemoinnissa, tarkista DOM rakenne

Ennen asemointia kannattaa huolehtia, että sivu on ◦ Valmis, kaikki elementit jo lisätty ja muotoiltu◦ Elementit ryhmitetty ja sijoitettu asemointia varten laatikoiden (div) sisään

Eri layout asetuksilla voi muuttaa myös kaikkia elementtien visuaalisia tyylejä

Media Queryn oikea paikka määräytyy sisällön mukaan◦ Lukumäärää ei rajoitettu

Asemointi Kavenna näkymää kunnes tulee tarve muokata sisältöä

Lisää ensin Break Point Muokkaa sen jälkeen elementin ominaisuuksia◦ Tallenna ja testaa usein

Testaa myös selaimessa◦ Todettu ongelma ettei näkymä toistu

aina samoin selaimessa ja

Sivujen lisääminen projektiin Lisää uusi sivu (+)

◦ Luo uuden tyhjän sivun

Duplicate◦ Luo kopion avoimesta sivusta◦ Usein paras lähtökohta, sillä sivuilla

kuitenkin toistuvia elementtejä◦ Käytä vasta kun duplikoitavan sivun

toistuvat elementit ovat valmiit (navigaation ym.)

Projektin vienti jatkokäsittelyyn File – Export for Code Editor

◦ Tallentaa projektin valittuun sijaintiin

Kaikki koodi muokattavissa missä tahansa web-editorissa

Viimeistään tässä vaiheessa arvostaa hyvin nimettyjä elementtejä◦ DOM!

Mietteitä Reflowsta Reflow on yksi haara työnkulussa

Älä tavoittele täydellistä siirtymää Photoshopista web-sivuksi

Ei jatkumoa kooditasolla Reflow:sta lopputuotteeseen, joka kuitenkin tehdään pääosin jollekin sisällönhallintajärjestelmälle

Mihin käyttää Reflow:ta◦ Mockup sivujen tekemiseen◦ Alustava sivujen suunnittelu, koodin jatkokäsittely rajallista◦ Rautalankamallien suunnitteluun◦ Parhaimmillaan kuitenkin yksinkertaisten staattisten sivustojen toteuttamiseen jopa

tuotantoon (tämä varauksella)

Mietteitä Reflowsta Reflow on aivan erinomainen tuote suunnittelijoille, konsulteille ym. tuottamaan asiakkaille toiminnallinen malli verkkosivustosta

Tämän avulla voidaan testata suunnitelman toimivuus sekä erilaisilla päätelaitteilla käytettävyys

Reflow on osa Adobe Creative Cloud työnkulkua ja hyödyllinen lisä

Halutessasi oppia aiheesta lisää tutustu Corellian kurssitarjontaan:◦ http://corellia.fi/web-koulutukset/adobe-creative-cloud-websuunnittelijan-tyokalut-ja-tyonku

lku/

◦ http://corellia.fi/web-koulutukset/#kurssiluettelo

Kiitos Kysymyksiä, ajatuksia, toiveita, kommentteja?

Corellia Helsinki Oy◦ Vilhonkatu 5A, 00100 Helsinki◦ Kari Selovuo, Advisor, ACI, ACP◦ kari@corellia.fi◦ 044 0700 700◦ http://fi.linkedin.com/in/kariselovuo/ ◦ @KariSelovuo