Conoce el CSS de tu blog.

Conoce el CSS de tu blog.


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 Sheets

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:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Blog: creado. Sistema de suscripciones: instaladísimo. Comunidad: en marcha... ¿Y ahora qué? Decime que nunca te preguntaste esto. Darle forma a un proyecto personal supone una descarga de adrenalina ...

Ponele que te convencí. Leíste los dos post anteriores de la serie "Crear una comunidad para tu blog" y llegaste a la conclusión de que te habías saltado justamente este pasito. ¿No leíste l ...

Espera tantito. Antes de leer este post, bien podrías leer el primero de la serie, en el cual te cuento mi experiencia en la construcción de una comunidad de lectores. ¿Ya lo leíste? Genial. Así tenés ...

Recomendamos

Relacionado

general desde0

Conceptos previos para los no iniciados en informática o programación. Muchas veces has escuchado cierta terminología de programación web que cuando llega a tus oídos inmediatamente despierta una curiosidad por "qué es" o "cómo funcionará" eso que han dicho y tantas veces he oído. A continuación repasamos sin entrar en profundos detalles técnicos y buscando facilitar la compres ...

css Ejercicio CSS Cajas CSS ...

Plantilla Web CSS, HTML y PHP. Las lecturas previas para desarrollar esta plantilla son las siguientes: Guía de CSS para Principiantes Ejemplo de Plantilla CSS (Ejemplo1) Ejemplo de Plantilla CSS (Ejemplo2) ¿Cómo Abrir una Página HTML Dentro de un DIV? Después de revisar los ejemplos, Se propone la práctica de CSS, HTML y PHP por medio del desarrollo de una plantilla web que

general css css3 ...

Selectores CSS: Fundamentos Hoy inicio una nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Les comparto un este post muy interesante y bien explicado sobre Selectores CSS:Fundamentos. Todos los creditos del post son de Maria Kovacs de quien les compartiré más información al final de esta traducci ...

rendimiento

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...

general

Selectores CSS: Fundamentos Seguimos conla nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Esta es la segunda parte sobre Selectores CSS. Atributos Antes de explorar los selectores atributos de CSS tenemos que entender que és un Atributo HTML y si ya viste algun documento HTML seguramente sabes co ...

general

La creación de un menú fijo para la parte superior del Blog es una popción a tener en cuenta dependiendo del tipo de presentación y la plantilla que se está utilizando. Cuando tratamos Blogs que enumeran gran cantidad de entradas y estas hacen qe haya que desplazarse verticalmente por los contenidos, el usuario puede quedar desprovisto de elementos de navegación hasta que llega a la parte inferior ...

general diseño

Han sido varias personas ya las que me han preguntado cómo hacen en el blog Los Tragaldabas para poner las fotos de esa manera: Así que he querido hacer un post explicandolo, así como otro sobre cómo hacerlo para ajustar las imágenes de manera autómatica por si puedo ayudar a más personas. Primero vemos cómo lo hacen ellos, y luego cómo hacerlo de manera automática. Eso sí, lo primero que quiero a ...

diy manualidades blogger ...

Hola, hola! Bonita y bendecida semana, este mes me propuse hacerle un cambio de look al blog,básicamente tunearlo pero yo sólita, nuevas tipografías, paletas , fondos y mas... Pero me tope con un inconveniente y al parecer no soy la única, anteriormente me proporcionaron un codigo CSS para centrar los Widgets, yo supuse que todos, toditos los widgets se centrarían, así como el titulo de cada uno ...

general

El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs. Si bien inicialmente ha tendido a ser un factor "olvidado" hoy día se ha tornado fundamental. El cliente, el usuario, ya no utiliza exclusivamente un ordenador de sobremesa o portátil para visualizar las ...

general tutoriales web ...

Si tienes ya conocimiento de las declaraciones de CSS, este tuto te sera aburrido e irrelevante, te aconsejo te prepares unos Naños de carne asada que son deliciosos. Pero si tienes poco conocimiento o nada, y deseas aprender algo hoy, entonces quedate, lo intentare hacer lo mas sencillo y fácil posible. Iniciemos por saber que es el css, como lo definen en Maestros de la Web CSS (Cascading Style ...