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
130
Intro to Data Visualisation - Digital Humanities Research Group
Avatar for Dave Kelly dave
1
190
Work Samples
Avatar for Dave Kelly dave
0
53
Web Maps and Data Visualisation
Avatar for Dave Kelly dave
0
660
Interactive Data Visualisation for Researchers
Avatar for Dave Kelly dave
1
740
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
210
Patterns of character & structure in Shakespeare: Exploring approaches to data visualisation
Avatar for Dave Kelly dave
0
170
Introduction to Interactive Data Visualisation
Avatar for Dave Kelly dave
1
1.1k

Other Decks in Programming

See All in Programming
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
Avatar for Taito Tanaka taitotnk
0
860
@Environment(\.keyPath)那么好我不允许你们不知道！ / atEnvironment keyPath is so good and you should know it!
Avatar for Elvis Shi lovee
0
120
go test -json そして testing.T.Attr / Kyoto.go #63
Avatar for utagawa kiki utgwkk
3
310
Swift Updates - Learn Languages 2025
Avatar for Yuta Koshizawa koher
2
480
HTMLの品質ってなんだっけ？ “HTMLクライテリア”の設計と実践
Avatar for una unachang113
4
2.9k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
Avatar for mazrean mazrean
1
280
Rancher と Terraform
Avatar for Ryoma Fujiwara fufuhu
2
550
AWS発のAIエディタKiroを使ってみた
Avatar for 入井 啓太 iriikeita
1
190
はじめてのMaterial3 Expressive
Avatar for yume ym223
2
750
そのAPI、誰のため？ Androidライブラリ設計における利用者目線の実践テクニック
Avatar for mkeeda mkeeda
2
310
複雑なフォームに立ち向かう Next.js の技術選定
Avatar for Takashi Machinaga macchiitaka
2
140
奥深くて厄介な「改行」と仲良くなる20分
Avatar for おぐえもん oguemon
1
540

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
9
810
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
62k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.5k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k

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