Front-end Web Development Intro

Presentation for CodeNinja.ie - intro to HTML5, CSS3, JS

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. SEMANTICS OFFLINE &
   STORAGE
   DEVICE
   ACCESS
   CONNECTIVITY
   MULTIMEDIA 3D,
   GRAPHICS &
   EFFECTS
   PERFORMANCE
   & INTEGRATION
   CSS3
   http://www.w3.org/html/logo/
   http://html5rocks.com
   

   View Slide

6. OFFLINE &
   STORAGE
   DEVICE
   ACCESS
   CONNECTIVITY
   CSS3
   http://www.w3.org/html/logo/
   http://html5rocks.com
   

   View Slide

7. 
   
   
   
   

   View Slide

8. 
   
   localStorage.setItem(‘myEmail’, ‘hi@myemail.ie’);
   var email = localStorage.getItem(‘myEmail’);
   
   
   
   
   

   View Slide

9. 
   function initiate_geolocation() {
   navigator.geolocation.getCurrentPosition(handle_geo);
   }
   initiate_geolocation();
   function handle_geo(position){
   alert('Lat: ' + position.coords.latitude + ' ' +
   'Lon: ' + position.coords.latitude);
   }
   // http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/
   
   

   View Slide

10. 
    To enable Web applications to maintain bidirectional communications with
    server-side processes – allows for Push notifications
    var host = "ws://localhost:8000/socket/server/startDaemo
    n.php";
    var socket = new WebSocket(host);
    // socket.onopen = function(){ }
    // socket.send( text );
    // socket.onmessage = function(msg){ }
    // socket.onclose = function(){ }
    // http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/
    

    View Slide

11. 
    
    
    
     
    
    @media screen and (max-device-width: 480px) and
    (orientation:portrait) {
    .column { float: none; }
    }
    

    View Slide

12. http://trello.com
    

    View Slide

13. thewildernessdowntown.com
    

    View Slide

14. www.zygotebody.com
    

    View Slide

15. http://www.cuttherope.ie/dev/
    

    View Slide

16. http://www.onehourpersecond.com/
    http://youtube-global.blogspot.com/2012/01/holy-nyans-60-hours-per-minute-and-4.html
    

    View Slide

17. The glue that
    holds web apps
    together
    Also, the most popular programming language in the world
    

    View Slide

18. Handles
    Visual Effects &
    Behaviours
    UX
    →
    

    View Slide

19.  jQuery
     Visual effects & animations
     Behaviours / Ajax
     Handles cross browser pain & suffering
    jQueryUI
    Ext JS (sencha)
    Backbone.js / Spine
    ExOrdo, SoundCloud Mobile
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23.  Don’t go straight to jQuery (or any library)
     Data → JSON vs XML
     Avoid global namespace pollution
     Read / watch Douglas Crockford
    (http://javascript.crockford.com/)
    var aa = {
    name: ‘Dave’,
    logName: function(){
    console.log( aa.name );
    }
    }
    aa.logName();
    

    View Slide

24. • HTML5 Boilerplate
    • Modernizr
    – Respond.js
    • Twitter Bootstrap
    • Responsive grids
    – 320 and Up (Andy Clarke → Mobile First approach)
    – GoldilocksApproach.com ( em based)
    – CSSGrid.net
    • JQueryUI.com
    

    View Slide

25.  Web:
    A List Apart
    24 Ways (read articles, then read author’s sites)
    Dive Into HTML5 ( http://diveintohtml5.info/ )
     Some books...
    All the A Book Apart books
    Hardboiled Web Design
    

    View Slide

26. Get in touch
    @davkell
    dkelly@ambientage.com
    linkedin.com/in/davkell
    

    View Slide