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
980
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
Work Samples
dave
0
23
Web Maps and Data Visualisation
dave
0
300
Interactive Data Visualisation for Researchers
dave
1
330
DH2017 - Personæ: A Character-Visualisation Tool for Dramatic Texts
dave
0
43
Data Visualisation & Data Management - Experiences & Lessons
dave
0
130
Patterns of character & structure in Shakespeare: Exploring approaches to data visualisation
dave
0
50
Introduction to Interactive Data Visualisation
dave
1
700
William Robertson Network Data Visualisation
dave
0
1.8k
Supporting Digital Projects in the Humanities & Social Sciences
dave
0
920
Other Decks in Programming
See All in Programming
Blazor WebAssembly – Dynamische Formulare und Inhalte in Aktion
patrickjahr
0
150
The future of trust stores in Python
sethmlarson
0
180
Explore Java 17 and beyond
josepaumard
3
630
2022 Android Training
mixi_engineers
1
630
CLIツールにSwift Concurrencyを適用させようとしている話
417_72ki
3
130
Android入門
hn410
0
300
microCMS × Shopifyで、ECサイトがリニューアル後急成長した話
microcms
0
450
機能横断型チームにおける技術改善
takeshiakutsu
3
420
Go API クライアントの実装 〜Go Conference に載せれなかったTIPS〜
yyoshiki41
0
190
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
290
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
budougumi0617
0
930
バンドル最適化マニアクス at tfconf
mizchi
3
1.9k
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Making the Leap to Tech Lead
cromwellryan
113
6.9k
The Pragmatic Product Professional
lauravandoore
19
2.9k
Unsuck your backbone
ammeep
659
55k
Writing Fast Ruby
sferik
612
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
What the flash - Photography Introduction
edds
61
9.8k
Designing for Performance
lara
596
63k
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