{"id":532,"date":"2015-03-19T13:06:28","date_gmt":"2015-03-19T12:06:28","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=532"},"modified":"2015-03-19T13:06:28","modified_gmt":"2015-03-19T12:06:28","slug":"pautes-de-disseny-per-a-televisio","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/disseny\/pautes-de-disseny\/pautes-de-disseny-per-a-televisio\/","title":{"rendered":"Pautes de disseny per a televisi\u00f3"},"content":{"rendered":"<p>El disseny d&#8217;interf\u00edcies per a pantalla de televisor est\u00e0 en proc\u00e9s d&#8217;expansi\u00f3, a causa de la televisi\u00f3 interactiva o algunes plataformes de videojoc.<\/p>\n<p>A continuaci\u00f3 es detallen les especificacions del disseny d&#8217;aplicacions per a televisi\u00f3.<\/p>\n<h3>Est\u00e0ndards televisius<\/h3>\n<p>No tots els pa\u00efsos utilitzen el mateix format de pantalla per a televisi\u00f3. A Europa, l&#8217;est\u00e0ndard m\u00e9s habitual correspon al PAL i als Estats Units, a l&#8217;NTSC:<\/p>\n<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\">\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>Format 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\u00f3 (p\u00edxels)<\/td>\n<td>720&#215;480<\/td>\n<td>720&#215;576<\/td>\n<td>1.920&#215;1.080<\/td>\n<\/tr>\n<tr>\n<td>Freq\u00fc\u00e8ncia de refresc<br \/>\n(fotogrames per segon)<\/td>\n<td>30<\/td>\n<td>25<\/td>\n<td>24<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<figure id=\"attachment_536\" aria-describedby=\"caption-attachment-536\" style=\"width: 172px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/formatsTV.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/formatsTV-172x300.png\" alt=\"Formats de televisi\u00f3\" width=\"172\" height=\"300\" class=\"size-medium wp-image-536\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/formatsTV-172x300.png 172w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/formatsTV.png 296w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><figcaption id=\"caption-attachment-536\" class=\"wp-caption-text\">Formats de televisi\u00f3<\/figcaption><\/figure>\n<hr \/>\n<h3>Actitud de l&#8217;usuari<\/h3>\n<p>L&#8217;actitud de l&#8217;usuari davant d&#8217;una pantalla d&#8217;ordinador o un televisor \u00e9s diferent, cosa que cal tenir en compte per a optimitzar el disseny de l&#8217;aplicaci\u00f3:<\/p>\n<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"1\">\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>Un usuari amb experi\u00e8ncia. Edat: 10-60 anys<\/td>\n<td>Diversos espectadors, classes diverses, qualsevol edat<\/td>\n<\/tr>\n<tr>\n<td><b>Objectiu<\/b><\/td>\n<td>Treball, consulta d&#8217;informaci\u00f3<\/td>\n<td>Not\u00edcies recents, oci<\/td>\n<\/tr>\n<tr>\n<td><b>Actitud<\/b><\/td>\n<td>Orientat a objectius<\/td>\n<td>Actitud activa, relaxada, passiva<\/td>\n<\/tr>\n<tr>\n<td><b>Lloc i postura<\/b><\/td>\n<td>Casa o feina, assegut prop del monitor<\/td>\n<td>Casa, assegut c\u00f2modament lluny de la pantalla<\/td>\n<\/tr>\n<tr>\n<td><b>Coneixements previs<\/b><\/td>\n<td>Coneixements b\u00e0sics d&#8217;usuari<\/td>\n<td>Cap<\/td>\n<\/tr>\n<tr>\n<td><b>Navegaci\u00f3<\/b><\/td>\n<td>Teclat, ratol\u00ed i altres dispositius d&#8217;entrada<\/td>\n<td>Comandament a dist\u00e0ncia (ocasionalment amb teclat)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3>Especificacions de disseny per a la pantalla de televisi\u00f3<\/h3>\n<p><strong>Especificacions generals <\/strong><\/p>\n<p>Perqu\u00e8 el disseny s&#8217;adapti a totes les plataformes, s&#8217;han de seguir les seg\u00fcents normes:<\/p>\n<ul>\n<li>El contingut ha de ser visible en una \u00e0rea de 544 p\u00edxels (horitzontal). En est\u00e0ndard NTSC generalment les p\u00e0gines web es mostren a 590 x 380.<\/li>\n<li>Les p\u00e0gines poden despla\u00e7ar-se (mitjan\u00e7ant barra de despla\u00e7ament) verticalment, per\u00f2 no horitzontalment.<\/li>\n<li>Si es vol eliminar el despla\u00e7ament vertical (molt recomanable en pantalla de televisor), la p\u00e0gina no ha de superar els 380 p\u00edxels verticals.<\/li>\n<li>La p\u00e0gina pot tenir un disseny fluid, que s&#8217;adapti al format de la pantalla.<\/li>\n<li>La pantalla de TV \u00e9s menys definida que la d&#8217;un monitor, de manera que els petits detalls gr\u00e0fics poden perdre&#8217;s.<\/li>\n<li>No s&#8217;ha d&#8217;incloure informaci\u00f3 important o opcions en gr\u00e0fics petits.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/areaVisibilitatTV.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/areaVisibilitatTV.png\" alt=\"areaVisibilitatTV\" width=\"205\" height=\"196\" class=\"aligncenter size-full wp-image-534\" \/><\/a><\/p>\n<p><strong>\u00c0rea de seguretat per a televisi\u00f3<\/strong><\/p>\n<ul>\n<li>En una pantalla de televisi\u00f3 \u00e9s possible que no tota la p\u00e0gina pugui ser visible (pot perdre&#8217;s del 10% al 20% del total).<\/li>\n<li>Cal deixar un marge de seguretat de 16 p\u00edxels al voltant de la p\u00e0gina.<\/li>\n<li>Els t\u00edtols haurien d&#8217;apar\u00e8ixer sempre a la zona superior de pantalla.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/areaSeguretatTV.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/areaSeguretatTV.png\" alt=\"areaSeguretatTV\" width=\"205\" height=\"196\" class=\"aligncenter size-full wp-image-533\" \/><\/a><\/p>\n<p><strong>Optimitzaci\u00f3 de la transmissi\u00f3 <\/strong><\/p>\n<ul>\n<li>Per a facilitar la desc\u00e0rrega dels continguts, cada p\u00e0gina no hauria de superar els 30Kb.<\/li>\n<li>S&#8217;utilitzen gr\u00e0fics comprimits, en format GIF, JPG o PNG.<\/li>\n<\/ul>\n<p><strong>Text <\/strong><\/p>\n<ul>\n<li>S&#8217;ha de tenir present que la pantalla de televisi\u00f3 \u00e9s observada a una dist\u00e0ncia relativament gran (a partir d&#8217;1,5 m).<\/li>\n<li>Si es tracta d&#8217;un joc interactiu, l&#8217;usuari generalment se situa m\u00e9s a prop de la pantalla.<\/li>\n<li>El text llumin\u00f3s sobre fons fosc \u00e9s m\u00e9s llegible en televisi\u00f3.<\/li>\n<li>S&#8217;han d&#8217;evitar fonts amb serif o l\u00ednies primes.<\/li>\n<li>S&#8217;han d&#8217;evitar subratllats.<\/li>\n<li>No s&#8217;han d&#8217;incloure salts de l\u00ednia.<\/li>\n<li>La mida recomanada \u00e9s a partir de 16-20 punts (mida HTML 3-4).<\/li>\n<\/ul>\n<p><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/posicioTV.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/posicioTV-300x160.png\" alt=\"posicioTV\" width=\"300\" height=\"160\" class=\"aligncenter size-medium wp-image-537\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/posicioTV-300x160.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/posicioTV.png 442w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Color <\/strong><\/p>\n<ul>\n<li>Les pantalles de televisi\u00f3 poden mostrar milions de colors, definits en RGB.<\/li>\n<li>S&#8217;han d&#8217;evitar contrastos accentuats de color, que impedeixen veure correctament els detalls (especialment en el cas de text).<\/li>\n<\/ul>\n<p><strong>Gr\u00e0fics<\/strong><\/p>\n<ul>\n<li>Els gr\u00e0fics han de tenir una resoluci\u00f3 de 72 dpi.<\/li>\n<li>S&#8217;han d&#8217;evitar els gr\u00e0fics amb petits detalls, que no s&#8217;observen b\u00e9 en televisi\u00f3.<\/li>\n<li>S&#8217;han d&#8217;evitar trames i patrons molt detallats, ja que provoquen un efecte de vibraci\u00f3 en pantalla.<\/li>\n<li>S&#8217;han d&#8217;evitar l\u00ednies horitzontals d&#8217;1 p\u00edxel (provocaran un efecte de vibraci\u00f3). Les l\u00ednies horitzontals han de ser d&#8217;un m\u00ednim de 2 p\u00edxels de gruix.<\/li>\n<li>No s&#8217;han de situar l\u00ednies verticals a prop dels l\u00edmits de pantalla (efecte de vibraci\u00f3).<\/li>\n<\/ul>\n<figure id=\"attachment_535\" aria-describedby=\"caption-attachment-535\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/efecte-vibracio.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/efecte-vibracio-300x258.png\" alt=\"Efecte de vibraci\u00f3\" width=\"300\" height=\"258\" class=\"size-medium wp-image-535\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/efecte-vibracio-300x258.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/efecte-vibracio.png 355w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-535\" class=\"wp-caption-text\">Efecte de vibraci\u00f3<\/figcaption><\/figure>\n<p><strong>Navegaci\u00f3 <\/strong><\/p>\n<ul>\n<li>Les opcions de navegaci\u00f3 han de ser f\u00e0cils i intu\u00eftives.<\/li>\n<li>Els elements seleccionats han de ser clarament visibles (retorn de resposta immediat).<\/li>\n<li>S&#8217;han d&#8217;utilitzar tabuladors entre les opcions per facilitar la navegaci\u00f3.<\/li>\n<li>S&#8217;han d&#8217;evitar les barres de despla\u00e7ament (<em>scrolls<\/em>) sempre que sigui possible.<\/li>\n<\/ul>\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>El disseny d&#8217;interf\u00edcies per a pantalla de televisor est\u00e0 en proc\u00e9s d&#8217;expansi\u00f3, a causa de la televisi\u00f3 interactiva o algunes plataformes de videojoc. A continuaci\u00f3 es detallen les especificacions del disseny d&#8217;aplicacions per a televisi\u00f3. Est\u00e0ndards televisius No tots els pa\u00efsos utilitzen el mateix format de pantalla per a televisi\u00f3. A Europa, l&#8217;est\u00e0ndard m\u00e9s habitual &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/disseny\/pautes-de-disseny\/pautes-de-disseny-per-a-televisio\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abPautes de disseny per a televisi\u00f3\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":469,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-532","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":4,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/532\/revisions"}],"predecessor-version":[{"id":541,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/532\/revisions\/541"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/469"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}