Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end Web Development Intro

Avatar for Dave Kelly Dave Kelly
January 24, 2012
Programming
9
1.1k

Front-end Web Development Intro

Presentation for CodeNinja.ie - intro to HTML5, CSS3, JS
Avatar for Dave Kelly

Dave Kelly

January 24, 2012
Tweet

More Decks by Dave Kelly

See All by Dave Kelly
Intro to Planning & Building Digital Projects
Avatar for Dave Kelly dave
0
110
Intro to Data Visualisation - Digital Humanities Research Group
Avatar for Dave Kelly dave
1
180
Work Samples
Avatar for Dave Kelly dave
0
48
Web Maps and Data Visualisation
Avatar for Dave Kelly dave
0
620
Interactive Data Visualisation for Researchers
Avatar for Dave Kelly dave
1
690
DH2017 - Personæ: A Character-Visualisation Tool for Dramatic Texts
Avatar for Dave Kelly dave
0
110
Data Visualisation & Data Management - Experiences & Lessons
Avatar for Dave Kelly dave
0
190
Patterns of character & structure in Shakespeare: Exploring approaches to data visualisation
Avatar for Dave Kelly dave
0
150
Introduction to Interactive Data Visualisation
Avatar for Dave Kelly dave
1
1k

Other Decks in Programming

See All in Programming
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
Avatar for Koki Senda thousanda
0
400
Road to RubyKaigi: Making Tinny Chiptunes with Ruby
Avatar for makicamel makicamel
4
540
Laravel × Clean Architecture
Avatar for Takayuki bumptakayuki
PRO
0
150
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
Avatar for ChengHao Yang tico88612
0
170
一緒に働きたくなるプログラマの思想 #QiitaConference
Avatar for mu_zaru mu_zaru
80
20k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
190
Thank you <💅>, What's the Next?
Avatar for Hayashibara Yuto ahoxa
1
590
Serving TUIs over SSH with Go
Avatar for Carlos Alexandro Becker caarlos0
0
610
エンジニア向けCursor勉強会 @ SmartHR
Avatar for Yuki Horikoshi yukisnow1823
3
12k
Storybookの情報をMCPサーバー化する
Avatar for Shota Iwamatsu shota_tech
1
230
Bedrock×MCPで社内ブログ執筆文化を育てたい！
Avatar for Har1101 har1101
7
1.5k
カウシェで Four Keys の改善を試みた理由
Avatar for ike ike002jp
1
130

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.7k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.8k
Side Projects
Avatar for Sacha Greif sachag
453
42k
Done Done
Avatar for chrislema chrislema
184
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
280
13k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k

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