prototyping med microsoft web matrix

PROTOTYPING MED MICROSOFT WEBMATRIX

Funksjonell dynamisk prototyping

NITHØyvind Malin15/09

GrensesnittsutviklerNITH 2011

Øyvind Malin

PERSONER

AGENDA

Hva er WebMatrix?

Hva er prototyping

Hvorfor WM til prototyping?

Razor Syntax

Demo: Helpers

Demo: Open Source Apps

Demo: Templates

Demo: App

HVA DETTE FOREDRAGET IKKE ER?

Fullstendig introduksjon til Microsoft WebMatrix

BEKK inviterer til fagkveld i våre

lokaler på Vippetangen i Oslo.

FAGKVELD 13. OKTOBER

13. oktober

http://www.bekk.no/fagkveld

FORELØBIG PROGRAM

Press Play! On Tape

The browser – uncovered

Krøss-plattform –utvikling mobilt

Introduksjon til Ruby

Domain Driven Security Code Kata

HVA ER MICROSOFT WEBMATRIX?

Microsoft Webmatrix er et nytt gratis vekrtøy for webutvikling fra Microsoft. - Razor syntax- Helpers- OpenSource Applikasjoner

HVA ER MICROSOFT WEBMATRIX?

Customize PublishCreate

Kilde: Microsoft WebCamps

HVA FÅR DU?

Web Server Database Development Tool


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


NOEN FLERE?

Prototying

Prototyping

PROTOTYPING

LoFi

PROTOTYPING

HiFi

Klikk - eller drag and drop - for å sette inn bilde

HVORFOR WEBMATRIX TIL PROTOTYPING?

HVORFOR PROTOTYPING MED MICROSOFT WEBMATRIX?

1. Mye funksjonalitet – Lite kode

2. Kort utviklingstid

3. Krever ikke programmeringserfaring

RAZOR SYNTAX

• Svært enkel måte å kode websider

• Lett å mikse mellom kode og markup

• Veldig mange nyttige hjelpere

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):

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

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

Demo

Helpers

Demo

OpenSource apps

Demo

Templates

Demo

App

Demo

Deploying

Øyvind Malin

Konsulent, Interactive

[email protected] / Tlf. 909 71 598

TAKK FOR MEG

Spørsmål?

http://www.bekk.no

@oyvindmal

http://oyvindm.no

mailto:[email protected]

http://www.bekk.no/

prototyping med microsoft web matrix

Design