SlideShare a Scribd company logo
WebMatrix: See What the
Matrix Can Do For You!!
Frederic Harper
Developer Evangelist
Microsoft Canada
Agenda
•   What is WebMatrix?
•   Who is WebMatrix for?
•   Razor syntax
•   Database access
•   Helpers
•   App Gallery & OSS Apps
My goals
My goals
My goals

1. Show you how it’s easy to use WebMatrix to

   create awesome websites or Web applications
WebMatrix
What is WebMatrix
It’s a free tool that makes it easy to

   Create
   Configure
   Publish
your websites and web applications
What is WebMatrix
1. Web App Gallery & Templates
What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
3. Standards Support: HTML, CSS, JavaScript
What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
3. Standards Support: HTML, CSS, JavaScript
4. Scripting Support: ASP.NET & PHP
What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
3. Standards Support: HTML, CSS, JavaScript
4. Scripting Support: ASP.NET & PHP
5. DB Manager: SQL Server & MySQL
What is WebMatrix
1. Web App Gallery & Templates
2. Web Server: IIS Express
3. Standards Support: HTML, CSS, JavaScript
4. Scripting Support: ASP.NET & PHP
5. DB Manager: SQL Server & MySQL
6. Optimization Tools: SEO & Performance
Who is WebMatrix for?




       I <3 Web Apps.        I want to build web      I’m a professional
   I just need a tool that   sites myself with an    software developer
   makes them easier to        easy to learn tool   and I build complex,
    configure, customize        and framework       large scale web sites
         and publish                                    with a team of
                                                         developers
Two ways to build
Two ways to build
         Option A:
       From Scratch
Two ways to build
         Option A:       Option B:
       From Scratch   From Web App
demo
A lap around WebMatrix
Razor
What is Razor
What is Razor
1. A new view engine
What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid
What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid
3. Easy to Learn
What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid
3. Easy to Learn
4. Is not a new language
What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid
3. Easy to Learn
4. Is not a new language
5. Works with any Text Editor
What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid
3. Easy to Learn
4. Is not a new language
5. Works with any Text Editor
6. Has great Intellisense
What is Razor
1. A new view engine
2. Compact, Expressive, and Fluid
3. Easy to Learn
4. Is not a new language
5. Works with any Text Editor
6. Has great Intellisense
7. Unit Testable
Introducing Razor
                             <ul>
        Web Forms              <% for (int i = 0; i < 10; i++) { %>
                                 <li><% =i %></li>
      (6 transitions):         <% } %>
                             </ul>

                             <ul>
                               <?php
                                  for ($i = 0; $i < 10; $i++) {
            PHP                      echo("<li>$i</li>");
(2 transitions & an echo):        }
                               ?>
                             </ul>

                             <ul>
                               @for (int i = 0; i < 10; i++) {
           Razor                 <li>@i</li>
      (2 transitions):         }
                             </ul>
Code to markup easily
                         @{
      Option 1:               var name = “John Doe”;
                              <div>
     HTML Block                 Your name: @name
                              </div>
                         }

                         @{
                              var name = “John Doe”;
      Option 2:               <text>
      Text Block                Your name: @name
                              </text>
                         }

                         @{
       Option 3:              var name = “John Doe”;
 Single line of output        @: Your name: @name
      in markup          }
Commenting
              @*
  Option 1:     <div>
  Markup          Hello World
                </div>
              *@


              @{
  Option 2:     //var name = "John Doe”;
   Code         //@name
              }


              @*
                @{
  Option 3:       //var name = "John Doe";
   Both           //@name
                }
              *@
demo
Razor syntax
Database
Database
• SQL Compact Edition
   • File-based, so it’s portable. Runs without a server.
• Easy to design, easy to code against
Designing


                                                                          Coding
                            @{
                              var db = Database.Open("ArtGallery");
                              var product = db.Query("SELECT * FROM PRODUCTS);
                            }
demo
Database access
Helpers
What are Helpers?
Helpers make it easy to quickly add commonly used
functionality into your websites




                                       and many more…
Two categories
HTML Helpers                Make is faster and easier to
                             render commonly used
  • Facebook                   markup to the page.
  • Twitter
  • …

API Helpers                  Make is faster and easier
                            to call complex APIs from
  • PayPal                         your website.
  • Windows Azure Storage
  • …
demo
Helpers
App Gallery & OSS Apps
OSS Apps
1.   Free
2.   Popular = large community
3.   Gets you close to the solution quickly
4.   Easy to configure
Build on the success of Web PI
                              Web Platform Installer   WebMatrix

Download                                                 

                                        
Install (inc. dependencies)                               

Customize                                                 

SEO Analysis                                              

Publish                                                   
demo
App Gallery
Conclusion
Next steps
1. Install WebMatrix
2. Play with it
  1.   Create a new website with templates or from scratch
  2. Edit an existing one
   3. Deploy an app by using the App Gallery

3. Unleash the power of the Matrix & have fun
Resources
• http://microsoft.com/web/webmatrix

• http://asp.net/webmatrixresource (v1 tutorials)

• http://www.webnotwar.ca/
Remember To Complete Your Evaluations!
You could WIN a Samsung Focus
Windows Phone 7!
Let us know what you liked & disliked!
Remember, 1=Bad, 5=Good 
Please provide comments!
No purchase necessary. The contest is open to residents of Canada (excluding government employees). The Toronto Tech·Days evaluation form contest begins on October 25th, 2011 and ends
on October 26th, 2011. The Vancouver Tech·Days evaluation form contest begins on November 15th, 2011 and ends on November 16th, 2011. The Montreal Tech·Days evaluation form contest
begins on November 29th, 2011 and ends on November 30th, 2011. Participants can enter the contest in one of two ways: (1) complete and submit an evaluation form by the contest close date;
or (2) provide contact information by the contest close date. The draw for Toronto will take place on October 31st, 2011. The draw for Vancouver will take place on November 21st, 2011. The
draw for Montreal will take place on December 5th, 2011. The chances of being selected depend upon the number of eligible entries. Selected participants will be contacted by phone and/or e-
mail and will be required to answer correctly a time-limited skill-testing question. There are three (3) prizes available to be won. One (1) prize will be given away for each Tech·Days event in
Toronto (October 25-26 2011), Vancouver (November 15-16 2011) and Montreal (November 29-30 2011). The prize consists of a Samsung Focus Windows Phone 7 (handset only; voice and/or
data plan not included) (approximate retail value of $499 CAD). The prize will be delivered to the shipping address designated by the winner within 6-8 weeks. The winner may be required to
sign a declaration and release form. For full contest rules, please see a Microsoft Tech·Days representative.




  You can email any additional comments directly to
         td_can@microsoft.com at any time.
Q&A
Contact me
       Frederic Harper, Developer Evangelist

fredh@microsoft.com
@fharper

http://webnotwar.ca
http://outofcomfortzone.net
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should
                          not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
                                                  MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related Content

PDF
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
ODP
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
PPTX
Css, xhtml, javascript
PDF
Basics of css and xhtml
PDF
PPTX
Introduction to whats new in css3
PDF
HTML 5 Step By Step - Ebook
PDF
Html5 deciphered - designing concepts part 1
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
HTML5 e CSS3 (slides della sessione tenuta al DIMI di Udine)
Css, xhtml, javascript
Basics of css and xhtml
Introduction to whats new in css3
HTML 5 Step By Step - Ebook
Html5 deciphered - designing concepts part 1

What's hot (12)

PPSX
Introduction to Html5
PPTX
Introduction to HTML5 and CSS3 (revised)
PPT
1. introduction to html5
PDF
HTML5: features with examples
PPT
Chapter14
KEY
HTML CSS & Javascript
PPT
Chapter2
PDF
Website designing company in faridabad
KEY
An Introduction to HTML5
PDF
Opening up the Social Web - Standards that are bridging the Islands
PPTX
Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology
PDF
An Introduction To HTML5
Introduction to Html5
Introduction to HTML5 and CSS3 (revised)
1. introduction to html5
HTML5: features with examples
Chapter14
HTML CSS & Javascript
Chapter2
Website designing company in faridabad
An Introduction to HTML5
Opening up the Social Web - Standards that are bridging the Islands
Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology
An Introduction To HTML5
Ad

Similar to WebMatrix, see what the matrix can do for you!! (20)

PPTX
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
PPTX
Intro to .NET for Government Developers
PPTX
Introduction towebmatrix
PPTX
Joomla! Day Los Angeles 2011 WebMatrix
PPTX
J day la 2011 webmatrix
PPTX
Intro to MVC 3 for Government Developers
PPTX
Web matrix part 2
PPTX
Microsoft Web Matrix
PPTX
WebMatrix 100-level presentation
PDF
FSOSS - Take the red pill and enter the Matrix
PPT
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
PPTX
Microsoft WebMatrix Platform Overview
PPTX
WebFest 2011 WebMatrix Overview by Gavin Warrener
PDF
Asp.net w3schools
PPTX
soft-shake.ch - WebMatrix: Your Web Made Easy
PPTX
Asp.net With mvc handson
PPTX
PDF
Build Your First Mobile App in 1 hour with Windows App Studio
PDF
Chapter10 web
PPT
1_Intro_toHTML.ppt
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
Intro to .NET for Government Developers
Introduction towebmatrix
Joomla! Day Los Angeles 2011 WebMatrix
J day la 2011 webmatrix
Intro to MVC 3 for Government Developers
Web matrix part 2
Microsoft Web Matrix
WebMatrix 100-level presentation
FSOSS - Take the red pill and enter the Matrix
Develop a Quick and Dirty Web interface to your database: for the DBA and oth...
Microsoft WebMatrix Platform Overview
WebFest 2011 WebMatrix Overview by Gavin Warrener
Asp.net w3schools
soft-shake.ch - WebMatrix: Your Web Made Easy
Asp.net With mvc handson
Build Your First Mobile App in 1 hour with Windows App Studio
Chapter10 web
1_Intro_toHTML.ppt
Ad

More from Frédéric Harper (20)

PDF
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
PDF
2018 04-25 - HLTH hackathon
PDF
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
PDF
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
PDF
Public speaking - FDP tech leads summit - 2018-04-30
PDF
2018 04-25 - HLTH hackathon
PDF
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
PDF
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
PDF
With great power comes great responsibility - Microsoft Canada Open Source co...
PDF
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
PDF
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
PDF
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
PDF
Is your python application secure? - PyCon Canada - 2015-11-07
PDF
Personal branding for developers - West Island developers and entrepreneurs m...
PDF
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
PDF
Differentiating yourself humber college - 2015-03-30
PDF
Differentiating yourself - Hack Western - 2015-03-28
PDF
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
PDF
Building a personal brand in the developer community - Codementor Office Hour...
PDF
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2018 04-25 - HLTH hackathon
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
Public speaking - FDP tech leads summit - 2018-04-30
2018 04-25 - HLTH hackathon
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
With great power comes great responsibility - Microsoft Canada Open Source co...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Is your python application secure? - PyCon Canada - 2015-11-07
Personal branding for developers - West Island developers and entrepreneurs m...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Differentiating yourself humber college - 2015-03-30
Differentiating yourself - Hack Western - 2015-03-28
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Building a personal brand in the developer community - Codementor Office Hour...
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27

Recently uploaded (20)

PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Spectral efficient network and resource selection model in 5G networks
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PDF
Approach and Philosophy of On baking technology
PDF
Network Security Unit 5.pdf for BCA BBA.
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PPTX
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Empathic Computing: Creating Shared Understanding
PDF
Machine learning based COVID-19 study performance prediction
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
MYSQL Presentation for SQL database connectivity
PDF
KodekX | Application Modernization Development
PDF
Encapsulation theory and applications.pdf
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Advanced methodologies resolving dimensionality complications for autism neur...
Spectral efficient network and resource selection model in 5G networks
The Rise and Fall of 3GPP – Time for a Sabbatical?
Mobile App Security Testing_ A Comprehensive Guide.pdf
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Approach and Philosophy of On baking technology
Network Security Unit 5.pdf for BCA BBA.
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
KOM of Painting work and Equipment Insulation REV00 update 25-dec.pptx
“AI and Expert System Decision Support & Business Intelligence Systems”
Empathic Computing: Creating Shared Understanding
Machine learning based COVID-19 study performance prediction
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Bridging biosciences and deep learning for revolutionary discoveries: a compr...
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
MYSQL Presentation for SQL database connectivity
KodekX | Application Modernization Development
Encapsulation theory and applications.pdf

WebMatrix, see what the matrix can do for you!!

  • 1. WebMatrix: See What the Matrix Can Do For You!! Frederic Harper Developer Evangelist Microsoft Canada
  • 2. Agenda • What is WebMatrix? • Who is WebMatrix for? • Razor syntax • Database access • Helpers • App Gallery & OSS Apps
  • 5. My goals 1. Show you how it’s easy to use WebMatrix to create awesome websites or Web applications
  • 7. What is WebMatrix It’s a free tool that makes it easy to Create Configure Publish your websites and web applications
  • 8. What is WebMatrix 1. Web App Gallery & Templates
  • 9. What is WebMatrix 1. Web App Gallery & Templates 2. Web Server: IIS Express
  • 10. What is WebMatrix 1. Web App Gallery & Templates 2. Web Server: IIS Express 3. Standards Support: HTML, CSS, JavaScript
  • 11. What is WebMatrix 1. Web App Gallery & Templates 2. Web Server: IIS Express 3. Standards Support: HTML, CSS, JavaScript 4. Scripting Support: ASP.NET & PHP
  • 12. What is WebMatrix 1. Web App Gallery & Templates 2. Web Server: IIS Express 3. Standards Support: HTML, CSS, JavaScript 4. Scripting Support: ASP.NET & PHP 5. DB Manager: SQL Server & MySQL
  • 13. What is WebMatrix 1. Web App Gallery & Templates 2. Web Server: IIS Express 3. Standards Support: HTML, CSS, JavaScript 4. Scripting Support: ASP.NET & PHP 5. DB Manager: SQL Server & MySQL 6. Optimization Tools: SEO & Performance
  • 14. Who is WebMatrix for? I <3 Web Apps. I want to build web I’m a professional I just need a tool that sites myself with an software developer makes them easier to easy to learn tool and I build complex, configure, customize and framework large scale web sites and publish with a team of developers
  • 15. Two ways to build
  • 16. Two ways to build Option A: From Scratch
  • 17. Two ways to build Option A: Option B: From Scratch From Web App
  • 18. demo A lap around WebMatrix
  • 19. Razor
  • 21. What is Razor 1. A new view engine
  • 22. What is Razor 1. A new view engine 2. Compact, Expressive, and Fluid
  • 23. What is Razor 1. A new view engine 2. Compact, Expressive, and Fluid 3. Easy to Learn
  • 24. What is Razor 1. A new view engine 2. Compact, Expressive, and Fluid 3. Easy to Learn 4. Is not a new language
  • 25. What is Razor 1. A new view engine 2. Compact, Expressive, and Fluid 3. Easy to Learn 4. Is not a new language 5. Works with any Text Editor
  • 26. What is Razor 1. A new view engine 2. Compact, Expressive, and Fluid 3. Easy to Learn 4. Is not a new language 5. Works with any Text Editor 6. Has great Intellisense
  • 27. What is Razor 1. A new view engine 2. Compact, Expressive, and Fluid 3. Easy to Learn 4. Is not a new language 5. Works with any Text Editor 6. Has great Intellisense 7. Unit Testable
  • 28. Introducing Razor <ul> Web Forms <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> (6 transitions): <% } %> </ul> <ul> <?php for ($i = 0; $i < 10; $i++) { PHP echo("<li>$i</li>"); (2 transitions & an echo): } ?> </ul> <ul> @for (int i = 0; i < 10; i++) { Razor <li>@i</li> (2 transitions): } </ul>
  • 29. Code to markup easily @{ Option 1: var name = “John Doe”; <div> HTML Block Your name: @name </div> } @{ var name = “John Doe”; Option 2: <text> Text Block Your name: @name </text> } @{ Option 3: var name = “John Doe”; Single line of output @: Your name: @name in markup }
  • 30. Commenting @* Option 1: <div> Markup Hello World </div> *@ @{ Option 2: //var name = "John Doe”; Code //@name } @* @{ Option 3: //var name = "John Doe"; Both //@name } *@
  • 33. Database • SQL Compact Edition • File-based, so it’s portable. Runs without a server. • Easy to design, easy to code against Designing Coding @{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); }
  • 36. What are Helpers? Helpers make it easy to quickly add commonly used functionality into your websites and many more…
  • 37. Two categories HTML Helpers Make is faster and easier to render commonly used • Facebook markup to the page. • Twitter • … API Helpers Make is faster and easier to call complex APIs from • PayPal your website. • Windows Azure Storage • …
  • 39. App Gallery & OSS Apps
  • 40. OSS Apps 1. Free 2. Popular = large community 3. Gets you close to the solution quickly 4. Easy to configure
  • 41. Build on the success of Web PI Web Platform Installer WebMatrix Download    Install (inc. dependencies)  Customize  SEO Analysis  Publish 
  • 44. Next steps 1. Install WebMatrix 2. Play with it 1. Create a new website with templates or from scratch 2. Edit an existing one 3. Deploy an app by using the App Gallery 3. Unleash the power of the Matrix & have fun
  • 46. Remember To Complete Your Evaluations! You could WIN a Samsung Focus Windows Phone 7! Let us know what you liked & disliked! Remember, 1=Bad, 5=Good  Please provide comments! No purchase necessary. The contest is open to residents of Canada (excluding government employees). The Toronto Tech·Days evaluation form contest begins on October 25th, 2011 and ends on October 26th, 2011. The Vancouver Tech·Days evaluation form contest begins on November 15th, 2011 and ends on November 16th, 2011. The Montreal Tech·Days evaluation form contest begins on November 29th, 2011 and ends on November 30th, 2011. Participants can enter the contest in one of two ways: (1) complete and submit an evaluation form by the contest close date; or (2) provide contact information by the contest close date. The draw for Toronto will take place on October 31st, 2011. The draw for Vancouver will take place on November 21st, 2011. The draw for Montreal will take place on December 5th, 2011. The chances of being selected depend upon the number of eligible entries. Selected participants will be contacted by phone and/or e- mail and will be required to answer correctly a time-limited skill-testing question. There are three (3) prizes available to be won. One (1) prize will be given away for each Tech·Days event in Toronto (October 25-26 2011), Vancouver (November 15-16 2011) and Montreal (November 29-30 2011). The prize consists of a Samsung Focus Windows Phone 7 (handset only; voice and/or data plan not included) (approximate retail value of $499 CAD). The prize will be delivered to the shipping address designated by the winner within 6-8 weeks. The winner may be required to sign a declaration and release form. For full contest rules, please see a Microsoft Tech·Days representative. You can email any additional comments directly to td_can@microsoft.com at any time.
  • 47. Q&A
  • 48. Contact me Frederic Harper, Developer Evangelist fredh@microsoft.com @fharper http://webnotwar.ca http://outofcomfortzone.net
  • 49. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.