Proyecto inicial v1
Hace un tiempo os hablé de que estaba preparando un proyecto inicial que compartiría con vosotros cuando estuviera lo suficientemente maduro. Y creo que ha llegado el momento de que vea la luz.
La idea
La idea surgió a raíz de éste post de RUDE. Yo hacía poco que había entrado a trabajar en la agencia y me pareció una buena idea tener las cosas que siempre utilizas a mano.
Con cada proyecto nuevo, he ido incorporando y puliendo temas, cubriendo necesidades, conformando algo que pudiese utilizar siempre de acuerdo con la metodología de trabajo de mi agencia. Así pues, pasé de un CSS inicial a un Proyecto inicial.
A tener en cuenta
Como os comentaba, he adaptado el proyecto a mis necesidades, así que en él se incluyen cosas como la librería ie7.js de Dean Edwards, algo que a algunos les puede parecer poco elegante, pero que para mí es la mejor y más rápida solución para solucionar los problemas de renderizado, algunos de los miles de millones de bugs y carencias de Internet Explorer. Así pues, tened en cuenta que algunas de las “funcionalidades” (por ejemplo en el reset) dependen de ésto.
En qué consiste?
Lo primero que os podréis encontrar en mi proyecto inicial es una estructura de ficheros que se compone de lo siguiente:
- index.html: En él, he creado la estructura básica de un XHTML 1.0 Strict estándar, siguiendo mi propia metodología de trabajo y algunos consejos que he ido viendo de gente bastante entendida. He separado las zonas de forma muy visual de cara a darle las cosas lo más fáciles posible a los programadores que trabajan conmigo y dependen de mi trabajo.
He usado comentarios condicionales tanto para las hojas de estilo como para los javascript dedicados. - Carpeta CSS:
- estilos.css: Incluye las llamadas @import a todos los ficheros CSS necesarios, permitiendo centralizarlo todo en un fichero sin necesidad de recurrir a editar el marcado.
- reset.css: Probablemente sea lo que me ha dado más trabajo. En él, podréis encontrar, además del reset de Eric Meyer (con alguna modificación), una serie de fixes y selectores de uso común, que a mí me están allanando el camino notablemente.
- layout.css: con todo preparado para meter el grueso de vuestro trabajo.
- ie.css: donde meteremos toda la basurilla necesaria para poder visualizar las páginas correctamente en ese engendro.
- addons.css: es un lugar que he dejado aparte para que los programadores metan código sin modificar el layout, y si lo corrompen, poder localizar el fallo lo más rápidamente posible.
- diagnostic.css: es una hoja de estilos de Eric Meyer destinada al debugging de las webs mientras se estan creando. Ahora mismo está tal cual Eric la construyó, pero tengo planes para ella. Algo menos bestia en cuanto a presentación.
- Carpeta img: Donde introduciremos las imágenes del proyecto, y en la cual hay una carpeta contenido donde podremos hacer la separación de imágenes entre layout y contenido.
- Carpeta js: Aquí tendremos tanto SWFObject como ie7.js (que os comentaba anteriormente), dos pilares fundamentales para mi trabajo día a día.
- Carpeta swf: Donde colocaremos los ficheros flash del proyecto.
Descarga
Bien, pues después de toda la chapa, aquí lo tenéis. Espero que os sea tan útil como a mí:
Si tenéis cualquier sugerencia o duda, por favor, comentádmela.
Filed under: Programación, Web |
-
-
Flickr
More Photos
Anda que no me va a venir bien esto a mí cuando necesite aprender más CSS del que pobremente sé. Thanks por el currazo, cerda ;-)
Suena muy útil, lo probaré en un proyecto que ando comenzando.
Gracias!
Veo mucho curro ahí, se agradece el esfuerzo :-)
Me miraré con detalle este proyecto, que seguro que aprendo cosas ;-)
Gracias pumpkin!
Qué buena pinta! mañana le echaré un ojo, seguro que está completito.
Gracias, gente. La verdad es que sí que tiene bastante curro detrás y muchas pruebas.
Quizás algunos echéis de menos cosas como ajustes tipográficos y tal… Son una de mis tareas pendientes. De todas formas, en mi curro tampoco puedo preconfigurar nada en ese sentido. Cada diseño es de un padre y una madre.
Tiene muy buena pinta el proyecto, jeje mola que este todo comentado.
Tengo un par de dudillas a nivel de productividad.
Merece la pena un solo ie.css para ie6 e ie7 usando el hack _ en vez de separar dos hojas de estilos? (me parece interesante).
Antes utilizaba los import para cargar varios modulos pero hacia ese efecto de pagina en blanco, creo que otros frameworks optan por usar varios tags link.
Y bueno si te curras versiones comprimidas y sin comprimir eres la hostia jeeje.
Un saludo maquina. que tiene buena pinta el proyecto :)
Lo del IE lo dices por temas de validación y tal? Yo opto por una sola hoja, porque normalmente no tengo muchos fixes que implementar (gracias en gran medida a ie7.js) y es por eso que nunca pensé en separarlas. ie7.js tiene algunos efectos colaterales, pero nada realmente serio, o al menos eso me parece.
Sé que hay gente que prefiere no utilizar @import, pero nunca he buscado documentación, la verdad. Es mejor hacerlo en el marcado? Buscaré algo de info sobre el efecto de página en blanco, a ver de qué va…
Lo de framework me ha encantado. Yo lo considero más bien algo casero :)
Alguna recomendación para comprimir? Sé que hay algunos sites que te optimizan el CSS eliminando espacios en blanco, comentarios y tal, aunque tampoco he investigado demasiado. Tengo una “pequeña” obsesión con el código legible. Debe de ser porque no me considero un programador, jejeje :P
Bueno, ya tengo algunos puntos sobre los que trabajar para futuras versiones. De verdad que os agradezco que os toméis la molestia de echarle un vistazo y sugerir cosas :)
Hasta ahora no había podido bajarlo y echarle un buen ojo. Pedazo de currada te has metido. Yo ya he visto cosas que no conocía o utilizaba así que de diez.
Además de la estructura interna de cada css me ha gustado como los has dividido: reset, addons, etc.
Enhorabuena Alberto!
Eiii tio, me ha encantado eres un fiera, nos vemos esta tarde ;)
Muy interesante el taller, crack ;) (el año que viene quiero más :P)
salu2