0
Guru Days — Riittääkö HTML5 sovellusalustaksi?<br />Jani Järvinen, Moonsoft OyC# MVP<br />5.10.2011<br />
Mikä on HTML5 ja mihin sitä tarvitaan?<br />HTML5-kehittäminen Visual Studio 2010:llä<br />Miten tukea useita alustoja ja ...
Mikä HTML5?<br />Tutustutaan ehdotukseen uudeksi standardiksi<br />5.10.2011<br />
Määrittelyvaiheessa oleva standardi<br />HTML5 tuo monia tervetulleitauudistuksia<br />Paljon muutakin kuin pelkkä ääni ja...
Canvas-elementti<br />Ääni- ja videotoiston tuki ilman selainlaajennuksia<br />Semanttiset elementit<br />Web Storage<br /...
<!DOCTYPE html> <br /><html lang="fi"> <br /><headmanifest=”cache.manifest”> <br />  <meta charset="utf-8"> <br />  <title...
Merkitys sisällölle<br />Otsikot, sivuhuomautukset, leipäteksti, alaviitteet, jne.<br />HTML5:n header-, footer-, section-...
<canvasid=”mycanvas" width="300" height="300"></canvas><br /><scripttype="text/javascript"><br />varmyCanvas = document.ge...
Microsoft-ohjeistusta:<br />Internet Explorer 10 Guide for Developers<br />http://msdn.microsoft.com/en-us/ie/gg192966<br ...
Mitä ominaisuuksia sovellusalustalta vaaditaan?<br />5.10.2011<br />HTML5 sovellusalustana<br />
Microsoft ja HTML5<br />Mitä kehittäjille tarjotaan tänään?<br />5.10.2011<br />
Kehittäjille on tarjolla kehitysvälineitä sekä selain<br />Visual Studio 2010 SP1<br />HTML5-syntaksin validiointi<br />In...
Asentamalla SP1:n VisualStudioon saadaan käyttöönHTML5-ominaisuuksia<br />Validitointituki<br />Tarkistaa HTML5-syntaksin<...
ASP.NET WebForms ei kunnolla tue HTML5:ttä<br />Paremmat mahdollisuudet löytyvät uusista tekniikoista<br />Erityisesti ASP...
Semanttinen suunnittelu<br />Visuaalista tukea ei toistaiseksi lainkaan<br />SVG-grafiikka<br />Vektorigrafiikkamuoto (Sca...
Miten tuetaan useita alustoja?<br />Yhteensopivan koodin kirjoittaminen<br />5.10.2011<br />
Wikipedia 4.10.2011:<br />5.10.2011<br />Selaintuki (pc-selaimet)<br />
Haaste: suuri määrä päätelaitteita ja selaimia<br />HTML5:n myötä tilanne toivottavasti paranee<br />Kestää vuosia saavutt...
jQuery ja jQuery UI<br />Nykypäivän peruskirjastot käyttöliittymiin<br />Tulevat mukana ASP.NET 4 -sovelluksissa<br />WebF...
HTML5-tuki tulossa kovaa vauhtia myös mobiiliselaimiin<br />Toistaiseksi tuki hajanaista, mutta seuraava laitesukupolvi on...
Voiko sama HTML5-sovellus toimia kaikissa ympäristöissä?<br />PC, tabletti, mobiili, …<br />Erilaiset käyttötilanteet, eri...
Windows 8<br />Mitä kehittäjille tarjotaan tänään?<br />5.10.2011<br />
Kaksi käyttöliittymää<br />Perinteinen Windows 7 ja Metro<br />Metroa ohjelmoidaan uusillaWindows Runtime -rajapinnoilla (...
5.10.2011<br />Windows 8<br />
Tarjoaa sovellusten tyypillisesti tarvitsemia palveluita, mm.<br />Käyttöliittymä- ja shell-integraatiot<br />Tietokantayh...
Silverlight-sovellusten kehittämisen käyttöliittymäkieli<br />Extensible Application Markup Language<br />Tärkeä osa Windo...
Keskustelua<br />Mikä on HTML5:n tulevaisuus, entä miten käy Silverlightille?<br />5.10.2011<br />
Mikä on Silverlight-tekniikan tulevaisuus?<br />Jos kerran HTML5:llä voi tehdä kaiken, miksi käyttää hopeavaloa?<br />Onko...
Jaa ajatuksiasi<br />Esitä kysymyksiä<br />5.10.2011<br />Sana on vapaa!<br />
Kehittäjäkoulutuksissa ota yhteyttä Salcomiin<br />myynti@salcom.fi<br />puh. 020 764 1010<br />www.salcom.fi<br />5.10.20...
Upcoming SlideShare
Loading in...5
×

Guru days 5.10.2011 html5 ja silverlight

681

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
681
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Guru days 5.10.2011 html5 ja silverlight"

  1. 1. Guru Days — Riittääkö HTML5 sovellusalustaksi?<br />Jani Järvinen, Moonsoft OyC# MVP<br />5.10.2011<br />
  2. 2. Mikä on HTML5 ja mihin sitä tarvitaan?<br />HTML5-kehittäminen Visual Studio 2010:llä<br />Miten tukea useita alustoja ja päätelaitteita HTML5-sovelluksissa<br />Silverlightintulevaisuus, jyrääkö HTML5 yli?<br />Entä tuleva Windows 8?<br />Keskustelua sekä kysymyksiä ja vastauksia<br />5.10.2011<br />Agenda 5.10.2011<br />
  3. 3. Mikä HTML5?<br />Tutustutaan ehdotukseen uudeksi standardiksi<br />5.10.2011<br />
  4. 4. Määrittelyvaiheessa oleva standardi<br />HTML5 tuo monia tervetulleitauudistuksia<br />Paljon muutakin kuin pelkkä ääni ja kuva<br />Se mikä mediassa tunnetaan HTML5:näon itse asiassa joukko erilaisia standardiluonnoksia<br />Taustalla W3C, WHATWG ja IETF<br />http://dev.w3.org/html5/spec/Overview.html<br />5.10.2011<br />HTML5 – yleiskuva<br />
  5. 5. Canvas-elementti<br />Ääni- ja videotoiston tuki ilman selainlaajennuksia<br />Semanttiset elementit<br />Web Storage<br />WebSockets<br />Geolocation API<br />Web Workers<br />Drag & drop<br />Application Cache (offline-käyttö)<br />Mikroformaatit<br />CSS3, lukuisat uudet moduulit<br />…<br />5.10.2011<br />HTML5:n uutuuksia<br />
  6. 6. <!DOCTYPE html> <br /><html lang="fi"> <br /><headmanifest=”cache.manifest”> <br /> <meta charset="utf-8"> <br /> <title>HTML5-esimerkki</title> <br /> <scriptasyncsrc="koodia.js” /><br /></head> <br /><body> <br /> <headerid="main-header"></header> <br /> <sectionid="content"><br /> Tekstiä... <br /> <asideid="form"> <br /> <formaction="/liity" method="post"> <br /> <input id="email" type="email"><br /> </form> <br /> </aside> <br /> <figure> <br /> <a href="/sivu2"><img src="kuva1.png" alt="kuvaus"></a><br /> </figure> <br /> </section> <br /></body> <br /></html> <br />5.10.2011<br />HTML5-esimerkki<br />
  7. 7. Merkitys sisällölle<br />Otsikot, sivuhuomautukset, leipäteksti, alaviitteet, jne.<br />HTML5:n header-, footer-, section-, aside-elementit, jne.<br />Korvaavat div-elementit<br />Mikroformaatit (microdata)<br />Tarjoavat mahdollisuuden kuvata sisältöä vieläkin tarkemmin, esimerkiksi osoitetiedot<br />Esim. Google tukee<br /><section itemprop="address" itemscopeitemtype="http://data-vocabulary.org/Address">I live at <span itemprop="street-address">1234 Peach Drive</span><span itemprop="locality">Warner Robins</span> <span itemprop="region">Georgia</span></section> <br />5.10.2011<br />Semanttisuus<br />
  8. 8. <canvasid=”mycanvas" width="300" height="300"></canvas><br /><scripttype="text/javascript"><br />varmyCanvas = document.getElementById(”mycanvas");<br />varmyContext = myCanvas.getContext("2d");<br />myContext.fillStyle = '#00f';<br />myContext.strokeStyle = '#F63806';<br />myContext.lineWidth= 4;<br />myContext.fillRect(0,0,300,300);<br />myContext.strokeRect(0,0,300,300);<br />myContext.moveTo(150,0);<br />myContext.lineTo(0,150);<br />myContext.lineTo(150,300);<br />myContext.lineTo(300,150);<br />myContext.lineTo(150,0); <br />myContext.fillStyle= '#F63806';<br />myContext.strokeStyle = "#000";<br />myContext.fill();<br />myContext.stroke();<br /></script><br />5.10.2011<br />Canvas-esimerkki<br />
  9. 9. Microsoft-ohjeistusta:<br />Internet Explorer 10 Guide for Developers<br />http://msdn.microsoft.com/en-us/ie/gg192966<br />5.10.2011<br />Muita uutuuksia<br />CACHE MANIFEST/test.css/test.js/test.png<br />functionshowMap(position) { … } navigator.geolocation.<br />getCurrentPosition(showMap);<br />varecho = new Worker('echo.js'); echo.onmessage = function(e) {alert(e.data); }<br />
  10. 10. Mitä ominaisuuksia sovellusalustalta vaaditaan?<br />5.10.2011<br />HTML5 sovellusalustana<br />
  11. 11. Microsoft ja HTML5<br />Mitä kehittäjille tarjotaan tänään?<br />5.10.2011<br />
  12. 12. Kehittäjille on tarjolla kehitysvälineitä sekä selain<br />Visual Studio 2010 SP1<br />HTML5-syntaksin validiointi<br />IntelliSense-tuki<br />CSS3-ominaisuuksia<br />Internet Explorer<br />9.0-versio saatavilla RTM:nä<br />10.0-versio Windows 8 Preview:n mukana<br />Muita ohjelmistoja joissa HTML5-tukea<br />Expression Web 4<br />5.10.2011<br />Microsoft ja HTML5<br />
  13. 13. Asentamalla SP1:n VisualStudioon saadaan käyttöönHTML5-ominaisuuksia<br />Validitointituki<br />Tarkistaa HTML5-syntaksin<br />Ei itsessään päivity jatkuvasti,aivan viimeisimpiä asioita ei tueta<br />Katso ”Web Standards Update forVisual Studio 2010 SP1”<br />IntelliSense-tuki<br />Tuki uusille elementeille, jne.<br />5.10.2011<br />Visual Studio 2010<br />
  14. 14. ASP.NET WebForms ei kunnolla tue HTML5:ttä<br />Paremmat mahdollisuudet löytyvät uusista tekniikoista<br />Erityisesti ASP.NET MVC<br />Perinteisiä WebForms-kontrolleja ei käytetä<br />Mahdollisuus paremmin vaikuttaa tuotettavaan koodiin<br />HTML-helper -olio ei tunne HTML5-toimintoja<br />Tuleva Visual Studio ”11” sisältää parempaa tukea<br />Mukana Windows 8 DeveloperPreviewssä<br />5.10.2011<br />ASP.NET ja HTML5<br />
  15. 15. Semanttinen suunnittelu<br />Visuaalista tukea ei toistaiseksi lainkaan<br />SVG-grafiikka<br />Vektorigrafiikkamuoto (Scalable Vector Graphics)<br />Mitä ratkaisuja Microsoftilla on tarjota?<br />Expression Web, Expression Design<br />Semanttinen Word?<br />Toistaiseksi tarvitaan myös esim. Adoben tuotteita, kuten Illustrator<br />5.10.2011<br />Mille muulle tarvitaan tukea?<br />
  16. 16. Miten tuetaan useita alustoja?<br />Yhteensopivan koodin kirjoittaminen<br />5.10.2011<br />
  17. 17. Wikipedia 4.10.2011:<br />5.10.2011<br />Selaintuki (pc-selaimet)<br />
  18. 18. Haaste: suuri määrä päätelaitteita ja selaimia<br />HTML5:n myötä tilanne toivottavasti paranee<br />Kestää vuosia saavuttaa vakaa tila<br />Vertailun vuoksi: HTML5:n arvellaan olevan suositus vasta vuonna 2022<br />Nyrkkisääntö<br />Älä yritä seurata selaimia ja niiden versionumeroita<br />Pikemminkin kysy selaimelta tuetaanko ominaisuutta vai ei<br />Vertaa: ASP.NET ja IE 10.0<br />Testaa, testaa, testaa<br />5.10.2011<br />Useiden alustojen tukeminen<br />
  19. 19. jQuery ja jQuery UI<br />Nykypäivän peruskirjastot käyttöliittymiin<br />Tulevat mukana ASP.NET 4 -sovelluksissa<br />WebForms ja MVC<br />Modernizr<br />Hyödyllinen kirjasto, jolla voidaan tarkistaa selainten HTML5-yhteensopivuus<br />www.modernizr.com<br />5.10.2011<br />JavaScript-kirjastoja<br />
  20. 20. HTML5-tuki tulossa kovaa vauhtia myös mobiiliselaimiin<br />Toistaiseksi tuki hajanaista, mutta seuraava laitesukupolvi on selvästi parempi<br />Esimerkiksi Microsoft Windows Phone 7.5 ”Mango”<br />Internet Explorer 9 -selain runkona<br />Toisin sanoen, myös HTML5-tukea<br />5.10.2011<br />Mobiilimaailma<br />
  21. 21. Voiko sama HTML5-sovellus toimia kaikissa ympäristöissä?<br />PC, tabletti, mobiili, …<br />Erilaiset käyttötilanteet, erilaiset ruutukoot, …<br />Kevyempi vaihtoehto<br />Sovellus kaikille selaimille yhdessä ympäristössä<br />Entä taustajärjestelmät?<br />Toimiiko sama toteutus niissä?<br />Tekniikka vielä uutta<br />Laajaa sovellusmäärää ei vielä ole<br />5.10.2011<br />Samalla toteutuksella?<br />
  22. 22. Windows 8<br />Mitä kehittäjille tarjotaan tänään?<br />5.10.2011<br />
  23. 23. Kaksi käyttöliittymää<br />Perinteinen Windows 7 ja Metro<br />Metroa ohjelmoidaan uusillaWindows Runtime -rajapinnoilla (WinRT)<br />Teknisinä välineinä<br />HTML5 + CSS + JavaScript<br />C# ja XAML<br />C++ ja XAML<br />Perinteiset välineet eivät kelpaa Metroon<br />C#, .NET<br />Win32<br />5.10.2011<br />Windows 8<br />
  24. 24. 5.10.2011<br />Windows 8<br />
  25. 25. Tarjoaa sovellusten tyypillisesti tarvitsemia palveluita, mm.<br />Käyttöliittymä- ja shell-integraatiot<br />Tietokantayhteydet<br />Tilanhallinta<br />jne.<br />Käytettävissä Metro-sovelluksista JavaScript-kirjastojen kautta<br />WinJS-kirjastot<br />5.10.2011<br />Windows Runtime<br />
  26. 26. Silverlight-sovellusten kehittämisen käyttöliittymäkieli<br />Extensible Application Markup Language<br />Tärkeä osa Windows Phone -kehittämistä<br />Tuettuna myös Windows 8:ssa<br />5.10.2011<br />XAML-kieli<br />
  27. 27. Keskustelua<br />Mikä on HTML5:n tulevaisuus, entä miten käy Silverlightille?<br />5.10.2011<br />
  28. 28. Mikä on Silverlight-tekniikan tulevaisuus?<br />Jos kerran HTML5:llä voi tehdä kaiken, miksi käyttää hopeavaloa?<br />Onko XAML-osaaminen hukkaan heitettyä?<br />Kannattaako Suomessa edes tehdä ohjelmistoja, kun HTML+JavaScript -koodauksen voi ostaa vaikkaAasiasta kolmasosalla hinnasta?<br />Entä .NET-osaaminen, tarvitaanko sitä jatkossa?<br />Jos sovelluksista tulee Metro-sovelluksia, onko opeteltava uusi Windows Runtime?<br />5.10.2011<br />Miten käy Silverlightin?<br />
  29. 29. Jaa ajatuksiasi<br />Esitä kysymyksiä<br />5.10.2011<br />Sana on vapaa!<br />
  30. 30. Kehittäjäkoulutuksissa ota yhteyttä Salcomiin<br />myynti@salcom.fi<br />puh. 020 764 1010<br />www.salcom.fi<br />5.10.2011<br />Kiitos!<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×