{"id":443,"date":"2013-04-18T12:45:39","date_gmt":"2013-04-18T11:45:39","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/?page_id=443"},"modified":"2013-12-12T16:44:23","modified_gmt":"2013-12-12T15:44:23","slug":"pautes-de-disseny-per-a-televisio","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/usab\/pautes-de-disseny-per-a-televisio\/","title":{"rendered":"Pautas de dise\u00f1o para televisi\u00f3n"},"content":{"rendered":"<p>El dise\u00f1o de interfaces para pantalla de televisor est\u00e1 en proceso de expansi\u00f3n, debido a la televisi\u00f3n interactiva o a algunas plataformas de videojuegos.<\/p>\n<p>A continuaci\u00f3n se detallan las especificaciones del dise\u00f1o de aplicaciones para televisi\u00f3n.<\/p>\n<h3>Est\u00e1ndares televisivos<\/h3>\n<p>No todos los pa\u00edses utilizan el mismo formato de pantalla para televisi\u00f3n. En Europa, el est\u00e1ndar m\u00e1s habitual corresponde al PAL, y en los Estados Unidos, al NTSC:<\/p>\n<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td><\/td>\n<td><b>NTSC<\/b><\/td>\n<td><b>PAL<\/b><\/td>\n<td><b>HDTV<\/b><\/td>\n<\/tr>\n<tr>\n<td>Formato de pantalla<\/td>\n<td>4:3<\/td>\n<td>4:3<\/td>\n<td>16:9<\/td>\n<\/tr>\n<tr>\n<td>Resoluci\u00f3n (p\u00edxeles)<\/td>\n<td>720\u00d7480<\/td>\n<td>720\u00d7576<\/td>\n<td>1.920\u00d71.080<\/td>\n<\/tr>\n<tr>\n<td>Frecuencia de refresco<br \/>\n(fotogramas por segundo)<\/td>\n<td>30<\/td>\n<td>25<\/td>\n<td>24<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<figure id=\"attachment_360\" aria-describedby=\"caption-attachment-360\" style=\"width: 172px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/formatsTV.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-360\" alt=\"Formats de televisi\u00f3\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/formatsTV-172x300.png\" width=\"172\" height=\"300\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/formatsTV-172x300.png 172w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/formatsTV.png 296w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><figcaption id=\"caption-attachment-360\" class=\"wp-caption-text\">Formatos de televisi\u00f3n<\/figcaption><\/figure>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Actitud del usuario<\/h3>\n<p>La actitud del usuario ante una pantalla de ordenador o un televisor es diferente, lo que se debe tener en cuenta para optimizar el dise\u00f1o de la aplicaci\u00f3n:<\/p>\n<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td><\/td>\n<td><b>PC<\/b><\/td>\n<td><b>TV<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Espectador<\/b><\/td>\n<td>Usuario con experiencia. Edad: 10-60 a\u00f1os<\/td>\n<td>Varios espectadores, clases diversas, cualquier edad<\/td>\n<\/tr>\n<tr>\n<td><b>Objetivo<\/b><\/td>\n<td>Trabajo, consulta de informaci\u00f3n<\/td>\n<td>Noticias recientes, ocio<\/td>\n<\/tr>\n<tr>\n<td><b>Actitud<\/b><\/td>\n<td>Orientado a objetivos<\/td>\n<td>Actitud activa relajada, pasiva<\/td>\n<\/tr>\n<tr>\n<td><b>Lugar y postura<\/b><\/td>\n<td>En casa o en el trabajo, sentado cerca del monitor<\/td>\n<td>En casa, sentado c\u00f3modamente lejos de la pantalla<\/td>\n<\/tr>\n<tr>\n<td><b>Conocimientos previos<\/b><\/td>\n<td>Conocimientos b\u00e1sicos de usuario<\/td>\n<td>Ninguno<\/td>\n<\/tr>\n<tr>\n<td><b>Navegaci\u00f3n<\/b><\/td>\n<td>Teclado, rat\u00f3n y otros dispositivos de entrada<\/td>\n<td>Mando a distancia (en ocasiones con teclado)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div align=\"center\">\n<hr align=\"center\" noshade=\"noshade\" size=\"2\" width=\"100%\" \/>\n<\/div>\n<h3>Especificaciones de dise\u00f1o para la pantalla de TV<\/h3>\n<p><b>Especificaciones generales<\/b><\/p>\n<p>Para que el dise\u00f1o se adapte a todas las plataformas, se tienen que seguir las siguientes normas:<\/p>\n<ul>\n<li>El contenido debe ser visible en un \u00e1rea de 544 p\u00edxeles (horizontal). En el est\u00e1ndar NTSC las p\u00e1ginas web se muestran en general a 590 x 380.<\/li>\n<li>Las p\u00e1ginas pueden desplazarse (mediante <i>scroll<\/i>) en vertical, pero no en horizontal.<\/li>\n<li>Si se quiere eliminar el <i>scroll<\/i> vertical (muy recomendable en la pantalla de televisor), la p\u00e1gina no tiene que superar los 380 p\u00edxeles verticales.<\/li>\n<li>La p\u00e1gina puede tener un dise\u00f1o fluido, que se adapte al formato de la pantalla.<\/li>\n<li>La pantalla del televisor es menos definida que la de un monitor, de modo que los peque\u00f1os detalles gr\u00e1ficos pueden perderse.<\/li>\n<li>No incluir informaci\u00f3n importante u opciones en gr\u00e1ficos de tama\u00f1o peque\u00f1o.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/areaVisibilitatTV.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" alt=\"\u00c0rea de visibilitat en televisi\u00f3\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/areaVisibilitatTV.png\" width=\"205\" height=\"196\" \/><\/a><\/p>\n<p><b>\u00c1rea de seguridad para televisi\u00f3n<\/b><\/p>\n<ul>\n<li>En una pantalla de televisi\u00f3n es posible que no toda la p\u00e1gina pueda ser visible (puede perderse del 10 al 20% del total).<\/li>\n<li>Hay que dejar un margen de seguridad de 16 p\u00edxeles alrededor de la p\u00e1gina.<\/li>\n<li>Los t\u00edtulos tendr\u00edan que aparecer siempre en la zona superior de la pantalla.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/areaSeguretatTV.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" alt=\"\u00c0rea de seguretat en televisi\u00f3\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/areaSeguretatTV.png\" width=\"205\" height=\"196\" \/><\/a><\/p>\n<p><b>Optimizaci\u00f3n de la transmisi\u00f3n<\/b><\/p>\n<ul>\n<li>Para facilitar la descarga de los contenidos, cada p\u00e1gina no tendr\u00eda que superar los 30 Kb.<\/li>\n<li>Se utilizan gr\u00e1ficos comprimidos, en formato GIF, JPG o PNG.<\/li>\n<\/ul>\n<p><b>Texto<\/b><\/p>\n<ul>\n<li>Hay que tener presente que la pantalla de televisi\u00f3n se observa a una distancia relativamente grande (a partir de 1,5 metros).<\/li>\n<li>Si se trata de un juego interactivo, el usuario se sit\u00faa en general m\u00e1s cerca de la pantalla.<\/li>\n<li>El texto luminoso sobre fondo oscuro es m\u00e1s legible en televisi\u00f3n.<\/li>\n<li>Evitar fuentes con serifa o l\u00edneas delgadas.<\/li>\n<li>Evitar subrayados.<\/li>\n<li>No incluir saltos de l\u00ednea.<\/li>\n<li>Tama\u00f1o recomendada a partir de 16-20 puntos (tama\u00f1o HTML 3-4).<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/posicioTV.png\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" alt=\"Dist\u00e0ncia per veure la televisi\u00f3\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/posicioTV-300x160.png\" width=\"300\" height=\"160\" \/><\/a><\/p>\n<p><b>Color<\/b><\/p>\n<ul>\n<li>Las pantallas de televisi\u00f3n pueden mostrar millones de colores, definidos en RGB.<\/li>\n<li>Evitar contrastes acentuados de color, que impiden ver correctamente los detalles (en especial en el caso de texto).<\/li>\n<\/ul>\n<p><b>Gr\u00e1ficos<\/b><\/p>\n<ul>\n<li>Los gr\u00e1ficos tienen que tener una resoluci\u00f3n de 72 dpi.<\/li>\n<li>Evitar los gr\u00e1ficos con peque\u00f1os detalles, que no se observan bien en televisi\u00f3n.<\/li>\n<li>Evitar tramas y patrones muy detallados, ya que provocan un efecto de vibraci\u00f3n en la pantalla.<\/li>\n<li>Evitar las l\u00edneas horizontales de 1 p\u00edxel (provocar\u00e1n un efecto de vibraci\u00f3n). Las l\u00edneas horizontales tienen que ser como m\u00ednimo de 2 p\u00edxeles de grueso.<\/li>\n<li>No situar l\u00edneas verticales cerca de los l\u00edmites de pantalla (efecto de vibraci\u00f3n).<\/li>\n<\/ul>\n<figure id=\"attachment_450\" aria-describedby=\"caption-attachment-450\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/efecte-vibracio.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-450\" alt=\"Efecte vibraci\u00f3\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/efecte-vibracio-300x257.png\" width=\"300\" height=\"257\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/efecte-vibracio-300x257.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/efecte-vibracio.png 355w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-450\" class=\"wp-caption-text\">Efecto vibraci\u00f3n<\/figcaption><\/figure>\n<p><b>Navegaci\u00f3n<\/b><\/p>\n<ul>\n<li>Las opciones de navegaci\u00f3n tienen que ser f\u00e1ciles e intuitivas.<\/li>\n<li>Los elementos seleccionados tienen que ser claramente visibles (retorno de respuesta inmediato).<\/li>\n<li>Utilizar tabuladores entre las opciones para facilitar la navegaci\u00f3n.<\/li>\n<li>Evitar las barras de desplazamiento (<i>scrolls<\/i>) siempre que sea posible.<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>El dise\u00f1o de interfaces para pantalla de televisor est\u00e1 en proceso de expansi\u00f3n, debido a la televisi\u00f3n interactiva o a algunas plataformas de videojuegos. A continuaci\u00f3n se detallan las especificaciones del dise\u00f1o de aplicaciones para televisi\u00f3n. Est\u00e1ndares televisivos No todos los pa\u00edses utilizan el mismo formato de pantalla para televisi\u00f3n. En Europa, el est\u00e1ndar m\u00e1s &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/usab\/pautes-de-disseny-per-a-televisio\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abPautas de dise\u00f1o para televisi\u00f3n\u00bb<\/span><\/a><\/p>\n","protected":false},"author":35,"featured_media":0,"parent":31,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"tags":[],"class_list":["post-443","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/443","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/users\/35"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/comments?post=443"}],"version-history":[{"count":7,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/443\/revisions"}],"predecessor-version":[{"id":654,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/443\/revisions\/654"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/31"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/media?parent=443"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/tags?post=443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}