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
> 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
>
> > 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
> >
> > > 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:
> > >
> > > Casanova
> > >
> > > O bien que en la propia hoja de estilos se contemplen distintas
> > > posibilidades según la herencia:
> > >
> > >
> > > ...
> > > ...
> > > ...
> > >
> > >
> > > ...
> > > ...
> > >
> > >
> > > .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):
> > > >
> > > > Cass
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
> 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
>
> > 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:
> >
> > Casanova
> >
> > O bien que en la propia hoja de estilos se contemplen distintas
> > posibilidades según la herencia:
> >
> >
> > ...
> > ...
> > ...
> >
> >
> > ...
> > ...
> >
> >
> > .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):
> > >
> > > Cassanova
> > >
> > > 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
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
> 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:
>
> Casanova
>
> O bien que en la propia hoja de estilos se contemplen distintas
> posibilidades según la herencia:
>
>
> ...
> ...
> ...
>
>
> ...
> ...
>
>
> .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):
> >
> > Cassanova
> >
> > 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
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:
Casanova
O bien que en la propia hoja de estilos se contemplen distintas
posibilidades según la herencia:
...
...
...
...
...
.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):
>
> Cassanova
>
> 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
Tenéis razón, con mis pautas creo que ahorraría clases, pero a la hora de
modificar los estilos en todo el site sería un trabajo tedioso y susceptible
de cometer errores.
Creo que utilizaré el método anterior de definir un juego de estilos de
texto independientes del contenedor para poder utilizar en toda la web pero
definiendo su tamaño en em's.
Rodrigo, me puedes ampliar un poco este punto:
*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*
En principio solo usamos una hoja de estilo, aunque ahora voy a incluir un
reset.css, ya aprovecho ¿cuál recomendáis? He oído hablar muy bien de la de
Eric Meyer
*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.*
En cuanto a la justificación, si que definiré en el body la alineación a
left, solo emplearía justify o right en lugares específicos.
*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;}*
Creo que con Eclipse podríamos hacer un replace rápido en todo el proyecto,
por ejemplo donde ponga blanco que ponga rojo, y de ese modo se cambiaría el
color de ese texto en toda la web en unos segundos, aunque quizá pueda
aparecer algún error, no sé...
Por otra parte, Ernesto, ¿no te parece bien la idea de tener aislados los
textos para poder reutilizarlos o simplemente te refieres a la nomenclatura
de estilos? Si es por el nombre, a veces nos encontramos con el caso de un
texto que es TitularBiografias que luego empleo en un texto que pone
Ofertas, con lo que queda fuera de contexto, creo que crear un juego de
textos para poder emplear a lo largo de toda la web sería más correcto.
Gracias, 1 saludo
Rafa Artacho
2010/4/9 Ernesto Rodríguez Ageitos
> >
> > Las clases se aplicarían en el html del siguiente modo:
> >
> > Cassanova
> >
> > 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):
>
> Cassanova
> 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
>
___
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:
>
> Cassanova
>
> 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):
Cassanova
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
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.
> - Emplear y 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:
>
> Cassanova
>
> 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
[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 y 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:
Cassanova
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
