Modern WebDevelopment   Technologies     Troubles       Tricks
Technologies HTML5       CSS3       JavaScript  noun     adjective        verbbackbone   aesthetics   functionality
HTML5: markup language• Easy• Rich• Semantic
HTML5              Easy        1 doc type    <!doctype html>no type declaration   <script>...</script>         no quotes  ...
HTML5                  Richvideo and audio           local storage        canvas            geolocation drag and drop     ...
HTML5            Semantic• better tags (article, footer, figure)• microdata (event, org, person)
CSS3: style sheet language• media queries• animation• gradients• text columns
JavaScript: scripting language• object-oriented• prototypes• client-( and server-)side
Troubles                               *• Browsers• Speed• Mobile* In a fun, positive sense
Troubles            Browsers• Incompatibility      (i.e., IE sucks)• Dimensions           (e.g., desktop, mobile)• Tech > ...
Troubles                  Speed• SelfishScript• Re$ource$• Physical . . . . . . . . . . . . . . distance
Troubles            Mobile• Slow connections• Slow processors• No JavaScript
Tricks• Be responsive• Be unobtrusive• Improve load time• Use high-level tools
Tricks        Be responsive•   Media queries    (media types, dimensions, orientations)•   Percentages    (scale)•   Ems  ...
TricksBe unobtrusive Separate...  • Content             HTML  • Presentation        CSS  • Behavior            JavaScript
TricksImprove load time• Asynchronous loading • async/defer in HTML5 • ControlJS, on-demand JS• Minimize resource calls• M...
Tricks           Use tools• CSS (e.g., Blueprint)• JavaScript (e.g., jQuery)• CSS + JS (e.g., LESS)
Questions?
Upcoming SlideShare
Loading in …5
×

Modern Web Development

707 views

Published on

This presentation offers a quick and not remotely comprehensive overview of modern web development, and that means mostly front-end web development.

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

  • Be the first to like this

No Downloads
Views
Total views
707
On SlideShare
0
From Embeds
0
Number of Embeds
110
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Modern Web Development

  1. 1. Modern WebDevelopment Technologies Troubles Tricks
  2. 2. Technologies HTML5 CSS3 JavaScript noun adjective verbbackbone aesthetics functionality
  3. 3. HTML5: markup language• Easy• Rich• Semantic
  4. 4. HTML5 Easy 1 doc type <!doctype html>no type declaration <script>...</script> no quotes <p class=bold>
  5. 5. HTML5 Richvideo and audio local storage canvas geolocation drag and drop content editing
  6. 6. HTML5 Semantic• better tags (article, footer, figure)• microdata (event, org, person)
  7. 7. CSS3: style sheet language• media queries• animation• gradients• text columns
  8. 8. JavaScript: scripting language• object-oriented• prototypes• client-( and server-)side
  9. 9. Troubles *• Browsers• Speed• Mobile* In a fun, positive sense
  10. 10. Troubles Browsers• Incompatibility (i.e., IE sucks)• Dimensions (e.g., desktop, mobile)• Tech > Spec (i.o.w., W3C is sloooow)
  11. 11. Troubles Speed• SelfishScript• Re$ource$• Physical . . . . . . . . . . . . . . distance
  12. 12. Troubles Mobile• Slow connections• Slow processors• No JavaScript
  13. 13. Tricks• Be responsive• Be unobtrusive• Improve load time• Use high-level tools
  14. 14. Tricks Be responsive• Media queries (media types, dimensions, orientations)• Percentages (scale)• Ems (relative; browser as base)
  15. 15. TricksBe unobtrusive Separate... • Content HTML • Presentation CSS • Behavior JavaScript
  16. 16. TricksImprove load time• Asynchronous loading • async/defer in HTML5 • ControlJS, on-demand JS• Minimize resource calls• Minify code• Compress code
  17. 17. Tricks Use tools• CSS (e.g., Blueprint)• JavaScript (e.g., jQuery)• CSS + JS (e.g., LESS)
  18. 18. Questions?

×