Este sitio usa cookies y tecnologías similares. Si no cambia la configuración de su navegador, usted acepta su uso. Saber más

Acepto

Información sobre cookies


Utilizo cookies propias para asegurar el correcto funcionamiento de la web y cookies de terceros para mejorar los servicios mediante el análisis de hábitos de navegación. Si continúa navegando, considero que acepta su uso. Para cambiar la configuración u obtener más información, siga leyendo este apartado.

Además, esta web utiliza Google Analytics y Google Adsense, un servicio analítico web y un servicio de anuncios publicitarios prestados por Google, Inc.

Qué son las cookies y para qué se utilizan

Una cookie es un fichero que contiene una pequeña información que es enviada por un sitio web y almacenada en el navegador del usuario. De esta manera, el sitio web puede recoger ciertos datos e informaciones sobre las acciones del usuario para así poder optimizar la navegación y ofrecerle servicios que complementen la experiencia de navegación.

Este sitio utiliza cookies cuando un usuario navega por el. Dichas cookies se asocian a un usuario anónimo y a su navegador. Las cookies permiten así a la web, reconocer a los usuarios que accedan a ella, con el único fin de asegurar el correcto funcionamiento de la misma y facilitar a éstos su navegación. En cualquier caso, el usuario puede configurar su navegador para que le avise de la recepción de cookies e impedir así su instalación. Siga leyendo para saber como.

Entre la información que almacenan estas cookies se encuentran: dato de aceptación de cookies, datos de sesión o datos referentes a la navegación intrínseca en el sitio web (páginas visitadas, opciones seleccionadas…etc)

Las cookies utlizan la información que guardan, para personalizar la navegación del usuario, por ejemplo, para poder recordar su login y password automáticamente, obteniendo de esta manera una navegación más rápida y fluida.

Tipos de cookies utilizadas

Podemos distinguir entre dos tipos de cookies en función de su permanencia: cookies de sesión y permanentes. Las cookies de sesión caducan una vez se cierra el navegador, sin embargo, las cookies permanentes se almacenan durante el tiempo definido por el sitio web, o bien hasta que se borren manualmente en el navegador.

En función del objetivo, las cookies que utilizo son:

  • Cookies técnicas, que registran un identificador de sesión con el que el usuario está interactuando con la aplicación, si se elimina o no se permite, la aplicación no permitirá el acceso a un usuario administrador.
  • Cookies de personalización, que guardan preferencias del usuario para que la navegación por el sitio web sea más fluida y adaptada a sus preferencias.
  • Cookies de análisis, que sirven para analizar la navegación, páginas visitadas, duración de la visita, clicks...etc, para cuestiones estadísticas que permitan futuras mejoras en la aplicación.
  • Cookies publicitarias o de terceros: Son las encargadas de recopilar información sobre preferencias y elecciones personales de los usuarios en sitios web. Se dirigen a redes de publicidad que las utilizan para mostrar posteriomente anuncios personalizados en otros sitios web. En esta web se utilizan este tipo de cookies solo en determinadas páginas: Tutoriales, Actualidad y Sobre mí.
Qué ocurre si acepta las cookies

Si tiene las cookies activadas en su navegador, utilizaré esa información para asegurar el correcto funcionamiento de la navegación a través del sitio. Por ejemplo, si es usuario registrado, el sistema recordará por si solo su login y password, para evitar teclearlo cada vez que entre en el.

Que ocurre si desinstala o borra las cookies

Algunas funcionalidades de los servicios quedarán deshabilitadas como, por ejemplo, permanecer identificado, con lo que no funcionaría en acceso a los usuarios, o no mostrar el aviso de aceptación de cookies.

Como desinstalar las cookies o rechazarlas en su navegador

Todos los navegadores actuales permiten cambiar la configuración de Cookies. Estos ajustes normalmente se encuentran en las ‘Opciones’ o ‘Preferencias’ del menú de su navegador. Lo que sigue a continuación es una pequeña ayuda sobre como actuar en cada navegador (únicamente se incluyen navegadores mayormente reconocidos)

  • Firefox: Herramientas -> Opciones -> Privacidad -> Historial -> Configuración Personalizada. Para más información, consultar el soporte de Mozilla o la Ayuda del navegador.
  • Chrome: Configuración -> Mostrar opciones avanzadas -> Privacidad -> Configuración de contenido. Para más información, consultar el soporte de Google o la Ayuda del navegador.
  • Internet Explorer: Herramientas -> Opciones de Internet -> Privacidad -> Configuración. Para más información, consultar el soporte de Microsoft o la Ayuda del navegador.
  • Safari: Preferencias -> Seguridad. Para más información, consultar el soporte de Apple o la Ayuda del navegador.

Tutorial para el diseño de Webs Adaptativas (responsive disign)

Introducción

Estamos inmersos en lo que se ha venido en llamar "la Sociedad de la Información, el Conocimiento y la Comunicación", en este sentido, toma relevancia el acceso a la información desde cualquier medio. El uso de medios móviles como las Tabletas Digitales y Teléfono Inteligentes ha proliferado en los últimos años, siendo la mayor parte del acceso a la información a través de internet mediante el uso de navegadores incorporados en estos dispositivos móviles.

La función principal de un navegador es visualizar las páginas de un sitio web. Esto hace necesario que los portales o sitios webs estén diseñados de tal manera que tanto la presentación de la información como la navegación a través de la misma sea lo más cómoda posible, rápida y con visualización aceptable.

Como los distintos dispositivos para el acceso a la información disponen de pantallas de distinto tamaño, se presenta un hándicap a la hora de visualizar las páginas webs y obtener una visualización aceptable. 

Para resolver este inconveniente existen varias soluciones: web adaptable, web móvil, aplicación móvil y web app. Aquí nos centraremos en el diseño de una web adaptable.

El objetivo de esta guía didáctica es facilitar el diseño de webs adaptativas a los alumnos de informática y  diseñadores o creadores de páginas web.

Una web adaptable es aquella donde las páginas webs se adaptan al tamaño de la ventana del navegador o al medio en el que se muestran (smartphones, tablets, smart tv, ordenador de sobremesa, portátil, etc) para una correcta visualización. 

Nuestra web deberá adaptarse a las distintas resoluciones de los dispositivos donde se van a mostrar. 
Fijándonos sólo en el ancho de la pantalla, podemos resumir las resoluciones en tres grandes grupos:

  1. Inferiores a 480px smartphon
  2. Entre 481px  y 768px 
  3. Desde 769px hasta un máximo de 1232px portatil

Utilizando adecuadamente los recursos que nos ofrecen HTML5 y CSS3 podemos diseñar webs más o menos adaptables.

Para obtener webs 100% adaptables tendríamos que apoyarnos además, en lenguajes para entornos webs como JavaScript, php, jsp, etc. Estos lenguajes disponen de instrucciones para detectar de forma más precisa la resolución de los dispositivos y proceder en consecuencia.


Recursos HTML5

El recurso más importante que nos ofrece HTML5 para nuestro diseño adaptable  es: 

            La  etiqueta meta viewport

Esta etiqueta controla el viewport de los dispositivos móviles y no afecta a los ordenadores de sobremesa.

El viewport o ventana gráfica es una región de la pantalla utilizada para mostrar una parte de la imagen total que se muestra.

viewport
Fuente:  MSDN Magazine Junio 2012

Cuando accedemos a una página web no adaptable  desde un móvil o tableta, el navegador intenta visualizar toda la página web. Si nuestra página web la hemos fijado a un ancho por ejemplo de 1000px, el navegador tratará de visualizar los 1000px en el ancho del móvil (por ejemplo un móvil con ancho de 480px).  En consecuencia, todas las partes de la página se verán muy pequeñas.

 

EjemploEjemplo de visualización de una web no adaptativa en un móvil de resolución 480px  x 800px

Si dispones de un móvil con conexión de datos, puedes comprobarlo en:

 http://responsiveweb.taboadaleon.es/normal.html

web no adaptativa en un móvil de resolución 480px  x 800px
 

 

Para ver bien la página nos vemos obligados a realizar  un zoom manual, pero ya la página se saldría de las dimensiones de la pantalla del dispositivo y tendríamos que  hacer desplazamientos de la página  para ver todas sus partes.

EjemploEjemplo de Visualización de una web no adaptativa en un móvil de resolución 480px  x 800px en el que se ha realizado un zoom manual para poder visualizar la página con más nitidez

web no adaptativa en un móvil de resolución 480px  x 800px en el que se ha realizado un zoom

 

Para evitar tener que hacer un zoom manual en nuestro dispositivo movil, utilizamos la etiqueta viewport.

La etiqueta viewport  permite  indicarle al navegador de los dispositivos las dimensiones de la página web, utilizando su propiedad contentmediante una series de atributos y valores. 

En la siguiente tabla se muestran los atributos y posibles valores de dicha propiedad content:

Atributo

Valores

Descripción

width

Pixeles o constante device-width

Define el ancho del  viewport

height

Pixeles o constante device-height

Define el alto del viewport

initial-scale

0< scale < 1

Scale=1 representa no escala

Define la escala inicial del viewport

minimum-scale

0< scale < 1

Scale=1 representa no escala

Define la escala mínima del viewport

maximum-scale

0< scale < 1

Scale=1 representa no escala

Define la escala máxima del viewport

user-scale

“yes” / “no”

Define los permisos para que el usuario pueda escalar el viewport

 

La forma habitual de configurar la etiqueta meta viewport es :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 

EjemploEjemplo de página donde hemos utilizado dicha configuración

Si dispones de un móvil con conexión de datos, puedes comprobarlo en:

http://responsiveweb.taboadaleon.es/viewport.html

vista de la web con zoom automático

El resultado es el mismo que el anterior pero el zoom realizado es automático, lo ha realizado el propio navegador.

 

Al añadir esta configuración a nuestras páginas webs, no será necesario realizar ningún zoom al visualizarlas en dispositivos móviles, pero no podemos decir que nuestra web es adaptable pues como aparece en los ejemplos, algunos contenidos se salen de la pantalla o no se posicionan correctamente.

Para una buena adaptación tendremos que recurrir a los recursos que nos ofrece CSS3 y utilizarlos en combinación con la etiqueta viewport

Para saber más

 

http://www.youtube.com/watch?feature=player_embedded&v=OP2GnAFeFTY


 

Recursos CSS3

CSS3 nos ofrece las media queries o consulta de medios como recurso principal para desarrollar diseños adaptables.

Utilizando  CSS3 Query @media

La media queries consiste en consultas que hará el navegador cada vez que visualicemos o presentemos nuestra web en un determinado dispositivo y buscará coincidencia en las condiciones que hayamos establecidos en nuestra hoja de estilos mediante la regla @media.    Tiene respaldo en la mayoría de navegadores para móviles.

Por ejemplo, las definiciones detro del bloque de la regla @media screen { ... } sólo serían interpretadas por dispositivos conectados a monitores de ordenador y los de la regla @media projection { ... } sólo se aplicaría a proyectores.

 

En la siguiente tabla aparecen los distintos medios que podemos especificar:

Medios

Dispositivo

all

todos los dispositivos de salida

aural

sintetizadores de voz

braille

presentación en dispositivos braille

embossed

salida braille

handheld

PDA (Asistentes Digitales Personales)

print

salida a una impresora

projection

presentaciones en proyectores

screen

presentación en pantallas de computadoras no-paginadas

tty

pantalla en celda de caracteres (usando una fuente de inclinación fija)

tv 

televisores

 

En nuestro caso, como estamos tratando de hacer nuestra web adaptable,  utilizamos la regla @media screen

EjemploEjemplo de codificación

@media screen and (max-width: 980px) {
    /* propiedades CSS a aplicar en ventanas de 980px o menos */
}
@media screen and (max-width: 650px) {
    /* propiedades CSS a aplicar en ventanas de 650px o menos */
}
@media screen and (max-width: 480px) {
    /* propiedades CSS a aplicar en ventanas de 480px o menos */
}

 

 

Propiedades y atributos

Otros recursos que nos ofrece CSS3 para hacer nuestra web adaptable consisten en la utilización de las propiedades de CSS3 con atributos y valores como se explica a continuación:

 Utilizar medidas relativas para los contenedores

Ejemplo

  • width: 80%;
  • margin: 0.5%;
  • padding: 1%;

Usar Contenedores globales sin float   

Hacer las imágenes y vídeos adaptables

Ejemplo

contenedor_img_adaptable img {
width: 100% !important;
height: auto
}

Hacer las Fuentes adaptables

Las unidades relativas utilizada para fuentes suelen ser el em (16px) , el rem y el %, pero la más utilizada es el rem.

El rem significa root em, que quiere decir que el cáculo hace refencia a la raíz de la página (elemento <hrml>). Al proceder de esta manera, evitamos los inconvenientes de la cascada a la hora de calcular los tamaños relativos de los caracteres.

Para ello, indicamos un valor de referencia para el elemento <html> y aplicamos los tamaños relativos en rem a todos los elementos incluidos.

Ejemplo

html {

font-size: 1em;

}

article {

 font-size: 0.8 rem;

}

¡Cuidado con IE!

Si nos encontramos con problemas en el navegador IE a la hora de cargar las reglas media queries debemos utilizar el siguiente script en el head de nuestra página:

<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->

 

Adaptar el menú de navegación

 

Esta adaptación se puede hacer de forma que aparezca un único botón   que al pulsar despliegue el menú o bien colocar las opciones una  debajo de otra como si se tratara de un menú vertical  cuando se visualice en un dispositivo móvil.

Ejemplo de menús adaptables

ejemplo de menú adaptablemenú adaptable

 

Caso Práctico Caso práctico: diseño y codificación

Para poner en práctica lo visto anteriormente vamos a diseñar una web adaptativa básica. 

Si dispones de un móvil o tablet puedes visualizar la página definitiava en    http://responsiveweb.taboadaleon.es/

El proceso más fácil, en el diseño de una web responsive, consiste en pensar en una estructura inicial para la resolución de pantalla más pequeña, basada en un contenedor general que aloja :

  • la cabecera en la parte superior,
  • un navegador horizontal o vertical según el dispositivo de visualización,
  • una zona central para la presentación de contenidos y
  • un pie en la parte inferior.

La zona central, para la presentación de contenidos, se organiza en columnas, esto va a permitir:

  • Colocar las columnas una debajo de otra sin flotación para visualizar en un móvil.
  • Colocar sólo dos columnas flotando a la izquierda y debajo la tercera columna, si se trata de visualizar la página en una tablet.
  • Y por último, colocar todas las columnas flotando a la izquierda, si se visualiza en un ordenador de sobremesa.

Esta es la base, a partir de aquí dependiendo de la estructura de la web, podemos crear más o menos columnas, ajustar sus tamaños y realizar todas la consultas de @media para que nuestra web se adapte a la gran variedad de dispositivos existentes.

El código html utilizado en los ejemplos para esta estructura es:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Ejemplo Práctico: Web Adaptable</title>

<link href="responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0;" />
</head>

<body>
<!--Contenedor principal-->
<section id="contenedor">
<!--Cabecera-->
<header>
    <div class="conten_img"><img src="xml3A.png" width="68" height="65" alt="xml"></div>
    <div id="cabecera"> <p>¡Página ejemplo de WEB ADAPTATIVA!</p><h1>CURSO DE XML</h1>
        <h2>Lenguajes de Marcas y SGI</h2>
       
	</div>
</header>
<!--Menu horizontal-->
<nav>
<ul >
	<li>
		<a href="#">Inicio</a>
	</li>
	<li>
		<a href="#">XML</a>
	</li>
	<li>
		<a href="#">XSLT</a>
    </li>
    <li>
		<a href="#">NamesSpaces</a>
    </li>
    <li>
		<a href="#">DTD</a>
    </li>
</ul>
</nav>

<!--Publicidad-->
<aside id="columna1">
<h5>Publicidad</h5>
<img src="movil.jpg" width="215" height="229" alt="movil">
</aside>
<!--Section 2-->
<section id="columna2">
<header>
<h3>¿QUÉ ES Y QUÉ NO ES XML?</h3>
</header>
    <article id="articulo1">
    <h4>¿Qué es XML? </h4>
<ul>
    <li>
      
      XML eXtensible Markup Languaje (Lenguaje de Marcado Extensible). </li>    
    
    <li>Es un lenguaje abierto, que sigue el estándar (W3 Consortium) derivado de SGML y optimizado para su uso en la WWW.
      
    </li>
    <li>Permite describir el sentido o la semántica de los datos.
      
    </li>
    <li>A diferencia de HTML, separa el contenido de la presentación.</li>
    <li>Es un Meta-Lenguaje, que permite la definición de lenguajes concretos de representación de documentos. </li>
  </ul>
    </article>
    <article id="articulo2">
    <h4>¿Qué no es XML? </h4>
    <ul>
      <li>No es una "versión mejorada de HTML"</li>
      <li>No es un lenguaje para hacer mejores páginas web</li>
      <li>No es un lenguaje sustituto de HTML</li>
      <li>No es difìcil</li>
    </ul>
    </article>
</section>

<!--Aside Recursos-->
<aside id="columna3"> 
<h4> Recursos</h4>
  
    <ol>
      <li> <a href="#">  Wc3</a></li>
      <li> <a href="#">Recurso2 </a></li>
      <li><a href="#">Recurso3 </a></li>
      
      </ol>

</aside>
<footer>
  <p>&copy; Creado por el Profesor Juan José Taboada León / enero de 2014    </p>
  <p>Caso práctico para el diseño de WEB Adaptativa</p>
  <p>Lenguajes de Marcas y SGI 1º de ASIR<br />
  </p>
</footer>
</section>


</body>
</html>

La hoja de estilos responsive.css, se ha desarrollado empezando con los estilos para móvil (me he guiado por las recomendaciones de los profesionales que se dedican a esto). Aprovechando las propiedades de estilos en cascada, se han ido adaptando las columnas, el menú, etc, para las distintas resoluciones.

La apariencia en el móvil es como se muestra en la imagen

Apariencia en un móvil

smartphonEl código CSS3 es el siguiente:

@charset "utf-8";

*{margin:0;}
body {
	background-color: #F8F8F8;
	font-family: Verdana, Geneva, sans-serif;
	
}
h1,h2,h3,h4{color:#686868;}

/*Diseño para el móvil con
ancho de la resolución <=480px 
dejamos 1 columna debajo de otra*/

#contenedor header #cabecera p {
	font-style: italic;
	color: #FF8040;
}


/*Adaptación de las fuentes*/
	body{font-size: 0.8em;}

/*Adaptación del contenedor general*/
#contenedor {
	width: 80%;
	margin: 2% auto 2% auto;
	padding: 2%;
	border: thin solid #696969;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	background-color: #FFF;
}
#contenedor header {
	padding: 3px;
	background-color: #FFFFFF;
	border-radius: 10px 10px 0 0;
	
}
#contenedor header .conten_img {
	margin:0px 0px 0px 10px ;
	float: left;
}

/*Adaptación de la imagen*/
#contenedor #columna1 img {
	width:100% !important;
	height: auto;
	
}	
	
	
#contenedor header #cabecera {
	text-align: center;
	padding: 10px;
	color: #DADEEF;
	
}

/* Adaptación del menú */
#contenedor nav {
	margin-top: 5px;
	background-color: #F0F0F0;
	border-top-width: thin;
	border-right-width: 0;
	border-bottom-width: thin;
	border-left-width: 0;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #A0A0A0;
	border-left-color: #CCC;
	
}
#contenedor nav ul {
	list-style-type: none;
	margin-left: -40px;
}
#contenedor nav ul li {
	
	padding: 3px;
	border: thin solid #BEBEBE;
	margin: 1px auto 1px auto;
	text-align: center;
	border-radius:5px;
	background-color: #B0B0FF;
	
	
}
#contenedor nav ul li a {
	color: #757575;
	text-decoration: none;
}

#contenedor nav ul li a:hover {
			background: #4b545f;
			background: linear-gradient(#4f5964 0%, #5f6975 40%);
			background: -moz-linear-gradient(#4f5964 0%, #5f6975 40%);
			background: -webkit-linear-gradient(#4f5964 0%,#5f6975 40%);
			
			border-radius:7px;
			color: #fff;
		}

/* COLUMNAS */
#contenedor #columna1 {
	box-sizing:border-box;
	width: 90%;
	border: thin solid #CECECE;
	background-color: #F6F6F6;
	padding: 2%;
	margin-top: 20px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	
}
#contenedor #columna2 {
	box-sizing:border-box;
	padding: 2%;
	width: 90%;
	margin-top: 20px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-bottom:20px;
}
#contenedor #columna2 header h3 {
	text-align: center;
	background-color: #E9E9E9;
	color: #686868;
	margin-bottom: 10px;
}

#contenedor #columna3 {
	box-sizing:border-box;

	width: 90%;
	border: thin dotted #A3A3A3;
	background-color: #F6F6F6;
	padding: 5px;
	margin-top: 20px;
	margin-bottom:20px;
	border-radius:5px;
	margin-right: auto;
	margin-left: auto;
	clear:both;
}
#contenedor footer {
	clear: both;
	height: 50px;
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #515151;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	background-color: #F6F6F6;
	font-style: italic;
	text-align: center;
	border-radius: 0 0 10px 10px;
	padding-top: 40px;
		
}

Ahora diseñamos la estructura para una Tablet con vista vertical

Apariencia en una tablet

 

y los estilos para la tablet son:

/*Adaptación para tabletas con
ancho de la resolución >=480px 
Estructura:
cabecera
menu
columna1 columna2
columa3
pie*/


@media only screen and (min-width: 480px){

/*Adaptación del contenedor general*/	
#contenedor {
	width: 80%;
	margin: 2% auto 2% auto;
	padding: 5px;
	border: thin solid #696969;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	background-color: #FFF;
}

/*Adaptación del menú*/
#contenedor nav ul li {
	display: inline-block;
	padding: 3px;
	border: none;
	margin: 0px;
	background-color: #F0F0F0;
	text-align: left;
	
	
	
}
/*Adaptación de las columnas*/	
#contenedor #columna1 {
	width: 45%;;
	padding: 2%;
	margin-top: 40px;
	float:left;
}	
	
	
#contenedor #columna2 {
	
	padding: 2%;
	width: 45%;
	margin-top: 40px;
	float:left;
}

#contenedor #columna3 {
	
	width: 90%;
	padding:2%;
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	float:none;
	margin-bottom:20px;
}
	}

 

A continuación, diseñamos la estructura para un ordenador de sobremesa

Apariencia en un ordeanador de sobremesa

 


 

portatily por último, los estilos:

/*Adaptación para ordenadores de escritorio con
ancho de la resolución >=769px 
Estructura:
	cabecera
	menu
	columna1 columna2 columa3
	pie
*/
	
@media only screen and (min-width: 769px){

/*Adaptación del contenedor general*/	
#contenedor {
	width: 80%;
	margin: 5px auto 5px auto;
	padding: 5px;
	border: thin solid #696969;
	border-radius: 10px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	background-color: #FFF;
}

/*Adaptación de las columnas*/	
#contenedor #columna1 {
	
	width: 20%;
	padding: 3px;
	margin-top: 40px;
	float:left;
}	
	
	
#contenedor #columna2 {
	padding: 3px;
	width: 49%;
	margin-top: 40px;
	float: left;
		margin-bottom: 40px;
}

#contenedor #columna3 {
	width: 20%;
	padding: 3px;
	/*margin-top: 40px;*/
	float: right;
	
	clear:none;
	
}

/*Adaptación de las fuentes*/
	body{font-size: 12px;}	


	}

/* Final de la hoja de estilos */

Podemos emular el resultado para distintas resoluciones en la siguiente dirección

http://quirktools.com/screenfly/ , colocando en la url de prueba:  http://responsiveweb.taboadaleon.es/

Aunque lo mejor es probarlo directamente en el dispositivo móvil.

 

 

ActividadesActividades: Web adaptable (responsive design)

  1. Desde un ordenador de sobremesa accede a la web responsive del ejemplo http://responsiveweb.taboadaleon.es/ y redimensiona la ventana a distintos tamaños para observar los cambios que se producen en la página web.
  2. Teniendo en cuenta el código del apartado Caso Práctico Diseño y codificación de los ejemplos :
    1. Localiza en el código html de la página index.html la etiqueta meta viwport y fijate en los valores de los atributos.
    2. Localiza en el código de la hoja de estilos las medias query para los distintos dispositivos y anótalos.
  3. A partir de los contenidos desarrollados aquí y visitiando otras webs que trantan sobre el diseño de web adaptativa, crea una infografía con el proceo para crear una web adaptativa.
  4. Crea una nueva web o adapta la web que has creado desde el principio de curso para que sea adaptable (Hay que adaptar todas las páginas de la web):
    1. Visualiza tu web en distintos navegadores y dispositivos comprobando que se presenta correctamente. Si no se ve correctamente realiza los cambios necesarios.
    2. Realiza cambios en los valores que aparecen en la etiqueta viwport y en las medias query y comprueba el resultado.