Esta entrada es la parte 13 de 13 de la serie Manual CSS

Como prometí, me dispongo a traducir el fantástico tutorial Colored Boxes, en el que se explica como construir una plantilla CSS paso a paso.

Partiendo de una serie de cajas de colores que vamos colocando, y probando en varios navegadores, se verá el proceso completo de creación de una plantilla CSS en 11 pasos.

Empezamos con una prototipo gráfico y lo convertiremos en una página html operativa. La meta no es fijarse en este ejemplo concreto sino en el proceso completo utilizado.

Algunas guías antes de empezar:

Haz un paso cada vez y comprueba cada paso en varios navegadores

Es muy fácil empezar a construir una plantilla y meterse en problemas a mitad de la tarea. Para evitarlo, trata de construir tu plantilla en pequeños pasos y comprueba cada paso en varios navegadores. Con esto conseguirás ver exactamente como progresa la plantilla y no habrá necesidad de volver atrás sobre tus pasos si te metes en problemas.

Construye para los navegadores actuales y luego trabaja hacia atrás

Es mejor empezar construyendo para navegadores que cumplen los estándares y mas tarde hacer repasos, tales como ocultar (via @import) para navegadores mas antiguos.

Mientras construyes y compruebas utiliza CSS en la cabecera del documento

Es mucho mas fácil empezar a construir tus plantillas con el CSS en la cabecera del documento – es mas rápido, y evita problemas de caché. Cuando hayas terminado del todo la plantilla, se puede quitar el CSS y situarlo en hojas de estilo externas.

Valida tu código HTML y CSS

Valida frecuentemente tu HTML y CSS. Muchos problemas en plantillas pueden solucionarse con una rápida comprobación de validación.

¿Te gustó este post? ¡Compártelo!
  • Bitacoras.com
  • TwitThis
  • Facebook
  • Meneame
  • Google Bookmarks
  • del.icio.us
  • Live
  • Technorati
  • Ping.fm
  • Wikio
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

También te puede interesar:

cursos formación continua

    17 comentarios en “Manual CSS – Introducción”

  1. AURELIO (1 comentarios) dijo:

    antes que nada saludos, ahora lo importante para mi es ver si me podrina orientar de como crear una plantilla en css. para lo siguiente

    tengo varias hojas de unapagina pero he podido cambiar todos los banner emcabezados, cada que le hago una modificacion, espero me entiendan y me puedan apoyar.

    aurelio

    • Turin (1 comentarios) dijo:

      todo esta excelente… ojala se pudiera si no es mucho pedir… que los codigos que sugieres.. tambien pueran con un video ya sea por mdio del software camtasia Studio… ya que este software permite que todo lo que escribes en pantalla se graba como video y luego pudiras editarlo aqui …jejej soy novato en esto y deseo aprender, y perdona la confianza pero es una sugerencia… saludos y muchas gracias por compartir tu conocimientos y experiencia..

  2. [...] | Aprende CSS desde cero | Traducción en español Vía: | [...]

  3. [...] boxes – one method of building full CSS layouts has now been translated into Spanish by Ayuda Wordpress – Manual CSS Cajas [...]

  4. [...] la hora en wordpress Como hacer minipost o asides Optimizar la base de datos Manual Css (tiene 11 partes [...]

  5. Cristhian (35 comentarios) dijo:

    Bueno, voy a ver si aprendo algo. Me gustaría poder diseñar themes :D

  6. paco (6 comentarios) dijo:

    Gracias por el post! Lo utilizaré esta noche para mi 1º blog jejejeje.

  7. muy útil este manual

    gracias por compartirlo

  8. Homer (2 comentarios) dijo:

    Perdonr mi ignorancia , pero solo consigo ver los pasos 6 hasta el final , los anteriores no los se ver.

    Saludos y gracias

  9. Homer (2 comentarios) dijo:

    Muchas gracias por la ayuda Fernando.

  10. onagra (1 comentarios) dijo:

    estoy empezando en esto y post como este me son de bastante ayuda.
    muchas gracias de un novato

  11. [...] rest is here: Manual CSS – Introducción | Ayuda WordPress Comments0 Leave a Reply Click here to cancel [...]

  12. daniel (52 comentarios) dijo:

    como voy al paso 1?

Escribe un Comentario

XHTML: Puedes usar estos códigos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Comentarios adicionales gracias BackType

Subir

Anúnciese aquí
Expertos en WordPress
Evolución Euribor
Consigue 28 themes premium por menos de 14 euros
Participa en el Debate
  • Hugo Alfaro: Wow!… esta utilidad me ha sido de gran utilidad… ideal para los sitios...
  • Jose: P.D. Enhorabuena por la web! Sois magnificos!
  • Jose: Pero con esta aplicación no puedo utilizar el blog wordpress q tengo en mi propio dominio...
  • Juan: Parece que nuestro amigo se tomó la rivalidad de Steve Jobs contra Google en serio. Pero...
  • andres: No lose que puedo decir de blackberry,pero es un telefono para futuro
Noticias Breves
  • BuddyPress 1.2 está prácticamente lista para lanzarse salvo que las pruebas de los usuarios digan lo contrario. Ya puedes descargarla y empezar a comprobarla (enlace al svn). En esta nueva versión se han cerrado más de 125 tickets desde la última beta.

    [#3]

  • Ya está disponible WordPress MU 2.9.1 y José Conti me avisa que en unas horas tendrá lista la traducción para poder tener actualizado y listo tu sitio multiusuario.

    [#6]

  • ¿Sabías que Kubrick, el tema que va a ser sustituido en 2010 lo creó un desarrollador danés?. Toda la historia de este tema, ya mítico, la tienes en este artículo (traducido con Google).

    [#26]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H