Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end Web Development Intro

Dave Kelly
January 24, 2012

Front-end Web Development Intro

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

Dave Kelly

January 24, 2012
Tweet

More Decks by Dave Kelly

Other Decks in Programming

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’, ‘[email protected]’);
    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
    [email protected]
    linkedin.com/in/davkell

    View Slide