Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-end Web Development Intro
Search
Dave Kelly
January 24, 2012
Programming
9
1.1k
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
Intro to Planning & Building Digital Projects
dave
0
130
Intro to Data Visualisation - Digital Humanities Research Group
dave
1
200
Work Samples
dave
0
53
Web Maps and Data Visualisation
dave
0
680
Interactive Data Visualisation for Researchers
dave
1
770
DH2017 - Personæ: A Character-Visualisation Tool for Dramatic Texts
dave
0
130
Data Visualisation & Data Management - Experiences & Lessons
dave
0
210
Patterns of character & structure in Shakespeare: Exploring approaches to data visualisation
dave
0
180
Introduction to Interactive Data Visualisation
dave
1
1.1k
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.6k
オンデバイスAIとXcode
ryodeveloper
0
230
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
fossamagna
2
100
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
210
ドメイン駆動設計のエッセンス
masuda220
PRO
13
4.8k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
Introduce Hono CLI
yusukebe
6
3.1k
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.7k
Google Opalで使える37のライブラリ
mickey_kubo
3
150
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
How to Ace a Technical Interview
jacobian
280
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
A designer walks into a library…
pauljervisheath
209
24k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Scaling GitHub
holman
463
140k
Agile that works and the tools we love
rasmusluckow
331
21k
What's in a price? How to price your products and services
michaelherold
246
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
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’, ‘
[email protected]
’); 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
[email protected]
linkedin.com/in/davkell