Algún tutorial de diseño web responsivo para MUY torpes?

[akualung]

Buenas. Me han encargado hacer una web de tipo responsivo (en adelante RWD), que se adapte a la pantalla de un smartphone, tablet o pc de escritorio. Llevo ya bastantes días mirando tutoriales por ahí pero busco alguno que sirva para crear algo desde cero. Me he estado mirando frameworks como foundation, etc, y se me hacen bastante raros de usar, no sé si es porque primero tendría que dominar más los conceptos del RWD. aparte, he mirado de utilizar html5 ya que se dice que para el RWD va mejor y es más amigable con el tema seo, pero lo he dejado correr y la haré en xhtml1 porque la mayoria de gente ni sabe aún para qué sirve cada etiqueta y no hay mucho consenso (lo dejo para más adelante cuando tenga más experiencia en RWD o para una segunda versión de la web). Es que al final no hago más que saltar de tutorial en tutorial y eso me ha hecho consumir tiempo innecesariamente (no quiero ponerme en serio a hacerla hasta que tenga los conceptos bien claros).

Pues eso, algún manual / tutorial para MUUUUUY lerdos, por favor? :o

Gracias muchas.


Ah, se me olvidaba: estoy consultando el libro "head first: mobile web" y está bastante bien y me ha ayudado mucho, pero es relativamente largo y no tendría tiempo de leerme el libro entero.

[Malenko]

Prueba a buscar información sobre el bootstrap de twitter ;)

[josepzin]

Tema pendiente que quiero mirar para cuando tenga tiempo!

He visto algún video de Mejorandola:


http://www.youtube.com/watch?v=x5T6Pf4lRf0


http://www.youtube.com/watch?v=7g8_vtLFBMw


http://www.youtube.com/watch?v=_-_Jfx6LH0w

[akualung]

Muchísimas gracias, me pongo a ello. Es que soy totalmente novato en este tema (y de hecho tampoco es que esté muy ducho en temas de maquetación web en general. Yo maquetaba webs cuando aún se hacía con tablas y justo estaba empezando a cambiarse todo eso por divs+css, pero lo dejé ahí y me fui más hacia el apartado backend).

[josepzin]

Recuerda que el tema responsive es cosa del CSS, el HTML en principio no cambia.

[akualung]

Recuerda que el tema responsive es cosa del CSS, el HTML en principio no cambia.

Si, exacto, pero luego hay otras cosas que no me quedan del todo claras, como por ejemplo: si en la versión de escritorio quieres que al clickar en los menús aparezcan submenús a base de jquery, pero en la versión de móvil no, eso cómo se haría? Porque hasta donde yo he visto, con los media queries de css no puedes controlar si tal efecto de jquery se activa o no según la resolución.

He leído en el libro que mencionaba antes que, para conseguir ese efecto, hay que implementar un breakpoint con javascript y, entonces sí puedes decir "a una resolución mayor a XXXpx haces que los menús, al clickarlos, te muestren submenús.". Pero no sé, lo encuentro chapucero, porque en mi opinión eso te obliga a "hardcodear" valores, es decir: has de tener un breakpoint en el código css a, digamos, 480px, y otro en el código javascript también a 480px, y entonces puede pasar que un día tengas que cambiar ese valor (yo que se, te viene el cliente y te dice "mira, ahora no quiero que el diseño cambie a 480 sino a 495") y entonces te pasa lo típico de que lo cambias en el css pero te olvidas en el javascript, o al revés.

Igual son mas bien paranoias mías y estoy sobre-analizando demasiado y en el fondo es todo más sencillo, pero no sé.

[josepzin]

Si, exacto, pero luego hay otras cosas que no me quedan del todo claras, como por ejemplo: si en la versión de escritorio quieres que al clickar en los menús aparezcan submenús a base de jquery, pero en la versión de móvil no, eso cómo se haría? Porque hasta donde yo he visto, con los media queries de css no puedes controlar si tal efecto de jquery se activa o no según la resolución.

Si, aquí tienes razón. En principio para ajustar tamaños y esas cosas no necesitas tocar el HTML pero si quieres hacer otras cosas, por ejemplo tener las imagenes a una escala distinta o cargar javascript según la plataforma, entonces hay que detectar antes. Eso todavía no lo he mirado, pero desde PHP puedes saber lo mismo que sabe CSS.



He leído en el libro que mencionaba antes que, para conseguir ese efecto, hay que implementar un breakpoint con javascript y, entonces sí puedes decir "a una resolución mayor a XXXpx haces que los menús, al clickarlos, te muestren submenús.". Pero no sé, lo encuentro chapucero, porque en mi opinión eso te obliga a "hardcodear" valores, es decir: has de tener un breakpoint en el código css a, digamos, 480px, y otro en el código javascript también a 480px, y entonces puede pasar que un día tengas que cambiar ese valor (yo que se, te viene el cliente y te dice "mira, ahora no quiero que el diseño cambie a 480 sino a 495") y entonces te pasa lo típico de que lo cambias en el css pero te olvidas en el javascript, o al revés.

Igual son mas bien paranoias mías y estoy sobre-analizando demasiado y en el fondo es todo más sencillo, pero no sé.

Ahi ya no he llegado asi que no puedo aportar nada...
Pero sí te puedo decir que para hacer el responsive a medida hay que cobrar un extra importante para poder contemplar todas las variaciones.

[enkonsierto]

Responsivo? Eso no existe. Mejor dí receptivo o sensible.

Si no estás muy puesto con el tema css, ponte las pilas primero con el css puro que el salto a la maquetación responsive son dos tonterías. Las dudas que tienes son dudas de css. Y lo dicho, mucho te tiene que pagar un cliente para hacer un diseño que vaya perfecto en todos los navegadores y a todos los tamaños, así que me reafirmo. A empollar css lo primero.

[^MiSaTo^]

Si, exacto, pero luego hay otras cosas que no me quedan del todo claras, como por ejemplo: si en la versión de escritorio quieres que al clickar en los menús aparezcan submenús a base de jquery, pero en la versión de móvil no, eso cómo se haría? Porque hasta donde yo he visto, con los media queries de css no puedes controlar si tal efecto de jquery se activa o no según la resolución.

Y eso no puedes hacerlo teniendo en cuenta el user-agent y demás del navegador que use el cliente? Amos yo no he hecho nunca webs así y hace bastante que no me dedico a web, pero es lo primero que se me viene a la mente, mirar el user-agent (no se si se llama así ahora mismo), el identificador de qué navegador y OS está usando el cliente y si es Android/iOS/WP entonces haces X y sino pues Y.

[romeroca]

Como han dicho en otros mensajes primero mírate el CSS 2 / CSS 3.

Para evitar el uso de user-agent, podrías usar "CSS Media Queries", pero sólo lo soportan algunos navegadores, aunque con un script puedes hacer que funcione en prácticamente cualquier navegador.

[^MiSaTo^]

Como han dicho en otros mensajes primero mírate el CSS 2 / CSS 3.

Para evitar el uso de user-agent, podrías usar "CSS Media Queries", pero sólo lo soportan algunos navegadores, aunque con un script puedes hacer que funcione en prácticamente cualquier navegador.

Eso de CSS Media Queries que es, de CSS3? Porque no me suena de nada XDD Claro que como digo llevo 3-4 años sin tocar nada de web (quitando alguna cosilla puntual muy pequeña)

[akualung]

Eso de CSS Media Queries que es, de CSS3? Porque no me suena de nada XDD Claro que como digo llevo 3-4 años sin tocar nada de web (quitando alguna cosilla puntual muy pequeña)

Son los que se usaban en CSS2 para catalogar un conjunto de reglas css como reglas para pantalla, reglas para imprimir, (@media screen, @media print...)pero las han extendido en CSS3 para que acepten una suerte de condicionales, como por ejemplo que la anchura de la pantalla sea de X o Y tamaño (@media screen and (min-width: 300px)) etc. Esta bien pero en mi opinión es lo mismo, meter un parche sobre otro. Además es de lo que me quejaba antes: solo sirve, hasta donde yo sé, para css, pero si quieres hacer otras cosas como que se cargue determinado comportamiento de jquery,etc, ya tienes que hacer otras cosas que vienen a ser lo mismo, con lo que tienes "código duplicado", etc.

El otro dia retoqué el cutre-cuestionario de java que hice para practicar jquery, y le metí un media query en los estilos para probar. Supongo que ya lo habrás visto en más webs, si redimensionas la ventana, al llegar a un tamaño determinado, se hace la letra más grande, se amplía un poco la altura del botón de abajo para que sea más fácil de clicar en un smartphone, etc (está todavía bastante "work-in-progress", por eso, jeje).

carlosfernandez.260mb.org/javaranch/javaranch.htm

[^MiSaTo^]

Son los que se usaban en CSS2 para catalogar un conjunto de reglas css como reglas para pantalla, reglas para imprimir, (@media screen, @media print...)pero las han extendido en CSS3 para que acepten una suerte de condicionales, como por ejemplo que la anchura de la pantalla sea de X o Y tamaño (@media screen and (min-width: 300px)) etc. Esta bien pero en mi opinión es lo mismo, meter un parche sobre otro. Además es de lo que me quejaba antes: solo sirve, hasta donde yo sé, para css, pero si quieres hacer otras cosas como que se cargue determinado comportamiento de jquery,etc, ya tienes que hacer otras cosas que vienen a ser lo mismo, con lo que tienes "código duplicado", etc.

El otro dia retoqué el cutre-cuestionario de java que hice para practicar jquery, y le metí un media query en los estilos para probar. Supongo que ya lo habrás visto en más webs, si redimensionas la ventana, al llegar a un tamaño determinado, se hace la letra más grande, se amplía un poco la altura del botón de abajo para que sea más fácil de clicar en un smartphone, etc (está todavía bastante "work-in-progress", por eso, jeje).

carlosfernandez.260mb.org/javaranch/javaranch.htm

Ah! gracias pues no lo he usado nunca la verdad :) Y mucho menos sabía que lo de @media y demás se llamaba así xDDDDDDD

[amkam]

Hace poco en genbetadev han hablado de esto:

http://www.genbetadev.com/tag/introduccion-al-responsive-design
http://www.genbetadev.com/desarrollo-web/responsive-design-puesta-en-marcha