sábado, 31 de diciembre de 2022

¡Feliz año 2023!

Para celebrar y hacer balance del año que termina, aquí va un listado de mis entradas preferidas del blog en este año.

Novedades 2022 de mis programas favoritos

Scribus

Blender

Inkscape

GIMP

Linux Mint

En setiembre escribí una reseña de los pasos que seguí para actualizar de la versión 20.3 de mi sistema operativo a la 21.

Mis tutoriales

Más que tutoriales son como bitácoras de algunos proyectos personales. Se trata de dos proyectos que están en proceso y que espero continuar durante 2023.

La locomotora en Blender

La serie de videos sobre el modelado de una locomotora simple con Blender lo empecé a publicar el año pasado. Las partes 1 a 8 las publiqué el año pasado. Este año fue el turno de las partes 9 a 13. Me hubiera gustado publicar alguna más, pero no pude dedicarle todo el tiempo que quería.

Diseño web

En octubre empecé a publicar una serie de artículos (la cuarta parte la publiqué esta misma semana) que documentan los pasos seguidos y los recursos utilizados para la creación de una plantilla base (html y css) para un sitio web.

Un poco de fútbol

Casi todos los años escribo alguna entrada sobre fútbol. Claro que este año, como había Copa del Mundo, fueron un poco más de lo habitual.

¡Feliz año!

Muy feliz año para todos y esperemos que 2023 nos siga trayendo novedades de Scribus, Blender, Inkscape, GIMP, Linux Mint y de todo el ecosistema del sofware libre y de código abierto.

Pero, principalmente, que nos encuentre con salud, en paz y junto a los seres queridos.

viernes, 30 de diciembre de 2022

El Rey ha muerto ¡Viva el Rey!

Ayer, con 82 años, falleció Pelé, el futbolista más grande de todos los tiempos.

Infinidad de mensajes, homenajes, saludos y comentarios se han generado. De los que yo pude ver, el que más me gustó fue el siguiente, de José Antonio Martín Otín (“Petón”), exfutbolista, representante de futbolistas, escritor y periodista deportivo español.

miércoles, 28 de diciembre de 2022

Rediseño de la estructura y apariencia básica de un sitio web (V)

Previamente en esta serie:

  • Definí los estilos para algunos elementos del artículo que, aunque no se utilicen continuamente, es bueno tenerlos predefinidos: listas, tablas, combinaciones de teclas, notas al pie y citas (de párrafo y en línea).
  • Definí distintos estilos para los blockquote cuando incluyan una etiqueta samp (porque implicaría que se trata de un “mensaje del sistema”) a cuando no (que sería el caso de un bloque de citas “común”).
  • Definí la apariencia de distintos estados de los vínculos.

Favicon y otros iconos

Un favicon, favicono o icono de página, es una pequeña imagen asociada a una página o sitio web en particular. Suelen ser mostradas en la barra de direcciones, en la pestaña del navegador, en las listas de marcadores o favoritos y en los historiales de páginas visitadas y de navegación reciente.
Para una lectura detallada sobre este tema, les recomiendo How to Favicon in 2022: Six files that fit most needs (de Evil Martians, en inglés).

Por razones de compatibilidad entre navegadores, los formatos de imagen preferidos para guardar un favicon son .ICO y .PNG.

En este caso, para crear el favicon, desde GIMP abrí el archivo undraw_designer_re_5v95.svg del directorio images (que, desde la segunda parte de esta serie, hace las veces de logo del sitio). Como se trata de un archivo vectorial, al abrirlo de GIMP, pregunta las dimensiones y la resolución deseadas para hacer el renderizado (convertir la información vectorial en pixelar).

Así que en la mayor de las dimensiones (el ancho en este caso) ingresé 30 y di Aceptar.

Luego, fui a Imagen > Tamaño del lienzo... y definí las dimensiones del lienzo de 32 en Anchura y en Altura. En el apartado Desplazamiento pinché en el botón “Centrar” y apliqué los cambios pinchando en “Redimensionar”. Después fui a Capa > Capa a tamaño de imagen y, finalmente, exporté el archivo (desde Archivo > Exportar...) al directorio raíz del sitio, con el nombre favicon.ico.

En la ventana que se abrió con los Detalles del icono, me aseguré de que la opción seleccionada del menú desplegable fuera 32 bpp, alfa de 8 bits, sin paleta y pinché en “Exportar”.

Claro que por su escalabilidad, y siempre que sea posible, es preferible utilizar el formato vectorial .SVG para los iconos. Así que decidí brindar las dos opciones (el formato .ICO para navegadores antiguos y el .SVG para los modernos).

Para eso, hice una copia del archivo undraw_designer_re_5v95.svg y la pegué en el directorio raíz del sitio y le cambié el nombre al archivo por favicon.svg.

Para que la página fuera compatible con los web clips de Apple, sería necesario contar con, al menos, otra versión del icono, pero en formato .PNG. Entonces, en GIMP, seguí pasos similares a los que ya especifiqué para la creación del archivo .ICO pero con estas diferencias:

  • Al abrir el archivo SVG original, en la mayor de las dimensiones (el ancho en este caso) ingresé 140.
  • En Imagen > Tamaño del lienzo... y definí las dimensiones del lienzo de 180 en Anchura y en Altura. En el apartado Desplazamiento pinché en el botón “Centrar” y apliqué los cambios pinchando en “Redimensionar”.
  • Luego, seleccioné como color de fondo el color del dorso del monitor que tenía el logo, y fui a Imagen > Aplanar la imagen.
  • Exporté el archivo al directorio raíz del sitio, con el nombre apple-touch-icon.png.

Finalmente, para mejorar la compatibilidad con los dispositivos Android (y poder instalar su sitio como una aplicación del sistema) serían necesarios otras dos versiones del icono: uno de 192 x 192 para mostrar en la pantalla de inicio y otro de 512 x 512 para ser usada como pantalla de bienvenida mientras se carga la PWA.

Los pasos que seguí fueron muy similares a los descriptos en la lista anterior:

  • Abrí dos veces el archivo SVG original y en la mayor de las dimensiones (el ancho en este caso) ingresé 152 en el primer caso y 472 en el segundo.
  • En Imagen > Tamaño del lienzo... definí las dimensiones del lienzo de 192 (en Anchura y en Altura) para el primer caso y 512 para el segundo. En ambos casos pinché en el botón “Centrar” del apartado Desplazamiento y apliqué los cambios pinchando en “Redimensionar”.
  • Luego, seleccioné como color de fondo el color del dorso del monitor que tenía el logo, y fui a Imagen > Aplanar la imagen.
  • Exporté el archivo al directorio raíz del sitio. La versión de 192 pixeles la exporté con el nombre icon-192.png y la otra con el nombre icon-512.png.

Agregados y correcciones al código

Para realizar esta parte, descargué html5boilerplate.

El siguiente video del Canal de YouTube New Code explica qué son las plantillas html5 en general y html5boilerplate en particular:

Así se ven, lado a lado, el código html que he escrito hasta el momento en esta serie (a la izquierda) y el código html que proporciona html5boilerplate (a la derecha):

Así que, tomando en cuenta cómo está escrito el código en el archivo index.html de html5boilerpate realicé las siguientes confirmaciones, agregados y modificaciones en mi archivo index.html (también tomé en consideración Mi plantilla HTML, un texto de Manuel Matuzovic que explica qué elementos sí utiliza y cuáles no de la plantilla de html5boilerplate):

  • En la línea 1 la diferencia entre ambos archivos es que la declaración de tipo de documento (DOCTYPE) está escrita en mayúsculas en un caso y en minúsculas en el otro. Es indistinto utilizar una u otra forma, pero en la mayoría de los ejemplos que revisé se utiliza la forma con el texto en mayúsculas. Así que aquí no realicé ninguna modificación.
  • En la línea 2 aparece asignada una clase no-js a la etiqueta html. ¿Cuál es el uso de la clase no-js en html? Básicamente, se trata de una clase propia de Modernizr (una biblioteca de JavaScript -que está cargada en la línea 28 del código de html5boilerplate- y que se usa para detectar las características que soporta el navegador del usuario y actuar en consecuencia). Pero, como en principio no tenía pensado utilizar Modernizr, no agregué esa clase a mi código html.
  • Las siguiente diferencia está en la ubicación de la etiqueta title: en el archivo de html5boilerplate es la segunda línea dentro de head (enseguida después de la línea que define el charset). Así que en mi código html moví la línea 6 y la coloqué después de la línea 4.
  • Luego del title, en el código de html5boilerplate, aparece una etiqueta meta name="description"... que yo no había escrito en mi código. Pero, ¿qué es una meta descripción? Básicamente, es la descripción del sitio que mostrarán los motores de búsqueda. Así que la agregué a mi código html, y al atributo content le escribí como valor: ”Descripción concisa de la temática del sitio, de alrededor de 150 caracteres. Debería incluir las palabras clave del contenido”.
  • Con las modificaciones precedentes, en la línea 7 de mi código html quedó la etiqueta meta name="viewport" que es, básicamente, igual a la de html5boilerplate. La única diferencia es que el valor de initial-scale lo tiene escrito sin decimales (o sea, 1 en vez de 1.0). Como es exactamente lo mismo, lo puse sin decimales en mi código por una ínfima economía de caracteres.
  • Entre las líneas 10 y 13 del código proporcionado por html5boilerplate aparecían 4 etiquetas meta property="og:...". Se trata de etiquetas Open Graph (og). Pero, ¿qué son las Open Graph? Básicamente, forman parte de un protocolo creado por facebook para mejorar y controlar la vista previa del contenido de la web al momento de compartirla a través de facebook u otras redes sociales. Así que, de momento, aunque no pensaba utilizar estas líneas a mi código. Las incorporé pero etiquetadas como comentarios.
  • Luego le agregué a mi código las tres líneas del código de Matuzovic  relacionadas con los iconos, o sea:
    • <link rel="icon" href="/favicon.ico" sizes="any">
    • <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    • <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    (El agregado de sizes="any" en la primera de estas tres líneas es para evitar un error de Chrome, como se indica en la última línea del apartado I. favicon.ico for legacy browsers).
  • En la línea 15 del código de html5boilerplate aparecía una etiqueta <link rel="manifest" href="site.webmanifest"> que copié y pegué en mi código html. Esta línea indica que el recurso apuntado es un manifiesto de aplicaciones web. Según Evil Martians, la versión extremadamente corta de este archivo JSON sería (como verá hace referencia a algunas de las imágenes que ya había preparado en el apartado anterior de esta entrada):
    {
      "icons": [
        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
      ]
    }
    Así que, copié el código que se muestra sobre estas líneas y lo pegué en un archivo nuevo que guardé con el nombre site.webmanifest en la raíz del sitio.
  • Luego sí, era el momento de los vínculos a las hojas de estilo y a las Google Fonts, así que, el código que originalmente estaba entre las líneas 7 y 11 de mi código, pasaron a estar entre las líneas 16 y 20.
  • Para terminar con la sección head, la línea 22 del código de html5boilerplate tenía una etiqueta meta name="theme-color" content=... que indica un color personalizado para mostrar en el entorno de la interfaz (en la barra de título, pestañas, etc.). Esta opción es soportada por pocos navegadores. Yo la probé en Firefox, Chrome, Chromium, Brave y Vivaldi y sólo funcionó en el último (más información en MDN Web Docs). Así que opté por no incluirla en mi código html.

Con todos estos cambios, la sección head de mi archivo html estaba quedando así:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
    <title>Sitio web básico</title>
  <meta name="description" content="Descripción concisa de la temática del sitio, de alrededor de 150 caracteres. Debería incluir las palabras clave del contenido">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--<meta property="og:title" content="">
      <meta property="og:type" content="">
      <meta property="og:url" content="">
      <meta property="og:image" content=""> -->

  <link rel="icon" href="favicon.ico" sizes="any">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="manifest" href="site.webmanifest">
  <link type="text/css" rel="stylesheet" href="andybellreset.css">
  <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,700;1,400;1,700&family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="estilos.css">
</head>

[ ... ]

Después, para el resto del documento html, el único agregado que había pensado en hacer a mi código era el de las líneas para Google Analytics (líneas 32 a 37 del código de html5boilerplate). Pero, Google Analytics dejará de estar operativo en los próximos meses a favor de Google Analytics 4. Además, Google Analytics presenta algunas objeciones porque, por ejemplo, no cumple con las leyes de protección de datos de la Unión Europea y, de hecho, es ilegal en Austria y Francia.

Podría considerar otras opciones, como Matomo, Open Web Analytics, etc.
Pero, de momento, como pensaba en una segunda etapa convertir este código html en plantillas de Hugo y Hugo ya incluye una plantilla interna que soporta Google Analytics, opté por no agregar nada de esto a mi código html.

Más vale tarde que nunca

Revisando tanta información para escribir estas bitácoras, me enteré que el elemento hgroup fue removido de la especifiación html5 (¡en abril de 2013!), así que busqué alternativas para sustituir esa etiqueta en mi código html y me decanté por la propuesta en OS Templates.

Básicamente, consiste en sustituir la etiqueta hgroup por una etiqueta div, con una clase de nombre hgroup (podría ser cualquier otro, pero con este nombre la corrección es más sencilla).
Así que en el archivo html, a las líneas del código que a continuación maqué en rojo,...:

[ ... ]
  <header>
    <a href="..."> ... </a>
    <hgroup>
      <h1>Nombre del sitio</h1>
      <p>Lema del sitio</p>
    </hgroup>
    <nav> ... </nav>
  </header>
[ ... ]

  <article>

    <hgroup>
      <h1>Título del artículo</h1>
      <p>“Bajada” del título del artículo</p>
      <p><a rel="author" href="#">Nombre del autor del texto</a> | Publicado el <time datetime="2022-11-03">3 de noviembre de 2022</time></p>
    </hgroup>

    [ ... ]

  </article>

[ ... ]

Las sustituí por las líneas que en el siguiente código marqué en verde:

[ ... ]
  <header>
    <a href="..."> ... </a>
    <div class="hgroup">
      <h1>Nombre del sitio</h1>
      <p>Lema del sitio</p>
    </div>
    <nav> ... </nav>
  </div>
[ ... ]

  <article>

    <div class="hgroup">
      <h1>Título del artículo</h1>
      <p>“Bajada” del título del artículo</p>
      <p><a rel="author" href="#">Nombre del autor del texto</a> | Publicado el <time datetime="2022-11-03">3 de noviembre de 2022</time></p>
    </div>
    [ ... ]

  </article>

[ ... ]

Además, en la hoja de estilos, para que la apariencia del sitio se conserve, a todas las intancias en que aparecía el selector hgroup le agregué un punto adelante (.hgroup), para hacer referencia a la clase correspondiente.


De nuevo se me hizo bastante larga la entrada. Así que los demás ajustes en las hojas de estilo que había pensado tratar aquí, quedarán para la próxima.

Además, espero poder empezar a ver que puede pasar con la página al verla en pantallas más grandes (en particular, querría empezar enfocándome en las imágenes y probar las propiedades object-fit y object-position, muy bien explicadas, en inglés, en este video de la gran Jen Simmons).

jueves, 22 de diciembre de 2022

El “detrás de cámaras” de “Charge”

Ayer se publicó en el canal de Youtube del Blender Studio el siguiente video de algo más de 11 minutos de duración que cuenta, en inglés, los entretelones de la creación de “Charge”, la más reciente open-movie del Blender Studio:

El video, editado por Haru Legogue, transita por once entrevistas a algunos de los responsables, artistas, desarrolladores y técnicos que trabajaron en el proyecto. En orden de aparición se ve y se escucha a:

  • Francesco Siddi, productor.
  • Demeter Dzadik, manipulación de personajes (character rigging)
  • Julien Kaspar, artista de personajes.
  • Hjalti Hjálmarsson, director.
  • Andy Goralczyk, director de arte.
  • Beau Gerbrands, modelador.
  • Rik Schutte, animador jefe.
  • Pablo Fournier, animador.
  • Dalai Felinto, desarrollador de Blender.
  • Simon Thommes, efectos especiales y materiales.
  • Sander Houtman, diseñador de sonido.

Al final también se pueden ver unas breves escenas del detrás de cámara del directo de presentación que se realizó el 15 de diciembre, el día del lanzamiento del corto y que condujo Francesco.

Este mini-documental está dedicado a los suscriptores del Blender Studio, en agradecimiento porque hicieron posible este proyecto.

lunes, 19 de diciembre de 2022

Los sudamericanos en el mundial de fútbol de Catar: ¡Argentina campeón!

Terminó el 22º mundial de fútbol que se disputó en Catar. 

Argentina, con su triunfo en la definición por penales luego de haber empatado 3-3, se coronó por tercera vez Campeón del Mundo (las anteriores habían sido en 1978 y 1986).

Fue la 11ª vez que llegaron a la final un representante de la CONMEBOL y uno de la UEFA.

El sábado se había jugado el partido por el tercer puesto que terminó con un triunfo claro de Croacia sobre Marruecos por 2-1.


(Foto de fifa.com)

Y ayer fue el momento de la gran final.

El equipo del rey actual, Messi, se enfrentaba al equipo del próximo rey, Mbappé. Además, ambos llegaban empatados en goles en este campeonato, con 5 cada uno.

Argentina entró a jugar la final con todo y dominó la mayor parte del juego. De hecho, en el primer tiempo Francia no pateó al arco y Argentina fue muy superior. 

Igualmente, el gol de apertura vino como consecuencia del cobro de un penal inexistente por parte del árbitro polaco (y fueron varios los penales que le cobraron a Argentina en este campeonato). Más allá de la ayudita arbitral, indudablemente Argentina terminó ganando merecidamente ese primer tiempo (Di María, de muy buen partido, anotó un gran segundo gol).

Deschamps se dió cuenta que para intentar emparejar la intensidad, la velocidad y las ganas de ganar de Argentina, tenía que empezar a “raspar” un poco más y entonces, antes del final del primer tiempo ya había sacado del equipo a Giroud y al indolente Dembelé. Adentro fueron Thuram y Kolo Muani.
Y le funcionó. En el segundo tiempo Argentina siguió siendo más, pero el juego se empezó a emparejar y, además, a los 64', Scaloni sacó a Di María y mandó a Acuña al campo, como para empezar a cerrar un partido que parecía ganado.

Pero no.

Recién a los 70' Mbappé pudo tener su primer remate al arco y a los 80' el árbitro pagó la deuda que arrastraba del primer tiempo cobrando un penal (aunque no inexistente, bastante dudoso) a favor de Francia.

Kylian Mbappé no solo metió el penal, sino que, un minuto después, logró lo que en los 80' anteriores no se vislumbraba por ningún lado: empató el partido con un verdadero golazo.

El partido terminó empatado 2-2. Se repetía la historia del partido de Argentina contra Países Bajos. Con la diferencia que, esta vez, el rival era Francia.

El alargue fue tan infartante como los últimos minutos del tiempo regular. A poco de haber comenzado el segundo tiempo del alargue, luego de un rebote que dio Lloris, Messi (¡de derecha!) anotó su segundo gol en el partido y puso en ventaja a Argentina. Ahora sí sería aguantar y ganar.

Pero no.

A dos minutos de cumplirse el tiempo reglamentario del alargue, Gonzalo Montiel, dentro del área, desvió un remate de Mbappé con su codo: clarísimo penal.

Allá fue Mbappé y anotó su hat-trick en la final de la copa del mundo y se aseguró el título de goleador del campeonato.

Pero aún había más emociones antes de la definición por penales. En los minutos de descuento, tras un pelotazo al área de Konaté, Kolo Muani definió solo frente al arquero argentino, Emiliano Martínez, que desvió el remate con su pierna izquierda y mantuvo con vida a los albicelestes. Seguramente esta acción sea la que terminó definiendo el premio de mejor arquero del campeonato para Martínez.

En la contra, Argentina tuvo una chance final en un cabezazo de Lautaro Martínez, pero se fue bastante desviado.

Terminó el partido 3 a 3 y a los penales.

Los primeros de cada equipo fueron responsabilidad de sus respectivas estrellas que no fallaron. Mbappé le tiró tres penales en la noche a Martínez (un especialista en atajar penales) y le anotó todos.

Pero Coman no es Mbappé y a él sí Martínez le atajó el penal. Luego Tchouaméni  tiró afuera su remate penal y cuando llegó el momento de redimirse para Gonzalo Montiel, anotó el penal del triunfo y ¡Argentina campeón!

A fin de cuentas este Mundial terminó con 9 triunfos, 5 empates y 4 derrotas de las 4 selecciones de CONMEBOL.

En esos 18 partidos, las selecciones sudamericanas convirtieron 29 goles y recibieron 16. Los anotadores de esos 29 goles fueron:

NombreSelecciónGoles
Lionel MessiArgentina7
Julián ÁlvarezArgentina4
RicharlisonBrasil3
Enner ValenciaEcuador3
Giorgian De ArrascaetaUruguay2
NeymarBrasil2
Moisés CaicedoEcuador1
CasimiroBrasil1
Ángel Di MaríaArgentina1
Enzo FernándezArgentina1
Alexis Mac AllisterArgentina1
Nahuel MolinaArgentina1
Lucas PaquetáBrasil1
Vinicius Jr.Brasil1

Así que, en las once finales en que se enfrentaron europeos y sudamericanos, la ventaja es para Sudamérica que, de la mano  de Brasil y Argentina, tiene 8 triunfos (dos veces contra Italia y Alemania y una contra Suecia, Checoslovaquia, Países Bajos y Francia) y 3 derrotas (dos veces contra Alemania y una contra Francia).

Entiendo a mis compatriotas que no querían el triunfo argentino (tampoco hubieran querido el triunfo brasileño si se hubiese dado el caso), pero, por más imposible que sea que Uruguay vuelva a ganar alguna vez la Copa del Mundo, me resulta muy mezquino querer sostener un "empate" histórico en cantidad de copas del mundo a fuerza de derrotas del otro.

Además, en los Campeonatos del Mundo, siempre estoy del lado de los sudamericanos como demuestra esta serie de "Los sudamericanos en el mundial de fútbol de..." que vengo escribiendo desde el mundial de Brasil 2014.

Termino felicitando a todos mis conocidos argentinos por el gran triunfo con esta foto de Gonzalo Bergessio, delantero argentino que nos dejó un gran recuerdo a los hinchas de Nacional en su pasaje por el club, y que, junto a miles de sus compatriotas, estuvo alentando a su selección en Catar.


viernes, 16 de diciembre de 2022

Ayer se estrenó “Charge”, otra open-movie del Blender Studio

Como estaba anunciado, ayer se estrenó “Charge”, la nueva open movie del Blender Studio.

Se trata de la 14ª open-movie del estudio. Es una animación de 3 minutos de duración de alto impacto visual y llena de acción, inspirada en los formatos de las cinemáticas de videojuegos y de las demostraciones de renderizado en tiempo real.

Los objetivos del proyecto eran desafiar a Blender y al equipo creativo a conseguir el fotorealismo y empujar las capacidades de Blender en el flujo de trabajo interactivo de PBR (renderizado basado en física).

El personaje principal del corto se llama Einar y es una especie de mecánico-inventor marginal que ha creado su propia casa, su ropa e incluso su brazo izquierdo robótico a partir de chatarra.

Quien esté suscripto al Blender Studio puede descargar el personaje (es un archivo de 553 MB). Pero tenga en cuenta que, además, tendrá que descargar la versión de desarrollo de Blender para poder abrir el archivo porque requiere de Blender 3.5 para funcionar.

Además, el lanzamiento de ayer estuvo acompañado de una fiesta de estreno en línea desde el cuartel central de Blender en Ámsterdam, conducida por Francesco Siddi (ya que Pablo Vázquez, el habitual anfitrión de estos eventos, estaba festejando su cumpleaños en sus vacaciones en Argentina).

Durante la transmisión, antes y después del estreno propiamente dicho, Francesco realizó pequeñas entrevistas a varios de los involucrados, directa o indirectamente, en la realización de este nuevo corto y en el desarrollo de Blender. Allí aparecen, entre otros, Dalai Felinto, Ton Roosendaal (y su perro), Sergey Sharybin, Sybren Stüvel, Weizhen Huang, Jeroen Bakker, Julian Eisel, Hjalti Hjálmarsson, Andy Goralczyk, Julien Kaspar, Rik Schutte, Beau Gerbrands, Pablo Fournier, Demeter Dzadik y Simon Thommes.

jueves, 15 de diciembre de 2022

Los sudamericanos en el mundial de fútbol de Catar (semifinales)

Ayer se completó la disputa de las semifinales del mundial de fútbol que se está terminando en Catar. Fue la tercera vez (en 22 ediciones de la Copa del Mundo) que llegaron representantes de tres confederaciones a esta instancia (las anteriores habían sido en 1930 y en 2002).

Con las victorias de Argentina y Francia, quedó definida la final del domingo próximo. El sábado Croacia y Marruecos se enfrentarán por el tercer puesto. 

Argentina, el representante de la CONMEBOL que llegó a semifinales, avanzó a la final con un categórico triunfo sobre Croacia y va a jugar su sexta final de campeonato del mundo. En las anteriores cinco, logró el título en 1978 y 1986. El vicecampeonato lo obtuvo en las ediciones de 1930, 1990 y 2014.

El otro finalista es Francia. ¿Conseguirá Francia su tercera consagración, además de convertirse en la tercera selección en conseguir dos títulos consecutivos, después de Italia (en 1934 y 1938) y Brasil (en 1958 y 1962)?


(Foto de fifa.com)

La primera de las semifinales fue el martes. Allí Argentina se enfrentó a Croacia. El equipo de Modric y compañía, en una primera media hora sin chances de gol, controló mayormente la posesión y el juego. La primera jugada con algo de riesgo fue un remate de Enzo Fernández cerca de los 25'. A los 30' llegó la primera chance para Croacia y en el contragolpe Julián Álvarez picó al vacío y, en una dudosa decisión, el juez marcó penal del arquero que, a los 33', Messi convirtió en el gol de apertura.

Para mejor, en otra contra a la salida de un córner croata, el mismo Julián (que jugó un partido fantástico) corrió desde el centro del campo y se fue derecho al arco. Favorecido por un par de rebotes en los defensas, quedó de cara al arquero y anotó el segundo.

A partir de allí, dominó Argentina, al influjo de Messi, y tuvo, por lo menos, otra chance clara.

En el segundo tiempo Croacia se desarmó agregando delanteros y Argentina se armó agregando defensas. Se jugaba en el campo argentino, pero las contras metían miedo. Y a los 68' se cerró el telón: Messi fabricó una jugada digna de su genio y habilitó a Julián Álvarez que marcó su doblete y el tercer gol del partido. De allí al pitazo final fue todo fiesta de los hinchas de Argentina en las tribunas, que festejaron un resultado tan claro como inesperadamente abultado.

A falta de un solo partido para Argentina, en el Mundial llevamos 9 triunfos, 4 empates y 4 derrotas de las 4 selecciones de CONMEBOL.

En esos 17 partidos, las selecciones sudamericanas convirtieron 26 goles y recibieron 13. Los anotadores de esos 26 goles fueron:

NombreSelecciónGoles
Lionel MessiArgentina5
Julián ÁlvarezArgentina4
RicharlisonBrasil3
Enner ValenciaEcuador3
Giorgian De ArrascaetaUruguay2
NeymarBrasil2
Moisés CaicedoEcuador1
CasimiroBrasil1
Enzo FernándezArgentina1
Alexis Mac AllisterArgentina1
Nahuel MolinaArgentina1
Lucas PaquetáBrasil1
Vinicius Jr.Brasil1

La segunda semifinal fue el miércoles y Francia derrotó 2-0 a Marruecos que mantuvo la intensidad y la lucha hasta el final. Fantástico mundial de la primer selección africana en llegar a semifinales y que, en este caso, tuvo la mala suerte de tener que eliminarse con el mejor equipo de campeonato.

Así que la final va a enfrentar a un reprsentante de CONMEBOL con uno de UEFA por 11ª vez en la historia de la Copa del Mundo.

Sólo dos veces la final de campeonato enfrentó a selecciones de la CONMEBOL (en 1930 y 1950). Y, en las nueve oportunidades restantes la final fue entre selecciones de UEFA.

Hasta ahora, en las diez finales en que se enfrentaron europeos y sudamericanos, la ventaja es para Sudamérica que, de la mano  de Brasil y Argentina, tiene 7 triunfos y 3 derrotas.

Estos dos rivales de la final del próximo domingo ya se han enfrentado por Copa del Mundo en 3 oportunidades, con los siguientes resultados:

  • 15 de julio de 1930 en el Parque Central de Montevideo, Argentina 1 - Francia 0
  • 6 de junio de 1978 en el Monumental de Núñez, de Buenos Aires, Argentina 2 - Francia 1
  • 30 de junio de 2018 en el Kazán Arena de Rusia, Francia 4 - Argentina 3

El partido por el tercer puesto se juega el sábado (Croacia vs Marruecos) y la final el domingo (Argentina vs Fracia). Ambas a las 12:00 hs de Uruguay.

martes, 13 de diciembre de 2022

El jueves se estrena “Charge”, un nuevo corto del Blender Studio

Charge, la nueva open movie del Blender Studio, es el resultado del trabajo en el Project Heist y tendrá su estreno pasado mañana, jueves 15 de diciembre, a las 13:00 hs de Uruguay.

El estreno anterior había sido Sprite Fright, en octubre de 2021. 

Las anteriores “open movies” del Blender Studio fueron: Elephants Dream (2006), Big Buck Bunny (2008), Sintel (2010), Tears of Steel (2012), Caminandes 1 y Caminandes 2 (2013), Cosmos Laundromat (2015), Glass Half (2015), Caminandes 3 (2016), Agent 327 (2017), Daily Dweebs (2017), Spring (2019) y Coffe Run (2020).

domingo, 11 de diciembre de 2022

Los sudamericanos en el mundial de fútbol de Catar (cuartos de final)

Ayer se completó la disputa de los cuartos de final del mundial de fútbol que se está disputando en Catar. Solo quedan cuatro selecciones y están a ¡solo dos partidos de ganar el campeonato del mundo! ¿Conseguirá Francia su tercera consagración, además de convertirse en la tercera selección en conseguir dos títulos consecutivos, después de Italia (en 1934 y 1938) y Brasil (en 1958 y 1962)? ¿Argentina logrará su tercer título mundial? ¿Croacia superará el vicecampeonato que logró en el mundial pasado? ¿El sorprendente Marruecos, primera selección africana en llegar a semifinales, seguirá haciendo historia?

Los 2 representantes de la CONMEBOL que superaron la fase de grupos y luego también los octavos de final, jugaron el viernes y tuvieron historias muy parecidas pero con finales muy distintos.


(Foto de fifa.com)

Primero fue Brasil que tuvo su partido contra los luchadores incansables de Croacia y los superó en juego y en chances de gol pero no anotó: el arquero croata, Livakovic, atajó todo lo que le tiraron. El tiempo regular terminó con empate a cero y en el alargue Neymar frotó la lámpara y convirtió uno de los mejores goles del campeonato. Parecía que el pasaje a semifinales estaba sentenciado a favor de Brasil pero ¡en una contra! Croacia empató y a Brasil se le aparecieron todos los fantasmas de las eliminaciones que lo persiguen en los últimos mundiales. Se llegó a la definición por penales, flotaba en el aire la sensación de que se les terminaba el mundial y el arquero croata completó su obra atajando dos de los penales. En definitiva, se terminó el campeonato para Brasil y su posición final en el campeonato fue 7º.

Más tarde Argentina se enfrentó a Países Bajos y controló casi todo el juego a su antojo. En el primer tiempo Messi realizó una asistencia brillante y Nahuel Molina anotó la apertura albiceleste. En el segundo tiempo Messi aumentó de penal. Faltaban 10' para terminar el partido y Países Bajos no había pateado al arco.
Parecía que el pasaje a semifinales estaba sentenciado a favor de Argentina pero los europeos se fueron arriba, Argentina retrocedió y Wout Weghorst, a 5 minutos de haber ingresado, descontó con golpe de cabeza. Siguieron con todo en busca del empate y gracias a los 10' de descuento y a una falta muy tonta al borde del área, tuvieron un tiro libre que ejecutaron sorprendiendo con un pase rastrero a Weghorst que anotó (de nuevo) y llevó el partido a un inesperado alargue.

El alargue fue una locura. Argentina tuvo más chances, incluso un tiro en el palo, pero el empate no se modificó.
En la definición por penales Martínez (Emiliano, el arquero) contuvo los dos primeros penales y Martínez (Lautaro, el delantero) anotó el último para darle a Argentina el pasaje a semifinales.

Resumiendo, los 2 partidos de estos cuartos de final con equipos sudamericanos terminaron en empates frente a rivales europeos y las clasificaciones a semifinales se tuvieron que dirimir a través de tiros penales.

Hasta ahora en el Mundial llevamos 8 triunfos, 4 empates y 4 derrotas de las 4 selecciones de CONMEBOL.

En esos 16 partidos, las selecciones sudamericanas convirtieron 23 goles y recibieron 13. Los anotadores de esos 23 goles fueron:

NombreSelecciónGoles
Lionel MessiArgentina4
RicharlisonBrasil3
Enner ValenciaEcuador3
Julián ÁlvarezArgentina2
Giorgian De ArrascaetaUruguay2
NeymarBrasil2
Moisés CaicedoEcuador1
CasimiroBrasil1
Enzo FernándezArgentina1
Alexis Mac AllisterArgentina1
Nahuel MolinaArgentina1
Lucas PaquetáBrasil1
Vinicius Jr.Brasil1

La representación por confederación quedó así:
  • De las 5 selecciones de la UEFA que llegaron a cuartos de final, 2 pasaron a semifinales. Se sabía que por lo menos una iba a quedar afuera, porque Francia e Inglaterra jugaban entre ellas. Las otras dos eliminadas fueron Países Bajos y Portugal.
  • De las 2 selecciones de la CONMEBOL, avanzó 1 a semifinales.
  • El único representante de la CAF que llegó a cuartos también avanzó a semifinales e hizo historia.

De hecho, es la tercera vez que llegan a semifinales representantes de tres confederaciones (considerando las actuales confederaciones en la que está dividido el fútbol a nivel mundial):

  • En 3 ediciones hubieron representantes de 3 confederaciones en las semifinales (1930, 2002, 2022).
  • En 14 ediciones hubieron representantes de 2 confederaciones (UEFA y CONMEBOL) en las semifinales (1938, 1950, 1954, 1958, 1962, 1970, 1974, 1978, 1986, 1990, 1994, 1998, 2010 y 2014).
  • En 5 ediciones hubieron representantes de 1 sola confederanción (UEFA) en las semifinales (1934, 1966, 1982, 2006 y 2018).

Las semifinales se juegan el martes (Argentina vs Croacia) y el miércoles (Marruecos vs Francia). Ambas a las 16:00 hs de Uruguay.

jueves, 8 de diciembre de 2022

¡Salió Blender 3.4!

Ayer, miércoles 7 de diciembre, tal como estaba previsto, se produjo el lanzamiento de la versión 3.4 de Blender.

En Blender el ciclo de lanzamiento marca que cada tres meses hay una nueva versión disponible. Es un cronograma muy exigente para todos, en especial para los desarrolladores.
No hace mucho, en uno de los directos de Blender Hoy, Pablo Vázquez se preguntaba si no sería hora de reducir la cantidad de lanzamientos anuales.

Y parece un planteo razonable.
El programa ha madurado muchísimo y ya no hay tanto espacio para mejoras notorias. Claro que se siguen (y se seguirán) corrigiendo errores y agregando características, pero 4 versiones nuevas por año parece demasiado.

Además, como el compositor en tiempo real aún no está listo, esta versión 3.4 es un lanzamiento con menos novedades aún que la versión 3.3, que ya traía pocas.

Sea como sea, siempre hay cosas para destacar en cada lanzamiento.
En este caso me llamaron la atención:

  • En Geometry Nodes: la nueva forma de funcionar del nodo Visor (Viewer node). Al conectarle una geometría, ahora se muestra también en el Editor de la Vista 3D (y no solo en el spreadsheet).
  • En Grease Pencil el nuevo modificador Contorno (Outline modifier) y las mejoras en el modificador Line Art.

Además, ¡volvió la reseña de Remington Markham (alias Southernshotty), que tanto extrañamos en el lanzamiento anterior!:

Busqué otros videos que también reseñaran las nuevas características que presenta este lanzamiento y encontré este video de Dragon 3D:

Tenga presente que al abrir un archivo creado con versiones anteriores de Blender, el nodo “MixRGB”, tanto en Shading como en Geometry Nodes, se sustituirá con el nuevo nodo Mezclar (“Mix”). Los archivos guardados con este nuevo nodo ya no serán compatibles con versiones anteriores de Blender, ya que las versiones anteriores no saben como tratar este nuevo nodo.

Otra novedad interesante para los usuarios de Grease Pencil es el addon Storypencil, que está presentado, en inglés, por uno de sus autores, Matías Mendiola, en el siguiente video del canal Blender Developers:

Pueden enterarse de más novedades de esta versión en la página del lanzamiento y/o ver la lista competa de novedades.

Pantalla de bienvenida

El arte de la pantalla de bienvenida es una escena del Project Heist, la próxima open movie del Blender Studio.

Está previsto que la próxima versión, la 3.5, se publique el 15 de marzo de 2023.

miércoles, 7 de diciembre de 2022

Los sudamericanos en el mundial de fútbol de Catar (octavos de final)

Ayer se terminó la fase de octavos de final del mundial de fútbol que se está disputando en Catar.

De los 2 representantes de la CONMEBOL que quedaban en competencia, el primero en participar en esta fase fue Argentina que el sábado pasado se enfrentó a Australia y le ganó 2-1. Lo hizo con justicia y controlando mayormente el partido. Aunque los australianos, con su gol a falta de 15' para finalizar, se fueron arriba y tuvieron un par de situaciones que pudieron haber sido el empate del juego.


(Foto de fifa.com)

El lunes fue el turno de Brasil que tuvo su partido contra Corea del Sur y que, a falta de 10' para terminar el primer tiempo, ya ganaba 4-0. A fin de cuentas fue 4-1, una goleada contundente y que, por lo que se ha visto hasta ahora en el torneo, y aunque todavía queda tela por cortar, hace vislumbrar una posible final entre Brasil y Francia.

Resumiendo, los 2 partidos de estos octavos de final con equipos sudamericanos fueron 2 triunfos frente a rivales provenientes de la eliminatoria asiática.

Hasta ahora en el Mundial llevamos 8 triunfos, 2 empates y 4 derrotas de las 4 selecciones de CONMEBOL.

En esos 14 partidos, las selecciones sudamericanas convirtieron 20 goles y recibieron 10. Los anotadores de esos 20 goles fueron:

NombreSelecciónGoles
Lionel MessiArgentina3
RicharlisonBrasil3
Enner ValenciaEcuador3
Julián ÁlvarezArgentina2
Giorgian De ArrascaetaUruguay2
Moisés CaicedoEcuador1
CasimiroBrasil1
Enzo FernándezArgentina1
Alexis Mac AllisterArgentina1
NeymarBrasil1
Lucas PaquetáBrasil1
Vinicius Jr.Brasil1

Luego de varias sorpresas en la fase de grupos, los octavos de final venían sin presentar sorpresas hasta ayer en que Marruecos eliminó a España en definición por penales.

Es difícil no cargar las tintas sobre el entrenador “streamer” de la selección española. Luis Enrique en medio de un mundial de fútbol, que debería ser el momento más importante en su profesión, se dedicó a hacer directos por internet, a dar consejos sobre qué es lo que hay que hacer en el mundo del fútbol y, supongo que con la intención de quitarle presión a sus jugadores, a decir que no le importaba el resultado contra Marruecos. Se ve que era cierto, nomás.

En el otro extremo del espectro está Mbappé. La joven estrella francesa ni siquiera se presenta a las conferencias de prensa (y asume las multas que ello implica) para no desenfocarse de su tarea.

Así que, terminados los octavos de final, las 8 selecciones que van a disputar los cuartos de final son: Países Bajos, Argentina, Francia, Inglaterra, Croacia, Brasil, Marruecos y Portugal.

O sea que la representación por confederación quedó así:

  • De las 8 de la UEFA que pasaron la fase de grupos (de un total original de 13), 5 pasaron a cuartos de final. Se sabía que al menos 2 iban a quedar afuera en esta fase porque se enfrentaban a otros equipos europeos. España aumentó esa cifra al quedar eliminado ante Marruecos.
  • Las 2 selecciones de la CONMEBOL que superaron la fase de grupos, también superaron los octavos de final.
  • De los 2 representantes de la CAF que llegaron a octavos, 1 avanzó a cuartos de final.
  • De la AFC no quedan representantes. Del total de 6 que empezaron el torneo, 3 superaron la primera fase, pero ninguno de ellos avanzó a cuartos de final (Japón fue el que estuvo más cerca, ya que quedó eliminado en definición por penales).
  • De la CONCACAF tampoco quedan representantes (Estados Unidos era el único, de un total de 4, que había avanzado de la fase de grupos).

Pasado mañana comienzan los cuartos de final: Argentina enfrenta a Países Bajos, que derrotó a Estados Unidos 3 -1 y Brasil enfrenta a Croacia, que eliminó a Japón en definición por penales, luego de haber empatado 1-1. Y, si como esperamos, ambos superan esa instancia, tendremos un clásico sudamericano en semifinales del campeonato del mundo.

El sábado se definen los otros dos semifinalistas con los partidos entre Francia e Inglaterra y Portugal contra Marruecos. De no haber sorpresas tendríamos a Francia y Portugal en la otra semifinal.

lunes, 5 de diciembre de 2022

Inkscape conservará la información CMYK al abrir PDFs

El viernes se publicó en el canal de YouTube de Martin Owens (doctormo) una nueva edición del habitual reporte semanal (en inglés) sobre el desarrollo de Inkscape.

En el video de esta semana el principal anuncio es que ahora tendremos en Inkscape la capacidad de abrir archivos PDF/CMYK y conservar su información de color.

Esta es mi traducción al español del tramo del video que va desde la marca 1:30 hasta la 3:48:

...Estamos hablando de PDFs/CMYK.
La mayoría de la gente cree que Inkscape no soporta el modelo de color CMYK y eso no es cierto. Inkscape soporta el modelo CMYK desde hace mucho tiempo (*), pero lo hace en el formato SVG. Y eso es lo que no es muy útil.

También es importante tener presente que el soporte de CMYK en Inkscape depende totalmente del uso de perfiles de color ICC. En Inkscape no existe CMYK sin perfiles de color ICC...

¿Por qué existe la queja de que el soporte de CMYK en Inkscape no es lo suficientemente bueno? Porque Inkscape no soporta el modelo de color CMYK en PDFs.

El problema es que es muy difícil obtener un SVG/CMYK y convertirlo en un PDF/CMYK que luego la imprenta en el mundo real pueda utilizar para producir con precisión el gráfico que se desea imprimir.

Desafortunadamente no tengo para darles esta semana la fantástica o imposible noticia de que Inkscape haya desarrollado una forma de reproducir fielmente sus SVGs en archivos PDF compatibles con CMYK ICC.

Normalmente al abrir un PDF/CMYK en Inkscape todos los colores son convertidos al modelo de color RGB y los perfiles de color ICC son descartados.

Pero he conseguido una forma de incorporar esos perfiles de color ICC en el SVG y de marcar todos los colores que están utilizando esos perfiles. 

Esto no es de gran ayuda si su objetivo es producir sus gráficos en Inkscape y luego exportarlos directamente para impresión. Pero sí es útil para conservar la información de CMYK si lo que necesita es abrir archivos PDF/CMYK o archivos de Abobe Illustrator...

Aquí está el video completo:


(*) En un video publicado el 14 de enero de 2023, Martin aclaró con respecto a este punto, que Inkscape soportaba el modelo de color CMYK desde hacía mucho tiempo en el formato SVG, pero SOLO para colores sólidos.

sábado, 3 de diciembre de 2022

Los sudamericanos en el mundial de fútbol de Catar (fecha 3)

Terminó la fase de grupos del mundial de fútbol que se está disputando en Catar.

De los 4 representantes de la CONMEBOL, 2 clasificaron a octavos de final. Brasil ya lo había hecho en la fecha anterior y Argentina lo hizo en esta última fecha de la fase de grupos. Ecuador y Uruguay fueron los que quedaron eliminados.

El martes pasado, por el grupo A, Ecuador enfrentó a Senegal con la necesidad de no perder para clasificar, pero perdió por 2 a 1. Las crónicas dan cuenta de un resultado justificado en relación al trámite del juego. Aún así, la participación de Ecuador ha sido buena. Quizás, un poco más de fortuna en el partido anterior hubiera ayudado a que la historia terminara diferente.
En definitiva, por este grupo, clasificaron Países Bajos y Senegal.


(Foto de fifa.com)

El miércoles fue el turno de Argentina que, por el grupo C, le ganó 2-0 a Polonia. Fue un triunfo claro y con autoridad y significó la clasificación a octavos de final, como primero de su grupo, de La Albiceleste. Pareciera que el cimbronazo que representó la derrota en el debut ya quedó atrás y ahora “empieza otro campeonato” para el que Argentina también presenta su candidatura.
El otro clasificado por este grupo fue Polonia que superó en las poisiciones a México por diferencia de 1 gol.

Ayer jugaron las restantes dos selecciones sudamericanas.

Primero fue Uruguay que, por el grupo H, enfrentó a Ghana con la obligación de ganar y lo hizo 2-0, luego de un muy buen primer tiempo y con una segunda parte en la que el control de la pelota estuvo más del lado africano.
Pero, el triunfo celeste no fue suficiente porque una furiosa contra de Corea del Sur en los minutos de descuento en su partido contra Portugal terminó con el gol del triunfo y la clasificación de los asiáticos que, a pesar de tener la misma cantidad de puntos y de diferencia de goles que Uruguay, lo superaron por tener más goles convertidos.
A fin de cuentas, los clasificados de este grupo fueron Portugal y Corea del Sur.

Y, por último, por el grupo G, Brasil enfrentó, ya clasificado, a Camerún. Presentó una alineación alternativa con Dani Alves de capitán y perdió, en la hora, 1-0. Igualmente, clasificó primero en su grupo. El segundo lugar fue para Suiza.

Resumiendo, en los 4 partidos de esta tercera y última fecha de la fase de grupos se dieron 2 triunfos y 2 derrotas para los equipos sudamericanos. Esta vez los rivales fueron 3 de África y 1 de Europa.

Hasta ahora en el Mundial llevamos 6 triunfos, 2 empates y 4 derrotas de las 4 selecciones de CONMEBOL.

En esos 12 partidos, las selecciones sudamericanas convirtieron 14 goles y recibieron 8. Los anotadores de esos 14 goles fueron:

NombreSelecciónGoles
Enner ValenciaEcuador3
Giorgian De ArrascaetaUruguay2
Lionel MessiArgentina2
RicharlisonBrasil2
Julián ÁlvarezArgentina1
Moisés CaicedoEcuador1
CasimiroBrasil1
Enzo FernándezArgentina1
Alexis Mac AllisterArgentina1

En definitiva, considerando las confederaciones a través de las cuales clasificaron, las 16 selecciones que avanzaron a los playoffs son:

  • 8 de la UEFA (de un total de 13) 61,5%
  • 2 de la CONMEBOL (de un total de 4) 50%.
  • 3 de la AFC (de un total de 6) 50% (Australia compitió en la eliminatoria asiática)
  • 2 de la CAF (de un total de 5) 40%
  • 1 de la CONCACAF (de un total de 4) 25%

Los equipos eliminados ya saben su posición final en el torneo: Ecuador 18º y Uruguay 20º.

Hoy mismo arrancan los octavos de final. En los partidos que incluyen a los sudamericanos se enfrentan a rivales provenientes de la clasificación asiática:

  • Hoy, sábado: Argentina - Australia (a las 16:00 hs de Uruguay).
  • El lunes, a la misma hora: Brasil - Corea del Sur.

martes, 29 de noviembre de 2022

Los sudamericanos en el mundial de fútbol de Catar (fecha 2)

Se completó al segunda fecha de la fase de grupos del mundial de fútbol que se está disputando en Catar.

El viernes pasado, por el grupo A, Ecuador enfrentó a Países Bajos y, aunque mereció un resultado mejor, empató 1-1.
Rápidamente, a los 5', luego de un mal pase atrás aprovechado por los europeos, Ecuador se encontraba perdiendo. Para peor, al igual que en el partido contra Catar en la inauguración del campeonato, le anularon un gol por un offside.
Pero antes de los 10' del segundo tiempo apareció el capitán, figura y goleador, Enner Valencia, y empató el partido. Ecuador jugó mejor y mereció volver a anotar (Gonzalo Plata reventó el travesaño), pero el partido terminó igualado. Y, para peor, Valencia se retiró lesionado.
Con ese resultado, el equipo del Pacífico pasará a octavos de final si hoy no pierde en su enfrentamiento con Senegal, en una verdadera final por la clasificación.

El sábado fue el turno de Argentina que, por el grupo C y, luego de su decepcionante debut, le ganó 2-0 a México. Fue una lucha táctica que resultó en un primer tiempo intenso, trabado y con solo un par de chances para cada lado (la primera, recién a los 34 minutos). Las urgencias albicelestes (o el retroceso azteca) hicieron que en la segunda parte la selección argentina se parara más adelante y a los 63', con un remate de afuera del área, Lionel Messi puso la apertura. Luego México echó el resto buscando el empate y Argentina intentó la contra hasta que a los 84' Enzo Fernández, con una gran definición, anotó el segundo.
Así que ahora, ganando su encuentro de mañana contra Polonia, que en esta fecha le ganó a Arabia Saudita, aseguraría su clasificación. En caso de empatar ese juego, la clasificación dependería del resultado entre México y Arabia Saudita.

Ayer jugaron las dos restantes selecciones sudamericanas.

Primero fue Brasil que, por el grupo G, sin Neymar (lesionado), enfrentó a Suiza y con un golazo de Casemiro, cerca del final del partido, ganó 1-0 y quedó clasificado para la siguiente fase del torneo. Para terminar su participación en la fase de grupos le queda el encuentro del próximo viernes contra Camerún.


(Foto de fifa.com)

Y, por último, por el grupo H, Uruguay enfrentó a Portugal y perdió 2-0.
Luego de una primera media hora de dominio absoluto de los europeos, el juego se emparejó y el primer tiempo terminó empatado sin goles. El segundo tiempo empezó igual hasta la apertura del marcador, antes de los 10'. Luego Portugal se tiró un poco atrás y pareció que Uruguay emparejaba el juego. Vinieron los cambios y algunas chances para empatar, pero, en el final y de penal llegó el segundo gol. Después de eso La Celeste no pudo hacer más nada y en un par de oportunidades casi llega el tercer gol lusitano.
Con este resultado Portugal aseguró su clasificación y Uruguay quedó muy cerca de la eliminación. Jugará frente a Ghana el viernes próximo obligado a ganar y, además, necesitado de que Corea del Sur no triunfe sobre Portugal.

Así que, resumiendo, en los 4 partidos de esta segunda fecha se dieron 2 triunfos, 1 empate y 1 derrota para los equipos sudamericanos. Esta vez los rivales fueron 3 de Europa y 1 de la Concacaf.

Hasta ahora en el Mundial llevamos 4 triunfos, 2 empates y 2 derrotas de las 4 selecciones de CONMEBOL.

En esos 8 partidos, las selecciones sudamericanas convirtieron 9 goles y recibieron 5. Los anotadores de esos 9 goles fueron:

NombreSelecciónGoles
Enner ValenciaEcuador3
Lionel MessiArgentina2
RicharlisonBrasil2
CasimiroBrasil1
Enzo FernándezArgentina1

Hoy mismo arranca la tercera y última fecha de la fase de grupos. Brasil es el único que ya aseguró su clasificación a la fase de playoffs del campeonato.

Los cruces de esta tercera fecha son definitorios y establecerán a los demás clasificados para los octavos de final que comenzarán el próximo sábado. Ecuador y Argentina, si ganan sus partidos, también clasificarán. Uruguay es el que la tiene más difícil, porque, además de ganar, necesita que Corea del Sur no lo haga (o sino, ganar por una mayor diferencia de goles que la que lograse la selección coreana).

¡Vamos por un pleno! ¡Vamos por 4 de 4!

domingo, 27 de noviembre de 2022

Rediseño de la estructura y apariencia básica de un sitio web (IV)

Previamente en esta serie:

  • Definí y apliqué más propiedades personalizadas CSS para interlineados, dimensiones y variaciones de los colores que ya había definido previamente.
  • Definí una “bajada” para el título y un párrafo más para el nombre del autor del artículo y su fecha de publicación (todo dentro de un hgroup).
  • Asigné estilos a los primeros dos párrafos del artículo para que el primero hiciera las veces de una introducción (le definí un recuadro con color de fondo, etc.) y que el segundo fuera, propiamente, el primer párrafo del artículo (le asigné una letra capitular).
  • Finalmente, en el área de la cabecera, agregué el nombre del sitio, el lema y el icono hamburguesa (que representa al menú cerrado), todo dispuesto dentro de una grilla CSS.

Comencé esta cuarta parte de la serie definiendo los estilos para elementos del artículo que, aunque no se utilicen continuamente, es necesario tenerlos predefinidos.

Empecé con las listas.

Al selector article p con la declaración de margin-bottom: var(--distancia); le agregué los selectores de las listas ordenadas, desordenadas y de definición. Y también el de tablas, blockquote y la clase .notas para ir adelantando trabajo. Pero, a continuación, sobreescribí ese valor para los casos de listas ordenadas y desordenadas hijas de un elemento con la clase .notas.

A los términos (dt) de las listas de definición (dl) les asigné tipo de letra negrita.
Además establecí en 1.25rem los paddings izquierdos de las listas ordenas y desordenadas y en 0.6rem el de los elementos que componen a los tres tipos de lista, como se ve en el siguiente código del archivo estilos.css, resaltado con rojo:

:root { ... }

* { ... }

body { ... }

header { ... }

.logo-principal { ... }

header hgroup h1 { ... }

header hgroup h1+p { ... }

header hgroup { ... }

header nav { ... }

article { ... }

h1, h2, h3 { ... }

h1 { ... }

h2 { ... }

h3 { ... }

article hgroup h1+p { ... }

article hgroup p:nth-child(3), article hgroup p:nth-child(3) a, article hgroup p:nth-child(3) time { ... }

article hgroup p:nth-child(3) a { ... }

article hgroup p:nth-child(3) { ... }

article .intro { ... }

article .intro::first-line { ... }

figcaption, table caption {
  font-family: var(--tipografia-con-serifa), serif;
  font-size: var(--figcaption-size);
  font-style: italic;
  margin-top: calc(var(--distancia) * 0.5);
  margin-bottom: var(--distancia);
  margin-left: var(--distancia);
}

article p.primer-parrafo::first-letter { ... }

article p, ol, ul, dl, table, blockquote, .notas {
 margin-bottom: var(--distancia);
}

.notas > ol, .notas > ul {
margin-bottom: 0;    
}

dl dt {
  font-weight: bold;
}

ol, ul {
  padding-left: 1.25rem;
}

ol li, ul li, dl dd {
  padding-left: 0.6rem;
}

table {
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid var(--color-principal);
}

th, td {
  padding: 1rem;
}

thead th, tfoot th, tfoot td {
  background: var(--color-principal);
  color: var(--color-de-fondo);
  border: 1px solid var(--color-secundario);
}

thead th, tfoot th {
  text-align: left;
}

tbody tr:nth-child(odd) {
  background-color: var(--color-secundario);
}

tbody tr:nth-child(even) {
  background-color: var(--color-secundario-claro);
}

table caption {
  caption-side: bottom;
  text-align: left;
  border-bottom: 1px solid var(--color-principal);
}

footer a, footer a:visited { ... }

footer { ... }

Luego (y como se muestra coloreado en azul en el código precedente) seguí con las tablas:

Al selector figcaption con el que definí (en la parte anterior) el formateo de las leyendas de las imágenes, le agregué el selector table caption.

Además, definí:

  • que la tabla se centrara en la horizontal,
  • el borde de la tabla, 
  • el color de fondo y de los textos de la cabecera (y del pie),
  • un color de fondo para las filas pares y otro para las impares,
  • una regla al selector table caption para que sobrescriba la alineación y dos reglas más para ubicar la leyenda de la tabla del lado de abajo de la tabla y agregarle una línea por debajo a la leyenda.

En tercer lugar vi de crear los estilos para la representación visual de teclas y combinaciones de teclas (múy útiles en los artículos de tutoriales).

Haciendo la búsqueda de información para este rediseño es que me enteré de la existencia de las etiquetas kbd que se pueden utilizar individualmente o anidadas en otras etiquetas kbd o samp.

Para probarlo, en el archivo HTML agregué los siguientes párrafos, a continuación del Subtítulo nivel 3:

[ ... ]

<p>Un consejo infaltable cuando de editar achivos digitales se trate: <strong>¡guarde seguido!</strong></p>

<p>Para ello puede ir a <kbd
    ><kbd><samp>Archivo</samp></kbd>&gt;<kbd><samp>Guardar</samp></kbd></kbd> o pulsar las teclas <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.</p>
<p>Si cierra el archivo sin haberlo guardado se le presentará una advertencia con un texto similar a este:</p>

<blockquote>
   <samp><kbd>Si cierra sin guardar se perderán los cambios realizados desde la última vez que guardó.</kbd></samp>
</blockquote>

<p>Y deberá pulsar sobre uno de los tres botones al pie con la advertencia:</p>
<ul>
   <li><kbd><samp>Cerrar sin guardar</samp></kbd></li>
   <li><kbd><samp>Cancelar</samp></kbd></li>
    <li><kbd><samp>Guardar</samp></kbd></li>
</ul>

[ ... ]

Y, en la hoja de estilos, introduje estas reglas:

[ ... ]

table caption { ... }

kbd, kbd > samp {
  font-family: monospace;
  font-size: var(--figcaption-size);
}

kbd > kbd:not(:has(>samp)) {
  border-radius: 0.3rem;
  padding: 0.2rem;
  border: 1px solid var(--color-texto-base);
  margin: 0.2rem;
}

kbd > samp {
  border-radius: 0.3rem;
  padding: 0.2rem 0.5rem;
  color: var(--color-de-fondo);
  background-color: var(--color-principal-claro);
}

kbd > :is(kbd) :is(samp) {
  color: var(--color-texto-base);
  font-style: italic;
  padding: 0;
  background: none;
  margin: 0.4rem;
}

blockquote:has(>samp) {
  background: var(--color-principal-oscuro);
  color: var(--color-de-fondo);
  padding: 0.5rem;
  font-weight: bold;
}

blockquote {
  margin-left: var(--distancia);

  width: 90%;

}

footer a, footer a:visited { ... }

[ ... ]

Al momento de escribir esto y, según Can I use... la pseudoclase :has() tiene un uso global de casi 83%. Pero, de forma predefinida aún no es reconocida por Firefox. Por lo tanto, esa parte de la página, se veía diferente en, por ejemplo, Chromium (a la izquierda) y en Firefox (a la derecha):

Igualmente, en la configuración de Firefox se puede activar una opción para que sí la reconozca, pero funciona parcialmente y el resultado no es igual al de los demás navegadores. Espero que próximas versiones de Firefox sí reconozcan esa pseudoclase, sino buscaré alguna forma alernativa de lograr el mismo diseño para Firefox

Luego, estilicé las notas al pie.

Normalmente, las notas al pie consistirían en una lista ordenada dentro de un recuadro al final del artículo. Así que copié varias de las reglas de estilo que tendía definidas para el párrafo de introducción del artículo y las agregué en el archivo estilos.css como se ve a continuación:

[ ... ]

blockquote { ... }

article .notas {
   padding: var(--distancia);
   background-color: var(--color-secundario-claro);
}

article .notas ol li {
   font-family: var(--tipografia-con-serifa), serif;
   font-size: var(--figcaption-size);
   font-style: italic;
}

sup {
  font-size: 65%; 
  font-weight: bold;  
}

footer a, footer a:visited { ... }

[ ... ]

Para terminar esta parte, me enfoqué en estilizar las citas. Y por citas me refiero a las de párrafo (etiqueta blockquote), a las inline (la etiqueta q) y a la que referencia al autor o fuente de tales citas (cite).

En la hoja de estilos ya tenía algunas reglas que afectaban al selector blockquote y que le definían un ancho (de 90%) y un margen a la izquierda y abajo.

En la declaración de estilo agregué la regla resaltada en azul en el próximo código para que el texto dentro de las etiquetas q, cite y blockquote se mostraran en itálica. Además, para el selector blockquote agregué las definiciones de estilos que se ven destacadas en rojo:

[ ... ]

blockquote {
  margin-left: var(--distancia);
  width: 90%;
  font-family: var(--tipografia-con-serifa), serif;
  font-size: var(--h3-size);
  background: linear-gradient(var(--color-secundario-claro),var(--color-de-fondo));
  border-radius: var(--distancia);
  padding: 1em 2em 1em 3em;
  text-align: right;
  position: relative;

}

blockquote cite {
  font-family: var(--tipografia-sin-serifa), sans-serif;
  display: block;
  font-size: var(--figcaption-size);
  font-style: normal;
}

blockquote::before {
  content:'“';
  font-size: 8em;
  color: var(--color-de-fondo);
  font-weight: bold;
  font-style: normal;
  position: absolute;
  top: calc(-0.35 * var(--distancia));
  left: 0;
}


q, cite, blockquote {
  font-style:italic;
}


q::before, q::after {
  content: '';
}


article .notas { ... }

[ ... ]

La etiqueta q, de forma predefinida, le agrega al texto que contiene unas comillas angulares de apertura y de cierre. Para evitar comillas duplicadas, decidí quitárselas al selector q (como se ve en el código precedente coloreado en verde), ya que, normalmente, cuando incluyo el texto de una cita ya lo hago con sus correspondientes comillas.

Para visualizar el efecto de los estilos agregados hasta ahora sobre las tablas, las citas y las notas al pie hice lo siguiente en el código HTML:

  • dividí en dos el párrafo bajo el “Subtítulo nivel 2” y entre los nuevos dos párrafos agregué el código resaltado con rojo en el próximo código.
  • agregué el código marcado en azul para crear unos superíndices con vínculos a notas al pie. 
  • antes de la etiqueta de cierre del artículo coloqué un recuadro con las notas al pie (el código marcado con verde).
  • agregué, antes del “Subtítulo nivel 3”, el código de una tabla (coloreado en anaranjado)
[ ... ]

<h2>Subtítulo nivel 2</h2>
<p>Sit amet consectetur adipiscing elit ut aliquam purus sit<a id="nota1" href="#nota1pie"><sup>1</sup></a>. Libero enim sed faucibus turpis in eu mi. Est ullamcorper eget nulla facilisi etiam dignissim. Velit scelerisque in dictum non consectetur a erat nam at. Diam sit amet nisl suscipit adipiscing bibendum est.</p>
<blockquote>
  “Mauris vitae ultricies leo integer. Vitae nunc sed velit dignissim sodales”.
  <cite>Nisi Porta</cite>
</blockquote>

<p>Tempor nec feugiat nisl pretium fusce id velit ut tortor. Ipsum dolor sit amet consectetur. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Mattis ullamcorper<a id="nota2" href="#nota2pie"><sup>2</sup></a> velit sed ullamcorper morbi tincidunt ornare. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt augue interdum velit euismod.</p>
<table>
  <caption>Población de las ciudades capitales de los Estados miembros del Mercosur.</caption>
  <colgroup span="3"></colgroup>
  <thead>
    <tr><th>País</th><th>Capital</th><th>Población</th></tr>
  </thead>
  <tbody>
    <tr><td>Argentina</td><td>Buenos Aires</td><td>3:075.646</td></tr>
    <tr><td>Brasil</td><td>Brasilia</td><td>3:015.268</td></tr>
    <tr><td>Paraguay</td><td>Asunción</td><td>520.917</td></tr>
    <tr><td>Uruguay</td><td>Montevideo</td><td>1:319.108</td></tr>
  </tbody>
</table>

<h3>Subtítulo nivel 3</h3>
<p>Un consejo infaltable cuando de editar achivos digitales se trate: <strong>¡guarde seguido!</strong></p>
<p>Para ello puede ir a <kbd><kbd><samp>Archivo</samp></kbd>&gt;<kbd><samp>Guardar</samp></kbd></kbd> o pulsar las teclas <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd>.</p>
<p>Si cierra el archivo sin haberlo guardado se le presentará una advertencia con un texto similar a este:</p>
<blockquote>
  <samp><kbd>Si cierra sin guardar se perderán los cambios realizados desde la última vez que guardó.</kbd></samp>
</blockquote>
<p>Y deberá pulsar sobre uno de los tres botones al pie con la advertencia:</p>
<ul>
  <li><kbd><samp>Cerrar sin guardar</samp></kbd></li>
  <li><kbd><samp>Cancelar</samp></kbd></li>
  <li><kbd><samp>Guardar</samp></kbd></li>
</ul>
<p>A scelerisque purus semper eget duis at tellus at. Facilisi morbi tempus iaculis urna id volutpat. Faucibus in ornare quam viverra orci sagittis. Tempor commodo ullamcorper a lacus vestibulum sed. Sit amet facilisis magna etiam tempor orci eu lobortis. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Augue eget arcu dictum varius. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.</p>
<div class="notas">
  <h3>Notas</h3>
  <ol>
    <li id="nota1pie"><a href="#nota1" aria-label="Volver al contenido al que refiere la nota 1.">&uarr;</a> Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Tincidunt augue interdum velit euismod.</li>
    <li id="nota2pie"><a href="#nota2" aria-label="Volver al contenido al que refiere la nota 2.">&uarr;</a> Faucibus in ornare quam viverra orci sagittis.</li>
 </ol>
</div>

</article>

[ ... ]

Y el resultado fue el siguiente:

Como se ve en la captura de pantalla sobre estas líneas, los agregados en la hoja de estilo también afectan al blockquote que tiene como hijo una etiqueta samp (la que definí para presentar mensajes del sistema y que en este caso muestra el siguiente texto: Si cierra sin guardar se perderán los cambios realizados desde la última vez que guardó).

Entonces, para que volviera a tener la misma apariencia que le había definido anteriormente, moví todo el bloque de reglas de estilo del selector blockquote:has(>samp) y lo coloqué luego del último que afectaba a los blockquote (q, cite, blockquote {... }) y, además, le agregué las reglas que se muestran en rojo a continuación:

[ ... ]

q, cite, blockquote { ... }

blockquote:has(>samp) {
  background: var(--color-principal-oscuro);
  color: var(--color-de-fondo);
  padding: 0.5rem;
  padding-left: 1em;
  font-weight: bold;
  border-radius: 0;
  text-align: left;
  font-style: normal;

 }

blockquote:has(>samp)::before {
  content:'';
}


q::before, q::after { ... }

[ ... ]

Vínculos

Luego, para los vínculos dentro del artículo decidí que no quería que se mostraran con el subrayado predefinido, pero sí con un border-bottom y les asigné un color de fondo según el estado del vínculo:

[ ... ]

q::before, q::after { ... }

a {

  text-decoration: none;
}

article a:link {
  color: var(--color-principal);
  border-bottom: 1px solid var(--color-principal);
}

article a:visited {
  color: var(--color-principal-claro);
  border-bottom: var(--color-principal-claro);
}

article a:hover {
  color: var(--color-de-fondo);
  background-color: var(--color-secundario);
}

article a:active {
  color: var(--color-principal-oscuro);
  border-bottom: 1px solid var(--color-secundario-oscuro);
  background-color: var(--color-secundario-claro);
  font-style: italic;
}

article .notas { ... }

[ ... ]

El orden en el que se escriben los estados del vínculo sí importa para que funcionen como se desea. El orden debe ser este:

:link → :visited → :hover → :active. 

(Más informaciónen https://developer.mozilla.org/es/docs/Web/CSS/:link)


Bueno, ya se hizo bastante larga esta entrada, así que lo que me había planteado de revisar y corregir el código html (con respecto al que sugiere html5boilerplate) y de comentar y separar en archivos más pequeños la hoja de estilo (que ya va superando las 300 líneas), quedará para la próxima entrega.