{"id":33,"date":"2013-04-08T20:51:23","date_gmt":"2013-04-08T19:51:23","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/?page_id=33"},"modified":"2014-04-07T15:08:43","modified_gmt":"2014-04-07T14:08:43","slug":"dispositius","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/dispositius\/","title":{"rendered":"Dispositivos"},"content":{"rendered":"<p><\/p>\n<h3>Principales entornos de interacci\u00f3n<\/h3>\n<p>Los diferentes entornos para los que se desarrolla una aplicaci\u00f3n interactiva imponen unos requisitos espec\u00edficos. Por <em>entorno<\/em> entendemos el contexto en el que el usuario utilizar\u00e1 la aplicaci\u00f3n, por lo que incluye dos factores:<\/p>\n<ul>\n<li>El <strong>dispositivo<\/strong> que va a soportar la aplicaci\u00f3n (ordenador de escritorio, <i>smartphone<\/i>, televisor, entre otros)<\/li>\n<li>El <strong>formato<\/strong> de la aplicaci\u00f3n (ya sea formato cerrado, como un CD o un punto de informaci\u00f3n, aplicaci\u00f3n web)<\/li>\n<\/ul>\n<p><a href=\"principals-entorns-dinteraccio\/\">Leer m\u00e1s<\/a><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h3>Tendencias de navegaci\u00f3n web<\/h3>\n<p>La \u201cgran guerra\u201d para el desarrollador web ha sido hasta ahora conseguir la compatibilidad entre toda la enorme variedad y versiones de navegadores web disponibles en el mercado.<br \/>\nHoy en d\u00eda, y como tendencia creciente, se a\u00f1aden otras complicaciones. La tecnolog\u00eda avanza con mucha rapidez y vamos hacia un futuro absolutamente m\u00f3vil en todos los sentidos, de modo que el desarrollador web no solo tendr\u00e1 que batallar con los diferentes navegadores sino tambi\u00e9n con los diferentes dispositivos que se utilizan para navegar por Internet.<\/p>\n<figure id=\"attachment_500\" aria-describedby=\"caption-attachment-500\" style=\"width: 128px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/this-is-the-web_BradFrostWeb-com.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" alt=\"M\u00faltiples dispositius web\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/this-is-the-web_BradFrostWeb-com-128x300.jpg\" width=\"128\" height=\"300\" \/><\/a><figcaption id=\"caption-attachment-500\" class=\"wp-caption-text\">Font: BradFrostWeb.com<\/figcaption><\/figure>\n<p>La variedad de dispositivos, marcas, versiones, funcionalidades, tama\u00f1os y prestaciones evoluciona a una velocidad vertiginosa, hecho que hace del todo imposible plantear una versi\u00f3n web para cada caso y a la vez nos imposibilita plantear las aplicaciones web est\u00e1ndares y que sean usables y visibles en todos los dispositivos, sin excepci\u00f3n.<\/p>\n<p>Pod\u00e9is ver un v\u00eddeo resumen de estad\u00edsticas de uso de dispositivos m\u00f3viles:<\/p>\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=IZA9qjt2A48\" target=\"_blank\">http:\/\/www.youtube.com\/watch?v=IZA9qjt2A48<\/a><\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h3>Responsive design<\/h3>\n<p>El dise\u00f1o web responsivo o <i>responsive<\/i> es una metodolog\u00eda que pretende hacer evolucionar la manera de desarrollar una aplicaci\u00f3n web para englobar diferentes dispositivos, ya que permite adaptarse de manera fluida a la resoluci\u00f3n de cada dispositivo de visualizaci\u00f3n.<\/p>\n<figure id=\"attachment_833\" aria-describedby=\"caption-attachment-833\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/responsivity2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-833\" alt=\"Responsive design\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/responsivity2-300x141.jpg\" width=\"300\" height=\"141\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/responsivity2-300x141.jpg 300w, http:\/\/multimedia.uoc.edu\/blogs\/dim\/files\/2013\/04\/responsivity2.jpg 772w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-833\" class=\"wp-caption-text\">Responsive design<\/figcaption><\/figure>\n<p>La adaptabilidad del dise\u00f1o web responsivo comporta beneficios como los siguientes:<\/p>\n<ul>\n<li>Mejorar el posicionamiento SEO de la web. Dado que trabajamos con una \u00fanica versi\u00f3n para todos los dispositivos.<\/li>\n<li>Reducir costes porque no son diferentes versiones sino una trabajada con una metodolog\u00eda espec\u00edfica desde el comienzo del desarrollo.<\/li>\n<li>Mejorar la experiencia de usuario, ya que tenemos un \u00fanico dise\u00f1o principal que mantendr\u00e1 la coherencia con la visualizaci\u00f3n desde cualquier dispositivo.<\/li>\n<\/ul>\n<h4 style=\"text-decoration: underline\">Enlaces relacionados<\/h4>\n<p><b>El concepto <i>responsive<\/i><\/b><\/p>\n<ul>\n<li><a href=\"https:\/\/itunes.apple.com\/mx\/book\/responsive-web-design\/id613483876?mt=11\" target=\"_blank\">Manual de dise\u00f1o web responsivo (de Wilfredo Salas G.)<\/a><\/li>\n<li><a href=\"http:\/\/es.slideshare.net\/tonamonjo\/responsive-web-design-17713036\" target=\"_blank\">Presentaci\u00f3n de dise\u00f1o web responsivo (de Tona Monjo)<\/a><\/li>\n<li><a href=\"https:\/\/speakerdeck.com\/malarkey\/fashionably-flexible-responsive-web-design-full-day-workshop-1\" target=\"_blank\"><i>Fashionably flexible responsive web design<\/i><\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/JavierUsobiagaFerrer\/responsive-web-design-reinventando-el-diseo-web-15414723\" target=\"_blank\">Reinventando el dise\u00f1o web (de Javier Usobiaga)<\/a><\/li>\n<li><a href=\"http:\/\/www.slideshare.net\/saracannon\/responsive-design-12837964\" target=\"_blank\"><i>Responsive Design<\/i> (de Sara Cannon)<\/a><\/li>\n<li><a href=\"http:\/\/xn--diseowebresponsivo-q0b.com.ar\/\" target=\"_blank\">http:\/\/xn--diseowebresponsivo-q0b.com.ar\/<\/a><\/li>\n<li><a href=\"http:\/\/uxdesign.smashingmagazine.com\/2012\/05\/30\/design-process-responsive-age\/\" target=\"_blank\">http:\/\/uxdesign.smashingmagazine.com\/2012\/05\/30\/design-process-responsive-age\/<\/a><\/li>\n<\/ul>\n<p><b>Algunos ejemplos<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/mediaqueri.es\/\" target=\"_blank\">Ejemplos de webs responsivas<\/a><\/li>\n<li><a href=\"http:\/\/www.estudio-creativo.com\/2012\/03\/menus-adaptables-en-el-responsive-design\/\" target=\"_blank\">Men\u00fas adaptables con <i>responsive<\/i><\/a><\/li>\n<li><a href=\"http:\/\/emilianoperezansaldi.com\/seo\/responsive-web-design-y-la-importancia-en-el-seo\/\" target=\"_blank\">El <i>responsive<\/i> y la importancia en el SEO<\/a><\/li>\n<li><a href=\"http:\/\/www.awwwards.com\/50-examples-of-responsive-web-design.html\" target=\"_blank\">Ejemplos de dise\u00f1o responsivo<\/a><\/li>\n<\/ul>\n<p><b>Lecturas relacionadas<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/www.netmagazine.com\/opinions\/nielsen-wrong-mobile\" target=\"_blank\">C\u00f3mo podemos mejorar la experiencia del usuario en dispositivos m\u00f3viles<\/a><\/li>\n<li><a href=\"http:\/\/aurea.es\/2012\/04\/20\/diseno-sensible-vs-version-movil\/\" target=\"_blank\">Plantear un dise\u00f1o sensible o una versi\u00f3n m\u00f3vil<\/a><\/li>\n<li><a href=\"http:\/\/www.netmagazine.com\/opinions\/responsive-design-or-native-app\" target=\"_blank\">Dise\u00f1o responsivo o aplicaci\u00f3n nativa<\/a><\/li>\n<li><a href=\"http:\/\/www.dosdepipas.com\/blog\/una-nueva-metodologia-para-diseno-responsive\/\" target=\"_blank\">Una nueva metodolog\u00eda para el dise\u00f1o web responsivo<\/a><\/li>\n<li><a href=\"http:\/\/interactionphilia.com\/interfaces-adaptativas\/\" target=\"_blank\">M\u00e1s all\u00e1 del <i>responsive<\/i>: interfaces adaptativas<\/a><\/li>\n<li><a href=\"http:\/\/xn--diseowebresponsivo-q0b.com.ar\/\" target=\"_blank\">Dise\u00f1o web responsivo seg\u00fan Ethan Marcotte<\/a><\/li>\n<li><a href=\"http:\/\/ivanprego.com\/diseno-web\/diseno-adaptativo\/historia-del-diseno-web-adaptable-quien-es-quien-en-el-responsive-web-design\/\" target=\"_blank\">Historia del dise\u00f1o web adaptativo<\/a><\/li>\n<\/ul>\n<p><b>Herramientas<\/b><\/p>\n<ul>\n<li>Herramienta que permite dise\u00f1ar una web responsiva directamente en el navegador (<a href=\"http:\/\/techcrunch.com\/2013\/05\/06\/froont\/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+Techcrunch+%28TechCrunch%29http:\/\/\" target=\"_blank\">ved m\u00e1s informaci\u00f3n<\/a>)<\/li>\n<li><a href=\"http:\/\/www.responsinator.com\/\" target=\"_blank\">Herramienta en l\u00ednea que permite ejecutar un test de responsividad (simulaci\u00f3n de visualizaci\u00f3n de una web espec\u00edfica en dispositivos m\u00f3viles)<\/a><\/li>\n<li><a href=\"http:\/\/gridpak.com\/\" target=\"_blank\"><i>Responsive grid generator<\/i><\/a><\/li>\n<li><a href=\"http:\/\/www.netmagazine.com\/features\/50-fantastic-tools-responsive-web-design\" target=\"_blank\">Herramientas \u00fatiles para el desarrollo responsivo<\/a><\/li>\n<li><a href=\"http:\/\/www.webdesignerdepot.com\/2013\/04\/really-easy-responsive-design\/\" target=\"_blank\">Herramientas para hacer el <i>responsive<\/i> m\u00e1s f\u00e1cil<\/a><\/li>\n<li><a href=\"http:\/\/bradfrost.github.com\/this-is-responsive\/index.html\" target=\"_blank\">Plantillas, ejemplos y novedades del dise\u00f1o web responsivo<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Principales entornos de interacci\u00f3n Los diferentes entornos para los que se desarrolla una aplicaci\u00f3n interactiva imponen unos requisitos espec\u00edficos. Por entorno entendemos el contexto en el que el usuario utilizar\u00e1 la aplicaci\u00f3n, por lo que incluye dos factores: El dispositivo que va a soportar la aplicaci\u00f3n (ordenador de escritorio, smartphone, televisor, entre otros) El formato &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/dispositius\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abDispositivos\u00bb<\/span><\/a><\/p>\n","protected":false},"author":35,"featured_media":0,"parent":0,"menu_order":8,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-33","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/33","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=33"}],"version-history":[{"count":37,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":885,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/pages\/33\/revisions\/885"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dim\/es\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}