Your SlideShare is downloading. ×
0
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Guru days 5.10.2011   html5 ja silverlight
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Guru days 5.10.2011 html5 ja silverlight

678

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Guru Days — Riittääkö HTML5 sovellusalustaksi?<br />Jani Järvinen, Moonsoft OyC# MVP<br />5.10.2011<br />
  • 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. Mikä HTML5?<br />Tutustutaan ehdotukseen uudeksi standardiksi<br />5.10.2011<br />
  • 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. 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 &amp; 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. &lt;!DOCTYPE html&gt; <br />&lt;html lang=&quot;fi&quot;&gt; <br />&lt;headmanifest=”cache.manifest”&gt; <br /> &lt;meta charset=&quot;utf-8&quot;&gt; <br /> &lt;title&gt;HTML5-esimerkki&lt;/title&gt; <br /> &lt;scriptasyncsrc=&quot;koodia.js” /&gt;<br />&lt;/head&gt; <br />&lt;body&gt; <br /> &lt;headerid=&quot;main-header&quot;&gt;&lt;/header&gt; <br /> &lt;sectionid=&quot;content&quot;&gt;<br /> Tekstiä... <br /> &lt;asideid=&quot;form&quot;&gt; <br /> &lt;formaction=&quot;/liity&quot; method=&quot;post&quot;&gt; <br /> &lt;input id=&quot;email&quot; type=&quot;email&quot;&gt;<br /> &lt;/form&gt; <br /> &lt;/aside&gt; <br /> &lt;figure&gt; <br /> &lt;a href=&quot;/sivu2&quot;&gt;&lt;img src=&quot;kuva1.png&quot; alt=&quot;kuvaus&quot;&gt;&lt;/a&gt;<br /> &lt;/figure&gt; <br /> &lt;/section&gt; <br />&lt;/body&gt; <br />&lt;/html&gt; <br />5.10.2011<br />HTML5-esimerkki<br />
  • 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 />&lt;section itemprop=&quot;address&quot; itemscopeitemtype=&quot;http://data-vocabulary.org/Address&quot;&gt;I live at &lt;span itemprop=&quot;street-address&quot;&gt;1234 Peach Drive&lt;/span&gt;&lt;span itemprop=&quot;locality&quot;&gt;Warner Robins&lt;/span&gt; &lt;span itemprop=&quot;region&quot;&gt;Georgia&lt;/span&gt;&lt;/section&gt; <br />5.10.2011<br />Semanttisuus<br />
  • 8. &lt;canvasid=”mycanvas&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;<br />&lt;scripttype=&quot;text/javascript&quot;&gt;<br />varmyCanvas = document.getElementById(”mycanvas&quot;);<br />varmyContext = myCanvas.getContext(&quot;2d&quot;);<br />myContext.fillStyle = &apos;#00f&apos;;<br />myContext.strokeStyle = &apos;#F63806&apos;;<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= &apos;#F63806&apos;;<br />myContext.strokeStyle = &quot;#000&quot;;<br />myContext.fill();<br />myContext.stroke();<br />&lt;/script&gt;<br />5.10.2011<br />Canvas-esimerkki<br />
  • 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(&apos;echo.js&apos;); echo.onmessage = function(e) {alert(e.data); }<br />
  • 10. Mitä ominaisuuksia sovellusalustalta vaaditaan?<br />5.10.2011<br />HTML5 sovellusalustana<br />
  • 11. Microsoft ja HTML5<br />Mitä kehittäjille tarjotaan tänään?<br />5.10.2011<br />
  • 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. 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. 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. 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. Miten tuetaan useita alustoja?<br />Yhteensopivan koodin kirjoittaminen<br />5.10.2011<br />
  • 17. Wikipedia 4.10.2011:<br />5.10.2011<br />Selaintuki (pc-selaimet)<br />
  • 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. 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. 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. 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. Windows 8<br />Mitä kehittäjille tarjotaan tänään?<br />5.10.2011<br />
  • 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. 5.10.2011<br />Windows 8<br />
  • 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. 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. Keskustelua<br />Mikä on HTML5:n tulevaisuus, entä miten käy Silverlightille?<br />5.10.2011<br />
  • 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. Jaa ajatuksiasi<br />Esitä kysymyksiä<br />5.10.2011<br />Sana on vapaa!<br />
  • 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 />

×