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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Guru days 5.10.2011 html5 ja silverlight

658
views

Published on


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

  • Be the first to like this

No Downloads
Views
Total Views
658
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
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?
    Jani Järvinen, Moonsoft OyC# MVP
    5.10.2011
  • 2. Mikä on HTML5 ja mihin sitä tarvitaan?
    HTML5-kehittäminen Visual Studio 2010:llä
    Miten tukea useita alustoja ja päätelaitteita HTML5-sovelluksissa
    Silverlightintulevaisuus, jyrääkö HTML5 yli?
    Entä tuleva Windows 8?
    Keskustelua sekä kysymyksiä ja vastauksia
    5.10.2011
    Agenda 5.10.2011
  • 3. Mikä HTML5?
    Tutustutaan ehdotukseen uudeksi standardiksi
    5.10.2011
  • 4. Määrittelyvaiheessa oleva standardi
    HTML5 tuo monia tervetulleitauudistuksia
    Paljon muutakin kuin pelkkä ääni ja kuva
    Se mikä mediassa tunnetaan HTML5:näon itse asiassa joukko erilaisia standardiluonnoksia
    Taustalla W3C, WHATWG ja IETF
    http://dev.w3.org/html5/spec/Overview.html
    5.10.2011
    HTML5 – yleiskuva
  • 5. Canvas-elementti
    Ääni- ja videotoiston tuki ilman selainlaajennuksia
    Semanttiset elementit
    Web Storage
    WebSockets
    Geolocation API
    Web Workers
    Drag & drop
    Application Cache (offline-käyttö)
    Mikroformaatit
    CSS3, lukuisat uudet moduulit

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