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

Other Decks in Programming

See All in Programming
Querying Design System デザインシステムの意思決定を支える構造検索
Avatar for ikuma-t ikumatadokoro
1
1.2k
Feature Flags Suck! - KubeCon Atlanta 2025
Avatar for Pete Hodgson phodgson
0
160
PHPライセンス変更の議論を通じて学ぶOSSライセンスの基礎
Avatar for Atsushi Matsuo matsuo_atsushi
0
170
全員アーキテクトで挑む、 巨大で高密度なドメインの紐解き方
Avatar for Agata Naomichi agatan
7
9k
チーム開発の “地ならし"
Avatar for konifar konifar
8
5.9k
DartASTとその活用
Avatar for そた sotaatos
2
150
開発生産性が組織文化になるまでの軌跡
Avatar for ふくすけ tonegawa07
0
190
FlutterKaigi 2025 システム裏側
Avatar for Ryotaro Onoue yumnumm
0
1.2k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
260
スタートアップを支える技術戦略と組織づくり
Avatar for pospome pospome
8
11k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
4.9k
例外処理を理解して、設計段階からエラーを見つけやすく、起こりにくく #phpconfuk
Avatar for Takuma Kajikawa kajitack
12
6.4k

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
Navigating Team Friction
Avatar for Lara Hogan lara
190
16k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
410
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
Done Done
Avatar for chrislema chrislema
186
16k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k

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’, ‘[email protected]’); 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 [email protected] linkedin.com/in/davkell