• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS
 

Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS

on

  • 637 views

Se presenta un nuevo widget de Yahoo! para la solicitud de cita médica al Servicio Andaluz de Salud (SAS) a través de TV.

Se presenta un nuevo widget de Yahoo! para la solicitud de cita médica al Servicio Andaluz de Salud (SAS) a través de TV.

Statistics

Views

Total Views
637
Views on SlideShare
598
Embed Views
39

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 39

https://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 39

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

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

    Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS Presentation Transcript

    • Desarrollo de un Widget de Yahoo! Connected TV para solicitud de Cita Médica en el SAS María León Bujes Tutor: Dr. Ramón Cerquides Bueno Departamento de Teoría de la Señal y Comunicaciones Escuela Superior de Ingenieros de Sevilla 30 de Marzo de 2012
    • OBJETIVOS DEL PROYECTO Desarrollo de un widget de Yahoo! Connected TV para solicitar, consultar y cancelar cita médica en el SAS desde el televisor. Widget de Cita Médica: Nueva forma de acceso al servicio de petición de cita médica ofrecido por InterS@S.DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • OBJETIVOS DEL PROYECTO ¿Por qué desarrollar el Widget de Cita Médica? El widget puede servir para hacer llegar el servicio ofertado por InterS@S a un mayor número de usuarios.DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • PERO, ¿QUÉ ES UN WIDGET? Definición de Widget Un widget es una pequeña aplicación o programa. Los widgets son ejecutados por un motor de widgets.DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • SMART TV: CONCEPTO Connected TV Integración de contenidos y servicios Hybrid TV de Internet en los modernos aparatos de televisión o set top boxes. Smart TVDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • PLATAFORMAS DE SMART TV EXISTENTES Específicas del fabricante De organizaciones Disponibles para de estandarización múltiples fabricantes De editores específicos Las compañías de Internet han advertido el potencial de las Connected TVs y han creado sus plataformas.DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • PLATAFORMA YAHOO! CONNECTED TV Yahoo! Connected TV: Plataforma de pequeñas aplicaciones o widgets que adaptan servicios y contenidos de la Red al medio televisivo. Interactividad Broadcast Novedades Nuevo protocolo de comunicación de dispositivos Televisores Set top boxDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • YAHOO! CONNECTED TV: INTERFAZ DE USUARIO Snippet Los widgets de Yahoo! Sidebar view presentan tres vistas básicas Full Screen Vista de Snippet Vista lateralDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • YAHOO! CONNECTED TV: DISPOSITIVO DE ENTRADA Dispositivo de entrada Mando a Distancia WIDGETS Dispositivo modal EXIT UP ARROW Teclas con distintas RIGHT ARROW OK LEFT ARROW funciones según el modo. DOWN ARROW BACK VIEWPORT ADD A SNIPPET SETTINGS CLOSEDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • ¿ JAVASCRIPT EN SMART TVs ? JavaScript se usa ya en: Navegadores Servidores Dispositivos Móviles ¿Por qué no usarlo también en televisores conectados?DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • FUNCIONAMIENTO DE LA PLATAFORMA Elementos que intervienen en el funcionamiento de la plataforma Yahoo! Connected TV: Widgets instalados en el televisor El KONtx Framework El Motor de JavaScript SpiderMonkey El Motor de Widgets de Yahoo! Sistema Operativo Linux embebidoDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • EL KONTX FRAMEWORK (I) Metodología de desarrollo basada en el KONtx Framework Controles estándar Las vistas se crean extendiendo las clases base de vista… KONtx.system.SnippetView KONtx.system.AnchorSnippetView Clases base KONtx.system.ProfileSnippetView de vista KONtx.system.SidebarView KONtx.system.FullscreenView …y sobrescribiendo los métodos createView() y updateView()DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • EL KONTX FRAMEWORK (II) Comunicaciones del widget con el Widget Engine a través del KONtx FrameworkDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • GESTIÓN DE EVENTOS Comunicación entre el widget y el Widget Engine Evento del KONtx.application KONtx.system.Event Widget Engine Host Events El widget se suscribe a ellos por medio de subscribeTo() Child Events Enviados al Widget Engine por medio de KONtx.HostEventManager.send() Es posible construir sistemas de eventos personalizados usando la clase KONtx.system.EventDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • FUNCIONAMIENTO DE LA APLICACIÓNDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • FUNCIONAMIENTO DE LA APLICACIÓN 1DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • FUNCIONAMIENTO DE LA APLICACIÓN 2 1DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • FUNCIONAMIENTO DE LA APLICACIÓN 2 3 1DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • FUNCIONAMIENTO DE LA APLICACIÓN 2 3 4 1DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • DESARROLLO CON EL SIMULADOR Yahoo Widget Engine-Widget Development Kit Funcionamiento testeado sobre Paquete Debian YWE-WDK máquina virtual Ubuntu 10.04 distribuida por Yahoo! Equipo utilizado: Portatil TOSHIBA Satellite L655. Procesador Intel Core i5 CPU M480 @ 2.67GHz. 4,00 GB de memoria RAM. S.O. Windows 7 de 64 bits. Software de Virtualización: VMware Player 3.0.0 (también testeado sobre Virtual Box 4.1.10)DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • ARCHIVOS DEL WIDGET DE CITA MÉDICA widgetID-versionNumber.widget es.us.widgets.tv.cita8-0.2.8.widget Estructura de carpetas dentro del directorio ContentsDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA Inicialización de las vistas en init.js KONtx.application.init({ views: [ { id: view-Main, viewClass: MainView }, { id: view-IntroducirDatos, viewClass: VistaIntroducirDatos }, { id: view-Esperar, viewClass: VistaEsperar }, { id: view-MostrarDias, viewClass: VistaMostrarDias }, { id: view-MostrarHoras, viewClass: VistaMostrarHoras }, { id: view-CitaAsignada, viewClass: VistaCitaAsignada }, { id: view-Informacion, viewClass: VistaInformacion }, { id: view-InformacionError, viewClass: VistaInformacionError }, { id: view-OtroDia, viewClass: VistaOtroDia }, { id: view-About, viewClass: AboutView }, { id: snippet-1, viewClass: SnippetView, data: { message1: "Versión 2.0", message2: "Cita Médica" , message3: "Servicio Andaluz de Salud"} }, ], defaultViewId: view-Main, settingsViewId: view-About, });DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA Peticiones con XMLHttpRequest function funcion_xmlhttprequest(o){ if (KONtx.application.isPhysicalNetworkDown()) { KONtx.utility.WaitIndicator.off(); return; } var xhr = new XMLHttpRequest(); xhr.autoRedirect = true; xhr.open(o.metodo, o.url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { o.success(xhr); KONtx.application.setNetworkRequestFailed(false); } else { o.error(); KONtx.application.setNetworkRequestFailed(true); } } } }DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA Gestión de estado de desconexión var EventHandlers = (function () { return { onApplicationStartup: function () { funcion_xmlhttprequest(peticion0); }, onActivateSnippet:function () { KONtx.application.setNetworkRequestFailed(false); funcion_xmlhttprequest(peticion0); } } }()); EventHandlers.onApplicationStartup.subscribeTo(KONtx.application, "onApplicatio nStartup", EventHandlers); EventHandlers.onActivateSnippet.subscribeTo(KONtx.application, "onActivateSnip pet", EventHandlers);DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA Compatibilidad hacia atrás if (typeof KONtx.application.isPhysicalNetworkDown === "undefined") { (function () { var original = KONtx.application.setNetworkRequestFailed, setDownByUser = false; delete KONtx.application.setNetworkRequestFailed; KONtx.application.setNetworkRequestFailed = function (status) { original(status); setDownByUser = status; }; KONtx.application.isPhysicalNetworkDown = function () { if (KONtx.application.getNetworkDownStatus) { return !setDownByUser; } return false; }; }()); }DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA JSON Parser JSON Servidor Intermedio Función eval() Rápida pero acarrea problemas de seguridad. Entre 3 y 4 veces más rápido que la versión JavaScript. Analizador JSON Instancia global de la clase llamada JSON. del Yahoo! Widget Engine interface JSON { variant parse( string inString ); string stringify( variant inValue ); };DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • CÓDIGO JAVASCRIPT DEL WIDGET DE CITA MÉDICA Gestión de usuarios guardados. Almacenamiento persistente Tres tipos de almacenamiento persistente para perfiles y widgets: Store currentAppConfig: Datos asociados al widget. Store currentAppData: Datos asociados al widget y al perfil. Store currentProfileData: Datos asociados al perfil. Métodos: Boolean delete (String key) String get (String key) Array getIDs() Boolean set (String key, String value)DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • WEB API EN EL SERVIDOR INTERMEDIO (PHP) Peticiones al servidor de InterS@S con libcurl Libcurl protocolos HTTP, HTTPS, FTP, FTPS, Gopher, Telnet, DICT, FILE, IMAP, IMAPS, LD (PHP 4.0.2) AP, LDAPS, POP3, POP3S, RTMP, RTSP, SCP, SFTP, SMTP, SMTPS, Teln et y TFTP. Soporta certificados SSL, HTTP POST, HTTP PUT, subida de ficheros usando FTP, formularios HTTP, proxies y cookies. $curl = curl_init(); curl_setopt ($curl, CURLOPT_URL, $url); curl_setopt ($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($curl, CURLOPT_USERAGENT, $agent); curl_setopt ($curl, CURLOPT_HEADER, 1); curl_setopt ($curl, CURLOPT_SSLVERSION, 3); curl_setopt ($curl, CURLOPT_SSL_VERIFYPEER, true); curl_setopt ($curl, CURLOPT_CAINFO, getcwd()./FNMTClase2CA-FNMT.crt); curl_setopt ($curl, CURLOPT_SSL_VERIFYHOST, 2); curl_setopt ($curl, CURLOPT_POST, 1); curl_setopt ($curl, CURLOPT_POSTFIELDS, $campos); $codigofuente = curl_exec ($curl); curl_close ($curl);DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • WEB API EN EL SERVIDOR INTERMEDIO (PHP) Mantenimiento de la sesión HTTP/1.1 200 OK Cabecera Set-Cookie: name=value Set-Cookie: name2=value2; Expires=Wed, 09 Jun 2021 10:18:14 GMT HTTP Content-type: text/html; charset=UTF-8 (contenido de la página) $start = strpos($codigofuente2, "Set-Cookie"); Código para $end = strpos($codigofuente2, "Content-Type"); extraer las $parts = split("Set-Cookie: ",substr($codigofuente2, $start, $end-$start)); cookies de la $cookies = array(); cabecera HTTP foreach ($parts as $co){ $cd = split(";",$co); if (!empty($cd[0])){ $cookies[] = $cd[0]; } } $cookies_sesion=implode(";",$cookies); curl_setopt($curl3, CURLOPT_COOKIE, $cookies_sesion);DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • WEB API EN EL SERVIDOR INTERMEDIO (PHP) Parseando la respuesta: librería Simple HTML Dom parser Documento HTML Dato que nos interesa Simple HTML Dom parser: Librería PHP para manipular HTML Se incluye como cualquier otra librería: include_once(simple_html_dom.php); Es importante evitar el derroche de memoria que puede acarrear eliminando los objetos DOM creados al finalizar con ellos.DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • WEB API EN EL SERVIDOR INTERMEDIO (PHP) Producción de una cadena JSON. json_encode() Cadena Variable numérica Cadena JSON Array (normal o asociativo) json_encode() Objeto Producción de cadena JSON en la Web API alojada en el servidor intermedio: 1 Los datos se almacenan en una Array Asociativo. 2 El array se pasa como parámetro a la función json_encode() de PHP. 3 Se ejecuta print ($json) donde $json=json_encode($array).DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • SEGURIDAD DE LOS DATOS EN EL WIDGET DE CITA MÉDICA Certificado SSL en el servidor intermedio No podemos utilizar: Certificado autofirmado SSL 3.0 Certificado de la FNMT ¿SSL? Lista de Autoridades Certificadoras reconocidas almacenada en el Firmware del televisorDESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • POSIBLES MEJORAS Mejoras interesantes: Permitir documento identificativo distinto al D.N.I. Evitar que las modificaciones en la aplicación web de InterS@S afectasen al Widget de Cita Médica. Recordatorio de “Cita próxima”.DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES
    • VÍDEO: EL WIDGET EN UN DISPOSITIVO REAL Testeo en un televisor SAMSUNG UE40B8000XW Versión del KONtx Framework 1.3.12.C Versión del Widget Engine 5.0.0DESARROLLO DE UN WIDGET DE YAHOO! CONNECTED TV PARA SOLICITUD DE CITA MÉDICA EN EL SAS MARÍA LEÓN BUJES