Re: [Ovillo] Problemas con las dichosas resoluciones
Hola, otro factor importante que plantean en css-tricks es que no siempre la Resolución de pantalla es igual al tamaño de la ventana del navegador. Es una interesante lectura, que nos puede abrir la mente un montón. http://css-tricks.com/9778-screen-resolution-notequalto-browser-window/ -- Docente tutor - Soporte Conocimiento Virtual Academia www.ConocimientoVirtual.edu.co www.PixelTelevision.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con las dichosas resoluciones
Muchas gracias a todos, ire leyendo poco a poco lo que me han dejado aca y vere si logro hacer una web decente !!! Saludos Ing. Reynier Pérez Mira Cel: +58 416.921.7406 / 416.012.1226 Twitter: twitter.com/reypm Correo: reynie...@gmail.com / reynie...@hotmail.com / reynie...@yahoo.com 2011/6/7 Eddie cartilagosangrie...@gmail.com Hola, Con los mediaqueries defines estilos para los elementos de tu sitio en dependencia de rangos específicos del ancho del navegador. Por ejemplo, puedes declarar que tu #header tenga un ancho de 760px para un ancho del navegador menor a los 900px, luego declarar que tenga 960px de ancho para cuando el navegador esté entre los 900px y 1200px y al final que tenga unos 1100px de ancho para cuando el ancho del navegador sea mayor a los 1200px. Todo se hace en el CSS y como mismo cambias el width puedes cambiar cualquier otra propiedad. El único problema que le veo es que IE no lo reconoce :) pero muestra el diseño que utilizes por defecto. Por otro lado está respond.js ( https://github.com/scottjehl/Respond ) para que IE los soporte. No soy un experto en esto ni mucho menos, solo que he estado experimentando y ya lo implementé en una aplicación que estoy haciendo. Con esto de las mediaqueries puedes optimizar un mismo sitio para diferentes dispositivos sólo con CSS. Ah! también se pueden incluir estilos específicos para pantallas retina como las del iPhone 4! :) Gracias por los links que compartiste. Agrego este: http://lessframework.com/ Saludos! -- Eddie ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con las dichosas resoluciones
Hola, Aprovecho la pregunta de mi vecino venezolano para preguntar por el uso de mediaqueries en CSS, lo que he visto es que hacen lo mismo que plantea, pero en vez de usar un script de javascript usa puro css, me dejó deslumbrado la página http://www.cacaotour.com/ y muchos otros que se han registrado en el sitio http://mediaqueri.es/ Técnicamente lo que he entendido es que se pueden usar reglas condicionales en nuestro archivo CSS de manera que cuando se cumple con un a condición particular se aplica un conjunto de criterios en CSS y si no (o cumple con otra) se aplican otros. Al parecer el primer artículo sobre el tema apareció en A list apart hace como un año http://www.alistapart.com/articles/responsive-web-design/ pero poco a poco se encuentran más tutoriales sobre como hacerlo: http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ El tema que más me ha costado trabajo es tener la claridad sobre como fluye el diseño en la media en que cambia el tamaño de la pantalla. De lo que he entendido hay que pensar en que momento los elementos flotan a un lado y cuando se ponen debajo (o encima) ocupando el 100% del ancho. No sé si alguien tiene una metodología para hacer eso De lo que veo sobre el script adapt.js y la forma en que trabajan los mediaqueries creo que es el mismo principio, pero en el caso de mediaqueries es el mismo CSS el que toma las decisiones lo que me parece que es más adecuado, Germán El 6 de junio de 2011 22:13, reynie...@gmail.com reynie...@gmail.comescribió: Buenas noches a todos: Este es un tema super discutido aca y al cual he estado muy atento pero algo estoy haciendo mal pues por mas que intento no lo logro. Resulta que estoy trabajando con 960.gs y con el script adapt.js que lo unico que hace es cambiar las hojas de estilo en base a la resolucion del monitor. Pues bien mi monitor es de 22 por lo que la resolucion es de 1920 x 1080 y todo se ve semiperfecto (pues el contenido no cubre el 100% del contenedor y en lo personal veo demasiado espacio en blanco). Cuando redimensiono la ventana del navegador a 800x600 o 1024x768 usando la extension WebDeveloper de FF hay es cuando se forma la linda xq todo se encoge y no cabe y se deforma todo el contenido. Como le hacen ustedes para estos temas? Saludos y desde ya muchas gracias Ing. Reynier Pérez Mira Cel: +58 416.921.7406 / 416.012.1226 Twitter: twitter.com/reypm Correo: reynie...@gmail.com / reynie...@hotmail.com / reynie...@yahoo.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- *Germán Bustos* Asesor en estrategias de comunicación en Internet para organizaciones sociales http://atarraya.org http://germanbustos.com Tel: (+57) 3177381339 *Nuevo (+57) 3162846379* http://atarraya.org/ http://germanbustos.com/ http://www.facebook.com/german.bustos http://twitter.com/kommodin http://www.linkedin.com/in/germanbustos ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con las dichosas resoluciones
Hola, Con los mediaqueries defines estilos para los elementos de tu sitio en dependencia de rangos específicos del ancho del navegador. Por ejemplo, puedes declarar que tu #header tenga un ancho de 760px para un ancho del navegador menor a los 900px, luego declarar que tenga 960px de ancho para cuando el navegador esté entre los 900px y 1200px y al final que tenga unos 1100px de ancho para cuando el ancho del navegador sea mayor a los 1200px. Todo se hace en el CSS y como mismo cambias el width puedes cambiar cualquier otra propiedad. El único problema que le veo es que IE no lo reconoce :) pero muestra el diseño que utilizes por defecto. Por otro lado está respond.js ( https://github.com/scottjehl/Respond ) para que IE los soporte. No soy un experto en esto ni mucho menos, solo que he estado experimentando y ya lo implementé en una aplicación que estoy haciendo. Con esto de las mediaqueries puedes optimizar un mismo sitio para diferentes dispositivos sólo con CSS. Ah! también se pueden incluir estilos específicos para pantallas retina como las del iPhone 4! :) Gracias por los links que compartiste. Agrego este: http://lessframework.com/ Saludos! -- Eddie ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problemas con las dichosas resoluciones
Buenas noches a todos: Este es un tema super discutido aca y al cual he estado muy atento pero algo estoy haciendo mal pues por mas que intento no lo logro. Resulta que estoy trabajando con 960.gs y con el script adapt.js que lo unico que hace es cambiar las hojas de estilo en base a la resolucion del monitor. Pues bien mi monitor es de 22 por lo que la resolucion es de 1920 x 1080 y todo se ve semiperfecto (pues el contenido no cubre el 100% del contenedor y en lo personal veo demasiado espacio en blanco). Cuando redimensiono la ventana del navegador a 800x600 o 1024x768 usando la extension WebDeveloper de FF hay es cuando se forma la linda xq todo se encoge y no cabe y se deforma todo el contenido. Como le hacen ustedes para estos temas? Saludos y desde ya muchas gracias Ing. Reynier Pérez Mira Cel: +58 416.921.7406 / 416.012.1226 Twitter: twitter.com/reypm Correo: reynie...@gmail.com / reynie...@hotmail.com / reynie...@yahoo.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
