Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Front-end Web Development Intro
Dave Kelly
January 24, 2012
Programming
9
970
Front-end Web Development Intro
Presentation for CodeNinja.ie - intro to HTML5, CSS3, JS
Dave Kelly
January 24, 2012
Tweet
Share
More Decks by Dave Kelly
See All by Dave Kelly
dave
0
16
dave
0
220
dave
1
250
dave
0
32
dave
0
110
dave
0
30
dave
1
610
dave
0
1.6k
dave
0
910
Other Decks in Programming
See All in Programming
takutakahashi
3
260
deepflow
9
3.1k
grapecity_dev
0
170
takara9
0
150
joergneumann
0
130
makomakok
1
250
meemeelab
0
290
neripark
3
640
saten
1
180
borkdude
2
190
lovee
2
200
legalforce
PRO
0
630
Featured
See All Featured
ddemaree
273
31k
geeforr
332
29k
jlugia
217
16k
smashingmag
283
47k
philhawksworth
192
8.8k
samlambert
237
10k
jonrohan
1021
380k
shlominoach
176
7.5k
jeffersonlam
329
15k
geoffreycrofte
21
920
garrettdimon
288
110k
jonyablonski
19
1.2k
Transcript
None
None
None
None
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’, ‘hi@myemail.ie’); 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
None
None
None
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 dkelly@ambientage.com linkedin.com/in/davkell