Aamiaisseminaari 24.5.2013 Kari Selovuo

1. Crea%ve
Cloud
Tulee
–
Oletko
valmis?
18.1.2012
[Tekijä]
1
Aamiaisseminaari
24.5.2013
Kari
Selovuo,
konsul:

2. Mobile
First
&
Responsive
Design
käytännössä
• Miksi
suunnitella
mobiililai?eille
*
• Älypuhelimista
tullut
ero?amaton
osa
elämäämme
• Kulu?ajien
käy?äytyminen
muu?unut
• Ostoskäy?äytyminen
muu?unut
• Au?aa
mainostajia
luomaan
yhteyksiä
kulu?ajiin
2
23.5.2013
*)
h?p://www.thinkwithgoogle.com/mobileplanet/fi/

3. Mobile
First
Mobile
First
=
Simple
First
=
Content
First
• Ei
vain
mobiilisivun
tekemistä
ensimmäiseksi
vaan
• Sisällön
ja
käy?ätarkoituksen
yUmen
tunnistamista
• Au?aa
kehi?ämään
sisältöä
ja
toiminnallisuu?a
oikeaan
myös
desktop
toteutuksessa
If
Content
is
the
King,
Design
is
the
Queen
3
23.5.2013

4. Responsive
Design
• On
osa
Progressive
Enhancement
prosessia
ja
jatkumoa
Mobile
First
–aja?ellulle
• Tarjoaa
sisällön
kaiken
kokoisille
näytöille
aina
opUmaalisesU
toteute?una
• Sisällön
merkitys
korostuu
suunni?elussa
4
23.5.2013

5. Adobe
ja
HTML5
• Adobe
voimakkaasU
mukana
uusien
tekniikoiden
kehityksessä
• Tavoi?eena
parhaat
työkalut
luovan
työn
tuo?amiseksi
• HTML5,
CSS3
ja
JavaScript
toteutusten
tekeminen
pitkälU
”käsityötä”
• Kunnon
työkaluilla
saavutetaan
merki?ävä
työtehon
parannus

6. Webtuotannosta
• Webin
tekeminen
ei
ole
vain
verkkosivujen
luomista
vaan
• HTML
julkaisemista
• Julkaisutyöhön
lii?yy
oikeat
työvälineet
ja
menetelmät
• Ei
eri
sisällön
parsimista
kasaan
satunnaisesU
eri
tekniikoin

7. Työkalu
on
osa
tekniikkaa
• Web
tekniikat
eivät
edellytä
erityistä
työkalua
–
teksUeditori
rii?ää
• Hyvä
työkalu
• Au?aa
tekijää
suoriutumaan
vaikeistakin
tehtävistä
virhee?ä
ja
nopeasU
• AutomaUsoi
tehtävien
suori?amista
• Ohjaa
oikeaan
toteutustapaan
• Ope?aa
uuteen
teknologiaan
• Tukee
moderneja
työmenetelmiä
• On
osa
työryhmän
työskentelytapaa
• …
• Toki
Notepadillakin
voi
tehdä
mu?a
Miten
sinä
haluat
työskennellä?

8. Dreamweaver
–
All
In
One
web-­‐työkalu
• Dreamweaver
on
Adoben
All
in
one
työkalu
webin
tekijöille
• Älä
muistele
vuosien
takaista
Dreamweaveria
–
tämä
on
jotain
aivan
muuta!
• RunsaasU
uusia
ominaisuuksia
mm:
• Uusi
”puhdas”
käy?ölii?ymä
• CSS
Designer
• Uusi
Fluid
Grid
Layout
• Synkronoi
asetukset
CC
kau?a
• Edge
Web
Fonts
• jQuery
UI
Widgets
• CSS3
transiUons

9. Työkaluvalikoima
laajenee
• Adoben
CreaUve
Cloud
sovellukset
tukevat
web-­‐kehitystä
• CSS
tyylit
saadaan
kopioitua
suunni?eluvälineestä
web-­‐editoriin
• Web-­‐kirjasimet
käyte?ävissä
myös
suunni?eluvälineissä
• Tiedostojen
yhteiskäy?ö
tehostunut
• Adobe
Edge
Tools
tuoteperhe
tuo
koko
joukon
uusia
täsmätyövälineitä

10. Adobe
Edge
Animate
CC
• Luo
interakUivista
ja
animoitua
sisältöä
webiin
-­‐
”New
Flash”
• Lopputuo?eena
HTML5,
CSS3
ja
JavaScript
• Ei
tarvitse
selaimeen
plug-­‐in
lisäosia
• Toimii
iOS,
Android
ym.
Älypuhelimissa
ja
tableteissa
samoin
kuin
moderneissa
selaimissa
(Chrome,
Safari,
Firefox,
IE9+)
10
23.5.2013

11. Adobe
Edge
Reflow
CC
• Työkalu
responsiivisten
sivujen
suunni?eluun
• Tuo?aa
CSS
koodin
siirre?äväksi
käyte?ävään
web-­‐editoriin
• Dreamweaver,
Adobe
Edge
Code
CC,
…
• IntegroinU
Adobe
Photoshop
CC
kanssa
(tulossa)
mahdollistaa
tehokkaamman
työnkulun
perinteiseen
designprosessiin
11
23.5.2013

12. Adobe
Edge
Inspect
CC
• Synkronoi
langa?omasU
useita
lai?eita
selaimeen
mahdollistaen
responsiivisten
toteutusten
helpon
testauksen
• Remote
inspecUon
kytkee
lai?een
(älypuhelin)
tu?uihin
debug
työkaluihin
• Sivustojen
HTML,
CSS
ja
JavaScript
koodin
testaus
”livenä”
lai?eessa
• Integroitu
Adobe
Edge
Code
CC
kanssa
12
23.5.2013

13. Adobe
Edge
Code
CC
• Web
–editori
koodiorientoituneille
tekijöille
• Editoi
CSS
ja
JavaScript
koodia
”in-­‐line”
tyyppisesU
linki?ävältä
HTML
–sivulta
• Quick
Edit
• Nopeu?aa
koodin
kirjoi?amista
13
23.5.2013

14. Yhteenveto
• Työkalut
tukevat
enUstä
sujuvampaa
luomisprosessia
• Ohjelmien
ja
Uedostojen
yhteiskäy?ö
tehokasta
• Koodi
standardien
mukaista
14
23.5.2013

15. Kiitos
mielenkiinnostasi
Kari
Selovuo
Konsul:,
webtekniikat
@KariSelovuo
h?p://www.linkedin.com/in/kariselovuo
Kari.selovuo@sovelto.fi
15
23.5.2013