[Ovillo] Definición de fuentes en proyecto grand e
Buenos días:
Voy a acometer el rediseño de una web bastante grande, que conllevará una
nueva hoja de estilos.
En la primera versión, decidimos crear estilos individuales para cada tipo
de texto, es decir, que esos estilos sólo contenían información relativa a
la fuente, nada de paddings, margins, etc. Por ejemplo:
.text_12{
color:#000;
font-size:12px;
text-decoration:none;
}
El objetivo era obtener un juego de fuentes que pudiesen reutilizarse en
todo el site, sin importar su contenedor. Aún así, de este modo llegamos a
crear más de 80 estilos de texto diferentes, por las diversas variaciones de
color, bold, tamaños, etc.
Me parecen mucho estilos y pensaba optimizar el número de estilos relativos
a fuentes mediante diversas pautas:
- Usando em's y estableciendo con el diseñador una jerarquía de tamaños en
todas las páginas de la web. De este modo, se definiría un tamaño para los
títulos, otro para subtítulos y así sucesivamente.
- Creando clases para la alineación. Por ejemplo, .left{text-align:left;},
.justify{text-align:justify;}, etc.
- Emplear strong y em para las negritas y cursivas en lugar de crear
clases nuevas para un mismo estilo de fuente cuando solamente cambian estas
propiedades.
- Crear clases individuales para modificar el color de la fuente. Por
ejemplo: .blanco{color:#FFF;}
Las clases se aplicarían en el html del siguiente modo:
div class=titulo blanco justifyemCassanova/em/div
Donde resultaría que el texto se mostraría con el tamaño definido en titulo,
aparecería justificado en cursiva y en color blanco.
De este modo pienso que con un número reducido de clases podría tener una
gran combinación de estilos de fuentes para combinar en el site.
¿Qué os oparece, véis algún inconveniente?
Gracias
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Definición de fuentes en proyecto grand e
Hola, Rafa
El 09/04/2010 12:23, Rafa Artacho escribió:
Voy a acometer el rediseño de una web bastante grande, que conllevará una
nueva hoja de estilos.
En la primera versión, decidimos crear estilos individuales para cada tipo
de texto, es decir, que esos estilos sólo contenían información relativa a
la fuente, nada de paddings, margins, etc. Por ejemplo:
.text_12{
color:#000;
font-size:12px;
text-decoration:none;
}
El objetivo era obtener un juego de fuentes que pudiesen reutilizarse en
todo el site, sin importar su contenedor. Aún así, de este modo llegamos a
crear más de 80 estilos de texto diferentes, por las diversas variaciones de
color, bold, tamaños, etc.
Me parecen mucho estilos y pensaba optimizar el número de estilos relativos
a fuentes mediante diversas pautas:
- Usando em's y estableciendo con el diseñador una jerarquía de tamaños en
todas las páginas de la web. De este modo, se definiría un tamaño para los
títulos, otro para subtítulos y así sucesivamente.
Bien, pero por dios no hagáis cosas del estilo: h1.text_12{...} sino h1{...}
- Creando clases para la alineación. Por ejemplo, .left{text-align:left;},
.justify{text-align:justify;}, etc.
Eso nunca se debería hacer, con eso machacáis la potencia de CSS. Si en
un futuro diseño queréis todos los textos alineados a la izquierda,
¿pondríais class=left a todo? Deberías establecer una regla genérica
(por ejemplo, alineación a la izquierda), y sobrescribir esa regla en
estilos más específicos según necesidades (herencia al poder)
Por otro lado, intentaría convencerte de que los textos nunca deberían
justificarse, pero se ha hablado tantas veces de eso en esta lista, que
lo considero una causa perdida.
- Emplearstrong yem para las negritas y cursivas en lugar de crear
clases nuevas para un mismo estilo de fuente cuando solamente cambian estas
propiedades.
- Crear clases individuales para modificar el color de la fuente. Por
ejemplo: .blanco{color:#FFF;}
Esto último si que no, es un error bastante frecuente. Por un lado,
tendríais que ir añadiendo más y más clases al código a medida que
necesitaseis colores nuevos, y acabaríais usando reglas del estilo
.blanco{color:red;}
Las clases se aplicarían en el html del siguiente modo:
div class=titulo blanco justifyemCassanova/em/div
Donde resultaría que el texto se mostraría con el tamaño definido en titulo,
aparecería justificado en cursiva y en color blanco.
De este modo pienso que con un número reducido de clases podría tener una
gran combinación de estilos de fuentes para combinar en el site.
¿Qué os oparece, véis algún inconveniente?
La solución es utilizar varias hojas de estilo y aplicar la herencia
como corresponde, no intentar tener una sola hoja de estilos que sirva
para todo
Un saludo
___
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] Definición de fuentes en proyecto grand e
Las clases se aplicarían en el html del siguiente modo:
div class=titulo blanco justifyemCassanova/em/div
Donde resultaría que el texto se mostraría con el tamaño definido en
titulo,
aparecería justificado en cursiva y en color blanco.
De este modo pienso que con un número reducido de clases podría tener una
gran combinación de estilos de fuentes para combinar en el site.
¿Qué os oparece, véis algún inconveniente?
Al igual que Rodrigo no lo veo práctico. Si realmente es una web de un
tamaño importante lo que yo haría sería crear un libro de estilo que defina
todos y cada uno de los elementos de texto que puedan haber, cada uno
identificado con su nombre y con su definición correspondiente en la hoja de
estilos, de tal manera que quedase algo como (por ejemplo):
div class=TitularBiografiasCassanova/div
Y que el estilo TitularBiografia tuviese definido el tamaño de letra, color,
cursiva, etc...
Si no, cuando quieran cambiar cualquier estilo, vas a tener que revisar toda
la web cambiando las llamadas a las clases o acabar con .blanco{color: red},
como dice Rodrigo. Y si algún día se decide hacer un cambio de estilo
global, va a ser un infierno... Un nombre de clase nunca debería depender de
los estilos que define, sino de la funcionalidad que va a tener.
Saludos,
Ernesto
___
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] Definición de fuentes en proyecto grand e
Siguiendo con el ejemplo de Ernesto, lo que no estaría mal es que
defináis varias clases distintas para poder combinarlas, pero haciendo
referencia a nombres más estructurales que de presentación. Por ejemplo:
div class=titular biografiaCasanova/div
O bien que en la propia hoja de estilos se contemplen distintas
posibilidades según la herencia:
div class=biografia
div class=cabecera.../div
div class=cuerpo.../div
div class=relacionados.../div
/div
div class=opinion
div class=cabecera.../div
div class=cuerpo.../div
/div
.biografia .cabecera {}
.biografia .cuerpo {}
.biografia .relacionados {}
.opinion .cabecera {}
.opinion .cuerpo {}
Saludos,
Ramón.
Ernesto escribió:
identificado con su nombre y con su definición correspondiente en
la hoja de estilos, de tal manera que quedase algo como (por ejemplo):
div class=TitularBiografiasCassanova/div
Y que el estilo TitularBiografia tuviese definido el tamaño de letra, color,
cursiva, etc...
___
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] Definición de fuentes en proyecto grand e
Creo que hay que leer más sobre el uso de CSS y sobre el porque se habla de
*estilo en cascada*; me parece absurdo tener 80 clases de texto, primero por
lo engorroso luego a la hora de cambiar parámetros a un estilo, y que afecte
en varias partes que no se sabe cuáles contenedores son, hay que adivinar
que tipo de letra (clase) está colocado en que sitio, con el perdón pero
esto no tiene sentido, lo lógico es indicar dentro de cada contenedor como
sería el estilo de cada texto, aún un sitio tan grande como amazon indica el
contenedor y dentro de el las características de la tipografía, hay que ver
el código fuente de *http://www.amazon.com/ *-que tiene incrustado el css-
donde especifican dentro de cada div, ul, span o lo que sea de que tamaño,
color, estilo y tipo va a ser la letra.
Si te sirve de ejemplo estas son algunas hojas de estilo hechas por gente
que sí sabe del tema:
*Jason Santamaría:* http://jasonsantamaria.com/css/master.css
*Jeffrey Zeldman:*
http://www.zeldman.com/wp-content/themes/zeldman-v2/style.css?0323100834
*A list Apart:* http://www.alistapart.com/css/base.css
Suerte.
2010/4/9 Ramón Corominas lis...@ramoncorominas.com
Siguiendo con el ejemplo de Ernesto, lo que no estaría mal es que
defináis varias clases distintas para poder combinarlas, pero haciendo
referencia a nombres más estructurales que de presentación. Por ejemplo:
div class=titular biografiaCasanova/div
O bien que en la propia hoja de estilos se contemplen distintas
posibilidades según la herencia:
div class=biografia
div class=cabecera.../div
div class=cuerpo.../div
div class=relacionados.../div
/div
div class=opinion
div class=cabecera.../div
div class=cuerpo.../div
/div
.biografia .cabecera {}
.biografia .cuerpo {}
.biografia .relacionados {}
.opinion .cabecera {}
.opinion .cuerpo {}
Saludos,
Ramón.
Ernesto escribió:
identificado con su nombre y con su definición correspondiente en
la hoja de estilos, de tal manera que quedase algo como (por ejemplo):
div class=TitularBiografiasCassanova/div
Y que el estilo TitularBiografia tuviese definido el tamaño de letra,
color, cursiva, etc...
___
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] Definición de fuentes en proyecto grand e
Explico un poco por qué esta manera de trabajar, al llegar me encontré con
un site muy grande ya hecho, el cuál no se había planificado en absoluto,
por ejemplo, cada diseño de página mantenía una coherencia visual, pero
variaba el tamaño de letra en 1px, o una era bold, cambiaba un poco el tono
de color, la posición y ancho de las cajas y sus backgrounds eran
diferentes, por lo tanto, me era imposible reutilizar las clases que se
habían creado en cascada, por ejemplo:
.tabladetalles03 .contcolunma03
.contfila01{padding-bottom:5px;border-bottom-style:none;width:500px;}
Toda esa ristra de selectores solo me servía únicamente para una página, por
lo que opté por atomizar los estilos lo que me daba una mayor flexibilidad a
la hora de maquetar con menos clases. Por ejemplo, para las cajas
contenedores, creé unas clases que variaban en su ancho en 10px, por
ejemplo:
block01{float:left; width:20px;}
block02{float:left; width:30px;}
y los mismo con los textos: text_1, text_2, etc...
Ahora que vamos a empezar de 0, entiendo que debería concretar con el
diseñador un manual de estilo para hacer unos diseños más homogéneos y poder
usar selectores del tipo anterior, .tabladetalles03 .contcolunma03
.contfila01{padding-bottom:5px;border-bottom-style:none;width:500px;}
¿es así?
2010/4/9 Leonel Silva lsi...@gmail.com
Creo que hay que leer más sobre el uso de CSS y sobre el porque se habla de
*estilo en cascada*; me parece absurdo tener 80 clases de texto, primero
por
lo engorroso luego a la hora de cambiar parámetros a un estilo, y que
afecte
en varias partes que no se sabe cuáles contenedores son, hay que adivinar
que tipo de letra (clase) está colocado en que sitio, con el perdón pero
esto no tiene sentido, lo lógico es indicar dentro de cada contenedor como
sería el estilo de cada texto, aún un sitio tan grande como amazon indica
el
contenedor y dentro de el las características de la tipografía, hay que ver
el código fuente de *http://www.amazon.com/ *-que tiene incrustado el css-
donde especifican dentro de cada div, ul, span o lo que sea de que tamaño,
color, estilo y tipo va a ser la letra.
Si te sirve de ejemplo estas son algunas hojas de estilo hechas por gente
que sí sabe del tema:
*Jason Santamaría:* http://jasonsantamaria.com/css/master.css
*Jeffrey Zeldman:*
http://www.zeldman.com/wp-content/themes/zeldman-v2/style.css?0323100834
*A list Apart:* http://www.alistapart.com/css/base.css
Suerte.
2010/4/9 Ramón Corominas lis...@ramoncorominas.com
Siguiendo con el ejemplo de Ernesto, lo que no estaría mal es que
defináis varias clases distintas para poder combinarlas, pero haciendo
referencia a nombres más estructurales que de presentación. Por ejemplo:
div class=titular biografiaCasanova/div
O bien que en la propia hoja de estilos se contemplen distintas
posibilidades según la herencia:
div class=biografia
div class=cabecera.../div
div class=cuerpo.../div
div class=relacionados.../div
/div
div class=opinion
div class=cabecera.../div
div class=cuerpo.../div
/div
.biografia .cabecera {}
.biografia .cuerpo {}
.biografia .relacionados {}
.opinion .cabecera {}
.opinion .cuerpo {}
Saludos,
Ramón.
Ernesto escribió:
identificado con su nombre y con su definición correspondiente en
la hoja de estilos, de tal manera que quedase algo como (por ejemplo):
div class=TitularBiografiasCassanova/div
Y que el estilo TitularBiografia tuviese definido el tamaño de letra,
color, cursiva, etc...
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
[Ovillo] Tarifario Web.
Interesante, buena referencia, asi lo tomare. Joaco. _ ___ 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] Definición de fuentes en proyecto grand e
Te cuento como yo lo hago a ver si te funciona:
1- Definir primero las áreas grandes con divs y los id: #header, #content,
#sidebar, #footer -puede que necesite uno que contenga a los demás para
cuestiones de posicionamiento- en ese caso creo uno mas y lo nombro #wrapper
o #container y dentro de él coloco los anteriores (usualmente el #content y
el #sidebar).
2- Dentro de cada uno de ellos colocar los divs (si son divisiones), span
(si son elementos gráficos o decorativos), ul, p, img etc. Siempre teniendo
en mente la semántica y el correcto uso de cada etiqueta.
3- Indicar dentro de la division los atributos de los elementos:
Ej.:
#content p {font-size: 80%; width:394px; height:33px; margin:0 0 10px 0; }
#content h1 {...}
#content span {...}
(así todos los párrafos, titulos y span dentro de ese div tendrán esos
atributos)
4- Si necesito un estilo específico para algún elemento, por ejemplo
los *#content
h1* del home que serían con imágenes y serían distintos a los internos, uso
clases o ids tipo:
#content h1.nosotros {...}
#content h1#clientes {...}
5- Repetir el proceso con los divs principales, #header, # footer, #sidebar,
etc. siempre teniendo en mente a provechar la característica de cascada, así
como el ahorro de etiquetas innecesarias o equivocadas, por ejemplo colocar
un div o span para un párrafo de texto.
Ahora mismo trabajo en esta: http://www.leonelsilva.com/sj/
Por acá el css a ver si te ayuda:
http://www.leonelsilva.com/sj/css/screen.css
Saludos
2010/4/9 Rafa Artacho teme...@gmail.com
Explico un poco por qué esta manera de trabajar, al llegar me encontré con
un site muy grande ya hecho, el cuál no se había planificado en absoluto,
por ejemplo, cada diseño de página mantenía una coherencia visual, pero
variaba el tamaño de letra en 1px, o una era bold, cambiaba un poco el tono
de color, la posición y ancho de las cajas y sus backgrounds eran
diferentes, por lo tanto, me era imposible reutilizar las clases que se
habían creado en cascada, por ejemplo:
.tabladetalles03 .contcolunma03
.contfila01{padding-bottom:5px;border-bottom-style:none;width:500px;}
Toda esa ristra de selectores solo me servía únicamente para una página,
por
lo que opté por atomizar los estilos lo que me daba una mayor flexibilidad
a
la hora de maquetar con menos clases. Por ejemplo, para las cajas
contenedores, creé unas clases que variaban en su ancho en 10px, por
ejemplo:
block01{float:left; width:20px;}
block02{float:left; width:30px;}
y los mismo con los textos: text_1, text_2, etc...
Ahora que vamos a empezar de 0, entiendo que debería concretar con el
diseñador un manual de estilo para hacer unos diseños más homogéneos y
poder
usar selectores del tipo anterior, .tabladetalles03 .contcolunma03
.contfila01{padding-bottom:5px;border-bottom-style:none;width:500px;}
¿es así?
2010/4/9 Leonel Silva lsi...@gmail.com
Creo que hay que leer más sobre el uso de CSS y sobre el porque se habla
de
*estilo en cascada*; me parece absurdo tener 80 clases de texto, primero
por
lo engorroso luego a la hora de cambiar parámetros a un estilo, y que
afecte
en varias partes que no se sabe cuáles contenedores son, hay que adivinar
que tipo de letra (clase) está colocado en que sitio, con el perdón pero
esto no tiene sentido, lo lógico es indicar dentro de cada contenedor
como
sería el estilo de cada texto, aún un sitio tan grande como amazon indica
el
contenedor y dentro de el las características de la tipografía, hay que
ver
el código fuente de *http://www.amazon.com/ *-que tiene incrustado el
css-
donde especifican dentro de cada div, ul, span o lo que sea de que
tamaño,
color, estilo y tipo va a ser la letra.
Si te sirve de ejemplo estas son algunas hojas de estilo hechas por gente
que sí sabe del tema:
*Jason Santamaría:* http://jasonsantamaria.com/css/master.css
*Jeffrey Zeldman:*
http://www.zeldman.com/wp-content/themes/zeldman-v2/style.css?0323100834
*A list Apart:* http://www.alistapart.com/css/base.css
Suerte.
2010/4/9 Ramón Corominas lis...@ramoncorominas.com
Siguiendo con el ejemplo de Ernesto, lo que no estaría mal es que
defináis varias clases distintas para poder combinarlas, pero haciendo
referencia a nombres más estructurales que de presentación. Por
ejemplo:
div class=titular biografiaCasanova/div
O bien que en la propia hoja de estilos se contemplen distintas
posibilidades según la herencia:
div class=biografia
div class=cabecera.../div
div class=cuerpo.../div
div class=relacionados.../div
/div
div class=opinion
div class=cabecera.../div
div class=cuerpo.../div
/div
.biografia .cabecera {}
.biografia .cuerpo {}
.biografia .relacionados {}
.opinion .cabecera {}
.opinion .cuerpo {}
Saludos,
Ramón.
Ernesto escribió:
identificado con su nombre y con su definición correspondiente en
la hoja de estilos, de tal manera que
