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
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
75
Intro to Data Visualisation - Digital Humanities Research Group
dave
1
130
Work Samples
dave
0
46
Web Maps and Data Visualisation
dave
0
550
Interactive Data Visualisation for Researchers
dave
1
600
DH2017 - Personæ: A Character-Visualisation Tool for Dramatic Texts
dave
0
75
Data Visualisation & Data Management - Experiences & Lessons
dave
0
150
Patterns of character & structure in Shakespeare: Exploring approaches to data visualisation
dave
0
110
Introduction to Interactive Data Visualisation
dave
1
970
Other Decks in Programming
See All in Programming
Architecture Decision Record (ADR)
nearme_tech
PRO
1
700
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
6
1.4k
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1.1k
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
540
ドメイン駆動設計を実践するために必要なもの
bikisuke
4
340
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
680
上手に付き合うコンポーネントテスト
quramy
1
250
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
620
Our Websites Need a Lifestyle Change, Not a Diet
ryantownsend
0
150
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Docker and Python
trallard
39
3k
The Cult of Friendly URLs
andyhume
76
6k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
We Have a Design System, Now What?
morganepeng
48
7.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
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