Intro to modern web technology

906 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Intro to modern web technology

  1. 1. Intro To Modern Web Technology Chris Love @ChrisLove Professionalaspnet.com Copyright © 2010 – V1consulting training design debugging wintellect.com
  2. 2. what we do consulting training design debugging who we are Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions. how we do it Training Consulting & Debugging • On-site instructor-led training • Architecture, analysis, and design services • Virtual instructor-led training • Full lifecycle custom software development • Devscovery conferences • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Productionconsulting training design debugging wintellect.com
  3. 3. Modern Web Technology • Start Mobile/Touch First • HTML5 • CSS3 • AJAX/JavaScript • And We Only have 75 Minutes!consulting training design debugging wintellect.com
  4. 4. HTML5 • Semantic Markup • Forms • Geolocation • WebStorage • Canvas • Offlineconsulting training design debugging wintellect.com
  5. 5. Semantic Markup • New Tags to Better Represent Content Organization • SECTION • ARTICLE • MENU – NAV • ASIDE • FOOTER • More…consulting training design debugging wintellect.com
  6. 6. Semantic Markup <SECTION/> <HEADER/> <NAV/> < <ARTICLE/> <FOOTER/>consulting training design debugging wintellect.com
  7. 7. HTML5 Form Improvements • Input Types – Number, Phone, Email, – Date, Color, … • Validation • Required • AutoFocus • PlaceHolder • AutoCorrect • Moreconsulting training design debugging wintellect.com
  8. 8. Geo-Location • Retrieve User’s Location • getCurrentPosition • watchPosition • clearWatch • PositionOptions – enableHighAccuracy – Timeout – maximumAgeconsulting training design debugging wintellect.com
  9. 9. Web Storage • Allows You to Keep Data Locally in a Hash Table – localStorage – sessionStorage • Approximately 5MB • Replace Cookies • Great For Cachingconsulting training design debugging wintellect.com
  10. 10. Canvas • Draw Graphics on the Fly via Scripting • Provides a 2D Drawing Surface • Controllable By JavaScript • Extremely Fast • Great For Games!consulting training design debugging wintellect.com
  11. 11. CSS3 • Shapes • Transforms • Transitions • Animations • Gradientsconsulting training design debugging wintellect.com
  12. 12. AJAX/JavaScript • AJAX – JavaScript Engines Vastly Improved – Many New Hardware APIs • File Access • Page Visibility • Web Sockets • Full Screen • Web Workers • Many Othersconsulting training design debugging wintellect.com
  13. 13. AJAX/JavaScript • Single Page Application – Brings HTML5, CSS3 & AJAX Together – Provides Rich User Experience – Improves Performance – Relies on Application API (REST, Web API)consulting training design debugging wintellect.com
  14. 14. Single Page Applications Home Categories Post Events Bio Contactconsulting training design debugging wintellect.com
  15. 15. Single Page Applications Category Homeconsulting training design debugging wintellect.com
  16. 16. Offline • Allows The App To Run When Disconnected – Application Manifest – Provides Event Model • Do Not Confuse With Browser Cache • Only Updates Files When Manifest Changesconsulting training design debugging wintellect.com
  17. 17. Offline First Time No Manifest Update Manifest Updated Checking Checking Bio Download No Update Download Progress Progress Cached Cachedconsulting training design debugging wintellect.com
  18. 18. OfflineCACHE MANIFEST# version 0.0.0.1# urls go HereJs/myapp.jsNETWORK:http:example.com/apiFALLBACK:http:example.com/img /img/offline.pngconsulting training design debugging wintellect.com
  19. 19. Conclusion • Modern Web Offers Many New Features • New Opportunities for Rich User Experiences • Can Implement Todayconsulting training design debugging wintellect.com
  20. 20. Questions? Chris Love @ChrisLove Professionalaspnet.comconsulting training design debugging wintellect.com

×