DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
17-10-2013

Uno de los grandes retos para los diseñadores web es lograr adaptar las aplicaciones web para que se visualice correctamente en la inmensa cantidad de dispositivos que cuentan con un navegador web incorporado; ustedes se podrian preguntar ¿porque es esto tan importante?, la respuesta a esta pregunta reside en el hecho de que el tráfico móvil engulle más del 17% y se prevé que esta cifra seguirá en aumento.

El diseño web responsivo nos permite adaptar nuestras aplicaciones web a distintos tamaños de pantalla (PC, tablet, teléfonos inteligentes, televisores, etc) aplicando solo CSS (o casi todo); sin la necesidad de crear una página para cada dispositivo o tamaño de pantalla.

Básicamente debemos de adaptar todo el contenido en una pagina web para que se vea "bien" en todos los dispositivos, sin que aparezca el muy molesta scroll horizontal; es decir se reajusta el contenido de toda la página web.

En esta técnica utilizamos principalmente los media queries y tamaños de los elementos en porcentajes, todo con CSS (o casi todo); los media queries nos permite activar y desactivar secciones del CSS según el tamaño de pantalla; nos permite definir nuevos estilos al sitio para ajustarse a las diferentes resoluciones de pantalla:

@media screen and (max-width: 1024px) {
/* ventanas de menos de 1024px */
}
@media screen and (max-width: 480px) {
/* ventanas de menos de 480px */
}
@media screen and (max-width: 320px) {
/* ventanas de menos de 320px */
}

Publicidad

Give me for a beer!

Algunos artículos que te pueden interesar

¿Cómo mostrar páginas web con WebView en Android?

¿Cómo mostrar páginas web con WebView en Android?

La clase WebView permite mostrar páginas web dentro de una aplicación Android.

Andrés Cruz 19-02-2015

Dibujando nuestro propios SVG en HTML (parte 1)

Dibujando nuestro propios SVG en HTML (parte 1)

Un SVG no es más que un XML que describe como dibujar gráficos vectoriales en dos dimensiones y con HTML se ha hecho posible dibujarlos; en esta entrada veremos cómo dibujar formas básicas SVGs a través del elemento svg, definir estilo y sus atributos.

Andrés Cruz 11-05-2015

Api.ai, el asistente de voz para aplicaciones y dispositivos móviles echa a tu medida

Api.ai, el asistente de voz para aplicaciones y dispositivos móviles echa a tu medida

Api.ai es un asistente de voz que permite crear nuestros propios asistentes de voz mediante las SDKs para Android, IOS y Web.

Andrés Cruz 01-10-2014