SlideShare una empresa de Scribd logo
1 de 17
Build a Joomla! Site and Photo
  Gallery Site in 30 Minutes
         With WebMatrix


                                    Alice Pang
               Developer Evangelist, Microsoft
                http://blogs.msdn.com/alicerp
                              Twitter: @alicerp
The Evolution of WebMatrix




Web Server   Database   Development Tool
WebMatrix Users
     Peter                   Eric




                         I want to build a
I need a CMS. I want      web site for my
 a tool that makes it   photos with an easy
      easier to          to learn tool and
configure, customize         framework
and publish my food
         site.
Peter, the foodie
Peter’s to-do’s
• set up a Joomla! site
• customize some settings
• Publish the food site
DEMO
    E         M

D
                       O




        http://bit.ly/MSwebmatrix
Eric, the photographer
Eric’s to-do’s
•   set up a photo gallery site
•   customize with Razor syntax
•   Add a Twitter helper
•   Publish the photo gallery site
Razor Syntax is Easy!
     Web Forms            <ul>
(6 markup transitions):     <% for (int i = 0; i < 10; i++) { %>
                              <li><% =i %></li>
                            <% } %>
                          </ul>


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


       Razor              <ul>
                            @for (int i = 0; i < 10; i++) {
(2 markup transitions):       <li>@i</li>
                            }
                          </ul>
Layouts make organizing your
        pages easier
 Don’t repeat yourself!
 Define one layout and use it across your website


                          Page 1


                                   Page 2
 Layout.cshtml


                          Page 3
Layout Syntax



/Shared/_Layout.cshtml
<html>
    <head>
      <title>Simple Layout</title>                        MyPage.cshtml
    </head>
                                @{
    <body>
                                   Layout = "/Shared/_Layout.cshtml";
        @RenderBody()
                                }
    </body>
</html>
                                <p>
                                   My content goes here
                                </p>
DEMO
    E         M

D
                       O




        http://bit.ly/MSwebmatrix
What are Helpers?
• Helpers make it easy to quickly add commonly used
  functionality into your websites
• Helpers are designed to make your life easier
• Some examples:
   –   Facebook
   –   Twitter
   –   PayPal
   –   UserVoice
   –   OData
   –   Windows Azure Storage
   –   And many more…
Two categories of Helpers
You can think of Helpers like this:
                Make is faster and easier to render
                commonly used markup to the page.
 HTML Helpers
                Examples: Facebook, Twitter




                Make is faster and easier to call
                complex APIs from your website.
  API Helpers   Examples: PayPal, OData, Windows
                Azure Storage
Make your website social
• Add social capabilities to your website with the
  WebMatrix Helper for Facebook
• There are many more helpers available for WebMatrix

   @FacebookSocialPlugins.Comments()
DEMO
    E         M

D
                       O




        http://bit.ly/MSwebmatrix
Next Steps
Download:
   http://bit.ly/MSwebmatrix

Learn:
    http://blogs.msdn.com/alicerp

Más contenido relacionado

La actualidad más candente

WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)
Stephanie Leary
 
jQueryMobile Jump Start
jQueryMobile Jump StartjQueryMobile Jump Start
jQueryMobile Jump Start
Haim Michael
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide Generator
Varya Stepanova
 
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
JoomlaShine
 

La actualidad más candente (20)

Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & You
 
WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)WordPress Tips and Tricks (DFW Meetup)
WordPress Tips and Tricks (DFW Meetup)
 
Change Site Title Wordpress Website with Elementor Page Builder
Change Site Title Wordpress Website with Elementor Page BuilderChange Site Title Wordpress Website with Elementor Page Builder
Change Site Title Wordpress Website with Elementor Page Builder
 
Poliedric WordPress - Go!WebDesign
Poliedric WordPress - Go!WebDesignPoliedric WordPress - Go!WebDesign
Poliedric WordPress - Go!WebDesign
 
Introduction to jQuery Mobile
Introduction to jQuery MobileIntroduction to jQuery Mobile
Introduction to jQuery Mobile
 
Wordpress 3.0 - Go!WebDesign
Wordpress 3.0 - Go!WebDesignWordpress 3.0 - Go!WebDesign
Wordpress 3.0 - Go!WebDesign
 
jQueryMobile Jump Start
jQueryMobile Jump StartjQueryMobile Jump Start
jQueryMobile Jump Start
 
SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99SoCal WordPress Meetup - iWeb to WordPress aka WP99
SoCal WordPress Meetup - iWeb to WordPress aka WP99
 
What is jQuery?
What is jQuery?What is jQuery?
What is jQuery?
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
Joomla! Plugin Development
Joomla! Plugin DevelopmentJoomla! Plugin Development
Joomla! Plugin Development
 
SC5 Style Guide Generator
SC5 Style Guide GeneratorSC5 Style Guide Generator
SC5 Style Guide Generator
 
Bootstrap Workout 2015
Bootstrap Workout 2015Bootstrap Workout 2015
Bootstrap Workout 2015
 
WordPress 101 wcmelb 2013
WordPress 101 wcmelb 2013WordPress 101 wcmelb 2013
WordPress 101 wcmelb 2013
 
test
testtest
test
 
Domain mapping
Domain mappingDomain mapping
Domain mapping
 
Develop Basic joomla! MVC component for version 3
Develop Basic joomla! MVC component for version 3Develop Basic joomla! MVC component for version 3
Develop Basic joomla! MVC component for version 3
 
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
Build a Joomla website by Drag n Drop with JSN PageBuilder and JSN PowerAdmin
 
Wordpress MultiSite Overview
Wordpress MultiSite OverviewWordpress MultiSite Overview
Wordpress MultiSite Overview
 
Web Performance - A Whistlestop Tour
Web Performance - A Whistlestop TourWeb Performance - A Whistlestop Tour
Web Performance - A Whistlestop Tour
 

Destacado

Ncz fse engagement_notification_2010-11_hindi
Ncz fse engagement_notification_2010-11_hindiNcz fse engagement_notification_2010-11_hindi
Ncz fse engagement_notification_2010-11_hindi
avmahajan1
 
Valtozo fogyasztoi elvarasok
Valtozo fogyasztoi elvarasok Valtozo fogyasztoi elvarasok
Valtozo fogyasztoi elvarasok
Laszlo Mezei
 
Assignment n 4 web 2.0 applied to elt
Assignment n 4 web 2.0 applied to eltAssignment n 4 web 2.0 applied to elt
Assignment n 4 web 2.0 applied to elt
Elianemc
 
Assignment 3 Webquest plan by Cecilia Casadio and Eliane Custode
Assignment 3   Webquest plan by Cecilia Casadio and Eliane CustodeAssignment 3   Webquest plan by Cecilia Casadio and Eliane Custode
Assignment 3 Webquest plan by Cecilia Casadio and Eliane Custode
Elianemc
 
Ih hogyan adjunk-el-a-weben-mezei-laszlo_20131015
Ih hogyan adjunk-el-a-weben-mezei-laszlo_20131015Ih hogyan adjunk-el-a-weben-mezei-laszlo_20131015
Ih hogyan adjunk-el-a-weben-mezei-laszlo_20131015
Laszlo Mezei
 
Assignment 2 educational software - plan
Assignment 2   educational software - planAssignment 2   educational software - plan
Assignment 2 educational software - plan
Elianemc
 
Written assignment Interactive Whiteboards in the web 2.0 Classroom
Written assignment Interactive Whiteboards in the web 2.0 ClassroomWritten assignment Interactive Whiteboards in the web 2.0 Classroom
Written assignment Interactive Whiteboards in the web 2.0 Classroom
Elianemc
 
Find your dream job in STEM
Find your dream job in STEMFind your dream job in STEM
Find your dream job in STEM
Alice Pang
 

Destacado (15)

Ncz fse engagement_notification_2010-11_hindi
Ncz fse engagement_notification_2010-11_hindiNcz fse engagement_notification_2010-11_hindi
Ncz fse engagement_notification_2010-11_hindi
 
Valtozo fogyasztoi elvarasok
Valtozo fogyasztoi elvarasok Valtozo fogyasztoi elvarasok
Valtozo fogyasztoi elvarasok
 
Portafolio Pxndres3DTOTAL
Portafolio Pxndres3DTOTALPortafolio Pxndres3DTOTAL
Portafolio Pxndres3DTOTAL
 
Assignment n 4 web 2.0 applied to elt
Assignment n 4 web 2.0 applied to eltAssignment n 4 web 2.0 applied to elt
Assignment n 4 web 2.0 applied to elt
 
CDS Business Overview 4 13 09
CDS Business Overview 4 13 09CDS Business Overview 4 13 09
CDS Business Overview 4 13 09
 
Assignment 3 Webquest plan by Cecilia Casadio and Eliane Custode
Assignment 3   Webquest plan by Cecilia Casadio and Eliane CustodeAssignment 3   Webquest plan by Cecilia Casadio and Eliane Custode
Assignment 3 Webquest plan by Cecilia Casadio and Eliane Custode
 
Ih hogyan adjunk-el-a-weben-mezei-laszlo_20131015
Ih hogyan adjunk-el-a-weben-mezei-laszlo_20131015Ih hogyan adjunk-el-a-weben-mezei-laszlo_20131015
Ih hogyan adjunk-el-a-weben-mezei-laszlo_20131015
 
Assignment 2 educational software - plan
Assignment 2   educational software - planAssignment 2   educational software - plan
Assignment 2 educational software - plan
 
Smart mobile 2013_kirowski_slide_share
Smart mobile 2013_kirowski_slide_shareSmart mobile 2013_kirowski_slide_share
Smart mobile 2013_kirowski_slide_share
 
Written assignment Interactive Whiteboards in the web 2.0 Classroom
Written assignment Interactive Whiteboards in the web 2.0 ClassroomWritten assignment Interactive Whiteboards in the web 2.0 Classroom
Written assignment Interactive Whiteboards in the web 2.0 Classroom
 
Find your dream job in STEM
Find your dream job in STEMFind your dream job in STEM
Find your dream job in STEM
 
Conductores
ConductoresConductores
Conductores
 
Cerebral palsy by dr.asim
Cerebral palsy  by dr.asimCerebral palsy  by dr.asim
Cerebral palsy by dr.asim
 
Transplant patient for non TRANSPLANT SURGERY
Transplant patient for non TRANSPLANT SURGERYTransplant patient for non TRANSPLANT SURGERY
Transplant patient for non TRANSPLANT SURGERY
 
90 Day Plan - Adhesive Sales Warrior
90 Day Plan - Adhesive Sales Warrior90 Day Plan - Adhesive Sales Warrior
90 Day Plan - Adhesive Sales Warrior
 

Similar a Joomla! Day Los Angeles 2011 WebMatrix

Intro to MVC 3 for Government Developers
Intro to MVC 3 for Government DevelopersIntro to MVC 3 for Government Developers
Intro to MVC 3 for Government Developers
Frank La Vigne
 
WebFest 2011 WebMatrix Overview by Gavin Warrener
WebFest 2011 WebMatrix Overview by Gavin WarrenerWebFest 2011 WebMatrix Overview by Gavin Warrener
WebFest 2011 WebMatrix Overview by Gavin Warrener
Spiffy
 
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
Frédéric Harper
 
Microsoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewMicrosoft WebMatrix Platform Overview
Microsoft WebMatrix Platform Overview
Spiffy
 
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
Prairie Dev Con West -  2012-03-14 - Webmatrix, see what the matrix can do fo...Prairie Dev Con West -  2012-03-14 - Webmatrix, see what the matrix can do fo...
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
Frédéric Harper
 
EECI - EE And Magento Integration
EECI - EE And Magento IntegrationEECI - EE And Magento Integration
EECI - EE And Magento Integration
Simplified Safety
 
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniterIntro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
brightrocket
 
Web matrix part 2
Web matrix part 2Web matrix part 2
Web matrix part 2
yuvaraj72
 

Similar a Joomla! Day Los Angeles 2011 WebMatrix (20)

Intro to MVC 3 for Government Developers
Intro to MVC 3 for Government DevelopersIntro to MVC 3 for Government Developers
Intro to MVC 3 for Government Developers
 
WebFest 2011 WebMatrix Overview by Gavin Warrener
WebFest 2011 WebMatrix Overview by Gavin WarrenerWebFest 2011 WebMatrix Overview by Gavin Warrener
WebFest 2011 WebMatrix Overview by Gavin Warrener
 
Semantic UI Introduction
Semantic UI IntroductionSemantic UI Introduction
Semantic UI Introduction
 
Agile Wordpress
Agile WordpressAgile Wordpress
Agile Wordpress
 
Choosing A Web Cms And Intro To Modx
Choosing A Web Cms And Intro To ModxChoosing A Web Cms And Intro To Modx
Choosing A Web Cms And Intro To Modx
 
The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14The SharePoint & jQuery Guide - Updated 1/14/14
The SharePoint & jQuery Guide - Updated 1/14/14
 
Building Web Hack Interfaces
Building Web Hack InterfacesBuilding Web Hack Interfaces
Building Web Hack Interfaces
 
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
DevTeach Ottawa - Webmatrix, see what the matrix can do for you!!
 
Web design and Development
Web design and DevelopmentWeb design and Development
Web design and Development
 
Microsoft WebMatrix Platform Overview
Microsoft WebMatrix Platform OverviewMicrosoft WebMatrix Platform Overview
Microsoft WebMatrix Platform Overview
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
Prairie Dev Con West -  2012-03-14 - Webmatrix, see what the matrix can do fo...Prairie Dev Con West -  2012-03-14 - Webmatrix, see what the matrix can do fo...
Prairie Dev Con West - 2012-03-14 - Webmatrix, see what the matrix can do fo...
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
WordCamp Boston 2012 - Creating Content With Shortcodes
WordCamp Boston 2012 - Creating Content With ShortcodesWordCamp Boston 2012 - Creating Content With Shortcodes
WordCamp Boston 2012 - Creating Content With Shortcodes
 
EECI - EE And Magento Integration
EECI - EE And Magento IntegrationEECI - EE And Magento Integration
EECI - EE And Magento Integration
 
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniterIntro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
 
PHP FUNCTIONS
PHP FUNCTIONSPHP FUNCTIONS
PHP FUNCTIONS
 
Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3Joomla Explained - As Easy as 1, 2, 3
Joomla Explained - As Easy as 1, 2, 3
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Web matrix part 2
Web matrix part 2Web matrix part 2
Web matrix part 2
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 

Joomla! Day Los Angeles 2011 WebMatrix

  • 1. Build a Joomla! Site and Photo Gallery Site in 30 Minutes With WebMatrix Alice Pang Developer Evangelist, Microsoft http://blogs.msdn.com/alicerp Twitter: @alicerp
  • 2. The Evolution of WebMatrix Web Server Database Development Tool
  • 3. WebMatrix Users Peter Eric I want to build a I need a CMS. I want web site for my a tool that makes it photos with an easy easier to to learn tool and configure, customize framework and publish my food site.
  • 5. Peter’s to-do’s • set up a Joomla! site • customize some settings • Publish the food site
  • 6. DEMO E M D O http://bit.ly/MSwebmatrix
  • 8. Eric’s to-do’s • set up a photo gallery site • customize with Razor syntax • Add a Twitter helper • Publish the photo gallery site
  • 9. Razor Syntax is Easy! Web Forms <ul> (6 markup transitions): <% for (int i = 0; i < 10; i++) { %> <li><% =i %></li> <% } %> </ul> PHP <ul> <?php (2 markup transitions for ($i = 0; $i < 10; $i++) { & an echo): echo("<li>$i</li>"); } ?> </ul> Razor <ul> @for (int i = 0; i < 10; i++) { (2 markup transitions): <li>@i</li> } </ul>
  • 10. Layouts make organizing your pages easier Don’t repeat yourself! Define one layout and use it across your website Page 1 Page 2 Layout.cshtml Page 3
  • 11. Layout Syntax /Shared/_Layout.cshtml <html> <head> <title>Simple Layout</title> MyPage.cshtml </head> @{ <body> Layout = "/Shared/_Layout.cshtml"; @RenderBody() } </body> </html> <p> My content goes here </p>
  • 12. DEMO E M D O http://bit.ly/MSwebmatrix
  • 13. What are Helpers? • Helpers make it easy to quickly add commonly used functionality into your websites • Helpers are designed to make your life easier • Some examples: – Facebook – Twitter – PayPal – UserVoice – OData – Windows Azure Storage – And many more…
  • 14. Two categories of Helpers You can think of Helpers like this: Make is faster and easier to render commonly used markup to the page. HTML Helpers Examples: Facebook, Twitter Make is faster and easier to call complex APIs from your website. API Helpers Examples: PayPal, OData, Windows Azure Storage
  • 15. Make your website social • Add social capabilities to your website with the WebMatrix Helper for Facebook • There are many more helpers available for WebMatrix @FacebookSocialPlugins.Comments()
  • 16. DEMO E M D O http://bit.ly/MSwebmatrix
  • 17. Next Steps Download: http://bit.ly/MSwebmatrix Learn: http://blogs.msdn.com/alicerp

Notas del editor

  1. WebMatrix evolved from a number of things that Microsoft was working on, including IIS Developer Express, SQL Server CE, and ASP.NET Razor syntax. Razor syntax is an easy way to mix HTML and code like C# and VB, but it’s also used on other platforms such as MVC. File extensions are .cshtml and .vbhtml
  2. Introduce two users: (1) the foodie who wants to get a food recipes and food adventures CMS up quickly and easily by using the app gallery and (2) the photographer who wants to be more hands-on with customizing his site
  3. We’re going to help Peter do these three things. We will show him how to customize in Joomla! and with PHP code in WebMatrix. We’ll also show off some cool PHP IntelliSense in the process.
  4. Moving on to the photographer
  5. We will set up a photo gallery site from the template, introduce ASP.NET Razor syntax and add a Page Footer with Razor syntax, set up administrator role and use Razor to restrict access to a page, add a Facebook (or Twitter) helper through both the NuGet gallery and ASP.NET Web Pages administration, publish
  6. Reduces the number of keystrokes and is intuitive for programmers.
  7. Inject code, like ASP.NET Master Pages
  8. WebMatrix Helpers help you add common functionality to your Web site. They can be used to solve a specific web site tasks. You can think of them as bricks that are used/reused and interconnected to build a site. Nothing stops you from creating a helper and reusing it on different pages of your site, or even in different sites. And you can use helpers created by others. Here is a sample of existing helpers.
  9. HTML Helpers focus in look &amp; feel and simple connection with other sites, like Facebook and Twitter.API Helpers are more complex helpers, conceived to interact with external services. Their focus is not based on the user interface, but the service integrity, for instance how to secure a transaction in PayPal or registering an order to update your storage in a Windows Azure Account.
  10. If people like something on your site, they often want to share it with friends. For instance, to comment on Facebook, you can download the FacebookSocialHelper and then add the @FacebookSocialPlugins.Comments() in your page to show the Facebook comments’ controls.
  11. Aside from the ease with which you can get started, customers can open the doors to businesses running Microsoft technology. It has full support for .net languages such as C#, VB.net plus IronPython and IronRuby and has easy to use APIs that work seamlessly from Visual Studio.