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
200
Work Samples
Avatar for Dave Kelly dave
0
53
Web Maps and Data Visualisation
Avatar for Dave Kelly dave
0
680
Interactive Data Visualisation for Researchers
Avatar for Dave Kelly dave
1
760
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
210
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
CSC305 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
280
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
Avatar for Holly Cummins hollycummins
0
250
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
190
O Que É e Como Funciona o PHP-FPM?
Avatar for Marcel dos Santos marcelgsantos
0
200
Webサーバーサイド言語としてのRustについて
Avatar for kaza kouyuume
1
4.8k
『毎日の移動』を支えるGoバックエンド内製開発
Avatar for yutautsugi yutautsugi
2
280
モテるデスク環境
Avatar for mozumasu mozumasu
3
1.3k
AI 駆動開発におけるコミュニティと AWS CDK の価値
Avatar for Kenji Kono konokenj
5
240
When Dependencies Fail: Building Antifragile Applications in a Fragile World
Avatar for Selçuk Usta selcukusta
0
110
AI駆動で0→1をやって見えた光と伸びしろ
Avatar for passion😎 passion0102
1
830
Pythonに漸進的に型をつける
Avatar for Nealle nealle
1
120
kiroとCodexで最高のSpec駆動開発を！！数時間で web3ネイティブなミニゲームを作ってみたよ！
Avatar for Haruki Kondo mashharuki
0
900

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Visualization
Avatar for Eitan Lees eitanlees
149
16k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k

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