Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el absoluto placer de contar con el apoyo y el conocimiento de Yudy, de Ingenio DIY. Los colombianos no solo crearon la única telenovela que miré en mi vida sino que nos regalan a una mujer que puede hablar de código CSS con la misma naturalidad con la cual nos cuenta la felicidad por el primer aniversario de su blog. A propósito, no te pierdas el sorteo de cumpleaños de Yudy porque sortea una plantilla para blogger tan delicada y femenina como ella. Te dejo con sus palabras. Leé con calma y sin abrumarte. De esa forma, la próxima vez que intentes modificar la plantilla de tu blog, no vas a ver únicamente un río danzante de palabras -no sé vos, pero yo, después de cinco minutos veo cositas que bailan en la pantalla...
Conoce el CSS de tu blog... sin morir en el intento de modificarlo.
Primero decir que es un honor hacer un primer colaborativo para La Desmesurada, es un blog que siempre me ha encantado, Paula tiene literatura que corre en sus venas loca por salir, no más leer un post suyo ya se sabe que esta mujer no es cualquier cosa, no no, sabe un montón y perdonará ella todos los errores lingüísticos que pueda cometer en este post.
Segundo agradecerle a Paula que me haya acompañado desde que empecé a darle forma a mi blog ha sido un aliciente tenerla junto con otros blogger que solo con dar su opinión sobre algún tema le da a uno ganas de seguir con más y más.
Pero hablemos de lo que realmente nos importa hoy, hablaremos de CSS, ¿te suena a chino verdad? ¿o lo has escuchado o leído, pero ni enterad@? ¿O eres igual de inquiet@ a mí y toqueteas todo? Bueno, si acertaste a alguna de estas preguntas este post te ayudará. Te enseñaré lo básico, tal cual como me gusta aprenderlo a mí, fácil y como niño de 5 años.
¿Qué es el CSS?
CSS es un acrónimo de Cascading Style Sheet
Es el medio por el cual le damos forma a un documento, en nuestro caso a nuestro blog. ¿Qué queremos decir con forma? Pues si te pones a mirar cada línea, cada distancia que hay entre línea y línea, los títulos, todooo lo que estás viendo y leyendo en este momento tiene CSS. Es como la sangre de nuestro blog. El CSS cubre el estilo de los colores, fuentes, alturas, etc. Si ponemos un ejemplo rápido, es igual a cuando te compras una casa y empiezas a decorarla y darle forma, el CSS es lo mismo pero digitalmente.
¿HTML y CSS son la misma cosa?
No, el HTML es la estructura de un formato, poniéndolo más fácil son las vigas de una casa. ¿Recuerdan hace mucho años (suponiendo que tengas más de 30 años) cuando los computadores eran blancos, panzones, de pantalla negra y que salía una pequeña raya blanca parpadeando? Pues en esos años no existía el CSS por eso todo lo que veíamos era tan plano sin formas ni na. Pero como todo en el mundo de la evolución los seres humanos teníamos la necesidad de crear aún más y verlo de tal forma que fuera tal y como nuestros ojos miran. Fue así como nació el CSS, porque necesitábamos sofisticar el mundo digital y darle forma a los contenidos planos que en su momento existían. "Gracias al universo se inventaron esto porque no me imagino yo siendo bloguera y tener una pantalla negra con un formato sin sentido y una rayando parpadeando esperando a dar información" Bueno esto es un rollo largo que tiene muchas vertientes y hoy no nos vamos a alargar en este tema.
Empecemos a conocer el CSS , es muy fácil.
Cuando estamos dentro del diseño HTML de nuestro blog, nos encontramos con unos párrafos que se llaman:
Variable definitions.
Toda esta parte quiere decir que las variables nos ayudan a modificar los colores, las fuentes y otros estilos de nuestro blog desde otras partes en su mayoría sin entrar al diseño HTML. Si no sabes de que va esto, te recomiendo que corras a abrir tu plantilla en HTML y mires si tienes o no Variables, si tienes una plantilla que viene por defecto con Blogger, fijo fijo la tendrás. En su defecto si te has descargado una plantilla gratuita seguramente no tienes variables y son gratuitas por el mismo motivo que los creadores no quieren que nosotros trasformemos sus inventos. Vete a Diseño y entra en Personalizar, si tienes una plantilla que viene por defecto en blogger podrás modificar todo lo que quieras, si tienes una plantilla pre-diseñada gratuita no podrás modificar nada.
Luego de todos esos párrafos de Variables nos encontramos con los Estilos CSS, como un ejemplo son estos dos. CSS limpio, o sea que está sin ninguna modificación, Blogger nos lo entrega así tal cual, de nosotros depende que le demos forma o no. Si notamos Blogger mismo nos avisa que está sin modificar, nos lo da virgen para que nosotros lo toqueteemos. Lo sabremos porque aparece el signo que para mí son Pesos Colombianos "$" (esto ya tiene buena pinta ja!) es la S con un palito atravesado y unas palabras en paréntesis al lado. Eso es así, no hay nada más obvio que eso. La próxima vez que entres a tu plantilla al menos ya sabrás que si encuentras algo así es porque nunca lo has tocado.
Content
------------------------------
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}
Ahora miremos un CSS que ya está modificado:
No hay que fijarse bien para darse cuenta del cambio. Aquí le hemos dado forma al cuerpo del blog, le dijimos a la plantilla por medio del CSS que le cambiáremos el tipo de fuente, el color, el espacio entre línea y línea y además dejamos una posibilidad de ponerle una imagen.
Content
------------------------------
body {
font: 15px Raleway;
color: #000;
background: #fff;
padding: 0px;
background-image: url("#");
background-repeat: repeat-x;
}
Ahora miremos para que sirve esto:
Content
------------------------------
Este puede ser un título cualquiera de un código, le podemos llamar como queramos, la palabra "Content" no es necesaria podemos cambiarla por una palabra que nos ayude a descifrar en donde esta este código si lo miro en el blog. Se le puede llamar como queramos porque el "" hace que no se muestre como un código si no como indicación sobre algo. Podemos hacer lo siguiente siempre respetando el "" al empezar y terminar. Además ayuda a tener ordenada la plantilla separando todos los códigos con este fragmento y dándoles en nombre que más nos ayude.
Contenido del cuerpo del blog
------------------------------
Ya teniendo esto claro haré un glosario con palabras básicas del CSS. No hay que tener un máster en Inglés para saber la traducción de algunas palabras pero, como dijimos al principio, otras nos suenan a chino.
GLOSARIO CSS
{ } : Cuando encontramos esta llave o corchete quiere decir que está abriendo o cerrando un código, si miramos el código anterior tiene un corchete abierto después de body y otro que cierra al final
Padding: Quiere decir el relleno de algo, empieza desde 0px hasta infinitos px
Background: Es el fondo, se puede definir por color o por imagen que sería
background-image: url("URL de la imagen")
Color: debe tener siempre un código de color Ej: #000000 negro #ffffff blanco
Border: Es una línea o un radio, se define el Pixeles 0px al infinito.
font: El tipo de letra y muchas veces con el tamaño incluido.
Font-size: El tamaño de la letra.
Font-style: darle estilo a la letra, puede ser; Normal, Italic, Oblique etc.
Font-weight: El grosor de la letra; Bold-gruesa o normal, también puedes graduarle en números de 100 en 100.
Margin: La distancia que hay entre un elemento y otro.
letter-spacing: El espacio que hay entre letra y letra.
position: La posición de un elemento.
text-align: Alienación del texto, podemos ajustarlo por medio de señales; Left-Derecha, center-Centro, rigth-izquierda.
Bueno hasta aquí una pequeña lección del CSS pero todavía hay mucha tela que cortar, lo importante es que no te de miedo tocar lo básico de la plantilla, solo tienes que respetar las comas, los punto y comas, los corchetes, una sola letra puede des-configurar una parte de un código pero nada del otro mundo, siempre hay formar de arreglarlo. Poco a poco si le vas modificando te vas a costumbrando a las palabras, llegas a un momento en que te dices mentalmente ¿Yo por qué se esto? lo importante es que lo sepas.
Hasta aquí mi colaborativo, no olvides aprender algo cada día. Hasta prontoNo era tan terrible...
Ahora, cuando mires la plantilla de código HTML vas a comprender los términos básicos del lenguaje de programación. Ciertamente es un aporte sustancial para no proceder a ciegas cuando pretendés seguir un tutorial de diseño. Gracias Yudy por tu aporte. Una cosa puedo decirte: mi plantilla no tiene pesos de ninguna nacionalidad. Hace mucho que el símbolo $ la abandonó irrespetuosamente. La muy impúdica es la más toqueteada del Uruguay. Pero lo llevamos con dignidad desmesurada...
Fuente: este post proviene de este blog, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado: