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:

Nombre	Selección	Goles
Enner Valencia	Ecuador	3
Lionel Messi	Argentina	2
Richarlison	Brasil	2
Casimiro	Brasil	1
Enzo Fernández	Argentina	1

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!

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.

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

Ayer se completó al primera fecha de la fase de grupos del mundial de fútbol que se está disputando en Catar. Los resultados de las 4 selecciones sudamericanas fueron variados. Hubieron confirmaciones y una gran sorpresa.

La primera en jugar fue Ecuador que el domingo pasado en el partido inaugural del certamen y del grupo A enfrentó a la selección local y le ganó por 2-0.
El mejor jugador del partido fue el capitán ecuatoriano, Enner Valencia, que anotó los dos goles (uno de penal y el otro de cabeza). Los sudamericanos fueron muy superiores a su rival, especialmente en el primer tiempo. Para el segundo tiempo parecería que la selección catarí superó el pánico escénico de su debut absoluto en una fase final de Copa del Mundo y emparejó el juego, pero nunca puso en duda el dominio de Ecuador.

(Foto de fifa.com)

La segunda selección en debutar fue Argentina que, por el grupo C, enfrentó el martes a Arabia Saudita. Ante el lógico favoritismo de la Albiceleste, la selección asiática logró un triunfo histórico y heroico y presentó su candidatura para pasar la fase de grupos. Empezó jugando intensamente, apretada en pocos metros y con la línea defensiva muy adelantada, pero su plan defensivo pareció verse desbaratado por un penal antes de los 10 minutos de juego (¡qué sensibles que están los arbitrajes!) convertido en gol por el capitán argentino, Lionel Messi.
El comienzo del segundo tiempo fue impactante y en menos de 10 minutos, con dos golazos, Arabia Saudita revirtió el resultado y luego controló el partido. Argentina nunca le encontró la vuelta y en los larguísimos minutos de descuento trató de echar el resto pero la defensa asiática siguió siendo impecable.

Finalmente, ayer fue el estreno de las otras dos selecciones.
A las 10:00 de la mañana (hora de Uruguay) La Celeste, por el grupo H, empató sin goles con Corea del Sur.
A mí casi se me sale el corazón por la boca pero, objetivamente, el partido debe haber sido de los más aburridos de esta primera fecha. En general hubieron pocas jugadas de riesgo y los goleros no tuvieron atajadas. Corea del Sur controló mayormente la posesión en el primer tiempo y retrocedió las líneas en el segundo. Así y todo, Uruguay tuvo los acercamientos más peligrosos (dos tiros en los palos: un cabezazo de Diego Godín y un remate de afuera del área de Federico Valverde).

Más tarde, el siempre favorito Brasil, tenía un debut que parecía complicado contra Serbia, por el grupo G. Este partido no lo pude ver (en algún momento hay que trabajar) pero, por lo que se comenta, el triunfo de la Canarinha por 2-0, con dos goles de Richarlison, fue cómodo y justo.

Así que, resumiendo, se trató de 4 partidos, con 2 triunfos, 1 empate y 1 derrota para los equipos sudamericanos, que enfrentaron a 3 equipos de Asia y a 1 de Europa. En esos partidos, los equipos de este lado del mundo convirtieron 5 goles y recibieron 2. Los anotadores de esos 5 goles fueron:

Nombre	Selección	Goles
Richarlison	Brasil	2
Enner Valencia	Ecuador	2
Lionel Messi	Argentina	1

En la segunda fecha, que arranca hoy, los partidos presentarán los siguientes cruces:

• Ecuador, quizás en su partido más difícil del grupo, enfrenta a Países Bajos, que le ganó a Senegal en esta primera fecha.
  
• Argentina tendrá que tratar de recuperarse del impacto recibido en su primer partido cuando mañana enfrente a la selección de México. Los aztecas en su debut empataron con Polonia, lo que no deja de ser una buena noticia para las chances de clasificar de Argentina. Y, aunque Argentina es favorita, hay un poco de morbo en este juego: ¿el “Tata” Martino le dará un empujón a Argentina hacia la eliminación en el último mundial de Messi? Esperemos que no.
  
• Brasil va contra Suiza, que en esta primera fecha le ganó a Camerún, por otro triunfo que quizás ya lo deje clasificado para los octavos de final.
  
• Uruguay, para tener chances de pasar su grupo, llega obligado a no perder contra Portugal, líder del grupo y que viene de derrotar a Ghana.
  

¡Finalmente!: adiós a las selecciones flotantes en GIMP (v 2.99.14)

(El artículo original y en inglés, fue publicado el 18 de noviembre de 2022)

GIMP 3.0 va a ser una versión espectacular. La versión de desarrollo sigue trayendo esperadísimas novedades. Esta vez se trata de la versión 2.99.14 que, como cuenta Alexandre Prokudine en Libre Arts, se deshace de las incómodas “selecciones flotantes” luego de muchísimos años de espera.
Además, se le incorpora la opción de “delineado” (contorno o trazo) a la herramienta de texto y algunas otras novedades.
Aquí va mi traducción al español de ese interesante artículo.

No podemos pasar por alto lanzamientos de este tipo, ya que son infrecuentes y, por lo tanto, aún más valiosos. El equipo de GIMP ha eliminado de un plumazo las selecciones flotantes y, además, ha incorporado la opción de trazos/contornos para los textos.
Pero llegar hasta aquí no ha sido fácil.

Adiós a las selecciones flotantes

La eliminación de las selecciones flotantes ha estado en la hoja de ruta del equipo, al menos desde que existe esa hoja de ruta. Algunas de las solicitudes de cambio de comportamiento de las selecciones flotantes se remontan a 2008. Era un concepto bastante peculiar, difícil de entender para los usuarios nuevos y algo molesto, incluso, para los experimentados.

Era posible reasignar el atajo de teclado Ctrl+V para pegar como una nueva capa, pero entonces se perdía la capacidad de pegar rutas Bézier, etc. No era una solución completa.

Si ha estado siguiendo ultimamente el desarrollo de GIMP, ya tendrá noticias de alguien conocido como Cmyk.Student. Este estudiante del Google Summer of Code que trabaja con el equipo de GIMP es el encargado de arreglar este lío.

Así que este el nuevo comportamiento es que Ctrl+V siempre pega los mapas de bits del portapapeles como una capa nueva.

And since we are talking about @GIMP_Official, bitmaps are no longer pasted as godawful floating selections, they are just new layers now. See nothing fancy is happening in this video? That's the point! :) pic.twitter.com/4gC856Z8JP

— Libre Arts (@lgworld) November 9, 2022

Sólo hay tres situaciones en las que verá algo flotante:

1. Cuando pegue en una máscara de capa, GIMP creará una Máscara flotante. Así se verá en el cuadro de diálogo empotrable de Capas (Ctrl+L):

2. Cuando copia o corta y luego pega sobre el lienzo con el modificador Alt, GIMP creará una capa flotante (por lo menos eso es lo que dicen las notas del lanzamiento pero, por más vueltas que le he dado, no encontré la manera de hacerlo funcionar).
3. Cuando, por cualquier extraña razón, se crea explícitamente una capa flotante (Seleccionar > Flotante). Esto funciona al estilo del funcionamiento que tenía el programa hasta ahora, con la diferencia que ahora lo llama “Capa flotante” en lugar de “Selección flotante”.

En definitiva, un gran cambio para mejor, que debería haberse producido hace tiempo. ¡Que sigan llegando!

Pegar como capa individual

Ya que estamos hablando de capas, aquí hay otra cosa útil. Ahora que GIMP soporta la selección de múltiples capas (y de múltiples elementos en general), llegado el caso de seleccionar y copiar varias capas, ahora es posible pegarlas fusionadas en una sola capa en otro proyecto.

Por supuesto que le puede asignar teclas de acceso rápido.

Texto delineado

Esta función probablemente deje obsoletos cientos de tutoriales de YouTube sobre cómo añadir un contorno de color a una capa de texto. Los trazos/contornos de texto son ahora un ajuste propio de la capa de texto.

Y como GIMP tiene este confuso sistema de configuración de las propiedades del texto, no lo encontrará en la barra flotante de texto en el lienzo, sino en la cuadro de diálogo acoplable de Opciones de herramienta, como una opción en la lista desplegable de Estilo. Allí podrá elegir entre Rellenado (sólo el relleno), Delineado (sólo el contorno), y Delineado y rellenado (ambos).

La implementación no está exenta de problemas. El más notorio es que, cuando empiece a aumentar el ancho del contorno del texto, verá que solo crece hacia adentro. Así que es funcional sólo hasta cierto punto:

Algo de esto se puede mitigar usando el estilo de unión Redondear en lugar del estilo predefinido. Pero la verdadera solución, por supuesto, sería proporcionar la posibilidad de elegir si el trazo/contorno debe ser dibujado hacia dentro, hacia fuera o en ambos sentidos (con respecto al borde de la silueta del caracter).

Lo que sorprende de todo esto es que esta característica se solicitó hace 19 años y se creó un parche funcional hace 11 años. Pero, de nuevo, nadie tuvo el tiempo o la motivación para ajustarlo y fusionarlo. Hasta hace unos meses.

Aquí es donde hay que darle las gracias a dos personas. El ya mencionado Cmyk.Student, es la persona que finalmente ajustó el parche y lo hizo parte de una futura versión. Y el héroe no reconocido del desarrollo de GIMP que creó el parche original es Massimo Valentini, uno de los más prolíficos correctores de errores en el proyecto.

Renovada Herramienta de Alineación

La Herramienta de Alineación ahora se beneficia del soporte de selección múltiple de capas. Así que se puede elegir varias capas como objetos en el cuadro de diálogo de Capas y alinearlas con respecto a otro objeto que se seleccione en el lienzo.

El otro cambio importante es la introducción del widget de punto de anclaje. Puede elegir con respecto a qué punto relativo de los objetos a alinear se hará la operación. Se trata de un widget de 9 puntos que hace referencia a las esquinas, los puntos medio de los lados y el centro.

Además, antes era posible trabajar con las guías, pero no se podía, por ejemplo, distribuirlas uniformemente (o cualquier otro objeto). Ahora sí se puede:

La actualización de Alinear/Distribuir fue introducida por Jehan Pages.

Nuevo tema de la interfaz de usuario y selección del tamaño de los iconos

La nueva versión viene con un tema gris basado en un color de fondo gris medio de 18,42% de luminancia. También permite anular el tamaño de los iconos establecido por un tema y hacer su propia elección.

El preajuste “Pequeño” que se ve en la captura sobre estas líneas es el que elegí porque en la pantalla de mi portátil (2560*1440px) se ve proporcional al resto de la UI. El mediano coincide con el predeterminado del tema, el grande ya es ligeramente inquietante, y el enorme es, bueno, enorme:

No tiene tanta granularidad como Inkscape, pero es mucho mejor que no tener ninguna opción.

Más trabajo en CMYK

Por último, el plugin para importar y exportar archivos PSD ahora admite la exportación de archivos CMYK(A) con una precisión de 8/16 bits por canal. Al hacerlo, se utiliza el perfil CMYK de la prueba de color para etiquetar la imagen.

Otra nueva característica es la exportación automática de rutas a archivos PSD.

En resumen

Aunque el equipo está centrado en conseguir que GIMP 3.0 esté en condiciones de ser lanzado, todavía se las arreglan para hacerle cambios y agregados muy interesantes. Sé que se está tardado mucho en completar el lanzamiento, pero, para mí y por lo que se ve, vale mucho la pena.

Hay más información disponible en las notas oficiales del lanzamiento. Y puede descargar la última versión de desarrollo de GIMP aquí.

Extraer el texto de un archivo de Scribus

En mi trabajo me pidieron que exportara a archivos de Microsoft Word todo el texto contenido dentro de unos archivos de Scribus que yo había diseñado, porque querían enviar los archivos de texto resultantes a traducir a otros idiomas para luego hacer nuevas versiones de esos archivos de Scribus con los textos traducidos.

Por lo visto, Scribus no tiene una opción nativa para exportar a Microsoft Word.

Lo primero que probé fue abrir desde Libre Office Draw los PDFs generados desde Scribus y el resultado, visualmente, fue muy bueno, pero generaba un marco de texto por cada línea de texto. Lo que no lo hacía apto para la tarea del traductor.

Entonces, hasta donde yo sé, la opción que me quedaba era seleccionar los textos en el archivo de Scribus, copiarlos y pegarlos en un documento de Libre Office Writer, para luego guardarlos con el formato de Microsoft Word.
Pero el diseño tenía varias cajas y yo prefería obtener todos los textos de un solo paso.

Hice una búsqueda y di con este script: https://wiki.scribus.net/canvas/Extracting_All_Text_from_a_Document.

Lo probé con ciertas dudas, porque es un script de 2008.

En Scribus 1.5.8 (la versión más reciente) no funcionó. Pero tampoco me ha funcionado el script Scribus Generator, que utilizo bastante y cuya última actualización es de febrero de este año.

Supuse que el tema estaría vinculado con alguna actualización de Python en Scribus. Así que descargué la versión anterior de Scribus (la 1.5.7), pero daba el mismo error. Lo mismo con la versión 1.5.6.
Con la versión 1.5.5 sí funcionó.

Luego, leyendo las notas de lanzamiento de la versión 1.5.6 se ve, en el apartado Scripter, que dice algo así: ...Scribus ahora utiliza Python 3 de forma predefinida. Como consecuencia, los scripts existentes probablemente necesitarán ser modificados para que se ejecuten correctamente en Scribus 1.5.6... 

Quizás sea muy sencillo modificar el script pero, como mis conocimientos sobre Python son nulos, se me hace una tarea imposible. Así que, de momento, usaré la versión 1.5.5 cuando se trate de correr estos scripts.

Entonces, ejecuté el script desde Scribus 1.5.5 y obtuve un archivo en formato TXT  con el contenido de todas las cajas de texto del archivo original.
Finalmente, tuve que emprolijar un poco el archivo de texto, pero fue, notoriamente, menos trabajo que tener que ir copiando y pegando los contenidos de las cajas de texto.

Especificidad CSS

En las hojas de estilo en cascada (CSS) la especificidad hace referencia a cómo se calcula la prevalencia cuando algunas reglas de estilo entran en conflicto.

De las primeras cosas que aprendemos cuando empezamos a trabajar con CSS es que, en caso de declaraciones conflictivas, la posterior sobreescribe a la anterior.
O sea que, en el siguiente ejemplo:

h1 {
  color:red;
}

h1 {
  color:blue;
}


El color del texto dentro de la etiqueta h1 se mostrará de color azul, porque esa segunda declaración sobrescribe a la primera

Selectores de clase

Pero, ¿qué pasa en este otro ejemplo?:

.intro {
  color:red;
}

h1 {
  color:blue;
}


Sí el código HTML fuera este:

<h1 class="intro">Bienvenidos a un nuevo curso</h1>

El texto dentro de la etiqueta h1 se mostrará de color rojo, aunque la regla esté antes de la que lo define a los h1 como azul, porque los selectores de clase (en este caso .intro) tienen prevalencia sobre los selectores de tipo.

Selectores de ID 

Y, en este otro caso:

#comentarios {
  color:green;
}

.intro {
  color:red;
}

h1 {
  color:blue;
}


Sí el código HTML fuera este:

<h1 id="comentarios" class="intro">Las opiniones de nuestros alumnos</h1>

El texto dentro de la etiqueta h1 se mostrará de color verde, aunque la regla esté antes de la que define a los h1 como azul o de la clase .intro que los define como rojo, porque los selectores de ID (en este caso #comentarios) tienen predominancia sobre los selectores de clase.

Estilos en línea

Con la premisa de separar el contenido de la presentación no deberíamos utilizar estilos en línea, pero, llegado el caso, en este código HTML (vinculado a las mismas reglas de estilo del apartado anterior):

<h1 style="color:cyan;" id="comentarios" class="intro">Las opiniones de nuestros alumnos</h1>

...el texto dentro de la etiqueta h1 se mostrará de color cian porque los estilos en línea (los declarados dentro del código HTML con el atributo style en uno de sus elementos) sobreescriben a los demás.

---

Desde los más específicos a los más genéricos, este es el orden de consideración al momento de resolver estilos conflictivos (los que están más arriba en esta lista, sobreescriben a los que están más abajo):

1. Estilos en línea
2. Selectores de ID (#)
3. Selectores de clases (.)
4. Selectores de tipo (h1, p, etc.)

Aunque también existe la posibilidad de agregar la excepción !important en una regla de estilo para darle prioridad sobre cualquier otra. Pero se considerada una mala práctica porque rompe la cascada de las hojas de estilo.
O sea, solo se debería considerar el uso de !important cuando no haya otra forma de conseguir el resultado que se busca.

Por otra parte, estas reglas para calcular la especificidad ignoran completamente al selector universal (*), a los combinadores (+, >, ~) y a la pseudo-clase de negación (:not()).

Para información más detallada sobre este tema fundamental a la hora de escribir hojas de estilo, pueden visitar la mdn web docs o, si entienden inglés, el siguiente video de WebDevSimplified también es muy claro al respecto:

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

Previamente en esta serie:

• Descargué y vinculé a la página el Andy Bell reset CSS, un archivo CSS para sobreescribir los estilos predefinidos de los navegadores.
• Definí y apliqué propiedades personalizadas CSS para los colores y las tipografías a utilizar en la página.
• Agregué algunos contenidos a la cabecera (una imagen SVG que hacía las veces de logo del sitio) y al pie de la página (un icono de HTML5 que, además, vinculé con el validador de código html de la W3C).

Decidí empezar esta tercera parte con la creación de los estilos para algunos elementos de los artículos del sitio. Pero, antes de trabajar sobre eso le definí un padding (para asignarle una especie de “margen interior”) al elemento <article> de 1em a los costados y de 2em arriba (como se ve en la regla destacada en rojo en la próxima muestra del código del archivo estilos.css).

Luego sí, creé 8 nuevas propiedades personalizadas CSS en el :root (resaltadas en azul a continuación). Siete de ellas estaban relacionadas con dimensiones e interlineados de los textos para tener la tarea simplificada cuando llegara el momento de redefinir los tamaños para pantallas más grandes. La octava propiedad que definí era más genérica y establecía una unidad de “distancia”.

También definí otras propiedades personalizadas para agregar variaciones tonales a los colores principal y secundario. Como se ve en el próximo código, resaltado con magenta, definí una versión “clara” y una “oscura” para esos dos colores que ya tenía definidos. Inclusive, cambié el color que había definido para para el texto (en la variable --color-texto-base) con los mismos valores que definí para la versión oscura del color principal del sitio.

Luego, como quería que el tamaño de letra (que llamé --body-size) y su interlineado (que llamé --body-line-height) fueran también los predefinidos de todos los textos de la página, los asigné en el selector *, que ya tenía asignado (desde la parte anterior de esta serie) otra propiedad personalizada para definir la familia tipográfica básica del sitio.

Entonces, como se ve destacado en verde, agregué las propiedades personalizadas recién definidas (y algunas más) no sólo al selector *, sino también a h1, h2, h3, figcaption y a las etiquetas p, dentro de article.

:root {
 --color-principal: #242c51;
 --color-principal-claro: #6f7aa3;
 --color-principal-oscuro: #0d1229;
 --color-secundario: #f3603b;
 --color-secundario-claro: #ffab96;
 --color-secundario-oscuro: #eb3f0c;
 --color-texto-base: #0d1229;
 --color-de-fondo: #fff0ed;
 --tipografia-con-serifa: 'Volkhov';
 --tipografia-sin-serifa: 'Sarabun';
 --body-size: 1.125rem;
 --body-line-height: 1.618;
 --heading-line-height: 1.35;
 --figcaption-size: 0.9rem;
 --h1-size: 2.95rem;
 --h2-size: 1.82rem;
 --h3-size: 1.48rem;
 --distancia: 1em;
}

* {
 font-family: var(--tipografia-sin-serifa), sans-serif;
 font-size: var(--body-size);
 line-height: var(--body-line-height);
}

body { ... }

header { ... }

header img { ... }

article {
 padding: 2em 1em 0;
}

h1, h2, h3 {
 color: var(--color-principal);
 font-family: var(--tipografia-con-serifa), sans-serif;
 font-weight: bold;
 margin-bottom: calc(var(--distancia) * 0.5);
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--heading-line-height);
}

h2 {
 font-size: var(--h2-size);
}

h3 {
 font-size: var(--h3-size);
}

figcaption {
  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 {
 margin-bottom: var(--distancia);
}

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

footer { ... }

Como se ve en el código precedente, el valor que guardé en la propiedad personalizada --distancia no me resultaba para el valor de margin-top que quería para el selector figcaption y de margin-bottom que quería para los elementos h1, h2 y h3, entonces, para no crear nuevas propiedades personalizadas, utilicé la función calc y, multiplicando por 0,5 obtuve la mitad del valor “distancia”.

Para probar cómo quedaban los los párrafos y los títulos h2 y h3, agregué algunos en el código HTML y, en un navegador a 450 px de ancho, la página se veía así:

Definir algunos otros elementos del artículo

Para darle formato a algunas partes del artículo tomé como referencia esta imagen que especifica las partes de una noticia (tomada de: Enciclopedia Humanidades):

Entonces en el código HTML:

• para agregar una “bajada” al título del artículo (etiqueta <h1>) hice uso de la etiqueta <hgroup> que agrupa el título con una subsiguiente etiqueta <p>, como se ve en el próximo código, destacado en rojo.
• para agregar el nombre del autor del artículo y su fecha de publicación, coloqué una segunda etiqueta <p> dentro del <hgroup> con esa información, como se ve a continuación, destacado en verde.
• para el caso en que el artículo llevase un introducción (o “entradilla”, como dice en la imagen de arriba) le asigné al primer párrafo una clase de nombre intro (como se ve remarcado en azul) y, al siguiente párrafo, que sería el primero del artículo propiamente dicho, le asigné una clase de nombre primer-parrafo (como se ve indicado en magenta):