HTML5 CSS3 Javascript

1. Corso WebApp iOS
“Web Dev for iOS Devices”
Lezione 06/10
”..you’ve got everything you need if you know
how to write apps using.. ..web standards..”
Steve Jobs
Apple Inc. Co-Founder.

2. Chapter 03
Web Development for iOS Devices
Chapter 07
Web Standards for WebKit
http://www.apress.com/9781430232469

3. Diario Lezioni
LEZIONE 06
Mobile Touch Development
HTML5
CSS3
Javascript

4. HTML5
Tim Berners-Lee

5. HTML5

6. HTML5

7. HTML5
Working in Progress
http://dev.w3.org/html5/spec/

8. HTML5
Ridefinizione Tag
<i>
<b>
<em>
<strong>

9. HTML5
tag italic: <i>
testo in formato italico
senza riferire nessuna particolare enfasi o importanza
al testo stesso

10. HTML5
tag bold: <b>
testo in formato bold
senza riferire nessuna particolare enfasi o importanza
al testo stesso

11. HTML5
tag emphatisis: <em>
testo enfatizzato
per uno specifico motivo

12. HTML5
tag strong emphasis: <strong>
testo molto enfatizzato
per uno specifico motivo

13. HTML5
Nuova Semantica
…
<aside>
…
<footer>
<header>
…
<nav>
…

14. HTML4 Vs HTML5

15. HTML5
Nuove Funzionalità
Audio/Video
Canvas
Application Caches
Geolocation
Web Workers

16. HTML5
tag video: <video>
<video
width="100%" height="148"
src="videos/iphone_facetime.mp4"
controls poster="pics/poster-facetime.jpg">
</video>

17. HTML5
tag video: <video>
alcuni attributi sono ignorati da iOS (iPhone)
autoplay
controls

18. HTML5
tag video: <video>
altri attributi hanno comportamenti standard su iOS (iPad)
controls (full-screen playback toggle)

19. HTML5
tag video: <video>
attributo preload
(iOS): auto = no preload
(desktop) auto = si preload

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. 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. HTML5
tag video: <video>

23. HTML5

24. HTML5
tag audio: <audio>
<audio src="audioName.mp3"></audio>

25. HTML5
tag audio: <audio>
alcuni formati audio
AAC (8-320Kbps)
HE-AAC (8-320Kbps)
MP3 (8-320Kbps)

26. HTML5
tag canvas: <canvas>
permette di ottenere effetti grafici avanzati
uso di immagini dinamiche
ridurre latenze di caricamento
downside: GPU overhead

27. HTML5
tag canvas: <canvas>
e’ un API Javascript che permette allo sviluppatore
di 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. HTML5
tag canvas: <canvas>
l’elemento <canvas> delimita dove Javascript
andrà a disegnare on-the-fly
quello che viene disegnato diviene parte del DOM
e viene “dimenticato” dal Javascript Engine

29. HTML5
tag canvas: <canvas>
Canvas Javascript API comprendono:
2D API
3D API

30. HTML5

31. HTML5
tag canvas: <canvas>
<canvas id=”canvasTest” width=”320” height=”200”>
Fallback Content
</canvas>

32. HTML5
tag canvas: <canvas>
disegnare usando <canvas> richiede:
recuperare un riferimento al canvas
ricevere il “drawing context” dall’elemento canvas
se si riceve il “drawing context”: disegnare

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. 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. 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. HTML5
HTML5 Canvas 2D API

37. HTML5
tag canvas: <canvas>
<canvas id=”canvasTest” width=”320” height=”200”>
Please Enable Javascript
</canvas>

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. HTML5

40. HTML5

41. Diario Lezioni
LEZIONE 06
Mobile Touch Development
HTML5
CSS3
Javascript

42. CSS3

43. CSS3

44. CSS3
Work in Progress
http://www.w3.org/Style/CSS/current-work

45. CSS3
Divisione in più moduli
alcuni sono:
The Box Model
Multi-Column Layout
Background and Borders
Lists Module
Text Effects
………

46. CSS3
Prefissi Vendor
fino 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. CSS3
Snelliscono il Design
es: bordi arrotondati senza immagini aggiuntive
alcune delle proprietà più utili sono

48. CSS3
Border Radious
-webkit-border-radius: <length>;

49. CSS3

50. CSS3
Gradient
-webkit-gradient ( <gradient-line> <color-stop1>
<color-stop2> <color-stopN> );

51. CSS3

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. CSS3

54. CSS3
Box Shadow
-webkit-box-shadow: <offset-x> <offeset-y> <blur radius>
<color>;

55. CSS3

56. CSS3
Text Shadow
-webkit-text-shadow: <offset-x> <offeset-y> <blur radius>
<color>;

57. CSS3

58. CSS3
Transition
-webkit-transition: <property> <time> <function>;

59. CSS3

60. CSS3
Transform
-webkit-transition: <transform function> <type of effect>;

61. CSS3

62. Diario Lezioni
LEZIONE 06
Mobile Touch Development
HTML5
CSS3
Javascript

63. Javascript
Javascript NON é Java

64. Javascript
JAVASCRIPT
NON E’
JAVA

65. Javascript

66. Javascript

67. Javascript
Reference
https://developer.mozilla.org/en/JavaScript/Reference

68. Javascript
No General-Purpose Language
nato per interagire e manipolare pagine web
intenzionalmente limitato
es: no accesso a filesystem, database o hardware

69. Javascript
Client-Side Scripting Language
al contrario di altri linguaggi di scripting
Javascript lavora all’interno di un altra applicazione
Browser: Mobile Safari

70. Javascript

71. Javascript
Client-Side Scripting Language
al contrario di altri linguaggi di scripting (es: php)
Javascript é interpretato client-side

72. Javascript

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. Javascript
Linguaggio Interpretato
motore dell’interprete Javascript ha un ruolo dominante
ottimizzare l’interprete migliora di molto le prestazioni

75. Javascript
Struttura Linguaggio
implementa concetti tra cui:
tipo di dato (primitivo e non-primitivo)
variabile
statement condizionali/loop
operatori
funzione
oggetto

76. Javascript
variabili proprietà

77. Javascript
Come Interagisce con la Pagina Web?
interagendo con l’oggetto window
messo a disposizione (creati) dal browser
“window object”
BOM (Browser Object Model)

78. Javascript
window object
location object history object document object navigator object screen object
forms object images object links object

79. Javascript
window object
location object history object document object navigator object screen object
forms object images object links object

80. Javascript

81. Javascript

82. Javascript

83. Javascript

84. Esercitazione
Utilizzare Guida* di Riferimento
del Framework e Javascript
1. Implementare le Funzioni Specifiche
2. Implementare la Logica della Dinamica
* versione online e/o formato elettronico

85. PROSSIMA LEZIONE
LEGGERE
Native-Like iOS Interface
Interazione Servizi Nativi iOS