Csp@scuola smarttv corso1

558 views
484 views

Published on

La connected TV

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Csp@scuola smarttv corso1

  1. 1. LACONNECTEDTVCSP@SCUOLAin collaborazionecon ITI FAUSER NOVARAAnno scolastico 2011-2012
  2. 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. 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. 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. 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. 6. Application Manager Le applicazioni disponibili sul televisore vengono mostrate nell’Application ManagerIl tasto perentrare in modalitàConnected TV evedere leapplicazioni 6
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×