Download - Prototyping med Microsoft Web Matrix
![Page 1: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/1.jpg)
![Page 2: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/2.jpg)
PROTOTYPING MED MICROSOFT WEBMATRIX
Funksjonell dynamisk prototyping
NITHØyvind Malin15/09
![Page 3: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/3.jpg)
GrensesnittsutviklerNITH 2011
Øyvind Malin
PERSONER
![Page 4: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/4.jpg)
AGENDA
Hva er WebMatrix?
Hva er prototyping
Hvorfor WM til prototyping?
Razor Syntax
Demo: Helpers
Demo: Open Source Apps
Demo: Templates
Demo: App
![Page 5: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/5.jpg)
HVA DETTE FOREDRAGET IKKE ER?
Fullstendig introduksjon til Microsoft WebMatrix
![Page 6: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/6.jpg)
BEKK inviterer til fagkveld i våre
lokaler på Vippetangen i Oslo.
FAGKVELD 13. OKTOBER
13. oktober
http://www.bekk.no/fagkveld
![Page 7: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/7.jpg)
FORELØBIG PROGRAM
Press Play! On Tape
The browser – uncovered
Krøss-plattform –utvikling mobilt
Introduksjon til Ruby
Domain Driven Security Code Kata
![Page 8: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/8.jpg)
HVA ER MICROSOFT WEBMATRIX?
Microsoft Webmatrix er et nytt gratis vekrtøy for webutvikling fra Microsoft. - Razor syntax- Helpers- OpenSource Applikasjoner
![Page 9: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/9.jpg)
HVA ER MICROSOFT WEBMATRIX?
Customize PublishCreate
Kilde: Microsoft WebCamps
![Page 10: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/10.jpg)
HVA FÅR DU?
Web Server Database Development Tool
Kilde: Microsoft WebCamps
![Page 11: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/11.jpg)
HVEM ER DET FOR?
I <3 Web Apps. I just need a tool that makes them easier to configure, customize
and publish them
I want to build web sites myself with an easy to learn tool and
framework
I’m a professional software
developer and I build complex, large scale web
sites with a team of developers
WebMatrix WebMatrix
Visual Studio 2010
Kilde: Microsoft WebCamps
![Page 12: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/12.jpg)
NOEN FLERE?
Prototying
![Page 13: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/13.jpg)
Prototyping
![Page 14: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/14.jpg)
PROTOTYPING
LoFi
![Page 15: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/15.jpg)
PROTOTYPING
HiFi
![Page 16: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/16.jpg)
Klikk - eller drag and drop - for å sette inn bilde
HVORFOR WEBMATRIX TIL PROTOTYPING?
![Page 17: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/17.jpg)
HVORFOR PROTOTYPING MED MICROSOFT WEBMATRIX?
1. Mye funksjonalitet – Lite kode
2. Kort utviklingstid
3. Krever ikke programmeringserfaring
![Page 18: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/18.jpg)
RAZOR SYNTAX
• Svært enkel måte å kode websider
• Lett å mikse mellom kode og markup
• Veldig mange nyttige hjelpere
![Page 19: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/19.jpg)
RAZOR SYNTAX – SAMMENLIGNING
<ul> <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %></ul>
<ul> @for (int i = 0; i < 10; i++) { <li>@i</li> }</ul>
Razor (2 markup transitions):
Web Forms (6 markup transitions):
<ul> <?php for ($i = 0; $i < 10; $i++) { echo("<li>$i</li>"); } ?></ul>
PHP(2 markup transitions
& an echo):
![Page 20: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/20.jpg)
RAZOR SYNTAX – SKILLE MELLOM KODE OG MARKUP
@{ var name = “John Doe”; <div> Your name: @name </div>}
@{ var name = “John Doe”; @: Your name: @name}
Option 3:Single line of output
in markup
Option 1:HTML Block
@{ var name = “John Doe”; <text> Your name: @name </text>}
Option 2:Text Block
![Page 21: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/21.jpg)
RAZOR SYNTAX – KOMMENTARER
@* <div> Hello World </div>*@
@* @{ var name = "John Doe"; @name }*@
Option 3:Both
Option 1:Markup
@{ //var name = "John Doe”; //@name}
Option 2:Code
![Page 22: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/22.jpg)
Demo
Helpers
![Page 23: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/23.jpg)
Demo
OpenSource apps
![Page 24: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/24.jpg)
Demo
Templates
![Page 25: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/25.jpg)
Demo
App
![Page 26: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/26.jpg)
Demo
Deploying
![Page 27: Prototyping med Microsoft Web Matrix](https://reader035.vdocuments.site/reader035/viewer/2022062511/54c3c01d4a7959a00b8b45c8/html5/thumbnails/27.jpg)
Øyvind Malin
Konsulent, Interactive
[email protected] / Tlf. 909 71 598
TAKK FOR MEG
Spørsmål?
http://www.bekk.no
@oyvindmal
http://oyvindm.no