Re: [Ovillo] Trabajar con EMs
Ramón Corominas escribió: Hola, Hernán. 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! No sé dónde puse yo esa condición, la verdad. Fue tu primera condición, Ramón: cita de Ramón Venga, va, la última vez que explico el escenario: - Diseño líquido, que no haga sroll horizontal al aumentar el tamaño de letra (hasta un 200%). /cita de Ramón Has dicho textualmente: al aumentar el tamaño de letra, no has dicho al hacer zoom. Letra... Además, me resultó muy coherente que pidieras eso, ya que, por experiencia, me consta que las personas que necesitan ampliar mucho el texto, prefieren usar la ampliación de solo texto para evitar el scroll horizontal (es lo que he aprendido en los cursos de Accesibilidad Web que he realizado, y es lo que enseño en los Cursos que dicto yo). Efectivamente lo he probado con esa opción desactivada, que es como he probado los layouts con tablas que se siguen viendo perfectos, incluso sin esa opción. En cualquier caso, admitiré la posibilidad de activarla, y en ese caso se cumplen todas las condiciones Lo dijo, lo dijo! jajajaja!!!... :-) Seguro que se cumplen, Ramón. Resultado parcial del partido: DIV/CSS: 1 - Tablas: 0 ;-) Casi cualquier layout que hace años se hacía con tablas, puede hacerse con CSS; así como existen layouts que se hacen con CSS, que no podrán hacerse jamás con tablas (ver ejemplo más abajo). Pero no alcanza con que ambas técnicas logren lo mismo, sino a costa de qué otras consecuencias lo hacen. aunque... Sigue habiendo un problema con una condición que yo entendía como implícita en el enunciado, pero que ahora veo que no lo es, que es la definición de columna (y yo mismo he contribuido a la confusión con algún ejemplo desafortunado). Ah, bueno!... Cambiamos el terreno nuevamente... ahora sacas de la manga una nueva condición! jaja! Eres muy bueno, Ramón... deberías de ser abogado! :-) Para mí, cuando hablo de layouts en columnas, doy por hecho que las columnas son adyacentes (no unas dentro de otras) Y lo son, Ramón. Dentro de su fila, los DIVs son adyacentes. Ya está cumplida esa parte de esta nueva condición que agregas... Lo único dentro de otro es que esos DIV están dentro de un DIV que funciona como contenedor de una fila... Tal como en tu tabla cada TD debe estar dentro de un TR... ¿no es igual? Ah, no! Es mucho peor aún en tus tablas, porque tu diseño te exige usar TABLAS ANIDADAS, así que tus columnas no solo están dentro de un TR, sino que ese TR, está dentro de una TABLA, que a su vez está dentro de un TD, y éste dentro de un TR, y éste dentro de una TABLA de nivel superior, para poder colocar columnas en distintas filas sin que estés obligado a que todas las columnas sigan los mismos anchos (por más colspan que uses). Veamos qué es lo que está más dentro de otras cosillas... si los divs o las tablas. Mira mi código: div id=contenedor div id=fila1 div id=columna1-fila1 /div !-- fin columna1-fila1 -- div id=columna2-fila1 /div !-- fin columna2-fila1 -- /div !-- fin fila1 -- div id=fila2 div id=columna1-fila2 /div !-- fin columna1-fila2 -- div id=columna2-fila2 /div !-- fin columna2-fila2 -- div id=columna3-fila2 /div !-- fin columna3-fila2 -- /div !-- fin fila2 -- div id=fila3 div id=columna1-fila3/div !-- fin columna1-fila3 -- /div !-- fin fila3 -- /div !-- fin contenedor -- Es mucho más simple que tu tabla. Porque tu tabla por cada fila tiene un TR y dentro de él, debes ANIDAR OTRA TABLA, donde a su vez tienes las columnas (TD). Mira una tabla de 3 filas, con 2, 3 y 1 columnas respectivamente (para lograr el mismo esquema que mi código en DIVs): table width=100% border=1!-- tabla de fondo, con 3 filas -- tr !-- fila 1-- tdtable width=100% border=1 !-- tabla anidada para las 2 columnas de fila 1 -- tr tdnbsp;/td !-- columna 1 -- tdnbsp;/td !-- columna 2 -- /tr /table/td /tr!-- fin fila 1 -- tr !-- fila 2 -- tdtable width=100% border=1 !-- tabla anidada para las 3 columnas de fila 2 -- tr tdnbsp;/td !-- columna 1 -- tdnbsp;/td !-- columna 2 -- tdnbsp;/td !-- columna 3 -- /tr /table/td /tr !-- fin fila 2 -- tr !-- fila 3 -- tdnbsp;/td /tr !-- fin fila 3 -- /table Para seguir tu esquema de variar en cada fila la cantidad de columnas y poner alternativamente 2, 3, 4 o más columnas, si lo haces en tablas, debes necesariamente utilizar TABLAS ANIDADAS (si no, por más colspan que uses, te quedará el ancho de las columnas de una fila dependiente del ancho de las columnas de otras filas... un molesto detalle que tenían las tablas, no sé si te acuerdas... yo ya me había olvidado, hace tanto que no las uso para maquetar!). Resultado: DIV/CSS: 2 - Tablas: 0 ;-)
Re: [Ovillo] Trabajar con EMs
Este es mi último mensaje en este hilo, ya me aburre el tema y me debo explicar muy mal porque tengo la sensación de que hablamos cada uno de una cosa distinta... 1. Te empeñas en decir diseño con tablas cuando estoy hablando en todo momento de tablas SIMULADAS CON DIVS (propiedades de CSS 2.1, que desgraciadamente IE6 no sabe interpretar). No se trata de DIVS/CSS vs TABLAS (es OBVIO que el CSS es más flexible que las tablas, no recuerdo haber dicho lo contrario), sino de DIVS flotados con paddings/margins para abrir huecos o DIVS de simulación de tablas. 2. De acuerdo en que la condición de sólo ampliar texto podría estar ahí de alguna manera. De todos modos, sigo diciéndote que incluso sin ella el diseño por tablas (simuladas) funciona igual de bien a 8 niveles de zoom (Divs tablas: 1, Divs float: 0). Por cierto, te aclararé algo para que lo tengas en cuenta en tus clases: usar la ampliación con zoom completo o sin él depende de muchos factores, no sólo del scroll. En muchos sitios, uso el zoom completo porque me interesa ver mejor las imágenes, o porque se lee mejor el texto principal aunque haya que hacer algo de scroll. En otros puede que sí use el zoom de sólo texto, pero no hay una regla fija e inmutable que se siga siempre. Sospecho que otros usuarios con baja visión tendrán otras preferencias, por lo que dar por hecho lo que usan los usuarios con baja visión es un poco peligroso. 3. Si tú quieres anidar tablas (cosa que yo no he hecho) para demostrar lo malas que son las tablas, allá tú, pero estás falseando la realidad a tu conveniencia, porque no hace falta anidar nada (podría decirte que estudies HTML, pero daré por hecho que sabes del tema, cosa que tú pareces no creer del resto de la humanidad); de hecho, el código con tablas tiene prácticamente la misma estructura que con tus divs, y si se usan divs de tablas simuladas se pueden eliminar más divs aún, con lo que te queda un código más simple todavía. (Divs tablas: 2, divs float: 1). 4. En tu layout HAY divs dentro de otros, como podrías haber comprobado fácilmente si te hubieras tomado la molestia de darles colores de fondo distintos. Verás cómo algunos de ellos se ven por debajo de los otros, y no adyacentes. (Divs tablas: 3, Divs float: 1). 3. No he entrado jamás (ni entraré) a valorar cuestiones estéticas, al parecer tú decides lo que está bien y lo que está mal sin siquiera haber visto su posible aplicación. Yo sólo he hablado de la técnica y de mi interpretación del concepto columna. Y, sinceramente, he visto suficientes diseños como para atreverme a afirmar tan tajantemente como tú lo que mola y lo que no sin verlo siquiera. Afortunadamente hay diseñadores que saben darle aires nuevos a viejas fórmulas, y gracias a eso lo que está de moda hoy mañana ya no lo estará. Las modas son tan efímeras que no creo que nadie pueda asegurar que esto o lo otro no se usa más, a no ser que tenga tu clarividencia, claro está. De todos modos, lo dicho: no valoro si me gusta o me disgusta un determinado diseño, sólo hablo de cómo lograrlo y qué código (HTML y CSS) es más simple para esta situación concreta. Por último, te agradecería que dejaras de hacer suposiciones sobre los conocimientos, métodos y experiencia de los demás. Comprendo que tú crees que sabes más que nadie y sientes la necesidad de demostrarlo, pero de verdad, resulta muy cansino. De todos modos, si lo que quieres es ganar y que te reconozca la victoria, pues hala: GANASTE. Enhorabuena, eres el supercampeón de los pesos pesados del css. Saludos, Ramón. ___ 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
El día 9 de marzo de 2009 14:07, Ramón Corominas lis...@ramoncorominas.com escribió: Este es mi último mensaje en este hilo, ya me aburre el tema y me debo explicar muy mal porque tengo la sensación de que hablamos cada uno de una cosa distinta... 1. Te empeñas en decir diseño con tablas cuando estoy hablando en todo momento de tablas SIMULADAS CON DIVS (propiedades de CSS 2.1, que desgraciadamente IE6 no sabe interpretar). No se trata de DIVS/CSS vs TABLAS (es OBVIO que el CSS es más flexible que las tablas, no recuerdo haber dicho lo contrario), sino de DIVS flotados con paddings/margins para abrir huecos o DIVS de simulación de tablas. 2. De acuerdo en que la condición de sólo ampliar texto podría estar ahí de alguna manera. De todos modos, sigo diciéndote que incluso sin ella el diseño por tablas (simuladas) funciona igual de bien a 8 niveles de zoom (Divs tablas: 1, Divs float: 0). Por cierto, te aclararé algo para que lo tengas en cuenta en tus clases: usar la ampliación con zoom completo o sin él depende de muchos factores, no sólo del scroll. En muchos sitios, uso el zoom completo porque me interesa ver mejor las imágenes, o porque se lee mejor el texto principal aunque haya que hacer algo de scroll. En otros puede que sí use el zoom de sólo texto, pero no hay una regla fija e inmutable que se siga siempre. Sospecho que otros usuarios con baja visión tendrán otras preferencias, por lo que dar por hecho lo que usan los usuarios con baja visión es un poco peligroso. 3. Si tú quieres anidar tablas (cosa que yo no he hecho) para demostrar lo malas que son las tablas, allá tú, pero estás falseando la realidad a tu conveniencia, porque no hace falta anidar nada (podría decirte que estudies HTML, pero daré por hecho que sabes del tema, cosa que tú pareces no creer del resto de la humanidad); de hecho, el código con tablas tiene prácticamente la misma estructura que con tus divs, y si se usan divs de tablas simuladas se pueden eliminar más divs aún, con lo que te queda un código más simple todavía. (Divs tablas: 2, divs float: 1). 4. En tu layout HAY divs dentro de otros, como podrías haber comprobado fácilmente si te hubieras tomado la molestia de darles colores de fondo distintos. Verás cómo algunos de ellos se ven por debajo de los otros, y no adyacentes. (Divs tablas: 3, Divs float: 1). 3. No he entrado jamás (ni entraré) a valorar cuestiones estéticas, al parecer tú decides lo que está bien y lo que está mal sin siquiera haber visto su posible aplicación. Yo sólo he hablado de la técnica y de mi interpretación del concepto columna. Y, sinceramente, he visto suficientes diseños como para atreverme a afirmar tan tajantemente como tú lo que mola y lo que no sin verlo siquiera. Afortunadamente hay diseñadores que saben darle aires nuevos a viejas fórmulas, y gracias a eso lo que está de moda hoy mañana ya no lo estará. Las modas son tan efímeras que no creo que nadie pueda asegurar que esto o lo otro no se usa más, a no ser que tenga tu clarividencia, claro está. De todos modos, lo dicho: no valoro si me gusta o me disgusta un determinado diseño, sólo hablo de cómo lograrlo y qué código (HTML y CSS) es más simple para esta situación concreta. Por último, te agradecería que dejaras de hacer suposiciones sobre los conocimientos, métodos y experiencia de los demás. Comprendo que tú crees que sabes más que nadie y sientes la necesidad de demostrarlo, pero de verdad, resulta muy cansino. De todos modos, si lo que quieres es ganar y que te reconozca la victoria, pues hala: GANASTE. Enhorabuena, eres el supercampeón de los pesos pesados del css. Saludos, Ramón. ___ 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 Sólo decir, que a pesar de los humos, agradezco mucho vuestro debate porque ha sido muy ameno e interesante, y aunque os habéis podido ofender mutuamente, creo que habéis llegado a poneros de acuerdo... además! los que se pelean se quieren!! guiño Saludos :D -- Philipp Keweloh Writing about music is like dancing about architecture. - Frank Zappa ___ 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ó: 1. Te empeñas en decir diseño con tablas cuando estoy hablando en todo momento de tablas SIMULADAS CON DIVS (propiedades de CSS 2.1, que desgraciadamente IE6 no sabe interpretar). No se trata de DIVS/CSS vs TABLAS (es OBVIO que el CSS es más flexible que las tablas, no recuerdo haber dicho lo contrario), sino de DIVS flotados con paddings/margins para abrir huecos o DIVS de simulación de tablas. De acuerdo, he malentendido lo que proponías, y ya ni recordaba el inicio del hilo. Disculpa por haber olvidado ya tu propuesta original después de tantas idas y vueltas de concentrarme en dar una solución a tu desafío. Ahora que releo el inicio, fue con estas palabras tuyas: cita Ramón lo ideal sería poder combinar tamaños de contenedores, es por eso por lo que a veces un layout con tablas podría hacer cosas que no es posible hacer con CSS (salvo con propiedades CSS que simulen tablas, claro). Por ejemplo, yo daría algo por poder usar un esquema a 2 columnas donde: - El conjunto tenga un ancho del 100% - La parte izquierda tenga un ancho de 12em (por ejemplo) - La parte derecha tenga un ancho de (100% - 12.1em). Con tablas es trivial, sin ellas... /cita Ramón 3. Si tú quieres anidar tablas (cosa que yo no he hecho) para demostrar lo malas que son las tablas, allá tú, pero estás falseando la realidad a tu conveniencia, porque no hace falta anidar nada (podría decirte que estudies HTML, pero daré por hecho que sabes del tema, cosa que tú pareces no creer del resto de la humanidad) No me ofendas, Ramón. No he falseado nada. Yo creía sinceramente que defendías las tablas (reitero, estaba confundido), y en ese contexto, sí que hace falta anidar tablas para lograr columnas de distintos anchos a través de distintas filas. Y no precisas decirme que estudie más HTML para saber esa obviedad que tú también debes saber. Ahora, si cuando dices tablas, quieres decir CSS simulando tablas, entonces ten la precaución de hablar más claro, porque nadie te entenderá, tal como yo no te entendí. Con respecto a tus suposiciones sobre lo que creo o no creo sobre el resto de la humanidad, ¿tú eres el resto de la humanidad? Y yendo al caso, habiendo unos 6.000.000.000 de seres humanos que no saben HTML... seremos apenas un par de millones los que sabemos algo del tema, entre los cuales estamos tú, yo y (casi) todos los que estamos en esta lista. No creo que lleguemos al 0,0 y algo % de la humanidad... :-) de hecho, el código con tablas tiene prácticamente la misma estructura que con tus divs Salvo por el hecho de que se precisan tablas anidadas. ¿O es que cuando acabas de decir tablas, en realidad quieres decir CSS con display:table? Entonces disculpa, pero explícate mejor. 4. En tu layout HAY divs dentro de otros, como podrías haber comprobado fácilmente si te hubieras tomado la molestia de darles colores de fondo distintos. Verás cómo algunos de ellos se ven por debajo de los otros, y no adyacentes. Disculpa, pero ¿cuál es el problema de que haya unos DIVs dentro de otros? Es lo usual. Claro, hablo del código de esos DIVs. Lo que no hay es columnas dentro de columnas, eso no. Columnas, dentro de filas, y filas, dentro de contenedor general. ¿Cuál es el problema de eso? Es como se usan los DIVs. Hablo del código, y siempre hablé de él, reitero. Pero ahora que hablas de colorearlos, me doy cuenta de que no te estabas refiriendo al código, como yo, sino al resultado visual; ahí sí se entiende que te parezca que están dentro de otros, porque una columna 1 flotada al lado de otra columna 2 PARECE estar adentro, pero no está dentro de esa columna 2 (otra vez, en el código). En todo caso, se superponen, se solapan, se enciman, o como prefieras decirlo. Pero no por ello están dentro de la otra columna en el código. Y hablando de lo visual, nada impide decorarlas perfectamente. Faux-columns, por ejemplo. 3. No he entrado jamás (ni entraré) a valorar cuestiones estéticas, al parecer tú decides lo que está bien y lo que está mal Yo tampoco entré a valorar lo estético. No sé de dónde sacas que yo decida nada, justamente dije que era un tema subjetivo al que no quería entrar, y di mi opinión, tal como tú das la tuya libremente a continuación. Las modas son tan efímeras que no creo que nadie pueda asegurar que esto o lo otro no se usa más, a no ser que tenga tu clarividencia, Sigues ofendiendo. Si ibas a dar tu opinión sobre las modas, ¿por qué no te limitas a darla y punto, sin ofender? Comprendo que tú crees que sabes más que nadie y sientes la necesidad de demostrarlo, ¿Cómo lo sabes? ¿Me conoces? Creo que tienes mucha imaginación... Yo no sé más que nadie, soy un humilde aprendiz como todos, y aprendo cada día de esta lista y de otras, y de libros, y de artículos, y hasta de tus desafíos. Pasemos a otra cosa más productiva. Saludos, -- Hernán Beati http://www.saberweb.com.ar ___ Lista de
Re: [Ovillo] Trabajar con EMs
Hernán escribió: No me ofendas, Ramón. No he falseado nada. Yo creía sinceramente que defendías las tablas (reitero, estaba confundido), y en ese contexto, sí que hace falta anidar tablas para lograr columnas de distintos anchos a través de distintas filas. Y no precisas decirme que estudie más HTML para saber esa obviedad que tú también debes saber. table id=fila1 tr td/td td/td /tr /table table id=fila2 tr td/td td/td td/td /tr /table ¡Sorpresa! No hace falta anidar tablas guiño Y sí, mejor pasemos a otra cosa... Salu2, Ramón. ___ 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ó: table id=fila1 tr td/td td/td /tr /table table id=fila2 tr td/td td/td td/td /tr /table ¡Sorpresa! No hace falta anidar tablas guiño Ah! Claro, y seguro que desde un primer momento cuando decías filas querías decir distintas tablas y no una sola. Por favor... 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
Hola, Hernán. 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! No sé dónde puse yo esa condición, la verdad. Efectivamente lo he probado con esa opción desactivada, que es como he probado los layouts con tablas que se siguen viendo perfectos, incluso sin esa opción. En cualquier caso, admitiré la posibilidad de activarla, y en ese caso se cumplen todas las condiciones, aunque... Sigue habiendo un problema con una condición que yo entendía como implícita en el enunciado, pero que ahora veo que no lo es, que es la definición de columna (y yo mismo he contribuido a la confusión con algún ejemplo desafortunado). Para mí, cuando hablo de layouts en columnas, doy por hecho que las columnas son adyacentes (no unas dentro de otras), estilables por separado, y que se extienden por igual en altura (es decir, que si le doy color a cada columna por separado, veré dos columnas de igual altura, aunque sus contenidos no ocupen esta altura por completo). Esto es algo que es inherente a las celdas de tablas, pero no a los divs normales. Por eso en tu layout, efectivamente, se cumple todo, salvo que cuando se aplican estilos a cada contenedor como colores de fondo, bordes, etc., aparecen los solapamientos entre las columnas. Es más o menos lo mismo que les pasa a otros layouts como los de Ruthsarian, ya que en realidad tú haces más o menos lo mismo. De todos modos, quiero aclarar que no dudo de que dándole vueltas al tema se puedan crear columnas del 100% de altura, con anchos en ems combinados con porcentajes, y que cumplan todas las demás condiciones. Lo que digo es que para estas cosas me parece tan simple el diseño con tablas que parece mentira que haya que complicarse tanto la vida para acabar llegando a lo mismo. Un saludín, Ramón. ___ 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ó: 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] 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] 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] Trabajar con EMs
Ramón Corominas escribió:
http://www.ramoncorominas.com/ovillo/2col/
Ay Ramón, Ramón... jajaja! No me has dicho concretamente lo que yo te
preguntaba, pero voy a aprovechar tus ejemplos para mostrarte una
solución definitiva a tus tres desafíos. :)
La solución es muy simple, a cualquiera de tus 3 diseños, ponle
solamente estas reglas de estilo:
#menu {
position:absolute;
width:4em;
left:0;
}
#contenido {
margin-left:4em;
}
Puedes aumentar el zoom de Firefox al MAXIMO que no se desarma, a
cualquier resolución.
El menú está posicionado de manera absolute, y el contenido de forma
static, aplicándole un margin-left en EM del mismo ancho que el del
menú, y santo remedio!!
Aclaro que no es un mérito mío, es como se hacen la mayoría de los
layouts hace años...
Me debes una... ;)
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
Ay, Hernán, siempre te quedas en lo simple... Que yo haya puesto un ejemplo tan simplón no quiere decir que ese sea el layout normal que uno se va a encontrar o que puede desear. Si me sirviera el posicionamiento absoluto no haría falta tanta complicación, obviamente, pero no sirve. Me explico: Imagina que debajo del menú y de los contenidos quiero otro contenido que se expanda a las dos columnas (o a las 3, 4 o X que quiera poner, así de chulo soy). Imagina también que cualquiera de las columnas, pueden tener distintas alturas, unas más altas que otras, y que cualesquiera que sean esas alturas, el contenido inferior siempre debe quedar por debajo de la columna más alta, que empujará hacia abajo ese contenido. Ahora mira a ver cómo haces eso con posicionamiento absoluto. Try again... Saludín, Ramón. Hernán Beati - SaberWeb.com.ar escribió: Ay Ramón, Ramón... jajaja! No me has dicho concretamente lo que yo te preguntaba, pero voy a aprovechar tus ejemplos para mostrarte una solución definitiva a tus tres desafíos. :) ___ 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ó: Ay, Hernán, siempre te quedas en lo simple... Ay, ay, ay, Ramón!... Y tú que complicas lo que de veras ES simple... jaja! La solución: http://www.saberweb.com.ar/prueba/divs4.htm Te sugiero estudiar a fondo el posicionamiento CSS. Existen 4 tipos de posicionamiento: static, absolute, relative y fixed. La noticia de ayer es que se pueden combinar entre sí, según la necesidad concreta que tengas. Que yo haya puesto un ejemplo tan simplón no quiere decir que ese sea el layout normal que uno se va a encontrar o que puede desear. Si me sirviera el posicionamiento absoluto no haría falta tanta complicación, obviamente, pero no sirve. Por supuesto que SI sirve, dentro de contenedores relative. Me explico: Imagina que debajo del menú y de los contenidos quiero otro contenido que se expanda a las dos columnas (o a las 3, 4 o X que quiera poner, así de chulo soy). Entonces, al menu y el contenido que tenías hasta ahora, los envuelves en un div contenedor (ya lo tienes en tu marcado, es ese div al que le has colocado el class=row). Tienes tu primera fila horizontal. Si debajo quieres otro contenido que se expanda las 2, 3 o 4 columnas, que así de chulo eres, jaja!... simplemente pones otro div class=row que haga de contenedor de esa segunda fila, y verás que se queda quietecito debajo de manú y contenido, a lo ancho de la pantalla. Si ese div es relative, dentro de esa segunda fila creada puedes poner nuevamente otros divs absolutos como el menu, tanto a izquierda como a derecha. Solo cambias left:0 por rigth:0 y se acomodarán a ambos lados. Imagina también que cualquiera de las columnas, pueden tener distintas alturas, unas más altas que otras, y que cualesquiera que sean esas alturas, el contenido inferior siempre debe quedar por debajo de la columna más alta, que empujará hacia abajo ese contenido. Ya está hecho, cada div class=row que agregues hará eso, bajará hasta debajo de la columna más alta de su div class=row (fila) anterior. Ahora mira a ver cómo haces eso con posicionamiento absoluto. Míralo tú, lo hice partiendo de tu propio código: 2 columnas, 3 columnas, y pie de una sola columna: http://www.saberweb.com.ar/prueba/divs4.htm -- 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
Ay, ay, ay, ay, ay, Hernán... Y tú que sigues simplificando, y sin leer lo que escribo, o no queriendo entenderlo... La solución: http://www.saberweb.com.ar/prueba/divs4.htm Sobre esa misma página, simplemente añade 8 opciones más a #menu2 y #menu2b, y quita uno de los p del #contenido2. Ahora observa lo bonitos que quedan tus saludos al pie solapándose con el menú... Va a ser que no funciona del todo bien. Te sugiero estudiar a fondo el posicionamiento CSS. Te sugiero que no me des lecciones cuando no has entendido el problema. Es un poco cansino tener que explicarte 8 veces un mismo problema para que lo pilles y que luego trates a los demás con esa condescendencia. La noticia de ayer es que se pueden combinar entre sí, según la necesidad concreta que tengas. La noticia de hace siglos es que el posicionamiento absoluto se elimina del flujo del documento y no afecta a los demás contenedores (lo dice la especificación, no me lo he inventado yo), igual que tampoco hace crecer el contenedor en el cual se encuentra, por muy relative que éste sea. Por eso en tu diseño se solapa todo cuando las columnas laterales, posicionadas de forma absoluta, crecen más allá del contenido central. Por supuesto que SI sirve, dentro de contenedores relative. Sí, sí, ya lo veo, ya... Entonces, al menu y el contenido que tenías hasta ahora, los envuelves en un div contenedor (ya lo tienes en tu marcado, es ese div al que le has colocado el class=row). Tienes tu primera fila horizontal. Lo que demuestra que no has entendido el problema, porque si el menú posicionado absolutamente crece más que el contenido, como su tamaño no afecta a su propio contenedor, se sale de la fila, como un niño gamberro, y te chafa los saludos. Ahora vuelve a leer este párrafo, ligeramente modificado para ver si así lo pillas por fin: Imagina también que CUALQUIERA de las columnas, pueden tener distintas alturas, unas más altas que otras (YA SEA EL MENÚ, LOS CONTENIDOS O LAS DEMÁS COLUMNAS LATERALES), y que cualesquiera que sean esas alturas, el contenido inferior siempre debe quedar por debajo de LA COLUMNA MÁS ALTA, que empujará hacia abajo ese contenido. Pues eso. Try again... Saludín, Ramón. ___ 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ó: Ay, ay, ay, ay, ay, Hernán... Y tú que sigues simplificando, y sin leer lo que escribo, o no queriendo entenderlo... La solución: http://www.saberweb.com.ar/prueba/divs4.htm Sobre esa misma página, simplemente añade 8 opciones más a #menu2 y #menu2b, y quita uno de los p del #contenido2. Ahora observa lo bonitos que quedan tus saludos al pie solapándose con el menú... Va a ser que no funciona del todo bien. Si sabes que existe esa LIMITACION dada por la cantidad de opciones del menú, pues entonces tendrás la precaución de usar este esquema solo en sitios donde el menú es lo suficientemente breve. Además, si el menú es más largo que los contenidos, sospecho que debe haber algún problema de arquitectura de la información al armar ese menú, yo veo en la mayoría de sitios menúes más cortos que el contenido... Para cada problema hay que buscar la solución apropiada, no hay una sola solución universal. Mira Ramón, lamento que te molestes, pero yo solo tomé tus propios ejemplos donde tú decidiste usar posicionamiento absoluto. Un par de mensajes atrás hablábamos de cajas static flotadas con anchos en porcentajes, y no me respondiste cuáles anchos de columnas preferías. Cambiaste de ejemplos de pronto, sin responder las preguntas concretas que te hacía. En el mensaje anterior tú mismo pusiste estos ejemplos absolutos, y por eso los tomé como base. Si cambias el escenario en cada mensaje, no hay forma de terminar un diálogo productivo. Yo te sugiero que uses flotados dentro de contenedores, y aplícale overflow:auto a esos contenedores. Anchos de cajas en porcentajes y textos en EM. No hay nada mejor. Puedes tener menúes cortos, largos, medianos, lo que quieras... Funciona. Ni siquiera el W3C exige que el diseño líquido o elástico se sostenga más allá de un 200% de zoom. Para eso existen los magnificadores de pantalla. Cada cosa con su solución apropiada. 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
Retomo el hilo, tratando de cerrar el tema original:
Ramón Corominas escribió:
http://www.ramoncorominas.com/ovillo/2col/
- DIVS1: Con porcentajes, al ampliar las fuentes más allá de un
determinado tamaño, los contenedores se me comen el contenido.
Te invito a seguir un proceso de diseño lógico, partiendo de las
LIMITACIONES REALES, y no de unas arbitrarias medidas deseadas.
Si el cliente te da un menú como ése, y tú ves que el texto Hamsters
(que es el más largo que te ha dado) se te sale afuera, ¿por
qué no lo tomas en cuenta? Deberías hacerlo...
No es el diseño CSS el que debe ser adaptable, ES UNO MISMO el que
debe adaptar sus técnicas a cada proyecto, y manejar soluciones
apropiadas para distintos casos, sin buscar una solución única y
uniforme, igual para todos los casos.
Por ejemplo, aplica el MAXIMO de zoom del Firefox (aunque sea muchísimo
más del 200% recomendado por el W3C) y mira qué tanto se asoma la
palabra Hamsters.
Para el tamaño de letra que has aplicado al menú (considerándolo otro
requisito definido, no me lo cambies ahora!) si aplicas esto se elimina
tu problema:
#menu { width: 18%; }
#contenido { width: 66%; }
Probado a 800x600, 1024x768 y 1280x800.
Eso sí, me adelanto: si lo reduces a un extremo sumamente exagerado
claro que tendrá sus problemas. Pero la enorme mayoría de usuarios que
precisa hacer 500% de zoom creo que usa pantallas con resoluciones de
más de 800 x 600, no más chicas que eso. Además, para resoluciones
menores existe media:handheld.
Desde ya, a un zoom normal, el menú se verá bastante holgado, pero la
perfección absoluta no es una característica humana ni del diseño web
líquido o elástico... no debes pretender que el contenido se vea
exactamente igual en todos los tamaños, es imposible eso, ya sea con CSS
o con tablas.
- DIVS2: Mezclando ems y porcentajes con divs flotados, en cuanto el
menú crece un poco el segundo div se cae (no se me ocurre ninguna manera
de hacer que se encoja).
No tiene sentido plantear un layout con esa combinación. Es mezclar agua
y aceite. No perdamos tiempo.
- DIVS3/TABLAS: Con divs simulando tablas mediante propiedades de CSS,
obtengo lo que quiero, quedando exactamente igual que si utilizo una
maquetación con tablas reales. Desgraciadamente, esas propiedades no
funcionan bien con IE, por lo que la única opción cross-browser sería
maquetar con tablas de verdad
NO, no sería la única solución maquetar con tablas.
Una solución cross-browser sería que uses la simulación de tablas para
todos los navegadores, y agregues comentarios condicionales solo para
Explorer, que agreguen el código necesario para que se vea el contenido
(no dije idénticamente, solo que se vea) y para ese navegador puedes
usar porcentajes como en tu ejemplo 1. ¿Más trabajo? Sí. Pero
funciona. Sin tablas.
Sí, soy consciente de que esas medidas pueden ser casos extremos
Sí que son extremos! Has llevado el zoom de Firefox a su máximo posible.
No hay sitio que aguante a ese nivel, y por eso el W3C fija en 200% el
zoom máximo sin que se desarmen las cajas.
pero
no veo la razón para no querer que algunos de los contenedores crezcan
acorde con la fuente y que a la vez otros se adapten al espacio que
quede. Para mí es algo realmente útil.
Por más que a ti te guste o te sea muy útil, que lo comprendo, no es un
objetivo excluyente para hacer un buen sitio web al que incluso tú
puedas acceder con comodidad. El objetivo de una web es que se acceda a
los contenidos, si eso se cumple, la solución empleada es válida.
Pero de todos modos, el requerimiento de que los contenedores crezcan se
satisface con porcentajes (caso 1). No creo que debas seguir perdiendo
el tiempo intentando mezclar ems y porcentajes para lograr que los
contenedores crezcan.
Nota: he visto algún diseño con CSS a dos (y tres) columnas que usa una
técnica a través de márgenes en ems para hacer algo parecido a esto,
pero no termina de funcionarme bien del todo, es una pena.
Por favor! Compártenos el código al punto en que lo tengas, que
trataremos de hacerlo funcionar entre todos... :-)
Tú mismo has dicho unos mensajes atrás que estamos en una lista para
aprender los unos de los otros, si te guardas el código tal vez nos
estás privando a todos de llegar a una solución algo mejor que las
limitadas soluciones conocidas hasta ahora.
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
Hola de nuevo, Hernán. Si sabes que existe esa LIMITACION dada por la cantidad de opciones del menú, pues entonces tendrás la precaución de usar este esquema solo en sitios donde el menú es lo suficientemente breve. ¿Y tú cómo es que lo sabes? Quizá me expliqué mal, pero esto no se trata de menús vs. contenido, sino de COLUMNA A vs. COLUMNA B vs. COLUMNA N, unas al lado de otras, que miden alturas distintas, sin saber a priori cuál medirá más que la otra, e incluso pudiendo variar esas proporciones al aumentar la letra. Estoy hablando de soluciones genéricas, y tú me hablas de las particularidades de cada ejemplo que te propongo. Como te he explicado, EXISTE una posible solución GENÉRICA, que sirve en TODOS los casos, si se usa una maquetación con tablas/divs de tablas; el problema es que IE no pilla esto último, y la maquetación con tablas de verdad nos parece una guarrería semántica. Además, si el menú es más largo que los contenidos, sospecho que debe haber algún problema de arquitectura de la información al armar ese menú, yo veo en la mayoría de sitios menúes más cortos que el contenido... Y cuántos miles de sitios habrá donde existe una columna lateral con información complementaria que a veces se extiende más allá de los contenidos del artículo... Para cada problema hay que buscar la solución apropiada, no hay una sola solución universal. La solución que he aportado sí podría ser universal cuando todos los navegadores acepten display: table, etc. Las magníficas posibilidades de la maquetación con tablas, pero sin tablas. Mira Ramón, lamento que te molestes, pero yo solo tomé tus propios ejemplos donde tú decidiste usar posicionamiento absoluto. ¿Ah, sí? ¿Dónde he usado yo posicionamiento absoluto? Por más que miro no lo encuentro. Un par de mensajes atrás hablábamos de cajas static flotadas con anchos en porcentajes, y no me respondiste cuáles anchos de columnas preferías. Yo te había dicho claramente que quería ems para algunas de mis columnas porque los porcentajes no me servían al no ampliarse; sin embargo, tú decidiste prescindir de mis preferencias y preguntarme qué porcentajes de anchos quería. Cambiaste de ejemplos de pronto, sin responder las preguntas concretas que te hacía. Lo que hice fue no entrar en tu ejemplo, porque era claramente opuesto a lo que yo pedía. Si pregunto por peras y tú me das melones, pues no sé qué esperas que te responda, la verdad. En el mensaje anterior tú mismo pusiste estos ejemplos absolutos, y por eso los tomé como base. Por favor, vuelve a revisar mis ejemplos y dime dónde ves tú los absolutos, porque yo no me entero. Si cambias el escenario en cada mensaje, no hay forma de terminar un diálogo productivo. Venga, va, la última vez que explico el escenario: - Diseño líquido, que no haga sroll horizontal al aumentar el tamaño de letra (hasta un 200%). - N columnas, con contenidos desconocidos (no necesariamente menús, puede ser cualquier tipo de contenido) - La altura de cada columna es indeterminable a priori (por ejemplo, los contenidos se leen de una b.d.) - 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). - 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). - 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). 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. Yo te sugiero que uses flotados dentro de contenedores, y aplícale overflow:auto a esos contenedores. Anchos de cajas en porcentajes y textos en EM. No hay nada mejor. Puedes tener menúes cortos, largos, medianos, lo que quieras... Funciona. Sí hay algo mejor, so pena de IE, pero venga, lo dejo aquí que ya aburre. Para eso existen los magnificadores de pantalla. Supongo que nunca has usado un magnificador de pantalla... Un magnificador es un apaño para cuando las cosas no pueden hacerse de otra manera, igual que un lector de pantalla es un apaño para cuando no puedes ver. En mi caso, mi campo visual es reducido, con un agujero central en el que veo relativamente bien; otras personas tienen la visión al revés, ven mejor por el lateral y mal en
Re: [Ovillo] Trabajar con EMs
Hola de nuevo.
Por ejemplo, aplica el MAXIMO de zoom del Firefox (aunque sea muchísimo
más del 200% recomendado por el W3C)
Tengo curiosidad... ¿Qué entiendes tú por 200%? Tal y como está ese
menú, para llegar a aumentar su tamaño de letra en un 200% necesitas
pulsar 6 veces la tecla Ctrl + (al menos eso necesito yo). El máximo
zoom de FF3 son 8 pulsaciones de esa tecla. Yo entiendo que 200% es que
la letra mida el doble de lo que medía originalmente, ¿tú qué es lo que
entiendes?
Para el tamaño de letra que has aplicado al menú (considerándolo otro
requisito definido, no me lo cambies ahora!) si aplicas esto se elimina
tu problema:
#menu { width: 18%; }
#contenido { width: 66%; }
Sí, se elimina mi problema y se eliminan las medidas del diseño
original... Ya le puedo decir al diseñador: oye, que dice Hernán que en
lugar de poner 7% ponemos 18%, que así ya no da problemas. Solucionado
el problema. Gracias.
Desde ya, a un zoom normal, el menú se verá bastante holgado
Y distinto al diseño original, claro está...
No tiene sentido plantear un layout con esa combinación. Es mezclar
agua y aceite. No perdamos tiempo.
Aquí sí que me has dejado acojonao. Resulta que ESA combinación, que es
la que funciona PERFECTA, y que es lo que se ve en los layouts con
tablas, a ti te parece que es perder el tiempo y mezclar agua y aceite.
No, si al final lo de que CSS3 exista la función calc() [1] es una
pérdida de tiempo, no sé ni a quién se le habrá ocurrido semejante
tontería... :P Y luego me dirá a mí que estudie CSS...
agregues comentarios condicionales solo para Explorer, que agreguen el código
necesario para que se vea el contenido (no dije idénticamente, solo que se
vea)
Ajá, ahora lo he entendido, vale, te referías a hacer este apaño, que es
lo que haría ahora al encontrarme con un caso de estos, pero no deja de
ser un cambio al diseño original.
Sí que son extremos! Has llevado el zoom de Firefox a su máximo posible.
En ocasiones me he encontrado webs donde incluso con el máximo zoom de
Firefox, las tipografías no aumentan ni siquiera al 150% de su tamaño
original; o más frecuentemente, que aunque aumentes todo lo que puedas,
siguen siendo fuentes bastante pequeñas. Ah, eso sí, Firefox tiene una
posibilidad para establecer un tamaño mínimo de tipografía, pero eso
puede provocar que los diseños con porcentajes empiecen a descuadrarse
incluso antes de pulsar la tecla Control + una sola vez.
No hay sitio que aguante a ese nivel, y por eso el W3C fija en 200%
el zoom máximo sin que se desarmen las cajas.
El diseño con tablas que he puesto como ejemplo se ve perfecto y sin
solapamientos al máximo zoom.
El objetivo de una web es que se acceda a los contenidos, si eso se cumple,
la solución empleada es válida.
Creía que el objetivo de esta lista era buscar soluciones que no sólo
permitan acceder a los contenidos, sino también hacerlo adaptándonos a
posibles diseños raros que los diseñadores se inventen... Si no,
bastaría con poner un chorro de texto y se acabó.
No creo que debas seguir perdiendo el tiempo intentando mezclar ems y
porcentajes
para lograr que los contenedores crezcan.
Ok, pero no te olvides de avisar también al W3C de que dejen de perder
el tiempo con calculitos tontos... guiño
Por favor! Compártenos el código al punto en que lo tengas, que
trataremos de hacerlo funcionar entre todos... :-)
Tienes razón en este punto, mis disculpas. Los diseños de ese tipo que
vi eran de Ruthsarian [2] y Douglas Livingstone [3]. Lo cierto es que no
recuerdo muy bien cuáles eran los problemas, pero sé que no funcionaban
a la perfección.
En cualquier caso, quiero aclarar que todo esto no es una necesidad del
día a día, normalmente no se necesita algo tan específico, sólo un tema
traído aquí siguiendo el hilo sobre dar tamaños a los contenedores en
ems y las posibles razones, que yo creo que haberlas haylas.
Saludos,
Ramón.
[1] CSS3 values and units: The 'calc' function
http://www.w3.org/TR/css3-values/#calc
[2] Skidoo Too, de Ruthsarian
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/two_columns_left.html
[3] Mark #2, de Douglas Livingstone
http://www.redmelon.net/tstme/3cols2
___
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ó:
Tengo curiosidad... ¿Qué entiendes tú por 200%? Tal y como está ese
menú, para llegar a aumentar su tamaño de letra en un 200% necesitas
pulsar 6 veces la tecla Ctrl + (al menos eso necesito yo). El máximo
zoom de FF3 son 8 pulsaciones de esa tecla. Yo entiendo que 200% es que
la letra mida el doble de lo que medía originalmente, ¿tú qué es lo que
entiendes?
Entiendo eso mismo, es claro.
Pero los últimos 2 Control + ellos solos producen un aumento de 100%
extra (contado sobre el valor inicial).
Es decir, con los primeros 6 llegas al 200%, con los 8 posibles niveles
llegas aproximadamente al 300% del tamaño original (al menos eso medí a
ojo con la extensión MeasureIt de Firefox). Así que al menos con
Firefox, el máximo posible es un 300% (bastante por encima del 200%
mencionado por el W3C).
Para el tamaño de letra que has aplicado al menú (considerándolo otro
requisito definido, no me lo cambies ahora!) si aplicas esto se elimina
tu problema:
#menu { width: 18%; }
#contenido { width: 66%; }
Sí, se elimina mi problema y se eliminan las medidas del diseño
original... Ya le puedo decir al diseñador: oye, que dice Hernán que
en lugar de poner 7% ponemos 18%, que así ya no da problemas.
(te respondo abajo)
[3] Mark #2, de Douglas Livingstone
http://www.redmelon.net/tstme/3cols2
Fíjate cómo en este ejemplo al llegar a unos 5 control + en Firefox,
las palabras de la columna derecha se salen fuera de pantalla.
¿Qué debería hacer un diseñador ante este dato de la realidad?: yo creo
que ensanchar algo más esa columna...
Entonces, volvemos a la idea de que el proceso de diseño DEBE tener en
cuenta los CONTENIDOS, no puede consistir en una inspiración repentina
y rígida de un diseñador que no sabe las consecuencias posteriores al
pasar a XHTML y CSS sus diseños. Algo de eso hemos hablado ayer en otro
hilo...
No sirve un diseño descontextualizado de sus contenidos, y de las
limitaciones del HTML/CSS.
Si voy a crear el menú para una empresa de tuercas que colocará en su
menú vertical nombres como: Tuerca XZF-34678b opción JX34 tendré que
rechazar un diseño de un diseñador que se empeñe en sostener que ese
menú debe medir 50px de ancho... el diseño depende del contenido
muchas veces. Es un límite a tener en cuenta.
[2] Skidoo Too, de Ruthsarian
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/two_columns_left.html
En el último nivel de zoom del Firefox, me produce scroll horizontal (en
1280 x 800px). Pero voy a estudiarlo con tiempo, parece muy interesante.
Gracias por compartir los enlaces.
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
Hola a todos y gracias por las respuestas Yo no estoy de acuerdo en esta moda de usar cajas con tamaños en EM'S.Em es una unidad tipográfica destinada a controlar el tamaño y la proporción de las letras. Su objetivo no es controlar el tamaño de objetos, en caso de una web width y height. Bueno, el em en origen es una medida relacionada con las imprenta de tipos móviles, vamos, que si nos ponemos a mirar para que se creó esa unidad no tiene sentido que se use en un ordenador, pero no, las cosas y su utilización evolucionan y se transforman y, en mi opinión, ha pasado a ser una medida relativa al tamaño de fuente, lo cual no quiere decir que sea una medida solo para aplicar a fuentes, de hecho creo que es una herramienta muy buena que permite que el contenedor se adapte al contenido... ¿que mas queremos en web? Yo la primera vez que vi como se adaptaba la web de 456bereastreet [1] según hacía el texto mas grande o mas pequeño aluciné y me pareció el ideal para una web. En cualquier caso, el mayor peligro que le veo a trabajar *todo* en ems es que puede ser que las cajas empiecen a salirse de la pantalla y te obligue a hacer scroll horizontal, lo que es un rollo, sobre todo para una persona que tenga un problema visual, que será quien más probablemente aumentará el tamaño. Por esto mismo es por lo que quiero usar max-width el ancho se adapta al texto hasta que llega a el ancho de la ventana y entonces no se ancha mas, de modo que no sale scroll horizontal, por lo menos donde lo aceptan... el IE hay que apañar, claro. Sólo imagínense que tenemos una banda horizontal en la parte superior de 120 px de alto donde ponemos el nombre del sitio en una imagen. Ya sea porque usa una tipografía demasiado específica o porque hicimos un diseño a lo Google-en-fecha-señalada o lo que sea. Si aumentamos la fuente y las medidas de nuestro cabezal están dadas en unidades relativas a esta, puede llegar el momento en que una buena parte de la pantalla esté ocupada por este cabezal por lo que el usuario tendría que scrolear para llegar al texto que es en realidad lo que quiere ver más grande; y la idea es mejorar la lectura no hacerla más difícil. Completamente de acuerdo, no se trata de hacer el fanático y que tenga que estar todo en ems, en este caso estoy intentando que el alto de las cajas lo defina su contenido, y creo que me va a funcionar bien así gracias y saludos [1] http://www.456bereastreet.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] Trabajar con EMs
Pablo Suárez León escribió: Si defines el texto en ems y los contenedores en píxeles (por ejemplo) al aumentar el tamaño del texto, éste aumentará pero no sus contenedores, llegando un momento que los contenedores se comerán, literalmente, su contenido. No es tan así. Convengamos en que eso solo sucederá si además de ancho le pones un height a los contenedores, práctica para nada aconsejable. Pero si no pones ningún height, dejando fluir el alto del contenedor para que se ajuste a su contenido, ningún contenedor se comerá al texto. Por lo cual, no es tan mala la solución de combinar contenedores en pixeles y textos en EM (claro, habría que disponer de un CSS para media=handheld para que no queden unas columnas inusables en pantallas pequeñas). Otra cosa, es usar porcentajes en las cajas, en lugar de píxeles (por ejemplo)... Coincido en que ésa es una de las mejores combinaciones posibles. Los anchos de las cajas en porcentajes, y el texto en EM. Sin height en las cajas, por supuesto. Permite ampliar el texto para quien lo necesite, y no se supera nunca el ancho de pantalla (no hay scroll horizontal). Según las WCAG 2.0 recién salidas del horno, el texto debe poder ampliarse solo un 200% sin romper el diseño, no más. Es bastante más de lo que necesita un miope como yo... 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
Hernán Beati - SaberWeb.com.ar escribió: No es tan así. Convengamos en que eso solo sucederá si además de ancho le pones un height a los contenedores, práctica para nada aconsejable. Pero si no pones ningún height, dejando fluir el alto del contenedor para que se ajuste a su contenido, ningún contenedor se comerá al texto. Por lo cual, no es tan mala la solución de combinar contenedores en pixeles y textos en EM (claro, habría que disponer de un CSS para media=handheld para que no queden unas columnas inusables en pantallas pequeñas). Ni tan así :-) si el ancho del contenedor está limitado en px y aumentas el texto llega un momento en que una sola palabra puede ser mas ancha que el contenedor. Así que, o se sale del contenedor, o el contenedor se la come o aparece scroll... ___ 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
Pues sí... Pasa bastante a menudo cuando se usan esquemas de varias columnas. Los usuarios que realmente necesitan ampliar el tamaño de letra a veces lo amplían mucho más de lo que los diseñadores creen, y pasa lo que pasa: solapamientos, desapariciones de letras y demás cosas raras. Saludín, Ramón. Pablo Suárez León escribió: si el ancho del contenedor está limitado en px y aumentas el texto llega un momento en que una sola palabra puede ser mas ancha que el contenedor. ___ 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ó: Los usuarios que realmente necesitan ampliar el tamaño de letra a veces lo amplían mucho más de lo que los diseñadores creen, y pasa lo que pasa: solapamientos, desapariciones de letras y demás cosas raras. Pablo Suárez León escribió: si el ancho del contenedor está limitado en px y aumentas el texto llega un momento en que una sola palabra puede ser mas ancha que el contenedor. Yo no estoy de acuerdo en llevar los ejemplos al extremo (y soy de los que hacen control + en TODAS las páginas wbe, debido a mi miopía). Creo que nadie podría navegar sin un magnificador de pantalla si necesita un nivel tan enorme de zoom. Y al parecer es lo que han entendido en el W3C. No encuentro ahora mismo la referencia, pero según las nuevas WCAG 2.0, solo es necesario cuidar que el usuario pueda hacer hasta un 200% de zoom (si alguien tiene la referencia, por favor, se agradecerá que la comparta). Es un margen prudente, que depende de nuestra precaución y habilidad como diseñadores. Si vas a hacer una lista de largas URLS en una columna de 50px de ancho... bueno, pues como que no habrá ninguna solución para tan mala decisión. Pero si creas contenedores de al menos el doble de ancho de tu palabra más larga, asunto solucionado. Si el usuario es tan miope que necesita más del 200% de zoom, seguramente ya estará usando un magnificador de pantalla, y no precisará más del 200% mediante el zoom del navegador. Creo que es un buen punto para plantear en la lista de Accesibilidad del Sidar, AccesoWeb [1]. [1] http://es.groups.yahoo.com/group/accesoweb/ 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
Hola, Hernán. Efectivamente, eso es lo que dice el criterio 1.4.4 (nivel AA) de las WCAG 2.0, donde ponen un límite razonable del aumento del texto... Pero una cosa es lo que dice el W3C y otra lo que los usuarios realmente hacen (hacemos). Si te sirve de algo, yo tengo un problema visual bastante serio (por cierto, nada que ver con la miopía) y en ocasiones aumento el texto hasta un 400%, más o menos. Pero no porque me haga falta siempre ese aumento, sino más bien porque la medida 200% no quiere decir nada, en realidad, y no se aplica por igual a todas las partes de la página. Por ejemplo, si el diseñador usa (como a veces pasa) un tamaño de letra de unos 8-10px, aumentar eso al 200% sólo lo lleva a 16-20px, lo cual puede ser insuficiente para mí. El problema real suele suceder cuando existen múltiples tamaños de fuente combinados: al aumentar unos hasta que se puedan leer, otros resultan desproporcionadamente grandes, por lo que NO es un caso extremo, sino más bien una realidad que me encuentro día a día. Además, hay que tener en cuenta que no todas las fuentes tienen la misma legibilidad ni contraste. En mi caso, las fuentes más finas me resultan casi imposibles de leer incluso a tamaños grandísimos, mientras que puedo leer perfectamente una fuente pequeña con buen cuerpo o en negrita. Ah, y sí, puedo navegar sin un magnificador... guiño Un saludín, Ramón. Hernán Beati - SaberWeb.com.ar escribió: Creo que nadie podría navegar sin un magnificador de pantalla si necesita un nivel tan enorme de zoom. Y al parecer es lo que han entendido en el W3C. No encuentro ahora mismo la referencia, pero según las nuevas WCAG 2.0, solo es necesario cuidar que el usuario pueda hacer hasta un 200% de zoom (si alguien tiene la referencia, por favor, se agradecerá que la comparta). ___ 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
Hernán Beati - SaberWeb.com.ar escribió: No encuentro ahora mismo la referencia, pero según las nuevas WCAG 2.0, solo es necesario cuidar que el usuario pueda hacer hasta un 200% de zoom (si alguien tiene la referencia, por favor, se agradecerá que la comparta). Las técnicas de suficiencia en este punto [1] nos dicen en el punto 2 que nos aseguremos de que tanto texto como contenedores se puedan redimensionar y en el punto 4 que en el caso de que el texto redimensione y los contenedores no, nos aseguremos de que no se pierde contenido ni funcionalidad. [1] http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale ___ 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
Como alguien bien dijo la unidad em en realidad nace relacionada con la imprenta.Cuando diseñamos para imprimir usamos tamaños en milimetros, centímetros y en caso metros. No usamos ems para definir los tamaños de los fondos de los textos o las cajas. Esto trasladado a la web tiene coherencia en usar pixels. 2009/3/5 Pablo Suárez León psua...@technosite.es Hernán Beati - SaberWeb.com.ar escribió: No encuentro ahora mismo la referencia, pero según las nuevas WCAG 2.0, solo es necesario cuidar que el usuario pueda hacer hasta un 200% de zoom (si alguien tiene la referencia, por favor, se agradecerá que la comparta). Las técnicas de suficiencia en este punto [1] nos dicen en el punto 2 que nos aseguremos de que tanto texto como contenedores se puedan redimensionar y en el punto 4 que en el caso de que el texto redimensione y los contenedores no, nos aseguremos de que no se pierde contenido ni funcionalidad. [1] http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale ___ 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 -- ↓ Ignacio Ricci www.ignacioricci.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] Trabajar con EMs
La imprenta tiene muy poca relación con la web. Las analogías de este tipo creo que no tienen sentido. EM es una herramienta en el arsenal del maquetador, igual que los porcentajes o las medidas en píxeles, que tiene su aplicación en los casos en que se quiera relacionar los anchos con el tamaño del texto. Por tanto, creo que la discusión se debe centrar en si tiene sentido maquetar en relación al tamaño del texto. En esta línea, hay un par de circunstancias a considerar (en todos los casos, hasta donde yo se): *Las imágenes no se pueden definir en EMs sin pérdida de calidad. Habría que cargar una imagen suficientemente grande y dejar al navegador hacer el resampling, con el aumento de carga que eso supone. *Al aumentar suficientemente una maquetación en EMs, aparecerá scroll horizontal salvo que se tomen medidas específicas (max-width fijado con javascript?) *Los navegadores modernos permiten aumentar la página completa, haciendo el mismo trabajo que maquetar en EMs pero sin necesidad de romperse los cuernos *El problema del subpixel siempre está presente. Con los explorers redondeando hacia arriba y el resto ajustando, aparecen inconsistencias que hay que tratar. Por estos puntos, y alguno más ya tratado, mi opinión personal es que, salvo en casos muy particulares, maquetar por completo en EMs no da las suficientes ventajas frente a los inconvenientes. un saludo, David Ignacio Ricci escribió: Como alguien bien dijo la unidad em en realidad nace relacionada con la imprenta.Cuando diseñamos para imprimir usamos tamaños en milimetros, centímetros y en caso metros. No usamos ems para definir los tamaños de los fondos de los textos o las cajas. Esto trasladado a la web tiene coherencia en usar pixels. 2009/3/5 Pablo Suárez León psua...@technosite.es Hernán Beati - SaberWeb.com.ar escribió: No encuentro ahora mismo la referencia, pero según las nuevas WCAG 2.0, solo es necesario cuidar que el usuario pueda hacer hasta un 200% de zoom (si alguien tiene la referencia, por favor, se agradecerá que la comparta). Las técnicas de suficiencia en este punto [1] nos dicen en el punto 2 que nos aseguremos de que tanto texto como contenedores se puedan redimensionar y en el punto 4 que en el caso de que el texto redimensione y los contenedores no, nos aseguremos de que no se pierde contenido ni funcionalidad. [1] http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale ___ 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
Pablo Suárez León escribió: Las técnicas de suficiencia en este punto [1] nos dicen en el punto 2 que nos aseguremos de que tanto texto como contenedores se puedan redimensionar Gracias Pablo por la referencia! Dice que los contenedores se puedan redimensionar. Entonces acepto que no podemos usar píxeles para cajas. Nunca más. Pero podemos seguir usando porcentajes, que creo es la mejor solución. Los diseños líquidos son mencionados explícitamente en la misma referencia, en el punto: http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G146 el segundo enlace bajo el título: Techniques for text container resizing. y en el punto 4 que en el caso de que el texto redimensione y los contenedores no, nos aseguremos de que no se pierde contenido ni funcionalidad. [1] http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale Eso implícitamente acepta que podría ser que los contenedores no se redimensionen (que es lo que sucede con los diseños líquidos, en porcentajes, que solo se adaptan hasta el ancho de la ventana, no hacen scroll horizontal, y no tienen relación con el zoom). Entonces, si el diseñador contempló que hasta un 200% de zoom el texto no desborde de su contenedor en porcentajes, entonces se cumple la pauta, porque: 1) el contenido no se pierde, 2) ni la funcionalidad tampoco. Es algo que debe controlar el diseñador al tomar la decisión de qué ancho aplicará a una caja. Y aprovecho para responder a Ramón: ¿Seguro que no te sería útil un magnificador si precisas un 400% de zoom en todas las páginas? Es que creo que es imposible hacer un diseño a 2 columnas (ni soñar con 3!) que permita un 400% de zoom sin desbordar!... Por ejemplo, típico sitio de dos columnas, menú vertical a la izquierda, tenemos la palabra contáctenos en un cuerpo de 1em (lo que se traduce en unos 16px en la mayoría de navegadores), y esa palabra ocupará unos 100px de ancho en ese escenario. ¿Debo hacer esa columna de 400px de ancho como mínimo, solo por si acaso le haces un zoom del 400%? ¿Y cómo garantizo eso si el ancho de las cajas debe ser especificado en porcentajes? ¿Y qué hacemos con los huecos de 300px que quedarán solo por si acaso? Creo que no hay diseño que aguante eso... ¿tienes una solución, Ramón? ¿Algún sitio que al 400% de zoom no se desborde NADA, pero NADA de veras? 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
Ignacio Ricci escribió: Como alguien bien dijo la unidad em en realidad nace relacionada con la imprenta.Cuando diseñamos para imprimir usamos tamaños en milimetros, centímetros y en caso metros. No usamos ems para definir los tamaños de los fondos de los textos o las cajas. Esto trasladado a la web tiene coherencia en usar pixels. Creo que olvidamos una cosa... Diseñar para imprenta no es diseñar para web. Cuando se diseña para imprenta el tamaño es fijo. A4, A5, folio, cartel... La web es líquida, por lo cual el diseño para imprenta no sirve para web. O al menos, su filosofía es distinta. Yo no aumento el texto de la publicidad del alimerka (por ejemplo, si acaso uso una lupa) pero sí el de la web de alimerka. Son cosas distintas. Según yo lo veo, diseño impreso no es igual a diseño web. Y cuando se diseña para la web hay que tener en cuenta cosas que en el diseño impreso son impensables. ___ 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
Como alguien bien dijo la unidad em en realidad nace relacionada con la imprenta.Cuando diseñamos para imprimir usamos tamaños en milimetros, centímetros y en caso metros. No usamos ems para definir los tamaños de los fondos de los textos o las cajas. Esto trasladado a la web tiene coherencia en usar pixels. Personalmente creo que en general bastante intentamos hacer que se parezca la web al papel, que es uno de los grandes errores que cometemos diseñadores (y clientes que nos lo piden) así que este símil que propones lo veo desafortunadísimo. Sería afortunado si las ventanas y los textos no fueran escalables, pero lo son. Hace tiempo que estoy cada vez mas convencido (aunque no lo acabo de llevar del todo a la práctica, unos bocetos previos son un poco ineludibles) que la mejor manera de diseñar una web es directamente en html, pasando de diseñar primero en photoshop/illustrator/freehand/ gimp/etc al fin y al cabo ese es el medio en el que acabará. Resulta un poco como hacer un vestido en cerámica y luego pretender que en tela quede igual, pues no, la tela cae y se mueve, podrás hacer bocetos aproximativos del vestido a lápiz, y luego unos bocetos de patrón recortados en papel para calcular tamaños, pero una vez llegado a la tela, según quien se ponga el vestido quedará una cosa u otra. En el caso de esta web en ems al principio empece un poco con los cálculos de píxeles del contenido / pixeles del contenedor = dimensión del contenido en ems pero me di cuenta que la mejor manera es hacerte a los ems, e ir poniendo y viendo como queda, que quieres mas pones mas, que quieres menos menos, pero pasar del cálculo de cuantos ems son tantos píxeles y trabajar directamente en ems. Hasta aquí mi experiencia, que igual acaba todo en un churro :D ya os contaré. 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
Re: [Ovillo] Trabajar con EMs
Yo no comparto que se agrande una caja cuando se agrande la tipografía.Osea no lo encuentro ni en el sentido tampoco. Cual es el beneficio? 2009/3/5 Martin Etxauri t...@eragin.com Como alguien bien dijo la unidad em en realidad nace relacionada con la imprenta.Cuando diseñamos para imprimir usamos tamaños en milimetros, centímetros y en caso metros. No usamos ems para definir los tamaños de los fondos de los textos o las cajas. Esto trasladado a la web tiene coherencia en usar pixels. Personalmente creo que en general bastante intentamos hacer que se parezca la web al papel, que es uno de los grandes errores que cometemos diseñadores (y clientes que nos lo piden) así que este símil que propones lo veo desafortunadísimo. Sería afortunado si las ventanas y los textos no fueran escalables, pero lo son. Hace tiempo que estoy cada vez mas convencido (aunque no lo acabo de llevar del todo a la práctica, unos bocetos previos son un poco ineludibles) que la mejor manera de diseñar una web es directamente en html, pasando de diseñar primero en photoshop/illustrator/freehand/ gimp/etc al fin y al cabo ese es el medio en el que acabará. Resulta un poco como hacer un vestido en cerámica y luego pretender que en tela quede igual, pues no, la tela cae y se mueve, podrás hacer bocetos aproximativos del vestido a lápiz, y luego unos bocetos de patrón recortados en papel para calcular tamaños, pero una vez llegado a la tela, según quien se ponga el vestido quedará una cosa u otra. En el caso de esta web en ems al principio empece un poco con los cálculos de píxeles del contenido / pixeles del contenedor = dimensión del contenido en ems pero me di cuenta que la mejor manera es hacerte a los ems, e ir poniendo y viendo como queda, que quieres mas pones mas, que quieres menos menos, pero pasar del cálculo de cuantos ems son tantos píxeles y trabajar directamente en ems. Hasta aquí mi experiencia, que igual acaba todo en un churro :D ya os contaré. 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 -- ↓ Ignacio Ricci www.ignacioricci.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] Trabajar con EMs
Ignacio Ricci escribió: Yo no comparto que se agrande una caja cuando se agrande la tipografía.Osea no lo encuentro ni en el sentido tampoco. Cual es el beneficio? ¿Qué el diseño sea coherente y proporcionado independientemente del tamaño de la fuente? ___ 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
Perderías control sobre resoluciones de pantalla y correcta escalabilidad de cajas. 2009/3/5 Pablo Suárez León psua...@technosite.es Ignacio Ricci escribió: Yo no comparto que se agrande una caja cuando se agrande la tipografía.Osea no lo encuentro ni en el sentido tampoco. Cual es el beneficio? ¿Qué el diseño sea coherente y proporcionado independientemente del tamaño de la fuente? ___ 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 -- ↓ Ignacio Ricci www.ignacioricci.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] Trabajar con EMs
Yo no comparto que se agrande una caja cuando se agrande la tipografía.Osea no lo encuentro ni en el sentido tampoco. Cual es el beneficio? Desde luego llegados a un punto es una opción bastante personal, pero yo personalmente creo que el diseño (de lo que sea) es, lo primero, una interfaz para hacer mucho mas accesible, entendible, etc etc el contenido o la función (ya estemos hablando de diseño gráfico en papel de diseño industrial de arquitectura o de lo que sea) y dentro de esa lógica encuentro que el contenedor se adapte al contenido es un muy buen punto. Incluso metidos en estética, encuentro mucho mas estético que si el texto se agranda la caja se agrande, pero lo dicho, para gustos los colores :) 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
Re: [Ovillo] Trabajar con EMs
Ignacio Ricci escribió: Perderías control sobre resoluciones de pantalla y correcta escalabilidad de cajas. Todo lo contrario. Tomaría el control sobre ello. O más bien, le daría al usuario el control sobre ello. ___ 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
Perdón pero no entiendo. Tenes una caja de ancho no se, 8em. Con un parrafo adentro.Y tenes que hacer un sitio para una resolución de 800 x 600. Y empezas a hacer ctrl+ Podés controlar que el contenido no se exceda esa resolución sin hacer un contenedor en pixels? 2009/3/5 Pablo Suárez León psua...@technosite.es Ignacio Ricci escribió: Perderías control sobre resoluciones de pantalla y correcta escalabilidad de cajas. Todo lo contrario. Tomaría el control sobre ello. O más bien, le daría al usuario el control sobre ello. ___ 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 -- ↓ Ignacio Ricci www.ignacioricci.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] Trabajar con EMs
El problema está en que cuando tienes unidades móviles, no tiene sentido pensar en un sitio de 800x600, en ese caso tendrías un sitio 4x3 cualesquiera que fueran sus dimensiones finales. El 05/03/2009, a las 08:09 AM, Ignacio Ricci escribió: Perdón pero no entiendo. Tenes una caja de ancho no se, 8em. Con un parrafo adentro.Y tenes que hacer un sitio para una resolución de 800 x 600. Y empezas a hacer ctrl+ Podés controlar que el contenido no se exceda esa resolución sin hacer un contenedor en pixels? 2009/3/5 Pablo Suárez León psua...@technosite.es Ignacio Ricci escribió: Perderías control sobre resoluciones de pantalla y correcta escalabilidad de cajas. Todo lo contrario. Tomaría el control sobre ello. O más bien, le daría al usuario el control sobre ello. ___ 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 -- ↓ Ignacio Ricci www.ignacioricci.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 == **Las siguientes líneas son agregadas por los Servidores Centrales de la Oficina del Historiador de la Ciudad de la Habana.** -- http://correoweb.ohc.cu, para que leas tus mensajes de correo desde cualquier parte del mundo. ___ 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
Ignacio Ricci escribió: Perdón pero no entiendo. Tenes una caja de ancho no se, 8em. Con un parrafo adentro.Y tenes que hacer un sitio para una resolución de 800 x 600. Y empezas a hacer ctrl+ Podés controlar que el contenido no se exceda esa resolución sin hacer un contenedor en pixels? Sí, haciendo un contenedor en porcentaje al 100%. -- 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
Bueno pero estas cambiando de unidad también. Osea que en definitiva los tamaños de cajas en EM por si solos no funcionan. Tienen que estar atados a otras unidades como porcentajes o pixels. O relacionados con estilos como max-width. 2009/3/5 Hernán Beati - SaberWeb.com.ar her...@saberweb.com.ar Ignacio Ricci escribió: Perdón pero no entiendo. Tenes una caja de ancho no se, 8em. Con un parrafo adentro.Y tenes que hacer un sitio para una resolución de 800 x 600. Y empezas a hacer ctrl+ Podés controlar que el contenido no se exceda esa resolución sin hacer un contenedor en pixels? Sí, haciendo un contenedor en porcentaje al 100%. -- 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 -- ↓ Ignacio Ricci www.ignacioricci.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] Trabajar con EMs
Ignacio Ricci escribió: Perdón pero no entiendo. Tenes una caja de ancho no se, 8em. Con un parrafo adentro.Y tenes que hacer un sitio para una resolución de 800 x 600. Y empezas a hacer ctrl+ Podés controlar que el contenido no se exceda esa resolución sin hacer un contenedor en pixels? Podría, por ejemplo. Definir el contenedor principal en ems. De esta forma el usuario podrá aumentar y reducir su tamaño. Podría, definir el ancho de los contenedores, dentro de ese contenedor, en porcentaje. De esta forma se adaptarán al contenedor, independientemente del tamaño de texto elegido por el usuario. Podría, delimitar el ancho mínimo del contenedor, supongamos 800px. Con resoluciones inferiores a 800px aparecería scroll, cosa bastante razonable. Podría delimitar el ancho máximo, supongamos 100%. De esta forma no aparecería scroll horizontal y aparecerían márgenes a resoluciones muy grandes. Podría... ___ 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ó: en ocasiones aumento el texto hasta un 400%, más o menos. Pero no porque me haga falta siempre ese aumento, sino más bien porque la medida 200% no quiere decir nada, en realidad, y no se aplica por igual a todas las partes de la página. Por ejemplo, si el diseñador usa (como a veces pasa) un tamaño de letra de unos 8-10px, Otra vez los extremos... Es que pensar en esos extremos erróneos no era la meta, venimos buscando la solución ideal y creo que es clarísima a estas alturas: -Contenedores en porcentajes -Textos en em. Si el texto está BIEN estructurado en em, partiendo de 1em como mínimo (unidad que tú mismo, Ramón, decides qué tan grande es, ya que eres el usuario y tienes el control), entonces podrás hacerles un 400% de zoom al texto o más, y los contenedores no excederán el ancho de tu pantalla. ¿No es ésta la solución ideal? -- 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
Es lo que digo yo. Cajas en EM es complicarse la vida y es poco controlable. 2009/3/5 Hernán Beati - SaberWeb.com.ar her...@saberweb.com.ar Ramón Corominas escribió: en ocasiones aumento el texto hasta un 400%, más o menos. Pero no porque me haga falta siempre ese aumento, sino más bien porque la medida 200% no quiere decir nada, en realidad, y no se aplica por igual a todas las partes de la página. Por ejemplo, si el diseñador usa (como a veces pasa) un tamaño de letra de unos 8-10px, Otra vez los extremos... Es que pensar en esos extremos erróneos no era la meta, venimos buscando la solución ideal y creo que es clarísima a estas alturas: -Contenedores en porcentajes -Textos en em. Si el texto está BIEN estructurado en em, partiendo de 1em como mínimo (unidad que tú mismo, Ramón, decides qué tan grande es, ya que eres el usuario y tienes el control), entonces podrás hacerles un 400% de zoom al texto o más, y los contenedores no excederán el ancho de tu pantalla. ¿No es ésta la solución ideal? -- 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 -- ↓ Ignacio Ricci www.ignacioricci.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] Trabajar con EMs
Martin Etxauri escribió: Hace tiempo que estoy cada vez mas convencido (aunque no lo acabo de llevar del todo a la práctica, unos bocetos previos son un poco ineludibles) que la mejor manera de diseñar una web es directamente en html, pasando de diseñar primero en photoshop/illustrator/freehand/ gimp/etc al fin y al cabo ese es el medio en el que acabará. Resulta un poco como hacer un vestido en cerámica y luego pretender que en tela quede igual, pues no, la tela cae y se mueve, podrás hacer bocetos aproximativos del vestido a lápiz, y luego unos bocetos de patrón recortados en papel para calcular tamaños, pero una vez llegado a la tela, según quien se ponga el vestido quedará una cosa u otra. Me encantó la metáfora!! De veras que los diseñadores (sobre todo quienes vienen de gráfica) usando el Photoshop y otros similares a veces crean diseños tan duros como si fueran hechos de cerámica, jaja! Pero igual creo que es necesario partir de bocetos en imagen (algo imprescindible para que un cliente te apruebe un diseño!), y luego llevarlos a XHTML y CSS, siempre y cuando tengamos presente desde un principio la elasticidad o liquidez del diseño. Pero para esto, el diseñador que hizo el boceto en Photoshop DEBE CONOCER lo suficiente de CSS y XHTML como para no hacer diseños que luego sea imposible trasladar a código... si no lo sabe (o si no hay nadie que lo corrija a tiempo), se corre el riesgo de que el cliente apruebe cosas que después no hay otro modo de implementarlas que usando anchos fijos... 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
shameless plugin Es un sitio que codeé ya hace un par de años, así que a no juzgar la estética ni el código. El diseño es elástico y funciona bastante bien crossbrowser. http://www.efectoscluster.com.ar /shameless plugin Digo, el chiste es verlo en IE6, o en cualquier otro navegador moderno con el zoom text activado y el zoom verdadero (o como sea que se llame) desactivado. ___ 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
De ahí ya se puede sacar una conclusión, aquí la sacamos hace mucho pero está bien que quede asentada en alguna parte. Si es producto final es Web al cliente hay que mostrarle Web. Los bocetos, maquetas o como lo llamen TIENEN que ser HTML+CSS a veces también ayuda incluir un demo si la cosa va de Flash y en dependencia de la importancia que le demos al cliente en cuestión. El 05/03/2009, a las 08:49 AM, Hernán Beati - SaberWeb.com.ar escribió: Martin Etxauri escribió: Hace tiempo que estoy cada vez mas convencido (aunque no lo acabo de llevar del todo a la práctica, unos bocetos previos son un poco ineludibles) que la mejor manera de diseñar una web es directamente en html, pasando de diseñar primero en photoshop/illustrator/freehand/ gimp/etc al fin y al cabo ese es el medio en el que acabará. Resulta un poco como hacer un vestido en cerámica y luego pretender que en tela quede igual, pues no, la tela cae y se mueve, podrás hacer bocetos aproximativos del vestido a lápiz, y luego unos bocetos de patrón recortados en papel para calcular tamaños, pero una vez llegado a la tela, según quien se ponga el vestido quedará una cosa u otra. Me encantó la metáfora!! De veras que los diseñadores (sobre todo quienes vienen de gráfica) usando el Photoshop y otros similares a veces crean diseños tan duros como si fueran hechos de cerámica, jaja! Pero igual creo que es necesario partir de bocetos en imagen (algo imprescindible para que un cliente te apruebe un diseño!), y luego llevarlos a XHTML y CSS, siempre y cuando tengamos presente desde un principio la elasticidad o liquidez del diseño. Pero para esto, el diseñador que hizo el boceto en Photoshop DEBE CONOCER lo suficiente de CSS y XHTML como para no hacer diseños que luego sea imposible trasladar a código... si no lo sabe (o si no hay nadie que lo corrija a tiempo), se corre el riesgo de que el cliente apruebe cosas que después no hay otro modo de implementarlas que usando anchos fijos... 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 == **Las siguientes líneas son agregadas por los Servidores Centrales de la Oficina del Historiador de la Ciudad de la Habana.** -- http://correoweb.ohc.cu, para que leas tus mensajes de correo desde cualquier parte del mundo. ___ 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
Julián Landerreche escribió: 1) para tu caja contenedora (aka wrapper, container, contenedor, etc) definí un min-width en píxeles (760px, por ejemplo) 2) y un max-width en ems (ej: 80em) 4) obviamente, definís tu font en el body en ems, o en porcentajes creo que también resulta. Me parece una excelente solución, Julián! De hecho, todavía estoy buscando si tiene alguna contraindicación, y no se la encuentro. Encontraste el santo grial!! jaja!!... 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
Hola, buenas. -Contenedores en porcentajes -Textos en em. En general sí, claro, pero no siempre. Si el texto está BIEN estructurado en em, partiendo de 1em como mínimo (unidad que tú mismo, Ramón, decides qué tan grande es, ya que eres el usuario y tienes el control) Eso es una interesante teoría... En la gran mayoría de sitios web, es el diseñador el que define (más o menos) cuánto vale 1em en las condiciones normales (texto mediano en IE, por ejemplo). Al aumentar o reducir, raramente todas las fuentes se amplían de la misma manera, proque entra a jugar la anidación de contenedores con tamaños de fuentes definidos en ems distintos de 1.0em. Ahí es donde, de repente, unas fuentes se amplían más que otras, y te encuentras con que para leer algunas fuentes que originalmente eran pequeñísimas, otras se amplían una barbaridad y lo descuadran todo. Claro, es cuestión del diseñador que lo hizo mal, pero llegar al control perfecto es a veces muy, muy complicado. entonces podrás hacerles un 400% de zoom al texto o más, y los contenedores no excederán el ancho de tu pantalla. Y en cualquier caso, lo ideal sería poder combinar tamaños de contenedores, es por eso por lo que a veces un layout con tablas podría hacer cosas que no es posible hacer con CSS (salvo con propiedades CSS que simulen tablas, claro). Por ejemplo, yo daría algo por poder usar un esquema a 2 columnas donde: - El conjunto tenga un ancho del 100% - La parte izquierda tenga un ancho de 12em (por ejemplo) - La parte derecha tenga un ancho de (100% - 12.1em). Con tablas es trivial, sin ellas... Un saludín, Ramón. ___ 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ó: Hernán Beati escribió: Si el texto está BIEN estructurado en em, partiendo de 1em como mínimo (unidad que tú mismo, Ramón, decides qué tan grande es, ya que eres el usuario y tienes el control) Eso es una interesante teoría... En la gran mayoría de sitios web ...Stop. Estoy tratando de encontrar una solución, Ramón, no quiero criticar más lo mal hecho, estoy tratando de ver cómo deberíamos HACERLO BIEN. Por ahora, a falta de algo mejor, me quedo con los contenedores en porcentaje y las fuentes en em. Nadie (ni tú) ofrece otra solución mejor (salvo lo que aportó Julián hace unas horas, que me gustó mucho pero todavía debo estudiarlo con mayor detenimiento). yo daría algo por poder usar un esquema a 2 columnas donde: - El conjunto tenga un ancho del 100% - La parte izquierda tenga un ancho de 12em (por ejemplo) - La parte derecha tenga un ancho de (100% - 12.1em). ¿Y por qué no habría de servirte un sitio con las dos columnas en porcentajes, con 20% / 80% para las dos columnas, por decir una proporción cualquiera? ¿Cuál sería tu problema con ese diseño? 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
Hola, Hernán. ...Stop. Estoy tratando de encontrar una solución, Ramón, no quiero criticar más lo mal hecho, estoy tratando de ver cómo deberíamos HACERLO BIEN. Claro, si lo que digo es que no hay un método que sirva siempre y en todos los casos. En algunos diseños, puede ser que al diseñador le dé por poner una fuente minúscula por defecto, porque le interesa presentar mucha información a la vez, y se encuentra con contenedores demasiado estrechos para que la fuente pueda aumentar cómodamente hasta tamaños razonables. Por ejemplo, imagina que parto de un diseño con una fuente muy pequeña (aprox. 10px, con un reset en el body para la asignación em/px); dentro de unos contenedores estrechos, esa fuente puede caber bien, pero si yo trato de aumentarla para poder verla, tal vez necesito ampliarla tanto que ya no cabe en esos contenedores o se corta. El porcentaje no me resuelve nada, porque el 10% de 800px siempre son 80px, una medida que no cambiará al aumentar la letra. Nadie (ni tú) ofrece otra solución mejor (salvo lo que aportó Julián hace unas horas, que me gustó mucho pero todavía debo estudiarlo con mayor detenimiento). En algunos casos, un diseño con tablas podría ser efectivo (o con tablas simuladas si IE las pillara). ¿Y por qué no habría de servirte un sitio con las dos columnas en porcentajes, con 20% / 80% para las dos columnas, por decir una proporción cualquiera? ¿Cuál sería tu problema con ese diseño? Por lo que ya he comentado más arriba, el 10% de 800px son 80px SIEMPRE. Mi menú lateral estará confinado a 80px fijos que no darán para mucho si la fuente crece. Sin embargo, si son 12em, por ejemplo, el menú izquierdo aumentará de ancho, y la parte derecha se contraerá a la vez. Llegará un punto donde la parte derecha se encoja mucho, pero en general el resultado será aceptable hasta escalas muy grandes. Saludos, Ramón. ___ 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ó: El porcentaje no me resuelve nada, porque el 10% de 800px siempre son 80px, una medida que no cambiará al aumentar la letra. Sí, 10% del algo es muy poco de ese algo, ¿qué tal 50%? ¿40 y 60%? ¿30 y 70%? ¿Y por qué no habría de servirte un sitio con las dos columnas en porcentajes, con 20% / 80% para las dos columnas, por decir una proporción cualquiera? ¿Cuál sería tu problema con ese diseño? Por lo que ya he comentado más arriba, el 10% de 800px son 80px SIEMPRE. ¿Quién defiende el DIEZ por ciento? Yo no. Dije 20/80%. Pero pongamos 30/70, o 60/40. Díme tú cuánto quieres y te lo hago, hombre! Quiero ese número que te dejaría contento!... Mi menú lateral estará confinado a 80px fijos que no darán para mucho si la fuente crece. Sin embargo, si son 12em, por ejemplo, el menú izquierdo aumentará de ancho, y la parte derecha se contraerá a la vez. Llegará un punto donde la parte derecha se encoja mucho, pero en general el resultado será aceptable hasta escalas muy grandes. ¿Qué porcentaje concreto te parecería aceptable para que yo maquete una web en porcentajes a DOS columnas? Columna 1:% Columna 2: ¿Y qué porcentaje para una a TRES columnas? Columna 1:% Columna 2: Columna 3: Si me respondes concretamente eso, habré aprendido algo de una persona con mayores dificultades visuales que las mías, y aplicaré lo aprendido en mis futuros sitios. Muchas gracias. 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
2009/3/5 Hernán Beati - SaberWeb.com.ar her...@saberweb.com.ar
Julián Landerreche escribió:
1) para tu caja contenedora (aka wrapper, container, contenedor,
etc)
definí un min-width en píxeles (760px, por ejemplo)
2) y un max-width en ems (ej: 80em)
4) obviamente, definís tu font en el body en ems, o en porcentajes creo
que
también resulta.
Me parece una excelente solución, Julián!
De hecho, todavía estoy buscando si tiene alguna contraindicación, y
no se la encuentro. Encontraste el santo grial!! jaja!!...
Me alegro que te haya gustado.
El mérito es de Roger Johansson, y probablemente otros que experimentaron
esa idea hace ya un tiempo.
Debo aclarar que en mi opinión, un diseño elástico en ems tiene sus
limitaciones, particularmente relacionadas con el diseño estético que puedas
adaptar a ellas. Me parece que va bien en sitios que tienen mucho texto y
pocas imágenes (backgrounds), particularmente imágenes decorativas que
tengan el ancho fijo.
Agrego un paso 5:
5) definir las columnas en porcentajes (que sumen 99%, y evitar el 100%, por
cuestiones de redondeo de los navegadores).
Por ejemplo, si tenés un #principal y un #secundario, podés ponerles 69% y
29%, dejando un 1% de gap.
Y explico los otros 4 pasos:
1) para tu caja contenedora (aka wrapper, container, contenedor, etc)
definí un min-width en píxeles (760px, por ejemplo)
Hoy por hoy, no tiene sentido que un sitio tenga menos de 760 píxeles de
ancho.
2) y un max-width en ems (ej: 80em)
Así, en monitores grandes, el ancho máximo está en función del tamaño de la
fuente, y no al 100%.
3) en tu hoja de IE6, podés poner:
* html #container {
width: 80em; /* o lo que te plazca para que degrade agraciadamente
(sic) cuando no hay JS */
width: expression( document.body.clientWidth 800 ? auto : 80em );
}
Esto es simplemente el truco que hace que la cosa funcione de manera
aceptable en IE6 (con JS habilitado)
4) obviamente, definís tu font en el body en ems, o en porcentajes creo que
también resulta.
Aqui no hay mucha ciencia, pero sí mucho rompedero de cabeza, con el tema de
como se heredan los ems en la cascada.
Saludos,
Julián
___
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
Hola, Hernán y todos. Sí, 10% del algo es muy poco de ese algo, ¿qué tal 50%? ¿40 y 60%? ¿30 y 70%? ¿Y qué tal si soy yo quién decide cuánto quiere que mida cada columna en MI diseño? 10% es poco según para qué cosas, en algunos casos puedo querer un menú minimalista (o lo ha querido el diseñador), que mida tan poco como eso, o incluso menos (ver el ejemplo más abajo). El tema creo que es aportar una solución que sea válida también para los casos extremos, y no poner tú las condiciones de lo que puedo o no puedo diseñar. ¿Quién defiende el DIEZ por ciento? Yo no. Dije 20/80%. Pero pongamos 30/70, o 60/40. Díme tú cuánto quieres y te lo hago, hombre! Quiero ese número que te dejaría contento!... YO defiendo el 10%, de hecho defiendo el 7%, porque sí, porque quiero que sea ese el tamaño por defecto de mi menú. Y quiero que si se amplía la fuente no se me descuadre todo, y que se lea bien, y que todo fluya y no haga scroll horizontal... ¿Qué porcentaje concreto te parecería aceptable para que yo maquete una web en porcentajes a DOS columnas? Columna 1:% Columna 2: Columna 1: 4.5em Columna 2: el resto hasta el 100% ¿Por qué voy a darte porcentajes si te estoy diciendo que lo que quiero es otra cosa? Quiero ems, porque los ems crecen y los porcentajes no. Quiero que mi menú ridículamente ancho por defecto crezca grácilmente cuando amplíe el tamaño de la letra dejando, eso sí, menos espacio para el contenido, que de todos modos seguirá siendo bastante ancho. ¿Y qué porcentaje para una a TRES columnas? Columna 1:% Columna 2: Columna 3: Por la misma razón, puedo querer 5em y 7em para las dos columnas laterales, y una columna central que me ocupe el resto del espacio (100% - 12em). Quiero que mis columnas laterales se hagan más anchas cuando se amplíe el tamaño de letra, y que sea la columna central la que se haga más estrecha. ¿Y por qué lo quiero? Pues porque me da la gana y porque es posible... Al menos usando tablas (o tablas CSS). Y como es muy difícil explicar estas cosas con palabras, ahí va el ejemplo de lo que quiero (disculpad los márgenes, paddings, etc., sólo se trata de una prueba de concepto). Para las pruebas he usado Firefox 3 (desactivando el escalado tipo zoom) en 1024x768, en IE6 me ha hecho cosas raras y no me voy a poner a corregirlo para lo que es... http://www.ramoncorominas.com/ovillo/2col/ Mi conclusión es: - DIVS1: Con porcentajes, al ampliar las fuentes más allá de un determinado tamaño, los contenedores se me comen el contenido. - DIVS2: Mezclando ems y porcentajes con divs flotados, en cuanto el menú crece un poco el segundo div se cae (no se me ocurre ninguna manera de hacer que se encoja). - DIVS3/TABLAS: Con divs simulando tablas mediante propiedades de CSS, obtengo lo que quiero, quedando exactamente igual que si utilizo una maquetación con tablas reales. Desgraciadamente, esas propiedades no funcionan bien con IE, por lo que la única opción cross-browser sería maquetar con tablas de verdad (no, no estoy recomendando eso, sólo exponiendo el problema). Sí, soy consciente de que esas medidas pueden ser casos extremos, pero no veo la razón para no querer que algunos de los contenedores crezcan acorde con la fuente y que a la vez otros se adapten al espacio que quede. Para mí es algo realmente útil. Nota: he visto algún diseño con CSS a dos (y tres) columnas que usa una técnica a través de márgenes en ems para hacer algo parecido a esto, pero no termina de funcionarme bien del todo, es una pena. En fin, espero haberme explicado bien esta vez guiño Un saludín, Ramón. ___ 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] Trabajar con EMs
Aupa Me he lanzado a maquetar una web (casi lo llamaría portal) trabajando con EMs, tanto en el texto como en las dimensiones de los elementos. De manera que en IE se pueda escalar el texto y que a su vez al escalar el texto se redimensionen las cajas etc. Y me han surgido un par de cosas que me gustaría comentar. Una es que al utilizar EMs en bordes y cosas por el estilo me hace cosas raras, por ejemplo, si tengo un borde de 0.1em y lo cambio a 0.2em no noto diferencia alguna, y sin embargo al ponerlo en 0.3em salta a algo mas gordo. Y así con varias cosas. He estado buscando y ya he encontrado cosas como el Text Sizing de thenoodleincident [1] pero como veo que en esta lista hay gente muy experimentada :D ¿tenéis alguna experiencia de este tipo? ¿alguien tiene conocimiento de algún peligro que me pueda acechar trabajando con EMs? En principio ya estoy viendo que para los border mejor uso pixeles... pero para tamaño de texto, dimensiones, margins y paddings tengo toda la intención de trabajar con EMs. Otra cuestión es que quiero utilizar max-width pero IE6 no lo pilla (si no me equivoco IE7 y posteriores si). Ya he encontrado soluciones como incluir expression y añadir algo de javascript, o poner un hack y poner solo para IE widht a secas que en la práctica funciona como si fuera max-width. Pero no se si habrá algo mejor... aunque la verdad sea dicha, los detalles en IE6 cada vez importan menos :D gracias a todos y perdón por el preguntonismo. saludos [1] http://www.thenoodleincident.com/tutorials/typography/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] Trabajar con EMs
Yo no estoy de acuerdo en esta moda de usar cajas con tamaños en EM'S.Em es una unidad tipográfica destinada a controlar el tamaño y la proporción de las letras. Su objetivo no es controlar el tamaño de objetos, en caso de una web width y height. Es como medir en centilitros, centímetros. No es la medida correcta. Si ustedes me dicen que quieran usar ems en tamaño de una caja para que la caja se vea afectada y tenga una mejor adaptación con el texto dentro de ella, está bien. Pero de todas maneras no lo comparto por lo mismo que dije antes, aparte al no ser una unidad de medida destinada para eso, es bastante arbitrario definir anchos y tamaños. Yo solo uso em's en font-size y punto. No entiendo la gente que vino con esta moda rara. Nacho 2009/3/4 Martin Etxauri t...@eragin.com Aupa Me he lanzado a maquetar una web (casi lo llamaría portal) trabajando con EMs, tanto en el texto como en las dimensiones de los elementos. De manera que en IE se pueda escalar el texto y que a su vez al escalar el texto se redimensionen las cajas etc. Y me han surgido un par de cosas que me gustaría comentar. Una es que al utilizar EMs en bordes y cosas por el estilo me hace cosas raras, por ejemplo, si tengo un borde de 0.1em y lo cambio a 0.2em no noto diferencia alguna, y sin embargo al ponerlo en 0.3em salta a algo mas gordo. Y así con varias cosas. He estado buscando y ya he encontrado cosas como el Text Sizing de thenoodleincident [1] pero como veo que en esta lista hay gente muy experimentada :D ¿tenéis alguna experiencia de este tipo? ¿alguien tiene conocimiento de algún peligro que me pueda acechar trabajando con EMs? En principio ya estoy viendo que para los border mejor uso pixeles... pero para tamaño de texto, dimensiones, margins y paddings tengo toda la intención de trabajar con EMs. Otra cuestión es que quiero utilizar max-width pero IE6 no lo pilla (si no me equivoco IE7 y posteriores si). Ya he encontrado soluciones como incluir expression y añadir algo de javascript, o poner un hack y poner solo para IE widht a secas que en la práctica funciona como si fuera max-width. Pero no se si habrá algo mejor... aunque la verdad sea dicha, los detalles en IE6 cada vez importan menos :D gracias a todos y perdón por el preguntonismo. saludos [1] http://www.thenoodleincident.com/tutorials/typography/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 -- ↓ Ignacio Ricci www.ignacioricci.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] Trabajar con EMs
Supongo que esa moda rara se debe al hecho de que las demás unidades de medida no se adaptan a los cambios en los tamaños de las fuentes... Si hubiera una unidad de medida, no sé, llamémosla pixescalables, sería otro cantar. En cualquier caso, el mayor peligro que le veo a trabajar *todo* en ems es que puede ser que las cajas empiecen a salirse de la pantalla y te obligue a hacer scroll horizontal, lo que es un rollo, sobre todo para una persona que tenga un problema visual, que será quien más probablemente aumentará el tamaño. Además, creo que al aumentar el tamaño del texto no siempre es bueno que aumenten también los márgenes, bordes, etc., en realidad si los márgenes son suficientes y dejan aire al texto, puede ser mejor mantenerlos en una misma medida en pixels. Por ejemplo, la separación entre un menú lateral y el contenido puede ser siempre de 20 px, no hace falta aumentarla proporcionalmente cuando crezca el texto. Un saludo, Ramón. ___ 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
Ignacio Ricci escribió: Yo no estoy de acuerdo en esta moda de usar cajas con tamaños en EM'S.Em es una unidad tipográfica destinada a controlar el tamaño y la proporción de las letras. Su objetivo no es controlar el tamaño de objetos, en caso de una web width y height. Es como medir en centilitros, centímetros. No es la medida correcta. Si ustedes me dicen que quieran usar ems en tamaño de una caja para que la caja se vea afectada y tenga una mejor adaptación con el texto dentro de ella, está bien. Pero de todas maneras no lo comparto por lo mismo que dije antes, aparte al no ser una unidad de medida destinada para eso, es bastante arbitrario definir anchos y tamaños. Yo solo uso em's en font-size y punto. No entiendo la gente que vino con esta moda rara. Nacho A mí no me parece en absoluto una moda, más bien todo lo contrario. Si defines el texto en ems y los contenedores en píxeles (por ejemplo) al aumentar el tamaño del texto, éste aumentará pero no sus contenedores, llegando un momento que los contenedores se comerán, literalmente, su contenido. Si un diseño es elástico, lo es todo el diseño, no sólo el texto. Otra cosa, es usar porcentajes en las cajas, en lugar de píxeles (por ejemplo)... Quizás se esté midiendo centilitros en centímetros... cúbicos ___ 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
Lo que debe existir es un equilibrio y que quede bien determinado lo que necesuta crecer y lo que no. Hay contenidos que no son parte importante de la presentación y que no tiene sentido que aumente o disminuyan de tamaño en función de las necesidades del usuario, aunque podría conseguirse no me parece útil. Sólo imagínense que tenemos una banda horizontal en la parte superior de 120 px de alto donde ponemos el nombre del sitio en una imagen. Ya sea porque usa una tipografía demasiado específica o porque hicimos un diseño a lo Google-en-fecha-señalada o lo que sea. Si aumentamos la fuente y las medidas de nuestro cabezal están dadas en unidades relativas a esta, puede llegar el momento en que una buena parte de la pantalla esté ocupada por este cabezal por lo que el usuario tendría que scrolear para llegar al texto que es en realidad lo que quiere ver más grande; y la idea es mejorar la lectura no hacerla más difícil. Por eso en muchos casos lo que hacemos es dejar algunas medidas fijas, pretendiendo, eso sí, que el resto del diseño se acomode si es necesario para seguirse mostrando correctamente. No es difícil, sólo hay que detenerse a pensarlo un poco. PB El 04/03/2009, a las 03:52 PM, Ramón Corominas escribió: Supongo que esa moda rara se debe al hecho de que las demás unidades de medida no se adaptan a los cambios en los tamaños de las fuentes... Si hubiera una unidad de medida, no sé, llamémosla pixescalables, sería otro cantar. En cualquier caso, el mayor peligro que le veo a trabajar *todo* en ems es que puede ser que las cajas empiecen a salirse de la pantalla y te obligue a hacer scroll horizontal, lo que es un rollo, sobre todo para una persona que tenga un problema visual, que será quien más probablemente aumentará el tamaño. Además, creo que al aumentar el tamaño del texto no siempre es bueno que aumenten también los márgenes, bordes, etc., en realidad si los márgenes son suficientes y dejan aire al texto, puede ser mejor mantenerlos en una misma medida en pixels. Por ejemplo, la separación entre un menú lateral y el contenido puede ser siempre de 20 px, no hace falta aumentarla proporcionalmente cuando crezca el texto. Un saludo, Ramón. ___ 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 == **Las siguientes líneas son agregadas por los Servidores Centrales de la Oficina del Historiador de la Ciudad de la Habana.** -- http://correoweb.ohc.cu, para que leas tus mensajes de correo desde cualquier parte del mundo. ___ 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
