SlideShare uma empresa Scribd logo
1 de 93
Baixar para ler offline
Introductie tot :,[object Object],[object Object]
ASP.NET MVC
Cloud Computing – Windows Azure,[object Object]
Agenda :,[object Object], ,[object Object],Wat iedere desktop, web, mobile, ... programmeur zeker moet weten over HTML5,[object Object],[object Object]
Browser vergelijking
Het verschil in model tussen xhtml, html4 en html5
Database op de client
Oude browsers doen werken met html5
De nieuwe form types
Maak iphone, ipad, android, ... apps met html5 ,[object Object],Een overzicht over ASP.NET MVC,[object Object],[object Object]
Voordelen van ASP.NET MVC
URL Routing
Form validatie met ASP.NET MVC,[object Object]
Het klassiek IT capaciteitsprobleem tov de capaciteit in een cloud model
Uit wat bestaat cloud computing?
Enkele softwarepakketten bespreken die nu in de Cloud draaien
Windows Azure : Platform as a service
De volledige azure architectuur bespreken (webroles, workerroles, vmroles, tables, blobs, queues, ...)
De verschillende role modellen
Azure storage in de diepte bekijken
De werking van de queue bespreken
De werking van de Azure content delivery network bespreken
De azure AppFabric caching bespreken
SQL in de cloud
Waarom men in een cloud model de session van een asp.net site moet in de database, table of caching steken.,[object Object]
HTML5beschikbaar op ...,[object Object],Desktop : Windows, Mac, Linux,[object Object],Web : IE9, Chrome, FF, Opera, Safari, ...,[object Object],Mobile: iOS, Android, Blackberry 5+, Symbian 5, webOS, Windows Phone 7 (na de zomer van 2011), ...,[object Object]
HTML5 Doelstelling,[object Object],1x programmeren, overal ter beschikking stellen,[object Object], cross platform,[object Object]
Gratis HTML5 boek,[object Object],http://diveintohtml5.org,[object Object]
HTML5 Wanneer is het klaar ?,[object Object],http://ishtml5readyyet.com/,[object Object],Volgens het W3C in 2014 defintief klaar,[object Object]
HTML5 Test Drive,[object Object],http://ie.microsoft.com/testdrive/,[object Object],Internet Explorer 9,[object Object],Firefox 4 beta,[object Object]
A more beautiful web ...,[object Object],Alles wat je ongeveer met HTML 5 kunt doen,[object Object],http://ie.microsoft.com/testdrive/Views/SiteMap/Default.html,[object Object]
HTML5 – Nieuwe HTML tags,[object Object],De <div> tag heeft nu verchillende varianten gekregen,[object Object]
DEMOSymantic Markup,[object Object]
Het verschil in model tussen ,[object Object],vroeger en HTML 5 ...,[object Object]
Old school Model,[object Object],Server,[object Object],Gebruiker,[object Object],browser,[object Object],HTTP GET/POST,[object Object],ASP.NET,[object Object],Dynamischgegenereerde HTML,[object Object],Database,[object Object],DB,[object Object]
AJAX Model,[object Object],Server,[object Object],Gebruiker,[object Object],HTTP GET/POST,[object Object],ASP.NET,[object Object],browser,[object Object],Dynamischgegenereerde HTML,[object Object],HTTP GET/POST,[object Object],WCF,[object Object],(json, xml, ...),[object Object],JS,[object Object],XML Data,[object Object],Database,[object Object],DB,[object Object]
DEMOOld School Ajax,[object Object]
HTML5 Model,[object Object],Server,[object Object],Gebruiker,[object Object],HTTP GET,[object Object],ASP.NET,[object Object],browser,[object Object],Dynamischgegenereerde HTML,[object Object],HTTP GET,[object Object],WCF,[object Object],(json, xml, ...),[object Object],JS,[object Object],XML Data,[object Object],Database,[object Object],Lokale JS Database,[object Object],DB,[object Object],DB,[object Object]
HTML5 – Local Storage,[object Object]
DEMOHTML5 Local Storage,[object Object]
Wat met oude browsers en HTML5 ?,[object Object],modernizr,[object Object],http://modernizr.com,[object Object]
Modernizr toch HTML5 bij oude browsers,[object Object],Detecteer ALTIJD features, geen browsers!!!,[object Object]
DEMOModernizr + NuGet in VS2010,[object Object]
Nieuwe form input types,[object Object],<input type=“text” />,[object Object],<input type=“search” />,[object Object],<input type=“tel” />,[object Object],<input type=“url” />,[object Object],<input type=“email” />,[object Object],<input type=“datetime” />,[object Object],<input type=“date” />,[object Object],<input type=“month” />,[object Object],<input type=“time” />,[object Object],<input type=“datetime-local” />,[object Object],<input type=“number” />,[object Object],<input type=“range” />,[object Object],<input type=“color” />,[object Object]
Nieuwe form input types,[object Object],Waarom ?,[object Object]
HTML5 + CSS3 + JS =,[object Object],Common Application Platform,[object Object],Desktops, Tablets, Mobile, ...,[object Object]
HTML5 Model (offline apps iPhone, iPad, WP7, Android, ...),[object Object],Apple,[object Object],Device,[object Object],Eenmaligeinstallatie,[object Object],App Engine,[object Object],App Store,[object Object],HTTP GET,[object Object],WCF,[object Object],(json, xml, ...),[object Object],JS,[object Object],XML Data,[object Object],Sync wanneer WIFI of 3G,[object Object],beschikbaar is,[object Object],Server,[object Object],Lokale JS Database,[object Object],Database,[object Object],DB,[object Object],DB,[object Object]
DEMOiPhone website,[object Object]
PhoneGab,[object Object],Open source packager die HTML5 + javascript omzet naar native code,[object Object],(iOS, Android, RIM, Palm, Symbian),[object Object]
In de nabije toekomst ... “web workers”,[object Object],De mogelijkheid om parallel meerdere script te runnen via Threading op de client.,[object Object]
In de nabije toekomst ... “web sockets”,[object Object],Full duplex communicatie over een enkele TCP socket (via poort 80),[object Object]
ASP.NET MVC,[object Object]
Het design pattern,[object Object],Het patroonheeft 3 belangrijkecomponenten (objecten),[object Object],Het is eenalternatief op asp.net forms,[object Object],Het is gebouwdbovenop asp.net forms,[object Object],Maaktgebruik van alle asp.net functionaliteiten,[object Object],System.Web.Mvc is de main assembly,[object Object],Business layer, DAL, …,[object Object],Model,[object Object],View,[object Object],Controller,[object Object],Object datdientvoor de visualisatie,[object Object],Object dat elk event opvangtdatveroorzaaktwordt door eengebruikersactie. Dit object raadpleegttelkens het model object en het retourneerttelkenseen view object,[object Object]
Model – View - Controller,[object Object],Model : Dit zijn de objecten die de uitvoering van de applicatie voor hun rekening nemen (Dit kan het opslaan van gegevens in de DB zijn, maar kan ook een wiskundige optelsom zijn). Dit wordt soms ook de Business Layer genoemd. M.a.w. Alle logica die niets met de interface te maken heeft.,[object Object],Controller : Dit object verwerkt de actie van de gebruiker, stuurt de vraag van de gebruiker door naar de model, krijgt van het model een antwoord terug en stuurt dit antwoord door naar de view.,[object Object],View : Dit is het object dat enkel maar de User Interface weergeeft (html). Doorgaans wordt de view gemaakt door de gegevens dat hij krijgt van de Model. ,[object Object]
De voordelen van ASP.NET MVC,[object Object],Betere scheiding tussen interface en Business laag,[object Object],Maximale controle over de html,[object Object],Complexe routing scenario’s mogelijk,[object Object],Betere ondersteuning voor Test-Driven development,[object Object],Werkt beter tussen designer en developer,[object Object]
Wat niet wordt gebruikt bij ASP.NET MVC,[object Object],Postbacks,[object Object],View States,[object Object],Events (on click events bv),[object Object],Eigen <asp: ... runat=“server” /> controls,[object Object],Vaste aspx bestanden. De view wordt dynamisch at runtime opgebouwd (door de url routing – zie volgende slide),[object Object]
URL Routing,[object Object],Bij ASP.NET FORMS is elke url een fysiek bestand op de server. Bijvoorbeeld : http://www.mijndomein.be/default.aspx?id=4,[object Object]
URL Routing,[object Object],Bij ASP.NET MVC wordt de URL gerouted naar objecten. Bijvoorbeeld :,[object Object],http://www.mijndomein.be/Products/Overview/4,[object Object],{controller}            {action}            {id},[object Object]
URL Routing,[object Object],De routes worden bepaald in de global.asax file,[object Object]
Model,[object Object],MVC - Model,[object Object],[object Object]
De controller stuurt deze objecten door
naar de View
Voorbeelden : DataSet, DataReader, Linq to SQL, Entity Framework, ...,[object Object]
Controller,[object Object],MVC - Controller,[object Object],- De klasse heeft altijd een Controller suffix,[object Object],- De {actions} zijn publieke methodes,[object Object],- Het implementeert de business logica (models),[object Object],- De publieke methodes (de actions) retourneren altijd een View() om op deze manier model objecten naar de views te sturen. Het retourneren van het model naar de view wordt meestal met een nieuw POCO object (ook ViewModel object genaamd) geretourneerd.,[object Object]
Controller,[object Object],MVC - Controller,[object Object],/en/Archive/page1,[object Object],Hier leg ik een beperking op. Deze methode is enkel aanspreekbaar vanuit een GET request,[object Object]
View,[object Object],MVC - View,[object Object],[object Object]
Zit altijd in de map /Views/{controller}/{view}.aspx    of /Views/{controller}/{view}.chtml,[object Object],[object Object],[object Object]
View,[object Object],MVC - View,[object Object],Op deze manier hebben we het model in de view,[object Object],Het object dat geretourneerd wordt door de controller,[object Object]
View,[object Object],MVC – HTML Helpers,[object Object],Helpers klassen die de URL routing, html controls, … automatischgenereren.,[object Object],Bv: Hyperlinks, CheckBox, RadioButton, ListBox, TextBox ,…,[object Object]
View,[object Object],MVC – HTML Helpers,[object Object],Voorbeeld, deze html helper genereertdeze html :,[object Object],<a href=“/en/Archive/3_mic-webcafe”>View more</a>,[object Object],Html attributen,[object Object],Controller,[object Object],Action,[object Object],Tekst van de hyperlink,[object Object],Parameters,[object Object]
View,[object Object],MVC – Partial Views,[object Object],Model,[object Object],Render UserControl,[object Object]
View,[object Object],MVC – Partial Views,[object Object],Als we die UserControl WidgetUpcomingCafe.ascx openenzien we :,[object Object],Model,[object Object]
View,[object Object],MVC – Partial Views,[object Object],En datproduceertdeze HTML :,[object Object]
View,[object Object],MVC – Partial Views,[object Object],En datproduceertdeze HTML :,[object Object]
Model,[object Object],MVC – Form Validatie,[object Object],VoegDataAnnotations using statement toe,[object Object]
Model,[object Object],MVC – Form Validatie,[object Object],VoegDataAnnotations using statement toe,[object Object],Maak via een attribute duidelijkaan de partial class datdit object metadata heeft, en de metadata bevindtzich in een inner class,[object Object]
Controller,[object Object],MVC – Form Validatie,[object Object],Wanneer de model Is Valid …,[object Object]
View,[object Object],MVC – Form Validatie,[object Object],Met de helpersklasseHtml.ValidationMessageFor() kun je de error op het schermlatentonen.,[object Object]
Cloud Computing,[object Object]
CLOUD   Late 2000s & Future,[object Object],De evolutie,[object Object],Cloud Computing, Social Networks,[object Object],Products>Solutions>Services,[object Object],INTERNET    Mid ‘90s,[object Object],Browsers, Email,  eCommerce, ,[object Object],Hosting, Wi-Fi, Web 2.0,[object Object],CLIENT/SERVERMid ‘80s,[object Object],Distributed Computing,[object Object],PC & APPSEarly ’80s,[object Object],MAINFRAME  ’60s & ‘70s,[object Object],Word Processor, Spreadsheets,[object Object],DOS, GUI, Windows,[object Object],Financial, MRP,[object Object],Reservations,[object Object]
Wat is cloud computing?,[object Object],[object Object]
Het verhuizen van de niet-functionele IT activa naar een provider. De verschillen met traditionele hosting,[object Object],[object Object]
Enorme schaalbaarheid
De IT service is volledig beheerd door een provider
De focus ligt op integratie van cloud-cloud toepassingen of cloud traditionele IT toepassingen. ,[object Object]
De capaciteit in een Cloud model,[object Object],Verwachte,[object Object],Load,[object Object],Allocated IT capacities,[object Object],Geen “te weinig capaciteit“,[object Object],IT CAPACITEIT,[object Object],Vermindering van de “over-capaciteit“,[object Object],Minder belasting = minder capaciteit ter beschikking stellen,[object Object],Het verschil van de initiële investering,[object Object],Huidige Load,[object Object],TIJD,[object Object]
Dit is verleden tijd met het cloud model,[object Object]
Enkele bedrijven die cloud computing aanbieden,[object Object],Amazon,[object Object],Google ,[object Object],Vmware ,[object Object],Rackspace,[object Object],Salesforce.com,[object Object],Microsoft,[object Object]
The Microsoft Cloud,[object Object],Meerdere Data Centers in de wereld,[object Object],Quincy, WA,[object Object],Chicago, IL,[object Object],San Antonio, TX,[object Object],Dublin, Ireland,[object Object],Generation 4 DCs,[object Object],Datacenter,[object Object],CDN Point,[object Object]
Cloud computing bestaat uit,[object Object],Infrastructure As A Service (hardware),[object Object],Servers die beschikbaarzijn in de cloud,[object Object],Platform As A Service (developer) ,[object Object],Het beschikbaarstellen van een OS voor cloud-enabled applicaties,[object Object],Ondersteuningvoor de hosting van applicaties,[object Object],Het beschikbaarstellen van een service die de onderlingecommunicatieregelttussenverschillendesystemen,[object Object],Relationele databases in de cloud,[object Object],Software As A Service (eindgebruiker),[object Object],Google Apps,[object Object],Salesforces,[object Object],Office 365,[object Object],Skype,[object Object],Facebook,[object Object],SAAS,[object Object],IAAS,[object Object],PAAS,[object Object]
Dit even bekeken vanuit Microsoft perspectief,[object Object],SAAS,[object Object],IAAS,[object Object],PAAS,[object Object]
Software As A Service,[object Object],PRODUCTIVITEIT,[object Object],SAMENWERKING,[object Object],CRM,[object Object],DATABASE,[object Object],OS,[object Object],MANAGEMENT & SECURITY,[object Object],COMMUNICATIE,[object Object],Traditionele software,[object Object]
Voorbeeld van SAAS : Dynamics CRM Online,[object Object]

Mais conteúdo relacionado

Destaque

Oracle cloud computing strategy
Oracle cloud computing strategyOracle cloud computing strategy
Oracle cloud computing strategyjameskenney
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programminghchen1
 
Oracle Cloud Reference Architecture
Oracle Cloud Reference ArchitectureOracle Cloud Reference Architecture
Oracle Cloud Reference ArchitectureBob Rhubart
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3John Bertucci
 
Oracle IaaS Overview - AIOUG Hyderabad Chapter
Oracle IaaS Overview - AIOUG Hyderabad ChapterOracle IaaS Overview - AIOUG Hyderabad Chapter
Oracle IaaS Overview - AIOUG Hyderabad Chapteraioughydchapter
 
Oracle Cloud Day(IaaS, PaaS,SaaS) - AIOUG Hyd Chapter
Oracle Cloud Day(IaaS, PaaS,SaaS) - AIOUG Hyd ChapterOracle Cloud Day(IaaS, PaaS,SaaS) - AIOUG Hyd Chapter
Oracle Cloud Day(IaaS, PaaS,SaaS) - AIOUG Hyd Chapteraioughydchapter
 
Oracle tech fmw-03-cloud-computing-neum-15.04.2010
Oracle tech fmw-03-cloud-computing-neum-15.04.2010Oracle tech fmw-03-cloud-computing-neum-15.04.2010
Oracle tech fmw-03-cloud-computing-neum-15.04.2010Oracle BH
 

Destaque (10)

Oracle cloud computing strategy
Oracle cloud computing strategyOracle cloud computing strategy
Oracle cloud computing strategy
 
Oracle SaaS Applications Overview
Oracle SaaS Applications OverviewOracle SaaS Applications Overview
Oracle SaaS Applications Overview
 
An Introduction to Ajax Programming
An Introduction to Ajax ProgrammingAn Introduction to Ajax Programming
An Introduction to Ajax Programming
 
Oracle Cloud Reference Architecture
Oracle Cloud Reference ArchitectureOracle Cloud Reference Architecture
Oracle Cloud Reference Architecture
 
Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3Design for Developers: Introduction to Bootstrap 3
Design for Developers: Introduction to Bootstrap 3
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Oracle IaaS Overview - AIOUG Hyderabad Chapter
Oracle IaaS Overview - AIOUG Hyderabad ChapterOracle IaaS Overview - AIOUG Hyderabad Chapter
Oracle IaaS Overview - AIOUG Hyderabad Chapter
 
Oracle Cloud Day(IaaS, PaaS,SaaS) - AIOUG Hyd Chapter
Oracle Cloud Day(IaaS, PaaS,SaaS) - AIOUG Hyd ChapterOracle Cloud Day(IaaS, PaaS,SaaS) - AIOUG Hyd Chapter
Oracle Cloud Day(IaaS, PaaS,SaaS) - AIOUG Hyd Chapter
 
Oracle tech fmw-03-cloud-computing-neum-15.04.2010
Oracle tech fmw-03-cloud-computing-neum-15.04.2010Oracle tech fmw-03-cloud-computing-neum-15.04.2010
Oracle tech fmw-03-cloud-computing-neum-15.04.2010
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 

Semelhante a HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge

Flex In De Praktijk
Flex In De PraktijkFlex In De Praktijk
Flex In De Praktijkmarcel panse
 
Lucius Drupal Development Cursus
Lucius Drupal Development CursusLucius Drupal Development Cursus
Lucius Drupal Development CursusLuciuswebsystems
 
Cursus Zend Framework - 1
Cursus Zend Framework - 1Cursus Zend Framework - 1
Cursus Zend Framework - 1bartjeukendrup
 
Sdb Presentatie
Sdb PresentatieSdb Presentatie
Sdb Presentatiemenfey
 
XPages Introductie
XPages IntroductieXPages Introductie
XPages IntroductieRob Bontekoe
 
Drupal Uitgebreide Starters Training
Drupal Uitgebreide Starters TrainingDrupal Uitgebreide Starters Training
Drupal Uitgebreide Starters TrainingLuciuswebsystems
 
Waarom 42windmills
Waarom 42windmillsWaarom 42windmills
Waarom 42windmills42windmills
 
IT- Presentatie.Net 2011 05
IT- Presentatie.Net 2011 05IT- Presentatie.Net 2011 05
IT- Presentatie.Net 2011 05KatelijneBeheydt
 
Drupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
Drupal + Open Atrium bij de Vlaamse ErfgoedbibliotheekDrupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
Drupal + Open Atrium bij de Vlaamse ErfgoedbibliotheekDavid Coppoolse
 
Third Generation Internet Applications
Third Generation Internet ApplicationsThird Generation Internet Applications
Third Generation Internet ApplicationsPatrick Koning
 
Case Automatisering Gids Sitecore Event 12062008
Case Automatisering Gids Sitecore Event 12062008Case Automatisering Gids Sitecore Event 12062008
Case Automatisering Gids Sitecore Event 12062008efocus.im
 
Html5 jeugdwerknet
Html5 jeugdwerknetHtml5 jeugdwerknet
Html5 jeugdwerknetHans Rossel
 
Web3 - Gemeentelijke Dienstverlening
Web3 - Gemeentelijke DienstverleningWeb3 - Gemeentelijke Dienstverlening
Web3 - Gemeentelijke DienstverleningLars Smeets
 
Devnology Community Day
Devnology Community DayDevnology Community Day
Devnology Community Dayboonzaai
 

Semelhante a HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge (20)

Flex In De Praktijk
Flex In De PraktijkFlex In De Praktijk
Flex In De Praktijk
 
Drupal 7 Architectuur
Drupal 7 ArchitectuurDrupal 7 Architectuur
Drupal 7 Architectuur
 
Lucius Drupal Development Cursus
Lucius Drupal Development CursusLucius Drupal Development Cursus
Lucius Drupal Development Cursus
 
HTML5 Overview
HTML5 OverviewHTML5 Overview
HTML5 Overview
 
Cursus Zend Framework - 1
Cursus Zend Framework - 1Cursus Zend Framework - 1
Cursus Zend Framework - 1
 
Sdb Presentatie
Sdb PresentatieSdb Presentatie
Sdb Presentatie
 
HTML 5 in een vogelvlucht (Dutch)
HTML 5 in een vogelvlucht (Dutch)HTML 5 in een vogelvlucht (Dutch)
HTML 5 in een vogelvlucht (Dutch)
 
Excellent rest met de web api
Excellent rest met de web apiExcellent rest met de web api
Excellent rest met de web api
 
XPages Introductie
XPages IntroductieXPages Introductie
XPages Introductie
 
Drupal Uitgebreide Starters Training
Drupal Uitgebreide Starters TrainingDrupal Uitgebreide Starters Training
Drupal Uitgebreide Starters Training
 
Waarom 42windmills
Waarom 42windmillsWaarom 42windmills
Waarom 42windmills
 
IT- Presentatie.Net 2011 05
IT- Presentatie.Net 2011 05IT- Presentatie.Net 2011 05
IT- Presentatie.Net 2011 05
 
Drupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
Drupal + Open Atrium bij de Vlaamse ErfgoedbibliotheekDrupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
Drupal + Open Atrium bij de Vlaamse Erfgoedbibliotheek
 
Third Generation Internet Applications
Third Generation Internet ApplicationsThird Generation Internet Applications
Third Generation Internet Applications
 
Case Automatisering Gids Sitecore Event 12062008
Case Automatisering Gids Sitecore Event 12062008Case Automatisering Gids Sitecore Event 12062008
Case Automatisering Gids Sitecore Event 12062008
 
The Rails way
The Rails wayThe Rails way
The Rails way
 
Html5 jeugdwerknet
Html5 jeugdwerknetHtml5 jeugdwerknet
Html5 jeugdwerknet
 
Modern web development
Modern web developmentModern web development
Modern web development
 
Web3 - Gemeentelijke Dienstverlening
Web3 - Gemeentelijke DienstverleningWeb3 - Gemeentelijke Dienstverlening
Web3 - Gemeentelijke Dienstverlening
 
Devnology Community Day
Devnology Community DayDevnology Community Day
Devnology Community Day
 

HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo Brugge