Por donde empiezo el estilado de mi web

Ancaragon · #1 (**permalink**) 17/09/2007, 16:54

Hola pues esa es la cosa.
No se que pasos a seguir por que me agobio en seguida cuando tengo todo mas o menos definido en html, al tener que darle formato y estilado me agobio y nose si debo empezar con los contenedores o el texto, fondo etc....

Si pudierais explicarme una metodoliga a seguir en ese aspecto se agradeceria.

PD: Se pueden obtener las hojas de estilo de ciertas webs como por ejemplo una web, que te digo yo, de cocina o videojuegos etc...es decir ese archivo CSS que ellos ponen directamente en su codigo fuente con un link=....

Saludos y Muchas Gracias

jhoroco · #2 (**permalink**) 17/09/2007, 17:06

un buena alternativa es el uso de theme`s; al menos en soluciones asp.net esta presente

Carxl · #3 (**permalink**) 17/09/2007, 22:51

Hola Ancaragon!

Pues mira, la filosofía de maquetar con CSS y de hacer páginas web's accesibles, usables y semánticamente bien construídas se basa en el CONTENIDO...

Por lo tanto lo primero a definir y realizar es el contenido, cerciorarse de tener un contenido versátil, interesantes y con algo de "lógica", permite de una u otra forma ir generando ideas de como en un futuro quisiera presentar esa información...

Arranca con el contenido..., luego con el diseño, al fin y al cabo para eso se hicieron las hojas de estilos, para separar diseño y contenido... y lograr así eficiencia y transparencia en el momento de mantener tus sitios.

Saludos

JavierGuerrero · #4 (**permalink**) 19/09/2007, 02:18

Hola, Ancaragon.

Comentas que no se sabes cómo empezar a definir tus hojas de estilo CSS, por ello, voy a dedicar unas cuántas líneas explicando la manera en cómo yo lo hago.

Espero que te sirva.

1. Tareas previas.

Imaginando que tienes un diseño elaborado con alguna herramienta gráfica (por ejemplo: Photoshop o Gimp) el producto final sería un "pantallazo" de cómo debería lucir tu Sitio. Basándote en ese diseño procedes a definir una estructura con el(X)HTML, procurando realizar un marcado semántico.

Algunos consejitos para realizar tu marcado:

* Imprimir el diseño y con lápiz en mano comenzar a analizar cada detalle del mismo. Comienzas a realizar un inventario de las zonas de contenido de la página para luego bosquejarlo (describir los distintos bloques de contenido en un gráfico).

* A partir de este mapa mental del contenido de la página puedes describirla a través del marcado (XHTML). Cada una de las zonas de contenido se puede describir mediante un elemento div con un id exclusivo. Todas las zonas de contenido se marcan con un div de id descriptivo y el orden de anidación refleja las relaciones bosquejadas en el inventario de contenido.

* Realizar un esquema de tu nueva plantilla XHTML.

* Escribir el código XHTML en tu editor favorito. Personalmente, utilizo notepad++.

IMPORTANTE: Llegados a este punto, el marcado es una especie de plancha vacía a la que podemos empezar a aplicar el estilo. Los usuarios que no puedan ver los estilos empleados encontrarán una estructura de marcado bien definida y fácil de seguir.

2. Aplicando CSS

Volvemos a nuestro papel impreso con el diseño y con lápiz en mano empezamos a apuntar:

- Anchos (width).
- Detalles sobre la maquetación de la página.
- Tipo y tamaño de letra.
- Detalles del header, sidebar, main, footer, etc.
- Colores y estilos de titulares.

Con los apuntes anteriores tendremos una idea de cómo iniciar nuestro código CSS.

Para iniciar, escribo todo mi código CSS en un sólo archivo, posteriormente, cuando he establecido la maquetación y los detalles del header, sidebar, main, footer, etc., separo todo mi código CSS en los siguientes archivos: layout, type y color. Estos archivos son importados desde una archivo principal styles.css y a la vez este archivo es invocado en mi documento (X)XHTML.

He obviado algunos otros detalles, sin embargo, es suficiente para empezar.

Saludos

Javier Guerrero

Ancaragon · #5 (**permalink**) 20/09/2007, 12:39

Bueno, atendiendo con interes a la respuesta de JaviGuerrero, resumiendo lo que tendria que hacer y entedi de Javi, fue:
- Realizar graficamente, o al menos muy claramente tenerlo en mente el diseño de la web.
- Realizar primero INTEGRAMENTE el codigo (x)html, dando un soporte solido, y bien estructurado.
- Donde luego la hoja de estilo solo sera el "vestido" o "disfraz" que le pondremos a nuestro codigo, y donde este puede ser intercambiable con otros "vestidos"(hojas de estilo)

Lo que vengo a decir es que, no realizemos solo una parte del codigo html y en seguida le apliquemos el estilado, sino que hagamos integramente el codigo, y cuando este completamente finalizado, entonces empezar a diseñar un estilado.

¿Os parece OK?

Gracias y Saludos.

Carxl · #6 (**permalink**) 20/09/2007, 20:55

Cita:

Iniciado por Ancaragon

- Realizar primero INTEGRAMENTE el codigo (x)html, dando un soporte solido, y bien estructurado.
- Donde luego la hoja de estilo solo sera el "vestido" o "disfraz" que le pondremos a nuestro codigo, y donde este puede ser intercambiable con otros "vestidos"(hojas de estilo)

Lo que vengo a decir es que, no realizemos solo una parte del codigo html y en seguida le apliquemos el estilado, sino que hagamos integramente el codigo, y cuando este completamente finalizado, entonces empezar a diseñar un estilado.

Mmmmmmmmm pues mira, realmente comenzar con el código html sin haber pensado en el CONTENIDO no tiene gracia... Si vas a hacer una web, es por tienes contenido que mostrar, y si tienes contenido que mostrar debes antes tener una idea clara de como lo presentarás, una jerarquización de temas, osea que es lo mas importante que es lo que es secundario..., que debe ir dinámico que debe ir estático... todo ese tipo de cosas antes de programar y diseñar debes tenerlas claras..., ese es el primer paso para comenzar en general a hacer una web, no solo el "estilado"...

Saludos