Con los conocimientos adquiridos al cursar nuestro certificado de profesionalidad \u00a0\u00a0IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web<\/a>, \u00a0ser\u00e1s capaz de desarrollar p\u00e1ginas webs que se visualicen correctamente en tablets, m\u00f3viles y en dispositivos de escritorio, es decir, dise\u00f1o web adaptable (en ingl\u00e9s Responsive Web Design).<\/p>\n

En esta publicaci\u00f3n del blog te explicamos c\u00f3mo hacer este dise\u00f1o adaptable y te facilitamos el c\u00f3digo para que puedas hacer las pruebas que consideres oportunas.<\/p>\n

Para explicar adecuadamente como hacer un dise\u00f1o adaptable para nuestra web partimos de la siguiente p\u00e1gina web, la cual est\u00e1 dise\u00f1ada en cuatro columnas, de forma que cada columna est\u00e1 encabezada por una imagen y a continuaci\u00f3n un texto relacionado con la imagen.<\/p>\n

<\/p>\n

Esta visualizaci\u00f3n de la p\u00e1gina web corresponde a un dispositivo de escritorio (ordenador), con un tama\u00f1o superior a 900px<\/strong>.<\/p>\n

Si reducimos el tama\u00f1o de la p\u00e1gina web por debajo de los 900px<\/strong>, estamos visualizando para una Tablet. Para que el contenido de nuestra web se visible y legible la p\u00e1gina web se visualizada en dos columnas. Tal y como vemos en la siguiente imagen:<\/p>\n

<\/p>\n

Si reducimos el tama\u00f1o por debajo de 500px<\/strong> estamos visualizando para un dispositivo \u00a0m\u00f3vil y la informaci\u00f3n se la web se visualizar\u00e1 en una sola columna, tal como vemos en la siguiente imagen:<\/p>\n

<\/p>\n

Para conseguir que tus webs se visualicen correctamente en distintos dispositivos solo tienes que aplicar las siguientes reglas CSS<\/strong> llamas media Queries<\/strong>:<\/p>\n

<\/p>\n

El c\u00f3digo asociado a este ejemplo los puedes descargar aqu\u00ed<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Con los conocimientos adquiridos al cursar nuestro certificado de profesionalidad \u00a0\u00a0IFCD0210-Desarrollo de Aplicaciones con Tecnolog\u00edas Web, \u00a0ser\u00e1s capaz de desarrollar p\u00e1ginas webs que se visualicen correctamente en tablets, m\u00f3viles y en dispositivos de escritorio, es decir, dise\u00f1o web adaptable (en ingl\u00e9s Responsive Web Design). En esta publicaci\u00f3n del blog te explicamos c\u00f3mo hacer este dise\u00f1o adaptable y te facilitamos el c\u00f3digo para que puedas hacer las pruebas que consideres oportunas. Para explicar adecuadamente como hacer un dise\u00f1o adaptable para nuestra web partimos de la siguiente p\u00e1gina web, la cual est\u00e1 dise\u00f1ada en cuatro columnas, de forma que cada columna est\u00e1 encabezada por una imagen y a continuaci\u00f3n un texto relacionado con la imagen. Esta visualizaci\u00f3n de la p\u00e1gina web corresponde a un dispositivo de escritorio (ordenador), con un tama\u00f1o superior a 900px. Si reducimos el tama\u00f1o de la p\u00e1gina web por debajo de los 900px, estamos visualizando para una Tablet. Para que el contenido de nuestra web se visible y legible la p\u00e1gina web se visualizada en dos columnas. Tal y como vemos en la siguiente imagen: Si reducimos el tama\u00f1o por debajo de 500px estamos visualizando para un dispositivo \u00a0m\u00f3vil y la informaci\u00f3n se la web se visualizar\u00e1 en […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[18,594],"tags":[535,542,543,491,544,530,545,548,437,546,549,547],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/p6jO3Y-Pv","amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3193"}],"collection":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/comments?post=3193"}],"version-history":[{"count":1,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3193\/revisions"}],"predecessor-version":[{"id":3195,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/3193\/revisions\/3195"}],"wp:attachment":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media?parent=3193"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/categories?post=3193"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/tags?post=3193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}