Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Venga, va, la última vez que explico el escenario: Ante todo, disculpa si no he sabido entenderte, y no te impacientes tanto, pero se me hizo muy cuesta arriba seguirte la idea de fondo: cuando te enfocabas en detalles secundarios, yo también intentaba solucionar esos detalles secundarios. Por favor, prueba a ver si esto resuelve tu acertijo :-) http://www.saberweb.com.ar/emsencolumnas/index.html He tomado la idea de un min-width en pixeles y un max-width en EM que aplicó Julián Landerreche en su propuesta (ver mensajes de anteayer en la lista). Y simplemente he desplazado las columnas cuyo ancho no es en EMs mediante un padding en EMs aplicado del lado de las columnas flotadas de su misma fila, a una distancia levemente superior a la del ancho de esas columnas. Entonces, si crecen las columnas en EMs, se desplaza el contenido de la columna cuyo ancho no es en EMs, dejando el lugar suficiente para que se muestren las columnas en EMs a medida que crecen. - Diseño líquido, que no haga sroll horizontal al aumentar el tamaño de letra (hasta un 200%). Cumplido (y superado), soporta hasta 7 niveles de zoom de solo texto en Firefox (sabiendo que 6 niveles es el 200%), sin hacer scroll y sin superponer las columnas. - N columnas, con contenidos desconocidos (no necesariamente menús, puede ser cualquier tipo de contenido) Cumplido, y aunque solo puse ejemplos de 2 y 3 columnas por fila, puede continuarse la idea con más columnas flotadas cuyo ancho esté en EM. Ahora, si quisieras agregar más de una columna SIN ANCHO EN EM en la misma fila horizontal, entonces convendría usar un contenedor que divida la fila en paquetes, cada uno de los cuales contenga UNA sola columna libre de ancho en EM, y luego todas las demás flotadas con el ancho en EM que quieras, siempre que la libre tenga un padding levemente superior al ancho de las columnas en EMs que comparten su paquete contenedor, aplicado del mismo lado hacia el que éstas flotan. Pero a mi entender, crear más de 3 columnas teniendo como objetivo un usuario que verá esto a 6 niveles de zoom... no es una buena decisión de diseño, ya que cada columna será demasiado angosta, dificultando la lectura. - La altura de cada columna es indeterminable a priori (por ejemplo, los contenidos se leen de una b.d.) Cumplido, en la columna 2 de la fila 2 tienes un ejemplo de columna cuyo contenido es menor en altura al de la columna 1 de esa fila, si tienes el texto a tamaño normal. En cuanto lo amplías 4 o 5 veces, la primera fila supera el alto de la segunda, y nada se desarma. - Algunas de las columnas deben poder tener anchos en ems para que crezcan al aumentar la fuente (el objetivo de esta restricción es evitar que sus contenidos se solapen con otros contenedores al aumentar, cosa que puede ocurrir con los porcentajes o los pixels). Cumplido, en la fila 1, la columna 1 tiene ancho en EM, y en la fila 2, las columnas 2 y 3 tienen ancho en EM. - El resto de las columnas deberán ajustar su ancho al restante tras haber crecido las columnas en ems (se entenderá que estas columnas variables son aún suficientemente anchas con un 200% de aumento como para no producirse solapamientos). Cumplido, se ajustan al espacio restante, y a 200% no se producen solapamientos. - En caso de existir más contenidos bajo las columnas, estos deben desplazarse hacia abajo a medida que crece la altura de las columnas superiores (¡ojo!, puede darse el caso de que una columna que antes era menos alta pase a ser más alta al aumentar la fuente). Cumplido, la fila 2 se desplaza hacia abajo cuando aumenta la altura de la fila 1, y la fila 3 se desplaza hacia abajo cuando aumenta la altura de las filas 1 y/o 2. Si ahora miras mis ejemplos DIVS3 y TABLAS, verás que cumplen TODAS las condiciones impuestas. Con DIVS flotados yo no he sabido hacerlo, aunque repito que he visto algunos esquemas más o menos complejos que funcionan relativamente bien, pero que añaden gran cantidad de divs extra y a veces fallan. Bueno, este esquema no agrega gran cantidad de divs extra, solo uno por fila al igual que tu ejemplo DIVS3; no veo que falle; está hecho con flotados; y no veo que sea complejo. Así que creo que cumple TODAS las condiciones impuestas. Dime si descifré el acertijo... :-) Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ 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] Trabajar con EMs
No sé cómo lo has probado tú... En mi Firefox3, con 2 niveles de zoom ya aparece un pequeño scroll. Con 6 niveles de zoom ya ni te cuento... Saludos, Ramón. Por favor, prueba a ver si esto resuelve tu acertijo :-) http://www.saberweb.com.ar/emsencolumnas/index.html ___ 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] Consulta
Gracias por tu ayuda -Mensaje original- De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En nombre de ayeljary Enviado el: viernes, 06 de marzo de 2009 20:13 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Consulta Llevo en esto del web apenas unos meses, y cualquier información es poca. No soy quién para dar consejos sobre como empezar, más que nada porque estoy empezando, pero creo que lo mejor que se puede hacer es mirarlo todo. Esta lista me está sirviendo de mucho, aunque no pregunte, porque con las dudas de los demás ya se aprende, y mucho. Ahora mismo me estoy dando de cabezazos con el PHP con Joomla! para poder tener cierto conocimiento de CMS, que nunca viene mal. En cuanto al estilo, decir que hay que intentar hacer las cosas lo más ordenado posible, siguiendo un orden (ya sea estilos para un div, o divs dentro de otro div...), o como uno esté más a gusto. Eso sí, haz caso a lo que digan los que saben, que los que empezamos en esto tenemos que ser auténticas esponjas con la gente que sabe. Suerte para tí, y otro poco para mi. ___ 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 ___ 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] Consulta
Gracias por tu colaboración. Oye, dicho sea de paso si alguna vez necesitas alguien para colaborar Aquí me tienes como FreeLancer, jajá... Hasta pronto. Post-data: si alguno quiere ver mi CV aquí esta (la página es antigua la hice hace mucho y supongo que la actualizaré cuando pueda a una versión un poquito mejor) http://webs.ono.com/javierherran -Mensaje original- De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En nombre de Daniel Rodriguez Enviado el: viernes, 06 de marzo de 2009 20:02 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Consulta Hola Javier: Te cuento que en ralidad no hay una ley de como empezar en esto. En mis comienzo perdi HORAS buscando un metodo en el que me sintiera comodo. Ademas depende mucho de que si trabajas solo o en equipo y de que plataforma de software usaras. En mi caso, tengo una empresa de desarrollo web asociada con otras dos de Marketing y otra de Merchandising , entonces, en este entorno yo trabajo con Dreanweaver CS4 para los diseños y estructura del sitio (donde me entienden bien el publicista y la diseñadora grafica) y para la programacion (en mi caso PHP) uso Easy Eclipse, con el plugin de Aptana y Xammp (servidorApache, PHP y MySQL.) Ahora, a la hora de conseguir material, no dudes en conseguir y consultar todo tipo de fuentes (Comprar libros especializados es una gran herramienta), buscar por la web (hay miles de sitios y ejemplos). Tambien podes descargar libros a traves de programas como bittirrent, Emule, etc (esto es ilegal, pero siendo sincero, que tire la primer piedra quein no lo ha hecho). Y mas que todo, el ENDEMONIADO Y MALDITO INGLES. TODA LA MEJOR INFORMACION, LA ENCONTRARAS EN INGLES. Creo!!!, y espero no ser el unico que piens asi, que si queres meterte en este campo y ser alguien, necesitas saber este Idioma. Y no esta demas agregar saber un lenguaje de programacion del lado del servidor, otro del lado del cliente, CSS, XHTML, FLASH, ETC, ETC, ETC. CON TODO ESTO NO QUIERO DESANIMARTE, PERO ES PARA PLANTEAR EL TEMA QUE EL DESARROLLO WEB ES UN GRAN DESAFIO (Y HERMOSO) Y NO ES PARA CUALQUIERA. HAY QUE INVESTIGAR, ESTUDIAR (siempre estas estudiando), ACTUALIZARTE, en fin. Bueno Javier, yo te dejo con este empujon sentimental de bienvenida al rubro, ahora espero que otros te colaboren con Links e informacion (tengo alguna data para enviarte) Sin mas... Atte. Daniel Rodriguez Hola, me llamo Javier Herrán Sainz y estoy aprendiendo a programar páginas web dinámicas en un curso de especialista de la UNED. Estoy intentando configurar la forma de la página usando estilos css. La verdad que estudiando HTML, XHTML y CSS no tengo problema. Más bien el problema es a la hora de, como diría yo, plasmar la visión de la página en código. Supongo que será cuestión de meter horas y adquirir experiencia para asimilar la teoría con la práctica. Pero la cierto es que cuesta ¿Quisiera preguntar si os pasaba lo mismo al principio? Porque supongo que Empezaríais como yo jaja Por otro lado decir que utilizo la herramienta Dreamweaver CS3 y, intento hacer las páginas escribiendo el código puro y duro, esto hace que sea más difícil pero también proporciona Un control mayor sobre el diseño. Quería preguntar, cuando diseñáis páginas como lo hacéis de forma visual o escribiendo el código, o sea, por decirlo de alguna manera a pelo. Yo diseño la pagina en un archivo HTML y después la intento dar forma usando una hoja de estilos css. Una cosa que me cuesta ver es cuando uso la propiedad float, pues los elementos se salen de su flujo normal ¿Sabéis dónde puedo encontrar ejemplos sobre esta característica para profundizar más sobre ella? A ver si me animáis y me dais un empujón en esto. Gracias. ___ 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 ___ 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] Consulta
Gracias por tu ayuda. -Mensaje original- De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En nombre de Tei Enviado el: viernes, 06 de marzo de 2009 19:56 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Consulta 2009/3/6 Javier Herrán Sainz herr...@hotmail.es: Hola, me llamo Javier Herrán Sainz y estoy aprendiendo a programar páginas web dinámicas en un curso de especialista de la UNED. Estoy intentando configurar la forma de la página usando estilos css. La verdad que estudiando HTML, XHTML y CSS no tengo problema. Más bien el problema es a la hora de, como diría yo, plasmar la ‘visión’ de la página en código. Supongo que será cuestión de meter horas y adquirir experiencia para asimilar la teoría con la práctica. Pero la cierto es que cuesta ¿Quisiera preguntar si os pasaba lo mismo al principio? Porque supongo que La teoria de CSS es facil (excepto crear layouts solo con CSS), pero la practica tiene mas excepciones que reglas, y eso es costoso. Nos cuesta a todos, y nos ha costado, el pelearnos con cosas que deberian funcionar, pero no funcionan porque los navegadores tienen bugs o no implementan lo que necesitamos de forma suficientemente extendida. Lo de los layouts de CSS con ser complejo, se puede resolver usando layouts ya hechos. Tu como principiante no tienes que crear de cero un layout de tres columnas perfecto (aunque podrias), ya hay hechos, de los que puedes partir. En resumen: Excepto layouts, esto es facil. Se hace dificil por chocar con la realidad de los navegadores. -- -- ℱin del ℳensaje. ___ 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] Consulta
Gracias por tu ayuda, mirare estas herramientas que me recomiendas. No la conozco. Y sobre todo miraré Eso del google layouts -Mensaje original- De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En nombre de andres karp Enviado el: viernes, 06 de marzo de 2009 19:50 Para: Ovillo, la lista de CSS en castellano Asunto: Re: [Ovillo] Consulta Hola Javier te paso lo que puedes hacer: 1- Para editar el código te recomiendo el programa APTANA es libre sirve para mac, pc y linux. 2- Primero antes de poenrte a picar el coidgo es muy importante hacer un boceto en papel. 3- Para el tema de floats ponle color a los bordes de las cajas para ver donde estan y utiliza un plugin de firefox llamado firedebug para poder ver bien que es lo que pasa con tu codigo. 4- Y por ultimo busca en google layouts css y veras muchisimos ejemplos.. Ojala te haya servido, saludos El 6 de marzo de 2009 19:12, Javier Herrán Sainz herr...@hotmail.esescribió: Hola, me llamo Javier Herrán Sainz y estoy aprendiendo a programar páginas web dinámicas en un curso de especialista de la UNED. Estoy intentando configurar la forma de la página usando estilos css. La verdad que estudiando HTML, XHTML y CSS no tengo problema. Más bien el problema es a la hora de, como diría yo, plasmar la visión de la página en código. Supongo que será cuestión de meter horas y adquirir experiencia para asimilar la teoría con la práctica. Pero la cierto es que cuesta ¿Quisiera preguntar si os pasaba lo mismo al principio? Porque supongo que Empezaríais como yo jaja Por otro lado decir que utilizo la herramienta Dreamweaver CS3 y, intento hacer las páginas escribiendo el código puro y duro, esto hace que sea más difícil pero también proporciona Un control mayor sobre el diseño. Quería preguntar, cuando diseñáis páginas como lo hacéis de forma visual o escribiendo el código, o sea, por decirlo de alguna manera a pelo. Yo diseño la pagina en un archivo HTML y después la intento dar forma usando una hoja de estilos css. Una cosa que me cuesta ver es cuando uso la propiedad float, pues los elementos se salen de su flujo normal ¿Sabéis dónde puedo encontrar ejemplos sobre esta característica para profundizar más sobre ella? A ver si me animáis y me dais un empujón en esto. Gracias. ___ 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 -- saludos Andrés Karp blog_ http://blog.dinamiclab.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 ___ 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] Trabajar con EMs
Ramón Corominas escribió: No sé cómo lo has probado tú... En mi Firefox3, con 2 niveles de zoom ya aparece un pequeño scroll. Con 6 niveles de zoom ya ni te cuento... Lo he probado usando Firefox 3.06, a 1024 x 768 y 1280 x 800px. Te he subido capturas de pantalla de cada nivel de zoom, tal como yo veo la pantalla, puedes verlas en: http://www.saberweb.com.ar/emsencolumnas/capturas/index.html Fíjate cómo tienes configurado el Firefox, Ramón, tal vez eso sea la causa de cómo ves las cosas. -Por favor, ¿alguien más en la lista nos puede decir cómo ve este esquema?: http://www.saberweb.com.ar/emsencolumnas/index.html Gracias! -- Hernán Beati http://www.saberweb.com.ar ___ 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] Trabajar con EMs
En Firefox 3.06 perfecto, tal como dice Hernán, y en Explorer 7 también pero con la opción aumentar texto, no el zoom. En Safari 4 el scroll horizontal aparece al tercer Ctrl++ y en Opera al 170%. Salud! Alberto García ** Hernán Beati - SaberWeb.com.ar escribió: Ramón Corominas escribió: No sé cómo lo has probado tú... En mi Firefox3, con 2 niveles de zoom ya aparece un pequeño scroll. Con 6 niveles de zoom ya ni te cuento... Lo he probado usando Firefox 3.06, a 1024 x 768 y 1280 x 800px. Te he subido capturas de pantalla de cada nivel de zoom, tal como yo veo la pantalla, puedes verlas en: http://www.saberweb.com.ar/emsencolumnas/capturas/index.html Fíjate cómo tienes configurado el Firefox, Ramón, tal vez eso sea la causa de cómo ves las cosas. -Por favor, ¿alguien más en la lista nos puede decir cómo ve este esquema?: http://www.saberweb.com.ar/emsencolumnas/index.html Gracias! -- Hernán Beati http://www.saberweb.com.ar ___ 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] Trabajar con EMs
-Por favor, ¿alguien más en la lista nos puede decir cómo ve este esquema?: Pues a 800x600 se ve chevere, a 1024x768 el menú ALTISIMO rebasa el borde inferior del contenido Mascotas y menos cortos. Cuando hago CTRL + en Chrome todo bien, en Firefox/3.0.7 al segundo CTRL + aparece un Scroll Horizontal. Salu2! -- Docente tutor - Soporte Conocimiento Virtual Academia www.ConocimientoVirtual.edu.co www.ConocimientoVirtual.edu.co/foro ___ 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] Trabajar con EMs
Victor Hugo Arias Valencia escribió: -Por favor, ¿alguien más en la lista nos puede decir cómo ve este esquema?: Pues a 800x600 se ve chevere, a 1024x768 el menú ALTISIMO rebasa el borde inferior del contenido Mascotas y menos cortos. Cuando hago CTRL + en Chrome todo bien, en Firefox/3.0.7 al segundo CTRL + aparece un Scroll Horizontal. Gracias Víctor Hugo! ¿Lo estás probando con el zoom de Solo texto de Firefox? (ya que esa era la idea en este caso). Por si alguien quiere probarlo, esta forma de hacer zoom del Firefox, se activa entrando al menú Ver - Tamaño - Solo ampliar texto (debe verse el tilde como señal de que solo aumentará el texto). Me extraña mucho que con el mismo navegador haya resultados distintos... Ah! Está probado solo en Firefox (no he dedicado tiempo a hacer ajustes para otros navegadores, eso vendría después). -- Hernán Beati http://www.saberweb.com.ar ___ 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] Trabajar con EMs
Alberto García escribió: En Firefox 3.06 perfecto, tal como dice Hernán, y en Explorer 7 también pero con la opción aumentar texto, no el zoom. En Safari 4 el scroll horizontal aparece al tercer Ctrl++ y en Opera al 170%. Salud! Alberto García Muchas Gracias por probarlo, Alberto! Solo agrego que la idea era probarlo solamente en Firefox por ahora (los ajustes multi-navegador vendrían después). Me sigue dejando perplejo que usando el mismo navegador haya resultados distintos: tú y yo lo vemos de una manera, y Ramón y Víctor Hugo ven otra cosa... -- Hernán Beati http://www.saberweb.com.ar ___ 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] Trabajar con EMs
Muchas Gracias por probarlo, Alberto! Solo agrego que la idea era probarlo solamente en Firefox por ahora (los ajustes multi-navegador vendrían después). Me sigue dejando perplejo que usando el mismo navegador haya resultados distintos: tú y yo lo vemos de una manera, y Ramón y Víctor Hugo ven otra cosa... -- Hernán Beati http://www.saberweb.com.ar ___ Probado en Firefox 3.0.7 sobre Linux, si se aplica la version solo texto, lo veo tal cual lo ves vos, si lo destildo al 2 Ctrl++ empieza a aparecer el menu inferior, pero esto si configuro la ventana a 1024, si la agrando, por supuesto, va sobre ruedas de cualquier manera. La diferencia entre visualizaciones es por el tildado o no de solo texto. ___ 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] Trabajar con EMs
Probado en Firefox 3.0.7 sobre Linux, si se aplica la version solo texto, lo veo tal cual lo ves vos, si lo destildo al 2 Ctrl++ empieza a aparecer el menu inferior, pero esto si configuro la ventana a 1024, si la agrando, por supuesto, va sobre ruedas de cualquier manera. La diferencia entre visualizaciones es por el tildado o no de solo texto. Donde dice menu inferior deberria decir scroll inferior.. :) ___ 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] Trabajar con EMs
Es por la opción sólo ampliar texto como bien has dicho antes. [OT] Esto de la falta de coherencia en aspectos básicos entre los distintos navegadores a veces llega a extremos ridículos. ¿Se imaginan que hubiera pasado lo mismo con la televisión? ¿Que lo que viéramos y cómo lo viéramos dependiera del aparato? ¿Que las productoras de contenidos tuvieran que adaptarlos a cada modelo de aparato? El aumento del presupuesto de una producción sería sustancial por esta situación. Creo que esto ocurre con los navegadores y está tardando demasiado en converger en un punto que satisfaga a todos porque los principales navegadores no valen el pastón que costaba un televisor en sus inicios, son gratuitos, y las empresas que los desarrollan lo tienen como un producto secundario al servicio de sus aspiraciones en el mercado de sus productos principales, como Microsoft, Apple o Mozilla por medio de Google. Porque ¿qué pasará con Mozilla ahora que Google, su principal donante, ya ha entrado en el mercado con Chrome? Esto definitivamente es una guerra por el monopolio de estándares tecnológicos que muchas veces me recuerda a la de los videocassettes de los 70/80, y esta la acabó ganando el sistema de peor calidad (VHS). Lo malo de esta guerra es que nosotros la sufrimos especialmente teniendo que perder horas en dar soporte a navegadores a los que sus propios creadores no dan desde hace años, como el caso de IE6 que no lo tiene desde 2005 (creo). Es como si quisiéramos montar una gasolinera y nos exigieran poner un surtidor de gasolina Super (95 oct. con plomo, la de antes) porque hay 4 vecinos de la localidad que todavía tienen su Renault 4 del año 72 y sus motores no están preparados para las gasolinas sin plomo actuales. En fin, que esto da para mucho, gracias Hernán y Ramón por vuestra pequeña batalla, he aprendido bastante. Salud! Alberto García ** Hernán Beati - SaberWeb.com.ar escribió: Alberto García escribió: En Firefox 3.06 perfecto, tal como dice Hernán, y en Explorer 7 también pero con la opción aumentar texto, no el zoom. En Safari 4 el scroll horizontal aparece al tercer Ctrl++ y en Opera al 170%. Salud! Alberto García Muchas Gracias por probarlo, Alberto! Solo agrego que la idea era probarlo solamente en Firefox por ahora (los ajustes multi-navegador vendrían después). Me sigue dejando perplejo que usando el mismo navegador haya resultados distintos: tú y yo lo vemos de una manera, y Ramón y Víctor Hugo ven otra cosa... -- Hernán Beati http://www.saberweb.com.ar ___ 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] Consulta acerca de la layout de mi blog
Hola, Pedro Corchero. Creo que algunos (o muchos) están entendiendo tus mensajes como un intento de posicionar mejor tu sitio en los buscadores. Te concedo el beneficio de la duda. Me gustaría darte mi opinión a lo que preguntas, pero no entiendo a qué te refieres cuando hablas de estructura ¿la estructura del documento html?. O puede te estés refiriendo a cómo organizas y presentas el contenido y si hacerlo o no en forma de blog ¿?. Tú dirás. Yo encuentro tu sitio interesante y, lo que más valoro es la clasificación por categorías. Conocer las últimas entradas está muy bien para los que acceden de forma habitual. Para los demás, es más importante poder encontrar alguna información de su interés entre todas las entradas. Por eso, quizás podrías resaltar más el apartado de secciones y situarlo antes que el de últimas entradas y comentarios recientes que, por otro lado, los tienes repetidos en el pie. Saludos. El 6 de marzo de 2009 22:56, dreagnout dreagn...@yahoo.es escribió: Hola, querría preguntarnos si la estructura que tengo puesta ahora mismo en mi blog, es correcta para su contenido (CSS), o sería mejor cambiarla por otra. Si sería mejor crear otra o cambiarla, especificar cúal. El blog es: http://www.cssblog.es Saludos. ___ 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] Trabajar con EMs
Hernan Javier Lopez escribió: Probado en Firefox 3.0.7 sobre Linux, si se aplica la version solo texto, lo veo tal cual lo ves vos, si lo destildo al 2 Ctrl++ empieza a aparecer el menu inferior, pero esto si configuro la ventana a 1024, si la agrando, por supuesto, va sobre ruedas de cualquier manera. La diferencia entre visualizaciones es por el tildado o no de solo texto. Gracias Hernán por probarlo. Claro, sería lo esperable que la diferencia sea por tildar o no el solo texto. Pero no quisiera creer que Ramón ha probado los esquemas haciendo zoom sin tildar el Solo ampliar texto... cuando él mismo ha puesto como condición que se pruebe en ese contexto! ¿Cómo lo ves ahora Ramón? ¿Ya lo consigues ver igual que los demás? -Repito el enlace del experimento por si alguien perdió el hilo: http://www.saberweb.com.ar/emsencolumnas/index.html -Y repito cuál era el objetivo: He tomado la idea de un min-width en pixeles y un max-width en EM que aplicó Julián Landerreche en su propuesta (ver mensajes de anteayer en la lista). Y simplemente he desplazado las columnas cuyo ancho no es en EMs mediante un padding en EMs aplicado del lado de las columnas flotadas de su misma fila, a una distancia levemente superior a la del ancho de esas columnas. Entonces, si crecen las columnas en EMs, se desplaza el contenido de la columna cuyo ancho no es en EMs, dejando el lugar suficiente para que se muestren las columnas en EMs a medida que crecen. - Diseño líquido, que no haga sroll horizontal al aumentar el tamaño de letra (hasta un 200%). Cumplido (y superado), soporta hasta 7 niveles de zoom de solo texto en Firefox (sabiendo que 6 niveles es el 200%), sin hacer scroll y sin superponer las columnas. - N columnas, con contenidos desconocidos (no necesariamente menús, puede ser cualquier tipo de contenido) Cumplido, y aunque solo puse ejemplos de 2 y 3 columnas por fila, puede continuarse la idea con más columnas flotadas cuyo ancho esté en EM. Ahora, si quisieras agregar más de una columna SIN ANCHO EN EM en la misma fila horizontal, entonces convendría usar un contenedor que divida la fila en paquetes, cada uno de los cuales contenga UNA sola columna libre de ancho en EM, y luego todas las demás flotadas con el ancho en EM que quieras, siempre que la libre tenga un padding levemente superior al ancho de las columnas en EMs que comparten su paquete contenedor, aplicado del mismo lado hacia el que éstas flotan. Pero a mi entender, crear más de 3 columnas teniendo como objetivo un usuario que verá esto a 6 niveles de zoom... no es una buena decisión de diseño, ya que cada columna será demasiado angosta, dificultando la lectura. - La altura de cada columna es indeterminable a priori (por ejemplo, los contenidos se leen de una b.d.) Cumplido, en la columna 2 de la fila 2 tienes un ejemplo de columna cuyo contenido es menor en altura al de la columna 1 de esa fila, si tienes el texto a tamaño normal. En cuanto lo amplías 4 o 5 veces, la primera fila supera el alto de la segunda, y nada se desarma. - Algunas de las columnas deben poder tener anchos en ems para que crezcan al aumentar la fuente (el objetivo de esta restricción es evitar que sus contenidos se solapen con otros contenedores al aumentar, cosa que puede ocurrir con los porcentajes o los pixels). Cumplido, en la fila 1, la columna 1 tiene ancho en EM, y en la fila 2, las columnas 2 y 3 tienen ancho en EM. - El resto de las columnas deberán ajustar su ancho al restante tras haber crecido las columnas en ems (se entenderá que estas columnas variables son aún suficientemente anchas con un 200% de aumento como para no producirse solapamientos). Cumplido, se ajustan al espacio restante, y a 200% no se producen solapamientos. - En caso de existir más contenidos bajo las columnas, estos deben desplazarse hacia abajo a medida que crece la altura de las columnas superiores (¡ojo!, puede darse el caso de que una columna que antes era menos alta pase a ser más alta al aumentar la fuente). Cumplido, la fila 2 se desplaza hacia abajo cuando aumenta la altura de la fila 1, y la fila 3 se desplaza hacia abajo cuando aumenta la altura de las filas 1 y/o 2. Si ahora miras mis ejemplos DIVS3 y TABLAS, verás que cumplen TODAS las condiciones impuestas. Con DIVS flotados yo no he sabido hacerlo, aunque repito que he visto algunos esquemas más o menos complejos que funcionan relativamente bien, pero que añaden gran cantidad de divs extra y a veces fallan. Bueno, este esquema no agrega gran cantidad de divs extra, solo uno por fila al igual que tu ejemplo DIVS3; no veo que falle; está hecho con flotados; y no veo que sea complejo. Así que creo que cumple TODAS las condiciones impuestas. Dime si descifré el acertijo... :-) Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de distribución Ovillo Para escribir
Re: [Ovillo] Consulta
Hola, Javier Herrán. Es importante la planificación previa antes de diseñar un sitio. Para ello tendrás que obtener toda la información que puedas del cliente (objetivos, colores y logo, secciones, etc.). Antes de escribir código tienes que tener un prototipo de la página (imagen, no html), aunque sea un simple boceto en papel, como ha apuntado Andres Karp. Luego analiza este boceto para descubrir cuál es la estructura inherente que tendrás que plasmar en html (encabezado arriba, luego menú horizontal, luego breadcrums, etc.). Crea el documento html con esta estructura y, después, añades el estilo con css para que tu página se parezca lo más posible al boceto (por lo que cuentas, tú ya lo haces así: primero html, luego css). Pero, si te tengo que dar alguna recomendación es esta: apréndete bien la teoría. Te ahorrarás muchos quebraderos de cabeza y sabrás cuando un determinado comportamiento es particular de un navegador o es conforme a los estándares, aunque éste pueda parecer desconcertante. Me sorprende que conocimientos que deberían de ser básicos como la conmutación doctype o los detalles sobre la combinación de márgenes, por poner dos ejemplos, a veces los desconocen diseñadores con muchos años de profesión. Muchos ni siquiera saben nada sobre la cabecera http, de que su flamante código XHTML (con X) es interpretado como HTML (sin X) por los navegadores ya que así se lo marca el servidor web y que incluso puede que no funcione si se trata como xhtml. Profundiza en la teoría; darás un salto cualitativo y te evitarás muchas frustraciones. También es importante el inglés para encontrar información, como ha comentado Daniel Rodríguez. Respecto a la propiedad float, tienes el comportamiento básico en http://www.librosweb.es/css/capitulo5/posicionamiento_float.html http://www.librosweb.es/css_avanzado/capitulo1/limpiar_floats.html Luego tienes los numerosos bugs asociados con los float, sobre todo con IE (margen doble, texto que desaparece, hueco de 3px, etc.) y cómo solucionarlos. Nota. Aunque estas páginas no dicen nada al respecto, es importante que indiques un ancho a todo elemento que quieras flotar para evitar efectos no deseados. La propiedad float es un recurso muy utilizado para posicionar elementos. Te la encontrarás en cualquier sitios: columnas, menús, formularios, etc. A veces existe más de una solución para realizar algo pero generalmente la solución con floats es más elegante o incluye menos marcado semántico. Entiendo perfectamente tu duda sobre cuando usar y cuando no floats, porque seguramente estés pensando en el sentido original, que fue el permitir que el texto fluyera alrededor de una imagen. Pero con la llegada de CSS y la propiedad float, que se puede aplicar a cualquier elemento, se amplió su aplicación práctica y se empezó a usar, por ejemplo, para hacer columnas o para que los elementos de una lista se apilaran uno junto a otro en disposición horizontal. Despejarás tus dudas si estudias algún código que usa floats e intentas hacer algo parecido sin su uso. Recuerda que si no entiendes porqué se usa floats en un determinado código puedes mandar un mensaje a esta lista y así aprendemos analizándolo. Finalmente, recomendarte la especificación CSS2.1 original en el W3C o su traducción: http://www.w3.org/Style/css2-updates/translations.html Saludos y ánimo. El 6 de marzo de 2009 19:12, Javier Herrán Sainz herr...@hotmail.esescribió: Hola, me llamo Javier Herrán Sainz y estoy aprendiendo a programar páginas web dinámicas en un curso de especialista de la UNED. Estoy intentando configurar la forma de la página usando estilos css. La verdad que estudiando HTML, XHTML y CSS no tengo problema. Más bien el problema es a la hora de, como diría yo, plasmar la ‘visión’ de la página en código. Supongo que será cuestión de meter horas y adquirir experiencia para asimilar la teoría con la práctica. Pero la cierto es que cuesta ¿Quisiera preguntar si os pasaba lo mismo al principio? Porque supongo que Empezaríais como yo…jaja… Por otro lado decir que utilizo la herramienta Dreamweaver CS3 y, intento hacer las páginas escribiendo el código puro y duro, esto hace que sea más difícil pero también proporciona Un control mayor sobre el diseño. Quería preguntar, cuando diseñáis páginas como lo hacéis de forma visual o escribiendo el código, o sea, por decirlo de alguna manera “a pelo”. Yo diseño la pagina en un archivo HTML y después la intento dar forma usando una hoja de estilos css. Una cosa que me cuesta “ver” es cuando uso la propiedad float, pues los elementos se salen de su flujo normal ¿Sabéis dónde puedo encontrar ejemplos sobre esta característica para profundizar más sobre ella? A ver si me animáis y me dais un empujón en esto. Gracias. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o
