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
120
Intro to Data Visualisation - Digital Humanities Research Group
dave
1
180
Work Samples
dave
0
50
Web Maps and Data Visualisation
dave
0
640
Interactive Data Visualisation for Researchers
dave
1
730
DH2017 - Personæ: A Character-Visualisation Tool for Dramatic Texts
dave
0
120
Data Visualisation & Data Management - Experiences & Lessons
dave
0
200
Patterns of character & structure in Shakespeare: Exploring approaches to data visualisation
dave
0
160
Introduction to Interactive Data Visualisation
dave
1
1.1k
Other Decks in Programming
See All in Programming
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
370
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
580
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
150
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
200
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.5k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
780
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
340
テスト駆動Kaggle
isax1015
1
480
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
3
150
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
KATA
mclloyd
30
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Music & Morning Musume
bryan
46
6.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.1k
Adopting Sorbet at Scale
ufuk
77
9.5k
Fireside Chat
paigeccino
37
3.5k
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