Developing and deploying a website with html5

4,999 views
4,931 views

Published on

This is the slide deck used in the Penton Media workshop

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

No Downloads
Views
Total views
4,999
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Developing and deploying a website with html5

  1. 1. Developing and Deploying a Website with HTML5 Chris Love @ChrisLove Love2Dev.com
  2. 2. Who Am I? ASP.NET MVP ASP Insider Internet Explorer User Agent Author Speaker Tweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
  3. 3. JavaScript Libraries DeepTissueJS – A Touch Gesture Abstraction Library http://deeptissuejs.com PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5 https://github.com/docluv/panoramajs ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phone http://toolbarjs.com Coming Soon! SPA – Single Page Application Router, View Manager Backpack – Markup Manager leveraging LocalStorage FannyPack – Markup Manager leveraging on page markup DollarBill – Lightweight Utility Library that’s compatible with jQuery
  4. 4. Resources Slide Deck – http://www.slideshare.net/docluv Only URL U Need!
  5. 5. What Does a Modern Web App Look Like? AJAX Layer Browser Request Response Minimal HTML Payload Images CSS JavaScript AJAX Calls for JSON HTML Web Server
  6. 6. What does the AJAX Layer Look Like? HTML CSS JavaScript
  7. 7. What is a Single Page App      1 Page – Many Views Retrieves Data from an API Manages Merging Data With Client-Side Templates Manages Sexy View Transitions! Introduces a Whole New World of Issues For Developers
  8. 8. The World is Mobile • Screens are All Sizes • Usage Contexts Vary • Expensive to Make Customized Versions for Every Platform
  9. 9. One Site To Rule Them All • HTML5 Targets All Platforms • Responsive Web Design Targets All Screen Sizes • SPA Competes with Native Apps • APIs Secure All Data Interactions • Decoupled from Client
  10. 10. Fluid Layouts • Adjust To Fill the Entire View Port • View Port is the Browser’s Window Size • Use Absolute Positioning To Place Major Elements
  11. 11. Fluid Layout
  12. 12. Fluid Layout
  13. 13. Responsive Web Design • Craft Web Applications to Provide Optimal Viewing Experience Across All Screen Sizes • Uses Media Queries To Define Layout Rules • Coined by Ethan Marcotte in 2010 • http://bit.ly/17QvHOd
  14. 14. Media Queries @media (min-width:800px) { /* } CSS Rules Here */
  15. 15. Responsive Process • Can Either Start Big & Go Small or Small and Go Big • Starting Mobile Forces You To Determine What is Most Important • Resize Desktop Browser with Dev Tools Open • Use Dev Tools to Resize Browser • Tweak CSS to Refine Layout • Don’t Be Afraid to Use JavaScript to Help
  16. 16. Let’s Code
  17. 17. Single Page Applications • Single Page Web Application • Means a More ‘Native Like’ Experience • Heavy Client-Side Application Model • Loads all Markup ‘on initial load’ • Tectonic Shift In the Way Web Sites Are Built
  18. 18. Principle #1 – Performance Matters • Honor the 23 Rules of Web Performance • Use HTML5 Advantages • WebStorage Is Your Friend
  19. 19. Principle #2 • Things You Did On The Server Now Live In The Browser • Only one Request for HTML (sort of…) • In the Browser • Routing • Markup Management • Data Caching
  20. 20. Please Press # • SPAs Reply on the URL hash • Prevents the Browser from Requesting URL from Server • Google SEO ‘Recommends’ #! • _escaped_fragement_ - http://bit.ly/1bFmIQT • Need a Route Management System
  21. 21. Let’s Code
  22. 22. So How Do You Manage A JavaScript App? Project Structure ‘Compiling’ Testing Bundling & Minification Build System I Like GruntJs
  23. 23. Using Grunt JS • Setup Using NPM • npm install -g grunt-cli • Add Grunt files • package.json • Gruntfile.js
  24. 24. Common Contrib Extensions • Uglify • JSHint • Handlebars • HTMLMIN • Jasmine • Qunit • Watch • YuiDoc
  25. 25. Source Management • TFS • Git • GitHub • BitBucket
  26. 26. Deployment • Environments • • • • Development Test/QA Staging Production • Via Source Control • Cloud Drive
  27. 27. Demo Time!
  28. 28. Review • Fluid Responsive Layouts • Enable a Modern UI • Single Page Apps • Enable Fast & Fluid User Experience • Build & Deployment • Optimizes Web Application • Manages Source Code

×