Front-end Web Development Intro

9750ec5f02443a90ca0eeb76806cadcc?s=47 Dave Kelly
January 24, 2012
Programming
9
970

Front-end Web Development Intro

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

9750ec5f02443a90ca0eeb76806cadcc?s=128

Dave Kelly

January 24, 2012
Tweet

More Decks by Dave Kelly

See All by Dave Kelly
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
14
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
210
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
1
240
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
31
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
110
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
27
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
1
580
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
1.6k
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
900

Other Decks in Programming

See All in Programming
4578d99b560b2a470e05288ef6766ac2?s=48 paulk
0
640
20c5ddcad23304aed77ce8c3aa020562?s=48 tkmru
2
120
7edddae207b212e5e035133d9eb10b82?s=48 russhwolf
1
170
636420dfa4bd120435447924327530f0?s=48 nichimu
0
820
Cc90ea0f1ad7a6770cab81c4ef151eee?s=48 yotahada3
0
520
3528f569ab96088a8a2b00b3c33de599?s=48 erickhun
1
150
774a937b74096e82576b37678d00aeca?s=48 kishino
1
100
2f38ad91642226a08c0e1b926ba17f7c?s=48 furuhama
1
120
83722380372c00bd75ac920f2089f6aa?s=48 zacky1972
0
190
62340514ee3033d54d79c9e7a3db68d5?s=48 kazutomo
0
800
1405a601755e5fcbfdc93a2560368bb1?s=48 freddi
0
210
35761e3936deba2f8189c2d20982c771?s=48 getify
1
550

Featured

See All Featured
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
14
1.4k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
144
12k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
101
4.9k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
223
47k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
92
2.9k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
12
610
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
206
6.8k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
4
420
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
85
8.4k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k

Transcript

  1. None
  2. None
  3. None
  4. None

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

    & EFFECTS PERFORMANCE & INTEGRATION CSS3 http://www.w3.org/html/logo/ http://html5rocks.com

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

  7.    

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

    lang="en" manifest="/offline.appcache">  

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

  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/

  11.        @media screen and

    (max-device-width: 480px) and (orientation:portrait) { .column { float: none; } }

  12. http://trello.com

  13. thewildernessdowntown.com

  14. www.zygotebody.com

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

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

  17. The glue that holds web apps together Also, the most

    popular programming language in the world

  18. Handles Visual Effects & Behaviours UX →

  19.  jQuery  Visual effects & animations  Behaviours /

    Ajax  Handles cross browser pain & suffering jQueryUI Ext JS (sencha) Backbone.js / Spine ExOrdo, SoundCloud Mobile
  20. None
  21. None
  22. None

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

  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

  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

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