Webcamp - 2012-03-08 - WebMatrix, see what the matrix can do for you

715 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
715
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webcamp - 2012-03-08 - WebMatrix, see what the matrix can do for you

  1. 1. WebMatrix: See What the Matrix Can Do For YouFrédéric HarperDeveloper Evangelist @ Microsoft Canada@fharper | outofcomfortzone.net
  2. 2. Agenda• What is WebMatrix?• Who is WebMatrix for?• Razor syntax• Database access• Helpers• App Gallery & OSS Apps
  3. 3. My goals
  4. 4. My goals
  5. 5. My goals1. Show you how it’s easy to use WebMatrix to create awesome websites or Web applications
  6. 6. WebMatrix
  7. 7. What is WebMatrixIt’s a free tool that makes it easy to Create Configure Publishyour websites and web applications
  8. 8. What is WebMatrix1. Web App Gallery & Templates
  9. 9. What is WebMatrix1. Web App Gallery & Templates2. Web Server: IIS Express
  10. 10. What is WebMatrix1. Web App Gallery & Templates2. Web Server: IIS Express3. Standards Support: HTML, CSS, JavaScript
  11. 11. What is WebMatrix1. Web App Gallery & Templates2. Web Server: IIS Express3. Standards Support: HTML, CSS, JavaScript4. Scripting Support: ASP.NET & PHP
  12. 12. What is WebMatrix1. Web App Gallery & Templates2. Web Server: IIS Express3. Standards Support: HTML, CSS, JavaScript4. Scripting Support: ASP.NET & PHP5. DB Manager: SQL Server & MySQL
  13. 13. What is WebMatrix1. Web App Gallery & Templates2. Web Server: IIS Express3. Standards Support: HTML, CSS, JavaScript4. Scripting Support: ASP.NET & PHP5. DB Manager: SQL Server & MySQL6. Optimization Tools: SEO & Performance
  14. 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. 15. Two ways to build
  16. 16. Two ways to build Option A: From Scratch
  17. 17. Two ways to build Option A: Option B: From Scratch From Web App
  18. 18. A lap around WebMatrix
  19. 19. Razor
  20. 20. What is Razor
  21. 21. What is Razor1. A new view engine
  22. 22. What is Razor1. A new view engine2. Compact, Expressive, and Fluid
  23. 23. What is Razor1. A new view engine2. Compact, Expressive, and Fluid3. Easy to Learn
  24. 24. What is Razor1. A new view engine2. Compact, Expressive, and Fluid3. Easy to Learn4. Is not a new language
  25. 25. What is Razor1. A new view engine2. Compact, Expressive, and Fluid3. Easy to Learn4. Is not a new language5. Works with any Text Editor
  26. 26. What is Razor1. A new view engine2. Compact, Expressive, and Fluid3. Easy to Learn4. Is not a new language5. Works with any Text Editor6. Has great Intellisense & Unit Testable
  27. 27. Introducing Razor <ul> <% for (int i = 0; i < 10; i++) { %> Web Forms <li><% =i %></li> (6 transitions): <% } %> </ul> <ul> <?php PHP for ($i = 0; $i < 10; $i++) {(2 transitions & an echo): echo("<li>$i</li>"); } ?> </ul> <ul> @for (int i = 0; i < 10; i++) { Razor <li>@i</li> (2 transitions): } </ul>
  28. 28. Code to markup easily @{ var name = “John Doe”; Option 1: <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 }
  29. 29. Commenting @* Option 1: <div> Markup Hello World </div> *@ @{ Option 2: //var name = "John Doe”; Code //@name } @* @{ Option 3: //var name = "John Doe"; Both //@name } *@
  30. 30. Database
  31. 31. Database• SQL Compact Edition • File-based, so it’s portable. Runs without a server.• Easy to design, easy to code againstDesigning Coding @{ var db = Database.Open("ArtGallery"); var product = db.Query("SELECT * FROM PRODUCTS); }
  32. 32. Database access
  33. 33. Helpers
  34. 34. What are Helpers?Helpers make it easy to quickly addcommonly used functionality into yourwebsites and many more…
  35. 35. Two categoriesHTML 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 • …
  36. 36. Helpers
  37. 37. App Gallery & OSS Apps
  38. 38. OSS Apps1. Free2. Popular = large community3. Gets you close to the solution quickly4. Easy to configure
  39. 39. Build on the success of Web PI Web Platform Installer WebMatrix Download    Install (inc. dependencies)  Customize  SEO Analysis  Publish 
  40. 40. App Gallery
  41. 41. Conclusion
  42. 42. Next steps1. Install WebMatrix2. 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 Gallery3. Unleash the power of the Matrix & have fun
  43. 43. Resources• http://microsoft.com/web/webmatrix• http://asp.net/webmatrixresource (v1 tutorials)• http://www.webnotwar.ca/
  44. 44. Earn your badges + win prizes!Attend a session + earn a badge http://j.mp/ySmHz7Fill out the form after your last session http://j.mp/ypFf0Q onMarch 8thMore sessions = more badges = more prizes!9 prizes will be drawn on March 15th: 3 badges = 3 XBOX/Kinect bundles 5 badges = 3 Windows Phone devices 7 badges = 3 Amex gift cards of 500$Remember more badges = more chances to win !!!
  45. 45. Questions Frederic Harper, Developer Evangelistfredh@microsoft.com@fharperhttp://webnotwar.cahttp://outofcomfortzone.net
  46. 46. Thank You!

×