Csp@scuola smarttv corso1
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Csp@scuola smarttv corso1

on

  • 690 views

La connected TV

La connected TV

Statistics

Views

Total Views
690
Views on SlideShare
690
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Csp@scuola smarttv corso1 Presentation Transcript

  • 1. LACONNECTEDTVCSP@SCUOLAin collaborazionecon ITI FAUSER NOVARAAnno 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 ManagerIl tasto perentrare in modalitàConnected TV evedere leapplicazioni 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 variabilivar widgetAPI = new Common.API.Widget();var tvKey = new Common.API.TVKeyValue(); pluginsMain.onLoad = function(){ Il primo plugin serve a segnalare widgetAPI.sendReadyEvent(); che l’applicazione è caricata e document.getElementById(“anchor”).focus();} pronta Metto il focus sull’ancoraMain.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, siosservano due nuovi plugin : Plugin.js e Audio.js,rispettivamente per l’esecuzione della parte video eaudio del flusso multimediale da riprodurre. Essiconsentono al programmatore di controllarel’hardware del televisore che fornisce questefunzioni 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.cssbody { 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.itLezione 1: piattaforme UAV di riferimento 22