Vamos a terminar la web de la velada, ¿vale?
Porque tiene un montón de cositas que tendríamos que terminar.
Y es el hecho, ves, que tenemos que comprar entradas, ir a la tienda oficial, agregar calendario.
Hay cosas que ya no tienen tanto sentido y deberíamos eliminarlas.
Y como el proyecto es de código abierto, por supuesto, que bien que hemos hecho un proyecto de código abierto.
No sé, me parece muy genial.
Me parece muy genial.
¿Soy consciente en lo que hemos hecho aquí con la web de la velada?
Es que está increíble.
Es que ahora me doy cuenta, cuando estuve allí, es que me di cuenta de todo lo que habíamos hecho, ¿sabes?
Como, ostras, que hemos hecho la web de la velada aquí, todos juntos y de código abierto.
No sé, o sea, me dio como, ostras, que nosotros hemos hecho este proyecto y tal.
Y de gente que ha visto la web o ver el showcase comentando la web de la velada.
Pues, yo qué sé, era como tan raro.
Mi análisis favorito es este.
Mira, mira, mira.
Mirando la web.
O sea, es que es tan raro el showcase mirando nuestra web que hicimos.
La que hicimos juntos, porque, claro, más de 200 personas contribuimos en esta web.
Y no os parece raro que tenemos aquí al bueno del showcase que se pone...
Se pone...
Mira, mira, mira aquí.
Mira, aquí se pone.
Aquí se pone a...
¿Por qué se le ve tan mal a la pobre...
A ver?
Mira, aquí, viendo la web.
O sea, viendo la web, así, viendo los pesos y tal.
Luego, hablando de los pronósticos también, ¿eh?
Hablando de los pronósticos.
No sé, es que me parece tan bello.
Mira, mira, ¿ves?
Pronósticos.
Y aquí comentando.
Es el que más votos tiene.
Hostia, no sé.
O sea...
Me pareció muy bonito.
Me pareció muy bonito.
Entonces, es tremendo.
Es tremendo lo que hemos hecho aquí todos juntos.
¿Cuántos habrán usado los Sterex?
No los ha usado nadie.
Eso ya os lo podéis imaginar, ¿eh?
Ya os lo podéis imaginar que no los ha hecho ni Dios.
No los ha hecho ni Dios.
Pero bueno, que es impresionante el trabajo que habéis hecho de...
Mira, 225 contribuidores que han hecho un trabajo brutal.
Joel, Alejandra y tal.
Vamos a hacer algunos cambios, ¿vale?
Vamos a hacer algunos cambios, ya que estamos.
Para...
Y voy a enseñaros.
Voy a enseñaros el tema de ataques, ¿vale?
Ataques que sigue sufriendo la velada.
Sigue sufriendo.
Y os voy a explicar, ¿vale?
Algunos ataques.
Si me están costando dinero.
¿Por qué no me están costando dinero?
¿Cómo los estoy evitando?
Y tal.
Voy a también...
Voy a comentaros analíticas, ¿vale?
Vais a ver cuántas visitas ha tenido la web de la velada.
Que esto es una cosa que normalmente no se comparte.
Esto es algo totalmente...
No sé.
A mí me parece muy bonito que tengamos acceso a esto, que lo podamos ver, que podamos escudriñar,
tener acceso a cuáles han sido los países más vistos, las URL's, cuándo tuvimos los picos de visitas.
También vamos a ver si ha mejorado el SEO o no ha mejorado el SEO, ¿vale?
Vamos a ver si el SEO durante el tiempo en que empezamos el desarrollo, si ha habido un impacto positivo o no ha habido un impacto positivo.
O sea, vamos a ver cosas interesantes.
Vamos a ver cositas interesantes.
Vale.
Lo primero, voy a hacer algunos cambios así.
Voy a instalar las dependencias.
Más que nada porque no sé cuál fue la última vez que instalé el proyecto este.
A ver, voy a cerrar estas cosas que tengo por aquí.
Vale.
Vale.
Se están instalando un momento las dependencias.
Voy leyendo.
¿En qué está desarrollada?
Está desarrollada en Astro y Tailwind y ya está.
Pocas cosas más, la verdad.
Creo que quedamos bastante bien.
¿Usaste Cloudflare o todo lo gestionó Vercell?
Ahora os explico.
La página está hospedada en Vercell, pero utilizamos Cloudflare para los ataques.
Y también utilizamos Astro Database.
También lo utilizamos.
Vale.
Entonces, primeras cosas.
Vamos a levantar el proyectito.
Astrodeb.
Vamos aquí.
4321.
Localhost.
4321.
Vale.
Esta es la página.
Comprar entradas.
Bueno, eso de comprar entradas y todo esto.
Comprar entradas.
Eso lo vamos a quitar.
Entonces, todo esto del...
Esto ya es que no tiene mucho sentido.
Que también es verdad que tampoco...
Esto de ir a la tienda oficial, que no sé por qué se ve mal.
Creo que se ve mal por este basis.
Lo vamos a eliminar.
Porque no tiene mucho sentido.
Vale.
Claro, el 13 de julio, todo esto.
Yo es que creo que me voy a petar el principal date.
Este principal date lo vamos a eliminar.
Porque ya no tiene mucho sentido.
Este principal date fuera.
Quitamos ese...
Eso.
Y aquí justo debajo, lo que vamos a hacer es que en lugar de esta presentación...
Que, a ver, tenía sentido la presentación.
O podemos dejar la presentación.
Pero vamos a copiarnos y vamos a poner aquí la velada video, ¿vale?
Y este presentation video lo vamos a pegar y vamos a poner la velada video.
La velada video vuelve a disfrutar del...
De la velada del año 4.
Del año 4.
O revive...
Mira, revive la velada del año 4.
Vuelve a disfrutar del evento desde el Santiago Bernabéu.
¿Vale?
Vamos a poner aquí...
Vamos a buscar a Ibai.
Ibai.
Porque aquí ha puesto ya el video completo.
¿La visteis o qué, la velada?
¿La visteis o no?
Claro, la gente ya está quemada de la velada.
Ya está quemado, ya está quemado.
O sea, la gente ya tiene...
Como que...
Como que del año 4.
La velada del año 4.
Se llama así.
La velada del año 4.
Estuvo bastante bien.
Yo creo que por ahora ha sido...
Ha sido mi favorita.
Por ahora ha sido mi favorita.
Esta es la velada del año.
Esta es.
Vi una buena parte.
Hombre, yo la vi entera.
Yo la vi entera.
Vale, tenemos esto.
Y vamos a sacar el thumbnail.
¿Vale?
Una duda.
¿Cómo haces para que Visual Studio Code te vaya recomendando código?
Pues eso necesitas una inteligencia artificial.
Y entre las inteligencias artificiales yo utilizo SuperMaven.
Pero hay diferentes.
Tienen aquí Hackopilot, por ejemplo.
Son de pago.
Si no, puedes utilizar CodeGPT también.
Está bastante interesante CodeGPT.
Vale, la bajamos en...
La velada Cover.
¿Vale?
Vamos a poner esta velada Cover.
Vamos a irnos a imágenes.
Esto luego lo haremos...
Vamos a poner esto aquí.
Imágenes en Public.
Vamos a poner aquí imágenes y...
Vale.
No veo que tenga aquí los combates.
Tengo por aquí mi portátil.
No tengo aquí mi portátil.
Cago en la leche.
Es que creo que tengo las imágenes.
Las tenía sacadas ya.
A ver.
Un momento.
A ver si tengo más cambios.
No.
Vale.
No pasa nada.
Vale.
Entonces vamos a poner aquí el cover este de la velada.
Lo ponemos aquí.
Imagen.
La velada Cover.
¿Vale?
Y entonces esto vamos a poner aquí que está en...
To do image barra la velada cover web.
¿Vale?
Y ahora con todo esto nos vamos aquí y este la velada video la importamos.
La velada.
Velada video.
Y ahora ya deberíamos tener esta nueva sección.
¿Vale?
Revive la velada del año.
Vamos a decirle vuelve a disfrutar del evento desde Santiago Bernabéu.
Vale.
Ya tenemos el video este.
Vamos a darle un poquito de separación.
Porque ya veis que queda como demasiado juntito.
Entonces vamos a darle aquí 36.
¿Vale?
Y ahora ya aparecerá así.
Y ya revive la velada del año 4.
Vuelve a disfrutar del evento.
Elige tu luchador.
¿Vale?
Igual incluso esto.
48.
Hostia.
Es que hay una mezcla aquí de paddings con margins y la madre que parió.
Que es un poco raro.
Porque aquí hay como demasiada separación hacia abajo.
Me da la sensación que hay como demasiada separación.
Vamos a ponerle 72 para que no haya tanta.
Vale.
Yo creo que ahora sí.
Pero ¿ves?
Ahora me parece que hay poca arriba.
Es una cosa...
52.
Esto habría que estudiarlo mejor para ver bien las separaciones.
Vale.
Esto de Elige tu luchador.
Esto sí que lo vamos a dejar.
¿Vale?
Promociones.
Obviamente también.
¿La presentación tiene sentido?
¿Cómo lo veis esto?
¿Tendría sentido el hecho de dejar la presentación original de cuando se presentó?
Porque sí.
Por eso es mejor utilizar Gap.
Claro, lo que pasa es que ahora ya como hay tantos márgenes y tal, me voy a volver loco si nos ponemos a cambiarlo todo a Gaps.
Mejor el vídeo del streaming.
O sea, dejo la presentación también pero la dejo abajo, ¿no?
Tiene sentido que la dejamos abajo.
Vale.
En directo.
Vale.
Para el inicio de la velada.
Esto ya sí que...
Para el inicio de la velada.
Esto ya no tiene mucho sentido.
O sea, que este countdown, vamos a buscar dónde estamos utilizando y lo quitamos.
¿Vale?
Esto fuera.
Entonces, quitamos esto, este countdown en directo.
Lo que podemos poner para que no empiece aquí la velada del año y revive la velada del año así tan rápido.
Lo que podemos poner, si os parece, es un gracias.
Thanks message.
Vamos a poner un gracias aquí.
Como gracias por acercarnos o gracias por pasarte o yo qué sé.
Thanks message.
Y vamos a utilizar una tipografía.
A ver.
Thanks message.
Vale.
¿Por qué no me importa el import?
Thanks message.
Y vamos a poner typography.
Span, neutral, variantes.
Estoy buscando las variantes.
A ver si hay alguna.
Esta tiene buena pinta.
Esta tiene buena pinta.
Vamos a ver.
Typography.
Importamos el componente.
Como h3.
Atomic title.
Vamos a poner.
Gracias.
Récord de 3,8 millones de espectadores.
Gracias a todos.
Récord de 3,8 millones de espectadores.
Vale.
Vale.
Vale.
Espérate.
¿Por qué?
¿Por qué no me aparece aquí?
¿Por qué no me aparece?
Ah, porque lo he puesto aquí.
Lo he puesto aquí.
Vale.
Gracias a todos.
Vale.
Aparece aquí.
Gracias a todos.
Récord de nada.
Vale.
Para mejorar esto, vamos a utilizar este section.
Y esto lo envolvemos.
Vale.
Gracias a todos.
Récord.
Lo rompemos ahí.
Esto lo vamos a centrar.
Text center.
Yo creo que el font vault este no hace falta.
Le vamos a poner el skew.
Como para que quede así con el efectillo.
Récord de 3,8 millones de espectadores.
Y no sé si a ponerle un leading que sea un poquito más relaxed.
Para que se lea un poquito mejor.
Bueno, tampoco tanto.
Tampoco tanto.
Normal.
Hostia.
Normal.
Snook.
Vale.
Vale.
Vamos a darle un poquito de...
Un toque de color a este.
Y ya lo dejamos ahí.
¿Vale?
Vale.
Récord de...
De hecho, esto.
Span.
Ta, ta, ta, ta.
Esto sí que puede estar un poquito más...
Leading.
Snook.
Relaxed.
Loose.
Pero el tight es el que hemos utilizado, ¿no?
Entonces...
Leading.
Hostia.
Es que esto me lo está...
O leading down.
¿No?
Que este me lo está ignorando.
Class name.
Espectadores y tal.
O sea.
Es que no sé si este...
Es que está afectando a todos.
Vale.
Cuatro.
Block.
Vale.
Y este sí que le vamos a quitar toda la separación que está dejando abajo.
Que es demasiada.
Todo esto.
Demasiado.
Menos.
De hecho, todo esto lo vamos a quitar también.
Vale.
Pues eso.
Un mensaje, ¿eh?
Ya está.
Gracias a todos.
Claro.
Ahora el problema es que este queda demasiado separado por culpa de que antes necesitamos
más separación por como era lo otro.
Pero esto...
Pero esto...
SMPT32...
SMPT32...
SMPT32...
Claro, este tampoco tiene mucho sentido.
Porque este no se utiliza.
Y este tampoco necesitaríamos...
Hostia.
A ver...
No, claro.
Eso es para que...
Entonces, ¿cuándo está...?
¿Dónde está esta separación tan grande?
Esta separación...
Ah, este, este.
Ya está, ya está.
Vale.
Ahora ya dejamos esto, ¿eh?
Ya dejamos este y lo dejamos ahí y ya está.
Ah, está aquí.
Claro.
Es que está aquí.
Está aquí.
Es que ya os digo que hay demasiados padding.
Por eso había que haber utilizado más bien un...
Un gap.
Que lo decíais, ¿eh?
Qué linda la tipografía.
Es cara.
No es cara.
Esta es la Atomic Title.
No es cara, la verdad.
Para ser tan bonita.
Lo malo para mí es que no es muy legible.
Comic, Atomic Title.
Atomic Font.
Atomic Font.
O Atomic Font.
Creo, a ver si ha encontrado.
Es esta.
No es muy cara para utilizarla, pero no es muy legible.
Se tiene que utilizar con mucho cuidado, ¿eh?
En sitios muy, muy concretos.
No sé si eran 70 dólares o algo así.
Tened en cuenta que para un proyecto como La Velada, 20 dólares.
20 dólares.
Tampoco es muy cara.
O sea...
Bueno, esta es la licencia estándar.
Pongamos la más bestia.
10 millones de visitas al mes.
10 millones de visitas al mes, 475.
Pero bueno, no se ha llegado a esto.
O sea que está súper bien, ¿eh?
No te preocupes.
Mi DUI 20 DEV pasando la gap en este momento.
Me confirma por interno.
Bueno, bueno.
Si la arregláis, pues perfecto, ¿eh?
Yo encantado de la vida.
Encantado de la vida.
Bueno, de hecho, voy a ir subiendo si os parece esto.
Lo voy a ir subiendo para que así lo vayamos teniendo.
Entonces, voy a ir subiendo esto.
Ah, me faltaría cambiar de aquí el título, ¿no?
Reproducir presentación de La Velada.
El evento...
Vale.
Voy a cambiar el título.
Reproducir el evento de La Velada del año 4 desde el Santiago Bernabéu.
¿Vale?
Venga.
Vale.
Pues ya tendríamos todo esto.
Añadimos aquí los cambios.
¿Vale?
Y ya hemos hecho una parte.
Ya hemos hecho una parte.
¡Hostia!
Me está haciendo el...
Ah, ¿habéis visto esto?
Esto es lo del git graph este que os dije el otro día.
El hecho de ver los cambios entre entrada y saliente.
Lo cual no está mal.
Y esto es...
Vamos a poner aquí esto.
Actualizar el título.
Subimos los cambios.
¿Veis?
Y aquí podéis ver la diferencia de cómo se va añadiendo desde...
Esto sería master o main.
Y estos serían los que estamos añadiendo nosotros.
Lo cual está bastante...
Bastante bonico.
Bastante bonico.
Vale.
Le damos al push.
Hola, Amido.
Estoy tratando de poner un evento o un onclick en Astro igual que como se hace en React.
Pero no me deja.
Astro.
¿Cómo puedo hacer eso?
Es que en Astro no puedes poner un onclick.
¿Sabes?
Tú aquí no puedes poner un onclick.
Esto no funciona.
Astro no sirve para eso.
Eso tendrías que utilizar React en todo caso.
¿Vale?
No puedes...
No puedes hacer eso en Astro.
Astro está pensado para utilizarse en temas...
Eh...
Estáticos.
Entonces no tienes onclick.
Sería increíble.
¿Qué es eso?
Forecast Girls.
No, eso es que cuando vi el stream del Showcast comentaba que faltaban los pronósticos de las chicas.
Estos pronósticos...
Hostia, que veo.
Ah, porque esto...
Esto está bien.
Esto está bien.
Ya veréis.
Esto es porque no me estoy conectando a la base de datos.
De...
A la base de datos.
Hostia.
Token no autorizado.
Cago en la leche.
No tengo el token aquí para conectarme.
Vale.
Vamos a arreglarlo un momento.
Esto como es estudio Astro Build.
Necesito el token.
Necesito el token.
Entonces, en proyectos tenemos la web de la velada.
Y por aquí debería haber un token.
Eh...
Generate App Token.
Vale.
No miréis.
No miréis que vamos a generar un token.
Token localhost.
Generar.
Vale.
Estoy generando token.
No me mires.
No me mires.
Vale.
Y esto sería en el .env.
.local.
Hostia.
Es que está como roto este archivo.
¿Por qué no funciona el .local?
O sea, aquí no tenía un .env.
.local.
Me sorprende.
Claro.
Es que si no esto...
Me va a petar un montón de cosas.
Puede ser que haya cerrado este proyecto.
Hmm...
Qué raro.
Qué mal, ¿no?
O sea, esto es que me carga el proyecto en local.
Y ahora entonces no me...
Vale.
Pues...
Ya está.
Vamos a ver si ahora funciona.
He puesto el token.
Vamos a ver si ahora funciona.
Vale.
Ahora sí que funciona.
Esto está haciendo la conexión a la base de datos de producción.
¿Vale?
Coño.
¿Cómo sabes el token?
¿Cómo sabes el token?
La madre que parió.
Vale.
Y aquí tenéis las votaciones.
Pues lo acertaron, ¿eh?
La verdad es que Alana...
Menuda...
Menuda máquina de matar a Alana, tío.
O sea, qué miedo.
Tuvieron que parar en uno de los combates.
El que estaba contra Celín.
Porque es que Alana...
Es que está...
Es que a mí me explota Alana.
Tiene unos brazos Alana.
Está muy fibrada.
Es que es increíble.
Porque claro, la veíamos aquí.
En las imágenes estas.
La podías ver aquí.
A ver si la encuentro.
Aquí.
La veías aquí y ves que es una chica que está en forma.
O sea, está fuerte.
Está en forma.
Pero claro, aquí no tenía tanto músculo.
Pero cuando fue al combate, yo estaba...
¿Pero qué es eso?
Esos brazos.
Eso es acero para los barcos.
Es una cosa loca.
Es una cosa loca, ¿eh?
Ay, Dios mío.
Brutal, brutal.
En fin.
Pues...
Facebook me recomendó muchos vídeos de ella ayer.
Pues por algo...
Eso es porque seguramente...
Eso es porque seguramente has estado buscando muchas cosas de ella.
Seguramente.
Seguramente.
A ver, ¿ha habido un error aquí?
Me ha pagado un error.
Please define a secret.
Vale.
A ver.
¿Cómo se hacía esto?
Hay un trucazo que no sé si lo conocéis.
Vercel, pull, end.
A ver.
Os voy a explicar.
Tengo un problema.
El problema es que no tengo las variables de entorno.
No las tengo en mi local.
¿Vale?
Entonces, el tema es que no me acuerdo cómo, pero sé que se puede traer las variables de entorno desde Vercel.
Y así, si por lo que sea, tú tienes un montón de variables de entorno ya configuradas en el servidor y tienes que hacer algo, pues te las puedes traer utilizando un comando.
Ahora no me acuerdo cuál es el comando exactamente, pero lo vamos a traer...
Lo estoy buscando.
Creo que es Vercel, pull, end o algo así.
Vercel, pull, end.
No.
Vercel, end, pull.
Esto.
The environment variables...
Claro, puedes hacer esto y esto se supone que debería traerte las variables de entorno que tienes.
¿Eso no hace la página vulnerable?
No, esto te lo haces solo tú que tienes los accesos.
O sea, no lo puedes hacer con cualquier proyecto.
Solo lo puedes hacer con el proyecto, o sea, con tu contraseña.
Has tenido que iniciar sesión para que realmente puedas tener acceso.
Si no, no va a funcionar.
Si no, imagínate que puedas hacer esto con cualquier proyecto.
O sea, sería una locura.
Esto lo que te va a pedir es, oye, vas a estar en un proyecto...
¿Tu existing project?
¿Cuál es el nombre de tu existing project?
Hostia, me está pidiendo aquí un montón de información que no me sé.
¿Cuál es el nombre?
La web oficial, ¿vale?
La velada web oficial.
Pero esto lo que puedes hacer es traerte...
No, pero yo no quería...
No quiero que me hagas un deploy de esto.
Es que me está haciendo un deploy.
No es lo que quería.
¿Ves?
Me está haciendo un deploy.
Yo lo único que quería era...
Bueno, da igual, no pasa nada.
Me está haciendo la build.
Me está haciendo la build.
¿Ves?
Me está haciendo aquí la build y tal.
A ver cuánto tarda.
13 segundos.
14.
Está dando dependencias.
Vamos a ver.
Una recomendación para alojar base de datos gratis.
Tengo una que solo me permite una sola base de datos.
Si no te importa que sea SQLite, tendrías la posibilidad de utilizar TURSO.
Que está bastante bien.
Vale, ya están instalando.
Vale.
Vale.
Entonces, se supone que cuando termine debería estar alineado WebSocket, Portal Ready
News.
Vale.
Aquí tendríamos todo esto.
40 segundos.
Está tardando demasiado.
Demasiado.
Demasiado.
Deployment Outputs.
Vale.
Vale.
Entonces, ya está.
Ya está.
Bueno, tarda un poquito más.
Vale.
Hostia.
Que tengo...
Bueno, voy a actualizar...
Voy a actualizar la línea de comandos de Vercell.
Que ya van por la versión 31.
Madre mía.
Van por la versión 31.
Yo voy por la 28.
La madre nos trajo.
Vale.
A ver si ahora así lo arreglamos.
¿Estos cambios se hacen en tiempo real?
Sí.
A ver, que me decís que no se está ejecutando este vídeo.
Hostia.
El vídeo no está disponible.
Ostras.
¿Puede ser que sea que no se puede hacer embed?
Hostia, Ibai.
¿Cómo la lías, tío?
¿Puede ser que no se pueda hacer embed?
Pero es raro.
Porque aquí sí que me estaba funcionando.
A ver.
En Localhost 4.3.2.1.
En Local sí que me estaba funcionando, ¿no?
Puede ser que sí que estaba funcionando en Local.
Sí que está funcionando en Local.
¿Por qué no funciona aquí?
Bloqueado por el cliente.
¿Esto qué es?
A ver, un momento.
¿Por qué esto no funciona aquí?
El vídeo no está disponible.
A ver si está pillando mal por lo que sea.
Vamos a ver.
Debe estar por aquí el iframe.
Embed.
La URL.
Está bien, ¿no?
Es cosa del Brave.
No, no creo que sea cosa del Brave por culpa de eso.
No, el vídeo no está disponible.
Lo está haciendo de una.
Es raro, es raro.
Es como que...
No es por el AppBlocker.
Creo que copiaste mal la URL.
No creo, porque si no, este enlace no funcionaría.
Entonces, no me da la sensación que sea eso.
Y es como que en Local...
¿Por qué es la presentación?
La velada vídeo.
Está bien.
La idea está bien.
Creo que puede ser más bien que no esté permitido el embed.
Lo cual es bastante raro.
En la URL del vídeo tienes el parámetro autoplay 1 cuando no es autoplay.
Eso debería dar igual.
Debe ser por la música.
Puede ser también.
Es raro.
Hombre, gracias por la Raito, Draci.
Muchas gracias.
A mí me envía directamente a YouTube.
Eso puede ser porque no ha cargado todavía la página.
Eso puede ser.
Con la presentación sí que funciona.
Con la presentación sí que funciona.
Así que yo creo que seguramente sea porque le han desactivado el tema del embed.
A ver, se los puedo comentar.
No pasa nada.
Yo creo que directamente tiene desactivado la incrustación del vídeo.
Pero me extraña.
Me extraña justamente por esto.
Porque en Local sí que funciona.
Súper raro.
Súper raro.
Pero bueno, no pasa nada.
Hostia, cómo está tardando esto, tío.
Bueno.
Pull, env, la velada.
Vamos a hacer la velada web oficial.
Voy a asegurarme que esto no enseña nada.
Vale.
La velada web oficial.
Ah, no.
Es env pull.
Me he equivocado.
Enf pull.
A ver ahora.
Downloading y tal.
Vale.
Se supone que ha creado el archivo.
Enf.
No ha creado nada.
No ha creado nada.
No ha creado.
Created la web.
Ah.
Vale, vale.
Ahora ya he visto.
Es que me ha creado mal el archivo.
Me lo ha creado con el nombre de la web oficial.
O sea, lo que hay que hacer aquí, lo que hay que hacer es vercel, env, pull y decirle el nombre del archivo.
Punto env, punto local, por ejemplo.
Y esto lo que hace es que te descarga las variables de entorno del servidor y te lo va a dejar, te lo va a dejar en este archivo.
Lo cual está súper bien porque así no te tienes que acordar las variables de entorno.
Si ya las tienes en el servidor, esto lo que hace es descargártela y te la deja en local.
Es brutal la idea.
Está súper, súper bien la idea.
Y así, ahora se supone que deberíamos tener todas las variables de entorno y ya nos tenemos que preocupar de si nos falta el secret o lo que sea.
¿Vale?
Así que ya lo tenemos por aquí.
Ok.
Perfecto.
Muy bien.
Pues vamos a ver cómo va quedando esto.
A ver si ha quedado bien lo que son los márgenes y tal.
El tema del vídeo, ¿qué le vamos a hacer?
No pasa nada.
Vale.
Vale.
Bueno, voy a quitar este entradas que hay ahí.
Vale.
Tú, tú, tú.
Este que pone ahí entradas.
Quitamos las entradas y vamos a poner la tienda oficial.
Vamos a buscar la tienda oficial.
La velada tienda oficial.
Y es esta.
La vamos a poner por aquí.
Ya no tiene mucho sentido que intentemos.
¿Y este kit ignore?
Ah, porque he puesto el punto Vercel.
Vale.
Ah, tienda oficial.
Link.
Y así quitamos también las entradas.
¿Vale?
¡Hombre!
Space DW.
Gracias por regalar 25 subs.
¡25 subs!
La madre que te parió, tío.
Muchas gracias, amigo.
Muchas gracias.
Space.
Joder.
Increíble, ¿eh?
Muchas, muchas, muchas.
Muchas, muchas, muchas gracias, ¿eh?
Te lo agradezco infinito.
25 subs.
La leche.
Hostia, que la tienda...
La tienda un poco polémica, ¿eh?
Esta imagen aquí enorme.
Un poco polémica.
Pero bueno.
Bueno.
Lo importante es que tienda oficial.
A ver, que no se rompa el...
Bueno, aquí salen dos...
Bueno, aquí también sale este en dos.
O sea que...
Bueno, tampoco creo que pase nada.
Es un momento de nada.
No pasa nada.
Vale.
Tienda oficial.
Y si le damos a la tienda oficial...
Tienda oficial.
Va a la tienda oficial.
Vale.
Pues por ahora esto.
Vale.
¿Qué queréis ver?
¿Queréis ver ataques?
¿El SEO?
¿O las analíticas?
¿Qué queréis ver?
Hola, Midu.
Como estás seguro que creando muchos proyectos como siempre.
Paso por aquí para decirte que no te tengo olvidado y que siempre te llevo en mi corazón.
Pronto estaremos de vuelta al 100.
Oh, Space.
Gracias, amigo.
Joder.
Y encima te pasas para regalar 25 suscripciones.
Eres la hostia.
Muchas gracias, amigo.
Te quiero un montón y gracias por acompañarme y por acordarte cada dos por tres regalar tantas suscripciones.
Eres la hostia.
Muchas gracias.
De corazón.
Gracias, amigo.
Ataques.
Ataques, analíticas y por último el SEO.
Lo quiero ver todo.
Lo vamos a ver todo.
No os preocupéis.
Lo vamos a ver todo.
Pero ¿qué es lo primero que queréis ver?
Analíticas.
Analíticas.
Ataques, ataques, ataques.
Veo mucho...
Queréis sangre, queréis sangre.
¿Queréis ver el mayor ataque?
El mayor ataque de la historia.
¿Quieres ver las apiquis?
Mirad.
Este es el mayor ataque.
El mayor ataque lo tenéis aquí.
Este es el mayor ataque.
Aquí tenéis el mayor ataque.
Este es el mayor ataque.
Aquí lo tenéis.
Este es el mayor ataque.
Este es el mayor ataque.
Madre mía.
Pero Alana, por favor.
Mira que no...
Es que está en modo automático ahí.
Se pone ahí...
Esto sí que es un ataque.
Lo demás son tonterías.
Aquí, aquí.
Esto es exagerado.
Cuando en este momento...
Aquí, aquí.
Es que no para, ¿eh?
Está como en automático.
Exacto.
Es una mitralleta.
Mira, mira.
Aquí, aquí.
Por favor.
Yo creo...
Os voy a decir algo.
Que esto no os he comentado.
Yo creo que es el mejor...
El mejor combate...
No, el mejor combate fue el de Virus contra Shelao.
Ese fue el mejor combate.
O sea, eso fue espectacular.
La tensión...
Ese fue el mejor combate.
Pero de lejos.
De lejos.
Y luego el de las chicas.
Luego el de las chicas.
Yo creo que esos fueron los dos mejores.
Pero...
Pero esto qué es.
Pero esto qué es.
Este músculo.
Dios.
Es exagerado.
Bueno, total.
Sí, encima con el golpe preciso.
Yo creo que fueron los dos mejores combates.
El de Virus y Shelao y el de las chicas.
Además, me encantó todo lo de la introducción de las mexicanas.
Fue espectacular.
Fue tremendo.
Bueno.
¿Queréis ataques?
Habéis dicho, ¿no?
Venga, pues vamos a ver los ataques.
Va.
Os voy a explicar lo de los ataques.
Vamos a ver.
Ataques.
Evolución del SEO.
Y las analíticas.
Vamos primero con los ataques.
Que es bastante interesante.
¿Por qué?
Porque el tema de los ataques.
Alguien puede pensar.
Bueno, habrán parado.
No, no, no.
La verdad es que siguen atacando.
Y de hecho, ayer o antes de ayer.
Hicieron un ataque bastante bestia.
Os voy a enseñar bastantes cosas del ataque.
Estoy iniciando sesión.
Un momento, ¿eh?
No os quiera enseñar nada.
Es que me está pidiendo el Second Factor Authentification.
Pues vamos a ver el tema de los ataques de la velada.
El tema de los ataques de la velada.
Yo os explico unas cuantas cosas.
Cositas que he hecho.
Y, bueno, unas cuantas analíticas.
Bueno, aquí tenemos analíticas.
Que podemos ver las 72 horas anteriores.
Y aquí.
Esto.
Lo malo es que el historial que tiene no es muy bestia, ¿vale?
Clawfler tiene un historial bastante limitado.
Y para ver analíticas y registros.
Solo tiene las 72 horas anteriores.
Y es una pena porque la verdad es que aquí, si tuviese más, pues sería más interesante.
Pero aún así, aquí podemos ver uno de los últimos ataques, que lo tenéis aquí, donde en una hora hicieron 35 millones de peticiones.
35 millones de peticiones.
Es bastante, es bastante brutal, ¿eh?
Fijaos.
El 15 de julio a las 12 de la noche, 35 millones de peticiones.
Y podemos ver los países desde los que se hicieron las peticiones.
Podemos ver aquí Alemania, 10 millones de peticiones.
Estados Unidos, Reino Unido, España, Rusia, Holanda, Vietnam, México, Australia, Francia y tal.
Entonces, aquí tenemos, por ejemplo, el número de visitas.
Que aquí, si os fijáis las visitas, estos son visitas reales.
Por eso aquí hay un pico.
Porque esto es el día de la velada.
Claro, no se ve, pero justo antes hay un pico porque es el día de la velada.
Tuvimos un montón de visitas, es normal.
O sea, las visitas para el día de la velada, lo tenemos aquí.
Es normal que sí que crecieron.
Pero este pico que hay aquí, esto es en realidad, es un ataque.
O sea, que incluso después, incluso después de que haya sido la velada y tal, siguen atacando.
Lo cual no entiendo muy bien por qué hacen esto.
Es muy raro, la verdad.
Es muy raro.
La rompió tanto la velada que pareció un ataque.
Nah, pero en ese momento es normal porque sí que había un montón de visitas y no pasa nada.
Pero aquí en solicitudes se puede ver esto, ¿no?
Entonces, aquí podemos ver los países de los que estaban atacando.
Desde dónde venía el tráfico.
Las URLs.
Es un ataque muy sencillo porque, fijaos, que lo que intenta es básicamente estar constantemente.
El Shokka se está analizando los combates.
Eso es del día anterior, luego lo veremos.
Luego lo veremos que el día anterior, que es cuando el Shokka se analizó los combates, también hay un pico.
Pero lo único que hace este ataque es intentar ir a una URL en concreto y estar ahí constantemente.
De hecho, podemos intentar limitar a este lapso de tiempo, ¿vale?
Vamos a intentar limitar.
Fijaos que es un ataque muy bestia porque en minutos, en menos de 5 minutos, 30 millones, 35 millones de peticiones.
No está mal, no está mal.
No está mal.
Vale, aquí sí que se puede ver el ataque un poco raro que está intentando.
Primero, va a la ruta principal, ¿vale?
Y hay 35 millones de peticiones, pero también intenta atacar como URLs súper raras.
Desde barra R, o sea, intenta entrar lavelada.es barra R, ¿vale?
Y esto da un 404 y ya está.
Esto, lo interesante, para evitar que cueste dinero, ¿vale?
El 404.
En este caso, lo que se podría intentar, que a ver, no cuesta dinero y ahora os enseñaré por qué.
Sería el cachear esta imagen, ¿vale?
Para que, o sea, esta imagen, esta página, para que en lugar que sea dinámico, pues que sea totalmente estático y total.
Así no generaría ancho de banda.
Pero bueno, en este caso, el ancho de banda, pues es indiferente porque tampoco pasa nada.
Porque, fijaos, que casi todas las que tiene, que son 35 millones, al final lo interesante es que de esos 35 millones, y para que lo veáis aquí, lo voy a hacer un poquito más grande para que lo veáis bien, ¿vale?
De los 35 millones de peticiones, podemos ver que 28 millones y medio recibió un 403.
Esto quiere decir que básicamente no nos costó nada de dinero.
¿Por qué?
Porque Cloudflare le dio un 403 de prohibido, ¿vale?
Prohibido, ya está.
No puedes hacer nada.
Luego, 6 millones de peticiones recibieron el Rate Limit, el 429.
Entonces, 28 y medio más 6, pues 34 y medio.
O sea que, ah, bueno, y otras 223, Client Close Request.
DNS Error, 118.
O sea, solo 40.000 le dieron un ok.
De 35 millones de peticiones, es que es muy bestial.
De 35 millones de peticiones, solo 45.000 pasaron todos los filtros para llegar al servidor de la página web y, por lo tanto, generar tráfico.
Que de esas, algunas pueden ser, aunque sean malas, puede ser que se hayan colado, pero seguramente serían muchas visitantes reales.
Entonces, aquí podemos ver un ataque que no ha servido para nada, básicamente.
O sea, un ataque que aunque hayan sido 35 millones, el efecto que ha hecho, pues es pasarse en nada.
Porque Cloudflare se las ha tragado todas.
Y solo han pasado 40.000, que son bastante pocas, y ya está.
Aquí podemos ver también, estado de AKH, pues 34 con 84.
Está en ninguno porque han sido paradas.
Estas son las IPs que se han utilizado justamente para atacar, los centros de datos, y ya está.
Aquí los agentes de usuario, que muchas veces se pueden ver cosas como especiales, o mensajes, o gente...
Mira, también de servidores han intentado atacar rollo con servidores súper raros, como con subdominios.
O sea, por ejemplo, han intentado entrar a páginas con subdominios extraños, así como lavelada.es,
para ver si así, pues hay algún tipo de error, por ejemplo esto.
¿Por qué?
Porque hay veces que la gente protege el dominio principal y no utilizando subdominios.
Y a lo mejor están intentando a ver si por ahí hay alguna posibilidad.
Aquí podemos ver también, por ejemplo, ves todas las rutas, que están intentando hacer lo de los 404.
Pero bueno, que esto no ha tenido ningún tipo...
¿Ves? Sistemas operativos de origen.
35 millones son de Windows.
Bueno, esto es un poco exagerado, ¿eh?
En términos de porcentaje, ¿cuántas mil peticiones de 35 millones son el 0,11?
Pues imagínate.
O sea, que muchas...
Stark Industries.
Yo no sé si esto será de verdad.
O sea, Stark Industries o debe ser...
Yo me imagino que debe ser de mentira.
Bueno, aquí parece Stark Industries.
O sea, que sí que puede ser que exista esto.
Ojo, que esto sí que existe, ¿eh?
Que sí que existe esto.
Stark Industries.
Ah, mira.
Mira.
Esto está interesante, amigos.
Porque ¿cómo está haciendo el ataque?
¿No?
La pregunta del millón es, bueno, y esta persona, ¿cómo está atacando?
Hay muchas formas de hacer este ataque porque fijaos que está Stark Industries, Akamai, OVH, Hetzner.
Entonces, yo creo que lo que debe estar haciendo la persona para atacar es explotar una vulnerabilidad de servidores de terceros.
O sea, no está utilizando sus propios servidores, sino que seguramente están utilizando servidores de terceros para hacer este ataque.
Ellos no han contratado un servidor y con ese servidor están atacando, sino que lo que han hecho seguramente es...
Habrán encontrado un script de PHP que tiene una vulnerabilidad con la que puedes ejecutar código de terceros.
Han ido allí, han modificado el código y cuando ellos han querido, pues lo han activado.
Yo me imagino que van por ahí los tiros porque fijaos que hay un montón de orígenes diferentes que muchos son proveedores de servidores.
Y, por ejemplo, este. Estos son servidores VPS, que sí, los VPS están muy bien, pero el problema es que temas de seguridad y todo esto, pues lo tienes que mantener tú.
Y aquí ya podéis ver un problema. Estos deben ser que hay gente que tiene VPS aquí contratadas, que pueden tener un WordPress, pueden tener mil millones de cosas, lo tienen abandonado.
Por lo que sea, le habrán atacado, le habrán infectado con alguna cosa y a partir de ahí están haciendo ataques dirigidos utilizando esos host zombies que tienen por ahí.
Se tensa la cosa. Pueden ser explorers zombies. Pueden ser explorers zombies también. Podrían serlo perfectamente.
Ataques de host zombies. Totalmente, esa es la cosa, ¿no?
Pero bueno, que ya veis que este ataque, pues no ha tenido ningún tipo de incidencia.
Aquí podemos ver además, ya por sí solo, el propio Klauffler también durante, mira, 30 días anteriores.
Aquí podemos ver algunos ataques, algunos muy pequeños, pero el del 14 de julio.
El 14 de julio también, automáticamente, Klauffler también paró un ataque el 14 de julio porque encontró que se estaba utilizando un navegador incorrecto.
O sea, que también te va atacando con ahí.
Aquí podemos ver temas de rendimiento, que bueno, estoy utilizando ahí la caché para evitar algunos de los cuantos ataques.
Y en temas de seguridad, aquí podemos ver los eventos, que también es bastante interesante.
Podemos ver el día del ataque, que creo que fue el 15.
No, fue, sí, el 15. Mira, justamente lo tenemos aquí, justamente lo tenemos aquí.
Vamos a ver el ataque aquí. Este es el ataque.
Y fijaos, de 37 millones, se bloquearon directamente 10 y 26 se le enseñó el desafío.
Entonces, casi no pasó ninguna.
¿Ves? HTTP, DDOS. O sea, ya se detectaron directamente que eran denarios service.
Y aquí, de nuevo, podemos ver todas las rutas, todos los países.
Aquí podemos ver reglas del firewall que yo tengo para limitar el RAID límite.
En el caso de que pasen, pues también limitar el número de peticiones que se puedan hacer.
Es increíble. Una cosa que me parece que está muy bien de Klauffler es el hecho de que, aunque...
Si te tiene... Fijaos que... ¿Cuántos he dicho que había sido el ataque?
37 millones de peticiones. 37 millones y media, ¿no?
Pues esto me parece increíble de Klauffler.
Aquí, fijaos que tenéis para paginar todas y cada una de las peticiones que ha bloqueado.
O sea, podéis estar aquí, ver uno a uno todas las peticiones que se han bloqueado.
Por ejemplo, esta petición en concreto de la India con este agente de usuario,
con la cadena de consulta, que esto ahora os explicaré también que es bastante interesante.
Pero puedes ver una a una todas las peticiones.
Esto es espectacular porque esto lo que te permite es detectar de forma muy granular
qué es lo que están intentando hacer a la hora de atacarte, ¿no?
Por ejemplo, aquí se puede ver que están utilizando la versión de HTTP 1.1.
Pues una cosa que puedes hacer es bloquear, o si no quieres bloquear, mostrar un desafío
de que se utilizan ese protocolo que muchas veces no tiene mucho sentido utilizar hoy en día
el protocolo HTTP 1.1, un usuario real, no lo va a utilizar porque navegadores modernos
utilizan HTTP 2.
Pues ahí ya podéis ver una pista.
Ya solo filtrando eso, ya os vais a quitar unas cuantas cosas.
Luego, por ejemplo, otro tipo de ataque muy típico.
Mira, fíjate, agente de usuario, Nginx.
Este tiene muchos bichos.
Y, bueno, esto lo ha bloqueado automáticamente.
Pero fijaos que otro tipo de ataque que la gente intenta hacer mucho es esta.
Utilizar una cadena de consulta muy random.
O sea, por ejemplo, intentas tú ir aquí a la velada y le empiezas a hacer como cadenas random.
Que fíjate que aquí, pues, no cuela, ¿no?
Bueno, no cuela, pero esto yo creo que es más por otra cosa.
Pero, bueno, intentarías hacer algo así.
Hacer esto.
¿Por qué?
¿Por qué haces esto?
Porque lo que haces al intentar hacer este tipo de ataques de ir cambiando el query string es que la caché sea dinámica.
¿Ves que aquí pone dynamic?
Esto lo que haces es que la caché nunca llegue.
Fíjate, cuando haces aquí, esto pone dynamic.
Bueno, ahora porque la tengo dinámica porque quería ver los cambios y tal.
Pero esto lo que podéis hacer para evitar este tipo de ataque, si tenéis en concreto, sabéis que la caché no debería cambiar por el query param,
lo que podéis hacer en el tema de optimización, no, en almacenamiento en caché, en la configuración, ¿vale?
Aquí lo que podéis hacer es nivel de almacenamiento.
Podríais hacer aquí sin cadena de consulta, ignorar cadena de consulta o estándar.
Aquí depende lo que podáis hacer, pero lo interesante es que si no tenéis en cuenta la cadena de consulta vais a poder cachéar más,
pero ojo, tened cuidado de que sea importante que la cadena de consulta, o sea, el query param, no cambie el contenido.
Porque si cachéáis y el query param sí que debería haber cambiado el contenido, pues esto es un problema.
Aún así, este tipo de nivel, este tipo de nivel se puede modificar más granular.
Por ejemplo, podéis ir aquí a caché rules, ¿vale?
Podéis crear reglas, veis que pone aquí caché pages y podéis hacer aquí que si contiene esto,
entonces vais a hacer que esté en caché y podéis mirar que si tiene un query param en concreto o lo podéis ignorar o lo que sea.
O sea, que es muy, muy, muy personalizable.
Está bastante, bastante bien, ¿eh?
Entonces, se pueden hacer mil millones de cosas para evitarlo.
AWS tiene servicios para evitar ataques de DOS.
Hostia, no tengo ni idea.
Yo creo, yo creo que sí.
Creo que tiene un servicio que se llama Shield, si no me equivoco.
Ojo que lo has cambiado, puede ser.
Bueno, no pasa nada, ya lo miraré.
A ver.
Sí, se llama AWS Shield.
Es este.
Este, AWS Shield.
Maximiza disponibilidad, capacidad de respuesta de aplicación con protección administrada contra denial of service.
Es esta, AWS Shield.
Entre, me imagino que otras que también podrías hacer de RAIL limit.
Por ejemplo, el WAF.
Con el WAF podrías hacer todo el firewall de hacer un RAIL limit, que no puedan hacer tantas peticiones a un sitio.
Todo este tipo de cosas.
Filtrar el tráfico también por país.
Esto es muy parecido a lo que podrías hacer con Cloudflare.
Es muy, muy parecido.
Lo que pasa es que yo creo que en tema de precio, seguramente, seguramente, claro, Cloudflare tiene una capa gratuita.
Y yo diría que el WAF de AWS no lo tiene.
Y a la mínima se te puede disparar.
O sea, tendrías que tener bastantes cosas con cuidado.
A ver, porque pone solicitud, 0,60 millones de solicitudes.
Claro, creo, si no me equivoco, que estos son solicitudes independientemente de si es un ataque.
Entonces, 35 millones por 0,60 son 20 dólares.
Que no es mucho, pero ya son 20 dólares.
¿Vale?
O sea, lo digo porque tengáis en cuenta que creo que aquí el coste es también por los desafíos que muestras por todo.
O sea, te lo cobran todo.
Te lo cobran todo.
¿Ves aquí que también te pone desafío?
40 céntimos de dólar por millón de respuestas atendidas.
Claro, también los desafíos te los cobran.
Los desafíos es la página esa del CAPTCHA que aparece.
Cuando quieres saber si realmente el usuario es legítimo o no, tú le enseñas una página para que tenga que darle un clic.
Ese es el desafío.
Lo que se le llaman desafío o challenge.
Entonces, yo creo que seguramente te puedes salir más a cuenta a tener AWS.
Seguramente.
Seguramente te vas a salir más a cuenta a tener AWS que no...
Tener Cloudflare que no AWS.
Creo yo.
Creo yo.
Por cierto, una cosa que vi de Vercel es que les di un feedback, les di un feedback el otro día a esta gente, a Guillermo, hace tiempo.
Cuando tuvimos todos los problemas estos, les di un feedback de, oye, un problema que hay con la página esta del challenge es que sale siempre en inglés.
Y que además se ve como muy rara.
Y qué bien que justamente he visto esto.
¿Veis?
Le han cambiado totalmente.
Han hecho que sea mucho más limpia.
Y además han hecho que esté en diferentes idiomas.
No aparece por aquí, pero no sé dónde lo he visto.
Pero está en diferentes idiomas.
Está en español, está en inglés, está en alemán.
Está en diferentes idiomas.
Y hombre, creo que está bastante bien.
Porque les di el feedback de que mis padres entraron en la web de La Velada para enseñárselo.
Y se asustaron de que pensaban que habían hackeado la página.
Porque claro, empezó a salir una cosa muy rara.
Con un montón de códigos totalmente en inglés.
Y claro, se asustaron porque pensaron, ¿esta página qué es?
Y yo les dije, claro, es que molaría que fuese una página lo más sencilla posible.
Hola, Midu. Estoy montando mi propio alojamiento de servidores VPS, servidores de juegos, alojamiento web.
¿Me das algún consejo para poder crecer?
El datacenter estaría en España y creo que eso es desventaja.
Consejo para crecer.
No tengo ni idea, la verdad.
Que crees contenido de cómo hacer despliegues y utilices tus propios servicios.
Pero es que es un mercado tan saturado.
El tema de alojamiento de servidores VPS, alojamientos y todo esto.
Que es complicado, es complicado.
Que el datacenter sea en España no tiene por qué ser una desventaja.
Pero obviamente si quieres entrar en el mercado latinoamericano vas a necesitar también tener datacenters cerca de ellos.
Pero yo creo que lo mejor es que enseñes y hagas vídeos y hagas colaboraciones.
Conmigo no, porque yo no acepto colaboraciones con VPS.
Es porque no paran de escribirme de colaboraciones con VPS y todo esto.
Y es que prefiero no meterme en ese merengenal.
Pero a lo mejor creadores más pequeños, que sepas que trabajan con Wordpress y cosas así, y lo puedas hacer.
Y yo creo que eso es con lo que te podría ayudar un poquito.
Vale, vamos a continuar.
Que ya hemos visto tema ataques.
Vamos a continuar con otras cositas.
Tendríamos que evitar que se pudieran seguir haciendo pronósticos.
Así que, por ejemplo, en pronósticos teníamos aquí una API.
Teníamos aquí una API.
La API de pronósticos.
Pages, API, votes.
Claro, esto vamos a quitarlo directamente.
Vamos a poner que esto, todo esto, lo vamos a poner de primeras.
Para, pum, cuando alguien intente votar, directamente se le dan 401.
Entonces, esto sería lo primero, lo más importante, desactivar el backend.
Porque si no, la gente se lo podría saltar.
Entonces, eso, lo primero, desactivamos el backend.
Luego, aquí en pronósticos, que teníamos haz tu pronóstico, cerrar sesión y todo esto.
También el auth lo vamos a desactivar porque tampoco tiene sentido que tengamos el auth.
Así que aquí en el index, redirigiendo a Twitch, sing in de Twitch.
Claro, todo este sing in que hace callback URL, claro, para desactivar esto, esto, no sé si el callback, no se puede iniciar sesión.
No es tanto el callback, esto lo teníamos que tener aquí, ¿no?
Claro, aquí, como vamos a desactivar todo esto, yo esto lo voy a quitar.
Claro, lo que pasa es que esto puede dar problemas.
Creo que puede dar problemas porque si alguien ha iniciado sesión ya,
Ah, vale, pues se queda la sesión iniciada, ¿vale?
Vale, vale, pues eso lo vamos a poner.
Lo que pasa es que esta página de pronósticos, pronósticos, vale, que es esta página.
Veis aquí que estaba buscando la sesión, getSession y todo esto.
Vale, vamos a poner esta página como altastro.alt, ¿vale?
Para que no pille la página, ¿vale?
Vamos a poner aquí una nueva, donde vamos a poner que la nueva página, pues nada, quitamos la sesión, que no mire la sesión del usuario.
Todo esto fuera, esto fuera, ¿vale?
Vamos a ver cómo quedaría, se supone...
Ah, coño, claro.
Lo que pasa es que estaba mirando en producción.
Si miro en producción no me voy a asegurar.
Vale, ahora está vacía, que es lo que queríamos, ¿vale?
Si desactivas el out de los usuarios ya no podrán ver sus votos.
Ya no vamos a querer que vean sus votos, lo que sí que puede ser interesante, a lo mejor, es que se vean todos los pronósticos.
O sea, vamos a hacer que se vean todos los pronósticos, ¿vale?
Aquí en forecast, este forecast que tenemos aquí a mano, ¿esto lo utilizamos en algún sitio?
Forecast, yo creo que esto no usamos para nada.
Forecast, yo creo que está este archivo, Forecast, no usamos para nada.
Yo creo que este archivo, fuera.
Yo creo que ese archivo no sería para nada.
Entonces, lo que sí que vamos a hacer, forecast, es esto.
¿Cómo podríamos hacer esto?
Porque aquí pone combat ID de encontrar cada componente.
Vale, vamos por partes.
Primero, en los combates, que se mostraba aquí el haz tu pronóstico,
este botón de haz tu pronóstico, esto lo comentamos.
Ya no se puede hacer tu pronóstico.
El pronóstico ya está cerrado.
Ya no se pueden hacer más pronósticos.
Hasta aquí han llegado.
Vale, así que esto fuera.
Vale, y ahí desaparece.
Y los pronósticos se pueden ver todavía, eso sí, no hay ningún problema.
Vale, aquí, vale, se ven los pronósticos, pero no queremos que se puedan hacer.
Así que ahí lo tenemos comentado.
Luego, aquí en pronósticos, vamos a traernos todos los combates.
Los combates, vale, y de los combates, lo que voy a querer hacer es mostrar combates, forecast, combat ID, ahí está.
Vamos a mostrar todos los combates.
Pronósticos, vale, lo malo, hostias, que no está pensado para que haya más de un pronóstico en la página.
La madre que lo parió.
La madre que lo parió.
No está pensado para que haya más de un pronóstico en la página.
No, me cago en la leche, yo que quería reutilizar esto.
¿Por qué?
Porque esto seguramente va por la ID.
Va por la ID.
¿Sabes?
Aquí estamos utilizando el Boxer ID, o sea, el Forecast Boxer este.
Estaríamos utilizando la ID.
¿Ves?
Data ID.
Data ID, data ID.
Que también es un rollo, porque esto debe estar haciendo cinco peticiones a la base de datos de golpe.
Bueno, no son peticiones a la base de datos, porque teníamos una caché puesta.
Pero si no me equivoco, ¿ves?
Está haciendo esta.
Ah, pero es que no está haciendo el resto de peticiones.
O sea, en realidad es que no está haciendo el resto de peticiones.
Esto es porque dice, cuando carga este page load, claro, aquí debería, ves que pone aquí un fetch, no sé qué, no sé cuánto.
Vale, a ver, no es imposible, no es imposible.
Teníamos que darle una vuelta, a lo mejor, a esto.
Teníamos que darle una vuelta, porque esto, claro, lo que hace es recuperar solo un atributo.
Este get attribute, forecast, claro, es que esto es una ID.
¿Veis qué es una ID este forecast, que es una ID?
Ese es el problema, sobre todo.
Este forecast, esto es una ID.
Esto es una ID.
Vale, entonces deberíamos, uff, esto es el problema de intentar hacer reusable algo que no era reusable.
Algo que no era reusable lo vamos a querer reutilizar ahora.
A ver, vamos a intentarlo.
No lo demos por perdido.
No lo demos por perdido.
Porque aquí, si ahora utilizamos esto, y le vamos a decir que recupere todos, todos los que tenga, ¿vale?
Esto sea para recuperar todos los que quiera.
Esto sea un node list of HTML element, ¿vale?
Claro, el tema es que ahora aquí deberíamos recuperar solo el primero.
Para no romper nada, ahora esto, todos estos forecast, vamos a poner...
Vamos a recuperar solo el primero.
Vamos a decirle...
No, forecast 0.
Si es diferente a null.
Claro, todos estos me van a fallar porque querySelectorAll.
Vale.
Si la longitud es igual a 0, entonces vamos a hacer solo un return, ¿vale?
Y luego aquí...
¿Qué lenguaje es ese?
Esto es JavaScript.
Esto es JavaScript.
Vale.
Para todos los forecast, para cada uno de los forecast, vamos a hacer todo esto.
All forecast.
All forecast.
Para todos.
Vamos a hacer esto.
No sé si va a colar.
Es que esto es un poco...
Ver si esto cuela.
Y a ver si hay suerte.
No cuela.
No cuela, pero bueno, vamos a ver ahora por qué no cuela.
All forecast.
Vamos a ver.
Aquí, all forecast.
Y aquí tenemos el forecast.
Console log del forecast.
Aquí pillamos el combat ID.
O sea, que no tiene mala pinta.
¿Hay alguna cosa rara?
¿Hay alguna cosa rara?
¿Hay alguna cosa que no me determina?
¿Por qué no me pilla el console log?
Parece que falta un paréntesis en algún lado.
Sí.
Aquí hay algo que falta.
¡Oh!
¡Qué rabia!
Cuando necesitas que Geekhack Copilot te rellene...
Vale, aquí va esto.
¿Vale?
Aquí va esto.
Y aquí va esto.
Y aquí va esto.
Y ahora...
Ahora sí.
Bueno.
Magia.
Magia potagia.
Vale.
Magia.
¡Hostia!
Vale.
Lo bueno...
Lo bueno es que sí que hemos conseguido que ahora nos aparezcan todos los forecast.
¿Vale?
O sea, sí que nos salen todas las predicciones.
Y las predicciones veo que tienen sentido.
Sí, son las correctas.
¿Vale?
O sea, funcionar funciona.
El problema es que el pronóstico este se le ha ido a la olla.
¿Vale?
¿Por qué se le ha debido a ir la olla?
O sea, porque yo creo que debe tener el mismo problema otra vez, ¿no?
Debe haber algún problema exactamente el mismo.
Cuando el forecast encuentra GetAttribute, GetAttribute, Percentage...
Claro, este evento es un poco problemático, ¿no?
Recuérdame por qué usamos los dólares en las variables.
Los dólares son básicamente como hacer un query selector, pero más corto.
De hecho, aquí en el DOM selector lo puedes ver.
Y...
Ah, ¿por qué utilizo el dólar delante de las variables?
Como, por ejemplo, esto.
Esto es para saber que es un elemento del DOM.
Esto me ayuda a saber que es un elemento del DOM.
Vale.
Entonces, solo hay un...
Hay un...
Yo creo que es el evento este.
O sea, yo creo que...
Porque dice, si tienes el porcentaje, entonces envía un evento.
Claro, ¿qué pasa con este evento?
Que el Percentage, Percentage este...
¿Dónde estoy?
Forecast Boxer.
Ese porcentaje...
A ver, ¿dónde?
Este porcentaje, este polémico que me está haciendo ahí algo raro.
Velocímeter.
Claro, ¿ves?
Tiene una idea.
Tiene una idea.
Si tiene una idea, pues nada, otra vez el mismo problema.
Si tiene una idea, pues la aliamos porque no es capaz de determinar a cuál en concreto...
¿Ves?
Claro, aquí tenemos un evento porque esto estaba pensado...
Esto estaba pensado para ser de otra forma.
Entonces, vamos a hacer algo.
Velocímetro.
Venga, velocímetro.
Lo tenemos aquí, el velocímetro.
Vamos a añadirle una idea para tener el velocímetro a nivel del Combat ID.
¿Aquí tenemos el Combat ID?
Sí.
¿Vale?
Pues este velocímetro...
Claro, es que esto...
Esto había que hacerlo mejor, ¿eh?
Lo que pasa es que lo hicimos muy rápido porque teníamos que entregar cosas.
Pero vamos a identificarlo con el combate.
Vale, el rey de la pista no tiene velocímetro.
Entonces, en el velocímetro, el...
Vamos a poner la ID que sea lo que viene con el ID astro.props, ¿vale?
Y aquí, velocímetro, vamos a poner...
Vamos a poner class, velocímetro y la ID que sea la ID...
Vamos a poner aquí velocímetro, ¿vale?
Con la ID.
Bueno, esto todavía no lo arregla del todo porque aquí, ahora este velocímetro, tendríamos
que recuperar el velocímetro.
Aquí puedo poner...
Hostia, no sé si puedo inyectar aquí código.
¿Sabes?
O sea, aquí puedo...
A ver.
Update.
¿Qué estoy pensando, eh?
Esto que le recuperamos aquí.
Draw velocímetro.
Cuando recuperamos aquí el detalle, este detalle, este detalle...
Esto es el evento, ¿vale?
Este evento que recuperamos aquí, el problema...
Claro, es que este canvas, es que esto...
¿Cómo puedo recuperar exactamente...?
He puesto dos clases.
Vale, gracias.
Gracias.
Ahí estáis muy atentos, ¿eh?
Están muy atentos.
No estoy utilizando jQuery.
Esto no es jQuery.
Esto es una utilidad que estoy haciendo yo, ¿eh?
Que al final, es que fíjate, es este el código, ¿eh?
Del dólar y del doble dólar.
Esto es código que he hecho yo para que se parezca a jQuery, pero no tenga que ver con jQuery.
Entonces, aquí este CTX...
Esto lo podemos poner fuera.
O sea, el tema es que quiero que este elemento que yo recupero sea exactamente este de aquí.
El problema es que cómo podemos asegurarnos que sea exactamente el que está recibiendo el evento.
Ese es el tema, ¿no?
Entonces, draw velocimeter.
Cuando tenemos aquí este evento, que le hacemos update velocimeter, o aquí, initial draw with default value, no sé qué, no sé cuánto.
Vamos a ver qué es lo que nos llega aquí en el detalle.
¿Vale?
Aquí en el detail este.
Que me da mucha rabia que este detail...
O sea, que los console.log no los veo.
Y entonces eso hace que me cueste...
Porque la información que le estamos enviando en el forecast, en el evento, lo tenemos por aquí, tú, tú, tú, tú, tú, tú, tú.
Aquí en el evento estamos haciendo el dispatch event y aquí en el evento le estamos pasando el porcentaje directamente.
Claro, aquí además deberíamos ser capaces de enviarle el combat ID, este combat ID, ¿vale?
Combat ID, combat ID, combat ID.
El literal objeto solo puede especificar propiedades conocidas.
Vale.
Entonces, vamos a poner combat ID y el porcentaje.
Y así, lo que vamos a hacer aquí, ahora que sabemos el combat ID en el velocímetro, en el detalle, vamos a recuperar el combat ID y el porcentaje.
En el porcentaje ponemos el porcentaje.
Pero lo importante, claro, es que aquí este evento, aunque nosotros vemos aquí un canvas, como esto lo podemos reutilizar más de una vez,
lo que tendríamos que hacer aquí sería recuperar el correcto, el canvas correcto.
Claro, este ADListener, AstroPageLoad, cuando aquí tenemos el correcto, vamos a tener que recuperar el ID.
Claro, es que el problema, es que este es el problema.
El problema es que este es el pescado se muerde de la cola, porque en este script yo creo que no podemos referirnos a la ID que le está llegando.
¿Sabes? Esta ID, ¿veis? Me dice, esta ID no existe.
O sea, es que esta ID no encuentra esta ID porque no puede acceder a esta ID.
Entonces, claro, aquí le podemos utilizar el define bars y le pasamos la ID así,
pero entonces esto no funciona porque ya no es un elemento, este script entonces es un elemento en línea.
Es que tiene un poco de historia esto, ¿eh?
Al ser un elemento en línea ya no se puede utilizar, por ejemplo, typescript dentro, no se puede importar, no se puede hacer un montón de cosas.
Y por eso ahora empieza a fallar otras cosas.
No pasaría nada, o sea, lo podríamos hacer, podríamos, todo esto que habíamos hecho aquí, pues nada, lo cambiamos por el document query selector.
Pero claro, estaría repitiendo código innecesariamente, pero bueno, podríamos hacer, y esto nos lo debería solucionar,
inyectamos la ID esta, recuperamos este mismo elemento de velocimeter ID, esto tendríamos que quitarle todo lo que es typescript,
o sea, todo lo que es typescript aquí también, ¿vale?
Y este combat ID, bueno, ya claro, no tendría tampoco mucho sentido esto, y podríamos ver si esto funciona.
Y no funciona, no funciona, pero podríamos ver por qué no funciona.
Por ejemplo, aquí que tenemos el porcentaje, ¿vale?
El porcentaje, bueno, aquí nos está devolviendo demasiados porcentajes,
porque el evento, claro, el tema es que este evento está llegando a todo el mundo,
aunque este canvas, que el ID, o sea, este porcentaje se lo está pasando, lo está, lo está machacando seguramente, ¿no?
Claro, está diciendo, este canvas está llegando más de una vez, ¿no?
Está llegando más de una vez.
Como estamos enviando este evento, aquí lo que deberíamos decirle es, vale,
si el combat ID,
si el combat ID es igual, es diferente al ID, devolvemos, ¿vale?
Y ya lo tendríamos.
Ya está, ya está.
Ahora sí que lo tenemos.
Y ya todos tendrían su rayita.
A ver, era un componente, ha sido complicado, bueno, complicado no, laborioso, tampoco complicado, laborioso.
Pero era un componente que no era reutilizable y lo hemos hecho reutilizable.
Entonces, hemos tenido que reestructurar, pero ha sido muy interesante porque esto es la vida real.
Esto es la vida real.
Lo que hemos hecho básicamente es, claro, este componente que antes no era reutilizable lo hemos reutilizado
y era un componente bastante complejo.
Y lo que hemos hecho es dejar de utilizar IDs para pasar clases y allí donde necesitamos una ID, pasársela por props.
Y así hemos conseguido que todo se pudiera reutilizar y ahora lo podamos mostrar todos los forcas en el mismo sitio.
Y ahí lo tenemos.
Entonces, con todo esto, vale, vamos a ponerlo así, vale, hemos quitado esto, que esto no debería dar problemas.
Ahora, los pronósticos, nada más entrar aparecerían estos pronósticos, los pronósticos ya estarían cerrados, digamos.
Cuando vamos a un combate, no, cuando vamos a un combate sigue estando roto.
Vale, está roto cuando navegamos.
Fijaos que cuando navegamos, o sea, cuando entramos bien, cuando entramos bien, pero si estamos navegando, se rompe.
¿Por qué pasa esto?
¿Por qué pasa esto?
Vale, pasa esto, pasa esto, porque el velocímetro...
Ah, no, estoy pensando.
Era un silencio total, creo yo.
Creo que igual al tener canvas de script le podrías extraer el ID.
Vale, bueno, pero da igual, ¿no?
Si ya se lo estamos pasando por fuera, ¿qué más da?
Todavía tenemos aquí un error, que bueno, eso lo podemos mirar, pero este error es raro, ¿no?
Porque, ves, cuando entras directamente sí que está bien, pero cuando estás navegando se le va un poco la pinza.
Habría que ver.
Vale, entonces, remove pronósticos and show already voted once, ¿vale?
Vamos a enseñar solo los votos que ya obtenemos.
Ahora le echaremos un vistazo a eso, ¿vale?
Os voy a enseñar el tema analíticas, ¿vale?
Hostia.
A ver, ¿qué le pasa a esto?
Seguramente hay algún linter que se nos ha petado por ahí.
¿Queréis que os enseñe analíticas?
Analíticas.
Vale, combat ID, combat ID.
Vale, me está diciendo, básicamente, que todo este código no se está utilizando, porque no sé qué, no sé cuánto.
Tiene sentido, entonces lo vamos a comentar.
No necesitamos ya esto, ¿vale?
Eso no es un error, es un warning.
Vamos a ver el linter, a ver si hay otro error.
Tu, tu, tu, tu, tu, tu, tu, tu.
No, vale.
Pues nada, subimos esto y tal.
Entonces, que se puedan hacer pronósticos de la API, eliminar el botón pronóstico, todo esto fuera.
Bueno, ¿qué te pasa?
¿Qué te pasa?
Dice que aquí está sin terminar el código.
Pero esto está bien.
O sea, como que no está, que no está cerrado correctamente.
Pero cuando hago una build, ah, ah, había fallado.
Ah, no, me está diciendo que, pero si está haciendo una build y funciona bien.
Es, no sé, debe ser algo raro que ahora mismo no pillo.
A ver.
¿Qué habíamos puesto aquí?
Tenemos pronósticos, no sé cuánto.
Push.
No verify, ya está.
A ver, ahora miraremos si nos falla la build y tal.
¿Qué queréis ver, las analíticas o las mejoras de SEO?
Lo que queráis.
¿Qué queréis ver?
Todo en inglés o todo en español.
Bueno, ¿qué más da?
El SEO.
Venga, pues vamos a ver el tema del SEO.
El tema del SEO, no sé si conocéis, hay una herramienta que es vital para el mundo del desarrollo web.
Que si no lo tenéis, deberíais tenerlo, ¿vale?
Que en vuestras páginas se llama Google Search Console, ¿vale?
Es esta de aquí.
Que esto, registrarse gratis, es algo que es de la gente de Google y que al final te da información sobre el rendimiento de tus páginas web.
Por ejemplo, te dice, yo que sé, pues si vas a la web de JavaScript 100, te dice cuál ha sido su rendimiento de cómo se está buscando, cómo se está indexando.
Además, podéis verlo a lo largo del tiempo, lo cual es brutal.
En esto tenemos aquí, en los últimos 12 meses, ¿vale?
Y podéis ver cómo ha evolucionado vuestra página.
Y aquí podéis ver cuántos clics se han hecho en la búsqueda, cuántas impresiones.
Esto no está apagado, porque esto no lo explica en el tato.
Esto no explica a nadie.
Pero bueno, porque muy poca gente ha trabajado realmente de estas cosas y la gente lo desconoce.
Que yo alucino que hay gente muy flojita ahí fuera trabajando y que no conozca estas cosas que son vitales.
Pero bueno, Google Search Console es totalmente gratis.
Es una herramienta de Google y que la puedes registrar para tu portafolio o lo queréis.
Esto es vital, ¿vale? Esto es vital.
¿Y qué podéis ver?
Podéis ver cuántos clics se han hecho en las búsquedas, cuántas impresiones, cuál es el CTR medio.
El CTR significa cuántos clics se han dado teniendo en cuenta cuántas veces se ha mostrado.
Y por ejemplo, la página de JavaScript 100, una de cada cinco veces que se muestra, la gente le da clic.
La posición media de cada uno de los resultados.
Bueno, esta es una herramienta brutal.
Y aquí podéis ver las consultas que la gente hace.
Por ejemplo, hay gente que está buscando mi DUDEP 100 proyectos y con esto están encontrando mi página.
Hacen así, DUDEP 100 proyectos y resulta que sale aquí la primera.
Y aquí lo podéis ver.
Es que le dais aquí y aquí podéis ver que la gente busca esto.
La posición en la que está ese resultado, o sea que es brutal, es tremendo.
Y además la evolución que ha tenido.
También podéis ver temas de rendimiento.
El rendimiento para los usuarios es bueno, es malo.
También cómo ha ido mejorando, si hay páginas que están teniendo problemas, si no.
En este caso, la página de JavaScript 100 es bastante pequeña y por lo tanto no hay muchas páginas.
Solo tiene seis, pero las seis que tiene, tiene buen rendimiento.
Y aquí además podéis tener más de una página.
Por ejemplo, aquí tenemos la página de midu.dev, la React.js y la velada.
También de la velada, también lo tengo.
Y el de la velada es muy interesante porque tenemos un montón de información muy chula.
La posición media es nueve.
Eso es bueno o malo.
Que sea nueve es regulín.
Porque lo ideal es que fuese uno.
Que siempre fuese el primer resultado.
Pero no podemos controlar siempre salir arriba del todo.
La posición media no es tan importante porque al final puede salir en la cuarta posición por cosas que a lo mejor no deberías aparecer.
Y qué bien que aparezcas.
Entonces es complicado.
Es complicado decir si la posición media es buena o mala.
Pero obviamente cuanto más arriba sea la posición media, pues mejor.
Entonces, de la velada.
Cosas interesantes.
Entonces, a nivel de indexación podemos ver cómo ha ido mejorando el número de páginas indexadas.
Hay muchas que no se han indexado porque ya sea porque no se han encontrado, porque no se interesaban.
Por ejemplo, hay muchas imágenes que eliminamos y que normal ves el web 3, no sé qué.
Hay un montón de URLs que estén mal formadas.
Estas de Cesar Blue Unicornio.
Esta página es un 404 y por eso no la crean.
Entonces no pasa nada.
Pero lo importante es que las indexadas sí que sean las correctas.
Aquí podemos ver también con el número de impresiones, cómo ha ido mejorando el número de impresiones a nivel de SEO, lo cual es brutal.
Y aquí tendríamos los resultados de búsqueda, que esta es la más interesante.
Aquí podemos ver cómo ha evolucionado los resultados de búsquedas de la velada a lo largo del tiempo.
Por ejemplo, vamos a poner en los últimos 16 meses y vais a alucinar con esto.
Vais a alucinar.
Mirad, aquí ya existía la web de la velada.
De hecho, podéis ver aquí.
¿Veis este pico?
No sé si veis.
Es un piquito muy pequeño.
A ver, no sé si se ve.
Pero aquí, esto, ¿veis?
Aquí, el 1 de julio del año pasado, aquí hay un piquito muy pequeño donde hubo 1.000 clics y 2.900 impresiones.
¿Sabéis qué es esto?
El 1 de julio.
El 1 de julio del año pasado fue la velada del año 3.
Fue el 1 de julio del 2023.
Y el 1 de julio, el año pasado, justamente mucha gente buscó la web de la velada.
Pero fijaos la diferencia del año pasado, de cómo ha mejorado el SEO.
El año pasado, 1.000 clics.
Este año, 3 millones de impresiones, 200.000 clics.
Esta es la diferencia entre tener una página que está bastante bien cuidada con SEO, con tal.
Claro, tengamos en cuenta que la página del año pasado era esta que os voy a enseñar ahora, que era una landing page muy poco optimizada, no solo en rendimiento, sino que también además, creo, no me acuerdo si, yo creo que, no sé si el contenido aparecía.
No tenía mucho texto, mucho texto al final eran imágenes, o sea, la verdad es que era una página bastante flojita porque no le dieron mucho cariño, por tiempo, por lo que sea, ¿no?
Entonces, ya veis que la mejora solo en SEO, en tema de la velada, el año pasado, en impresiones, siendo la página oficial, solo apareció el día de la velada, 2.900 impresiones.
Este año, el día de la velada, ha aparecido en 3 millones de búsquedas.
3 millones de búsquedas.
Es que la diferencia es espectacular.
Y esto es para que veáis cómo de importante muchas veces es esto.
Aquí también podéis ver el momento en el que empezamos el desarrollo.
Fijaos que aquí podéis ver pocas impresiones, esto es la página anterior, y empezamos el desarrollo sobre febrero.
En febrero, fijaos la diferencia, esto en noviembre, noviembre, noviembre, noviembre, y aquí en febrero es donde empezamos ya a tener nuestro primer desarrollo.
Aquí hicimos la primera landing, la primera landing, que tampoco estaba todavía muy optimizada, poco a poco cómo ha ido mejorando.
Ya en marzo, 8.000 impresiones, 8.000 impresiones, 1.500 clics.
Podemos ver cómo poco a poco ha ido creciendo y ha ido mejorando que la gente haya estado, que la haya visto en el buscador.
¿Qué pasó el 11 de abril?
11 de abril.
El 11 de abril es el día que se ponen las entradas a la venta.
Y por lo tanto, mucha gente, ¿qué hizo?
La velada, entradas, ¿no?
La velada, entradas, a lo mejor, claro, la primera que sale es entradas.com, pero ¿qué aparece en la segunda?
La velada.es.
Esto antes no aparecía, obviamente.
Esto no estaba, no existía, y por lo tanto no pillábamos ni un, vamos, ni una visita de estas.
Ahora sí que las estamos tomando.
La velada, entradas.
La velada, combates.
Pues, ¿qué pasa?
La velada, combates.
Hay un montón de información y tal, pero ya va a aparecer.
No es el primer resultado porque, por desgracia, es complicado ahora de la nada.
Hay que hacer muchísimo trabajo todavía para lograrlo.
No es imposible, pero ahora sí que está empezando a aparecer.
Y además, una página que no es la página principal y que está apareciendo por aquí.
Claro, ahora, trabajar contra la Shataka, que también tiene un montón de trabajo, pues, claro.
Hay que mejorar un montón de cosas todavía y todavía hay cosas que podríamos mejorar, ¿eh?
Pero fijaos que ya empieza a haber un montón de cosas.
La velada, combates, o yo qué sé, buscar Alana, la velada, cuatro, ¿no?
Pues, claro, fijaos.
¿Qué aparece aquí?
Alana, la velada, cuatro.
¿Qué aparece aquí?
Nuestra página.
Alana, la velada, cuatro.
Entonces, este tipo de cosas, que parecen una tontería, que parecen una tontería, pues, no son ninguna tontería.
Porque esto es lo que ha hecho que, poco a poco, hemos ido recuperando.
Cada vez hemos tenido, cuanto más gente estaba buscando por aquí la página de la velada o información sobre la velada,
fijaos que hemos visto que ha ido subiendo.
Y el día, el día de la velada, que la gente buscaba en internet, la velada, la velada.
Claro, la gente buscaba la velada, la velada, pum, la velada.
¿Y qué te aparece ahora?
Lo primero, la velada, ¿vale?
Ya te aparece la página web de la velada.
Además, aquí, combate, selling, tal, que esto es súper importante y que te da un montón de posibilidades de conseguir visitas, ¿vale?
Aquí tenemos lo que la gente ha buscado.
La velada del año cuatro.
Esto es lo más buscado, la consulta principal, la velada del año cuatro, que también salimos el del primero,
que es normal porque somos la página web oficial, pero aún así no era fácil teniendo en cuenta que antes,
ya antes, ya os digo yo que antes la gente, cuando buscabas personalizado, vamos a poner el año pasado.
Cuando la gente, por ejemplo, buscaba la velada del año, ¿qué es lo que pasaba?
Y aquí se ve un poco la mejora que hemos tenido importante en cuanto a rendimiento.
Porque el año pasado, ¿qué es lo que la gente buscaba?
Pues la gente buscaba la velada.
La gente buscaba la velada.
Y fijaos que ni siquiera entonces, ni siquiera entonces siempre era la posición, la primera posición.
Sí que si buscabas lavelada.es, que es el dominio, aparecías el primero.
Pero fijaos que tú buscabas la velada.
La velada del año tres web.
Uno con siete.
La velada del año web.
La gente buscaba, bueno, no lo veis, pero os lo enseño.
La gente buscaba la web y no la encontraba.
La gente buscaba la web.
La velada del año web, dos con tres.
O sea, buscando web oficial, uno con tres.
Que a ver, tendría que ser uno.
Lavelada.com.
Bueno, ahí me hace gracia, ¿no?
Velada del año tres web, dos con siete.
O sea, había páginas que no eran la página de la velada que se ponía por delante.
Esto es del año pasado, ¿vale?
Este año, lo que si miramos los últimos tres meses, ¿vale?
Podemos ver que en otras...
Claro, estos son la velada del año cuatro como algo general.
Pero es que estos son cosas que antes no aparecíamos en ningún sitio.
Fijaos que ahora no es que nuestras consultas sean la velada del año web.
Sino que la gente ahora está buscando cosas todavía más genéricas como velada y buy.
Velada y buy.
Velada del año.
O sea, ya no web.
Sino cosas más generales.
Y todavía nosotros estamos entrando en que sean cosas que aparecemos de los primeros.
Lo cual está impresionante.
Por ejemplo, peldaños velada.
O sea, la gente ahora estaba buscando un combatiente.
Y nosotros somos parte de los resultados.
Que esto es una cosa que no ocurría antes.
Por eso ahora, el problema que os decía.
Aunque ahora la posición media puede ser que sea peor.
El tema es que en realidad es positivo.
Porque es que estamos saliendo en más resultados.
El problema es que antes solo salíamos en resultados muy específicos.
La velada punto es.
Claro, la velada punto es es que es el dominio.
¿Cómo no vamos a salir?
El tema es que ahora, por ejemplo, hay gente que buscaba Plex versus Mariana.
Y aunque no salíamos de los primeros, salíamos.
Cosa que antes no ocurría, ¿no?
Es interesante porque, por ejemplo, César Blue edad.
César Blue edad.
Pues claro, no salimos de los primeros.
Pero fijaos que somos el segundo resultado.
Esto es una cosa que antes no ocurría.
Porque tú antes buscabas virus edad y no aparecía.
En cambio, sexto, lo que estamos haciendo es darle cada vez más importancia a la web de la velada.
Creando contenido específico para la velada.
Y que además, pues aquí tenemos la edad.
O sea, que para que veáis un poquito cómo hemos podido poco a poco hacer esto.
¿Cómo se consigue ese posicionamiento?
Lo primero y lo más importante, teniendo información y contenido de calidad.
Contenido que sea tuyo, ¿no?
Lo segundo, tener una página que realmente informe correctamente de este tipo de información.
O sea, que muestre bien la información, ¿no?
Deberías hacer un vídeo explicando más de eso del SEO.
Bueno, ahora lo estamos explicando, ¿no?
Faltó poner sección en referencia a los de los artistas.
Nos faltó lo de los artistas, pero bueno, lo haremos para la próxima del año.
Algo que nos faltó fue el itinerario, pero para la siguiente.
¿El itinerario?
Eso no lo entendió.
La función de predicción sirvió bastante.
Influyó en todas las casas de apuestas.
Aunque no hayamos encontrado con algunas sorpresas en algunas peleas.
Influyó un montón.
El tema de la predicción, ya os digo.
Que si el año que viene la hacemos, la página web.
Que toquemos madera para que la podamos repetir.
Y la hagamos todavía más increíble.
El año que viene, el tema de las predicciones lo vamos a hacer todavía mejor.
Y le vamos a dar mucho más, mucho más peso.
Mucho, mucho, mucho más peso.
Y creo que eso le va a dar un toque no solo de calidad, sino que va a ser importante.
De hecho, para finales de este año, vamos a tener otro proyecto.
A nivel de la velada, yo creo, que estaría bien, que vamos a darle bastante caña.
Pero fijaos en esta búsqueda.
¿Cuánto mide Roberto Zein?
¿Qué aparece aquí?
La velada del año 4.
Esto es, esto es lo brutal, ¿no?
El hecho de cómo hemos podido hacer poco a poco, el hecho de cómo hemos conseguido posicionar la web de la velada en un montón de búsquedas más allá de las típicas, ¿no?
Y esto, ¿cómo lo hemos hecho?
Teniendo una página web atractiva, que dé la información que la gente está buscando.
Que además sea rápida, que tú entres a la página, ¡pam!
Y cargue rápidamente, porque así le estamos dando la información que busca el usuario y se está dando rápido.
Que sea información clara, precisa.
Por ejemplo, edad, 25 años.
Que sea fácilmente escaneable.
Que además tengamos diferentes páginas con títulos, descripciones.
Y que así, por ejemplo, aquí, pues Roberto Zein, la velada del año, no sé qué, no sé cuánto.
Y podríamos haberla mejorado.
Me extraña que aquí no tenemos una descripción.
Description.
Hola, Medu.
Ah, sí que tenemos descripción.
No sé si ya lo dijiste o si se pueda decir, pero en promedio, ¿cuánto cuesta una web como la de la velada?
Muchas gracias por tu contenido.
Saludos.
Hombre, la web de la velada, yo creo...
¿Queréis que os diga cuánto yo creo que debería haber costado la web de la velada?
Os voy a decir cuánto yo creo, teniendo en cuenta todos los perfiles, todo el evento que es, el impacto que tiene y todo esto,
yo creo que la web de la velada, fácilmente, teniendo en cuenta que se hizo el diseño desde cero,
o sea, a mí no me dieron el diseño, lo hicimos desde cero y lo hizo David, mi amigo, que hizo un trabajo brutal,
que ha habido más de 200 contribuidores, que contratamos a dos personas,
el trabajo que he hecho yo de estar aquí, toda la exposición y tal, yo creo que fácilmente de 15 a 20.000 euros.
De 15 a 20.000 euros, o sea, fácil.
De hecho, de hecho, lo que más, lo que esto sí que me da pena, es que no tengo ningún género de dudas,
no tengo ninguna duda de que hay páginas ahí fuera que se han hecho,
de la velada no creo porque la de la velada el año pasado era demasiado simple como para que le hubiera costado mucho dinero,
pero hay páginas ahí fuera de eventos y tal que se hacen que no están tan trabajadas como la de la velada,
ya no digo por mí del trabajo que he hecho yo, sino el trabajo que hemos hecho todos
y que le cobran más de 20.000, o sea, más de 20.000.
O sea, yo no estoy teniendo en cuenta el impacto que hemos tenido a nivel de comunidad,
de hacer los streams y tal, sino solo de desarrollo.
Yo creo que de 15 a 20 es seguro.
Menudo me lo estás abriendo.
Bueno, pero es que a ver, Elena, sinceramente, en una empresa de estas de gestión de talento o de marketing
que te creen una página así, que te va a hacer un estudio del SEO, que te lo va a estar posicionando,
que ha contribuido un montón de gente, que te ha hecho el diseño, que ha hecho iteraciones,
que, o sea, ha hecho un montón de trabajo, que ha hecho la primera landing.
Hicimos dos landings, una primera landing y luego esta.
Todo el tema de monitorización, la seguridad del evento, la página web se ha caído cero segundos,
cero segundos, teniendo ataques, teniendo que Ibai estaba viendo la página el día de las entradas.
Una de las cosas que más le preocupaba y con razón al equipo de Ibai, Cosmos,
era el tema de que cuando fuesen las entradas que se cayese la web.
La web no se cayó.
La web de las entradas fue un poco regular, pero todo el tema de monitorización, control de seguridad,
analíticas y tal, y la web se ha caído cero.
O sea, yo creo que 15.000 a 20.000, fácil, fácil, ¿eh?
O sea, yo creo que es fácil, porque ya si tenemos en cuenta el tipo de evento que es,
la exposición extra de hablar en redes sociales, de hacer el stream en Twitch y todo esto,
yo creo que se podría haber ido a más si ya hubiéramos añadido como yo como creador de contenido
hablar de la velada y tal, pues creo que podría haber sido fácilmente ya a más.
¿Qué es lo que pasa?
Y a ver, podemos hablar de esto y porque para mí, o sea, para mí ha sido un placer hacer esto
y encantado, gracias a Infojobs, que pudimos contratar a dos personas que al final se le pagaron 2.500 euros
y también se me pagó a mí y tal, ¿no?
Pero, a ver, por desgracia, yo creo que lo de la web ha sido un éxito brutal
y hemos tenido que el Showcast viese la web, Ibai, que un montón de gente he visto en YouTube,
en casas de apuestas que han estado viendo la web y tal.
Yo creo que lo hubiera explotado más si le hubiéramos dado importancia a la web.
Por ejemplo, si Ibai, mientras están hablando de la velada y tal,
hablan de las predicciones que hay en la web,
se le da como, ¿sabes? Como que se da, se retroalimenta, ¿no?
¿Sabes? Que se retroalimente, que las predicciones,
cómo son en tiempo real las predicciones,
lo que la gente está votando, mostrarla más,
que a mí es una cosa que me sorprende, ¿no?
Yo creo que hay mucho juego que todavía se le puede dar.
Por ejemplo, el día del pesaje se podría haber dicho
cómo van las predicciones de la web.
Y es que, por desgracia, no somos a veces conscientes
de lo que une una página web.
Porque, obviamente, Ibai tiene un altavoz increíble en su canal
y es tremendo.
Pero el retroalimentarlo con la página web,
yo creo que le podría haber dado una entidad a la página web
que hubiera sido espectacular.
El hecho de, en los días del pesaje,
cada uno de los pesajes, que apareciese la predicción
y que dijesen,
id a votar a la página web de la velada,
haz tu predicción y no sé qué,
y te puedes llevar.
Y vamos a sortear entre toda la gente que tal,
pues algo de un patrocinador y todo esto.
Y hubiera sido espectacular.
Hubiera sido espectacular.
Ya entre que, si aciertas,
las personas que acierten todas las predicciones
van a llevarse gratis esto.
O sea, hubiera sido increíble.
No, palo Ibai, no, para nada.
No es un palo Ibai, hombre.
Qué va, sí es increíble.
Sí es increíble lo que hace
y es increíble el trabajo
y la de cosas que tiene que tener en cuenta.
Es espectacular.
No es un palo para nadie.
Es algo de cara al futuro
de qué podríamos hacer mejor.
No es un palo para nadie.
Sino que yo creo que
cosas que todavía se le podrían sacar
mucho más, mucha más chicha.
Yo no creo que esto sea un palo, hombre.
Yo lo que creo que, sinceramente,
podríamos llevarlo al siguiente nivel, ¿sabes?
Podría ser todavía más brutal.
Más brutal.
Y cosas en tiempo real y cosas así.
Porque, bueno, viendo lo que hemos hecho,
yo creo que al final podríamos
para la siguiente hacer algo más brutal.
Más viendo eso, ¿no?
Que al final ha triunfado mucho
el tema de las predicciones
y casi no le hemos dado
ningún tipo de publicidad.
Y el hecho de, de repente,
te pones a ver al Shokas
que está viendo la página web
y está viendo las predicciones,
¿sabes?
Esto es realmente lo que se buscaba
con la página web, ¿sabes?
El hecho de retroalimentar
y que los streamers
se pusieran a ver también esto,
que fuesen viendo los pronósticos,
que compartiesen los suyos.
Mira, esto es de la web.
Todo esto es de la web.
Y eso es la gracia.
Yo creo que ese es el éxito realmente
que había un poco, ¿no?
De decir, ostras,
pues hay un sitio
que lo van mostrando,
que no sé qué.
Bueno, esa es un poco la idea, ¿no?
¿Ves?
El Shokas, por ejemplo,
no sabía que había predicciones.
Claro, por eso digo, ¿no?
Que al final, imagínate
si se...
se está equivocando la gente.
Él no dice 25.000
como un precio justo.
Él dice 25.000
como muy poco.
Si lees entre líneas
el precio bajo
que cobró por la página
es más que nada
por exposición
que obtuvo él
y su comunidad.
Bueno, ya os lo dije
que una cosa
es lo que yo creo
que podría haber costado.
Claro, faltó más promoción.
Yo creo que a lo mejor
podríamos haber hecho...
No yo,
porque yo al final lo tengo,
pero a lo mejor
hubiera sido para...
Ya, también hay que tener en cuenta
que este año
lo pudimos hacer
gracias a Infojobs,
que patrocinó
todo este desarrollo
y tal,
pero yo creo que
con más tiempo
se pueden hacer
más cositas, ¿no?
Usar la web
como punta de lanza.
Ahí está, ¿no?
Si hubieras puesto
en página principal
hubiera enganchado
las predicciones.
Bueno, sí, puede ser,
puede ser.
No puede ser, ¿eh?
O sea, puede ser
y a lo mejor
para más adelante
pues le daremos una vuelta
y ya mejoraremos.
Yo creo que dentro
de lo que cabe
pues ha estado súper bien.
Ahora, aparte de esto,
aparte de esto,
cosas más...
La verdad es que es brutal.
Las cosas que buscaba
la gente,
la gente...
Puedes ver aquí como...
¿Cuánto mide Zelink?
Pues también.
¿Cuánto mide Zelink?
También,
también es una de las primeras...
De las primeras.
¿Ves?
Zelink, la velada del año 4.
Claro,
es que este tipo de cosas
la verdad es que
ha dado mucho, mucho,
mucho juego.
Otra cosa
es el tema
de las visitas.
Claro, yo no tengo
información
de qué visitas había antes.
Eso sí que no tengo
información
de qué visitas
son las que teníamos antes.
Que es una pena.
Aunque
nos podemos...
No sé.
No sé cuántas visitas
tenía antes.
No tengo ni poquete de la idea.
Pero podemos ver
cuántas visitas
ha tenido ahora.
Cuántas visitas
ha tenido ahora
que creo que
sí que es bastante interesante
porque podemos ver
un poco algunos picos.
Yo he utilizado
en este caso
Vercel Analytics
y ya les he dado
mucho feedback
a la gente de Vercel
porque creo que
es una herramienta
bastante mejorable
y más teniendo en cuenta
el precio que tiene.
Mira, 48 personas online ahora.
Por ejemplo,
no se puede filtrar
por fecha
y ya les he dicho
a ver,
esto no puede ser.
Yo tengo que poder ser capaz
de filtrar
por cualquier fecha.
No de 7 días,
30 días,
no sé qué.
Es un poco complicado.
Pero bueno,
podemos ver
los últimos 12 meses,
aunque obviamente
yo empecé a ajustar
a partir de aquí,
a partir de febrero
a finales,
creo que es cuando
empezamos a desarrollar
la web de la velada.
Lo voy a poner aquí
para que lo veáis todo.
Aquí es donde empezamos.
Ha habido
1,2 millones de visitantes,
4 millones de páginas vistas
que yo creo que han sido
bastantes más
y os explico por qué.
El tema es
que si utilizas Brave,
si utilizas Chrome
con cualquier sistema
de bloquear publicidad
y tal,
no cuentas.
Entonces,
es bastante probable
que mucha gente
no se cuente
pese a eso.
Puede ser.
O sea,
no me extrañaría.
Así que habrá muchos
en los que no encaje.
Yo creo que ha habido más,
pero bueno,
no pasa nada.
¿El doble?
No sé si el doble.
Yo creo que habrá habido más,
pero bueno,
como indicador
ya nos sirve.
Aquí tenemos
cuando empezamos
a pocas visitas.
Aquí esto fue
el día de las entradas,
128.000 en un día,
en un solo día,
tuvo 128.000 visitas
la página.
O sea,
brutal,
espectacular.
Luego,
seguimos por aquí.
No sé qué pasó
este día,
en mayo,
el 22 de mayo.
No tengo ni puñetera idea.
No sé si comentaron
alguna cosa más.
No sé si aquí fue
cuando Ibai comentó
lo de la página web,
que dijo que reaccionó en vivo.
Puede ser.
Y luego aquí
tendríamos el día de la velada.
Claro,
mucha gente estaba buscando
la velada en internet
y ahí llegaban,
pues,
a la página web.
La página web y tal.
Un TikTok viral,
puede ser,
puede ser,
puede ser.
El día de los artistas
también puede ser,
la verdad,
puede ser.
Puede ser.
Aquí también,
este día,
aquí,
porque hay dos crecimientos
bastante bestias.
Claro,
el 12 de julio
fue el día del pesaje
y también fue el día
que el showcase
reaccionó a la página web
y la estuvo viendo
y fue viendo las predicciones
y todo esto.
Entonces,
obviamente,
conforme se iba acercando
el evento,
pues,
iba habiendo cada vez más hype
y al final,
el 13 de julio,
pues,
fue la locura.
Y luego,
pues,
fue bajando
hasta ahora,
pues,
ya se está bajando.
Aquí podemos ver
a tres meses,
podemos ver mejor
el pico o 30 días,
¿vale?
Podéis ver aquí
que el 12 de julio
el día del pesaje,
el showcase y todo esto
y luego el 13 de julio
que fue el día,
pues,
nada.
El 14 de julio
todavía había bastante.
Supongo que hay gente
que quería saber
qué había pasado en la velada,
si se había perdido algo
y todo esto
y ya lo tenía.
Así que,
esto ha sido un poco
como ha ido la cosa.
En un mes,
este último mes,
dos millones de páginas
más vista,
600.000 visitantes únicos.
La página más vista,
aparte de la principal,
ha sido la de combates
y la segunda,
la de pronósticos.
De boxeadores,
el Mariana
y de combates,
el del rey de la pista.
Luego,
de boxeadores,
el segundo ha sido Plex,
tercero Alana,
cuarto Zelin
y quinto Xelao.
También,
el segundo combate,
el Mariana vs Plex
y el tercer combate,
el de las chicas,
por delante de Agustín
y Carrera.
Los buscadores,
pues Google.com,
aquí han estado buscando a tope,
el país principal
ha sido España,
segundo México,
bueno,
segundo Francia,
ah no,
cuarto,
perdón,
Francia ha sido cuarto.
Primero España,
segundo México,
tercero Chile,
Colombia,
Argentina,
el sistema operativo
más utilizado
ha sido el de iOS,
sorprendentemente.
O sea,
la gente lo estaba viendo mucho
con el móvil,
con Mobile Safari,
o sea,
claro,
a lo mejor es que en España,
me sorprendió muchísimo esto,
mucho,
mucho,
mucho,
porque,
no sé,
debe ser que en España
mucha gente tiene el iPhone,
debe ser,
¿qué te hicieron en Francia?
No me hicieron nada,
no me hicieron nada,
solo es algo histórico,
lo de Francia y España.
Así que,
estos son un poquito
los datos finales
de la web de La Velada,
que espero que os haya gustado mucho
el desarrollo que hemos hecho,
yo creo que ha sido
un éxito brutal
y que nos lo hemos pasado
increíblemente bien.
No sabía que Versel
ofrecía tantos datos.
Esto es de pago,
esto es un servicio
de Versel Analytics
que creo que hasta 100.000 eventos
son gratis
y a partir de ahí
tienes que ir pagando,
¿vale?
Así que,
tenerlo en cuenta.
Luego,
en tema de costes,
lo que es el servidor,
no sé,
ha debido costar,
voy a poner
como unos
50.000,
50.000,
no,
unos,
voy a poner de media
unos 50 dólares al mes,
más o menos,
que es una página
increíblemente grande
para que solo sean
50 dólares al mes.
¿Por qué 50 dólares al mes?
Porque
hemos pagado Cloudflare
para proteger mejor La Velada,
que eran 20 dólares,
hemos pagado Versel,
que eran otros 20 dólares,
pero aparte,
algún mes
hemos hecho algo extra
también en Versel,
como por ejemplo
para las analíticas,
para monitoring
y todo esto.
Entonces,
pues no sé,
de 50 a 70 euros
al mes,
pongamos que ha costado
La Velada,
50 a 70.
Máximo,
a lo mejor un mes 100
y a lo mejor otro mes 40 dólares,
porque empezamos en febrero,
¿vale?
O sea,
seguramente julio ha sido
el mes más caro
y febrero fue el más barato.
Febrero fueron solo 20 dólares
porque solo pagamos Versel,
luego añadimos Cloudflare,
entonces más o menos
para que os hagáis una idea,
¿no?
¿Es caro?
No me parece que haya sido caro,
más teniendo en cuenta
una página
que se ha protegido
y que ha sido capaz
de controlar todos los ataques
y que ha contestado,
ha respondido súper,
súper,
súper bien.
¿Quién lo patrocina?
El coste del servidor
y todo,
lo pagará Infojobs,
en este caso,
porque es el patrocinador
de la página web
y lo tenéis aquí,
además.
Así,
web patrocinada por Infojobs.
Yo les pasaré todos los costes
del servidor y tal
y ya está.
Así que nada,
creo que fue súper bien.
Buen trabajo
y muchas gracias
por la información.
Bueno,
esta era un poco la idea,
que vieseis,
no solo que terminásemos
el desarrollo
de la velada,
que ahora terminaré
alguna cosa más
que tengo que hacer,
¿vale?
Para poner los vídeos
de los combates
de cada uno
y nada,
que ha sido un verdadero placer
poder crear,
desarrollar
con todos ustedes
la web de la velada,
que sepáis
que todo el código
está disponible
y le doy las gracias
al equipo de Ibai,
a Cosmos,
a todo el equipo
de la velada,
que ha sido espectacular
trabajar con ellos.
Creo que ha sido un éxito,
que ha sido genial.
Yo me lo he pasado súper bien.
Hemos dado una oportunidad
a un montón de gente
de que podáis trabajar,
225 contribuidores
y nada,
que ojalá podamos traer
más proyectos como este
a la comunidad.
Ya os digo yo
que estamos trabajando activamente
para que esto pase
antes de que acabe el año
y traeros proyectos
muy,
muy,
muy chulos.
Así que nada,
espero que os lo hayáis pasado
súper bien
como me lo he pasado yo,
¿vale?
Los chicos que estaban trabajando,
bueno,
trabajaron dos semanas,
medio tiempo,
Joel y Alejandra
entregaron bastante cositas
y fue genial.
y ahora,
lo he pasado yo,
¿vale?
Of course,
o mayor Trip