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
190
Work Samples
Avatar for Dave Kelly dave
0
51
Web Maps and Data Visualisation
Avatar for Dave Kelly dave
0
650
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
QA x AIエコシステム段階構築作戦
Avatar for Osu osu
0
230
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
Avatar for ShuyaKinjo shuyakinjo
0
130
新しいモバイルアプリ勉強会（仮）について
Avatar for 上ちょ / uetyo uetyo
1
240
The Niche of CDK Grant オブジェクトって何者？/the-niche-of-cdk-what-isgrant-object
Avatar for hassaku63 hassaku63
1
740
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
Avatar for Kenji Kono konokenj
6
1k
Workers を定期実行する方法は一つじゃない
Avatar for rokuosan rokuosan
0
140
リッチエディターを安全に開発・運用するために
Avatar for una unachang113
1
340
階層化自動テストで開発に機動力を
Avatar for ICKX ickx
1
460
PHPUnitの限界をPlaywrightで補完するテストアプローチ
Avatar for yuzneri yuzneri
0
370
Amazon Q CLI開発で学んだAIコーディングツールの使い方
Avatar for matsukada licux
3
160
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
Avatar for Ucchiii ucchiii43
0
240
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか？
Avatar for Shinichi Takayanagi stakaya
5
630

Featured

See All Featured
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
Done Done
Avatar for chrislema chrislema
185
16k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
740
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6k

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