Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 1121

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 1158

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 1162

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 1184

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 2853

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 2860

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /furanet/sites/piloto.foc.es/web/htdocs/wp-content/plugins/gravityforms/common.php on line 2873
diseño adaptado | Instituto FOC - FP Informática Online http://piloto.foc.es Titulación Oficial FP Informática Online Fri, 15 Nov 2019 08:17:58 +0000 es hourly 1 93378694 Desarrolla tus webs para que se vean en todo tipo de dispositivos, con “Responsive Web Design”. http://piloto.foc.es/2017/02/13/3193-desarrolla-tus-webs-para-que-se-vean-en-todo-tipo-de-dispositivos-con-responsive-web-design.html http://piloto.foc.es/2017/02/13/3193-desarrolla-tus-webs-para-que-se-vean-en-todo-tipo-de-dispositivos-con-responsive-web-design.html#respond Mon, 13 Feb 2017 16:42:18 +0000 http://www.foc.es/?p=3193 Con los conocimientos adquiridos al cursar nuestro certificado de profesionalidad   IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web,  serás capaz de desarrollar páginas webs que se visualicen correctamente en tablets, móviles y en dispositivos de escritorio, es decir, diseño web adaptable (en inglés Responsive Web Design). En esta publicación del blog te explicamos cómo hacer este diseño adaptable y te facilitamos el código para que puedas hacer las pruebas que consideres oportunas. Para explicar adecuadamente como hacer un diseño adaptable para nuestra web partimos de la siguiente página web, la cual está diseñada en cuatro columnas, de forma que cada columna está encabezada por una imagen y a continuación un texto relacionado con la imagen. Esta visualización de la página web corresponde a un dispositivo de escritorio (ordenador), con un tamaño superior a 900px. Si reducimos el tamaño de la página web por debajo de los 900px, estamos visualizando para una Tablet. Para que el contenido de nuestra web se visible y legible la página web se visualizada en dos columnas. Tal y como vemos en la siguiente imagen: Si reducimos el tamaño por debajo de 500px estamos visualizando para un dispositivo  móvil y la información se la web se visualizará en […]

The post Desarrolla tus webs para que se vean en todo tipo de dispositivos, con “Responsive Web Design”. first appeared on Instituto FOC - FP Informática Online.

]]> Con los conocimientos adquiridos al cursar nuestro certificado de profesionalidad   IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web,  serás capaz de desarrollar páginas webs que se visualicen correctamente en tablets, móviles y en dispositivos de escritorio, es decir, diseño web adaptable (en inglés Responsive Web Design).

En esta publicación del blog te explicamos cómo hacer este diseño adaptable y te facilitamos el código para que puedas hacer las pruebas que consideres oportunas.

Para explicar adecuadamente como hacer un diseño adaptable para nuestra web partimos de la siguiente página web, la cual está diseñada en cuatro columnas, de forma que cada columna está encabezada por una imagen y a continuación un texto relacionado con la imagen.

Responsive_design1

Esta visualización de la página web corresponde a un dispositivo de escritorio (ordenador), con un tamaño superior a 900px.

Si reducimos el tamaño de la página web por debajo de los 900px, estamos visualizando para una Tablet. Para que el contenido de nuestra web se visible y legible la página web se visualizada en dos columnas. Tal y como vemos en la siguiente imagen:

Responsive_design2

Si reducimos el tamaño por debajo de 500px estamos visualizando para un dispositivo  móvil y la información se la web se visualizará en una sola columna, tal como vemos en la siguiente imagen:

Responsive_design3

Para conseguir que tus webs se visualicen correctamente en distintos dispositivos solo tienes que aplicar las siguientes reglas CSS llamas media Queries:

Responsive_design4

El código asociado a este ejemplo los puedes descargar aquí.

The post Desarrolla tus webs para que se vean en todo tipo de dispositivos, con “Responsive Web Design”. first appeared on Instituto FOC - FP Informática Online.

]]> http://piloto.foc.es/2017/02/13/3193-desarrolla-tus-webs-para-que-se-vean-en-todo-tipo-de-dispositivos-con-responsive-web-design.html/feed 0 3193 Adapta el diseño de tu web a cualquier dispositivo http://piloto.foc.es/2016/06/17/2772-adapta-el-diseno-de-tu-web-a-cualquier-dispositivo.html http://piloto.foc.es/2016/06/17/2772-adapta-el-diseno-de-tu-web-a-cualquier-dispositivo.html#respond Fri, 17 Jun 2016 11:25:36 +0000 http://www.foc.es/?p=2772 Contenidos: En esta sesión aprenderás a cómo adaptar el contenido de tu aplicación web a diferentes tamaños de pantalla haciendo accesible el contenido desde cualquier tipo de dispositivo móvil o de escritorio: 1. Entender que consideraciones debemos tener en cuenta para llevar a cabo un diseño web responsivo. 2. Adaptar nuestras páginas web a diferentes tamaños de pantalla en función del alto y ancho de la pantalla. 3. Definir media queries para adaptar la representación nuestros contenidos. 4. Testear que nuestra aplicación web es adaptable a diferentes resoluciones y dispositivos. Fecha y hora: ? 23 de Junio de 2016 ⏰ 21:00 a 21:45 h Lo mejor de todo es que, como siempre, es totalmente gratis.

The post Adapta el diseño de tu web a cualquier dispositivo first appeared on Instituto FOC - FP Informática Online.

]]>

Contenidos:

En esta sesión aprenderás a cómo adaptar el contenido de tu aplicación web a diferentes tamaños de pantalla haciendo accesible el contenido desde cualquier tipo de dispositivo móvil o de escritorio:

  • 1. Entender que consideraciones debemos tener en cuenta para llevar a cabo un diseño web responsivo.
  • 2. Adaptar nuestras páginas web a diferentes tamaños de pantalla en función del alto y ancho de la pantalla.
  • 3. Definir media queries para adaptar la representación nuestros contenidos.
  • 4. Testear que nuestra aplicación web es adaptable a diferentes resoluciones y dispositivos.

Fecha y hora:

  • ? 23 de Junio de 2016
  • ⏰ 21:00 a 21:45 h

Lo mejor de todo es que, como siempre, es totalmente gratis.

The post Adapta el diseño de tu web a cualquier dispositivo first appeared on Instituto FOC - FP Informática Online.

]]> http://piloto.foc.es/2016/06/17/2772-adapta-el-diseno-de-tu-web-a-cualquier-dispositivo.html/feed 0 2772