Lolita: búsqueda en comentarios: #F00

#59 El extraño caso de las IAs que no sabían representar relojes

sxentinel — Sun, 16 Nov 2025 12:48:25 +0000

#5 Gemini 2.5 Pro también lo saca bien:

<!DOCTYPE html>

<html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reloj Analógico</title> <style> *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html,
body {
height: 100%;
}

body {
display: grid;
place-items: center;
background-color: #ffffff;
font-family: ~~apple~~system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}

.clock {
/* Sincronizado con la hora de la solicitud: 13:43:28 */
/* Rotación manecilla horas: ((13 % 12) / 12) * 360 + (43 / 60) * 30 = 30 + 21.5 = 51.5deg */
--h-deg: 51.5deg;
/* Rotación manecilla minutos: (43 / 60) * 360 = 258deg */
--m-deg: 258deg;
/* Rotación manecilla segundos: (28 / 60) * 360 = 168deg */
--s-deg: 168deg;

/* Diseño Responsive: usa 80% de la dimensión más pequeña del viewport */
width: 80vmin;
height: 80vmin;
/* Limita el tamaño máximo */
max-width: 400px;
max-height: 400px;

position: relative;
background-color: #fff;
border: clamp(4px, 2vmin, 10px) solid #333;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1),
inset 0 0 5px rgba(0, 0, 0, 0.05);
}

.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(8px, 3vmin, 20px);
height: clamp(8px, 3vmin, 20px);
background-color: #333;
border-radius: 50%;
z-index: 12;
}

.hand {
position: absolute;
bottom: 50%;
left: 50%;
transform-origin: bottom center;
border-radius: 4px 4px 0 0;
z-index: 10;
}

.hour {
width: clamp(4px, 1.8vmin, 10px);
height: 25%;
background-color: #333;
transform: translateX(-50%) rotate(var(--h-deg));
}

.minute {
width: clamp(3px, 1.3vmin, 8px);
height: 35%;
background-color: #555;
transform: translateX(-50%) rotate(var(--m-deg));
}

.second {
width: clamp(1px, 0.5vmin, 3px);
height: 40%;
background-color: #f00;
z-index: 11;
transform: translateX(-50%) rotate(var(--s-deg));
/* Animación */
animation: spin 60s linear infinite;
}

@keyframes spin {
from {
transform: translateX(-50%) rotate(var(--s-deg));
}
to {
transform: translateX(-50%) rotate(calc(var(--s-deg) + 360deg));
}
}

.number {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
font-size: clamp(1rem, 5vmin, 2.2rem);
color: #444;
font-weight: 500;
}

.number span {
display: inline-block;
padding-top: clamp(8px, 4%, 20px); /* Empuja los números desde el borde */
}

.n1 { transform: rotate(30deg); }
.n1 span { transform: rotate(-30deg); }
.n2 { transform: rotate(60deg); }
.n2 span { transform: rotate(-60deg); }
.n3 { transform: rotate(90deg); }
.n3 span { transform: rotate(-90deg); }
.n4 { transform: rotate(120deg); }
.n4 span { transform: rotate(-120deg); }
.n5 { transform: rotate(150deg); }
.n5 span { transform: rotate(-150deg); }
.n6 { transform: rotate(180deg); }
.n6 span { transform: rotate(-180deg); }
.n7 { transform: rotate(210deg); }
.n7 span { transform: rotate(-210deg); }
.n8 { transform: rotate(240deg); }
.n8 span { transform: rotate(-240deg); }
.n9 { transform: rotate(270deg); }
.n9 span { transform: rotate(-270deg); }
.n10 { transform: rotate(300deg); }
.n10 span { transform: rotate(-300deg); }
.n11 { transform: rotate(330deg); }
.n11 span { transform: rotate(-330deg); }
.n12 { transform: rotate(360deg); }
.n12 span { transform: rotate(-360deg); }
</style>
</head> <body> <div class="clock"> <div class="hand hour"></div> <div class="hand minute"></div> <div class="hand second"></div> <div class="center"></div>

<div class="number n1"><span>1</span></div>
<div class="number n2"><span>2</span></div>
<div class="number n3"><span>3</span></div>
<div class="number n4"><span>4</span></div>
<div class="number n5"><span>5</span></div>
<div class="number n6"><span>6</span></div>
<div class="number n7"><span>7</span></div>
<div class="number n8"><span>8</span></div>
<div class="number n9"><span>9</span></div>
<div class="number n10"><span>10</span></div>
<div class="number n11"><span>11</span></div>
<div class="number n12"><span>12</span></div>
</div>
</body> </html>

» autor: sxentinel

#152 Elementos que desaparecerán en breve de HTML

pablo-ar — Sun, 26 Feb 2012 18:03:15 +0000

A ver, los talibanes de la optimización, ¿qué dicen de esto?

Por un lado: el html generado desde PHP o lo que sea, dentro de matete de código importante:

<p id="user">Hola <strong class="blue">Usuario!</span></p>
...
<p>Es importante <span class="blue">destacar</span> que.... </p>

Y por otro lado lado, un simple css:

.blue{ color: #00F;}

Casi terminas el proyecto al i...a de tu cliente se le ocurre que ahora sería mejor mostrar los textos destacados en rojo. ¿cómo lo resuelves?

.blue { color: #F00;}

Punto... no tienes que tocar un más que un simple archivo de texto sin meterte en la lógica de la aplicación. Ahora bien, ¿tu cliente quiere que el nombre de usuario aparezca no en negrita sinó subrayado y en verde? Oks:

#user strong.blue{
font-weight: normal;
color: #0F0;
text-decoration: underline;
}

Incluso, los cambios en el CSS podría hacerlos alguien como un diseñador que no quiera complicarse con código. De hecho, si siguen jodiendo con esto del <.b.> por el <.strong.>, entiendan algo bastante simple que hace también a la optimización: el contenido html muchas veces generado dinámica se sirve independientemente de los estilos, en archivos separados que pueden ser cacheados por los browsers. Entonces, el servidor estaría solamente "ocupado" en generar y enviar contenido, y no estar mandando miles de veces código que tengan que ver con la presentación.

Y para cerrar:

- HTML ni HTML5 ni CSS son lenguajes de progamación, esto creo que ni se debería discutir acá.
- Que muchos no sepan separar contenido de presentación, no significa que no se pueda o sea imposible.
- HTML5 no creo que sea la salvación ni alivia el trabajo de maquetar. Provee nuevas etiquetas para marcar semánticamente el contenido de forma más clara, y unifica algunas cosas, y saca del medio algunas etiquetas redundantes.
- Por último, debe prevalecer el sentido común. Si tengo un site en producción, y por alguna cuestión urgente tengo que sacar un logo o destacar un texto, nada me impide que use un <span style="bla bla bla">texto</span> enh vez de meterme a buscar hojas de estilos. Lo mismo si tengo que desarrollar una simple página para poner de portada de algo.

Saludos!

» autor: pablo-ar

#54 Las espirales verde y azul… que en realidad son del mismo color

viktor — Thu, 25 Jun 2009 21:33:14 +0000

#52 que para ti o para alguien sean "dos conceptos diferentes" no significa que lo sean. Por ejemplo, el sonido de 400MHz corresponde a un concepto diferente al de 400,01MHz? El color #F00 es un concepto diferente a #F11? Y a F88?

El mundo es "continuo" y los conceptos son "discretos"; ahí donde ponemos la frontera es arbitrario.

Que en español haya ser y estar no significa que haya 2 conceptos. Por ejemplo, en catalán tenemos también "ser" y "estar", pero sus usos (conceptos) no son los mismos que en español. Y hasta tenemos "romandre", que se solapa con algunos de los usos que en español corresponde a estar (o otros a permanecer). No es que vuestra distribución, vuestros conceptos, sean mejores o peores. Son diferentes.

Lo de incorporar el azul para diferenciarlo del verde se llama interferencia cultural. En catalán nos pasa mucho por culpa del español y del francés. Por ejemplo, para nosotors tanto una bolsa como un bolso son "bosses", pero por interferencia del español hay gente que dice "bolso". Y si la lengua poderosa fuera el catalán, pues no te extrañe que empezaseis a diferenciar entre probar y "tastar" (probar una comida), entre hueso, semilla y "pinyol" (el hueso de las frutas, para nosotros distinto de la semilla, es cuando hay una sola semilla grande en el centro) o entre el sueño (el hecho de dormir) y "la sueño" (las ganas de dormir).

» autor: viktor