Ayer terminó la Conferencia 2022 de Blender y, en el acto de clausura, Ton Roosendaal dijo que se había tratado de “la mejor Blender Conferece jamás realizada” y luego siguió con una lista de agradecimientos que concluyó con un agradecimiento a Franceso Siddi (Director de Operaciones de Blender, el cargo más alto, después del de Ton), a quien llamó al escenario, abrazó y lo dejó para que continuara con las palabras de cierre.
Francesco continuó con más agradecimientos y terminó contando una “pequeña historia”:
Hace tres años, cuando Ton se enfermó, me enteré antes que nadie. Me envió un mensaje y fui a verlo al hospital, y me contó que era lo que estaba pasando y lo que iba a pasar con él. Lo compartió conmigo y yo después lo compartí con el resto del equipo.
Una de las primeras cosas que me dijo en la conversación que siguió (sobre la logística, sobre cómo vamos a manejar esto, qué va a pasar, qué vas a hacer tú, qué voy a hacer yo) fue que me instalara en su oficina.
Yo no quería hacerlo. Porque no era que él no estuviera... pero, en algún momento, lo hice, auque no duró mucho porque llegó el Covid.
No pude detenerme demasiado en ello, pero por unos pocos días estuve ocupando la ofincia de Ton. Tuve conversaciones con la gente y no dejaba de tener presente cuál era su punto de vista al tener ese tipo de conversaciones, porque yo estaba sentado en su silla y pensaba en lo que eso significaba para mí.
Fue un gesto muy altruista para conmigo, porque significa que piensa en los demás, que piensa cómo hacer que las cosas continúen de la mejor manera y estoy muy agradecido por eso. Significó mucho para mí y encarna mucho del espíritu de lo que es Blender.
Luego llamó a Sergey Sharybin (Ingeniero Principal de Blender) para que, en nombre de todos, le regalara a Ton una planta suculenta. Pero, además, Francesco comentó que, como pensaba que una planta no sería suficiente, porque lo que fuera que se le regalase Ton lo iba a querer compartir, tenían unas pequeñas 600 plantas suculentas más para regalarle a los asistentes como recuerdo de la Conferencia.
Y las últimas palabras de Francesco, y de la Conferencia, fueron:
Gracias a todos por venir y nos vemos el año próximo.
Además, en la noche del viernes se había realizado la ceremonia de entrega de los reconocimientos a los ganadores de los Suzzane Awards, en sus tres categorías:
Este año festeja el vigésimo aniversario del paso del programa al mundo del código abierto.
Este es el discurso de apertura a cargo del gran Ton Roosendaal:
En el canal de YouTube de Blender, al igual que esta presentación, pueden ver todas las charlas y presentaciones que se van realizando. ¡Impredible!
A continuación les dejo una traducción al español que hice del discurso de Ton:
Discurso de apertura de la Conferencia 2022 de Blender
Sean todos bienvenidos a la Conferencia 2022 de Blender. Estamos celebrando que hace 20 años atrás, aquí en Ámsterdam, Blender se convirtió al código abierto, así que ¡feliz cumpleaños Blender!
Quiero empezar esta presentación con buenas noticias porque ¡todavía estoy aquí! Esta charla no va a tener un final triste, ya que los doctores me han dicho que estoy completamente limpio, que no tengo que preocuparme y que estoy todo lo saludable que un hombre viejo como yo puede estar. Así que no hay preocupaciones en ese aspecto.
Ahora, para mi historia, los quiero llevar tres años atrás, porque fue entonces, en la anterior Conferencia de Blender, donde hice una graciosa broma cuando dije que iba a dimitir de mis funciones en Blender... en cinco años. Y eso fue un como un desafío a la fe, porque no habían pasado cuatro meses y yo estaba en el hospital debatiéndome entre la vida y la muerte. Afortunadamente, mis perspectivas mejoraron rápidamente, pero después ya saben lo que pasó: ¡el Covid!
Salí del hospital y el mundo estaba vacío, como si estuviera en una película de zombies siendo el único sobreviviente. Probablemente la gente recuerde bien esta famosa viñeta:
Entonces todos pensamos que todo este tema del Covid ya se iba a ir, que era una cosa pequeña. Pero en realidad fue algo bastante grande: casi tres años después sigue siendo un problema aunque, afortunadamente se está diluyendo, por eso podemos hacer este evento. Y todo el mundo estaba festejando que, finalmente, podíamos hacer cosas de nuevo, cuando ¡cuándo no! alguien el el Kremlin decidió invadir a un país inocente y hacer juegos de guerra con todo el mundo. Eso es una gran amenaza.
Y lo que comenzó después de eso: tenemos una crisis energética y todo el mundo sabe que va a ser un gran problema para los años venideros.
Pero no nos olvidemos de nuestro viejo amigo: el cambio climático. Ese es una de las mayores amenazas para la humanidad que causará un colapso masivo de la biodiversidad.
O sea, todo pesadumbre y desaliento. Pero les puedo decir que hay algo aún peor para la humanidad:
El metaverso
Todos conocemos el alboroto que se ha armado:
Por un lado se puede ver como esa horrible pesadilla, que vimos en las películas de Matrix, donde toda la gente estará enchufada por conectores neuronales directamente a Internet y las grandes corporaciones van a controlar nuestros cuerpos y pensamientos hasta que se aseguren de que seamos completamente absorbidos en algún tipo de universo que en realidad no existe. Pero esa es la versión pesadillesca, probablemente el sueño húmedo de Mark Zuckerberg y otros amigos, que espero que no suceda.
En la primera parte empecé a escribir los códigos HTML y CSS de la página web que muestra un artículo con su título y su imagen.
Además, le asigné un tipo de letra (de Google Fonts) para todo el documento.
Antes de empezar con los pasos que tenía previstos para esta segunda parte, borré el contenido del archivo estilos.css (que hasta el momento, solo definía la tipografía general de la página y el ancho de la imagen).
Esto porque, antes de empezar a escribir las reglas de estilo, conviene resetear los estilos predefinidos de los navegadores para tener más posibilidades de que la apariencia que definamos con nuestras hojas de estilo sea consistente, sin importar el navegador desde el cual se visualice la página. Para logra este reinicio de estilos hay varias opciones (como normalize.css, entre otras). Yo utilicé, como recomienda Kevin Powell, el CSS Reset de Andy Bell.
Así que copié y pegué ese código en un nuevo documento en blanco, lo guardé como andybellreset.css, y le eleminé la regla que estaba entre las líneas 8 y 20 (comentadas como /* Remove default margin */) y que eliminaba el margen a varios selectores. Luego, a la declaración de estilos que estaba en la línea 5 le agregué las líneas que a continuación se ven en rojo y le agregué al comentario inicial el texto coloreado en azul:
A este archivo andybellreset.css lo vinculé en al archivo HTML, antes de las líneas que vinculaban a las GoogleFonts y a la hoja de estilos estilos.css, como se ve coloreado en azul en el primer código que se muestra en la próxima sección.
Propiedades personalizadas CSS
Entonces sí, para empezar “oficialmente” esta segunda parte, quería definir los colores para la página. Pero también quería que, llegado el caso, fuera sencillo cambiarlos por otros, ya que la idea final de este proceso es armar una estructura básica reutilizable en diferentes proyectos. Y lo mismo con las tipografías.
Con respecto a las tipografías, y siguiendo las clásicas recomendaciones de no usar en un mismo proyecto más de dos familias tipográficas y que una sea con serifa y la otra sin, fui a Google Fonts y elegí (además de la Sarabun que había elegido en la parte anterior) la fuente Volkhov, copié el código que me proporcionaba Google Fonts y lo pegué dentro del <head> del código HTML (como se muestra en rojo a continuación), sustituyendo las 3 líneas de <link ...> que había pegado en la parte anterior:
El selector dentro del cuál se declaran las propiedades personalizadas define el ámbito en el que éstas se pueden utilizar. Así que, para que queden disponibles globalmente para el documento HTML se las puede definir en la pseudo-clase :root. Además, el nombre que se le da a cada clase personalizada debe comenzar con dos guiones.
Así que al archivo estilos.css, que estaba vacío, le agregué las siguientes líneas (en azul se muestran las declaraciones de las propiedades personalizadas:
Y, para aplicar las propiedades personalizadas, se usa la función var(), como se ve en las líneas resaltadas con rojo: a los selectores h1, h2 y h3 les asigné la propiedad personalizada color principal y al selector body le asigné como background-color la propiedad personalizada color de fondo y como color la propiedad personalizada color texto base.
Quizás no sea la gran diferencia pero en la siguiente imagen se ve, a la izquieda, la apariencia de la página resultante de la primera parte de esta serie y, a la derecha, la resultante luego de vincularle la hoja de estilos que reinicia los estilos y de agregar al código del archivo estilos.css las propiedades personalizadas descriptas en este apartado:
Agregar contenidos a la cabecera y al pie de la página
En el pie de página, de momento, solo colocaría el logotipo de HTML5.
Para colocar ese logotipo (y muchos otros logos e íconos que pudiera necesitar) la opción más popular es, probablemente, el servicio de Font Awesome que, al estilo de Google Fonts, permite vincularlo a la página web para así tener disponibles una gran cantidad de íconos.
Pero, en su lugar, luego de ver este video de Ginormous Dev, decidí probar con Ionicons.
Para poder utilizarlos hay que agregar en el código HTML, antes de la etiqueta de cierre del body, las siguientes dos líneas (resaltadas con rojo):
Luego, busqué el icono que quería utilizar (yo escribí “HTML”) en la barra de búsqueda de ionicons y el sitio me proporcionó el código necesario para agregar a la sección <footer> del archivo HTML (como se ve, resaltado en azul, en el código sobre estas líneas).
Para el formato agregué en el archivo estilos.css, lo siguiente:
Para la cabecera, en principio, solo colocaría una imagen que hiciera las veces de logotipo del sitio y quería que fuera un archivo SVG. Así que busqué en el sitio unDraw entre los muchos disponibles para descargar y elegí el que se llama undraw_designer_re_5v95.svg (se encuentra escribiendo “designer” en la barra de búsqueda) y lo guardé en el directorio images.
Lo coloqué en la cabecera escribiendo el código que a continuación se ve resaltado en rojo en el <header> del archivo HTML:
Y para darle formato a la cabecera y a la etiqueta <img> dentro de la cabecera (que es la que contiene el archivo SVG) agregué en el archivo estilos.css las líneas que se muestran a continuación resaltadas en rojo:
Con lo hecho en este apartado la página en una ventana de navegador de un ancho de alrededor de 450 px se veía así:
Vínculo al validador del código HTML
Para terminar esta segunda parte de la serie, en la sección <footer> del código HTML, le agregué un vínculo al validador HTML de la W3C. Para ello incluí en el código HTML las líneas que se muestran a continuación en rojo:
Y para que el logo de HTML5 del pie de página no tome el color azul o púrpura predefinido de los vínculos (sin visitar y visitado, respectivamente) le agregué lo que a continuación se ve en azul en la hoja de estilos (lo hice antes de la regla del selector footer { ...
}, porque poniéndolo después no funcionaba).
En la próxima parte de esta serie voy a contar los pasos que seguí para:
Crear los estilos de algunos de los elementos del artículo: el texto de párrafo, los títulos, la “bajada”, el autor, la fecha, los subtítulos y los pies de fotos.
Agregar a la cabecera el nombre del sitio web y el icono del menú cuando está acoplado para pantallas pequeñas.
Ayer de noche (y mucho más de noche aún para él) Pablo Vázquez se mandó un directo sorpresa de Blender Hoy revisando casi todos los 63 cortos que se presentaron para los Suzzane Awards 2022, cuya premiación se llevará a cabo el próximo viernes en la Blender Conference que, celebrando que hace 20 años Blender se convirtió en software libre, se celebrará esta semana, entre el 27 y el 29, en Ámsterdam.
Este es uno de los tantos videos postulados. Es obra de Felipe Del Rio, un artista brasileño.
No coloqué el video del vivo de ayer de Pablo Vázquez, porque, por ahora, está bloqueado en YouTube.
Pueden consultar el cronograma de la Blender Conference, que contará con más de 100 conferencistas, entre ellos Daniel Bystedt, Joni Mercado, Andrew Price, Chris Bailey, Hjalti Hjalmarsson, Francesco Siddi, Greg Zaal, dr. Sybren A. Stüvel, Lukas Stockner, Pablo Vazquez, Paul Caggegi, Derek Elliott, Dalai Felinto, Andry "Dédouze" Rasoahaingo, Simon Thommes, Julien Kaspar, Ton Roosendaal, Daniel Martinez Lara, Andy Goralczyk y muchos próceres más.
Me propongo comenzar un proceso de diseño de un sitio web básico que pueda utilizar luego en el rediseño de un par de sitios que mantengo (uno con WordPress y el otro escribiendo directamente el código php) y, quizás, también el de este mismo blog. Además, no se trataría solo de un cambio de apariencia, sino también de la gestión, ya que, en una etapa posterior, quiero experimentar con un generador de sitios estáticos, en particular con Hugo.
Y, durante el proceso, voy escribiendo esta serie de entradas que lo documentan.
El enfoque del diseño tendría que ser adaptativo (responsive) o, más aún, flexible. Como mínimo, la composición y las dimensiones de las
imágenes y las tipografías deberían adaptarse a las múltiples
dimensiones de pantalla y resoluciones de los dispositivos desde donde
se podría acceder al sitio. Y, además, considerando primero a las de
menores dimensiones, con una política mobile-first.
Empezar a escribir los códigos HTML y CSS y definir la tipografía base del sitio
Entonces, para empezar debería armar una página con un artículo y una imagen (que después se podría convertir en la entrada de un blog o en una sección de presentación de un sitio web) y pensarla para ser vista en dispositivos de pantallas pequeñas.
La pregunta que me surgió entonces fue si debía utilizar las etiquetas <section> o <article> (o ninguna de ellas y, en su lugar, usar etiquetas <div>) para el texto principal del hipotético artículo.
Buscando respuesta a esa cuestión encontré una explicación muy clara en el siguiente video del canal Programación en español:
Después empecé a escribir código. Hice un directorio de trabajo y dentro de él hice 2 archivos nuevos, uno de nombre index.html y el otro estilos.css. También hice un subdirectorio al que llamé images y allí coloqué la versión mediana (1280 x 853 px) de esta fotografía de Louis Bauer, descargada de pexels.com para usar como imagen de ejemplo.
Y este fue el primer contenido del archivo index.html al que le coloqué un par de párrafos del habitual texto falso Lorem Ipsum:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitio web básico</title> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,400;0,800;1,400;1,700&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<article>
<h1>Título del artículo</h1>
<figure>
<img src="images/pexels-louis-bauer-249360.jpg" alt="La mano de una persona escribiendo en un cuaderno.">
<figcaption>Leyenda de la imagen</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean et tortor at risus viverra adipiscing at in tellus. Leo in vitae turpis massa...</p>
<p>Accumsan lacus vel facilisis volutpat est velit egestas dui. Dignissim sodales ut eu sem integer. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Duis at consectetur lorem donec...</p>
</article>
</main>
<footer>
</footer>
</body>
</html>
Y este otro es el contenido del archivo estilos.css:
* { font-family: 'Sarabun', sans-serif;
}
img {
width:100%;
}
Para definir la familia tipográfica que iba a usar en la página, agregué en el código del archivo HTML tres etiquetas <link...> (las que están destacadas en rojo) antes de la etiqueta <link...> que lo vincula con la hoja de estilos. Esas tres líneas son las que obtuve al hacer uso del servicio en línea de tipos de letra de Google (Google Fonts), siguiendo estos pasos.
En la hoja de estilos, al selector *, que hace referencia a todos los elementos del documento al que está vinculada, le asigné (como se ve en la línea que está resaltada con azul) el tipo de letra que elegí de Google Fonts y, como resguardo en la eventualidad que no pudiera acceder a esa fuente, que usase la fuente sans-serif predefinida del navegador.
Así que, en caso de querer cambiar la fuente tipográfica del documento, tendría que:
cambiar las tres líneas de código que se muestran coloreadas en rojo en el código HTML por el nuevo código que se descargue al seleccionar otra fuente tipográfica en Google Fonts.
cambiar la línea de código marcada en azul en el código CSS por el nombre de la fuente elegida en Google Fonts.
Finalmente, también en la hoja de estilos, le definí al selector img un ancho del total del espacio que tuviera disponible (width:100%;).
Así se veía la página index.html abierta desde Firefox y con la ventana del navegador reducida a unos 600 px:
Y, si cambiaba el tamaño de la ventana del navegador, el contenido se ajustaba en consecuencia.
En la próxima parte de esta serie voy a contar los pasos que seguí para:
definir una paleta de colores para la página con propiedades personalizadas CSS.
colocar elementos en la cabecera y en el pie de página.
empezar a chequear que el código HTML del archivo fuera válido.
