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
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
16
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
220
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
1
250
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
32
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
110
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
30
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
1
610
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
1.6k
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
910

Other Decks in Programming

See All in Programming
Defdf943f6e9bfc3d3cd856d9d9e0f9b?s=48 takutakahashi
3
260
6734b737614a599f9b899f190e413d2d?s=48 deepflow
9
3.1k
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
170
B8d0f591da3869f3bb9d5473853be2a2?s=48 takara9
0
150
32ae0ae04b5c4f1b29ee9e8826823fbc?s=48 joergneumann
0
130
Ff1e356e879c9a03c73e7891cb9d63a6?s=48 makomakok
1
250
27ec11888b9deb5c26ab4c85e97ec000?s=48 meemeelab
0
290
C11bce314c53f6d9e3096f121d96d7f9?s=48 neripark
3
640
585b6bd646ae00cd1025309c912d922f?s=48 saten
1
180
Bbb17eeeecd3d9d06f4db310ab630a12?s=48 borkdude
2
190
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
2
200
Ad2155c75c67c0100dd008ad10858de5?s=48 legalforce
PRO
0
630

Featured

See All Featured
C157b16234f1e75e8eac3698c1d4414a?s=48 ddemaree
273
31k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
332
29k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
283
47k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.8k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
380k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.5k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
329
15k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
21
920
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
288
110k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
19
1.2k

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