Front-end Web Development Intro

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

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

   

  localStorage.setItem(‘myEmail’, ‘[email protected]’); var email = localStorage.getItem(‘myEmail’);  <html
lang="en" manifest="/offline.appcache">  

 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/ 

 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/

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

http://trello.com

thewildernessdowntown.com

www.zygotebody.com

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

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

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

Handles Visual Effects & Behaviours UX →

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

 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();

• 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

 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

Get in touch @davkell [email protected] linkedin.com/in/davkell

Front-end Web Development Intro

Front-end Web Development Intro

Dave Kelly

More Decks by Dave Kelly

Other Decks in Programming

Featured

Transcript

SEMANTICS OFFLINE & STORAGE DEVICE ACCESS CONNECTIVITY MULTIMEDIA 3D, GRAPHICS

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

   

  localStorage.setItem(‘myEmail’, ‘[email protected]’); var email = localStorage.getItem(‘myEmail’);  <html

 function initiate_geolocation() { navigator.geolocation.getCurrentPosition(handle_geo); } initiate_geolocation(); function handle_geo(position){ alert('Lat:

 To enable Web applications to maintain bidirectional communications with

       @media screen and

http://trello.com

thewildernessdowntown.com

www.zygotebody.com

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

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

The glue that holds web apps together Also, the most

Handles Visual Effects & Behaviours UX →

 jQuery  Visual effects & animations  Behaviours /

 Don’t go straight to jQuery (or any library) 

• HTML5 Boilerplate • Modernizr – Respond.js • Twitter Bootstrap

 Web: A List Apart 24 Ways (read articles, then

Get in touch @davkell [email protected] linkedin.com/in/davkell