Joaquin Tita: Prevent ssh timeouts

Locally add the following to ~/.ssh/config
ServerAliveInterval 120 # null packet every 120 seconds
On the server side add the following:
ClientAliveInterval 120 # null packet every 120 seconds
ClientAliveCountMax 720 # 24hs

Done!

Joaquin Tita: fail2ban unban ip

To search all the ips that were banned we enter interactive mode:

$ fail2ban-client -i
Then we check a jail status, for example sshd:
> status sshd
the output:
Status for the jail: sshd
|- Filter
|  |- Currently failed: 0
|  |- Total failed: 27
|  `- File list: /var/log/auth.log
`- Actions
   |- Currently banned: 37
   |- Total banned: 38
   `- Banned IP list: <a big list of banned ips>

So, if we want to unban a particular ip address, let's say X
Then, we execute:
> set ssh unbanip (within interactive mode)

Lastly, if you want to execute it directly from command line:

$ fail2ban-client get <JAIL> actionunban <IP-ADDRESS>

That's all.

Facundo Batista: Actualización y nuevo proyecto


fades

Después de casi un año, con Nico liberamos una nueva versión de fades.

¿Qué hay de nuevo en esta release?

  • Revisar si todo lo pedido está realmente disponible en PyPI antes de comenzar a instalarlo
  • Ignora dependencias duplicadas
  • Varias mejoras y correcciones en los mensajes que fades muestra en modo verbose
  • Prohibimos el mal uso de fades: instalarlo en legacy Python y ejecutarlo desde adentro de otro virtualenv
  • Un montón de mejoras relacionadas al proyecto en sí (pero no directamente visibles para el usuario final) y algunas pequeñas otras correcciones

Pruébenlo.

Loguito de fades

infoauth

infoauth es un un pequeño pero práctico módulo de Python y script para grabar/cargar tokens a/desde disco.

Esto es lo que hace:

  • graba tokens en un archivo en disco, pickleado y zippeado
  • cambia el archivo a sólo lectura, y sólo legible por vos
  • carga los tokens de ese archivo en disco

En qué casos este módulo es útil? Digamos que tenés un script o programa que necesita algunos tokens secretos (autenticación de mail, tokens de Twitter, la info para conectarse a una base de datos, etc...), pero no querés incluir estos tokens en el código, porque el mismo es público, entonces con este módulo harías:

    tokens = infoauth.load(os.path.expanduser("~/.my-tokens"))

Fijate que el archivo va a quedar legible sólo por vos y no en el directorio del proyecto (así no tenés el riesgo de compartirlo por accidente).

CUIDADO: infoauth NO protege tus secretos con una clave o algo así, este módulo NO asegura tus secretos de ninguna manera. Sí, los tokens están enmarañados (porque se picklean y comprimen) y otra gente quizás no pueda accederlos fácilmente (legible sólo por vos), pero no hay más protección que esa. Usalo bajo tu propio riesgo.

Entonces, ¿cómo usarlo desde un programa en Python? Es fácil, para cargar la data:

    import infoauth
    auth = infoauth.load(os.path.expanduser("~/.my-mail-auth"))
    # ...
    mail.auth(auth['user'], auth['password'])

Para grabarla:

    import infoauth
    secrets = {'some-stuff': 'foo', 'code': 67}
    infoauth.dump(secrets, os.path.expanduser("~/.secrets"))

Fijate que como grabar los tokens es algo que normalmente se hace una sola vez, seguro es más práctico hacerlo desde la linea de comandos, como se muestra a continuación...

Por eso, ¿cómo usarlo desde la linea de comandos? Para mostrar la info:

    $ infoauth show ~/.my-mail-auth
    password: ...
    user: ...

Y para grabar un archivo con los datos::

    $ infoauth create ~/.secrets some-stuff=foo code=67

Fijate que al crear el archivo desde la linea de comandos tenemos la limitación de que todos los valores almacenados van a ser cadenas de texto; si querés grabar otros tipos de datos, como enteros, listas, o lo que quieras, tendrías que usar la forma programática que se muestra arriba.

Esta es la página del proyecto, y claro que está en PyPI así que se puede usar sin problema desde fades (guiño, guiño).

Roberto Alsina: I am trying to write a Python book

Once upon a time, I tried to write a book. It did not end well. I was trying to dump a whole lot of knowledge at once. Knowledge I did not really have, to be honest. When I look at that book I see a failed thing.

So, of course, many years later, I am trying again, but with the lessons learned in my mind.

  • It will be a smaller book.
  • I am not also writing a whole tool chain for it.
  • It will be about things I know.

So, what is it?

The temporary title, right now, is something like "Boxes: your second Python book". It says your second Python book because you do need a working knowledge of Python syntax as provided by the official Python Tutorial, but not much else. When there is a particularly hairy piece of code it may link to the tutorial or the reference or something.

The "idea" of the book is to bridge a gap that exists between knowing the basics of reading and writing a language (specially if it's your first!) and being able to effectively using it to create a useful project.

It follows the growth of "Boxes", a simplistic text layout engine, from a vague idea to a fully working, useful, tested, and published piece of software.

It's not there yet, but it's about 25% of the way there.

You can read it here: https://ralsina.gitlab.io/boxes-book/ and the sources are at https://gitlab.com/ralsina/boxes-book

Comments much appreciated!

Mariano Guerra: Creemos en la Web: Lo espacial es invisible a los ojos

En la sección previa (Creemos en la Web: CSS y cosas por el estilo) terminamos con una pagina que se veía así:

/galleries/cew/4/05-link.png

Que tendríamos que hacer si quisiéramos que la palabra lista tuviera la clase llamativo?

Hasta ahora para aplicar una clase a una palabra o conjunto de palabras aprovechábamos un tag que ya estaba ahí (b, i o li), pero dos de ellos aplican un formato que no queremos, y el otro solo funciona con listas.

Como podemos hacer para definir una selección para aplicarle atributos pero que en si no signifique nada?

Para eso hay un tag llamado span que en ingles significa algo así como tramo, palmo, lapso o mas detallado: la extensión completa de algo de punta a punta; la cantidad de espacio que cubre algo.

Osea, demarca el comienzo y fin de algo, su extensión y nada mas. Este tag no significa nada en si mismo, solo lo usamos para demarcar una región a la cual queremos referirnos para algo.

Si, muy difuso, vamos a algo mas tangible, en nuestro caso queremos usar span para demarcar la palabra lista y aplicarle la clase llamativo:

<p>
    Una <span class="llamativo">lista</span> no ordenada:
</p>

Y

<p>Una <span class="llamativo">lista</span> ordenada:</p>

Logrado nuestro objetivo pasamos al siguiente desafió, queremos resaltar el segundo párrafo poniéndole un borde, para eso vamos a usar un conjunto de atributos CSS nuevos:

<p style="border-width: 1px; border-style: solid; border-color: red;">Esto es otro párrafo</p>

Es un poco largo para solo decir "quiero un border rojo, de 1 pixel de ancho y solido", por suerte hay una versión abreviada:

<p style="border: 1px solid red;">Esto es otro párrafo</p>

No se vos, pero a mi me parece que el texto esta muy pegado al borde rojo, preferiría que tuviera un poco mas de espacio.

Para eso usamos una de dos formas de darle mas "espacio" a un tag, una es el espacio "interno" (entre el borde y el contenido) y otro es el espacio "externo" (entre el borde y sus vecinos).

El espacio interno en ingles se llama padding (se traduce "relleno"), el espacio externo en ingles se llama margin (se traduce "margen").

Estos dos atributos los vas a usar mucho en el día a día y como se usan mucho hay formas abreviadas y mas especificas de usarlos, empecemos con la abreviada que es la que nos sirve a nosotros.

<p style="padding: 8px; border: 1px solid red;">Esto es otro párrafo</p>

Eso esta un poco mejor!

Ya que estamos haciéndonos espacio, demosle un poco mas de espacio exterior:

<p style="margin: 8px; padding: 8px; border: 1px solid red;">Esto es otro párrafo</p>

Un poco mejor, pero si bien le da espacio con respecto al párrafo anterior y el siguiente, también tiene un margen izquierdo que lo "desalinea" con respecto al resto de los tags.

Para poder especificar margenes y rellenos con mas nivel de detalle vamos a necesitar usar las versiones menos abreviadas, ambas aplican tanto a margin como a padding así que las vemos juntas:

Primero la que ya vimos:

margin: 8px;
padding: 8px;

Esto aplica a los 4 lados del tag, el siguiente nos permite especificar dos valores:

margin: 8px 0px;
padding: 8px 0px;

El primer valor es para arriba y abajo, el segundo valor para la izquierda y la derecha.

El no abreviado nos permite especificar los cuatro valores:

margin: 8px 0px 0px 0px;
padding: 8px 0px 0px 0px;

Y el orden es como las agujas del reloj:

margin: <arriba> <derecha> <abajo> <izquierda>;
padding: <arriba> <derecha> <abajo> <izquierda>;

Pero que pasa si solo queremos especificar uno de ellos? tenemos que poner en 0 a todos los otros siempre? Por suerte no, hay otra forma de ser aun mas especifico, diciendole cual margen o relleno queremos definir:

margin-top: 8px;    /* top: arriba */
margin-right: 0px;  /* right: derecha */
margin-bottom: 0px; /* bottom: abajo */
margin-left: 0px;   /* left: izquierda */

Como veras a la derecha de las definiciones puse las traducciones entre /* y */, si escribís eso en tu CSS va a funcionar. Esto es porque son comentarios, una forma de agregar notas en el código CSS que el navegador ignora ya que es para los humanos.

Si querés escribir comentarios en HTML es un poco distinto:

<!-- Esto es un comentario, puede ir en cualquier lado y el navegador
     lo va a ignorar, puede extenderse mas de una linea.

     suele ser útil cuando queremos esconder un tag pero no borrarlo.
-->

Volviendo al tag span, este tag sirve solo para rodear segmentos de texto, que pasa si queremos agregar un borde con relleno a los primeros 3 párrafos?

Agregar borde a cada párrafo no sirve, porque lo que queremos es "rodear" los 3 párrafos con un borde y el tag span solo sirve para rodear texto.

Obviamente este problema se resuelve con un nuevo tag, se llama div y cumple la misma función que span pero se diferencia en que dentro de el puede haber otros tags.

Probemoslo rodeando los 3 primeros párrafos con un borde verde y relleno de 8 pixeles:

<div style="border: 1px solid green; padding: 8px">
  <p>Esto es un párrafo, la siguiente palabra es en
     <b class="llamativo">negrita</b>, la siguiente en
     <i class="llamativo">itálica</i>
  </p>

  <p style="margin: 8px; padding: 8px; border: 1px solid red;">
    Esto es otro párrafo
  </p>

  <p>
    Una <span class="llamativo">lista</span> no ordenada:
  </p>
</div>

El resultado queda algo así (tené en cuenta que esta sección ya tiene CSS así que en Thimble se va a ver un poco distinto):

Esto es un párrafo, la siguiente palabra es en negrita, la siguiente en itálica

Esto es otro párrafo

Una lista no ordenada:

Con lo que aprendimos en esta sección podemos arreglar una cosa que no quedaba del todo bien.

Quizás notaste que al aplicar la clase llamativo a los ítems de la lista, el marcador de la izquierda también se volvió llamativo, si queremos que solo el contenido del ítem sea llamativo y no el ítem completo, podemos hacer uso de nuestro nuevo amigo el tag span para aplicar la clase solo al contenido.

Pasamos de:

<ul>
  <li class="llamativo">Manzana</li>
  <li>Durazno</li>
  <li class="llamativo">Banana</li>
</ul>
  • Manzana
  • Durazno
  • Banana

A:

<ul>
  <li><span class="llamativo">Manzana<span></li>
  <li>Durazno</li>
  <li><span class="llamativo">Banana<span></li>
</ul>
  • Manzana
  • Durazno
  • Banana

Y Problema resuelto.

Mariano Guerra: Creemos en la Web: CSS y cosas por el estilo

En la sección previa (Creemos en la Web: HTML atributos y meta datos) vimos como usar HTML para definir la estructura y el contenido de nuestras paginas web, pero seamos sinceros, el aspecto deja bastante que desear.

Para poder hacer nuestras paginas mas agradables vamos a aprender el segundo lenguaje: CSS, el cual sirve para describir el aspecto y disposición del contenido que definamos con HTML.

Apagando las luces

Vamos a empezar cambiando un poco de color, que pasa si queremos hacer una pagina "invertida"? donde el fondo es oscuro y el texto claro.

Creemos un proyecto nuevo con el siguiente contenido:

<!doctype html>
<html>
  <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
  </head>

  <body>
        <h1>Esto es un título</h1>

        <p>Esto es un párrafo, la siguiente palabra es en <b>negrita</b>, la siguiente en <i>itálica</i></p>

        <p>Esto es otro párrafo</p>

        <p>
          Una lista no ordenada:
        </p>

        <ul>
          <li>Manzana</li>
          <li>Durazno</li>
          <li>Banana</li>
        </ul>


        <p>Una lista ordenada:</p>

        <ol>
          <li>Uno</li>
          <li>Dos</li>
          <li>Tres</li>
        </ol>

        <p>Un link a <a href="https://google.com">Google</a></p>

        <p>Una imagen:</p>

        <img title="un cubo" width="200" height="200"  src="cube.jpg">
  </body>
</html>

Para empezar tenemos que hacer que el fondo sea oscuro, es decir el cuerpo (body) de la pagina debe tener el color de fondo negro.

Como le decimos a un tag cosas que no son su contenido?

Con atributos, en este caso el atributo es bastante poderoso, y su valor es un lenguaje en si mismo!

Cambiamos el tag de apertura del cuerpo de

<body>

A:

<body style="background-color: black;">

El contenido del atributo style es uno o mas pares de valores, cada par separado por ;, cada par a su lado izquierdo tiene la "llave" y del lado derecho el "valor".

Este concepto de pares llave valor se va a repetir mucho en el mundo informático así que si prestas atención lo vas a ver en muchos lados, para empezar, ya los conocés de los atributos de los tags :)

Los pares llave/valor en CSS sirven para especificar distintas propiedades del tag en el que están definidos.

En este caso le estamos diciendo que el color de fondo (background significa fondo en ingles) tiene el valor negro (black).

El resultado, si bien es lo que queremos, nos agrega un nuevo desafío:

/galleries/cew/4/01-bg-color.png

El texto no se lee!

Ahora tenemos que hacer que el texto sea un color claro, empezamos con el titulo:

<h1 style="color: white;">Esto es un título</h1>

Para definir el color del contenido de un tag (no el fondo), usamos la llave color (que por suerte no tenemos que traducir :)

Continuamos con el primer párrafo:

<p style="color: white;">Esto es un párrafo, la siguiente palabra es en <b>negrita</b>, la siguiente en <i>itálica</i></p>

Y el resultado se ve algo así:

/galleries/cew/4/02-color.png

Si sos como yo, ya estarás pensando: "Esto va a llevar un buen tiempo y mucha repetición!".

Si, eso pensé yo.

Pero quizás notaste que la palabra negrita y la palabra itálica ahora también tienen color blanco.

Esto no es un accidente, cuando un valor se define en CSS para un tag, los tags descendientes "heredan" ese valor si tiene sentido, el color de fondo y el color del texto por suerte son unos de ellos.

Ahora bien, donde podríamos poner el color de texto para hacer el menor esfuerzo posible?

En el mismo lugar que definimos el color de fondo.

<body style="background-color: black; color: white;">

El resultado es lo que esperábamos:

/galleries/cew/4/03-color.png

Gustos específicos

Ahora digamos que se nos ocurre que queremos que la palabra negrita, itálica y los elementos impares de las listas tienen que tener fondo blanco y texto rojo.

Intentemos lo:

<!doctype html>
<html>
  <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
  </head>

  <body style="background-color: black; color: white;">
        <h1>Esto es un título</h1>

        <p>Esto es un párrafo, la siguiente palabra es en <b style="background-color: white; color: red;">negrita</b>, la siguiente en <i style="background-color: white; color: red;">itálica</i></p>

        <p>Esto es otro párrafo</p>

        <p>
          Una lista no ordenada:
        </p>

        <ul>
          <li style="background-color: white; color: red;">Manzana</li>
          <li>Durazno</li>
          <li style="background-color: white; color: red;">Banana</li>
        </ul>


        <p>Una lista ordenada:</p>

        <ol>
          <li style="background-color: white; color: red;">Uno</li>
          <li>Dos</li>
          <li style="background-color: white; color: red;">Tres</li>
        </ol>

        <p>Un link a <a href="https://google.com">Google</a></p>

        <p>Una imagen:</p>

        <img title="un cubo" width="200" height="200"  src="cube.jpg">
  </body>
</html>

Eso fue bastante repetitivo...

Gustos específicos, cambiantes

En este momento se nos ocurre que quizás seria mejor si el texto fuera azul en lugar de rojo.

La idea de tener que cambiar el color en cada lugar nos hace pensar que quizás el rojo esta bien después de todo...

Pero como siempre en el mundo de la web, si algo es repetitivo y tedioso, seguro hay una forma de automatizar lo repetitivo.

En este caso lo que nos serviría es indicar todos los tags que comparten un conjunto de características y especificar en un mismo lugar las características comunes.

Es como si los tags pertenecieran a una misma clase.

Y resulta que todos los tags pueden tener un atributo para eso, el atributo class nos permite definir una lista de palabras separadas por espacios que describen a que clases pertenece ese tag.

Llamemos a nuestra clase de tags con fondo claro y texto colorido llamativo.

Edita el ejemplo, todos los elementos con style="background-color: white; color: red;" ahora tienen que contener el atributo class con el valor llamativo, ejemplo del primero:

<b class="llamativo">negrita</b>

Luego de hacer todos los cambios podemos observar que ... no paso nada.

Porque las clases son cosas que usamos nosotros para agrupar tags, ahora tenemos que de alguna forma decirle al navegador que queremos que todos los tags con clase llamativo tengan fondo blanco y texto azul.

Para eso vamos a aprender un tag nuevo, el tag style, este tag normalmente va en la cabecera (porque no define contenido del documento) y nos permite centralizar en un lugar las definiciones de estilo.

Este va a ser el principio del documento:

<!doctype html>
<html>
  <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
        <style>
        .llamativo{
                background-color: white;
                color: blue;
        }
        </style>
  </head>

La parte que nos interesa y es nueva es el contenido del tag

.llamativo{
        background-color: white;
        color: blue;
}

El nombre de nuestra clase esta ahí, pero empieza con un punto?

Si, para decirle al navegador que llamativo es una clase de tags en nuestro documento.

Luego de decir para que cosa queremos definir el estilo, llamado selector en la jerga CSS (ya que selecciona el conjunto de tags a los cuales el estilo aplica) le decimos que estilo aplicar, en nuestro caso y de la misma forma que en el atributo style, pares de llave/valor separados por ;. Por suerte acá podemos separarlos con saltos de linea y espacios para hacerlo mas legible.

Que pasa si no ponemos el punto? el navegador piensa que nos referimos al nombre de un tag, veamos un ejemplo.

.llamativo{
        background-color: white;
        color: blue;
}

body{
        background-color: black;
        color: white;
}

Y así podemos centralizar todo el estilo de la pagina en la cabecera y separar claramente el contenido de su presentación, algo que es una buena costumbre en el desarrollo web.

/galleries/cew/4/04-style.png

Gustos cambiantes, en muchos lugares

Con lo que aprendimos hasta ahora ya podrías tener tu pagina personal, tu blog o una pagina con cuentos o historias.

Imaginemos que con el tiempo tu pagina web crece y tiene 10 documentos distintos, todos con el mismo estilo en la cabecera.

Y un día decidís cambiar el estilo de tu pagina, querés algo mas claro.

Ahí es cuando dándote cuenta que vas a tener que hacer cambios en 10 documentos, el estilo oscuro actual no es tan mala idea después de todo...

A menos que haya otra forma de evitar la repetición.

Por suerte la hay, y quizás ya la notaste al ver en tus proyectos de Thimble un archivo con un nombre familiar que todavía no mencionamos.

El misterioso style.css.

Si lo abrís vas a ver un contenido familiar con algunas cosas nuevas, el mio tiene esto:

/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

Con lo que aprendimos e ignorando las primeras dos lineas podemos ver que es un archivo que contiene CSS y que define el estilo para el tag body y para los títulos.

Pero ese estilo no se esta aplicando, porque no lo incluimos en nuestro documento.

Para incluirlo vamos a aprender un tag nuevo, que hace muchas cosas distintas pero su tarea habitual es incluir archivos de estilo en documentos HTML.

Si agregamos el siguiente tag:

<link href="style.css" rel="stylesheet">

Después del tag style en la cabecera podemos ver como de pronto el estilo contenido en ese archivo se aplica al documento!

Antes de ver que sucedió y donde esta nuestro fondo negro veamos los dos atributos del tag link:

href
Atributo que indica la ubicación del archivo de estilo a cargar, ya lo conocíamos del tag a
rel
Como vimos mas arriba, link es un tag polifacético, y para saber cual es la rel acion del archivo referenciado con el actual, se lo tenemos que indicar. En este caso le decimos que la relación es de una hoja de estilo (S tyle s heet), de ahí las dos s en CSS

Ahora tendrás una de dos preguntas, o las dos:

Y nuestro fondo oscuro?

Y la C en CSS que significa?

Resulta que las dos preguntas tienen mas o menos la misma respuesta, la C en CSS es de Cascada, osea que CSS en español significa hojas de estilo en cascada.

Y donde esta la cascada? en la forma en la que el navegador interpreta los estilos que definimos para nuestro documento.

En nuestro documento primero le decimos que el fondo del tag body es negro y después cargamos un archivo CSS que le dice que el fondo es claro.

El navegador interpreta los estilos dándole la razón al ultimo que lo declaro y al mas especifico.

En este caso, el ultimo en declarar el color de fondo del documento es el archivo (esta mas abajo en el documento HTML).

Y lo de mas especifico? bueno, el color del texto esta definido en varios lugares, en el tag style para el tag body, y en el archivo style.css para el tag body. en ese caso sabemos que el ultimo gana.

Pero sin embargo los tags con clase llamativo son azules, como decide el navegador que el azul le gana al negro? Porque el atributo class es mas especifico que el tag body.

De esta manera podemos hacer definiciones generales "a grandes rasgos" al principio de nuestras hojas de estilo e irlas refinando mas abajo, redefiniendolas para casos mas particulares e incluso en otras hojas de estilo especificas para ciertos documentos.

Esto es bastante información y con el tiempo lo vamos a ir aprendiendo a medida que lo usamos.

Pero antes de terminar, movamos nuestro estilo al archivo style.css y dejemos el documento HTML libre de CSS mas que la referencia a style.css, el cual queda así:

body {
  background-color: white;
  color: #444;

  font-family: helvetica;
  font-size: 18px;

  padding: 5px 25px;
  margin: 0;
}

h1 {
  font-size: 32px;
}

.llamativo{
  background-color: white;
  color: blue;
}

En el CSS hay algunas llaves nuevas, font-family define la fuente del texto, font-size su tamaño, las otras dos (padding y margin) las vamos a ver en próximas secciones.

El principio de nuestro documento queda así:

<!doctype html>
<html>
  <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
        <link href="style.css" rel="stylesheet">
  </head>

Ya observaras uno de los beneficios de separar contenido de presentación: cambiamos completamente el aspecto de la pagina sin tocar si contenido.

El proyecto quedo así:

/galleries/cew/4/05-link.png

Mariano Guerra: Creemos en la Web: CSS y cosas por el estilo

En la sección previa (Creemos en la Web: HTML atributos y meta datos) vimos como usar HTML para definir la estructura y el contenido de nuestras paginas web, pero seamos sinceros, el aspecto deja bastante que desear.

Para poder hacer nuestras paginas mas agradables vamos a aprender el segundo lenguaje: CSS, el cual sirve para describir el aspecto y disposición del contenido que definamos con HTML.

Apagando las luces

Vamos a empezar cambiando un poco de color, que pasa si queremos hacer una pagina "invertida"? donde el fondo es oscuro y el texto claro.

Creemos un proyecto nuevo con el siguiente contenido:

<!doctype html>
<html>
  <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
  </head>

  <body>
        <h1>Esto es un título</h1>

        <p>Esto es un párrafo, la siguiente palabra es en <b>negrita</b>, la siguiente en <i>itálica</i></p>

        <p>Esto es otro párrafo</p>

        <p>
          Una lista no ordenada:
        </p>

        <ul>
          <li>Manzana</li>
          <li>Durazno</li>
          <li>Banana</li>
        </ul>


        <p>Una lista ordenada:</p>

        <ol>
          <li>Uno</li>
          <li>Dos</li>
          <li>Tres</li>
        </ol>

        <p>Un link a <a href="https://google.com">Google</a></p>

        <p>Una imagen:</p>

        <img title="un cubo" width="200" height="200"  src="cube.jpg">
  </body>
</html>

Para empezar tenemos que hacer que el fondo sea oscuro, es decir el cuerpo (body) de la pagina debe tener el color de fondo negro.

Como le decimos a un tag cosas que no son su contenido?

Con atributos, en este caso el atributo es bastante poderoso, y su valor es un lenguaje en si mismo!

Cambiamos el tag de apertura del cuerpo de

<body>

A:

<body style="background-color: black;">

El contenido del atributo style es uno o mas pares de valores, cada par separado por ;, cada par a su lado izquierdo tiene la "llave" y del lado derecho el "valor".

Este concepto de pares llave valor se va a repetir mucho en el mundo informático así que si prestas atención lo vas a ver en muchos lados, para empezar, ya los conocés de los atributos de los tags :)

Los pares llave/valor en CSS sirven para especificar distintas propiedades del tag en el que están definidos.

En este caso le estamos diciendo que el color de fondo (background significa fondo en ingles) tiene el valor negro (black).

El resultado, si bien es lo que queremos, nos agrega un nuevo desafío:

/galleries/cew/4/01-bg-color.png

El texto no se lee!

Ahora tenemos que hacer que el texto sea un color claro, empezamos con el titulo:

<h1 style="color: white;">Esto es un título</h1>

Para definir el color del contenido de un tag (no el fondo), usamos la llave color (que por suerte no tenemos que traducir :)

Continuamos con el primer párrafo:

<p style="color: white;">Esto es un párrafo, la siguiente palabra es en <b>negrita</b>, la siguiente en <i>itálica</i></p>

Y el resultado se ve algo así:

/galleries/cew/4/02-color.png

Si sos como yo, ya estarás pensando: "Esto va a llevar un buen tiempo y mucha repetición!".

Si, eso pensé yo.

Pero quizás notaste que la palabra negrita y la palabra itálica ahora también tienen color blanco.

Esto no es un accidente, cuando un valor se define en CSS para un tag, los tags descendientes "heredan" ese valor si tiene sentido, el color de fondo y el color del texto por suerte son unos de ellos.

Ahora bien, donde podríamos poner el color de texto para hacer el menor esfuerzo posible?

En el mismo lugar que definimos el color de fondo.

<body style="background-color: black; color: white;">

El resultado es lo que esperábamos:

/galleries/cew/4/03-color.png

Gustos específicos

Ahora digamos que se nos ocurre que queremos que la palabra negrita, itálica y los elementos impares de las listas tienen que tener fondo blanco y texto rojo.

Intentemos lo:

<!doctype html>
<html>
  <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
  </head>

  <body style="background-color: black; color: white;">
        <h1>Esto es un título</h1>

        <p>Esto es un párrafo, la siguiente palabra es en <b style="background-color: white; color: red;">negrita</b>, la siguiente en <i style="background-color: white; color: red;">itálica</i></p>

        <p>Esto es otro párrafo</p>

        <p>
          Una lista no ordenada:
        </p>

        <ul>
          <li style="background-color: white; color: red;">Manzana</li>
          <li>Durazno</li>
          <li style="background-color: white; color: red;">Banana</li>
        </ul>


        <p>Una lista ordenada:</p>

        <ol>
          <li style="background-color: white; color: red;">Uno</li>
          <li>Dos</li>
          <li style="background-color: white; color: red;">Tres</li>
        </ol>

        <p>Un link a <a href="https://google.com">Google</a></p>

        <p>Una imagen:</p>

        <img title="un cubo" width="200" height="200"  src="cube.jpg">
  </body>
</html>

Eso fue bastante repetitivo...

Gustos específicos, cambiantes

En este momento se nos ocurre que quizás seria mejor si el texto fuera azul en lugar de rojo.

La idea de tener que cambiar el color en cada lugar nos hace pensar que quizás el rojo esta bien después de todo...

Pero como siempre en el mundo de la web, si algo es repetitivo y tedioso, seguro hay una forma de automatizar lo repetitivo.

En este caso lo que nos serviría es indicar todos los tags que comparten un conjunto de características y especificar en un mismo lugar las características comunes.

Es como si los tags pertenecieran a una misma clase.

Y resulta que todos los tags pueden tener un atributo para eso, el atributo class nos permite definir una lista de palabras separadas por espacios que describen a que clases pertenece ese tag.

Llamemos a nuestra clase de tags con fondo claro y texto colorido llamativo.

Edita el ejemplo, todos los elementos con style="background-color: white; color: red;" ahora tienen que contener el atributo class con el valor llamativo, ejemplo del primero:

<b class="llamativo">negrita</b>

Luego de hacer todos los cambios podemos observar que ... no paso nada.

Porque las clases son cosas que usamos nosotros para agrupar tags, ahora tenemos que de alguna forma decirle al navegador que queremos que todos los tags con clase llamativo tengan fondo blanco y texto azul.

Para eso vamos a aprender un tag nuevo, el tag style, este tag normalmente va en la cabecera (porque no define contenido del documento) y nos permite centralizar en un lugar las definiciones de estilo.

Este va a ser el principio del documento:

<!doctype html>
<html>
  <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
        <style>
        .llamativo{
                background-color: white;
                color: blue;
        }
        </style>
  </head>

La parte que nos interesa y es nueva es el contenido del tag

.llamativo{
        background-color: white;
        color: blue;
}

El nombre de nuestra clase esta ahí, pero empieza con un punto?

Si, para decirle al navegador que llamativo es una clase de tags en nuestro documento.

Luego de decir para que cosa queremos definir el estilo, llamado selector en la jerga CSS (ya que selecciona el conjunto de tags a los cuales el estilo aplica) le decimos que estilo aplicar, en nuestro caso y de la misma forma que en el atributo style, pares de llave/valor separados por ;. Por suerte acá podemos separarlos con saltos de linea y espacios para hacerlo mas legible.

Que pasa si no ponemos el punto? el navegador piensa que nos referimos al nombre de un tag, veamos un ejemplo.

.llamativo{
        background-color: white;
        color: blue;
}

body{
        background-color: black;
        color: white;
}

Y así podemos centralizar todo el estilo de la pagina en la cabecera y separar claramente el contenido de su presentación, algo que es una buena costumbre en el desarrollo web.

/galleries/cew/4/04-style.png

Gustos cambiantes, en muchos lugares

Con lo que aprendimos hasta ahora ya podrías tener tu pagina personal, tu blog o una pagina con cuentos o historias.

Imaginemos que con el tiempo tu pagina web crece y tiene 10 documentos distintos, todos con el mismo estilo en la cabecera.

Y un día decidís cambiar el estilo de tu pagina, querés algo mas claro.

Ahí es cuando dándote cuenta que vas a tener que hacer cambios en 10 documentos, el estilo oscuro actual no es tan mala idea después de todo...

A menos que haya otra forma de evitar la repetición.

Por suerte la hay, y quizás ya la notaste al ver en tus proyectos de Thimble un archivo con un nombre familiar que todavía no mencionamos.

El misterioso style.css.

Si lo abrís vas a ver un contenido familiar con algunas cosas nuevas, el mio tiene esto:

/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

Con lo que aprendimos e ignorando las primeras dos lineas podemos ver que es un archivo que contiene CSS y que define el estilo para el tag body y para los títulos.

Pero ese estilo no se esta aplicando, porque no lo incluimos en nuestro documento.

Para incluirlo vamos a aprender un tag nuevo, que hace muchas cosas distintas pero su tarea habitual es incluir archivos de estilo en documentos HTML.

Si agregamos el siguiente tag:

<link href="style.css" rel="stylesheet">

Después del tag style en la cabecera podemos ver como de pronto el estilo contenido en ese archivo se aplica al documento!

Antes de ver que sucedió y donde esta nuestro fondo negro veamos los dos atributos del tag link:

href
Atributo que indica la ubicación del archivo de estilo a cargar, ya lo conocíamos del tag a
rel
Como vimos mas arriba, link es un tag polifacético, y para saber cual es la rel acion del archivo referenciado con el actual, se lo tenemos que indicar. En este caso le decimos que la relación es de una hoja de estilo (S tyle s heet), de ahí las dos s en CSS

Ahora tendrás una de dos preguntas, o las dos:

Y nuestro fondo oscuro?

Y la C en CSS que significa?

Resulta que las dos preguntas tienen mas o menos la misma respuesta, la C en CSS es de Cascada, osea que CSS en español significa hojas de estilo en cascada.

Y donde esta la cascada? en la forma en la que el navegador interpreta los estilos que definimos para nuestro documento.

En nuestro documento primero le decimos que el fondo del tag body es negro y después cargamos un archivo CSS que le dice que el fondo es claro.

El navegador interpreta los estilos dándole la razón al ultimo que lo declaro y al mas especifico.

En este caso, el ultimo en declarar el color de fondo del documento es el archivo (esta mas abajo en el documento HTML).

Y lo de mas especifico? bueno, el color del texto esta definido en varios lugares, en el tag style para el tag body, y en el archivo style.css para el tag body. en ese caso sabemos que el ultimo gana.

Pero sin embargo los tags con clase llamativo son azules, como decide el navegador que el azul le gana al negro? Porque el atributo class es mas especifico que el tag body.

De esta manera podemos hacer definiciones generales "a grandes rasgos" al principio de nuestras hojas de estilo e irlas refinando mas abajo, redefiniendolas para casos mas particulares e incluso en otras hojas de estilo especificas para ciertos documentos.

Esto es bastante información y con el tiempo lo vamos a ir aprendiendo a medida que lo usamos.

Pero antes de terminar, movamos nuestro estilo al archivo style.css y dejemos el documento HTML libre de CSS mas que la referencia a style.css, el cual queda así:

body {
  background-color: white;
  color: #444;

  font-family: helvetica;
  font-size: 18px;

  padding: 5px 25px;
  margin: 0;
}

h1 {
  font-size: 32px;
}

.llamativo{
  background-color: white;
  color: blue;
}

En el CSS hay algunas llaves nuevas, font-family define la fuente del texto, font-size su tamaño, las otras dos (padding y margin) las vamos a ver en próximas secciones.

El principio de nuestro documento queda así:

<!doctype html>
<html>
  <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
        <link href="style.css" rel="stylesheet">
  </head>

Ya observaras uno de los beneficios de separar contenido de presentación: cambiamos completamente el aspecto de la pagina sin tocar si contenido.

El proyecto quedo así:

/galleries/cew/4/05-link.png

Mariano Guerra: Creemos en la Web: HTML atributos y meta datos

En la sección anterior vimos como crear una pagina web que replicaba un documento de Google Docs con formato básico, en esta sección vamos a aprender sobre dos conceptos con nombres tenebrosos pero que como todo lo tenebroso cuando se los entiende resulta ser bastante inofensivo.

Necesitamos saber sobre atributos y meta datos para poder resolver dos problemas en nuestra pagina web:

  1. Como le digo al navegador cual es el titulo de mi pagina web sin que lo muestre en el contenido del documento?
  2. Como le indico información extra sobre un tag sin que se vea en el documento? por ejemplo, como separo el texto de un enlace y la dirección a la que apunta?

Para el primero vamos a usar meta datos, que son datos sobre el documento pero que no son parte del contenido del mismo.

Para lo segundo vamos a usar atributos, que son datos sobre los tags pero no son parte del contenido.

Meta datos

Para separar los meta datos del documento del contenido hacemos lo usual, rodeamos los metadatos en un tag y el contenido en otro.

En la terminología HTML un documento esta separado en dos partes, la cabeza o cabecera (head en ingles), la cual contiene los datos sobre el documento y el cuerpo (body), el cual tiene el contenido del mismo.

Como estos dos son parte de un documento HTML, ambos están contenidos en el tag raíz de todo documento HTML, el tag html.

Veamos el documento correctamente estructurado mas simple que podamos tener:

<html>
    <head></head>
    <body></body>
</html>

Si queremos definir el titulo del documento, el cual se va a mostrar en la barra de títulos del navegador cuando la pagina tiene el foco y también en la pestaña de la pagina en el navegador, usamos el tag title.

<html>
    <head>
        <title>Mi Pagina</title>
    </head>

    <body>
    </body>
</html>

Otro tag que es recomendable poner en el documento si no queremos tener problemas con como el navegador muestra las tildes y la ñ es un tag que le indica como interpretar tildes y otros caracteres especiales, utf-8 es un estándar que define como interpretar caracteres especiales y es el mas usado actualmente, simplemente copialo en todos tus documentos para evitar dolores de cabeza.

<html>
    <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
    </head>

    <body>
    </body>
</html>

Para terminar, dado que HTML es un estándar que ha evolucionado en el tiempo, el navegador soporta múltiples versiones y si no se le indica la versión intenta adivinar.

Normalmente adivina bien, pero para facilitarle el trabajo y evitar confusiones podemos ser buenas personas e indicarselo explícitamente.

<!doctype html>
<html>
    <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
    </head>

    <body>
    </body>
</html>

La primera linea le indica que el documento es de tipo HTML 5, la ultima versión del estándar.

No te preocupes en memorizar estos tags, yo simplemente copio de algún documento anterior las partes comunes, nunca empiezo de cero :)

La evolución de HTML y su énfasis en mantener compatibilidad hace que todavía puedas visitar la primera pagina web publicada en 1991: http://info.cern.ch/hypertext/WWW/TheProject.html

Atributos

Ahora al segundo problema, como indicamos información sobre un tag que no es el contenido principal, por ejemplo, si queremos crear un enlace a https://google.com pero queremos que el texto del enlace diga "Google", como hacemos esto?

Quizás lo notaste en algunos de los ejemplos hasta ahora.

Para hacer eso usamos lo que se llaman atributos, que son información extra que agregamos a un tag, la mayoría son opcionales, de manera que los vamos agregando y aprendiendo a medida que los vamos necesitando.

Veamos como resolver el problema del enlace.

<a href="https://google.com">Google</a>

Que se ve así:

Google

Los atributos van luego del identificador del tag de apertura, separados por espacios, primero va el nombre del atributo, luego un = y luego el valor, normalmente entre comillas.

Por si no te diste cuenta, acabamos de aprender un nuevo tag, el tag a (de a nchor que significa ancla en ingles) con su atributo href (de h ypertext ref erence en ingles).

Ya que aprendimos un tag nuevo, aprendamos otro similar y muy útil, el tag para mostrar imágenes [1]:

<img src="http://marianoguerra.org/galleries/cew/3/cube.jpg">

Así se ve:

Agreguemos mas atributos, uno para el tooltip (title), y dos para definir el alto (height) y el ancho (width).

<img title="un cubo" width="200" height="200" src="http://marianoguerra.org/galleries/cew/3/cube.jpg">

El resultado:

Ahora pongamos todo junto en una pagina:

<!doctype html>
<html>
    <head>
        <meta chartset="utf-8">
        <title>Mi Pagina</title>
    </head>

    <body>
        <p>Un link a <a href="https://google.com">Google</a></p>

        <p>Una imagen:</p>

        <img title="un cubo" width="200" height="200" src="http://marianoguerra.org/galleries/cew/3/cube.jpg">
    </body>
</html>

Que se ve algo así:

/galleries/cew/3/01-page.png

Notar que subí la imagen al proyecto, haciendo click en el icono de archivo y seleccionando Subir un archivo..., la dirección de la imagen es simplemente el nombre del archivo ya que esta en el mismo lugar que la pagina que la muestra.

/galleries/cew/3/02-upload.png
[1] “DOF Example” by Owen Byrne is licensed under CC BY 2.0