Re: [Ovillo] Cómo hacer un mapa de clases CSS
Hola, Javier en la misma lista de Ovillo se han debatido diversas formas de organizar las CSS (no sé si es a eso a lo que te referías con mapa de clases): http://www.mail-archive.com/ovillo@lists.ovillo.org/msg24637.html http://ovillo.org/pipermail/ovillo/2007-October/013082.html Un saludo Martín http://www.martinalia.com 2009/4/17 Javier Guerrero demix...@gmail.com Hola, listeros. Sucede que he notado algo que me parece muy contraproducente para el mantenimiento de mi CSS, utilizo muchos estilos específicos, es decir, uso mucho selectores tipo id, y digo que puede ser contraproducente porque veo que no aprovecho el tema de la cascada y herencia que da CSS. Ahora, se me ocurrió hacer una especie de mapa de clases que definan los estilos generales de un sitio web, sin embargo, no tengo idea de como empezar, ¿alguien hizo algo parecido? Espero sus contribuciones. Gracias por adelantado. Saludos. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Cómo hacer un mapa de clases CSS
Hola,
Por si te refieres al uso mínimo de ids, lo que yo he estado haciendo
últimamente es definir tantas clases genéricas como sea necesario y usarlas
en las combinaciones requeridas.
Por ejemplo:
.contenedor{ margin; padding; float; override} /* definicion del contenedor
principal */
.fila{ margin; padding; float; override} /* definicion de una fila */
.col1{ } /* definicion de una columna de ancho x */ .col2{ } /* definicion
de una columna de ancho y */ .col3{ } /* definicion de una columna de
ancho z */
.form1{ } /* caracteristicas de un contenedor de campos de formulario */
.form2{ } /* caracteristicas de otro contenedor de campos de formulario */
.botonera{ color; background; padding; height; } /* caracteristicas de un
contenedor de botones */
.right{ float:right;}
.left{ float:left;}
h1{}
.header{ height; padding; background; border;}
.cuerpo{ padding; background; border; margin-top; margin-bottom; } .pie{
padding; background; border; margin-top;}
.tabs{}
.tabs ul{}
.tabs li{}
.tabs li a{}
div class=contenedor
div class=fila header
div class=col1 lefth1Titulo/h1/div div
class=col2 rightspanNombre Usuario/span/div
/divdiv class=fila tabs !-- menu horizontal en tabs --
ul
lia href=#item 1/a/li lia
href=#item 2/a/li lia href=#item 3/a/li
lia href=#item 4/a/li
/ul
/div
div class=fila cuerpo !-- cuerpo principal --
div id=menu class=col1 !-- menu vertical a la izquierda --
ul
lia href=#item 1/a/lilia
href=#item 2/a/lilia href=#item
3/a/li
lia href=#item 4/a/li
/ul
/div div class=col3 !-- contenidos --
ptextos textos textos textos textos textos textos textos
textos textos textos textos textos textos /p
/div
/div
div class=fila pie copyright /div
/div
Saludos.
--
El 21 de abril de 2009 7:42, Martín Moreno martin.mor...@gmail.comescribió:
Hola, Javier
en la misma lista de Ovillo se han debatido diversas formas de organizar
las
CSS (no sé si es a eso a lo que te referías con mapa de clases):
http://www.mail-archive.com/ovillo@lists.ovillo.org/msg24637.html
http://ovillo.org/pipermail/ovillo/2007-October/013082.html
Un saludo
Martín
http://www.martinalia.com
2009/4/17 Javier Guerrero demix...@gmail.com
Hola, listeros.
Sucede que he notado algo que me parece muy contraproducente para el
mantenimiento de mi CSS, utilizo muchos estilos específicos, es decir,
uso
mucho selectores tipo id, y digo que puede ser contraproducente porque
veo
que no aprovecho el tema de la cascada y herencia que da CSS.
Ahora, se me ocurrió hacer una especie de mapa de clases que definan
los
estilos generales de un sitio web, sin embargo, no tengo idea de como
empezar, ¿alguien hizo algo parecido?
Espero sus contribuciones.
Gracias por adelantado.
Saludos.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Phaseolus.
J2EE Dev.
___
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] Cómo hacer un mapa de clases CSS
¿Te sirve esto? http://www.cssblog.es/sitemap-mediante-css/ 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] Cómo hacer un mapa de clases CSS
Hola, *dreagnout*. No refería a ese tipo de mapas, sino como más o menos dice *Phaseolus *crear clases para poder reutilizarlas lo máximo posible, con el objetivo de evitar crear muchos estilos específicos. Yo que básicamente preguntaba es que si existe alguna forma gráfica de mostrar como afecataran esas clases a todo un sitio. 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] Cómo hacer un mapa de clases CSS
Algo como esto: http://www.chami.com/html-kit/i/g/cached/tmp10_dup_62e3fa8e0023eeed10a87b70cdaccaba.png ___ 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] Cómo hacer un mapa de clases CSS
Hola todos, Coincido con la inquietud de Javier, entiendo que lo que quiere es hacer un mapa conceptual de la estructura del CSS de un sitio de manera que se mucho más fácil acceder a el código y hacer cambios, actualizaciones y correcciones. Yo tenido una preocupación similar, mi objetivo principal es reducir el tiempo que tardo en diseñar un sitio, me suelo enredar con el tema inicial del concepto. Aunque no lo había considerado como tal, creo que objetivo de Javier de facilitar el mantenimiento del código es completamente válido. Concuerdo con él en que en mi CSS se usa muy poco el tema de la cascada y la herencia; o peor aun, sin control, lo que a veces me da resultados inesperados . Mi aproximación ha sido la siguiente: 1) Separar lo general de lo particular Generalmente creo una hoja de estilos que se usa en todo el sitio y otras que se usan en páginas particulares, por ejemplo en la portada en las páginas de sección y en los artículos (yo uso SPIP en casi todos mis proyectos y este enfoque es particularmente útil ahí) 2) Separar estructura y diseño Lo primero que hago en cada hoja de estilo es determinar las zonas que tienen información estructural, es decir las que definen la maquetación de la página, tamaño y posicionamiento de divs. Más abajo defino colores, tipografías etc. y procuro separar las dos zonas. No siempre es sencillo, porque puede implicar hacer una doble definción de cada div, por ejemplo usar la id para determinar los temas estructurales y la class para los asuntos de forma, peor eso no es siempre lo mejor. En tétminos de la producción dde sitios nuevos recientemente he estado leyendo y buscando mucha información sobre el tema de la cuadrícula o grilla. Mi conclusión es que los sitios de mucho contenido están organizados en grandes bloques de todo el ancho del contendor (o wrapper) y que tienen siempre unos pocos patrones posibles: - Un múmero fijo de columnas fguales: tradicionalmente se han usado dos o tres pero ahora se usan mucho cinco, seis y hasta ocho columanas, todas iguales - Dos, o tres columnas desiguales: divisiones porcentuales de 40-60 por ejemplo - Dos columnas con una que se parte a su vez en dos - Tres columnas con la del centro más grande que más abajo se parte en dos (a veces también en tres - Bloques de 100% de ancho para cabezotes o menús Lo que yo he querido es tener listos los bloques de cada tipo, como recortes (snippets) de mi programa de edición y poder meterlos cada vez que necesito, dos temas me han complicado hacer esto, uno, el tema de cómo definir proporciones y tamaños y dos como coordinar el recorte de CSS con el recorte de HTML, que ahora que lo pienso no tiene porque ser un problema. Dos herramientas em han llamado la atención recientemente sobre estos temas: Grid Designer http://grid.mindplay.dk/ 960 Grid system http://960.gs/ Pero definitivamente el tema más complicado es combinar el desarrollo estructural de la página con los otros aspectos de diseño. En terminos de color, me confieso por completo falto de talento para combinar, afortunadamente la combinación de colores puede ser un tema puramente matemático y se `pueden encontrar herramientas que ayudan mucho en eso. Mi favorita es http://colorschemedesigner.com/ Creo que inicialmente uno puede tener un par de esquemas que sean fáciles de suar y en casos concretos generar nuevos esquemas de color, a partir de la imagen institucional del cliente Finalmente está el tema de la tipografía, donde siento que estoy más crudo y pido ayuda. ¿Cuéles son las proporciones reomendadas entre el texto normal y los diferentes nivles de títulos? ¿Qué criterios se usan para definirlos? Mis clientes se quejan con frecuencia del tamaño de las fuentes dicen que uso letras muy grandes, realmente no tengo claro como definir esos tamaños. Eso es lo que puedo aportar, Germán El 21 de abril de 2009 10:34, Javier Guerrero demix...@gmail.com escribió: Algo como esto: http://www.chami.com/html-kit/i/g/cached/tmp10_dup_62e3fa8e0023eeed10a87b70cdaccaba.png ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- -- Germán Bustos Educador, Consultor en Tecnologías de Información y Comunicación ATARRAYA: tejedores de saber social ger...@atarraya.org - german.busto...@gmail.com german.bus...@marchamundialcolombia.org Tel [+57] 3177381339 Bogotá 111221, Colombia MARCHA MUNDIAL POR LA PAZ Y LA NOVIOLENCIA http://marchamundialcolombia.org * Atarrayahttp://atarraya.org/ * Paz, Fuerza y Alegría http://pazfuerzayalegria.net/ * Facebookhttp://profile.to/germanbustos/ * Recomiendo http://www.netvibes.com/germanbustos
[Ovillo] Cómo hacer un mapa de clases CSS
Hola, listeros. Sucede que he notado algo que me parece muy contraproducente para el mantenimiento de mi CSS, utilizo muchos estilos específicos, es decir, uso mucho selectores tipo id, y digo que puede ser contraproducente porque veo que no aprovecho el tema de la cascada y herencia que da CSS. Ahora, se me ocurrió hacer una especie de mapa de clases que definan los estilos generales de un sitio web, sin embargo, no tengo idea de como empezar, ¿alguien hizo algo parecido? Espero sus contribuciones. Gracias por adelantado. 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
