Mariano Guerra: Creemos en la Web: Dibujando Formas en 3D

Ya dibujamos en 2D, se podrá en 3D?

La respuesta es si, pero como es un área que todavía esta en desarrollo no es soportada 100% y de forma simple en todos los navegadores por lo que nos vamos a ayudar de una librería llamada aframe.

Una librería es uno o mas archivos que al cargarlos en nuestra pagina le agregan funcionalidades.

En este caso nos permiten crear escenas en 3D como si estuvieramos escribiendo HTML.

Como dije esto no esta completamente estandarizado así que aframe define sus propios tags que no son parte de ningún estándar que soporten todos los navegadores.

Entonces empecemos cargando la librería aframe:

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

Y luego creamos nuestra escena:

<div style="width: 100%; height: 25em">
        <a-scene embedded>
          <a-box position="-1 0.5 -3" rotation="0 45 0" color="blue"></a-box>
          <a-sphere position="0 1.25 -5" radius="1.45" color="yellow"></a-sphere>
          <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
          <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
          <a-sky color="#BBBBBB"></a-sky>
        </a-scene>
</div>

El tag raíz se llama a-scene, que traducido seria "una escena", el cual contiene a-box "una caja", a-shere "una esfera", a-cylinder "un cilindro", a-plane "un plano" y a-sky "un cielo".

Cada uno con atributos especificando la posicion en 3 dimensiones, su tamaño, ya sea con su radio o su alto y su ancho y su color.

Fijate que con el mouse y las flechas del teclado podes moverte dentro de la escena, no es algo fijo sino algo que podes explorar. Si tenes un dispositivo que soporte Realidad Virtual (los últimos smartphones o anteojos de realidad virtual) apretando el icono en la esquina inferior derecha podes "sumergirte" en la escena en realidad virtual.

La escena de arriba en un proyecto de thimble así podes modificar los colores, formas, posiciones y tamaños.

Abrí https://thimbleprojects.org/marianoguerra/510288/ y hace click en Remix para copiar el proyecto a tu cuenta.

Aframe también puede usarse para imágenes y videos panorámicos, veamos un ejemplo:

<div style="width: 100%; height: 25em">
        <a-scene embedded>
          <a-sky src="https://raw.githubusercontent.com/aframevr/aframe/v0.7.0/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>

          <a-text value="Puy de Sancy, Francia" width="6" position="-2.5 0.25 -1.5"
                          rotation="0 15 0"></a-text>
        </a-scene>
</div>

Por el momento aframe solo soporta una escena por pagina, por lo que no muestro el resultado directamente, abrí https://thimbleprojects.org/marianoguerra/511087/ y hace click en Remix para copiar el proyecto a tu cuenta.

Podes ver mas ejemplos en https://aframe.io/examples/showcase/snowglobe/

Mariano Guerra: Creemos en la Web: Dibujando Formas en 2D

Hasta ahora la mayoría del contenido que creamos consiste principalmente en texto y "cajas", es decir, cuadrados dentro de cuadrados.

Pero que pasa si quiero una linea, un triangulo o un circulo en mi pagina?

Para eso existe un set de tags llamado SVG que nos permite crear dibujos "vectoriales", es decir que su contenido son las formas en si y se ven bien en cualquier resolución de pantalla, no como las imágenes hechas de pixeles, donde si la imagen es chica y la agrandamos empezamos a perder calidad.

Empecemos con un ejemplo simple:

<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Los tags son nuevos y específicos de SVG, es decir, solo los podemos usar dentro de un tag raíz svg, lo bueno es que son bastante descriptivos.

En el ejemplo arriba decimos que queremos dibujar en svg, dentro de un cuadro de 100x100.

El dibujo consiste de un circulo (circle en ingles) con centro x=50 y centro y=50, con un radio de 40, borde de 3 negro y relleno rojo.

Veamos algunos otros ejemplos:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

Acá vemos un rectángulo (rect) posicionado en x=50, y=20, con ancho de 150 y alto de 150 y bordes redondeados.

Como veras el resto de las propiedades se las define con el atributo style al igual que en HTML, algunos atributos son nuevos pero el resto sigue aplicando.

Algunos mas:

<svg height="250" width="500">
    <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
    <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
    <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />

    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />

    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />

    <text x="0" y="15" fill="red" transform="rotate(30 20,40)">Texto en SVG</text>
</svg>
Texto en SVG

Pero lo mejor que tiene SVG es que hay editores libres y gratuitos que nos permiten dibujar como cualquier editor de imágenes y luego ver el código SVG generado.

Este editor se llama Inkscape y lo podes descargar desde la pagina.

Luego de instalarlo se ve algo así:

/galleries/cew/10/inkscape.png

Abriendo el editor XML de Inkscape podemos ver como se crea cada forma, que tags y atributos se usan.

/galleries/cew/10/inkscape-xml.gif

Si usamos un editor para crear un SVG que queremos insertar en nuestra pagina tenemos dos opciones:

  • Guardar el dibujo como un archivo SVG y copiar el contenido del archivo abriendolo con un editor de texto y pegandolo en nuestra pagina
  • Insertandolo como una imagen externa

Ya vimos como insertar SVG directamente en el HTML, ahora veamos como incluirlo como una imagen externa:

<img src="/galleries/cew/10/example.svg" width="475" height="336">

Fuente

Una ultima observación sobre SVG, si bien son parecidos a HTML, SVG es mas estricto en cuanto a los nombres y atributos de tags permitidos y con la necesidad de "cerrar" todos los tags, si cometemos un error en HTML, el navegador va a hacer lo mejor que pueda para presentar el contenido igual, en SVG muy probablemente no se dibuje nada.

Mariano Guerra: Creemos en la Web: Filas, columnas y pantallas de todos los tamaños

Hasta ahora hemos creado paginas con HTML donde el documento tiene una estructura básica: una cosa debajo de la otra.

Si prestas atención a sitios que visitas notaras que la estructura de esas paginas es mas complejas, la forma principal de organizarlas es con filas y columnas.

El lenguaje HTML provee algunos tags para indicar la intención del contenido dentro de esos tags pero no provee la estructura en si misma, para eso usamos CSS, el tema con los atributos CSS para definir estructura es que son muy específicos y flexibles, la idea es que con ellos podamos lograr cualquier tipo de estructura que deseemos, pero con gran flexibilidad viene gran complejidad.

Por esta razón han surgido distintas librerías CSS que permiten describir la estructura de un documento en términos mas generales (lo que los hace menos flexibles) pero de una forma que sirven para la mayoría de los casos que necesitamos.

Esta sección va a explorar como usar bootstrap para definir la estructura de nuestra pagina.

Vocabulario

Cuando definimos la estructura de un documento con bootstrap las palabras que aparecen son las siguientes:

Contenedor (container en ingles)
La raiz de una estructura con filas y columnas, podemos tener contenedores dentro de columnas pero no es algo común
Fila (row en ingles)
Una sección horizontal dentro de un contenedor o dentro de una columna
Columna (col/column en ingles)
Una sección vertical dentro de una fila
Puntos de corte (breakpoints en ingles)
Limites de resolución horizontal en la cual ciertas reglas cambian de significado (si, suena vago, vamos a ver esto en detalle luego)

Empezando

Estructura básica

Vamos a empezar con el ejemplo mas básico, un contenedor que tiene una fila que tiene una columna.

<div class="container-fluid cew-9">
 <div class="row">
  <div class="col">
    Columna 1
  </div>
 </div>
</div>

Nada raro, simplemente esta estructura definida con divs y clases:

  • container
    • row
      • col

Agregue una clase cew-9 a container-fluid para poder resaltar los distintos tags con css ya que si no lo hago es difícil percibir la estructura, los colores son los siguientes:

  • container-fluid: rojo
  • row: gris y blanco
  • col: verde
Columna 1

Usamos la clase container-fluid para que el contenedor se estire el 100% del ancho del tag que lo contiene, la clase container puede ser usada cuando queremos mas control sobre el ancho del contenedor.

Dos columnas

Un paso mas, dos columnas, que ya es algo que nos permite replicar bastantes estructuras encontradas en la web.

<div class="container-fluid cew-9">
 <div class="row">
  <div class="col">
    Columna 1
  </div>
  <div class="col">
    Columna 2
  </div>
 </div>
</div>
Columna 1
Columna 2

La estructura es

  • container
    • row
      • col 1
      • col 2

Normalmente en la web encontramos esta estructura de dos columnas pero donde una de ellas es una especie de menú o contenido secundario y la otra es el contenido principal, por lo cual el contenido principal usa mas espacio.

Para poder indicar esto de una forma que se adapte a todas las resoluciones de pantalla bootstrap define que una fila puede estar dividida en 12 "columnas", si no lo indicamos cada columna toma una cantidad igual de esas 12 columnas, por lo que si tenemos una columna tomara las 12, si tenemos 2 cada una tomara 6.

En nuestro caso queremos que la segunda sea la columna principal, por lo que le vamos a indicar que queremos que tome 8 de esas 12 columnas.

<div class="container-fluid cew-9">
 <div class="row">
  <div class="col">
    Columna 1
  </div>
  <div class="col-8">
    Columna 2
  </div>
 </div>
</div>
Columna 1
Columna 2

Para hacerlo cambiamos la clase col por la clase col-8 que indica que queremos que tome 8 de las 12 columnas disponibles.

Dos columnas con cabecera y pie de pagina

Esta estructura es la mas común para blogs o artículos, arriba tenemos una cabecera que ocupa todo el ancho con logo, titulo, navegación y algunas otras cosas, luego el contenido en si con dos columnas, luego un pie de pagina con información extra.

<div class="container-fluid cew-9">
 <div class="row">
  <div class="col">
   Cabecera
  </div>
 </div>

 <div class="row">
  <div class="col">
    Columna 1
  </div>
  <div class="col-8">
    Columna 2
  </div>
 </div>

 <div class="row">
  <div class="col">
   Pie de pagina
  </div>
 </div>
</div>
Cabecera
Columna 1
Columna 2
Pie de pagina

La estructura queda así:

  • container
    • row (cabecera)
      • col (contenido de cabecera)
    • row (cuerpo)
      • col 1 (contenido secundario)
      • col 2 (contenido principal)
    • row (pie de pagina)
      • col (contenido de pie de pagina)

Tortugas hasta el fondo

Un célebre científico dio una conferencia sobre astronomía.
Describió cómo la Tierra gira alrededor del Sol y cómo éste, a su vez,
gira alrededor de un inmenso conjunto de estrellas al que llamamos nuestra galaxia.

Al final de la conferencia, una vieja señora se levantó del fondo de la sala y dijo:

- Todo lo que nos ha contado son disparates.
  En realidad, el mundo es una placa plana que se sostiene sobre el caparazón
  de una tortuga gigante

El científico sonrió con suficiencia antes de replicar:

- ¿Y sobre qué se sostiene la tortuga?
- Sobre el caparazón de otra torguta gigante. -respondió la señora
- ¿Y qué sostiene a esa otra tortuga? volvió a preguntar el científico.
- Se cree usted muy agudo, joven, dijo la anciana,
  pero hay tortugas hasta el fondo.

Como hacemos si queremos tener una columna que a su vez tiene su propia estructura?

Podemos tener filas dentro de columnas.

<div class="container-fluid cew-9">
 <div class="row">
  <div class="col">
   Cabecera
  </div>
 </div>

 <div class="row">
  <div class="col">
    Columna 1
  </div>
  <div class="col-8">
   <div class="row">
    <div class="col">
     Columna 2.1.1
    </div>
    <div class="col">
     Columna 2.1.2
    </div>
   </div>

   <div class="row">
    <div class="col">
     Columna 2.2.1
    </div>
    <div class="col">
     Columna 2.2.2
    </div>
    <div class="col">
     Columna 2.2.3
    </div>
   </div>
  </div>
 </div>

 <div class="row">
  <div class="col">
   Pie de pagina
  </div>
 </div>
</div>
Cabecera
Columna 1
Columna 2.1.1
Columna 2.1.2
Columna 2.2.1
Columna 2.2.2
Columna 2.2.3
Pie de pagina

La estructura queda así:

  • container

    • row (cabecera)

      • col (contenido de cabecera)
    • row (cuerpo)

      • col 1 (contenido secundario)
      • col 2 (contenido principal)
      • row 2.1
        • col 2.1.1
        • col 2.1.2
      • row 2.2
        • col 2.2.1
        • col 2.2.2
        • col 2.2.3
    • row (pie de pagina)

      • col (contenido de pie de pagina)

Resoluciones de pantalla

Con este nuevo conocimiento creamos una pagina con una estructura perfecta para la pantalla que estamos usando y orgullosamente la compartimos con gente para que la vean, el primer mensaje que recibimos es:

- No se ve bien en mi celular, todo es muy chico y con poco espacio

No pensamos en que la pagina va a ser vista por personas usando un smartphone viejo, uno de ultima generación, una tablet, una laptop chica, una grande, una PC y la pantalla de un diseñador con mas pixeles de los que podemos contar.

Como hacemos para que nuestra pagina se adapte a la resolución de cualquier dispositivo que quiera visitar nuestra pagina?

Una idea seria ver cuales son las resoluciones mas comunes en pixeles y aplicar reglas para esos, si bien eso funcionaba en la prehistoria de la web (esto es, hace 10 años), ya no es así, veamos algunas de las resoluciones mas comunes disponibles actualmente:

/galleries/cew/9/resoluciones.png

Intentando hacer esto manejable entran en juego los puntos de corte que mencionamos al principio del articulo.

Los puntos de corte son limites de resolución que agrupan a la resolución de los dispositivos en 5 grandes grupos, similares a los de la ropa:

  • xs: Extra Small
    • Extra pequeño, dispositivos con menos de 576 pixeles de ancho
  • sm: Small
    • Pequeño, dispositivos con menos de 768 pixeles de ancho
  • md: Medium
    • Medio, dispositivos con menos de 992 pixeles de ancho
  • lg: Large
    • Grande, dispositivos con menos de 1200 pixeles de ancho
  • xl: Extra Large
    • Extra Grande, dispositivos con 1200 pixeles de ancho o mas

Como los usamos? indicando el ancho de la columna con el tipo de dispositivo mínimo para el cual el tamaño aplica, entonces podemos decir algo como:

"Esta columna ocupa 12 columnas si es una resolución xs y 6 si no"

lo expresamos en clases: .col-12 .col-sm-6

O mas complejas como

"Esta columna ocupa 12 columnas si es una resolución xs, 8 si es una resolución sm y 6 si no"

lo expresamos en clases: .col-12 .col-sm-8 .col-md-6

Control completo si especificamos todas:

"Esta columna ocupa 12 columnas si es una resolución xs, 8 si es una resolución sm, 6 si es una resolución md, 4 si es lg y 2 si es xl"

lo expresamos en clases: .col-12 .col-sm-8 .col-md-6 .col-lg-4 .col-xl-2

Bootstrap va a buscar el grupo mas cercano a la resolución actual y aplicar esa regla, si nuestro dispositivo tiene una resolución de 1000 pixeles y hay una regla para md (< 992px) va a aplicar esa, sino va a buscar la regla sm y sino la xs.

Probemos un ejemplo:

<div class="container-fluid cew-9">
 <div class="row">
  <div class="col-12 col-sm-6 col-md-3">
       Reglas: col-12 col-sm-6 col-md-3
  </div>
  <div class="col-12 col-sm-6 col-md-6">
       Reglas: col-12 col-sm-6 col-md-6
  </div>
  <div class="col-12 col-sm-12 col-md-3">
        Reglas: col-12 col-sm-12 col-md-3
  </div>
 </div>
</div>
Reglas: col-12 col-sm-6 col-md-3
Reglas: col-12 col-sm-6 col-md-6
Reglas: col-12 col-sm-12 col-md-3

Si estas viendo esto en una PC o una laptop probablemente la regla que aplique sea md, donde vas a ver 3 columnas, la del medio el doble de ancho que las laterales.

Pero como probamos para distintas resoluciones sin tener disponibles dispositivos para cada punto de corte?

En Firefox en el menú Herramientas > Desarrollador web > Vista de diseño adaptable o el atajo de teclado Ctrl+Shift+M

/galleries/cew/9/firefox-ctrl-shift-m.png

En Chrome en el menú Menú > Mas Herramientas > Herramientas para desarrolladores y al abrirse seleccionamos el segundo icono de arriba a la derecha o el atajo de teclado Ctrl+Shift+M

/galleries/cew/9/chrome-ctrl-shift-m.png

Esto va a abrir una herramienta que nos permite simular distintas resoluciones y ver como la pagina se adapta a los cambios, lo único que vamos a usar ahora es cambiar la resolución manualmente o elegir un dispositivo predeterminado.

Así es como se ve en mi computadora en firefox:

/galleries/cew/9/ff-xs.png

Resolución xs: 320x480

/galleries/cew/9/ff-sm.png

Resolución sm: 760x480

/galleries/cew/9/ff-md.png

Resolución md: 800x480

Te recomiendo que lo pruebes vos, actividad extra, navega por paginas que visites frecuentemente con esta herramienta abierta, fijate como se adapta (o no) a la resolución que elegiste.

Marcos Dione: identity-countries-languages-and-currencies

I started watching PyCon's videos. One of the first ones I saw is Amber Brown's "How we do identity wrong". I think she[1] is right in raising not only the notion of not assuming things related to names, addresses and ID numbers, but also that you shouldn't be collecting information that you don't need; at some point, it becomes a liability.

In the same vein about assuming, I have more examples. One of them is deciding what language you show your site depending on what country the client connects form. I'm not a millennial (more like a transmillennial, if you push me to it), but I tend to go places. Every time I go to a new place, I get sites in new languages, but maps in US!

Today I wanted to book a hotel room. The hotel's site asked me where do I live, so I chose France. Fact is, for them country and language is the same thing (I wonder what would happen if I answer Schweiz/Suisse/Svizzera/Svizra), so I can't say that I live in France but prefer English, so I chose United Kingdom instead. Of course, this also meant that I got prices in GBP, not EUR, so I had to correct that one too. At least I could.

Later they asked me country of residence and nationality; when I chose italian, the country was set to Italia, even when I chose France first!

I leave you all with an anecdote. As I said, I lake to go places, most of the times with friends. Imagine the puzzled expression of the police officer that stopped us to find a car licensed in France, driven by an italian, with an argentinian, a spanish and a chilean passangers, crossing from Austria to Slovakia, listening to US music. I only forgot to put the GPS in japanese or something.

So, don't assume; if you assume, let the user change settings to their preferences, and don't ask for data you don't actually need. And please use the user's Accept-Language header; they have it for a reason.


[1] I think that's the pronoun she[1] said she[1] preferred. I'm sorry if I got that wrong.


python misc

Facundo Batista: Películas, con mejores trailers

La lista de películas vistas (y más abajo, las nuevas marcadas para ver), pero con novedad con respecto a los trailers.

Hace un tiempo les había comentado sobre un script para ver los trailers. Bueno, lo renové completamente: ahora usa como fuente a IMDb.

La gran ventaja es que dejó de mostrarme "los cinco tanques de hollywood más un puñado de otras cositas" y ahora veo trailers de esas películas más otras argentinas, españolas, francesas, italianas, alemanas, etc. Gané muchísimo en diversidad en ese sentido.

La primera o segunda vez que lo usen quizás les traiga demasiadas ofertas, pero luego se pasa. Es que cada tanto ofrece películas viejas o series, pero como el script se acuerda de lo que uno vio o no quiso ver, entonces si vuelven a aparecer ya las ignora.

En fin, las películas vistas...

  • ARQ: +0. Es un poco gastada la idea del loop de tiempo, y la base científica es fruta, pero toda la vuelta que le pegaron alrededor de eso está buena.
  • Approaching the Unknown: -0. Con muchas partes interesantes acerca de la psicología del viajar sólo al espacio... pero en general un embole.
  • Boyhood: +1. Arranca un poco lento, pero después te atrapa; es muy loco que sea una película filmada a lo largo de 12 años con todos creciendo/envejeciendo en la realidad.
  • Captain Fantastic: +1. Hermosa, por donde se la mire. Cuantas cosas que te hace replantear, repensar. De cabecera.
  • Colossal: +0. Muy linda película acerca de reencontrarse a uno mismo, pero desde un punto de vista totalmente extraño, inesperado y rarísimo.
  • Complete Unknown: +0. Podría ser más dinámica en algunas partes, pero la historia y el planteo general son muy buenos.
  • Embers: -0. Una buena idea, en una película que no tiene mucha historia, aunque muestra muy bien lo angustiante del asunto...
  • High-Rise: +0. Bastante bizarra, pero muestra de forma interesante cómo una sociedad se va al carajo (onda Lord of the Flies, pero en un rascacielos).
  • Kong: Skull Island: +1. Aunque la historia es obviamente conocida, la forma de contarla (especialmente la visión sobre los militares) está muy bien. Y la fotografía y la música son maravillosas.
  • Kóblic: +0. La historia está buena, la peli es un poco lenta pero zafa. La actuación de Oscar Martinez es genial.
  • Learning to Drive: +0. Una película chiquita sobre dos personas muy distintas y como terminan ayudándose tanto, muy linda historia.
  • Manhattan Night: -0. La historia es interesante, las actuaciones también... la cadencia de la película es medio insoportable... muy cansina, con una voz en off que explica todo el tiempo... no me gustó.
  • Marauders: +0. Parece ser la historia adaptada de un libro, por cómo condensa situaciones en pocos segundos, y está bastante bien a ese nivel, pero no me gustó como estaba armada la película en sí, no sé... "el ritmo"...
  • Miss Peregrine's Home for Peculiar Children: +0. Me gustó la eterna sucesión de cosas raras, por eso uno busca a Burton, no? Pero después no tuvo mucho más...
  • Star Wars: The Last Jedi: +0. No tan buena como la primera de la nueva saga, pero zafa y cuenta bastante.
  • The 9th Life of Louis Drax: +0. rara, arrancando mucho más lento de lo que debía, pero con una historia interesante de fondo.
  • The Accountant: +1. Me esperaba algo así como la clásica de peleas y tiros, pero me sorprendió mucho para bien (aunque sigue siendo una de peleas y tiros...).
  • The Dark Tower: -1. Estoy indignado, no la vean. Es como haber reducido los tres tomos del Señor de los Anillos a un cuento de siete páginas.
  • The Driftless Area: +0. Linda, muy rara, muchos detalles interesantes, pero un poco demasiado lenta...
  • The Lobster: -0. Demasiado absurda, demasiado volada, aunque no deja de tener partes bastante interesantes...
  • The Magnificent Seven: +0. Está buena, aunque es sólo una de pistoleros del "viejo oeste"... pero está buena... aunque es sólo (etc).
  • The Mummy: -0. Tiene un par de vueltas más que interesantes, pero resulta ser "otra peli de tom cruise", todas tan parecidas!
  • The Reality of Truth: -1. Me hartó en solo 10 minutos el chamuyo de contar medias experiencias saltando a "verdades absolutas" utilizando el camino de dos frases bien construidas. No vale la pena.
  • Urge: -0. La forma de eliminar la humanidad: dejando que se comporte como es. La idea está buena, pero la película es demasiado volada por un lado, y demasiado pacata por otro.
  • Welcome to Happiness: +0. Muy bizarra, simpática, y un poco rara con los ritmos. Pero bien.
  • Wonder Woman: +0. Entretenida, pero sólo una de superheroes...
  • Zipper: -0. Termina con algún giro interesante, pero es tan predecible todo que ni vale la pena.
El rey (not Elvis)

Las nuevas! Lo que decía arriba, no todos "tanques joliwudenses"...

  • 25 km/h: (2018; Comedy) - [D: Markus Goller; A: Franka Potente, Alexandra Maria Lara, Jördis Triebel]
  • 27: The Cursed Club: (2018; Action, Comedy, Crime, Fantasy, Mystery) At night in the hottest summer in 20 years, Leandro De La Torre, famous punk singer, shoots out of a window and hits the roof of a car. It is the day of his 27th birthday. Paula, a young fan of twenty-one years old, records everything with her cell phone. Far from knowing that in that video is the key behind the murder of the musician. Martín Lombardo, a staunch supporter of Racing, is the detective in charge of investigating the case. Along with Paula you will discover the conspiracy behind the deaths of all famous rockers at 27 years old. Jimi Hendrix, Janis Joplin, Amy Winehouse, Sid Vicious and Leandro De La Torre have a lot in common: in fact, they were all murdered. Paula and Lombardo can be the following. Persecutions, impossible action scenes and completely unexpected twists make up the plot of 27.::Sebastián Incaurgarat [D: Nicanor Loreti; A: Daniel Aráoz, Naiara Awada, Andres Bagg]
  • Annihilation: (2018; Adventure, Drama, Horror, Mystery, Sci-Fi, Thriller) A biologist's husband disappears. She puts her name forward for an expedition into an environmental disaster zone, but does not find what she's expecting. The expedition team is made up of the biologist, an anthropologist, a psychologist, a surveyor, and a linguist. [D: Alex Garland; A: Natalie Portman, Benedict Wong, Sonoya Mizuno]
  • Solo: A Star Wars Story: (2018; Action, Adventure, Fantasy, Sci-Fi) With the emerging demand of hyperfuel and other resources, Han Solo finds himself in the middle of a heist alongside other criminals, where they meet the likes of Chewbacca and Lando Calrissian in an adventurous situation exposing the criminal underworld of the Star Wars saga. [D: Ron Howard; A: Alden Ehrenreich, Joonas Suotamo, Woody Harrelson]
  • Ahora o nunca: (2015; Comedy) Narrates the preparation for a wedding of a Spanish couple in which everything goes wrong. [D: Maria Ripoll; A: Dani Rovira, María Valverde, Jordi Sánchez]
  • Alanis: (2017; Drama) A young Buenos Aires mother finds employment as a sex worker and struggles to live under the same laws that are supposed to protect her. [D: Anahí Berneri; A: Sofía Gala, Dante Della Paolera, Dana Basso]
  • Alita: Battle Angel: (2018; Action, Adventure, Romance, Sci-Fi, Thriller) Alita is a creation from an age of despair. Found by the mysterious Dr. Ido while trolling for cyborg parts, Alita becomes a lethal, dangerous being. She cannot remember who she is, or where she came from. But to Dr. Ido, the truth is all too clear. She is the one being who can break the cycle of death and destruction left behind from Tiphares. But to accomplish her true purpose, she must fight and kill. And that is where Alita's true significance comes to bear. She is an angel from heaven. She is an angel of death.::Anthony Harmon [D: Robert Rodriguez; A: Jennifer Connelly, Ed Skrein, Rosa Salazar]
  • Bohemian Rhapsody: (2018; Biography, Drama, Music) Bohemian Rhapsody is a foot-stomping celebration of Queen, their music and their extraordinary lead singer Freddie Mercury, who defied stereotypes and shattered convention to become one of the most beloved entertainers on the planet. The film traces the meteoric rise of the band through their iconic songs and revolutionary sound, their near-implosion as Mercury's lifestyle spirals out of control, and their triumphant reunion on the eve of Live Aid, where Mercury, facing a life-threatening illness, leads the band in one of the greatest performances in the history of rock music. In the process, cementing the legacy of a band that were always more like a family, and who continue to inspire outsiders, dreamers and music lovers to this day.::Twentieth Century Fox [D: Dexter Fletcher, Bryan Singer; A: Rami Malek, Joseph Mazzello, Ben Hardy]
  • Deadpool 2: (2018; Action, Adventure, Comedy, Sci-Fi) After surviving a near fatal bovine attack, a disfigured cafeteria chef (Wade Wilson) struggles to fulfill his dream of becoming Mayberry's hottest bartender while also learning to cope with his lost sense of taste. Searching to regain his spice for life, as well as a flux capacitor, Wade must battle ninjas, the Yakuza, and a pack of sexually aggressive canines, as he journeys around the world to discover the importance of family, friendship, and flavor - finding a new taste for adventure and earning the coveted coffee mug title of World's Best Lover.::Twentieth Century Fox [D: David Leitch; A: Ryan Reynolds, Josh Brolin, Morena Baccarin]
  • Distorted: (2018; Action, Mystery, Thriller) A 32-year-old woman suffering from bipolar disorder comes to suspect the proprietor of the state-of-the-art ''smart apartment'' she and her husband just moved into is using the building's residents as unwitting guinea pigs for a ''synthetic telepathy'' brainwashing plot with dire global ramifications. [D: Rob W. King; A: Christina Ricci, John Cusack, Brendan Fletcher]
  • Everybody Knows: (2018; Drama, Mystery, Thriller) Laura, a Spanish woman living in Buenos Aires, returns to her hometown outside Madrid with her two children to attend her sister's wedding. However, the trip is upset by unexpected events that bring secrets into the open.::screen international [D: Asghar Farhadi; A: Penélope Cruz, Javier Bardem, Bárbara Lennie]
  • Future World: (2018; Sci-Fi) Inside a desert oasis, a queen (Lucy Liu) lays dying as her son Prince (Jeffrey Wahlberg) travels across barren waste lands to find a near-mythical medicine to save her life. After evading violent raiders on motorbikes led by the Warlord (James Franco) and his enforcer (Cliff "Method Man" Smith), Prince meets Ash (Suki Waterhouse), the Warlord's robot sex companion-assassin who's in search of her own soul. As Prince is captured by the Druglord (Milla Jovovich), the Warlord's forces roar in - and Prince fights to save the remnants of humanity. [D: James Franco, Bruce Thierry Cheung; A: James Franco, Suki Waterhouse, Jeffrey Wahlberg]
  • Gringo: (2018; Action, Comedy, Crime) An exhilarating mix of dark comedy, white-knuckle action and dramatic intrigue, Gringo joyrides into Mexico, where mild-mannered businessman Harold Soyinka (David Oyelowo) finds himself at the mercy of his back-stabbing business colleagues back home, local drug lords and a morally conflicted black-ops mercenary. Crossing the line from law-abiding citizen to wanted criminal, Harold battles to survive his increasingly dangerous situation in ways that raise the question: Is he out of his depth - or two steps ahead?::Amazon Studios [D: Nash Edgerton; A: Joel Edgerton, Charlize Theron, David Oyelowo]
  • Hotel Artemis: (2018; Action, Crime, Sci-Fi, Thriller) Set in riot-torn, near-future Los Angeles, 'Hotel Artemis' follows the Nurse, who runs a secret, members-only emergency room for criminals. [D: Drew Pearce; A: Sofia Boutella, Dave Bautista, Sterling K. Brown]
  • The Shape of Water: (2017; Adventure, Drama, Fantasy, Horror, Romance, Thriller) From master storyteller Guillermo del Toro comes THE SHAPE OF WATER, an otherworldly fable set against the backdrop of Cold War era America circa 1962. In the hidden high-security government laboratory where she works, lonely Elisa (Sally Hawkins) is trapped in a life of isolation. Elisa's life is changed forever when she and co-worker Zelda (Octavia Spencer) discover a secret classified experiment. Rounding out the cast are Michael Shannon, Richard Jenkins, Michael Stuhlbarg, and Doug Jones.::Fox Searchlight Pictures [D: Guillermo del Toro; A: Sally Hawkins, Michael Shannon, Richard Jenkins]
  • The Queen of Fear: (2018; Drama) An actress becomes over anxious in the days leading up to the premiere of her one-woman show. [D: Valeria Bertuccelli, Fabiana Tiscornia; A: Valeria Bertuccelli, Gabriel Goity, Darío Grandinetti]
  • Mission: Impossible - Fallout: (2018; Action, Adventure, Thriller) Ethan Hunt and his IMF team, along with some familiar allies, race against time after a mission gone wrong.::Paramount Pictures [D: Christopher McQuarrie; A: Rebecca Ferguson, Vanessa Kirby, Tom Cruise]
  • Puzzle: (2018; Drama) Agnes, taken for granted as a suburban mother, discovers a passion for solving jigsaw puzzles which unexpectedly draws her into a new world - where her life unfolds in ways she could never have imagined.::Anonymous [D: Marc Turtletaub; A: Austin Abrams, Mandela Bellamy, Myrna Cabello]
  • Split: (2016; Horror, Thriller) Though Kevin (James McAvoy) has evidenced 23 personalities to his trusted psychiatrist, Dr. Fletcher (Betty Buckley), there remains one still submerged who is set to materialize and dominate all of the others. Compelled to abduct three teenage girls led by the willful, observant Casey, Kevin reaches a war for survival among all of those contained within him -- as well as everyone around him -- as the walls between his compartments shatter.::alexanderfire-00074 [D: M. Night Shyamalan; A: James McAvoy, Anya Taylor-Joy, Betty Buckley]
  • The Man Who Killed Don Quixote: (2018; Adventure, Comedy, Fantasy) Toby, a cynical advertising director finds himself trapped in the outrageous delusions of an old Spanish shoe-maker who believes himself to be Don Quixote. In the course of their comic and increasingly surreal adventures, Toby is forced to confront the tragic repercussions of a film he made in his idealistic youth - a film that changed the hopes and dreams of a small Spanish village forever. Can Toby make amends and regain his humanity? Can Don Quixote survive his madness and imminent death? Or will love conquer all? [D: Terry Gilliam; A: Adam Driver, Jonathan Pryce, Stellan Skarsgård]
  • Tomb Raider: (2018; Action, Adventure, Drama, Fantasy, Mystery, Thriller) Lara Croft is the fiercely independent daughter of an eccentric adventurer who vanished when she was scarcely a teen. Now a young woman of 21 without any real focus or purpose, Lara navigates the chaotic streets of trendy East London as a bike courier, barely making the rent, and takes college courses, rarely making it to class. Determined to forge her own path, she refuses to take the reins of her father's global empire just as staunchly as she rejects the idea that he's truly gone. Advised to face the facts and move forward after seven years without him, even Lara can't understand what drives her to finally solve the puzzle of his mysterious death. Going explicitly against his final wishes, she leaves everything she knows behind in search of her dad's last-known destination: a fabled tomb on a mythical island that might be somewhere off the coast of Japan. But her mission will not be an easy one; just reaching the island will be extremely treacherous. Suddenly, the stakes couldn't be higher for Lara, who-against the odds and armed with only her sharp mind, blind faith and inherently stubborn spirit-must learn to push herself beyond her limits as she journeys into the unknown. If she survives this perilous adventure, it could be the making of her, earning her the name tomb raider.::Warner Bros. Pictures [D: Roar Uthaug; A: Alicia Vikander, Dominic West, Walton Goggins]
  • Orbiter 9: (2017; Drama, Romance, Sci-Fi) Helena is a young girl who spent all her life in a space pod just after her birth, traveling from Earth to a distant planet where she will reunite with others space colonials, with the voice of the on-board computer as only one company. Arriving to a space station for maintenance works, Helena meets Álex, the repairman, falling in love with him quickly. But Álex, still traumatized by the ghosts of his own past, decides some days later after to meet Helena break all rules and reveal her the truth.::Chockys [D: Hatem Khraiche; A: Clara Lago, Álex González, Andrés Parra]

Finalmente, el conteo de pendientes por fecha:

(Ene-2012)
(Jul-2012)
(Nov-2012)    6
(Feb-2013)    8   2
(Jun-2013)   15  11   2
(Sep-2013)   17  16   8
(Dic-2013)   12  12  12   4
(Abr-2014)    8   8   8   3
(Jul-2014)   10  10  10  10   5   1
(Nov-2014)   24  22  22  22  22   7
(Feb-2015)       13  13  13  13  10
(Jun-2015)           16  16  15  13  11   1
(Dic-2015)               21  19  19  18   6   1
(May-2016)                   26  25  23  21   9
(Sep-2016)                       19  19  18  14   1
(Feb-2017)                           26  25  23  21
(Jun-2017)                               23  23  21
(Dic-2017)                                   19  19
(May-2018)                                       22
Total:      100  94  91  89 100  94  97  94  89  84

Mariano Guerra: Creemos en la Web: Si son datos, hay tabla

Como presentamos muchos datos en una pagina? con tablas!

Partes de una tabla

Tabla de datos

Vamos de menos a mas, la tabla mas simple que podemos tener solo tiene una parte, el cuerpo de la tabla. Es decir, los datos.

Los datos en una tabla son cero o mas filas, cada fila puede tener cero o mas columnas:

Osea que las partes de una tabla por ahora son:

  • Tabla
    • Cuerpo (1)
      • Filas (0 o mas)
        • Columnas (0 o mas)

Si alguna vez usaste una planilla de cálculos, las tablas son una forma de presentar información que presentarías en una planilla de cálculos.

Vamos a ver una tabla de ejemplo:

<table>
  <tr>
    <td>Arenita</td>
    <td>Ardilla</td>
    <td>Marron</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Esponja</td>
    <td>Amarillo</td>
  </tr>
  <tr>
    <td>Patricio</td>
    <td>Estrella</td>
    <td>Rosa</td>
  </tr>
</table>

Que se ve algo así:

Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa

Como vemos en el código, el tag table indica que vamos a usar una tabla, si solo vamos a mostrar datos el tag que indica el cuerpo tbody (table body, cuerpo de tabla) es opcional, luego tenemos el tag que indica una fila tr (table row: fila de tabla), dentro del tenemos el tag para una celda de datos td (table cell data: celda de datos de tabla), uno por cada celda.

Cabecera

En la tabla anterior, como sabemos que significa cada columna? para eso necesitamos una cabecera, esto se hace con el tag thead (table head, cabecera de tabla)

  • Tabla
    • Cabecera (0 o 1)
      • Filas (1 o mas)
        • Columnas (1 o mas)
    • Cuerpo (1)
      • Filas (0 o mas)
        • Columnas (0 o mas)
<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Tipo</th>
      <th>Color</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Arenita</td>
      <td>Ardilla</td>
      <td>Marron</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Esponja</td>
      <td>Amarillo</td>
    </tr>
    <tr>
      <td>Patricio</td>
      <td>Estrella</td>
      <td>Rosa</td>
    </tr>
  </tbody>
</table>
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa

Como podemos ver, en este caso tenemos que indicar explicitamente el cuerpo de la tabla con el tag tbody (table body, cuerpo de tabla).

Lo hacemos para poder tambien indicar la cabecera con el tag thead (table head, cabecera de tabla).

El cuerpo ya lo vimos antes, la cabecera es muy similar, solo que en lugar de usar el tag td para las columnas usamos el tag th (table cell header, celda de cabecera de tabla)

Pie de Tabla

Algunas tablas que presentan datos suelen tener al final una fila de sumarización que presenta valores resumidos para toda la columna.

Obviamente se puede usar para otras cosas, pero normalmente se usa para eso.

Vamos a ver un ejemplo que no aplica mucho a nuestro caso porque no estamos presentando valores que se puedan sumarizar.

  • Tabla
    • Cabecera (0 o 1)
      • Filas (1 o mas)
        • Columnas (1 o mas)
    • Cuerpo (1)
      • Filas (0 o mas)
        • Columnas (0 o mas)
    • Pie (0 o 1)
      • Filas (1 o mas)
        • Columnas (1 o mas)
<table>
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Tipo</th>
      <th>Color</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Arenita</td>
      <td>Ardilla</td>
      <td>Marron</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Esponja</td>
      <td>Amarillo</td>
    </tr>
    <tr>
      <td>Patricio</td>
      <td>Estrella</td>
      <td>Rosa</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Nombre</td>
      <td>Tipo</td>
      <td>Color</td>
    </tr>
  </tfoot>
</table>
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Como podemos ver, el pie de tabla se define con el tag tfoot (table footer, pie de tabla), dentro usamos los mismos tags que en el cuerpo.

Un poco de estilo

Los ejemplos que vimos hasta ahora tienen un aspecto simple pero agradable, eso es porque estaba usando una clase de bootstrap para darle un aspecto aceptable, la clase que estaba usando es la clase table.

<table class="table">

En esta sección vamos a explorar otras clases que podemos aplicarle a una tabla.

Con bordes

<table class="table table-bordered">
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Colores invertidos

<table class="table table-dark">
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Cabecera invertida

<table class="table">
  <thead class="thead-dark">
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Filas "rayadas como una zebra"

Cambiar el color de filas adyacentes es útil para que el usuario pueda seguir las columnas de una fila sin perderse o empezar a leer celdas de las filas cercanas sin darse cuenta.

<table class="table table-striped">
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Énfasis en fila con foco del mouse

Resaltar la fila que tiene el foco del mouse es útil para que el usuario pueda seguir las columnas de una fila sin perderse o empezar a leer celdas de las filas cercanas sin darse cuenta.

<table class="table table-hover">
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Compacta

Una tabla con menos espacios, si es necesario mostrar mas datos.

<table class="table table-sm">
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Resaltando filas

Si necesitamos indicar algo en una fila lo podemos hacer agregando una clase.

<tr class="table-active">
  <td>Arenita</td>
  <td>Ardilla</td>
  <td>Marron</td>
</tr>
<tr class="table-primary">
  <td>Bob</td>
  <td>Esponja</td>
  <td>Amarillo</td>
</tr>
<tr class="table-secondary">
  <td>Patricio</td>
  <td>Estrella</td>
  <td>Rosa</td>
</tr>
<tr class="table-success">
  <td>Arenita</td>
  <td>Ardilla</td>
  <td>Marron</td>
</tr>
<tr class="table-danger">
  <td>Bob</td>
  <td>Esponja</td>
  <td>Amarillo</td>
</tr>
<tr class="table-warning">
  <td>Patricio</td>
  <td>Estrella</td>
  <td>Rosa</td>
</tr>
<tr class="table-info">
  <td>Arenita</td>
  <td>Ardilla</td>
  <td>Marron</td>
</tr>
<tr class="table-light">
  <td>Bob</td>
  <td>Esponja</td>
  <td>Amarillo</td>
</tr>
<tr class="table-dark">
  <td>Patricio</td>
  <td>Estrella</td>
  <td>Rosa</td>
</tr>
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Todo junto!

<table class="table table-bordered table-striped table-sm table-dark table-hover">
  <thead class="thead-light">
    <tr>
      <th>Nombre</th>
      <th>Tipo</th>
      <th>Color</th>
    </tr>
  </thead>

  <tbody>
    <tr class="table-active">
      <td>Arenita</td>
      <td>Ardilla</td>
      <td>Marron</td>
    </tr>
    <tr class="table-primary">
      <td>Bob</td>
      <td>Esponja</td>
      <td>Amarillo</td>
    </tr>
    <tr class="table-secondary">
      <td>Patricio</td>
      <td>Estrella</td>
      <td>Rosa</td>
    </tr>
    <tr class="table-success">
      <td>Arenita</td>
      <td>Ardilla</td>
      <td>Marron</td>
    </tr>
    <tr class="table-danger">
      <td>Bob</td>
      <td>Esponja</td>
      <td>Amarillo</td>
    </tr>
    <tr class="table-warning">
      <td>Patricio</td>
      <td>Estrella</td>
      <td>Rosa</td>
    </tr>
    <tr class="table-info">
      <td>Arenita</td>
      <td>Ardilla</td>
      <td>Marron</td>
    </tr>
    <tr class="table-light">
      <td>Bob</td>
      <td>Esponja</td>
      <td>Amarillo</td>
    </tr>
    <tr class="table-dark">
      <td>Patricio</td>
      <td>Estrella</td>
      <td>Rosa</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Nombre</td>
      <td>Tipo</td>
      <td>Color</td>
    </tr>
  </tfoot>
</table>
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Subtítulo

Es útil indicar que datos se están mostrando en la tabla, para eso hay un tag llamado caption que puede ser usado para tal fin.

<table class="table">
  <caption>Personajes de Bob Esponja</caption>

  <thead>
    <tr>
      <th>Nombre</th>
      <th>Tipo</th>
      <th>Color</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Arenita</td>
      <td>Ardilla</td>
      <td>Marron</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Esponja</td>
      <td>Amarillo</td>
    </tr>
    <tr>
      <td>Patricio</td>
      <td>Estrella</td>
      <td>Rosa</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Nombre</td>
      <td>Tipo</td>
      <td>Color</td>
    </tr>
  </tfoot>
</table>
Personajes de Bob Esponja
Nombre Tipo Color
Arenita Ardilla Marron
Bob Esponja Amarillo
Patricio Estrella Rosa
Nombre Tipo Color

Celdas vacías y celdas unidas

En algunos casos podemos querer dejar algunas filas con menos celdas que otras, en otros casos queremos que una celda ocupe mas de una columna.

Usar menos celdas es fácil, simplemente no las escribimos.

<table class="table table-bordered">
  <tbody>
    <tr>
      <td>1.1</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </tbody>
</table>
1.1
2.1 2.2
3.1 3.2 3.3

Si queremos que una celda ocupe mas de una columna, tenemos que usar el atributo colspan (extensión de columnas) e indicarle cuantas columnas queremos que ocupe, por defecto cada celda tiene un colspan de 1.

<table class="table table-bordered">
  <tbody>
    <tr>
      <td colspan=3>1.1</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td colspan=2>2.2</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
  </tbody>
</table>
1.1
2.1 2.2
3.1 3.2 3.3

Esto lo podemos usar en la cabecera para crear cabeceras multinivel:

 <table class="table table-bordered">
   <thead class="thead-dark">
     <tr>
       <th colspan=3>Lugar</th>
       <th rowspan=2 style="vertical-align: middle">Población</th>
     </tr>
     <tr>
       <th>Continente</th>
       <th>Pais</th>
       <th>Ciudad</th>
     </tr>
   </thead>

  <tbody>
    <tr>
      <td>America</td>
      <td>México</td>
      <td>Ciudad de México</td>
      <td>8 918 653</td>
    </tr>
    <tr>
      <td>America</td>
      <td>Argentina</td>
      <td>Buenos Aires</td>
      <td>2 890 151</td>
    </tr>
    <tr>
      <td>America</td>
      <td>Brasil</td>
      <td>Brasilia</td>
      <td>2 789 761</td>
    </tr>
  </tbody>
</table>
Lugar Población
Continente Pais Ciudad
America México Ciudad de México 8 918 653
America Argentina Buenos Aires 2 890 151
America Brasil Brasilia 2 789 761

Quizás notaste que use rowspan (extensión de fila) para "unir" las dos celdas de población verticalmente, también use el css vertical-align (alineación vertical) para que el texto este en el medio verticalmente.

Mariano Guerra: Creemos en la Web: Haciendo Lugar

En la sección Creemos en la Web: Lo espacial es invisible a los ojos vimos como indicar que queremos mas espacio entre el borde y otros elementos (margin/margen), en el borde (border) o entre el borde y el contenido interno (padding/relleno).

Cuando yo era joven y el pasto era mas verde, las paginas web se hacían asumiendo una o dos resoluciones de pantalla, ya que los navegadores solo funcionaban en PCs y todas las PCs tenían una resolución casi estándar (800 pixeles de ancho por 600 de alto).

En esas épocas mas simples la unidad que se usaba para indicar espacio/distancia eran los pixeles, una unidad absoluta que se refiere a cada puntito de la pantalla que puede mostrar un color.

Como todas las pantallas tenían cantidades similares de pixeles horizontales y verticales, la cosa funcionaba bastante bien para todos.

No hace falta que les cuente que hoy la web se accede de una cantidad impresionante de dispositivos y resoluciones.

Para poder escribir estilo que se adapte a la resolución de cada dispositivo usamos otras unidades, llamadas relativas, ya que son relativas a algo presente en la pagina, las mas usadas son relativas al ancho del elemento que contiene nuestro tag o al ancho de una letra en el texto.

Pixeles

Esta es la unidad mas común, un pixel es un punto en la pantalla, el cual puede mostrar un color, la cantidad horizontal y vertical de pixeles en una pantalla se llama resolución, por ejemplo, una pantalla de una laptop puede tener 1280 pixeles de ancho por 800 de alto, lo que se escribe abreviado 1280x800.

cuando especificamos el estilo de un tag y le decimos que su borde, margen o relleno es de 15px (15 pixeles), le estamos diciendo que queremos 15 puntos de espacio, pero no sabemos cuantos pixeles tiene la pantalla en total, asi que eso puede ser bastante para la pantalla de un celular básico que puede tener una resolución de 320x240 o muy poco para la pantalla de una computadora de escritorio avanzada que pueden tener 3840x2160 (mas de 10 veces mas resolución!).

Idealmente vamos a usar esta unidad muy poco, yo lo uso solo para especificar el ancho de los bordes y muchas veces no debería :)

em

Esta es la unidad mas usada y la mas recomendada, su nombre según tengo entendido viene de lejos, 1em es el alto en pixeles de la letra M mayúscula, si nombramos la letra M "eme" en ingles es "em".

el alto de que M mayúscula? de la M si estuviera en el tag en el que estamos actualmente, osea que esta unidad es relativa al tamaño de texto del tag en el que nos encontramos, el cual lo puede haber establecido cualquiera de los tags padres, o ninguno, siendo asi el estándar de 16px.

rem

Pero que pasa si no sabemos que estilos se aplicaron a tags padres y queremos estar mas seguros del tamaño que vamos a obtener? para eso existe la unidad rem, que es el alto de la letra M según el tamaño de texto definido en la base del documento (el tag <body>), de no estar definido va a ser también 16px.

Su nombre viene de "root em" (em de la raíz).

Esto nos permite saber que no importa que tamaños de fuente se hayan redefinido hasta nuestro tag, su tamaño va a ser siempre fijo relativo al tamaño base del texto del documento.

Porcentajes

Otra unidad útil, pero usada normalmente cuando estamos definiendo tamaños de la estructura de nuestro documento como ancho de columnas es el porcentaje %.

El porcentaje se refiere al ancho del tag que contiene al tag actual, si decimos que el ancho de nuestro tag es 50%, este ocupara la mitad del tag padre, si decimos que el margen horizontal es de 5%, el padding horizontal es del 2.5%, entonces nos queda 75% para el contenido:

5% margen izquierdo + 2.5% padding izquierdo + 2.5% padding derecho + 5% margen derecho = 15%

Ejemplos que no se entiende nada!

Las unidades de espacio se entienden mas usandolas y a puro prueba y error, la recomendación es usar em y rem siempre que se pueda, porcentajes cuando estamos definiendo posicionamiento de cosas en la pagina y pixeles si tenes una buena razón.

El div azul que contiene a todos los otros divs establece el tamaño de la fuente a 16 pixeles:

<div style="font-size: 16px; width: 90%; padding: 2.5%; margin: 2.5%; border: 1px solid blue;">
    <div style="width: 5em;  background-color: red; color: white; margin: 1em 0;">5em</div>
    <div style="width: 5rem; background-color: red; color: white; margin: 1em 0;">5rem</div>
    <div style="width: 50px; background-color: red; color: white; margin: 1em 0;">50px</div>
    <div style="width: 50%;  background-color: red; color: white;">50%</div>
</div>
5em
5rem
50px
50%

El div azul que contiene a todos los otros divs establece el tamaño de la fuente, notar que los divs interiores tienen el mismo estilo que los de arriba:

<div style="font-size: 32px; width: 90%; padding: 2.5%; margin: 2.5%; border: 1px solid blue;">
    <div style="width: 5em;  background-color: red; color: white; margin: 1em 0;">5em</div>
    <div style="width: 5rem; background-color: red; color: white; margin: 1em 0;">5rem</div>
    <div style="width: 50px; background-color: red; color: white; margin: 1em 0;">50px</div>
    <div style="width: 50%;  background-color: red; color: white;">50%</div>
</div>
5em
5rem
50px
50%

El primer div tiene un ancho de 5em, como el div padre establece el tamaño de la fuente a distintos valores en los dos ejemplos, el ancho resultante es distinto.

El segundo div tiene un ancho de 5rem, como ambos están en el mismo documento raíz, tienen el mismo ancho, aun cuando el texto interior cambia, ya que "hereda" el tamaño del div padre.

El tercero esta en pixeles, así que va a ser igual, el cuarto esta en porcentaje, y ya que ambos divs padres tienen el mismo ancho, su ancho es igual.

Probemos algo un poco distinto:

<div style="font-size: 32px; width: 50%; padding: 2.5%; margin: 2.5%; border: 1px solid blue;">
    <div style="width: 5em;  font-size: 1rem; background-color: red; color: white; margin: 1em 0;">5em</div>
    <div style="width: 5rem; font-size: 1rem; background-color: red; color: white; margin: 1em 0;">5rem</div>
    <div style="width: 50px; font-size: 1rem; background-color: red; color: white; margin: 1em 0;">50px</div>
    <div style="width: 50%;  font-size: 1rem; background-color: red; color: white;">50%</div>
</div>
5em
5rem
50px
50%

El div padre ahora ocupa el 50% del ancho de la pagina, por lo que el ancho del ultimo div hijo debería ser la mitad de los anteriores, para "estandarizar" em y rem, seteo el tamaño de fuente de los divs hijos a 1rem.

Como no se en que pantalla estas viendo esto no te puedo decir mucho sobre que ancho van a tener, lo único que se, es que como la fuente de ambos tiene 1rem de tamaño, el ancho de los dos debería ser el mismo.

Si el tamaño de la fuente del documento resulta ser 10px, entonces el tercer div tendrá el mismo ancho.

Como siempre, no hace falta que se entienda todo ahora, solo saber las unidades mas usadas, las recomendadas y mas o menos como se comportan, el resto es prueba y error.