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◦ [email protected]◦ 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◦ [email protected]◦ 044 0700 700◦ http://fi.linkedin.com/in/kariselovuo/ ◦ @KariSelovuo