Está en la página 1de 10

UNIVERSIDAD TECNOLOGICA DE TECAMAC

Desarrollo de Aplicaciones web



Alumna: Ana Bertha soriano Bernal

Profesor: Juan Francisco Alfonso Arteaga

Manual de responsive

Grupo: 3TIC3






QU ES EL DISEO RESPONSIVE?
El diseo web responsive o diseo web adaptativo es una tcnica de diseo web
que prioriza la correcta visualizacin de una misma pgina en distintos
dispositivos: Desde ordenadores de escritorio a tablets o mviles.
El diseo responsive se basa en proporcionar a todos los usuarios de una web los
mismos contenidos y una experiencia de usuario lo ms similar posible, frente a
otras aproximaciones al desarrollo web mvil como la creacin de App, el cambio
de dominio o webs servidas dinmicamente en funcin del dispositivo.
Aunque todas tienen pros y contras, la web responsive es considerada por
muchos expertos como la mejor prctica posible, al unificar la web, reducir tiempos
de desarrollo y ofrecer grandes ventajas para SEO mvil.

POSTS RELACIONADOS

DISEO RESPONSIVE, EL ADIS DEFINITIVO A LAS WEBS SEPARADAS
PARA MVILES

Por qu debes usarlo?
Vindolo desde un lado de costes, deberamos plantear el diseo responsive
desde el inicio del proyecto, ya que permitira ahorrar hasta un 60% el coste de
adaptacin posterior. Adems, dependiendo de la web que tengamos, puede ser
altamente complejo adaptar nuestra web a este tipo de diseo en el futuro. Te
recomendara que si ests pensando en este tipo de diseo, te plantees un
rediseo total para poder planificar bien el diseo en base a los diferentes
dispositivos.
Viva la web semntica. Diseo Responsive y
HTML5
Diseo responsive es sinnimo de HTML5.
Bsicamente lo que HTML5 nos ha facilitado es poder tener una mayor definicin
de elementos. Antes, solamente tenamos listas, prrafos, capas, tablas ahora
sin embargo, gracias a HTML5 tenemos recetas, productos, noticias, etc. Esto es
la web semntica y nos permite mejorar la estructura a nivel de cdigo, por lo que
mejorar el entendimiento que tienen los buscadores de nuestra web.


PREPARA TU PHOTOSHOP PARA DISEO WEB


Trucos sencillos para optimizar Photoshop y convertirlo en una herramienta muy
(muy) poderosa para disear cualquier web.

ltimamente se cuestiona mucho que Photoshop sea la mejor herramienta para el
diseo web. Es cierto que otras aplicaciones han aparecido en los ltimos aos,
como Sketch o EdgeReflow, mejor preparados para los nuevos estndares de la
web, y que el gigante de Adobe no ha sabido adaptarse.




Tamao
En nuestro caso solemos trabajar con frameworksresponsive como Bootstrap,
cuyo contenedor en su versin 3.0 es de: 1170px para escritorios grandes, 970px
para escritorios pequeos y 750px para tabletas, con un gutter, o espacio entre
columnas, de 30px, 15px a cada lado. Si quieres ms info al respecto, mira
la documentacin de Bootstrap.
Por lo tanto para crear un documento en el que podamos trabajar con estas
medidas es necesario un espacio de trabajo ms grande, as que pongamos
1300px de ancho, por ejemplo. La altura depender de lo larga que sea la web
que estemos diseado, pero con 2000px o 3000px tendremos para empezar. Con
estas configuraciones tendremos nuestro espacio de trabajo listo para empezar:




Guas
Para trabajar en web es fundamental el uso de guas para alinear nuestro
contenido, sobre todo si luego vamos a desarrollar en Bootstrap.
Desgraciadamente, la gestin de guas del propio Photoshop deja bastante que
desear, pero por suerte existe Guideguide, un plugin gratuito con el cual crear tus
guas y columnas de forma facilsima:




Ajustar
Photoshop resulta bastante frustrante a la hora de colocar los elementos con
exactitud. Eso se debe a que muchas opciones de ajuste automtico estn
desactivadas por defecto. Lo ideal es activarlas:
View Snap (actvalo)
View Snap To All
Photoshop Preferences General Snap Vector Tools and Transforms
to Pixel Grid (actvalo)
Y por ltimo, cuando utilices cualquier herramienta vectorial (Line tool,
Rectangletool) recuerda activar en la barra de opciones la opcin
AlignEdges


Exportar
Ya tienes tu web diseada, pero ahora necesitas exportar los diferentes
elementos para mandrselos al desarrollador. Esto puede ser una tarea
tediosa si no la optimizamos. Existen varios plugins interesantes para ayudarte,
como Cutandslice.
Otra opcin ms sencilla es crearte una accin dentro del propio Photoshop
para exportar elementos por separado con una simple combinacin de
teclas. En nuestro caso, tenemos una accin en la que pulsando F5 Photoshop
nos exporta el elemento seleccionado recortndolo al tamao que tenga, utilsimo.
Si quieres usarlo, descrgatelo grtis e instlalo en tu Photoshop.

Imgenes Responsive
Primero definamos como se ha de tratar las imgenes en el RWD.
En una maquetacin que se ajuste a los principios del Responsive Web Design las imgenes
no tienen tamao y se adaptan al tamao de su capa contenedora. Eso quiere
decir que si la capa crece la imagen crece y si la capa disminuye la imagen tambin. Pero que
pasa cuando una imagen la haces mas grande que su tamao original?, pues que pierde calidad,
desenfocndose. Por ello la mejor solucin es elmax-width que nos permite definir un ancho
mximo a nuestras imgenes.
img {max-width: 100%; height: auto;}
Para las versiones de Explorer (ie6, ie7) que no son capaces de leer max-width (como no) hay
que especificarles un ancho img {width:100%}

Problema de la imagen en el RWD
Qu ocurre cuando cargamos una imagen pensada para una definicin de
pantalla de 1024px en una pantalla de 320px?

Que se producen 2 problemas.

El peso. Si la imagen pesa 120 kb a 1024px, pesa lo mismo a 320px. La
velocidad de carga de una imagen en un dispositivo mvil es un verdadero
problema y hace que nuestra web no sea todo lo Responsive que
queremos.Cual es la solucin?
A nivel conceptual es que cada imagen tenga de 3 a 5 resoluciones diferentes
y que segn la definicin de pantalla del dispositivo cargue una u otra.
A nivel prctico eso es ms difcil. A da de hoy no existe un sistema que no
tenga problemas de dependencia. El HTML5 o CSS3 no tienen ninguna etiqueta
que resuelva este problema. Se esta trabajando en ello en W3C y
hay propuestas interesantes pero an esta muy verde. La que ms apoyo ha
tendido ha sido la de crear un tag nuevo basado en el actual tag <video> que
sea <picture>.

<picture alt="Texto alt de la imagen responsive">
<source src="mobile.jpg" />
<source src="large.jpg" media="min-width: 600px" />
<img src="mobile.jpg" />
</picture>

Complementos para visualizar los dispositivos

Esta vez he querido compartirles un par de herramientas para probar nuestros sitios Web
Responsive, ya que muchos desarrolladores no tenemos la posibilidad de tener en nuestras
manos Smartphones o Tables de diferentes fabricantes y tamaos la mejor alternativa es usar
herramientas online o extensiones del navegador que emulen estos dispositivos y nos
permitan hacer test de nuestro diseo Responsive.
Herramientas online:
The responsinator: Esta web nos permite probar los media queries definidos para diferentes
smartphones y tablets, permite ver la web al mismo tiempo en pantallas que van desde
240X320 pixeles hasta 1024768 pixeles, su gran desventaja es que no permite emular el
navegador de cada plataforma. sin embargo es genial para mostrarle la web en vivo al cliente.
Matt Kersley Responsive: su nica ventaja en comparacin con The responsinator es que nos
permite ver los diferentes tamaos de dispositivos en linea horizontal, esto ayuda a encontrar
posibles errores de una manera fcil.
Screenqueri: Esta herramienta es mas completa que las dos anteriores aunque no emula
directamente los navegadores de los dispositivos tiene un listado muy completo de
smartphones y tablets incluyendo Blackberry, Sony Xperia, HTC y Motorola.
IpadPeek: Con IpadPeek podemos ver como se comporta nuestro diseo en los dispositivos
de Apple la mayor ventaja es que muestra de manera muy real el diseo del dispositivo junto
con el espacio que ocupa la barra del navegador web y el teclado qwerty.
MobilePhoneEmulator: Esta herramienta posee muy buenas opciones y permite configurar el
tamao de las pantallas en pulgadas, tambin permite elegir dentro de diferentes modelos de
telfonos y recomienda hacer test en los otros navegadores web.
Herramientas Offline o extensiones:
Window Resizer: Es una extensin para Chrome y con ella es posible
redimensionar la ventana del navegador con los diferentes tamaos de pantalla de
dispositivos, permite personalizar tamaos de resoluciones y ordenarlos a nuestro
gusto, su nica desventaja es que no permite probar de manera facil cuando el
dispositivo esta de manera horizontal (landscape), para Mozilla Firefox existe L-
Square
Viewport (Responsive testing tool): Otra extensin para Chrome, funciona como
Window Resizer solo que a diferencia esta permite ver ambas vistas, horizontal
(landscape) y vertical (portrait).
Chrome Developer Tools:Esta es la forma mas sencilla y personalizable que
existe sin que sea necesario instalar una extensin, basta con abrir las
Herramientas para desarrolladores de Google Chrome (CTRL+MAYUS+I), hacer
clic en el pion que aparece en la parte derecha inferior ir a Overrides y
personalizar las versiones del navegador y la resolucin del dispositivo.


Paso 1. Metatag (ver demo)
La mayora de los navegadores para mviles escalan las pginas HTML para que
se adapte a la pantalla, puedes usar la etiqueta viewport para resetear esto. Esta
etiqueta le dice al navegador que use una determinada anchura, desactivando la
escala inicial. Este cdigo debes incluirlo dentro de la etiqueta.

<meta name="viewport" content="width=devicewidth, initialscale=1.0" />
Pero Internet Explorer como siempre dando la lata. Internet Explorer 8 no soporta
media-queries, por lo que tendremos que darle soporte por javascript,
usando media-queries.js o respond.js. Incluiremos esta lnea en nuestro cdigo
HTML:

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

Paso 2. Estructura HTML
Como podis ver, en este ejemplo se muestra una simple estructura con un
header, contenedor content, sidebar y un footer. El header es fixed y tiene una
altura de 180px. El contenedor content tiene una anchura de 600px y la barra
lateral de 300px.


Paso 3. CSS Media-queries.
CSS3 media query es la clave para un diseo responsive. Le dice al navegador
como renderizar la pgina para especficas anchuras. Las siguientes reglas sern
efectivas en una anchura de 980px o menos. Simplemente se cambia el valor de
la anchura del container de pxel a porcentaje, por lo que los contenedores fluirn,
en vez de estar estticos.

/* para 980px o menos */</code>

#pagewrap {

width: 94%:
}

#content {

width: 65%;
}

#sidebar {

width: 30%;
}
Para el viewport de 700px o menos el #content y #sidebar pasa a una anchura
auto y se elimina el float as tendr una anchura completa, al 100%.

/* para 700px o menos. Con auto width se hace un reset al container. */
#content {</code>

width: auto;
float: none;
}

#sidebar {

width: auto;
float: none;
}
Para 480px o menos resetea el #header a auto, cambia la fuente h1 a 24px y
esconde la barra lateral:

/* para 480px o menos */
#header {</code>

height: auto;
}

h1 {

font-size: 24px;
}

#sidebar {

display: none;
}