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

512

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
512
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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?

×