Viste con estilo - 1era lección
Bueno amiguitos y amiguitas, bienvenidos sean a la primera lección de este fantabuloso experimento. ¿Ya tiene listas sus tijeras de punta chata y su pegamento blanco resistol 850? ¡Pues tirenlos a un lado porque no los vamos a necesitar!
Antes de empezar
Este curso trata exclusivamente de diseño, o mas especificamente dicho, la manera en que yo diseño y que bueno, al menos a mi me funciona. Por lo regular un diseño efectivo requiere de extensa planeación e investigación, pero ya habrá tiempo para todos de aprender con ello despues. Ahorita la cosa es divertirse y aprender algunas cosillas mientras aprendemos.
Materiales
Necesitarás:
- Una página con la que estés dispuesto a jugar. Para este curso utilizaremos la plantilla por defecto de movable type version 2.64 (es la que yo tengo). Si no tienes MT y quieres aprender a instalarlo, aqui y aqui hay dos buenísimos tutoriales pa que te avientes.
-
Cliente FTP (y al menos el conocimiento básico para utilizarlo) por si quieres subir imagenes a tu servidor mas facilmente. Si no, de cualquier forma puedes utilizar la interfase de MT para ello.
-
Editor HTML. Puedes editar tu código directamente en MT, pero creeme que no hay como un buen editor que ademas coloreé el codigo. Yo utilizo HTML kit y lo recomiendo ampliamente. Tiene un cliente FTP integrado y ademas puedes editar los archivos directamente en el servidor . Y lo mejor de todo: es gratuito.
-
Editor de Imagenes Especialmente útil si quieres añadir imágenes a tu sitio. Yo definitivamente elijo Photoshop CS pero supongo que fireworks o Paint Shop Pro igual funcionarán.
-
Tu bebida favorita y algo de botana. (Yo soy especialmente productivo cuando consumo donitas bimbo y una pepsi de lata)
¡Manos a la obra!
Antes que otra cosa pase, veamos como luce nuestro conejillo de indias antes de que empecemos a experimentar. ¿Ya lo vieron? otra vez despidanse de el, porque probablemente quede traumatizado despues del proceso.
Ok. ahora hagamos algo drástico. Vayan a la plantilla de estilos, aqui es donde vamos a trabajar. Seleccionen todo el texto pertenecientes a su hoja de estilos y después presionen la tecla suprimir de su teclado. Guarden y Reconstruyan. Ahora su página debe de lucir mas o menos así ¿Mencioné que sería drástico…?
La estructura.
El estado actual de la pagina es el de una pagina sin estilo. Como mencioné antes diseñar con CSS es como vestir tus paginas, pues bien, para poder vestirla mejor lo importante es que primero que nada, el código de tu página tenga una estructura sólida.
De eso es, en primera instancia, de lo que se tratan los estándares web.
El HTML es el lenguaje en el que esta escrita la web y su principal función es la de dar estructura y forma a los contenidos de la web para que pueda ser interpretada de la misma manera en multitud de dispositivos y plataformas distintas.
Asi que, antes de empezar a vestir nuestra página demosle un vistazo a su estructura. Ande, vaya y vea el codigo fuente de Quedadencias examinelo cuidadosamente y aqui lo espero… ¿Ya? A grandes rasgos la estructura de la página es esta:
<body>
<div id="banner">
<h1><a href="#" accesskey="1">Quedadencias</a></h1>
<span class="description"></span>
</div>
<div id="content">
<div class="blog">
<h2 class="date"> Julio 17, 2004 </h2>
<div class="blogbody">
<a name="000221"></a>
<h3 class="title">Título</h3>
[...] Aqui va el post
<div class="posted">Escrito por sosa en: <a href="#">12:24 AM</a>
| <a href="#">Comentarios (0)</a>
| <a href="#">TrackBack (0)</a>
</div>
</div>
</div>
</div>
<div id="links">
<div align="center" class="calendar">
[...] Aqui va el código del calendario
</div>
<div class="sidetitle">
[...] Titulo de un sección lateral
</div>
<div class="side">
[...] COntenido de sección lateral
</div>
<div class="syndicate">
<a href="#">Sindica éste sitio (XML)</a>
</div>
<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type 2.64</a><br />
</div>
</div>
<br clear="all" />
</body>
Las palabras entre (<) y (>) se llaman etiquetas y son la base del lenguaje XHTML su función es proporcionar de una estructura lógica a los documentos. Veamos la primera etiqueta, esa es <body> y es la que marca el comienzo del cuerpo del documento. Al final de la estructura nos encontraremos con </body> que es una etiqueta de cierre por eso tiene una barra o diagonal (/) antes del nombre. A cada etiqueta de apertura le debe corresponder siempre una de cierre (algunas excepciones las veremos después) y entre una y otra pueden estar contenidas otros pares de etiquetas. Asi, dentro de <body> y </body> se encuentran <div id="banner">, <div id="content"> y <div id="links"> y dentro de <div id="content"> está <div class="blog"> y así sucesivamente. A esta particularidad se le llama anidación. Ilustrémoslo gráficamente:
La etiqueta <div> define a un elemento — como su nombre lo indica — tiene como función semántica dividir la estructura del contenido en secciones osea que — por si hay diseñadores entre la audiencia — los divs son los módulos de los que disponemos para construír nuestro diseño.
Yo no me llamo Javier ( Elementos padres, hijos y herencia )
Como vemos en el esquema de arriba, el elemento body es el de mayor jerarquía y el que contiene a todos los demas. Cuando un elemento A contiene a otro, digamos B se dice entonces que A es padre de B y B es hijo de A. Si ademas dentro de B está contenido un elemento C entonces A Es padre de B y abuelo de C o mejor dicho, su ancestro. A esto se le llama herencia, las propiedades de los padres son pasadas a los hijos y luego a los nietos y los tataranietos etc. (A todos de igual forma y en partes sin necesidad de que nadie muera… mejor que la vida real ¿no?)
Mucho bla, bla, bla y poca acción
Bueno, regresemos a nuestra hoja de estilos, aquella que hace un rato dejamos completamente en blanco, ahí escriba lo siguiente:
body{
font-family:Verdana,Helvetica,Arial,Sans-serif;
color:#333;
}
guarde, reconstruya y vea los resultados.
¿Quiere saber que es lo que hicimo? bueno, dejeme le explico.
Para dar estilo a nuestras páginas (X)HTML lo que hacemos es crear dentro de nuestras hojas de estilo es crear selectores que esten enlazados a uno o varios elementos dentro de nuestro código. Cualquier elemento HTML dentro de nuestra página puede convertirse en un selector de CSS como en este caso lo hicimos con body.
Ya que body es el elemento con mayor jerarquía dentro de la estructura de nuestra página al crear un selector para este y modificar sus propiedades, estas propiedades serán heredadas por el resto de los elementos hijos. Las propiedades se definen dentro de llaves (o corchetes o curly brackets como le llamen ustedes) ( {...} ) después del nombre del selector. CSS no reconoce lo saltos de línea, asi que pueden escribirlo todo en varias líneas para que su código sea mas claro y fácil de leer. Para definir una propiedad se utiliza la siguiente sintáxis propiedad:valor[,valor2[,valor3...] ]
Ahora veamos algo de las dos propiedades que definimos:
Con font-family declaramos la familia tipográfica que utilizaremos en nuestro diseño. En este caso elegí en primer lugar Verdana que al ser la primera en la lista de fuentes, será la que se despliegue preferentemente. Si el usuario no la tiene instalada se ira por la segunda opción en este caso Helvetica que es más común en Mac o Arial para Windows. La ultima sans-serif es una fuente genérica, es decir en caso de no encontrar ninguna otra de la lista el navegador incluirá cualquier fuente san-serif. Es importante siempre nombrar al menos una fuente genérica en nuestras hojas de estilos.
color define el color del texto. Su valor se puede expresar de varias maneras:
- Por medio de constantes, hay 16 nombres de color aceptados por la W3C que son aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow y white.
- Por medio de valores rgb por ejemplo
rgb(255,0,0)= rojo. - Por su valor hexagecimal, como
#ffffff= blanco y#ff0000= rojo . Donde cada par de numeros representa un valor de 0 a 255 de rojo, verde y azul respectivamente. Ademas, estos se pueden resumir:#990000=#900y#999999=#999
En este caso he elegido #333 un color oscuro que no llega a ser negro, y que sobre el fondo blanco porporciona suficiente contraste para dar buena legibilidad sin llegar a lastimar la vista. Es importante notar que ya desde este punto estamos tomando decisiones de diseño.
Por ahora es todo de esta primera lección. Tal vez parezca que no avanzamos mucho, pero hemos sentado las bases y después de esto, todo es pura diversión.
Dudas y sugerencias ya saben, en los comentarios.
Perfecto, va muy bien que siga.
vaya.. yo esperaba un tutorial de css, no de css+html+mt+ftp
no lo leí completo, pero
Por medio de valores rgb por ejemplo rgb(255,0,0)= negro.
rgb(0,0,0) es negro
ese es rojo
pequeño error de dedo, me imagino
pero te está quedando chido el tuto
saludos
Que wey estoy, ya lo corregí gracias fael por el comentario.
Respecto a lo otro,mi intención no es tanto que aprendan solo unos trucos de CSS sino que la gente que no tiene ni idea, entienda que está haciendo… ya sabes como aquello de enseñarle a alguien a pescar en lugar de darle un pescado. ;)
sí, lo digo porque está +chido así
jejejeje, no pude evitar sentir nostalgia con lo del manualito, me recordo mucho a mi tesis :’(
¿neta paulinita?
¿hiciste tu tesis sobre CSS?
Neta que se lucio ese sosa, muy buen post yo que sot un total neofito en estos menesteres me tengo que beber este post en dosis breves, gracias ;)
Contribuye a la discusión