Prototyping med Microsoft Webmatrix<br />Funksjonell dynamisk prototyping<br />NITH<br />Øyvind Malin<br />15/09<br />
Personer<br />Øyvind Malin<br />Grensesnittsutvikler<br />NITH 2011<br />
agenda<br />Hva er WebMatrix?<br />Hva er prototyping<br />Hvorfor WM til prototyping?<br />RazorSyntax<br />Demo: Helpers...
HvaDetteforedragetikkeer?<br />Fullstendigintroduksjontil Microsoft WebMatrix<br />
13. oktober<br />Fagkveld 13. oktober<br />BEKK inviterer til fagkveld i våre lokaler på Vippetangen i Oslo.<br />http://w...
Foreløbig program<br />Press Play! On Tape<br />The browser – uncovered<br />Krøss-plattform –utviklingmobilt<br />Introdu...
Hvaer Microsoft WebMatrix?<br />Microsoft Webmatrixer et nytt gratis vekrtøy for webutviklingfra Microsoft. <br /><ul><li>...
Helpers
OpenSourceApplikasjoner</li></li></ul><li>Hvaer Microsoft WebMatrix?<br />Customize<br />Publish<br />Create<br />Kilde: M...
Hvafår du?<br />Web Server<br />Database<br />Development Tool<br />Kilde: Microsoft WebCamps<br />
Hvemerdet for?<br />I’m a professional software developer and I build complex, large scale web sites with a team of develo...
Noen flere?<br />Prototying<br />
Prototyping<br />
Prototyping<br />LoFi<br />
Prototyping<br />HiFi<br />
HvorforWebMatrixtil Prototyping?<br />
Hvorfor prototyping med Microsoft Webmatrix?<br />Myefunksjonalitet – Lite kode<br />Kortutviklingstid<br />Kreverikkeprog...
Razor Syntax<br /><ul><li>Sværtenkelmåteåkodewebsider
Lettåmiksemellomkodeog markup
Veldig mange nyttigehjelpere</li></li></ul><li>Razor Syntax – Sammenligning<br />Web Forms (6 markup transitions):<br /><u...
Razor Syntax – Skillemellomkodeog Markup<br />@{<br />var name = “John Doe”;<br />   <div><br />     Your name: @name<br /...
Razor Syntax – Kommentarer<br />@*<br /> <div><br />    Hello World<br />  </div><br />*@<br />Option 1:<br />Markup<br />...
Demo<br />Helpers<br />
Demo<br />OpenSource apps<br />
Demo<br />Templates<br />
Demo<br />App<br />
Upcoming SlideShare
Loading in …5
×

Prototyping med Microsoft Web Matrix

1,227 views

Published on

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,227
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Tusen takk for at vi fikk lov til komme her i dagForedragsholdere presenterer seg
  • Benytt anledningen til å snakke med oss under middagen etterpå
  • 1 minuteWebMatrix comes with everything you need to get started building websites and web applications:A complete and integrated development environment, with a small download and a simple install. You get a database engine (SQL Server Compact Edition) to handle your data. All the structures you create in this database engine will be compatible with professional versions of SQL Server.WebMatrix supports a Web Server (IIS Express) to serve all your web pages. This web server is compatible with the professional versions of IIS as well.WebMatrix also comes with a new, simple programming framework that allows for rapid development of web sites and web applications. It supports Razor, the latest and simplifiedway to code web sites. It also provides a gallery of free open source applications to complement your development.It comes with an integrated installer that manages the heavy lifting of downloading and installing each component.
  • Benytt anledningen til å snakke med oss under middagen etterpå
  • Prototyping med Microsoft Web Matrix

    1. 1.
    2. 2. Prototyping med Microsoft Webmatrix<br />Funksjonell dynamisk prototyping<br />NITH<br />Øyvind Malin<br />15/09<br />
    3. 3. Personer<br />Øyvind Malin<br />Grensesnittsutvikler<br />NITH 2011<br />
    4. 4. agenda<br />Hva er WebMatrix?<br />Hva er prototyping<br />Hvorfor WM til prototyping?<br />RazorSyntax<br />Demo: Helpers<br />Demo: Open Source Apps<br />Demo: Templates<br />Demo: App<br />
    5. 5. HvaDetteforedragetikkeer?<br />Fullstendigintroduksjontil Microsoft WebMatrix<br />
    6. 6. 13. oktober<br />Fagkveld 13. oktober<br />BEKK inviterer til fagkveld i våre lokaler på Vippetangen i Oslo.<br />http://www.bekk.no/fagkveld<br />
    7. 7. Foreløbig program<br />Press Play! On Tape<br />The browser – uncovered<br />Krøss-plattform –utviklingmobilt<br />Introduksjontil Ruby<br />Domain Driven Security Code Kata<br />
    8. 8. Hvaer Microsoft WebMatrix?<br />Microsoft Webmatrixer et nytt gratis vekrtøy for webutviklingfra Microsoft. <br /><ul><li>Razor syntax
    9. 9. Helpers
    10. 10. OpenSourceApplikasjoner</li></li></ul><li>Hvaer Microsoft WebMatrix?<br />Customize<br />Publish<br />Create<br />Kilde: Microsoft WebCamps<br />
    11. 11. Hvafår du?<br />Web Server<br />Database<br />Development Tool<br />Kilde: Microsoft WebCamps<br />
    12. 12. Hvemerdet for?<br />I’m a professional software developer and I build complex, large scale web sites with a team of developers<br />I want to build web sites myself with an easy to learn tool and framework<br />I <3 Web Apps. I just need a tool that makes them easier to configure, customize and publish them<br />WebMatrix<br />WebMatrix<br />Visual Studio 2010<br />Kilde: Microsoft WebCamps<br />
    13. 13. Noen flere?<br />Prototying<br />
    14. 14. Prototyping<br />
    15. 15. Prototyping<br />LoFi<br />
    16. 16. Prototyping<br />HiFi<br />
    17. 17. HvorforWebMatrixtil Prototyping?<br />
    18. 18. Hvorfor prototyping med Microsoft Webmatrix?<br />Myefunksjonalitet – Lite kode<br />Kortutviklingstid<br />Kreverikkeprogrammeringserfaring<br />
    19. 19. Razor Syntax<br /><ul><li>Sværtenkelmåteåkodewebsider
    20. 20. Lettåmiksemellomkodeog markup
    21. 21. Veldig mange nyttigehjelpere</li></li></ul><li>Razor Syntax – Sammenligning<br />Web Forms (6 markup transitions):<br /><ul><br /><% for (int i = 0; i < 10; i++) { %><br /> <li><% =i %></li><br /><% } %><br /></ul><br /><ul><br /><?php<br /> for ($i = 0; $i < 10; $i++) {<br />echo("<li>$i</li>");<br /> } <br /> ?><br /></ul><br />PHP(2 markup transitions & an echo):<br /><ul><br /> @for (int i = 0; i < 10; i++) {<br /> <li>@i</li><br /> }<br /></ul><br />Razor (2 markup transitions):<br />
    22. 22. Razor Syntax – Skillemellomkodeog Markup<br />@{<br />var name = “John Doe”;<br /> <div><br /> Your name: @name<br /> </div><br />}<br />Option 1:<br />HTML Block<br />@{<br />var name = “John Doe”;<br /> <text><br /> Your name: @name<br /> </text><br />}<br />Option 2:<br />Text Block<br />@{<br />var name = “John Doe”;<br /> @: Your name: @name<br />}<br />Option 3:<br />Single line of output<br />in markup<br />
    23. 23. Razor Syntax – Kommentarer<br />@*<br /> <div><br /> Hello World<br /> </div><br />*@<br />Option 1:<br />Markup<br />@{ <br /> //var name = "John Doe”;<br /> //@name<br />}<br />Option 2:<br />Code<br />@*<br /> @{ <br />var name = "John Doe";<br /> @name<br /> }<br />*@<br />Option 3:<br />Both<br />
    24. 24. Demo<br />Helpers<br />
    25. 25. Demo<br />OpenSource apps<br />
    26. 26. Demo<br />Templates<br />
    27. 27. Demo<br />App<br />
    28. 28. Demo<br />Deploying<br />
    29. 29. Spørsmål?<br />Takk for meg<br />Øyvind Malin<br />Konsulent, Interactive<br />oyvind.malin@bekk.no / Tlf. 909 71 598<br />http://www.bekk.no<br />@oyvindmal<br />http://oyvindm.no<br />

    ×