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
Work Samples
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
23
Web Maps and Data Visualisation
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
300
Interactive Data Visualisation for Researchers
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
1
330
DH2017 - Personæ: A Character-Visualisation Tool for Dramatic Texts
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
43
Data Visualisation & Data Management - Experiences & Lessons
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
130
Patterns of character & structure in Shakespeare: Exploring approaches to data visualisation
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
50
Introduction to Interactive Data Visualisation
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
1
700
William Robertson Network Data Visualisation
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
1.8k
Supporting Digital Projects in the Humanities & Social Sciences
9750ec5f02443a90ca0eeb76806cadcc?s=48 dave
0
920

Other Decks in Programming

See All in Programming
Blazor WebAssembly – Dynamische Formulare und Inhalte in Aktion
7a33106dde82ecc65a220eaf9d131222?s=48 patrickjahr
0
150
The future of trust stores in Python
6638acfdb9c5979d11b4312984292c55?s=48 sethmlarson
0
180
Explore Java 17 and beyond
F784a8de872a5d98f67ac5ccbd6683d0?s=48 josepaumard
3
630
2022 Android Training
B16717ef4b7aab0b253d933c3934f280?s=48 mixi_engineers
1
630
CLIツールにSwift Concurrencyを適用させようとしている話
7a78f23eef1b0e883ef44c229a54f0bb?s=48 417_72ki
3
130
Android入門
180bbdf8267422d5814fd498ecea043a?s=48 hn410
0
300
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
1f1d874ed952074278d27fad3fb870b8?s=48 microcms
0
450
機能横断型チームにおける技術改善
63b77df425b26126961817a39969a660?s=48 takeshiakutsu
3
420
Go API クライアントの実装 〜Go Conference に載せれなかったTIPS〜
94500f2d1984cd5da6e445d89819052b?s=48 yyoshiki41
0
190
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
290
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
Eb6be531bcfaa99714d8d3b48665a5a9?s=48 budougumi0617
0
930
バンドル最適化マニアクス at tfconf
3aebd86547bfc5cdb451d5f2f95ed5d8?s=48 mizchi
3
1.9k

Featured

See All Featured
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
112
9.8k
Easily Structure & Communicate Ideas using Wireframe
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
181
15k
Keith and Marios Guide to Fast Websites
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
21k
Making the Leap to Tech Lead
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
113
6.9k
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
2.9k
Unsuck your backbone
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
659
55k
Writing Fast Ruby
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
57k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
From Idea to $5000 a Month in 5 Months
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
44k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.2k
What the flash - Photography Introduction
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
61
9.8k
Designing for Performance
245cee81a9c424266e5e401d844ea881?s=48 lara
596
63k

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