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

Front-end Web Development Intro

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

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
19
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
260
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
1
300
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
35
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
120
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
40
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
1
650
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
1.7k
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
920

Other Decks in Programming

See All in Programming
0fd678886c159fd728afecc7418e9684?s=48 okdt
2
670
0881bf028854bea223770e6bfc0a4065?s=48 martin_lover
3
1.9k
Ae7a5166a7b7776ffdd5676c2d6ab42f?s=48 aseiide
0
220
A73ed5cefbbd84abd2c5e14a5eb4a339?s=48 ippey
8
680
Bf04d1ee6fa2216133b23af8f609c70a?s=48 gatchan0807
0
980
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
3
420
96c4c5d86c23e3b3623b709d75a8633d?s=48 sawarabi
1
240
64fb973c47087ece7fb9b45d5b8593a4?s=48 yag_ays
5
4.6k
Eabc3d48a76f6827e35a4cd0a44008b3?s=48 sunyryr
0
330
7602f2751868682b296171f58589c851?s=48 lyrixx
2
100
0c2ae3d2aa77423465e1e533ff0d030a?s=48 mski_iksm
5
1.7k
Cfbe23392787cb3ad4689c5f72463fcc?s=48 makicamel
3
580

Featured

See All Featured
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
405
20k
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
32k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
48k
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
4
180
A9704266587836f7e784235e5073b93e?s=48 jmmastey
20
5.1k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
315
21k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
203
9.9k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
30
2.9k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k

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