CMCC - Le novità introdotte da HTML5

HTML5 - il tag audio

• Supporto integrato dei media di tipo audio
• Formati e rispettivo mime-type:
  • mp3 (audio/mpeg)
  • ogg (audio/ogg)
  • wav (audio/wav)
• Supporto a sorgenti multiple mediante il tag source (fallback)
• È possibile inserire all'interno del tag del testo, che verrà visualizzato se il browser non supporta la feature

HTML5 - il tag audio

<audio controls loop>
  <source src="http://www.quackit.com/music/good_enough.mp3" 
    type="audio/mpeg">
  <p>Your browser does not support the audio element.</p>
</audio>

HTML5 - il tag video

• Supporto integrato dei media di tipo video
• Formati e rispettivo mime-type:
  • mp4 (video/mp4)
  • WebM (video/webm)
  • Ogg/Theora (video/ogg)
• Supporto a sorgenti multiple mediante il tag source (fallback)
• È possibile inserire all'interno del tag del testo, che verrà visulaizzato se il browser non supporta la feature
• Possibile fallback mediante tag object

HTML5 - il tag video

<video controls loop>
  <source src="http://www.w3schools.com/html/movie.ogg#t=5,9"/>
  <source src="http://www.w3schools.com/html/movie.mp4#t"/>
  <object data="fhttp://www.w3schools.com/html/movie.swf" type="application/x-shockwave-flash">
    <param value="movie.swf" name="movie"/>
  </object>
  <track src="devstories-en.vtt" label="English subtitles"
         kind="subtitles" srclang="en" default></track>
  <p>Your browser does not support the <code>video</code> element.</p>
</video>

<!--
ATTRIBUTI DISPONIBILI:
muted, width, height, autoplay, loop, buffered, controls
-->

HTML5 - il tag canvas

• Viene utilizzato per disegnare su una pagina web mediante API JavaScript
• Griglia bidimensionale con coordinate (0,0) in alto a sinistra

<canvas id="myCanvas"
        width="250"
        height="100"
        style="border:1px solid;">
  Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0,0,150,75);
</script>

Il formato JSON

• JSON (JavaScript Object Notation) è un semplice formato testuale per lo scambio di dati (standard ECMA 404)
• Basato su un sottoinsieme della sintassi JavaScript
• Nota: JSON è indipendente dal linguaggio di programmazione. Non occorre conoscere JavaScript per scrivere frammenti JSON

Il formato JSON

• L'oggetto JSON minimo è costituito da una coppia di parentesi graffe {} (oggetto vuoto)
• Costituito da due uniche strutture:
  • insiemi di coppie/valori (comunemente noti come hash)
  • insiemi di elementi ordinati (array)
• Array e Hash possono essere combinati tra loro a più livelli di nidificazione, senza alcun limite (hash di array, array di array, ecc.)
• Strutture dati universali, supportate virtualmente da tutti i linguaggi di programmazione

Il formato JSON

{
  "esempio_hash": {
    "nome": "Domenico",
    "cognome": "Martella"
  },
  "esempio_array_stringhe": [
    "testo1", "test2"
  ],
  "esempio_array_numerico": [
    1, 2, 3, 4
  ]
}

Chart.js

• Disegnare grafici in HTML5 e Javascript http://www.chartjs.org
• Utilizza il tag canvas di HTML5

Come si usa:

1. Si include la libreria nella pagina
2. Si crea un tag canvas su cui disegnare
3. Si disegna utilizzando la libreria

Chart.js

• Per utilizzare Chart.js è sufficiente:
  • una istruzione di Javascript che identifica il tipo di grafico
  • del JSON per i dati e la configurazione
• Al variare del tipo di grafico, cambia la struttura del JSON di configurazione

Chart.js - Pie chart

<canvas id="myChart" width="310" height="300"></canvas>
<script src="../../res/vendor/chartjs/Chart.js"></script>
<script type="text/javascript">
var data = [
  { value: 30, color:"#FF2A1E" },
  { value : 50, color : "#E85C1B" },
  { value : 100, color : "#FFA01F" }
];

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);
</script>

Chart.js - Linear

<canvas id="myChart" width="310" height="300"></canvas>
<script src="../../res/vendor/chartjs/Chart.js"></script>
<script type="text/javascript">
var data = {
  labels : ["January","February","March","April","May","June"],
  datasets : [
    {
      fillColor : "rgba(255,230,0,0.5)",
      strokeColor : "rgba(220,220,220,1)",
      pointColor : "rgba(220,220,220,1)",
      pointStrokeColor : "#fff",
      data : [65,59,90,81,56,55]
    },
    {
      fillColor : "rgba(255,160,31,0.5)",
      strokeColor : "rgba(151,187,205,1)",
      pointColor : "rgba(151,187,205,1)",
      pointStrokeColor : "#fff",
      data : [28,48,40,19,96,27]
    }
  ]
}

var options = {
  //Boolean - Whether to show labels on the scale
  scaleShowLabels : true,
  //String - Scale label font declaration for the scale label
  scaleFontFamily : "'Arial'",
  //Number - Scale label font size in pixels
  scaleFontSize : 11,
  //String - Scale label font colour
  scaleFontColor : "#666",
  ///Boolean - Whether grid lines are shown across the chart
  scaleShowGridLines : true,
  //Boolean - Whether the line is curved between points
  bezierCurve : true,
  //Boolean - Whether to show a dot for each point
  pointDot : true,
  //Boolean - Whether to animate the chart
  animation : true,
  //Number - Number of animation steps
  animationSteps : 60,
}

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data, options);
</script>

Chart.js - Bar chart

<canvas id="myChart" width="310" height="300"></canvas>
<script src="../../res/vendor/chartjs/Chart.js"></script>
<script type="text/javascript">
var data = {
  labels : ["January","February","March","April","May","June"],
  datasets : [
    {
      fillColor : "rgba(255,230,0,0.5)",
      strokeColor : "rgba(220,220,220,1)",
      data : [65,59,90,81,56,55]
    },
    {
      fillColor : "rgba(255,160,31,0.5)",
      strokeColor : "rgba(151,187,205,1)",
      data : [28,48,40,19,96,27]
    }
  ]
}

var options = {
  //Boolean - Whether to show labels on the scale
  scaleShowLabels : true,
  //String - Scale label font declaration for the scale label
  scaleFontFamily : "'Arial'",
  //Number - Scale label font size in pixels
  scaleFontSize : 11,
  //Boolean - If there is a stroke on each bar
  barShowStroke : true,
  //Number - Pixel width of the bar stroke
  barStrokeWidth : 2,
  //Number - Spacing between each of the X value sets
  barValueSpacing : 5,
  //Number - Spacing between data sets within X values
  barDatasetSpacing : 1
}

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data, options);
</script>

Chart.js - Doughnut chart

<canvas id="myChart" width="310" height="300"></canvas>
<script src="../../res/vendor/chartjs/Chart.js"></script>
<script type="text/javascript">
var data = [
  { value: 30, color:"#F7464A" },
  { value : 50, color : "#E2EAE9" },
  { value : 100, color : "#D4CCC5" },
  { value : 40, color : "#949FB1" },
  { value : 120, color : "#4D5360" }
]

var options = {
  //The percentage of the chart that we cut out of the middle.
  percentageInnerCutout : 50,
  //Boolean - Whether we should animate the chart
  animation : true,
  //Number - Amount of animation steps
  animationSteps : 100,
  //String - Animation easing effect
  animationEasing : "easeOutBounce",
  //Boolean - Whether we animate the rotation of the Doughnut
  animateRotate : true,
  //Boolean - Whether we animate scaling the Doughnut from the centre
  animateScale : false,
}

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Doughnut(data, options);
</script>

HTML5 - il tag math

• Permette di usare MathML all'interno di un documento html
• Ne esistono due versioni: Presentation e Content
• Tag principali (Presentation):
  • mrow: riga di un'espressione (math row)
  • mo: operatore (math operator)
  • mi: variabile (math identifier)
  • mn: valore numerico (math number)

HTML5 - il tag math

<math>
  <mrow>
    <munderover>
      <mo>&Integral;</mo>
      <mn>0</mn>
      <mi>&infin;</mi>
    </munderover>
    <mi>sin</mi>
    <mo>&InvisibleTimes;</mo>
    <mi>x</mi><mspace width="0.25em" />
    <mo>&PartialD;</mo><mo>&InvisibleTimes;</mo><mi>x</mi>
  </mrow>
</math>

HTML5 - il tag math

• MathJax Polyfill library

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_HTMLorMML">
</script>
<math>
  <mrow>
    <munderover>
      <mo>&Integral;</mo>
      <mn>0</mn>
      <mi>&infin;</mi>
    </munderover>
    <mi>sin</mi>
    <mo>&InvisibleTimes;</mo>
    <mi>x</mi><mspace width="0.25em" />
    <mo>&PartialD;</mo><mo>&InvisibleTimes;</mo><mi>x</mi>
  </mrow>
</math>

SVG

• Scalable Vector Graphics: formato testuale per grafica vettoriale
• Linguaggio derivato da XML e standardizzato da W3C
• Supporto a:
  • forme geometriche e path
  • immagini raster (embedded o esterne)
  • testo (font vettoriali)
  • riempimenti, retini, gradienti, effettistica

HTML5 - il tag svg

• Permette di mescolare codice SVG all'interno di un documento HTML
• Gli elementi SVG si integrano nel DOM risultando modificabili via JavaScript

<svg
  width="744.09448819"
  height="1052.3622047"
  id="svg2"
  version="1.1">
  <rect
    style="fill:#ff6600;fill-opacity:1;stroke:#000000;stroke-width:1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
    id="rect2987"
    width="130"
    height="240"
    x="10"
    y="10" />
</svg>