Banner de Hardlimit en app broadcast torneos entre elite uci chess engines

[jordiqui]

Estoy "peleándome con gtp" para pasar a un iframe y conseguir poder tener el espacio necesario para el banner y que quede bien visible. Estamos en ello en cuanto tenga un layout enmaquetado en condiciones, y paso a subir el sourcode del index.html porque el 1 de marzo lanzo el primer torneo y ahí sí que me gustaría tener el banner. Eso sí yo no sé incrustarlo con código html, css, etc. Os dejo a vuestro criterio que se que siempre es correcto.

[jordiqui]

Hola compañeros. Ya para hacerlo más interesante ya que la comunidad de programadores de motores de ajedrez ( no todos) odia a los que hacen mods, cambios sustanciales en el código, pero no dejan de ser derivados de Stockfish, te hace la vida poco fácil, en el mini pc he portado el proyecto, y lo que han sido meses, en una tarde hemos cambiados las rutas, creado otro subdominio, etc, y tengo otro torneo pero de motores de ajedrez originales. @cobito la ui que ya he dejado en zip para ti y para los compañeros del foro, está casi lista, para poder poner un banner vertical en un cuarto bloque del layout, pero había que tocar backend y no podía más.
Dejo de nuevo y este build sí que tiene mejoras respecto a la primera foto de este hilo, para descargar. Index.html .

torneo motores originales

Un saludo y feliz fin de semana.

[cobito]

@jordiqui Eso como tú veas. Yo creo que lo más sencillo es dentro de un simple div. Algo del estilo

<div class=logo><img src="https://hardlimit.com/logo.png" alt="Hardlimit's logo"></div> 

O bien embebiendo la imagen dentro del HTML con base64:

<div class=logo><img src="data:image/png;base64, [...]==" alt="Hardlimit's logo" /></div> 

Me parece lo más simple y siempre puedes maquetarlo desde el CSS.

[jordiqui]

@cobito dijo en Banner de Hardlimit en app broadcast torneos entre elite uci chess engines:

@jordiqui Eso como tú veas. Yo creo que lo más sencillo es dentro de un simple div. Algo del estilo

<div class=logo><img src="https://hardlimit.com/logo.png" alt="Hardlimit's logo"></div> 

O bien embebiendo la imagen dentro del HTML con base64:

<div class=logo><img src="data:image/png;base64, [...]==" alt="Hardlimit's logo" /></div> 

Me parece lo más simple y siempre puedes maquetarlo desde el CSS.

Perfecto, me pongo a ello. a ver cómo queda.

[jordiqui]

https://ijccrl-live.ijccrl.com/
bueno de momento he puesto un topbar porque mi idea era enmaquetarlo en una caja vertical del layout, pero toca hacer más cambios de código y ahi sí necesito el gpt. El lunes ya me pongo en serio con ello. Tiene un enlace hacia la el foro nofollow, pero cuando esté en modo producción que es cuando vendrán las visitas con picos altos, entonces si por cuestiones de seo, ese enlace dofollow es un backlink que consideráis correcto, lo cambio. Un abrazo y gracias por guiarme, porque ya estaba espeso.

[cobito]

@jordiqui Te dejo aquí el logo para tema oscuro: que se verá mejor que el oficial: https://hardlimit.com/logo_tema_oscuro.png

Y voy a intentar apretarle un poco al foro en inglés.

[jordiqui]

Hola compañeros, espero que os guste como ha quedado definitivamente el diseño que todavía falta pulir algun detalle con las fuentes escogidas, tipografía, pero lo gordo, ha sido pelear por conseguir las transparencias y una morfología más o menos uniforme. DOM, html, css, javascript todo esto nuevo para mí, pero peleando con el gpt al final ha hecho lo que quería hacer, no sin zamparme la documentacion oficial de mdn, guías, etc.
Ahora viene la cuestiíón importante, en estos momentos con todos los filtros activados antibots, reglas, etc en cloudfare, estamos diariamente sin hacer nada más que publicar cada dos días en un foro de ajedrez, sobre las 1000k, 1200k diarias con una tendencia al alza. Uno de los subdominios es este: https://elite.ijccrl.com/ y el logo de hardlimit, como no tiene header pues sería un layou más app, que retransmisión, pues en la parte superior del chat que además al tener su propia identidad destacaría mucho situarlo allí, pero espero vuestras sugerencias. @cobito el chat no va a cambiar ni en color ni en tamaño. El logo que me pasaste no sé si encaja bien, pero cuando tengas tiempo, me comentas cual crees que iría mejor y lo enlazo con la página en ingles. Aunque tenemos tráfico de media europa, méxico y muchos estadounidenses. Un abrazo compañeros.

[cobito]

Buenas @jordiqui. No, con ese fondo no va a encajar.

Un par de cosillas: veo que el fondo cambia en función del tamaño de la ventana: unas veces es una imagen (ventana grande) y otras un color plano (ventana pequeña) donde además desaparece parte del tablero de la izquierda:

La versión móvil veo que no funciona bien: pasan cosas raras con los tamaño de los tableros.

Y si la ventana es muy grande (en mi caso ventana maximizada a 4K con escalado del 150%), los dos tableros de la derecha, se superponen y se cortan:

Desde el punto vista del logo, importa el fondo: ¿lo quieres poner sobre el fondo negro del chat o justo sobre el chat, cuyo fondo podría ser una textura o un color sólido dependiendo del tamaño de la ventana?

[jordiqui]

Hola, creo que ahora debería funcionar bien la versión móvil. Revisé el código y se fijo una sola autoridad para mobile y desde el chrome de Android se ve bien. Respecto al logo, tenemos las dos url fijas y viendo el tráfico actual tras varias semanas con cinco reglas aplicadas en cloudfare, no hay ruido y estamos en un promedio de 1,2k diarios. Creo que es hora de buscar poner y que se vea bien el logo del hardlimit. 1. https://ijccrl-live.ijccrl.com/ 2. https://elite.ijccrl.com/ porque merece la pena y no pienso nada más que en hardlimit. Lo que no tengo claro es de ponerlo en la cabecera del chat, o como un widget lateral en la parte irzquierda. Pero lo del widget no me convence porque habría que retocar la geometría actual 2x2+1 y empezaría a pelearme con el gpt, porque no tengo herramientas de edición visual de html a mi alcance.

[jordiqui]

[jordiqui]

@cobito said:

Buenas @jordiqui. No, con ese fondo no va a encajar.

Un par de cosillas: veo que el fondo cambia en función del tamaño de la ventana: unas veces es una imagen (ventana grande) y otras un color plano (ventana pequeña) donde además desaparece parte del tablero de la izquierda:

La versión móvil veo que no funciona bien: pasan cosas raras con los tamaño de los tableros.

Y si la ventana es muy grande (en mi caso ventana maximizada a 4K con escalado del 150%), los dos tableros de la derecha, se superponen y se cortan:

Desde el punto vista del logo, importa el fondo: ¿lo quieres poner sobre el fondo negro del chat o justo sobre el chat, cuyo fondo podría ser una textura o un color sólido dependiendo del tamaño de la ventana?

Esta captura de pantalla es porque había varias autoridades y fósiles en el código. Se hizo saneamiento, y ya no carga un paint con otro color, Y he vuelto a mirar ahora desde el movil ( android, no he podido verificar safari de apple) y se adapta bien, aunque hay que hacer mucho scrolling porque no es una versión específica para móvil, sino que hacemos que se adapte el index.html. He puesto el logo, pero tengo que mejorar la visibilidad de la imagen porque es muy oscuro y el chat es negro el fondo.

[jordiqui]

Hola @cobito, sobre esto: ¿lo quieres poner sobre el fondo negro del chat o justo sobre el chat, cuyo fondo podría ser una textura o un color sólido dependiendo del tamaño de la ventana? la primera opción. Desde el movil lo he visto mejor, pero como dices no encaja bien, luego la cuestion es que por jerarquía visual quede homogéneo y visible para los usuarios. En cuanto lo tengas me lo pasas y yo lo añado a la carpeta Asset y lo vinculo en el código html. Así puedo añadirlo a las otras dos url que tengo activas, este mes tengo un vps para ir posicionando poco a poco con el seo las retransmisiones. Un saludo.

[cobito]

Buenas @jordiqui. Lo más sencillo sería ponerlo sobre un fondo de color plano, que en este caso sería el fondo negro del chat. Como lo tienes ahora no queda del todo mal, pero los colores corporativos no dejan mucho contraste con fondos oscuros.

Aquí te dejo una propuesta de logo adaptado a fondos oscuros (esquema similar al programa del banco de pruebas) en que el he aumentado un poco el tamaño dentro del chat:

[jordiqui]

@cobito said:

Buenas @jordiqui. Lo más sencillo sería ponerlo sobre un fondo de color plano, que en este caso sería el fondo negro del chat. Como lo tienes ahora no queda del todo mal, pero los colores corporativos no dejan mucho contraste con fondos oscuros.

Aquí te dejo una propuesta de logo adaptado a fondos oscuros (esquema similar al programa del banco de pruebas) en que el he aumentado un poco el tamaño dentro del chat:

@cobito HECHO!. ya lo tenemos en los dos torneos visible. !. https://elite.ijccrl.com/ 2. https://ijccrl-live.ijccrl.com/