Source: http://marianoguerra.org/index-62.html
Timestamp: 2018-11-16 16:24:03+00:00

Document:
Mariano Guerra's Log (old posts, page 62) | Mariano Guerra's Log
Creemos en la Web: Audio y Video
Incluir un video o audio seria algo tan simple como un tag y la ubicación del archivo.
Por cuestiones históricas hay muchos formatos de audio y video y las organizaciones que desarrollan los navegadores mas usados (Microsoft: Internet Explorer 11 y Microsoft Edge, Apple: Safari, Google: Chrome, Mozilla: Firefox) tienen distintos objetivos e intereses que hacen que soporten algunos formatos y otros no.
Empecemos con un ejemplo que según esta tabla de compatibilidad para el formato webm, no va a andar en IE 11 y Safari.
<video src="/cew_files/12/example.webm" type="video/webm" controls></video>
Viendo la tabla de compatibilidad para el formato mp4 vemos que podemos hacerlo funcionar en mas versiones pero no necesariamente todas.
<video src="/cew_files/12/example.mp4" type="video/mp4" controls></video>
Que pasa si queremos hacerlo funcionar en la mayor cantidad de plataformas posibles priorizando formatos mas livianos y con mejor calidad?
Podemos especificar los videos en orden de preferencia, el navegador va a intentar en orden del primero al ultimo cargarlos, cuando encuentre uno que sirve lo va a usar.
<source src="/cew_files/12/example.webm" type="video/webm">
<source src="/cew_files/12/example.mp4" type="video/mp4">
Otro formato que suele usarse es ogv, acá la tabla de compatibilidad del formato ogv.
Cuando la pagina carga y el video esta en pausa el navegador va a elegir una vista previa automáticamente, si queremos tener mas control sobre la imagen mostrada podemos especificarsela explícitamente con el atributo poster :
<video controls poster="/cew_files/12/poster.png">
Ya sea por cuestiones de accesibilidad o para traducir o explicar el contenido del video, podemos agregar subtítulos a un video usando el tag track .
El formato del archivo es bastante simple:
Primer mensaje, del segundo 1 al 4
Segundo mensaje, del segundo 5 al 8
Empieza con WEBVTT en la primera linea, un salto de linea y luego tantas veces como sea necesario:
[Tiempo comienzo] --> [Tiempo fin]
Podemos tener mas de un tag track para agregar subtitulos en distintos idiomas y marcar uno por defecto, aca un ejemplo con subtítulos en Español:
<track src="/cew_files/12/subtitulo.vtt"
label="Subtitulos en Español"
srclang="es"
Que pasa si tenemos un video bastante largo pero solo queremos mostrar un fragmento?
Para eso podemos especificarle el principio y/o final del fragmento que nos interesa.
Notar que al momento de escribir esto es una característica bastante nueva, (ver tabla de compatibilidad de media fragments al momento de leer esto para ver si sigue siendo nueva y poco soportada).
Podemos indicarle el comienzo (segundo 10) y que reproduzca hasta el final:
Indicar solo el final, que reproduzca del principio y reproduzca hasta el segundo 20:
O el principio y el final, que arranque en el segundo 10 y reproduzca hasta el segundo 20:
Veamoslo en nuestro video, que reproduzca desde el segundo 3 al 8 (puede que no funcione en tu navegador).
<video src="/cew_files/12/example.mp4#t=3,8" type="video/mp4" controls></video>
Y que pasa si quiero poner en mi pagina un video que esta en una pagina de videos como youtube?
Para eso podemos embeber (embed en ingles) el contenido en nuestra pagina.
Si miras el video de los ejemplos de arriba, podrás ver que si vamos a share y luego seleccionamos embed, youtube nos da un HTML que podemos incluir en nuestra pagina para incluir el video directamente desde youtube.
src="https://www.youtube.com/embed/XM3eaJPB2Cc"
Podemos ver un video de youtube embebido que muestra un video de como embeber un video de youtube :)
El dialogo en youtube nos permite configurar algunos parametros que cambian el HTML que nos muestra, en el resultado de arriba vemos que podemos modificar el ancho, alto, si tiene borde, si hace auto play y si permite ponerlo en pantalla completa.
Como con video, hay muchos formatos de audio y cada navegador soporta un subset distinto, dado que hay mas formato de audio en uso listo las tablas de compatibilidad primero:
La canción que vamos a usar de ejemplo es Rough Patches de Solstar.
Empezamos con un audio en formato ogg:
<audio controls src="/cew_files/12/example.ogg"></audio>
Como veras el HTML es bastante similar al tag video.
Si no funciona o si tenes un mp3:
<audio controls src="/cew_files/12/example.mp3"></audio>
Pero si viste las tablas de compatibilidad y queres soportar la mayor cantidad de navegadores, al igual que con el tag video se puede incluir mas de un archivo.
<source src="/cew_files/12/example.ogg" type="audio/ogg"/>
<source src="/cew_files/12/example.mp3" type="audio/mpeg"/>
Como con videos, hay paginas web que brindan audios y nos permiten embeberlos, en este caso uno de los mas usados es soundcloud, al igual que en youtube, si hacemos click en share y luego en embed, nos da un fragmento de HTML que podemos incluir en nuestra pagina:
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/72505324&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true">
Aca hay un video de como obtener el HTML:
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:
Y luego creamos nuestra escena:
<div style="width: 100%; height: 25em">
<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-sky color="#BBBBBB"></a-sky>
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:
<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>
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/
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.
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.
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
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.
<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>
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í:
Abriendo el editor XML de Inkscape podemos ver como se crea cada forma, que tags y atributos se usan.
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">
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.
Creemos en la Web: Herramientas de Desarrollo en Firefox y Chrome: Inspector HTML y CSS
Este post es mas simple con un video así que acá esta:
Link: https://www.youtube.com/watch?v=aEndBQ3ZikY
Quizás haga un post con screenshots, pero las interfaces cambian tanto que va a quedar obsoleto bastante rápido.
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.
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)
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">
Nada raro, simplemente esta estructura definida con divs y clases:
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
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.
Un paso mas, dos columnas, que ya es algo que nos permite replicar bastantes estructuras encontradas en la web.
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.
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.
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)
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
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.
Columna 2.1.1
Columna 2.1.2
Columna 2.2.1
Columna 2.2.2
Columna 2.2.3
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
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:
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:
Extra pequeño, dispositivos con menos de 576 pixeles de ancho
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
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:
Reglas: col-12 col-sm-6 col-md-3
Reglas: col-12 col-sm-6 col-md-6
<div class="col-12 col-sm-12 col-md-3">
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
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
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:
Resolución xs: 320x480
Resolución sm: 760x480
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.
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.
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 :)
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.
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.
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>
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;">
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>
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.
Riak Core Tutorial Part 2: Starting
This is part of a series, see the previous one at Riak Core Tutorial Part 1: Setup
If it fails saying it can't find rebar3 check that it's in your $PATH environment variable and that you have Erlang activated.
===> Writing tanodb/priv/01-tanodb.schema
The content of this chapter is in the 01-template branch.
Before explaining what the files mean so you get an idea what just happened let's run it!
make runs rebar3 commands to build a release of our project, for that it uses a tool called relx.
After the release is built (you can check the result by inspecting the folder _build/default/rel/tanodb/ ) we can run it.
When we run make console we get some noisy output that should end with something like this:
The response is the atom pong and a huge number that we will explain later, but to make it short, it's the id of the process that replied to us.
The template created a lot of files and if you are like me, you don't like things that make magic and don't explain what's going on, that's why we will get a brief overview of the files created here.
Those are the meat of this project, the source code we start with, if you know a little of erlang you will recognice many of them, let's explain them briefly, if you think you need more information I recommend you this awesome book which you can read online: Learn You Some Erlang for great good!
This file is "The Application Resource File", you can read it, it's quite self descriptive. You can read more about it in the Building OTP Applications Section of Learn You Some Erlang or in the man page for app in the Erlang documentation.
This file implements the application behavior it's a set of callbacks that the Erlang runtime calls to start and stop our application.
This file implements the supervisor behavior it's a set of callbacks that the Erlang runtime calls to build the supervisor hierarchy.
This file is specific to riak_core, it's a set of callbacks that will be called by the tanodb-admin command.
This file is specific to riak_core, it implements the riak_code_vnode behavior, which is a set of callbacks that riak_core will call to accomplish different tasks, it's the main file we will edit to add new features.
Those were the source code files, but the template also created other files, let's review them
This file describes the coding style for this project, if your text editor understands editorconfig files then it will change it's setting for this project to the ones described in this file, read more about editor config on the editorconfig website
priv/01-tanodb.schema
This file is where we configure some advanced things of our application that don't go on our tanodb.config file, here we configure riak_core and our logging library
Before starting to add features, let's first play with clustering so we understand all those config files above work.
This will start the 3 nodes but they won't know about each other, for them to know about each other we need to "join" them, that is to tell one of them about the other two, this is achieved using the tanodb-admin command, here is how you should run it manually (don't run them):
Now let's check the status of the cluster:
Even when our application doesn't have the features to merit a production release we are going to learn how to do it here since you can later do it at any step and get a full release of the app:
make prod-release
In that command rebar3 runs the release task using the prod profile, which has some configuration differences with the dev profiles we use so that it builds something we can unpack and run on another operating system without installing anything.
Let's package our release:
tar -czf tanodb.tgz tanodb tanodb_config
mv _build/prod/rel/tanodb.tgz .
You can copy it to a clean OS and run:
So, even when you could build it on a version that is close and test it it's better to build releases on the same version to avoid problems. More so if you are packaging the Erlang runtime with the release as we are doing here.
Riak Core Tutorial Part 1: Setup
This is the first chapter in a series that will explore how to use riak_core to build a distributed key-value store.
We first need to have Erlang installed and rebar3 installed.
Please check that the package version is 20.x, if not, check for instructions on how to install the Erlang Solutions package for Ubuntu, CentOS, Mac OS X, Debian or Fedora here: https://www.erlang-solutions.com/resources/download.html
rebar 3.5.0 on Erlang/OTP 20 Erts 9.2
Install Riak Core Rebar3 Template
To create a Riak Core project from scratch we will use a template called rebar3_template_riak_core.
we need to clone its repo in a place where rebar3 can see it:
The Hard Way: Building Erlang with kerl
If you installed Erlang with the instructions above, skip until the Test that Everything Works section below.
If you have or want to have more than one version running side by side you can use kerl, from its github README:
On Mac you can install it with homebrew: brew install kerl
First we need to fetch kerl:
If you want to make this work every time you start a shell you need to put it it the rc file of your shell of choice, for bash it's ~/.bashrc, for zsh it's ~/.zshrc, you will have to add a line like this:
And checking in the output if $HOME/bin is there (notice that $HOME will be expanded to the actual path).
Let's build the 20.3 version:
kerl install 20.3 ~/bin/erl-20.3
. $HOME/bin/erl-20.3/activate
We have installed several tools:
Let's you install multiple Erlang releases that can live side by side
The version of erlang we are going to be using
Our build tool
rebar3_template_riak_core
Rebar 3 Template that will make it easy to setup fresh riak_core projects for experimentation
Now we need to check that everything is setup correctly, we will do that by creating a template and building it.
Remember to have $HOME/bin in your $PATH and Erlang 20.3 activated, cd to a folder of your choice to hold this project and run:
===> Writing akv/apps/akv/src/akv.app.src
===> Writing akv/apps/akv/src/akv.erl
===> Writing akv/apps/akv/src/akv_app.erl
===> Writing akv/apps/akv/src/akv_sup.erl
===> Writing akv/apps/akv/src/akv_console.erl
===> Writing akv/apps/akv/src/akv_vnode.erl
===> Writing akv/rebar.config
===> Writing akv/.editorconfig
===> Writing akv/.gitignore
===> Writing akv/README.rst
===> Writing akv/Makefile
===> Writing akv/config/admin_bin
===> Writing akv/priv/01-akv.schema
===> Writing akv/config/advanced.config
===> Writing akv/config/vars.config
===> Writing akv/config/vars_dev1.config
===> Writing akv/config/vars_dev2.config
===> Writing akv/config/vars_dev3.config
Now let's try to build it:
Output is to long to list, after it ends, near the end you should see this line:
Now let's try to run it:
(akv@127.0.0.1)1>
You can exit with q(). and pressing enter or hitting Ctrl-C twice.

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 

Resolución 

Resolución 

Resolución 
 resolución 
 resolución 
 resolución 
 resolución