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
120
Intro to Data Visualisation - Digital Humanities Research Group
Avatar for Dave Kelly dave
1
180
Work Samples
Avatar for Dave Kelly dave
0
50
Web Maps and Data Visualisation
Avatar for Dave Kelly dave
0
640
Interactive Data Visualisation for Researchers
Avatar for Dave Kelly dave
1
730
DH2017 - Personæ: A Character-Visualisation Tool for Dramatic Texts
Avatar for Dave Kelly dave
0
120
Data Visualisation & Data Management - Experiences & Lessons
Avatar for Dave Kelly dave
0
200
Patterns of character & structure in Shakespeare: Exploring approaches to data visualisation
Avatar for Dave Kelly dave
0
160
Introduction to Interactive Data Visualisation
Avatar for Dave Kelly dave
1
1.1k

Other Decks in Programming

See All in Programming
A full stack side project webapp all in Kotlin (KotlinConf 2025)
Avatar for Dan Kim dankim
0
130
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
230
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
5
8k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
860
Result型で“失敗”を型にするPHPコードの書き方
Avatar for Takuma Kajikawa kajitack
5
960
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
Avatar for Hiroki Iseri goyoki
5
980
git worktree × Claude Code × MCP ～生成AI時代の並列開発フロー～
Avatar for hisuzuya hisuzuya
1
590
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
1
670
#QiitaBash MCPのセキュリティ
Avatar for Tommy(sigma) ryosukedtomita
1
1.4k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
990
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
5
1.3k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Avatar for lni_T lnit
3
500

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Scaling GitHub
Avatar for Zach Holman holman
460
140k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k

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