SlideShare una empresa de Scribd logo
1 de 22
Descargar para leer sin conexión
LA
CONNECTED
TV



CSP@SCUOLA
in collaborazione
con ITI FAUSER NOVARA
Anno scolastico 2011-2012
Cos’è la Connected TV



• E’ un televisore che può connettersi ad Internet, tramite la porta
  Ethernet di cui è dotato o con un’antenna WI-FI (anche su chiavetta
  USB)

• Permette l’esecuzione di applicazioni “Internet based”, ovvero che
  sfruttano le funzionalità messe a disposizione della rete




                                                                        2
Quali applicazioni




• Generalmente le applicazioni installate sul tv sfruttano la
  connessione ad Internet per offrire servizi, come ad esempio:

    –   Visualizzazione di notizie (cronaca, sport, meteo…)
    –   Visione di film, anche in alta definizione, acquistabili o gratis
    –   Uso di servizi quali YouTube, Skype, Facebook…
    –   Navigazione sul web (più raro e vedremo perché)




                                                                            3
Le applicazioni (o widgets)



• Generalmente la Connected TV non consente la navigazione “libera”
  tramite web-browser
• I contenuti offerti da Internet sono fruibili attraverso apposite
  applicazioni, o “widgets”
• Quindi ci sarà il widget per usare Facebook, quello per guardare
  video su YouTube, quello per ricevere le informazioni di finanza e
  così via




                                                                       4
Le applicazioni (o widgets)




• Le applicazioni si possono ottenere, gratis o a pagamento, da un
  apposito “store”
• una volta scaricate, saranno memorizzate nella memoria di massa
  del tv e saranno accessibili premendo il tasto “InternetTV” sul
  telecomando




                                                                     5
Application Manager




                                 Le applicazioni disponibili sul televisore
                                 vengono mostrate nell’Application
                                 Manager




Il tasto per
entrare in modalità
Connected TV e
vedere le
applicazioni

                                                                              6
Struttura di un’applicazione


•   Un’applicazione è simile ad una pagina web perché l’ambiente operativo
    in cui viene eseguita è il browser, che sui TV Samsung si chiama “Maple”
•   Il browser non è visualizzato sul tv, ma c’è
•   L’applicazione è composta da :
      – Un livello che determina l’aspetto grafico: il foglio di stile CSS, per
         curare nei minimi dettagli lo stile di tabelle, pulsanti, testo, ecc.
      – Un livello che determina la struttura grafica: la pagina HTML, che
         gestisce la disposizione degli elementi visualizzati
      – Un livello che determina il suo funzionamento: il codice Javascript,
         responsabile della logica applicativa (cosa succede quando si preme
         un pulsante, si sceglie di eseguire un video, si inseriscono dati in un
         form, ecc.)




                                                                                   7
Struttura di un’applicazione



• In pratica, quali sono i file necessari per un’applicazione?
   – index.html, che costituisce il punto di accesso (“la chiave
      d’accensione” dell’applicazione)
   – Main.js, il “motore” dell’applicazione, il file in javascript che
      determina la logica (“cosa succede quando”)
   – stylesheet.css, il foglio di stile che cura l’aspetto grafico fino al
      particolare più piccolo
   – config.xml, un file di configurazione generale
   – (opzionali) file di immagini, file flash (.swf)




                                                                             8
Strumenti per creare un’app


• Collegarsi dal proprio pc al seguente sito :
  http://www.samsungdforum.com/ , registrarsi, entrare nella
  sezione “Apps Guide” e cliccare su “Download SDK” per scaricare il
  kit di sviluppo software (SDK) della Samsung
• Terminato il download scompattare e lanciare l’eseguibile
• Verrà installato un programma che assiste nello sviluppo di
  un’applicazione e consente di scriverne il codice




                                                                       9
Strumenti per creare un’app




• Viene inoltre installato un programma che emula il televisore Samsung, consentendo
  di eseguire l’applicazione sviluppata direttamente sul proprio PC, per testarla




                                                                                       10
Strumenti per creare un’app


• Infine, viene predisposto, durante l’installazione del kit di sviluppo,
  un server il cui scopo è rendere disponibile al televisore
  l’applicazione creata su pc. La trasmissione avviene sulla rete che
  collega il pc al tv.




                                                                            11
Scriviamo una semplice App



               index.html (il punto d’accesso e la struttura dell’app)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Video Player</title>
      <script type=“text/javascript” language=“javascript”          import
          src=“$MANAGER_WIDGET/Common/API/Widget.js”></script>      codice
      <script type=“text/javascript” language=“javascript”
          src=“$MANAGER_WIDGET/Common/API/TVKeyValue.js”></script> javascript
       <script type="text/javascript" language="javascript"
         src="./javascript/Main.js"></script>
   </head>
                                                       Punto d’accesso
   <body onload=“Main.onLoad();”>
         <div id=“welcomeDiv”> Benvenuti! </div>
           <div id=“tastoDiv”> </div>
                                                            Struttura dell’app
         <a href=“javascript:void(0);” id=“anchor”
              onkeydown=“Main.keyDown();”> </a>
   </body>                                               Ancora per input
</html>
                                                                             12
Scriviamo una semplice App



                         Main.js (la logica applicativa)


var Main = {}
                                                           Dichiaro 2 variabili
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();                   plugins

Main.onLoad = function(){                 Il primo plugin serve a segnalare
   widgetAPI.sendReadyEvent();            che l’applicazione è caricata e
   document.getElementById(“anchor”).focus();
}                                         pronta
                                                 Metto il focus sull’ancora
Main.keyDown = function(){
   var keyCode = event.keyCode;

    document.getElementById(“tastoDiv”).innerHTML=“Codice tasto premuto: “
       +keyCode;
}
                   Funzione associata all’ancora e che quindi viene
                   chiamata quando premo un tasto sul telecomando

                                                                                  13
Scriviamo una semplice App



                       Stylesheet.css (il foglio di stile)

body {
   margin: 0;
   padding: 0;
   background-color:transparent;
}

#welcomeDiv {
   position: absolute;
   left: 50px; top: 50px; width: 500px; height:50px;
   background-color: #99FFFF;
   font-size: 30px;
   text-align:center;
}

# tastoDiv{
   position: absolute;
   left: 50px; top: 110px; width: 500px; height:50px;
   background-color: #99FFFF;
   font-size: 30px;
   text-align:center;
}

                                                             14
Che cosa fa questa app? Poco…


• Cattura la pressione di un tasto del telecomando e mostra sullo
  schermo il codice numerico associato ad esso; l’input da
  telecomando è gestito tramite il plugin apposito ed è catturato
  dall’”ancora”

• Proviamo adesso a realizzare un’applicazione che abbia la capacità
  di mostrare un video e di gestirne l’esecuzione con i tasti di PLAY,
  PAUSE e STOP, oltre a controllare il livello del volume




                                                                         15
Applicazione videoplayer



                           il nuovo index.html (1/2)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Video Player</title>
      <script type=“text/javascript” language=“javascript”
          src=“$MANAGER_WIDGET/Common/API/Widget.js”></script>
      <script type=“text/javascript” language=“javascript”
          src=“$MANAGER_WIDGET/Common/API/TVKeyValue.js”></script>
      <script type="text/javascript" language="javascript"         import
          src="./javascript/video/Player.js"></script>
      <script type="text/javascript" language="javascript"         codice
          src="./javascript/video/Audio.js"></script>              plugin
       <script type="text/javascript" language="javascript"        player
         src="./javascript/Main.js"></script>
   </head>



                                                                            16
Applicazione videoplayer



                           il nuovo index.html (2/2)


   <body onload=“Main.onLoad();”>
         <div id=“welcomeDiv”> Benvenuti! </div>
         <div id=“videoPlayerDiv”> </div>
         <a href=“javascript:void(0);” id=“anchor”
             onkeydown=“Main.keyDown();”> </a>
   </body>
</html>


Osservando la lista di inclusioni javascript, si
osservano due nuovi plugin : Plugin.js e Audio.js,
rispettivamente per l’esecuzione della parte video e
audio del flusso multimediale da riprodurre. Essi
consentono al programmatore di controllare
l’hardware del televisore che fornisce queste
funzioni                                               17
Applicazione videoplayer



                           Il nuovo Main.js (1/3)


var Main = {}

var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();

var videoURL = “”;

Main.onLoad = function()
{
   widgetAPI.sendReadyEvent();
   document.getElementById(“anchor”).focus();
   Player.setDisplayArea(50, 110, 320, 240);
   Player.init();
   Audio.init();
}




                                                    18
Applicazione videoplayer



                           Il nuovo Main.js (2/3)


Main.keyDown = function()
{
   var keyCode = event.keyCode;

   switch(keyCode){
      case tvKey.KEY_PLAY:
         if(Player.getState() == Player.PAUSED)
            Player.resumeVideo();
         else if(Player.getState() == Player.STOPPED)
            Player.playVideo();
      break;
      case tvKey.KEY_STOP:
         Player.stopVideo();
      break;
      case tvKey.KEY_PAUSE:
         if(Player.getState() == Player.PLAYING)
            Player.pauseVideo();
         break;



                                                        19
Applicazione videoplayer



                             Il nuovo Main.js (3/3)


        case tvKey.KEY_VOL_UP:
           Audio.setRelativeVolume(0);
        break;
        case tvKey.KEY_VOL_DOWN:
           Audio.setRelativeVolume(1);
        break;
    }
}




                                                      20
Applicazione videoplayer



                           Il nuovo Stylesheet.css

body {
   margin: 0;
   padding: 0;
   background-color:transparent;
}

#welcomeDiv {
   position: absolute;
   left: 50px; top: 50px; width: 500px; height:50px;
   background-color: #99FFFF;
   font-size: 30px;
   text-align:center;
}

#videoPlayerDiv{
   position: absolute;
   left: 50px; top: 110px; width: 320px; height:240px;
   border:1px solid yellow;
}



                                                         21
www.csp.it                             rd.csp.it

      CSP ICT Innovation

      Fabio Saracino – fabio.saracino@csp.it

      Registered and Central Offices
      Environment Park - Laboratori A1
      via Livorno 60 - 10144 Torino


      Tel +39 011 4815111
      Fax +39 011 4815001
      E-mail: marketing@csp.it




Lezione 1: piattaforme UAV di riferimento               22

Más contenido relacionado

Destacado

Final Presentation To Titans
Final Presentation To TitansFinal Presentation To Titans
Final Presentation To Titansscottthorpe
 
Edtl Presentation Graph And Audio2
Edtl Presentation Graph And Audio2Edtl Presentation Graph And Audio2
Edtl Presentation Graph And Audio2Malikoatl
 
13 Steps to Safely Deprovision and Delete a Google Apps User
13 Steps to Safely Deprovision and Delete a Google Apps User13 Steps to Safely Deprovision and Delete a Google Apps User
13 Steps to Safely Deprovision and Delete a Google Apps UserDatto
 
W SAN FRANCISCO
W SAN FRANCISCOW SAN FRANCISCO
W SAN FRANCISCOlisaleonor
 
Black Swan Prologue Excerpt
Black Swan Prologue ExcerptBlack Swan Prologue Excerpt
Black Swan Prologue Excerptclover66
 
Believe in America Plan for Jobs and Economic Growth
Believe in America Plan for Jobs and Economic Growth Believe in America Plan for Jobs and Economic Growth
Believe in America Plan for Jobs and Economic Growth Tawanda Kanhema
 
How to be a successful agile product manager
How to be a successful agile product managerHow to be a successful agile product manager
How to be a successful agile product managerAnupam Kundu
 
SVEA Presentazione progetto
SVEA Presentazione progettoSVEA Presentazione progetto
SVEA Presentazione progettoCSP Scarl
 
Raynon’s Intercultural Experiences
Raynon’s Intercultural  ExperiencesRaynon’s Intercultural  Experiences
Raynon’s Intercultural Experiencesraynon78
 
8 Dog Breeds That Don't Shed
8 Dog Breeds That Don't Shed8 Dog Breeds That Don't Shed
8 Dog Breeds That Don't ShedAnupam Kundu
 
Cool Technologies
Cool TechnologiesCool Technologies
Cool TechnologiesEKMom
 
Smart Players or Dumb pipes - Digital banking trends 2012
Smart Players or Dumb pipes - Digital banking trends 2012Smart Players or Dumb pipes - Digital banking trends 2012
Smart Players or Dumb pipes - Digital banking trends 2012Shay Rosen (שי רוזן)
 
Svea piemonte regional_analysis_report
Svea piemonte regional_analysis_reportSvea piemonte regional_analysis_report
Svea piemonte regional_analysis_reportCSP Scarl
 
sistema eragilea
sistema eragileasistema eragilea
sistema eragilealeire
 

Destacado (19)

Final Presentation To Titans
Final Presentation To TitansFinal Presentation To Titans
Final Presentation To Titans
 
V Festival Images
V Festival ImagesV Festival Images
V Festival Images
 
Edtl Presentation Graph And Audio2
Edtl Presentation Graph And Audio2Edtl Presentation Graph And Audio2
Edtl Presentation Graph And Audio2
 
Hippel
HippelHippel
Hippel
 
13 Steps to Safely Deprovision and Delete a Google Apps User
13 Steps to Safely Deprovision and Delete a Google Apps User13 Steps to Safely Deprovision and Delete a Google Apps User
13 Steps to Safely Deprovision and Delete a Google Apps User
 
W SAN FRANCISCO
W SAN FRANCISCOW SAN FRANCISCO
W SAN FRANCISCO
 
Menieres slides-050518
Menieres slides-050518Menieres slides-050518
Menieres slides-050518
 
Creativity
CreativityCreativity
Creativity
 
Black Swan Prologue Excerpt
Black Swan Prologue ExcerptBlack Swan Prologue Excerpt
Black Swan Prologue Excerpt
 
Believe in America Plan for Jobs and Economic Growth
Believe in America Plan for Jobs and Economic Growth Believe in America Plan for Jobs and Economic Growth
Believe in America Plan for Jobs and Economic Growth
 
How to be a successful agile product manager
How to be a successful agile product managerHow to be a successful agile product manager
How to be a successful agile product manager
 
SVEA Presentazione progetto
SVEA Presentazione progettoSVEA Presentazione progetto
SVEA Presentazione progetto
 
Raynon’s Intercultural Experiences
Raynon’s Intercultural  ExperiencesRaynon’s Intercultural  Experiences
Raynon’s Intercultural Experiences
 
8 Dog Breeds That Don't Shed
8 Dog Breeds That Don't Shed8 Dog Breeds That Don't Shed
8 Dog Breeds That Don't Shed
 
Cool Technologies
Cool TechnologiesCool Technologies
Cool Technologies
 
Smart Players or Dumb pipes - Digital banking trends 2012
Smart Players or Dumb pipes - Digital banking trends 2012Smart Players or Dumb pipes - Digital banking trends 2012
Smart Players or Dumb pipes - Digital banking trends 2012
 
Svea piemonte regional_analysis_report
Svea piemonte regional_analysis_reportSvea piemonte regional_analysis_report
Svea piemonte regional_analysis_report
 
sistema eragilea
sistema eragileasistema eragilea
sistema eragilea
 
Horse trail2
Horse trail2Horse trail2
Horse trail2
 

Similar a Csp@scuola smarttv corso1

EtnaDev 2015 - Windows Bridge
EtnaDev 2015 - Windows BridgeEtnaDev 2015 - Windows Bridge
EtnaDev 2015 - Windows BridgeGaetano Paternò
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angulardotnetcode
 
Introduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
Introduzione a GAE - Alessandro Aglietti e Lorenzo BugianiIntroduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
Introduzione a GAE - Alessandro Aglietti e Lorenzo Bugianifirenze-gtug
 
Le basi per lo sviluppo su Windows Phone tool, SDK, il primo progetto
 Le basi per lo sviluppo su Windows Phone tool, SDK, il primo progetto Le basi per lo sviluppo su Windows Phone tool, SDK, il primo progetto
Le basi per lo sviluppo su Windows Phone tool, SDK, il primo progettoMicrosoft Mobile Developer
 
Il PaaS di Google
Il PaaS di GoogleIl PaaS di Google
Il PaaS di GoogleMssiStf
 
Progettazione per Apple Watch - Todi Appy Days 2015
Progettazione per Apple Watch - Todi Appy Days 2015Progettazione per Apple Watch - Todi Appy Days 2015
Progettazione per Apple Watch - Todi Appy Days 2015Todi Appy Days
 
Wearable Lab: Progettazione per Apple Watch
Wearable Lab: Progettazione per Apple WatchWearable Lab: Progettazione per Apple Watch
Wearable Lab: Progettazione per Apple WatchPaolo Musolino
 
Meetup Fluent Design e Progressive Web App
Meetup Fluent Design e Progressive Web AppMeetup Fluent Design e Progressive Web App
Meetup Fluent Design e Progressive Web Appdotnetcode
 
Meetup Progressive Web App
Meetup Progressive Web AppMeetup Progressive Web App
Meetup Progressive Web Appdotnetcode
 
Cert04 70-484 - essentials of developing windows store apps
Cert04   70-484 - essentials of developing windows store appsCert04   70-484 - essentials of developing windows store apps
Cert04 70-484 - essentials of developing windows store appsDotNetCampus
 
Slide Mulesoft Meetup Milano #10.pdf
Slide Mulesoft Meetup Milano #10.pdfSlide Mulesoft Meetup Milano #10.pdf
Slide Mulesoft Meetup Milano #10.pdfFlorence Consulting
 
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...DrupalDay
 
Programmazione mobile: ANDROID
Programmazione mobile: ANDROIDProgrammazione mobile: ANDROID
Programmazione mobile: ANDROIDPaolo Tosato
 
Push Notification, Live Tile e Background Agent
Push Notification, Live Tile e Background AgentPush Notification, Live Tile e Background Agent
Push Notification, Live Tile e Background AgentDomusDotNet
 
Integrazione continua con TFS Build
Integrazione continua con TFS BuildIntegrazione continua con TFS Build
Integrazione continua con TFS BuildGian Maria Ricci
 
Le novita di visual studio 2012
Le novita di visual studio 2012Le novita di visual studio 2012
Le novita di visual studio 2012Crismer La Pignola
 

Similar a Csp@scuola smarttv corso1 (20)

WordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWAWordCamp Catania 2019 PWA e TWA
WordCamp Catania 2019 PWA e TWA
 
Intel AppUp Webinar Italiano html5
Intel AppUp Webinar Italiano html5Intel AppUp Webinar Italiano html5
Intel AppUp Webinar Italiano html5
 
EtnaDev 2015 - Windows Bridge
EtnaDev 2015 - Windows BridgeEtnaDev 2015 - Windows Bridge
EtnaDev 2015 - Windows Bridge
 
Meetup ASP.NET Core Angular
Meetup ASP.NET Core AngularMeetup ASP.NET Core Angular
Meetup ASP.NET Core Angular
 
Introduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
Introduzione a GAE - Alessandro Aglietti e Lorenzo BugianiIntroduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
Introduzione a GAE - Alessandro Aglietti e Lorenzo Bugiani
 
Le basi per lo sviluppo su Windows Phone tool, SDK, il primo progetto
 Le basi per lo sviluppo su Windows Phone tool, SDK, il primo progetto Le basi per lo sviluppo su Windows Phone tool, SDK, il primo progetto
Le basi per lo sviluppo su Windows Phone tool, SDK, il primo progetto
 
Il PaaS di Google
Il PaaS di GoogleIl PaaS di Google
Il PaaS di Google
 
Progettazione per Apple Watch - Todi Appy Days 2015
Progettazione per Apple Watch - Todi Appy Days 2015Progettazione per Apple Watch - Todi Appy Days 2015
Progettazione per Apple Watch - Todi Appy Days 2015
 
Wearable Lab: Progettazione per Apple Watch
Wearable Lab: Progettazione per Apple WatchWearable Lab: Progettazione per Apple Watch
Wearable Lab: Progettazione per Apple Watch
 
Meetup Fluent Design e Progressive Web App
Meetup Fluent Design e Progressive Web AppMeetup Fluent Design e Progressive Web App
Meetup Fluent Design e Progressive Web App
 
Meetup Progressive Web App
Meetup Progressive Web AppMeetup Progressive Web App
Meetup Progressive Web App
 
Cert04 70-484 - essentials of developing windows store apps
Cert04   70-484 - essentials of developing windows store appsCert04   70-484 - essentials of developing windows store apps
Cert04 70-484 - essentials of developing windows store apps
 
Slide Mulesoft Meetup Milano #10.pdf
Slide Mulesoft Meetup Milano #10.pdfSlide Mulesoft Meetup Milano #10.pdf
Slide Mulesoft Meetup Milano #10.pdf
 
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
Drupal Day 2012 - Applicazioni mobile multipiattaforma integrate con Drupal 7...
 
Mobile senza frontiere
Mobile senza frontiereMobile senza frontiere
Mobile senza frontiere
 
Programmazione mobile: ANDROID
Programmazione mobile: ANDROIDProgrammazione mobile: ANDROID
Programmazione mobile: ANDROID
 
Jquery mobile per App
Jquery mobile per AppJquery mobile per App
Jquery mobile per App
 
Push Notification, Live Tile e Background Agent
Push Notification, Live Tile e Background AgentPush Notification, Live Tile e Background Agent
Push Notification, Live Tile e Background Agent
 
Integrazione continua con TFS Build
Integrazione continua con TFS BuildIntegrazione continua con TFS Build
Integrazione continua con TFS Build
 
Le novita di visual studio 2012
Le novita di visual studio 2012Le novita di visual studio 2012
Le novita di visual studio 2012
 

Más de CSP Scarl

Reti Banda Ultra Larga e Internet delle cose
Reti Banda Ultra Larga e Internet delle cose Reti Banda Ultra Larga e Internet delle cose
Reti Banda Ultra Larga e Internet delle cose CSP Scarl
 
Internet delle cose e remote sensing per agricoltura di precisione Innovazion...
Internet delle cose e remote sensing per agricoltura di precisione Innovazion...Internet delle cose e remote sensing per agricoltura di precisione Innovazion...
Internet delle cose e remote sensing per agricoltura di precisione Innovazion...CSP Scarl
 
"Iot on the field: making smart environments in everyday experience"
"Iot on the field: making smart environments in everyday experience""Iot on the field: making smart environments in everyday experience"
"Iot on the field: making smart environments in everyday experience"CSP Scarl
 
Sigevi - Tecnologie ICT applicate in agricoltura
Sigevi - Tecnologie ICT applicate in agricolturaSigevi - Tecnologie ICT applicate in agricoltura
Sigevi - Tecnologie ICT applicate in agricolturaCSP Scarl
 
Living Labs ovvero il possibile contributo delle ICT ai Presidi Territoriali ...
Living Labs ovvero il possibile contributo delle ICT ai Presidi Territoriali ...Living Labs ovvero il possibile contributo delle ICT ai Presidi Territoriali ...
Living Labs ovvero il possibile contributo delle ICT ai Presidi Territoriali ...CSP Scarl
 
Forum PA challenge: HALADIN's
Forum PA challenge: HALADIN'sForum PA challenge: HALADIN's
Forum PA challenge: HALADIN'sCSP Scarl
 
Livinglabs per nexa_duretti
Livinglabs per nexa_durettiLivinglabs per nexa_duretti
Livinglabs per nexa_durettiCSP Scarl
 
Scuola futuro prossimo
Scuola futuro prossimoScuola futuro prossimo
Scuola futuro prossimoCSP Scarl
 
Storie dal futuro: persone e cose sempre connesse - per genitori
Storie dal futuro: persone e cose sempre connesse - per genitoriStorie dal futuro: persone e cose sempre connesse - per genitori
Storie dal futuro: persone e cose sempre connesse - per genitoriCSP Scarl
 
Storie dal futuro: persone e cose sempre connesse
Storie dal futuro: persone e cose sempre connesseStorie dal futuro: persone e cose sempre connesse
Storie dal futuro: persone e cose sempre connesseCSP Scarl
 
OBSERVO - Piattaforma Open Source per la videosorveglianza territoriale
OBSERVO - Piattaforma Open Source per la videosorveglianza territorialeOBSERVO - Piattaforma Open Source per la videosorveglianza territoriale
OBSERVO - Piattaforma Open Source per la videosorveglianza territorialeCSP Scarl
 
19 Luglio 2013 - Il Futuro della TV - Sergio Duretti - CSP
19 Luglio 2013 - Il Futuro della TV - Sergio Duretti - CSP19 Luglio 2013 - Il Futuro della TV - Sergio Duretti - CSP
19 Luglio 2013 - Il Futuro della TV - Sergio Duretti - CSPCSP Scarl
 
19 Luglio 2013 - Il futuro della TV - Marco Bussone - UNCEM
19 Luglio 2013 - Il futuro della TV - Marco Bussone - UNCEM19 Luglio 2013 - Il futuro della TV - Marco Bussone - UNCEM
19 Luglio 2013 - Il futuro della TV - Marco Bussone - UNCEMCSP Scarl
 
19 Luglio 2013 - Il futuro della TV - Marco Cantamessa - I3P
19 Luglio 2013 - Il futuro della TV - Marco Cantamessa - I3P19 Luglio 2013 - Il futuro della TV - Marco Cantamessa - I3P
19 Luglio 2013 - Il futuro della TV - Marco Cantamessa - I3PCSP Scarl
 
19 Luglio 2013 - Il futuro della TV - Andrea Piersanti, Virtual & Reality Mul...
19 Luglio 2013 - Il futuro della TV - Andrea Piersanti, Virtual & Reality Mul...19 Luglio 2013 - Il futuro della TV - Andrea Piersanti, Virtual & Reality Mul...
19 Luglio 2013 - Il futuro della TV - Andrea Piersanti, Virtual & Reality Mul...CSP Scarl
 
19 Luglio 2013 - Il Futuro della Televisione -
19 Luglio 2013 - Il Futuro della Televisione - 19 Luglio 2013 - Il Futuro della Televisione -
19 Luglio 2013 - Il Futuro della Televisione - CSP Scarl
 
19 Luglio 2013 - Il Futuro della Televisione - Andrea Casalegno - Top-IX
19 Luglio 2013 - Il Futuro della Televisione - Andrea Casalegno - Top-IX19 Luglio 2013 - Il Futuro della Televisione - Andrea Casalegno - Top-IX
19 Luglio 2013 - Il Futuro della Televisione - Andrea Casalegno - Top-IXCSP Scarl
 
19 Luglio 2013 - Il Futuro della Televisione - Chiara Gallino - CSP
19 Luglio 2013 - Il Futuro della Televisione - Chiara Gallino - CSP19 Luglio 2013 - Il Futuro della Televisione - Chiara Gallino - CSP
19 Luglio 2013 - Il Futuro della Televisione - Chiara Gallino - CSPCSP Scarl
 
19 Luglio 2013 - Il Futuro della Televisione - Fabrizio Gramaglia, Finpiemonte
19 Luglio 2013 - Il Futuro della Televisione - Fabrizio Gramaglia, Finpiemonte19 Luglio 2013 - Il Futuro della Televisione - Fabrizio Gramaglia, Finpiemonte
19 Luglio 2013 - Il Futuro della Televisione - Fabrizio Gramaglia, FinpiemonteCSP Scarl
 
Seminario ict agricoltura
Seminario ict agricolturaSeminario ict agricoltura
Seminario ict agricolturaCSP Scarl
 

Más de CSP Scarl (20)

Reti Banda Ultra Larga e Internet delle cose
Reti Banda Ultra Larga e Internet delle cose Reti Banda Ultra Larga e Internet delle cose
Reti Banda Ultra Larga e Internet delle cose
 
Internet delle cose e remote sensing per agricoltura di precisione Innovazion...
Internet delle cose e remote sensing per agricoltura di precisione Innovazion...Internet delle cose e remote sensing per agricoltura di precisione Innovazion...
Internet delle cose e remote sensing per agricoltura di precisione Innovazion...
 
"Iot on the field: making smart environments in everyday experience"
"Iot on the field: making smart environments in everyday experience""Iot on the field: making smart environments in everyday experience"
"Iot on the field: making smart environments in everyday experience"
 
Sigevi - Tecnologie ICT applicate in agricoltura
Sigevi - Tecnologie ICT applicate in agricolturaSigevi - Tecnologie ICT applicate in agricoltura
Sigevi - Tecnologie ICT applicate in agricoltura
 
Living Labs ovvero il possibile contributo delle ICT ai Presidi Territoriali ...
Living Labs ovvero il possibile contributo delle ICT ai Presidi Territoriali ...Living Labs ovvero il possibile contributo delle ICT ai Presidi Territoriali ...
Living Labs ovvero il possibile contributo delle ICT ai Presidi Territoriali ...
 
Forum PA challenge: HALADIN's
Forum PA challenge: HALADIN'sForum PA challenge: HALADIN's
Forum PA challenge: HALADIN's
 
Livinglabs per nexa_duretti
Livinglabs per nexa_durettiLivinglabs per nexa_duretti
Livinglabs per nexa_duretti
 
Scuola futuro prossimo
Scuola futuro prossimoScuola futuro prossimo
Scuola futuro prossimo
 
Storie dal futuro: persone e cose sempre connesse - per genitori
Storie dal futuro: persone e cose sempre connesse - per genitoriStorie dal futuro: persone e cose sempre connesse - per genitori
Storie dal futuro: persone e cose sempre connesse - per genitori
 
Storie dal futuro: persone e cose sempre connesse
Storie dal futuro: persone e cose sempre connesseStorie dal futuro: persone e cose sempre connesse
Storie dal futuro: persone e cose sempre connesse
 
OBSERVO - Piattaforma Open Source per la videosorveglianza territoriale
OBSERVO - Piattaforma Open Source per la videosorveglianza territorialeOBSERVO - Piattaforma Open Source per la videosorveglianza territoriale
OBSERVO - Piattaforma Open Source per la videosorveglianza territoriale
 
19 Luglio 2013 - Il Futuro della TV - Sergio Duretti - CSP
19 Luglio 2013 - Il Futuro della TV - Sergio Duretti - CSP19 Luglio 2013 - Il Futuro della TV - Sergio Duretti - CSP
19 Luglio 2013 - Il Futuro della TV - Sergio Duretti - CSP
 
19 Luglio 2013 - Il futuro della TV - Marco Bussone - UNCEM
19 Luglio 2013 - Il futuro della TV - Marco Bussone - UNCEM19 Luglio 2013 - Il futuro della TV - Marco Bussone - UNCEM
19 Luglio 2013 - Il futuro della TV - Marco Bussone - UNCEM
 
19 Luglio 2013 - Il futuro della TV - Marco Cantamessa - I3P
19 Luglio 2013 - Il futuro della TV - Marco Cantamessa - I3P19 Luglio 2013 - Il futuro della TV - Marco Cantamessa - I3P
19 Luglio 2013 - Il futuro della TV - Marco Cantamessa - I3P
 
19 Luglio 2013 - Il futuro della TV - Andrea Piersanti, Virtual & Reality Mul...
19 Luglio 2013 - Il futuro della TV - Andrea Piersanti, Virtual & Reality Mul...19 Luglio 2013 - Il futuro della TV - Andrea Piersanti, Virtual & Reality Mul...
19 Luglio 2013 - Il futuro della TV - Andrea Piersanti, Virtual & Reality Mul...
 
19 Luglio 2013 - Il Futuro della Televisione -
19 Luglio 2013 - Il Futuro della Televisione - 19 Luglio 2013 - Il Futuro della Televisione -
19 Luglio 2013 - Il Futuro della Televisione -
 
19 Luglio 2013 - Il Futuro della Televisione - Andrea Casalegno - Top-IX
19 Luglio 2013 - Il Futuro della Televisione - Andrea Casalegno - Top-IX19 Luglio 2013 - Il Futuro della Televisione - Andrea Casalegno - Top-IX
19 Luglio 2013 - Il Futuro della Televisione - Andrea Casalegno - Top-IX
 
19 Luglio 2013 - Il Futuro della Televisione - Chiara Gallino - CSP
19 Luglio 2013 - Il Futuro della Televisione - Chiara Gallino - CSP19 Luglio 2013 - Il Futuro della Televisione - Chiara Gallino - CSP
19 Luglio 2013 - Il Futuro della Televisione - Chiara Gallino - CSP
 
19 Luglio 2013 - Il Futuro della Televisione - Fabrizio Gramaglia, Finpiemonte
19 Luglio 2013 - Il Futuro della Televisione - Fabrizio Gramaglia, Finpiemonte19 Luglio 2013 - Il Futuro della Televisione - Fabrizio Gramaglia, Finpiemonte
19 Luglio 2013 - Il Futuro della Televisione - Fabrizio Gramaglia, Finpiemonte
 
Seminario ict agricoltura
Seminario ict agricolturaSeminario ict agricoltura
Seminario ict agricoltura
 

Csp@scuola smarttv corso1

  • 1. LA CONNECTED TV CSP@SCUOLA in collaborazione con ITI FAUSER NOVARA Anno scolastico 2011-2012
  • 2. Cos’è la Connected TV • E’ un televisore che può connettersi ad Internet, tramite la porta Ethernet di cui è dotato o con un’antenna WI-FI (anche su chiavetta USB) • Permette l’esecuzione di applicazioni “Internet based”, ovvero che sfruttano le funzionalità messe a disposizione della rete 2
  • 3. Quali applicazioni • Generalmente le applicazioni installate sul tv sfruttano la connessione ad Internet per offrire servizi, come ad esempio: – Visualizzazione di notizie (cronaca, sport, meteo…) – Visione di film, anche in alta definizione, acquistabili o gratis – Uso di servizi quali YouTube, Skype, Facebook… – Navigazione sul web (più raro e vedremo perché) 3
  • 4. Le applicazioni (o widgets) • Generalmente la Connected TV non consente la navigazione “libera” tramite web-browser • I contenuti offerti da Internet sono fruibili attraverso apposite applicazioni, o “widgets” • Quindi ci sarà il widget per usare Facebook, quello per guardare video su YouTube, quello per ricevere le informazioni di finanza e così via 4
  • 5. Le applicazioni (o widgets) • Le applicazioni si possono ottenere, gratis o a pagamento, da un apposito “store” • una volta scaricate, saranno memorizzate nella memoria di massa del tv e saranno accessibili premendo il tasto “InternetTV” sul telecomando 5
  • 6. Application Manager Le applicazioni disponibili sul televisore vengono mostrate nell’Application Manager Il tasto per entrare in modalità Connected TV e vedere le applicazioni 6
  • 7. Struttura di un’applicazione • Un’applicazione è simile ad una pagina web perché l’ambiente operativo in cui viene eseguita è il browser, che sui TV Samsung si chiama “Maple” • Il browser non è visualizzato sul tv, ma c’è • L’applicazione è composta da : – Un livello che determina l’aspetto grafico: il foglio di stile CSS, per curare nei minimi dettagli lo stile di tabelle, pulsanti, testo, ecc. – Un livello che determina la struttura grafica: la pagina HTML, che gestisce la disposizione degli elementi visualizzati – Un livello che determina il suo funzionamento: il codice Javascript, responsabile della logica applicativa (cosa succede quando si preme un pulsante, si sceglie di eseguire un video, si inseriscono dati in un form, ecc.) 7
  • 8. Struttura di un’applicazione • In pratica, quali sono i file necessari per un’applicazione? – index.html, che costituisce il punto di accesso (“la chiave d’accensione” dell’applicazione) – Main.js, il “motore” dell’applicazione, il file in javascript che determina la logica (“cosa succede quando”) – stylesheet.css, il foglio di stile che cura l’aspetto grafico fino al particolare più piccolo – config.xml, un file di configurazione generale – (opzionali) file di immagini, file flash (.swf) 8
  • 9. Strumenti per creare un’app • Collegarsi dal proprio pc al seguente sito : http://www.samsungdforum.com/ , registrarsi, entrare nella sezione “Apps Guide” e cliccare su “Download SDK” per scaricare il kit di sviluppo software (SDK) della Samsung • Terminato il download scompattare e lanciare l’eseguibile • Verrà installato un programma che assiste nello sviluppo di un’applicazione e consente di scriverne il codice 9
  • 10. Strumenti per creare un’app • Viene inoltre installato un programma che emula il televisore Samsung, consentendo di eseguire l’applicazione sviluppata direttamente sul proprio PC, per testarla 10
  • 11. Strumenti per creare un’app • Infine, viene predisposto, durante l’installazione del kit di sviluppo, un server il cui scopo è rendere disponibile al televisore l’applicazione creata su pc. La trasmissione avviene sulla rete che collega il pc al tv. 11
  • 12. Scriviamo una semplice App index.html (il punto d’accesso e la struttura dell’app) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Video Player</title> <script type=“text/javascript” language=“javascript” import src=“$MANAGER_WIDGET/Common/API/Widget.js”></script> codice <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/Common/API/TVKeyValue.js”></script> javascript <script type="text/javascript" language="javascript" src="./javascript/Main.js"></script> </head> Punto d’accesso <body onload=“Main.onLoad();”> <div id=“welcomeDiv”> Benvenuti! </div> <div id=“tastoDiv”> </div> Struttura dell’app <a href=“javascript:void(0);” id=“anchor” onkeydown=“Main.keyDown();”> </a> </body> Ancora per input </html> 12
  • 13. Scriviamo una semplice App Main.js (la logica applicativa) var Main = {} Dichiaro 2 variabili var widgetAPI = new Common.API.Widget(); var tvKey = new Common.API.TVKeyValue(); plugins Main.onLoad = function(){ Il primo plugin serve a segnalare widgetAPI.sendReadyEvent(); che l’applicazione è caricata e document.getElementById(“anchor”).focus(); } pronta Metto il focus sull’ancora Main.keyDown = function(){ var keyCode = event.keyCode; document.getElementById(“tastoDiv”).innerHTML=“Codice tasto premuto: “ +keyCode; } Funzione associata all’ancora e che quindi viene chiamata quando premo un tasto sul telecomando 13
  • 14. Scriviamo una semplice App Stylesheet.css (il foglio di stile) body { margin: 0; padding: 0; background-color:transparent; } #welcomeDiv { position: absolute; left: 50px; top: 50px; width: 500px; height:50px; background-color: #99FFFF; font-size: 30px; text-align:center; } # tastoDiv{ position: absolute; left: 50px; top: 110px; width: 500px; height:50px; background-color: #99FFFF; font-size: 30px; text-align:center; } 14
  • 15. Che cosa fa questa app? Poco… • Cattura la pressione di un tasto del telecomando e mostra sullo schermo il codice numerico associato ad esso; l’input da telecomando è gestito tramite il plugin apposito ed è catturato dall’”ancora” • Proviamo adesso a realizzare un’applicazione che abbia la capacità di mostrare un video e di gestirne l’esecuzione con i tasti di PLAY, PAUSE e STOP, oltre a controllare il livello del volume 15
  • 16. Applicazione videoplayer il nuovo index.html (1/2) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Video Player</title> <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/Common/API/Widget.js”></script> <script type=“text/javascript” language=“javascript” src=“$MANAGER_WIDGET/Common/API/TVKeyValue.js”></script> <script type="text/javascript" language="javascript" import src="./javascript/video/Player.js"></script> <script type="text/javascript" language="javascript" codice src="./javascript/video/Audio.js"></script> plugin <script type="text/javascript" language="javascript" player src="./javascript/Main.js"></script> </head> 16
  • 17. Applicazione videoplayer il nuovo index.html (2/2) <body onload=“Main.onLoad();”> <div id=“welcomeDiv”> Benvenuti! </div> <div id=“videoPlayerDiv”> </div> <a href=“javascript:void(0);” id=“anchor” onkeydown=“Main.keyDown();”> </a> </body> </html> Osservando la lista di inclusioni javascript, si osservano due nuovi plugin : Plugin.js e Audio.js, rispettivamente per l’esecuzione della parte video e audio del flusso multimediale da riprodurre. Essi consentono al programmatore di controllare l’hardware del televisore che fornisce queste funzioni 17
  • 18. Applicazione videoplayer Il nuovo Main.js (1/3) var Main = {} var widgetAPI = new Common.API.Widget(); var tvKey = new Common.API.TVKeyValue(); var videoURL = “”; Main.onLoad = function() { widgetAPI.sendReadyEvent(); document.getElementById(“anchor”).focus(); Player.setDisplayArea(50, 110, 320, 240); Player.init(); Audio.init(); } 18
  • 19. Applicazione videoplayer Il nuovo Main.js (2/3) Main.keyDown = function() { var keyCode = event.keyCode; switch(keyCode){ case tvKey.KEY_PLAY: if(Player.getState() == Player.PAUSED) Player.resumeVideo(); else if(Player.getState() == Player.STOPPED) Player.playVideo(); break; case tvKey.KEY_STOP: Player.stopVideo(); break; case tvKey.KEY_PAUSE: if(Player.getState() == Player.PLAYING) Player.pauseVideo(); break; 19
  • 20. Applicazione videoplayer Il nuovo Main.js (3/3) case tvKey.KEY_VOL_UP: Audio.setRelativeVolume(0); break; case tvKey.KEY_VOL_DOWN: Audio.setRelativeVolume(1); break; } } 20
  • 21. Applicazione videoplayer Il nuovo Stylesheet.css body { margin: 0; padding: 0; background-color:transparent; } #welcomeDiv { position: absolute; left: 50px; top: 50px; width: 500px; height:50px; background-color: #99FFFF; font-size: 30px; text-align:center; } #videoPlayerDiv{ position: absolute; left: 50px; top: 110px; width: 320px; height:240px; border:1px solid yellow; } 21
  • 22. www.csp.it rd.csp.it CSP ICT Innovation Fabio Saracino – fabio.saracino@csp.it Registered and Central Offices Environment Park - Laboratori A1 via Livorno 60 - 10144 Torino Tel +39 011 4815111 Fax +39 011 4815001 E-mail: marketing@csp.it Lezione 1: piattaforme UAV di riferimento 22