Damián Avila: Some thoughts about the 2017 ACM Software System Award for Project Jupyter

I am very happy to inform you that Project Jupyter has been awarded the 2017 ACM Software System Award!

As part of the Jupyter Steering Council, I am one of the official recipients of the award, but I wanted to highlight that I am just one member of a large group of people (contributors and users) working together to push the Project Jupyter forward and beyond its limits.

Project Jupyter is an essential part of my life. It gave me the opportunity to work with amazing people, to learn a lot of new things, to help other people. Some years ago, I left academia for several reasons, but one of the most important ones was to find an opportunity to make a substantial impact on people’s lives. I wanted to be involved in something that could empower people to do amazing things. And I certainly believe that Project Jupyter filled that space and allowed me to achieve that goal more than I could imagine.

Read more… (3 min remaining to read)

Mariano Guerra: Creemos en la Web: Reusando HTML (de otros)

En la sección anterior vimos como reusar estilo creado por otras personas.

Como vimos, muchas paginas comparten distintos componentes y yendo un nivel mas arriba, muchas paginas tienen incluso una estructura similar, por ejemplo blogs, paginas principales de un diario, de un producto, o de un sitio de ventas online.

Si bien no hay una forma simple de reusar HTML sin acudir a funcionalidades mas avanzadas que requieran programar, existe lo que usualmente se llaman templates (plantillas), que son paginas completas o secciones grandes de paginas para copiar y modificar el contenido de manera de no empezar de cero.

En esta sección vamos a explorar algunos de esos templates, en este caso, los disponibles en la pagina del proyecto bootstrap: https://getbootstrap.com/docs/4.1/examples/

Cover

Probemos uno de los ejemplos llamado Cover, copia y pega el siguiente HTML en un proyecto thimble nuevo:

<!doctype html>
<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Titulo de Pagina</title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

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

  <body class="text-center">

        <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
          <header class="masthead mb-auto">
                <div class="inner">
                  <h3 class="masthead-brand">Nombre</h3>
                  <nav class="nav nav-masthead justify-content-center">
                        <a class="nav-link active" href="#">Principal</a>
                        <a class="nav-link" href="#">Link 1</a>
                        <a class="nav-link" href="#">Link 2</a>
                  </nav>
                </div>
          </header>

          <main role="main" class="inner cover">
                <h1 class="cover-heading">Título</h1>
                <p class="lead">Descripción.</p>
                <p class="lead">
                  <a href="#" class="btn btn-lg btn-secondary">Acción Principal</a>
                </p>
          </main>

          <footer class="mastfoot mt-auto">
                <div class="inner">
                  <p>Template "Cover" para <a href="https://getbootstrap.com/">Bootstrap</a>, por <a href="https://twitter.com/mdo">@mdo</a>.</p>
                </div>
          </footer>
        </div>

  </body>
</html>

Y el siguiente CSS en el archivo style.css del proyecto:

/*
* Globals
*/

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #fff;
}


/*
* Base structure
*/

html,
body {
  height: 100%;
  background-color: #333;
}

body {
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
  max-width: 42em;
}


/*
* Header
*/
.masthead {
  margin-bottom: 2rem;
}

.masthead-brand {
  margin-bottom: 0;
}

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

@media (min-width: 48em) {
  .masthead-brand {
        float: left;
  }
  .nav-masthead {
        float: right;
  }
}


/*
* Cover
*/
.cover {
  padding: 0 1.5rem;
}
.cover .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}


/*
* Footer
*/
.mastfoot {
  color: rgba(255, 255, 255, .5);
}

Debería verse algo así:

/galleries/cew/7/01-cover.png

Una vez publicado:

/galleries/cew/7/02-cover-preview.png

Actividades propuestas:

  1. Intenta cambiar el contenido para presentar un proyecto o producto que te interese.
  2. Intenta cambiarlo para que sea fondo claro con contenido oscuro.
    • Agregando estilo al final de style.css
    • Cambiando el estilo existente en style.css

Pagina Principal

Esta pagina es bastante mas larga así que vamos a probar una forma nueva.

Podes ver el resultado visitando https://marianoguerra.github.io/creemos-en-la-web/paginas/landing/

En la pagina principal hace click derecho en cada imagen y selecciona la opción "Descargar imagen como..." o similar.

Descarga todas las imágenes.

Hace click en la pagina y presiona las teclas Ctrl y "u" a la vez, esto debería abrirte una ventana nueva con el HTML la pagina. Otra forma de hacerlo en algunos navegadores es haciendo click derecho con el mouse sobre la pagina y seleccionando la opción "Ver Código" o similar.

Copia el HTML en un proyecto nuevo de thimble.

Visita la dirección: https://marianoguerra.github.io/creemos-en-la-web/paginas/landing/style.css

Copia el CSS en el archivo style.css del proyecto.

Agrega las imágenes que descargaste a un nuevo directorio llamado img, un video que muestra como:

Actividades propuestas:

  1. Intenta cambiar el contenido para presentar un proyecto o producto que te interese.
  2. Intenta cambiarlo las imágenes
    • Manteniendo los nombres de las imágenes existentes (subiendo nuevas imágenes con nombres existentes)
    • Cambiando el nombre de las imágenes en el HTML (subiendo nuevas imágenes con nombres nuevos)

Facundo Batista: Relanzamiento del Blog

Entramos en la tercer etapa de mi blog.

La primera habían sido esos textos que había escrito mientras estaba en Italia haciendo el Máster en el segundo semestre del 2002, y que colgaba de un sitio armado muy a mano.

La segunda, desde el 2004 hasta ahora, con forma propiamente de "blog", soportado por un software hecho en PHP que primero se llamó "pLog", pero que luego se renombró a "LifeType", que luego de irse quedando cada vez más y más, se murió algo así como hace 5 años.

Llegó el momento de cambiarlo por algo moderno, vivo, y mantenible. Y en lo posible, lindo.

El ciclo de la vida es renovarse

No tenía demasiados requerimientos para el nuevo sistema, pero tenía que ser en Python, liviano, y que me dejara tener toda la estructura (especialmente los textos) en algún repositorio, y con un markup decente. Elegí Nikola, un generador de sitios estáticos que cumple con todos esos requisitos, y encima fue creado por un amigo.

El tema de mantener los textos de forma estándar era un tema: en LifeType se editaban los posts directamente desde la web, y como el editor fue cambiando durante sus años de vida, los formatos de los textos (el markup HTML que tenían alrededor) eran todos diferentes. Eso, sumado a que ya que migraba quería asegurarme de no dejar basura escondida, hizo que me dedicara los últimos dos años (poquito a poquito, sin que me tome demasiado tiempo, y por eso es que tardó mucho) a ir convirtiendo a mano los más de 700 posts al nuevo formato.

Como ya tenía demasiado trabajo con la migración de estos textos, y empecé a estar presionado con la migración a un nuevo sistema (porque tanto LifeType como el server donde tenía todo montado no tenían parches de seguridad hace rato) decidí tercerizar la construcción del nuevo sitio en Nikola. Así que todo esto que ven acá fue realmente construido en su mayoría por Marian Vignau del lado estructural del blog (todo lo que tiene que ver con Nikola, mostrar las propaganditas, meter el widget de twitter, etc, etc, etc) y por Cecilia Schiebel en lo que respecta a diseño y estética.

Uno de los puntos débiles de los sitios estáticos es el sistema de comentarios. Para esto traté de ir a "lo más usado", a una especie de "default en la industria" que es Disqus. Algunas desventajas tenía, como que es medio pesado, y dicen por ahí que hace mucho tracking de la gente que lo usa. Pero no tenía ganas de invertir demasiado tiempo en eso (todavía no estoy seguro de que valga la pena mantener un sistema de comentarios! ¿pensás distinto? demostralo haciendo un comentario :p ), así que intenté ir por ahí. Es más, Marian lo integró al sitio y todo, pero después me di cuenta que los nombres de los autores originales, cuando no eran 100% ASCII, estaban rotos. Y charlando con gente de Disqus me reconocieron que es un bug, y andá a saber cuando lo van a arreglar.

Así que fui por otro lado. Isso. Tiene la "desventaja" de que hay que hostearlo uno mismo, pero es simple, y me saco de encima tener que suscribirme a un servicio de terceros, que trackeen mis lectores, etc. No tenía una forma de importar comentarios que no sea de Disqus o Wordpress, pero como está hecho en Python, lo hice yo mismo (y lo propuse para que lo integren al sistema).

En fin. Bienvenidos al futuro (?).

Nos prometieron autos voladores y todo lo que tenemos son generadores de sitios estáticos

La estructura del sitio en sí tampoco cambió tanto. Seguimos teniendo el texto en el centro, con la barra de la derecha, aunque dejé ahí sólo lo que corresponde a contenido y moví otras cosas (licencia, rss, archivos, etc.) al footer. La búsqueda la provee Duck Duck Go (aunque le cambié recién el dominio de beta a final y está un poco confundido, vamos a darle unos días). Y en general debería verse bien más allá del tamaño de pantalla.

Obvio, me falta corregir un montón de cosas, algunas visibles y otras no, pero ya quería hacer la migración y anunciar esto (los últimos ~5 posts los tuve que hacer en los dos sistemas, encima que tengo poco tiempo, laburar duplicado no escala).

Cualquier detalle que encuentren o lo que sospechen que está roto, chiflen.

Mariano Guerra: Creemos en la Web: Reusando estilo (de otros)

Introduccion

En las secciones anteriores aprendimos como reusar el estilo guardándolo en un archivo separado y cargándolo en múltiples paginas.

A medida que vamos creando mas y mas paginas empiezan a surgir cosas comunes que se usan en casi cualquier proyecto.

Si miras con atención las paginas que visitas vas a ver que hay ciertos componentes que se repiten.

De esto te podrás imaginar que con tanto reusar estilos y llevarlos de un proyecto a otro a alguien se le habrá ocurrido la idea de hacer un archivo de estilos lo suficientemente genérico para que pueda ser el estilo inicial de mucha gente que quiere crear una pagina web nueva pero no quiere estar definiendo de cero todo cada vez que empieza.

Imaginas bien!

Hay varios, pero el mas conocido se llama bootstrap, y nos permite empezar nuestras paginas sin tener que preocuparnos por detalles que al fin del día no son tan importantes.

Mas interesante, es que como este proyecto estandariza los nombres de clases para cada estilo, hay gente que crea nuevos estilos que se cargan "sobre" bootstrap y que le cambian el aspecto sin que nosotros tengamos que hacer nada mas que agregar una linea a nuestro HTML!

Podes ver algunos ejemplos en https://bootswatch.com/

Incluyendo Bootstrap

Vamos a ver como usar esto, empecemos con un proyecto nuevo en thimble con una pagina básica:

<!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>

  </body>
</html>

Nuestra pagina de siempre, no muy linda de ver:

/galleries/cew/6/01-base.png

Ahora agregamos la hoja de estilo de bootstrap en el <head> de la pagina, debajo del tag <title>:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

Y podemos ver que ya cambio un poco:

/galleries/cew/6/02-base-bootstrap.png

Un tour por algunos componentes de bootstrap

Pero si fuera solo por eso entonces no seria tan útil, esto es solo el contenido base, bootstrap nos provee con muchos componentes estandard para usar, empecemos por las alertas:

Alertas

Agreguemos el siguiente HTML al <body> de nuestro proyecto:

<h2>Alertas</h2>

<div class="alert alert-primary" role="alert">
  Alerta principal (primary)
</div>
<div class="alert alert-secondary" role="alert">
  Alerta secundario (secondary)
</div>
<div class="alert alert-success" role="alert">
  Alerta exito (success)
</div>
<div class="alert alert-danger" role="alert">
  Alerta peligro (danger)
</div>
<div class="alert alert-warning" role="alert">
  Alerta advertencia (warning)
</div>
<div class="alert alert-info" role="alert">
  Alerta informacion (info)
</div>
<div class="alert alert-light" role="alert">
  Alerta claro (light)
</div>
<div class="alert alert-dark" role="alert">
  Alerta oscuro (dark)
</div>

<h2>Alertas con mas contenido</h2>

<div class="alert alert-info" role="alert">
  <h4 class="alert-heading">Titulo</h4>
  <p>Contenido principal.</p>
  <hr>
  <p class="mb-0">Contenido despues del separador.</p>
</div>

Debería verse algo así:

/galleries/cew/6/03-bs-alerts.png

Badges

Badges se traduce a medalla o distintivo, es mas fácil entender que son viéndolos que por la palabra, así que agreguemos el siguiente HTML a nuestra pagina:

<h2>Badges</h2>

<h3>Estandar</h3>

<div class="m-3">
  <span class="badge badge-primary">Principal</span>
  <span class="badge badge-secondary">Secundario</span>
  <span class="badge badge-success">Exito</span>
  <span class="badge badge-danger">Peligro</span>
  <span class="badge badge-warning">Advertencia</span>
  <span class="badge badge-info">Informacion</span>
  <span class="badge badge-light">Claro</span>
  <span class="badge badge-dark">Oscuro</span>
</div>

<h3>Pill Badges (Pastillas)</h3>

<div class="m-3">
  <span class="badge badge-pill badge-primary">Principal</span>
  <span class="badge badge-pill badge-secondary">Secundario</span>
  <span class="badge badge-pill badge-success">Exito</span>
  <span class="badge badge-pill badge-danger">Peligro</span>
  <span class="badge badge-pill badge-warning">Advertencia</span>
  <span class="badge badge-pill badge-info">Informacion</span>
  <span class="badge badge-pill badge-light">Claro</span>
  <span class="badge badge-pill badge-dark">Oscuro</span>
</div>

<h3>Links</h3>

<div class="m-3">
  <a href="#" class="badge badge-primary">Principal</a>
  <a href="#" class="badge badge-secondary">Secundario</a>
  <a href="#" class="badge badge-success">Exito</a>
  <a href="#" class="badge badge-danger">Peligro</a>
  <a href="#" class="badge badge-warning">Advertencia</a>
  <a href="#" class="badge badge-info">Informacion</a>
  <a href="#" class="badge badge-light">Claro</a>
  <a href="#" class="badge badge-dark">Oscuro</a>
</div>

Como veras rodeo los ejemplos con un div para darle mas margen, pero no uso style="margin: ..." como hasta acá, sino que uso una clase que bootstrap provee que estandariza los margenes en 6 niveles (m-0, m-1, ..., m-5). De esta manera si usamos estas clases en nuestras paginas los margenes serán consistentes y luego podremos ajustarlos en un solo lugar (la definición de .m-0, ..., .m-5 en nuestra hoja de estilos)

El resultado es algo así:

/galleries/cew/6/04-badges.png

Barra de Navegacion

Otro componente muy útil y versátil son las barras de navegación, suelen usarse en la parte superior de la pagina y en cualquier sección que tiene mas de un elemento para mostrar, como los tabs del navegador web.

<h2>Barra de Navegacion</h2>

<h3>Usando tags de lista</h3>

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Inactivo</a>
  </li>
</ul>

<h3>Usando el tag nav</h3>

<nav class="nav">
  <a class="nav-link active" href="#">Activo</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Inactivo</a>
</nav>

<h3>Justificado al centro</h3>

<nav class="nav justify-content-center">
  <a class="nav-link active" href="#">Activo</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Inactivo</a>
</nav>

<h3>Justificado a la derecha</h3>

<nav class="nav justify-content-end">
  <a class="nav-link active" href="#">Activo</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Inactivo</a>
</nav>

<h3>Tabs</h3>

<nav class="nav nav-tabs">
  <a class="nav-link active" href="#">Activo</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Inactivo</a>
</nav>

<h3>Pills</h3>

<nav class="nav nav-pills">
  <a class="nav-link active" href="#">Activo</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Inactivo</a>
</nav>

<h3>Tabs Expandidas (Lista)</h3>

<ul class="nav nav-tabs nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Inactivo</a>
  </li>
</ul>

<h3>Pills Expandidas (Nav)</h3>

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Activo</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Inactivo</a>
</nav>

El resultado es algo así:

/galleries/cew/6/05-nav.png

Luego de explorar los componentes copiando y pegando los ejemplos intenta modificarlos, agregar mas items, eliminar algunos, reordenarlos etc.

Si te sentís aventurero, intenta mirar un ejemplo y luego tiperarlo por completo solo mirando el ejemplo cuando te olvides de algo o algo no funcione.

Este ejercicio es una buena forma de memorizar los conceptos básicos y de ver cuales partes pensabas que entendías pero todavía algún detalle se escapa.

Roberto Alsina: Código Charla PyDay "Como Hacer una API REST en Python, spec first"

El 4/4/2018 di una charla en un PyDay sobre como implementar una API REST a partir de una especificación hecha en Swagger/OpenAPI usando Connexion

/images/pyday-api-rest.jpg

Foto tomada por Yamila Cuestas

Si bien no pude grabar la charla (alguien en la audiencia si lo hizo, pero no me dio el video! Pasame el video, persona de la audiencia!) y no hay slides, acá está el código que mostré, que es relativamente sencillo y fácil de seguir.

Código de la charla

Cualquier cosa pregunten.

PD: Sí, podría hacer la charla en un video nuevo. Sí, me da mucha pereza.

Roberto Alsina: My Git tutorial for people who don't know Git

As part of a book project aimed at almost-beginning programmers I have written what may as well pass as the first part of a Git tutorial. It's totally standalone, so it may be interesting outside the context of the book.

It's aimed at people who, of course, don't know Git and could use it as a local version control system. In the next chapter (being written) I cover things like remotes and push/pull.

So, if you want to read it: Git tutorial for people who don't know git (part I)

PS: If the diagrams are all black and white, reload the page. Yes, it's a JS issue. Yes, I know how to fix it.

Roberto Alsina: I have written half a book

LIke mentioned before I am trying to write a book and ... well, I may be actually making progress? At least the generated PDF is about 170 pages long, which means I have written a bunch in this past month.

I have finished the second of four planned parts, which means I have done about half of it. Since I expect the next two parts to be shorter, it's actually more than that.

The target audience are people who have finished the python tutorial but are not exactly programmers yet. They have the syntax more or less in their heads, but how do you turn that into an actual piece of code?

  • Part 1 is about "prototyping", the process of dumping an idea into rough code.
  • Part 2 is about polishing that rough code into ... not so rough code. Includes a gentle introduction to testing, for example.
  • Part 3 (to be written) is about things that are not code:
    • Git / Gitlab
    • Issues
    • Packaging
    • Setting up a website
    • CI
    • Lots more
  • Part 4 is still to be thought but basically it will cover implementing a large feature from the ground up.

I much appreciate comments about it.

PD: Si, va a haber una traducciń al castellano. O mas bien al argentino. Una vez que lo termine.