SlideShare a Scribd company logo
Crea%ve	
  Cloud	
  Tulee	
  –	
  Oletko	
  valmis?	
  
18.1.2012	
   [Tekijä]	
   1	
  
Aamiaisseminaari	
  24.5.2013	
  
Kari	
  Selovuo,	
  konsul:	
  
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/	
  	
  
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	
  
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	
  
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	
  
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	
  
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ä?	
  
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	
  
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ä	
  
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	
  
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	
  
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	
  
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	
  
Yhteenveto	
  
•  Työkalut	
  tukevat	
  enUstä	
  sujuvampaa	
  luomisprosessia	
  
•  Ohjelmien	
  ja	
  Uedostojen	
  yhteiskäy?ö	
  tehokasta	
  
•  Koodi	
  standardien	
  mukaista	
  
14	
  23.5.2013	
  
Kiitos	
  mielenkiinnostasi	
  
Kari	
  Selovuo	
  
Konsul:,	
  webtekniikat	
  
	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  @KariSelovuo	
  
	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  h?p://www.linkedin.com/in/kariselovuo	
  
	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  Kari.selovuo@sovelto.fi	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  
15	
  23.5.2013	
  

More Related Content

Similar to Adobe ja HTML5

Adobe Reflow websuunnittelijalle
Adobe Reflow websuunnittelijalleAdobe Reflow websuunnittelijalle
Adobe Reflow websuunnittelijalle
Corellia Helsinki
 
Täydellinen verkkoprojekti - Oulun seminaari
Täydellinen verkkoprojekti - Oulun seminaariTäydellinen verkkoprojekti - Oulun seminaari
Täydellinen verkkoprojekti - Oulun seminaari
Exove
 
Store App -kehityksen aloittaminen
Store App -kehityksen aloittaminenStore App -kehityksen aloittaminen
Store App -kehityksen aloittaminen
Sovelto
 
InfoWeb 4 - sisällönhallinnan uusi aalto
InfoWeb 4 - sisällönhallinnan uusi aaltoInfoWeb 4 - sisällönhallinnan uusi aalto
InfoWeb 4 - sisällönhallinnan uusi aalto
Jarno Malaprade
 
Internet sivujen tuottaminen
Internet sivujen tuottaminenInternet sivujen tuottaminen
Internet sivujen tuottaminen
webesko
 
Cad-esittely
Cad-esittelyCad-esittely
Cad-esittely
Lasse Home
 
Digityökaluja ammatillisen open työkalupakkiin 23.2.18
Digityökaluja ammatillisen open työkalupakkiin 23.2.18Digityökaluja ammatillisen open työkalupakkiin 23.2.18
Digityökaluja ammatillisen open työkalupakkiin 23.2.18
Matleena Laakso
 
Responsiiviset layoutit tutkielma
Responsiiviset layoutit tutkielmaResponsiiviset layoutit tutkielma
Responsiiviset layoutit tutkielma
Outi Kotala
 
Pilvet ja Office 365 8.12.14
Pilvet ja Office 365 8.12.14Pilvet ja Office 365 8.12.14
Pilvet ja Office 365 8.12.14
Matleena Laakso
 
10 parasta tapaa pilata Liferay-projekti
10 parasta tapaa pilata Liferay-projekti10 parasta tapaa pilata Liferay-projekti
10 parasta tapaa pilata Liferay-projekti
Ambientia
 
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin  Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Jani Kykyri
 
Terveiset Adobe Max 2013:sta
Terveiset Adobe Max 2013:staTerveiset Adobe Max 2013:sta
Terveiset Adobe Max 2013:sta
Sovelto
 
Online Tuotantoprosessi2007
Online Tuotantoprosessi2007Online Tuotantoprosessi2007
Online Tuotantoprosessi2007
Antti Leino
 
Sovelto Channel -esittely
Sovelto Channel -esittelySovelto Channel -esittely
Sovelto Channel -esittely
Sovelto
 
Tehoa liiketoimintaan Dynamics NAV 2015 uusilla ominaisuuksilla | CGI:n Micro...
Tehoa liiketoimintaan Dynamics NAV 2015 uusilla ominaisuuksilla | CGI:n Micro...Tehoa liiketoimintaan Dynamics NAV 2015 uusilla ominaisuuksilla | CGI:n Micro...
Tehoa liiketoimintaan Dynamics NAV 2015 uusilla ominaisuuksilla | CGI:n Micro...
CGI Suomi
 
Aamiaisseminaari 5.4.2012: HTML5 - Oikotie onneen?
Aamiaisseminaari 5.4.2012: HTML5 - Oikotie onneen?Aamiaisseminaari 5.4.2012: HTML5 - Oikotie onneen?
Aamiaisseminaari 5.4.2012: HTML5 - Oikotie onneen?
Nemein
 
Mobie Zine -aamiaisseminaari 25.9.2012
Mobie Zine -aamiaisseminaari 25.9.2012Mobie Zine -aamiaisseminaari 25.9.2012
Mobie Zine -aamiaisseminaari 25.9.2012
Mobie Oy
 
Lisäarvoa digitaaliseen julkaisemiseen eDocker-ratkaisulla
Lisäarvoa digitaaliseen julkaisemiseen eDocker-ratkaisullaLisäarvoa digitaaliseen julkaisemiseen eDocker-ratkaisulla
Lisäarvoa digitaaliseen julkaisemiseen eDocker-ratkaisulla
Sovelto
 
Responsiiviset layoutit study
Responsiiviset layoutit studyResponsiiviset layoutit study
Responsiiviset layoutit study
Outi Kotala
 

Similar to Adobe ja HTML5 (20)

Adobe Reflow websuunnittelijalle
Adobe Reflow websuunnittelijalleAdobe Reflow websuunnittelijalle
Adobe Reflow websuunnittelijalle
 
Täydellinen verkkoprojekti - Oulun seminaari
Täydellinen verkkoprojekti - Oulun seminaariTäydellinen verkkoprojekti - Oulun seminaari
Täydellinen verkkoprojekti - Oulun seminaari
 
Store App -kehityksen aloittaminen
Store App -kehityksen aloittaminenStore App -kehityksen aloittaminen
Store App -kehityksen aloittaminen
 
InfoWeb 4 - sisällönhallinnan uusi aalto
InfoWeb 4 - sisällönhallinnan uusi aaltoInfoWeb 4 - sisällönhallinnan uusi aalto
InfoWeb 4 - sisällönhallinnan uusi aalto
 
Internet sivujen tuottaminen
Internet sivujen tuottaminenInternet sivujen tuottaminen
Internet sivujen tuottaminen
 
Cad-esittely
Cad-esittelyCad-esittely
Cad-esittely
 
Digityökaluja ammatillisen open työkalupakkiin 23.2.18
Digityökaluja ammatillisen open työkalupakkiin 23.2.18Digityökaluja ammatillisen open työkalupakkiin 23.2.18
Digityökaluja ammatillisen open työkalupakkiin 23.2.18
 
Responsiiviset layoutit tutkielma
Responsiiviset layoutit tutkielmaResponsiiviset layoutit tutkielma
Responsiiviset layoutit tutkielma
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Pilvet ja Office 365 8.12.14
Pilvet ja Office 365 8.12.14Pilvet ja Office 365 8.12.14
Pilvet ja Office 365 8.12.14
 
10 parasta tapaa pilata Liferay-projekti
10 parasta tapaa pilata Liferay-projekti10 parasta tapaa pilata Liferay-projekti
10 parasta tapaa pilata Liferay-projekti
 
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin  Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
 
Terveiset Adobe Max 2013:sta
Terveiset Adobe Max 2013:staTerveiset Adobe Max 2013:sta
Terveiset Adobe Max 2013:sta
 
Online Tuotantoprosessi2007
Online Tuotantoprosessi2007Online Tuotantoprosessi2007
Online Tuotantoprosessi2007
 
Sovelto Channel -esittely
Sovelto Channel -esittelySovelto Channel -esittely
Sovelto Channel -esittely
 
Tehoa liiketoimintaan Dynamics NAV 2015 uusilla ominaisuuksilla | CGI:n Micro...
Tehoa liiketoimintaan Dynamics NAV 2015 uusilla ominaisuuksilla | CGI:n Micro...Tehoa liiketoimintaan Dynamics NAV 2015 uusilla ominaisuuksilla | CGI:n Micro...
Tehoa liiketoimintaan Dynamics NAV 2015 uusilla ominaisuuksilla | CGI:n Micro...
 
Aamiaisseminaari 5.4.2012: HTML5 - Oikotie onneen?
Aamiaisseminaari 5.4.2012: HTML5 - Oikotie onneen?Aamiaisseminaari 5.4.2012: HTML5 - Oikotie onneen?
Aamiaisseminaari 5.4.2012: HTML5 - Oikotie onneen?
 
Mobie Zine -aamiaisseminaari 25.9.2012
Mobie Zine -aamiaisseminaari 25.9.2012Mobie Zine -aamiaisseminaari 25.9.2012
Mobie Zine -aamiaisseminaari 25.9.2012
 
Lisäarvoa digitaaliseen julkaisemiseen eDocker-ratkaisulla
Lisäarvoa digitaaliseen julkaisemiseen eDocker-ratkaisullaLisäarvoa digitaaliseen julkaisemiseen eDocker-ratkaisulla
Lisäarvoa digitaaliseen julkaisemiseen eDocker-ratkaisulla
 
Responsiiviset layoutit study
Responsiiviset layoutit studyResponsiiviset layoutit study
Responsiiviset layoutit study
 

More from Sovelto

LOISTO-palvelu
LOISTO-palveluLOISTO-palvelu
LOISTO-palvelu
Sovelto
 
Windows 10 hallinnan näkökulmasta
Windows 10 hallinnan näkökulmastaWindows 10 hallinnan näkökulmasta
Windows 10 hallinnan näkökulmasta
Sovelto
 
Windows 10 käyttäjän näkökulmasta
Windows 10 käyttäjän näkökulmastaWindows 10 käyttäjän näkökulmasta
Windows 10 käyttäjän näkökulmasta
Sovelto
 
Tilaisuuden avaus: Kalaparvi liikkuu
Tilaisuuden avaus: Kalaparvi liikkuuTilaisuuden avaus: Kalaparvi liikkuu
Tilaisuuden avaus: Kalaparvi liikkuu
Sovelto
 
Ansaintamallin voi muuttaa
Ansaintamallin voi muuttaaAnsaintamallin voi muuttaa
Ansaintamallin voi muuttaa
Sovelto
 
Osallista ihmiset mukaan muutokseen
Osallista ihmiset mukaan muutokseen Osallista ihmiset mukaan muutokseen
Osallista ihmiset mukaan muutokseen
Sovelto
 
Ajankohtaista tutkimustietoa
Ajankohtaista tutkimustietoaAjankohtaista tutkimustietoa
Ajankohtaista tutkimustietoa
Sovelto
 
Yhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukenaYhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukena
Sovelto
 
Hyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuusHyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuus
Sovelto
 
Tietotyön uusi kulttuuri
Tietotyön uusi kulttuuriTietotyön uusi kulttuuri
Tietotyön uusi kulttuuri
Sovelto
 
Intune ja Azure RMS
Intune ja Azure RMSIntune ja Azure RMS
Intune ja Azure RMS
Sovelto
 
Azure Active Directory
Azure Active DirectoryAzure Active Directory
Azure Active Directory
Sovelto
 
3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä
Sovelto
 
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen ​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
Sovelto
 
Seminaarin avaussanat
Seminaarin avaussanatSeminaarin avaussanat
Seminaarin avaussanat
Sovelto
 
Esimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, TilannejohtaminenEsimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, Tilannejohtaminen
Sovelto
 
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
 Miten yritysarkkitehtuurilla kehitetään strategista johtamista Miten yritysarkkitehtuurilla kehitetään strategista johtamista
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
Sovelto
 
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Sovelto
 
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Sovelto
 
Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?
Sovelto
 

More from Sovelto (20)

LOISTO-palvelu
LOISTO-palveluLOISTO-palvelu
LOISTO-palvelu
 
Windows 10 hallinnan näkökulmasta
Windows 10 hallinnan näkökulmastaWindows 10 hallinnan näkökulmasta
Windows 10 hallinnan näkökulmasta
 
Windows 10 käyttäjän näkökulmasta
Windows 10 käyttäjän näkökulmastaWindows 10 käyttäjän näkökulmasta
Windows 10 käyttäjän näkökulmasta
 
Tilaisuuden avaus: Kalaparvi liikkuu
Tilaisuuden avaus: Kalaparvi liikkuuTilaisuuden avaus: Kalaparvi liikkuu
Tilaisuuden avaus: Kalaparvi liikkuu
 
Ansaintamallin voi muuttaa
Ansaintamallin voi muuttaaAnsaintamallin voi muuttaa
Ansaintamallin voi muuttaa
 
Osallista ihmiset mukaan muutokseen
Osallista ihmiset mukaan muutokseen Osallista ihmiset mukaan muutokseen
Osallista ihmiset mukaan muutokseen
 
Ajankohtaista tutkimustietoa
Ajankohtaista tutkimustietoaAjankohtaista tutkimustietoa
Ajankohtaista tutkimustietoa
 
Yhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukenaYhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukena
 
Hyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuusHyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuus
 
Tietotyön uusi kulttuuri
Tietotyön uusi kulttuuriTietotyön uusi kulttuuri
Tietotyön uusi kulttuuri
 
Intune ja Azure RMS
Intune ja Azure RMSIntune ja Azure RMS
Intune ja Azure RMS
 
Azure Active Directory
Azure Active DirectoryAzure Active Directory
Azure Active Directory
 
3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä
 
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen ​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
 
Seminaarin avaussanat
Seminaarin avaussanatSeminaarin avaussanat
Seminaarin avaussanat
 
Esimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, TilannejohtaminenEsimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, Tilannejohtaminen
 
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
 Miten yritysarkkitehtuurilla kehitetään strategista johtamista Miten yritysarkkitehtuurilla kehitetään strategista johtamista
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
 
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
 
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
 
Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?
 

Adobe ja HTML5

  • 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