SmartTV: новый формат телевидения. Новые стандарты качества.
Csp@scuola smarttv corso1
description
Transcript of Csp@scuola smarttv corso1
LA CONNECTED TV
CSP@SCUOLAin collaborazione con ITI FAUSER NOVARA Anno scolastico 2011-2012
Cos’è la Connected TV
• E’ un televisore che può connettersi ad Internet, tramite la portaEthernet 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 unapposito “store”
• una volta scaricate, saranno memorizzate nella memoria di massa del tv e saranno accessibili premendo il tasto “InternetTV” sul telecomando
5
Application Manager
6
Le applicazioni disponibili sul televisore vengono mostrate nell’ApplicationManager
Il tasto perentrare in modalitàConnected TV evedere le applicazioni
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
• 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
Struttura di un’applicazione
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
12
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”
src=“$MANAGER_WIDGET/Common/API/Widget.js”></script ><script type=“text/javascript” language=“javascript”
src=“$MANAGER_WIDGET/Common/API/TVKeyValue.js”></sc ript>
<script type="text/javascript" language="javascript " src="./javascript/Main.js"></script>
</head><body onload=“Main.onLoad();”>
<div id=“welcomeDiv”> Benvenuti! </div><div id=“tastoDiv”> </div>
<a href=“javascript:void(0);” id=“anchor”onkeydown=“Main.keyDown();”> </a>
</body>
</html>
Punto d’accesso
importcodice javascript
Struttura dell’app
Ancora per input
Scriviamo una semplice App
13
Main.js (la logica applicativa)
var Main = {}
var widgetAPI = new Common.API.Widget();var tvKey = new Common.API.TVKeyValue();
Main.onLoad = function(){widgetAPI.sendReadyEvent();document.getElementById(“anchor”).focus();
}
Main.keyDown = function(){var keyCode = event.keyCode;
document.getElementById(“tastoDiv”).innerHTML=“Codi ce tasto premuto: “+keyCode;
}
Dichiaro 2 variabili plugins
Il primo plugin serve a segnalare che l’applicazione è caricata e pronta
Metto il focus sull’ancora
Funzione associata all’ancora e che quindi viene chiamata quando premo un tasto sul telecomando
Scriviamo una semplice App
14
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;
}
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
16
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”></sc ript><script type="text/javascript" language="javascript "
src="./javascript/video/Player.js"></script><script type="text/javascript" language="javascript "
src="./javascript/video/Audio.js"></script>
<script type="text/javascript" language="javascript " src="./javascript/Main.js"></script>
</head>
importcodice pluginplayer
Applicazione videoplayer
17
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
Applicazione videoplayer
18
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();
}
Applicazione videoplayer
19
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;
Applicazione videoplayer
20
Il nuovo Main.js (3/3)
case tvKey.KEY_VOL_UP:Audio.setRelativeVolume(0);
break;case tvKey.KEY_VOL_DOWN:
Audio.setRelativeVolume(1);break;
}}
Applicazione videoplayer
21
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;
}
22
CSP ICT Innovation
Fabio Saracino – [email protected]
Registered and Central Offices Environment Park - Laboratori A1via Livorno 60 - 10144 Torino
Tel +39 011 4815111Fax +39 011 4815001E-mail: [email protected]
www.csp.it rd.csp.it
Lezione 1: piattaforme UAV di riferimento