{"id":980,"date":"2012-03-01T14:23:50","date_gmt":"2012-03-01T12:23:50","guid":{"rendered":"https:\/\/nousmedis.dev-ws.com\/?p=980"},"modified":"2024-05-06T12:54:55","modified_gmt":"2024-05-06T10:54:55","slug":"media-queries-un-epub-para-dominarlos-a-todos","status":"publish","type":"post","link":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/","title":{"rendered":"Media queries: un ePub para dominarlos a todos"},"content":{"rendered":"<p>Si ya has publicado un libro en formato ePub \u2013o te has informado al respecto\u2013, sabr\u00e1s lo heterog\u00e9neo que es el mercado de lectores digitales y lo dif\u00edcil que es conseguir que los libros se muestren de forma consistente en la mayor\u00eda de dispositivos. Para tratar de controlar el aspecto de un ePub se suele utilizar una de estas dos aproximaciones:<\/p>\n<ul>\n<li><strong>Crear la versi\u00f3n m\u00e1s sencilla posible de un ePub<\/strong>, de forma que sea compatible con el mayor n\u00famero de visores, aunque ello suponga perder caracter\u00edsticas disponibles en los lectores m\u00e1s avanzados<\/li>\n<li><strong>Crear un ePub espec\u00edfico para cada plataforma<\/strong>, aprovechando caracter\u00edsticas \u00fanicas de cada dispositivo, pero asumiendo los gastos de desarrollo y mantenimiento de versiones que conlleva.<\/li>\n<\/ul>\n<p>En el siguiente art\u00edculo vamos a proponer una<span style=\"text-decoration: underline;\"> tercera v\u00eda:<\/span> la creaci\u00f3n de un \u00fanico archivo que se adapte a las caracter\u00edsticas del dispositivo en la que se muestra. Este m\u00e9todo se basa en la capacidad de CSS para dar formato al contenido HTML\/XHTML del libro. El \u201ctruco\u201d consistir\u00e1 en la creaci\u00f3n de un CSS que \u201csepa\u201d c\u00f3mo adaptar el contenido a cada uno de los lectores. Para ver un ejemplo de lo que podemos llegar a conseguir, visite la siguiente <a href=\"http:\/\/mediaqueri.es\/\">p\u00e1gina<\/a>\u00a0.<\/p>\n<h3><em>Media queries<\/em>: el CSS adaptable<\/h3>\n<p>\u00bfQu\u00e9 es una <strong><em>media query<\/em><\/strong>? B\u00e1sicamente se trata de una forma de determinar c\u00f3mo debe mostrarse el contenido en funci\u00f3n de las caracter\u00edsticas particulares de un dispositivo. Seg\u00fan la definici\u00f3n oficial de la entidad W3C:<\/p>\n<p><em>Una <\/em>media query<em> consiste en un tipo de dispositivo (media) y cero o m\u00e1s expresiones que comprueban\u00a0 el estado de las caracter\u00edsticas particulares de ese dispositivo. Entre las caracter\u00edsticas que pueden utilizarse en una media query est\u00e1n las propiedades\u00a0 \u201cancho\u201d, \u201calto\u201d y \u201ccolor\u201d. Mediante el uso de media queries, la presentaci\u00f3n del contenido puede adaptarse a un rango espec\u00edfico de dispositivos de salida sin necesidad de modificar el propio contenido.<\/em><\/p>\n<p>Por ejemplo, una web cuyo contenido est\u00e1 pensado para ser impreso puede utilizar dos hojas CSS: una para adaptar el formato de la p\u00e1gina a la pantalla del ordenador y otra para adaptarla a un formato imprimible, sin modificar en ning\u00fan caso el contenido HTML. Observa el siguiente c\u00f3digo:<\/p>\n<pre>&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"screen\" href=\"pantalla.css\"&gt;\n&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"print\" href=\"impresora.css\"&gt;<\/pre>\n<p>La pantalla del ordenador utilizar\u00e1 la hoja <code>pantalla.css<\/code> y la versi\u00f3n para impresor la hoja <code>impresora.css<\/code>. En el caso de un ePub, este c\u00f3digo deber\u00eda aparecer en la secci\u00f3n <code>&lt;head&gt;<\/code> de cada una de las p\u00e1ginas XHTML que lo componen y ser\u00eda necesario incluir ambas hojas de estilo. Existe la posibilidad de utilizar <em>media queries<\/em> en una \u00fanica hoja de estilos, con lo que el trabajo y gesti\u00f3n de nuestros ePub se simplificar\u00e1 enormemente.<\/p>\n<p>En el caso de HTML4 y CSS2, la lista completa de valores <em>media type<\/em> soportados es la siguiente: &#8220;<code>aural<\/code>&#8220;, &#8220;<code>braille<\/code>&#8220;, &#8220;<code>handheld<\/code>&#8220;, &#8220;<code>print<\/code>&#8220;, &#8220;<code>projection<\/code>&#8220;, &#8220;<code>screen<\/code>&#8220;, &#8220;<code>tty<\/code>&#8220;, &#8220;<code>tv<\/code>&#8220;. La propiedad &#8220;<code>all<\/code>&#8221; se utiliza para indicar que la hoja de estilos se aplica a todos los dispositivos de salida.<\/p>\n<p>Cuando se trata de HTML5 y CSS3, el usuario puede crear valores <em>media type <\/em>adicionales siempre que se atenga a la sintaxis correcta. La mayor\u00eda de los lectores digitales utilizan por defecto el valor <code>media=\"screen\"<\/code>, pero existen otras opciones. Por ejemplo, las nuevas <a href=\"http:\/\/kindlegen.s3.amazonaws.com\/AmazonKindlePublishingGuidelines.pdf\">directrices de publicaci\u00f3n de Amazon<\/a>\u00a0a\u00f1aden dos valores que permiten adaptar el contenido a sus dispositivos : <code>amzn-mobi<\/code> (para los lectores de tinta electr\u00f3nica) y <code>amzn-kf8<\/code>(para su nuevo lector tipo tablet, Kindle Fire).\u00a0Se puede utilizar tambi\u00e9n\u00a0<code>\"not\"<\/code> precediendo el nombre del dispositivo para referirse a todos los lectores excepto el mencionado. Por ejemplo, el valor <code>media=\"not amzn-kf8\"<\/code> se refiere a cualquier dispositivo excepto el Kindle Fire.<\/p>\n<p>En el siguiente ejemplo, tenemos tres reglas CSS, una com\u00fan para todos los lectores, otra espec\u00edfica para Kindle y la \u00faltima dirigida a Kindle Fire:<\/p>\n<pre>p {\n   text-align: left;\n}\n@media amzn-mobi{\n   p.firstline {margin-top:10px;text-indent:-20px;}\n}\n@media amzn-kf8{\n   p.firstline {margin-top:2em; margin-left:2em; text-indent: -2em;}\n}<\/pre>\n<p>Recuerda que las reglas CSS se &#8220;leen&#8221; de arriba abajo. Por eso, es conveniente empezar con las reglas gen\u00e9ricas, dirigidas a todos los dispositivos, y acabar con las espec\u00edficas para cada lector digital mediante el uso de media queries. En el siguiente ejemplo vamos a especificar una regla concreta para el iPad. Puesto que entra en conflicto con la regla gen\u00e9rica, la colocaremos debajo de \u00e9sta, de forma que sea la \u00faltima que lea el iPad y, por lo tanto, la que aplique al texto:<\/p>\n<pre>p {\n   text-align: left; color: #000;\n}\n\n@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){\n   p.firstline {margin-top:10px;text-indent:-20px}\n}<\/pre>\n<p>Observa que, para especificar una regla que leer\u00e1 el iPad, nos basamos en las dimensiones de su pantalla, 1024x768px. Cualquier tablet que tenga las mismas o mayores dimensiones aplicar\u00e1 la regla.<\/p>\n<h3>Caracter\u00edsticas (<em>media features<\/em>) de los dispositivos<\/h3>\n<p>Los diferentes lectores digitales pueden definirse por sus caracter\u00edsticas (<em>media features<\/em>) \u00fanicas. Las siguientes normas se aplican cuando las utilizamos en una declaraci\u00f3n CSS:<\/p>\n<ul>\n<li>Las propiedades se utilizan en las declaraciones para dar informaci\u00f3n sobre c\u00f3mo presentar un documento. Las caracter\u00edsticas se utilizan en expresiones para describir los requerimientos del dispositivo de salida.<\/li>\n<li>En determinadas caracter\u00edsticas podemos utilizar de forma opcional los prefijos &#8220;<code>min-<\/code>&#8221; o &#8220;<code>max-<\/code>&#8221; para expresar &#8220;mayor o igual que&#8221; o &#8220;menor o igual a&#8221;.<\/li>\n<li>Una propiedad requiere siempre un valor para formar una declaraci\u00f3n. Sin embargo, una caracter\u00edstica no necesita un valor, aunque puede utilizarlo.<\/li>\n<li>Una propiedad puede aceptar valores complejos, como el resultado de un c\u00e1lculo, mientras que una caracter\u00edstica se limita a un \u00fanico valor: una palabra clave, un n\u00famero o un n\u00famero con un identificador de unidad (1px).<\/li>\n<\/ul>\n<h3>Caracter\u00edsticas (<em>media features<\/em>) que pueden utilizare en una <em>media query <\/em>para ePub<\/h3>\n<p>El siguiente listado muestra las caracter\u00edsticas \u00fatiles para determinar el dispositivo su orientaci\u00f3n:<\/p>\n<ul>\n<li><strong>width<\/strong> ancho de pantalla del dispositivo de lectura utilizado para mostrar la p\u00e1gina. Suele ser inferior a la propiedad <code>device-width<\/code>, puesto que parte de la pantalla la ocupan los m\u00e1rgenes y otros elementos como barras de desplazamiento y controles de navegaci\u00f3n.<\/li>\n<li><strong>height<\/strong> alto de pantalla del dispositivo de lectura utilizado para mostrar la p\u00e1gina. Suele ser inferior a la propiedad <code>device-height<\/code> puesto que parte de la pantalla la ocupan los m\u00e1rgenes y otros elementos como barras de desplazamiento y controles de navegaci\u00f3n.<\/li>\n<li><strong>device-width <\/strong>ancho de pantalla f\u00edsico del dispositivo. Ser\u00eda equivalente a la resoluci\u00f3n de la pantalla completa, independientemente del tama\u00f1o dedicado a mostrar la pagina.<\/li>\n<li><strong>device-height<\/strong>\u00a0alto de pantalla f\u00edsico del dispositivo. Ser\u00eda equivalente a la resoluci\u00f3n vertical de la pantalla completa, independientemente del tama\u00f1o dedicado a mostrar la pagina.<\/li>\n<li><strong>orientation<\/strong> orientaci\u00f3n. Los valores pueden ser <code>portrait<\/code> (alto o vertical) y <code>landscape<\/code> (horizontal o apaisado).<\/li>\n<li><strong>aspect-ratio<\/strong> Relaci\u00f3n de aspecto de la p\u00e1gina, calculada mediante la divisi\u00f3n del ancho (<code>width<\/code>) por el alto (<code>height<\/code>) .<\/li>\n<li><strong>device-aspect-ratio <\/strong>relaci\u00f3n de aspecto de la pantalla del dispositivo, calculada mediante la divisi\u00f3n del ancho de pantalla (<code>device-width<\/code>) por el alto de pantalla (<code>device-height<\/code>). En un iPad es de 4:3 (1024\/768 = 4\/3).<\/li>\n<li><strong>resolution<\/strong> resoluci\u00f3n de la pantalla del dispositivo, medida en densidad de pixeles por pulgada cuadrada.<\/li>\n<\/ul>\n<h3>Test de caracter\u00edsticas media query<\/h3>\n<p>\u00bfC\u00f3mo puedes saber qu\u00e9 caracter\u00edsticas soporta un determinado dispositivo? Muy f\u00e1cil. Abriendo el siguiente <a href=\"http:\/\/extraordinarycommons.com\/MediaQueryTest.html\">archivo<\/a> en el navegador web de tu dispositivo.<\/p>\n<figure id=\"attachment_1019\" aria-describedby=\"caption-attachment-1019\" style=\"width: 300px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/test.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1019 size-medium\" title=\"Test media query en Firefox, utilizando la extensi\u00f3n ePub reader\" src=\"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/test-300x239.jpg\" alt=\"Test media query en Firefox, utilizando la extensi\u00f3n ePub reader\" width=\"300\" height=\"239\" srcset=\"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/test-300x239.jpg 300w, https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/test.jpg 567w, https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/test-200x159.jpg 200w, https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/test-50x40.jpg 50w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-1019\" class=\"wp-caption-text\">Test media query en Firefox, utilizando la extensi\u00f3n ePub reader<\/figcaption><\/figure>\n<p>Si tu lector no incorpora navegador Web, descarga <a href=\"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/test_media_query.epub\">este peque\u00f1o eBook<\/a>. Se trata de la versi\u00f3n ePub del archivo anterior.<\/p>\n<h3>Conclusi\u00f3n<\/h3>\n<p>La mayor\u00eda de los dispositivos de lectura actuales, al menos los basados en tinta electr\u00f3nica, s\u00f3lo soportan la especificaci\u00f3n ePub 2.0.1, basada en CSS2 y, por lo tanto, no reconocen las reglas media queries. IBooks de Apple y Amazon son, por el momento, dos honrosas excepciones. Sin embargo, con la especificaci\u00f3n ePub 3.0 ya finalizada, es de prever que a lo largo de este a\u00f1o y principios del siguiente los fabricantes actualicen sus dispositivos.<\/p>\n<p>Gracias al modo en que se interpretan las hojas de estilo en cascada (CSS), podemos dise\u00f1ar libros complejos que se &#8220;degraden&#8221; con gracia en dispositivos m\u00e1s sencillos. Una de las caracter\u00edsticas m\u00e1s notorias de esta tecnolog\u00eda es que las reglas CSS no soportadas se ignoran<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dice el refr\u00e1n: si la monta\u00f1a no viene a Mahoma, Mahoma ir\u00e1 a la monta\u00f1a. Aplicado al mundo del libro digital, si nuestro fichero ePub no se muestra como es debido en un determinado dispositivo, podemos crear un CSS que se adapte a sus limitaciones concretas. \u00bfC\u00f3mo? Mediante el uso de una t\u00e9cnica tan potente como f\u00e1cil de implementar. Bienvenido al mundo de las llamadas media queries.<\/p>\n","protected":false},"author":1,"featured_media":1017,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[267,234],"tags":[27,33,44,45,46,49],"class_list":["post-980","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publicacion-digital","category-tutorial-es","tag-digital-editions","tag-epub","tag-ipad","tag-kindle","tag-libro-electronico","tag-mobi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.1 (Yoast SEO v28.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Media queries: un ePub para dominarlos a todos - Nousmedis<\/title>\n<meta name=\"description\" content=\"Si nuestro fichero ePub no se muestra como es debido en un determinado dispositivo, podemos crear un CSS que se adapte a sus limitaciones concretas. Mediante el uso de media queries.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Media queries: un ePub para dominarlos a todos\" \/>\n<meta property=\"og:description\" content=\"Dice el refr\u00e1n: si la monta\u00f1a no viene a Mahoma, Mahoma ir\u00e1 a la monta\u00f1a. Aplicado al mundo del libro digital, si nuestro fichero ePub no se muestra como es debido en un determinado dispositivo, podemos crear un CSS que se adapte a sus limitaciones concretas. \u00bfC\u00f3mo? Mediante el uso de una t\u00e9cnica tan potente como f\u00e1cil de implementar. Bienvenido al mundo de las llamadas media queries.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/\" \/>\n<meta property=\"og:site_name\" content=\"Nousmedis\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-01T12:23:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-06T10:54:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/media_query.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"195\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"F. Javier G\u00f3mez La\u00ednez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nousmedis\" \/>\n<meta name=\"twitter:site\" content=\"@nousmedis\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"F. Javier G\u00f3mez La\u00ednez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/\"},\"author\":{\"name\":\"F. Javier G\u00f3mez La\u00ednez\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#\\\/schema\\\/person\\\/d96268bf259cc19aa9098d7303e687c1\"},\"headline\":\"Media queries: un ePub para dominarlos a todos\",\"datePublished\":\"2012-03-01T12:23:50+00:00\",\"dateModified\":\"2024-05-06T10:54:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/\"},\"wordCount\":1374,\"publisher\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/wp-content\\\/uploads\\\/2012\\\/03\\\/media_query.jpg\",\"keywords\":[\"Digital Editions\",\"ePUB\",\"iPad\",\"Kindle\",\"Libro electr\u00f3nico\",\"MOBI\"],\"articleSection\":[\"Publicaci\u00f3n Digital\",\"Tutorial\"],\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/\",\"url\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/\",\"name\":\"Media queries: un ePub para dominarlos a todos - Nousmedis\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/wp-content\\\/uploads\\\/2012\\\/03\\\/media_query.jpg\",\"datePublished\":\"2012-03-01T12:23:50+00:00\",\"dateModified\":\"2024-05-06T10:54:55+00:00\",\"description\":\"Si nuestro fichero ePub no se muestra como es debido en un determinado dispositivo, podemos crear un CSS que se adapte a sus limitaciones concretas. Mediante el uso de media queries.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/#primaryimage\",\"url\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/wp-content\\\/uploads\\\/2012\\\/03\\\/media_query.jpg\",\"contentUrl\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/wp-content\\\/uploads\\\/2012\\\/03\\\/media_query.jpg\",\"width\":540,\"height\":195,\"caption\":\"media query\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/2012\\\/03\\\/media-queries-un-epub-para-dominarlos-a-todos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Media queries: un ePub para dominarlos a todos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/\",\"name\":\"Nousmedis\",\"description\":\"Automatizaci\u00f3n de cat\u00e1logos, folletos y libros\",\"publisher\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#organization\",\"name\":\"Nousmedis Innovaci\u00f3n S.L.\",\"url\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/logo_nousmedis_2016_WEB_NEGATIVO.png\",\"contentUrl\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/wp-content\\\/uploads\\\/2016\\\/01\\\/logo_nousmedis_2016_WEB_NEGATIVO.png\",\"width\":480,\"height\":80,\"caption\":\"Nousmedis Innovaci\u00f3n S.L.\"},\"image\":{\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/nousmedis\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC1D9Pu7BKLjVaKl08Q1cPMA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/#\\\/schema\\\/person\\\/d96268bf259cc19aa9098d7303e687c1\",\"name\":\"F. Javier G\u00f3mez La\u00ednez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/371540f78fda7f58a69ddffd87eef1f1269ef87fbb3d06dbb1fc88a6c575abb2?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/371540f78fda7f58a69ddffd87eef1f1269ef87fbb3d06dbb1fc88a6c575abb2?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/371540f78fda7f58a69ddffd87eef1f1269ef87fbb3d06dbb1fc88a6c575abb2?s=96&d=identicon&r=g\",\"caption\":\"F. Javier G\u00f3mez La\u00ednez\"},\"description\":\"Especialista en procesos de automatizaci\u00f3n editorial. Adobe Certified Expert \\\/ Adobe Certified Instructor\",\"url\":\"https:\\\/\\\/nousmedis-lab.dev-ws.com\\\/es\\\/author\\\/javier\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Media queries: un ePub para dominarlos a todos - Nousmedis","description":"Si nuestro fichero ePub no se muestra como es debido en un determinado dispositivo, podemos crear un CSS que se adapte a sus limitaciones concretas. Mediante el uso de media queries.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Media queries: un ePub para dominarlos a todos","og_description":"Dice el refr\u00e1n: si la monta\u00f1a no viene a Mahoma, Mahoma ir\u00e1 a la monta\u00f1a. Aplicado al mundo del libro digital, si nuestro fichero ePub no se muestra como es debido en un determinado dispositivo, podemos crear un CSS que se adapte a sus limitaciones concretas. \u00bfC\u00f3mo? Mediante el uso de una t\u00e9cnica tan potente como f\u00e1cil de implementar. Bienvenido al mundo de las llamadas media queries.","og_url":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/","og_site_name":"Nousmedis","article_published_time":"2012-03-01T12:23:50+00:00","article_modified_time":"2024-05-06T10:54:55+00:00","og_image":[{"width":540,"height":195,"url":"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/media_query.jpg","type":"image\/jpeg"}],"author":"F. Javier G\u00f3mez La\u00ednez","twitter_card":"summary_large_image","twitter_creator":"@nousmedis","twitter_site":"@nousmedis","twitter_misc":{"Escrito por":"F. Javier G\u00f3mez La\u00ednez","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/#article","isPartOf":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/"},"author":{"name":"F. Javier G\u00f3mez La\u00ednez","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#\/schema\/person\/d96268bf259cc19aa9098d7303e687c1"},"headline":"Media queries: un ePub para dominarlos a todos","datePublished":"2012-03-01T12:23:50+00:00","dateModified":"2024-05-06T10:54:55+00:00","mainEntityOfPage":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/"},"wordCount":1374,"publisher":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#organization"},"image":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/#primaryimage"},"thumbnailUrl":"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/media_query.jpg","keywords":["Digital Editions","ePUB","iPad","Kindle","Libro electr\u00f3nico","MOBI"],"articleSection":["Publicaci\u00f3n Digital","Tutorial"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/","url":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/","name":"Media queries: un ePub para dominarlos a todos - Nousmedis","isPartOf":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/#primaryimage"},"image":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/#primaryimage"},"thumbnailUrl":"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/media_query.jpg","datePublished":"2012-03-01T12:23:50+00:00","dateModified":"2024-05-06T10:54:55+00:00","description":"Si nuestro fichero ePub no se muestra como es debido en un determinado dispositivo, podemos crear un CSS que se adapte a sus limitaciones concretas. Mediante el uso de media queries.","breadcrumb":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/#primaryimage","url":"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/media_query.jpg","contentUrl":"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/media_query.jpg","width":540,"height":195,"caption":"media query"},{"@type":"BreadcrumbList","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/2012\/03\/media-queries-un-epub-para-dominarlos-a-todos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/nousmedis-lab.dev-ws.com\/es\/"},{"@type":"ListItem","position":2,"name":"Media queries: un ePub para dominarlos a todos"}]},{"@type":"WebSite","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#website","url":"https:\/\/nousmedis-lab.dev-ws.com\/es\/","name":"Nousmedis","description":"Automatizaci\u00f3n de cat\u00e1logos, folletos y libros","publisher":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nousmedis-lab.dev-ws.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#organization","name":"Nousmedis Innovaci\u00f3n S.L.","url":"https:\/\/nousmedis-lab.dev-ws.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2016\/01\/logo_nousmedis_2016_WEB_NEGATIVO.png","contentUrl":"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2016\/01\/logo_nousmedis_2016_WEB_NEGATIVO.png","width":480,"height":80,"caption":"Nousmedis Innovaci\u00f3n S.L."},"image":{"@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/nousmedis","https:\/\/www.youtube.com\/channel\/UC1D9Pu7BKLjVaKl08Q1cPMA"]},{"@type":"Person","@id":"https:\/\/nousmedis-lab.dev-ws.com\/es\/#\/schema\/person\/d96268bf259cc19aa9098d7303e687c1","name":"F. Javier G\u00f3mez La\u00ednez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/371540f78fda7f58a69ddffd87eef1f1269ef87fbb3d06dbb1fc88a6c575abb2?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/371540f78fda7f58a69ddffd87eef1f1269ef87fbb3d06dbb1fc88a6c575abb2?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/371540f78fda7f58a69ddffd87eef1f1269ef87fbb3d06dbb1fc88a6c575abb2?s=96&d=identicon&r=g","caption":"F. Javier G\u00f3mez La\u00ednez"},"description":"Especialista en procesos de automatizaci\u00f3n editorial. Adobe Certified Expert \/ Adobe Certified Instructor","url":"https:\/\/nousmedis-lab.dev-ws.com\/es\/author\/javier\/"}]}},"jetpack_featured_media_url":"https:\/\/nousmedis-lab.dev-ws.com\/wp-content\/uploads\/2012\/03\/media_query.jpg","_links":{"self":[{"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/posts\/980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/comments?post=980"}],"version-history":[{"count":2,"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/posts\/980\/revisions"}],"predecessor-version":[{"id":10969,"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/posts\/980\/revisions\/10969"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/media\/1017"}],"wp:attachment":[{"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/media?parent=980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/categories?post=980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nousmedis-lab.dev-ws.com\/es\/wp-json\/wp\/v2\/tags?post=980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}