Corso WebApp iOS - Lezione 06: Web Development for iOS Devices

871 views

Published on

HTML5
CSS3
Javascript

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
871
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Corso WebApp iOS - Lezione 06: Web Development for iOS Devices

  1. 1. Corso WebApp iOS “Web Dev for iOS Devices” Lezione 06/10”..you’ve got everything you need if you knowhow to write apps using.. ..web standards..” Steve Jobs Apple Inc. Co-Founder.
  2. 2. Chapter 03Web Development for iOS DevicesChapter 07Web Standards for WebKit http://www.apress.com/9781430232469
  3. 3. Diario Lezioni LEZIONE 06 Mobile Touch Development HTML5 CSS3 Javascript
  4. 4. HTML5Tim Berners-Lee
  5. 5. HTML5
  6. 6. HTML5
  7. 7. HTML5 Working in Progresshttp://dev.w3.org/html5/spec/
  8. 8. HTML5Ridefinizione Tag <i> <b> <em> <strong>
  9. 9. HTML5 tag italic: <i> testo in formato italicosenza riferire nessuna particolare enfasi o importanza al testo stesso
  10. 10. HTML5 tag bold: <b> testo in formato boldsenza riferire nessuna particolare enfasi o importanza al testo stesso
  11. 11. HTML5 tag emphatisis: <em> testo enfatizzatoper uno specifico motivo
  12. 12. HTML5tag strong emphasis: <strong> testo molto enfatizzato per uno specifico motivo
  13. 13. HTML5Nuova Semantica … <aside> … <footer> <header> … <nav> …
  14. 14. HTML4 Vs HTML5
  15. 15. HTML5Nuove Funzionalità Audio/Video CanvasApplication Caches Geolocation Web Workers
  16. 16. HTML5 tag video: <video><video width="100%" height="148" src="videos/iphone_facetime.mp4" controls poster="pics/poster-facetime.jpg"></video>
  17. 17. HTML5 tag video: <video>alcuni attributi sono ignorati da iOS (iPhone) autoplay controls
  18. 18. HTML5 tag video: <video>altri attributi hanno comportamenti standard su iOS (iPad) controls (full-screen playback toggle)
  19. 19. HTML5 tag video: <video> attributo preload (iOS): auto = no preload(desktop) auto = si preload
  20. 20. HTML5 tag video: <video><video> <source src="videos/iphone_facetime.mp4" media=”(max-device-width:320px)”></source> <source src="videos/ipad_facetime.mp4" media=”(min-device-width:768px)”></source></video>
  21. 21. HTML5 tag video: <video> formati video H.264 (up to 720p, 30fps)MPEG-4 (up to 2.5 Mbps, 640x480px)M-JPG (up to 35 Mbps, 1280x720px)
  22. 22. HTML5tag video: <video>
  23. 23. HTML5
  24. 24. HTML5 tag audio: <audio><audio src="audioName.mp3"></audio>
  25. 25. HTML5tag audio: <audio>alcuni formati audio AAC (8-320Kbps)HE-AAC (8-320Kbps) MP3 (8-320Kbps)
  26. 26. HTML5 tag canvas: <canvas>permette di ottenere effetti grafici avanzati uso di immagini dinamiche ridurre latenze di caricamento downside: GPU overhead
  27. 27. HTML5 tag canvas: <canvas> e’ un API Javascript che permette allo sviluppatoredi codificare delle operazioni di disegno basate sul singolo pixel (contrapposti ai vettori SVG) possono inoltre essere usati tutti gli assets grafici compatibili con un browser (png, jpg, …)
  28. 28. HTML5 tag canvas: <canvas> l’elemento <canvas> delimita dove Javascript andrà a disegnare on-the-flyquello che viene disegnato diviene parte del DOM e viene “dimenticato” dal Javascript Engine
  29. 29. HTML5 tag canvas: <canvas>Canvas Javascript API comprendono: 2D API 3D API
  30. 30. HTML5
  31. 31. HTML5 tag canvas: <canvas><canvas id=”canvasTest” width=”320” height=”200”> Fallback Content</canvas>
  32. 32. HTML5 tag canvas: <canvas> disegnare usando <canvas> richiede: recuperare un riferimento al canvasricevere il “drawing context” dall’elemento canvas se si riceve il “drawing context”: disegnare
  33. 33. HTML5 tag canvas: <canvas>function drawOnCanvas() { var ctxElement = document.getElementById(“canvasTest”); var ctx = ctxElement.getContext(“2d”); if (ctx != null) { // we can draw using Canvas 2D API }}
  34. 34. HTML5 tag canvas: <canvas>function drawOnCanvas() { var ctxElement = document.getElementById(“canvasTest”); var ctx = ctxElement.getContext(“2d”); if (ctx != null) { // we can draw using Canvas 2D API }}
  35. 35. HTML5 tag canvas: <canvas>function drawOnCanvas() { var ctxElement = document.getElementById(“canvasTest”); var ctx = ctxElement.getContext(“2d”); if (ctx != null) { // we can draw using Canvas 2D API }}
  36. 36. HTML5HTML5 Canvas 2D API
  37. 37. HTML5 tag canvas: <canvas><canvas id=”canvasTest” width=”320” height=”200”> Please Enable Javascript</canvas>
  38. 38. HTML5 tag canvas: <canvas>function drawOnCanvas() { var ctxElement = document.getElementById(“canvasTest”); var ctx = ctxElement.getContext(“2d”); if (ctx != null) { ctx.fillStyle = "#F00"; ctx.fillRect(0,0, ctx.canvas.width, ctx.canvas.height); }}
  39. 39. HTML5
  40. 40. HTML5
  41. 41. Diario Lezioni LEZIONE 06 Mobile Touch Development HTML5 CSS3 Javascript
  42. 42. CSS3
  43. 43. CSS3
  44. 44. CSS3 Work in Progresshttp://www.w3.org/Style/CSS/current-work
  45. 45. CSS3Divisione in più moduli alcuni sono: The Box Model Multi-Column LayoutBackground and Borders Lists Module Text Effects ………
  46. 46. CSS3 Prefissi Vendorfino a quando CSS3 non raggiungerà il “recommended status” ogni browser vendor può implementare le sue proprietà border-radius: 3px; -webkit-border-radius: 3px; (WebKit-based Browser) -moz-border-radius: 3px; (Gecko-based Browser)
  47. 47. CSS3 Snelliscono il Designes: bordi arrotondati senza immagini aggiuntive alcune delle proprietà più utili sono
  48. 48. CSS3 Border Radious-webkit-border-radius: <length>;
  49. 49. CSS3
  50. 50. CSS3 Gradient-webkit-gradient ( <gradient-line> <color-stop1> <color-stop2> <color-stopN> );
  51. 51. CSS3
  52. 52. CSS3 Gradient: Caso d’Uso “The Store”-webkit-gradient(linear, 0% 0%, 0% 100%, from(#cdd5df), color-stop(3%, #b0bccd), color-stop(50%, #889bb3), color-stop(51%, #8195af), color-stop(97%, #6d84a2), to(#2d3642));
  53. 53. CSS3
  54. 54. CSS3 Box Shadow-webkit-box-shadow: <offset-x> <offeset-y> <blur radius> <color>;
  55. 55. CSS3
  56. 56. CSS3 Text Shadow-webkit-text-shadow: <offset-x> <offeset-y> <blur radius> <color>;
  57. 57. CSS3
  58. 58. CSS3 Transition-webkit-transition: <property> <time> <function>;
  59. 59. CSS3
  60. 60. CSS3 Transform-webkit-transition: <transform function> <type of effect>;
  61. 61. CSS3
  62. 62. Diario Lezioni LEZIONE 06 Mobile Touch Development HTML5 CSS3 Javascript
  63. 63. Javascript Javascript NON é Java
  64. 64. JavascriptJAVASCRIPT NON E’ JAVA
  65. 65. Javascript
  66. 66. Javascript
  67. 67. Javascript Referencehttps://developer.mozilla.org/en/JavaScript/Reference
  68. 68. Javascript No General-Purpose Language nato per interagire e manipolare pagine web intenzionalmente limitatoes: no accesso a filesystem, database o hardware
  69. 69. Javascript Client-Side Scripting Language al contrario di altri linguaggi di scriptingJavascript lavora all’interno di un altra applicazione Browser: Mobile Safari
  70. 70. Javascript
  71. 71. Javascript Client-Side Scripting Languageal contrario di altri linguaggi di scripting (es: php) Javascript é interpretato client-side
  72. 72. Javascript
  73. 73. Javascript Client-Side Scripting Language esiste concetto di oggetto non esiste concetto di classe debolmente tipizzato(es: no necessario definire tipo di una variabile)
  74. 74. Javascript Linguaggio Interpretatomotore dell’interprete Javascript ha un ruolo dominanteottimizzare l’interprete migliora di molto le prestazioni
  75. 75. Javascript Struttura Linguaggio implementa concetti tra cui:tipo di dato (primitivo e non-primitivo) variabile statement condizionali/loop operatori funzione oggetto
  76. 76. Javascriptvariabili proprietà
  77. 77. Javascript Come Interagisce con la Pagina Web? interagendo con l’oggetto windowmesso a disposizione (creati) dal browser “window object” BOM (Browser Object Model)
  78. 78. Javascript window objectlocation object history object document object navigator object screen object forms object images object links object
  79. 79. Javascript window objectlocation object history object document object navigator object screen object forms object images object links object
  80. 80. Javascript
  81. 81. Javascript
  82. 82. Javascript
  83. 83. Javascript
  84. 84. Esercitazione Utilizzare Guida* di Riferimento del Framework e Javascript1. Implementare le Funzioni Specifiche2. Implementare la Logica della Dinamica* versione online e/o formato elettronico
  85. 85. PROSSIMA LEZIONE LEGGERE Native-Like iOS Interface Interazione Servizi Nativi iOS

×