¡Muy buenas tardes! ¿Qué tal? Bienvenido, bienvenida.
Hoy toca revisión de currículums de webs y porfolios.
Frontend, backend, devops...
Ojo, ojo, esto se está moviendo mucho.
Vale, eso fuera.
En el mundo del desarrollo web,
cuanto antes le podáis enseñar la información
de lo que quiere ver el usuario, mejor.
Pantallas de carga y todo esto,
las tenéis que evitar siempre que podáis.
¿Cuánto es? Mira, uno, dos, tres, cuatro...
Cuatro segundos.
Si quieres animar, puedes animar algo aquí,
lo que tú quieras,
porque la experiencia del usuario es súper rara.
Seguramente te va a dar incluso una mala nota
en temas de rendimiento.
33 segundos.
Un reclutador, ves a bandera de cargas
y antes de que se muestre la info,
cierra la ventana y que venga el next.
No sé si serían tan bestias, ¿vale?
Pero puede ser.
Fíjate que el texto lo tienes,
pero a ras lo tienes que separar un poquito.
Tiene que tener un poco o un max width
que no pueda estirarse tanto,
pero te tienes que asegurar también
de que tenga un gap,
lo separas un poquito y ya está.
Me gusta el naranja ese que has puesto.
Igual te quedaría mejor hacer esto.
Esto es blanco, aquí sigue blanco,
esto sigue blanco
y así lo que conseguimos un poco,
igual un pelín menos.
Mira, podemos jugar con este orange
más cerca al blanco
para que le dé desde el principio
un poquito de vidilla
para que no quede tan blanco, blanco.
¿No es un poco raro que este título
sea tan grande como el título?
O sea, este subtítulo debería ser
un pelín más pequeño.
Estos son como los proyectos.
Están bonitos.
Es una pena que este no funciona.
A ver, otra vez la carga de 4 segundos.
Yo lo pondría al revés.
Vuestro propio portfolio,
vuestro propio blog y todo esto
está bien,
pero ponerlo más,
cuanto más abajo mejor, ¿eh?
Yo creo que esto también lo podría simplificar un poco.
Dejar estos tres.
La luna es verdad que ocupa como demasiado espacio
y no sé qué quiere decir.
Mira, Artem,
lo primero que veo
es otra vez lo que digo muchas veces, ¿no?
Todo rato blanco, todo rato blanco.
Pero el problema es
que no crea la sensación esa,
jerarquizar, gracias.
Y se hace muy aburrido entonces.
Compasión para aprender y crear.
No pongáis lo que pondría cualquier persona.
Te reto a que pienses
qué es lo que yo marco la diferencia,
por qué soy diferente al resto
y cómo lo puedo explicar.
Y es difícil, es difícil.
Mira, yo creo que antes de poner esto,
pondría esto de proyectos arriba.
Y aquí a lo mejor puedes poner cada uno
qué es lo que has utilizado.
Imagínate que nada más entrar
y además que le da color
y le da vida a tu página,
se vean todos los proyectos
que como freelance has hecho.
Si esto lo quieres poner,
yo lo pondría abajo,
aunque creo que esto,
con los propios proyectos,
ya lo explicaría.
No sé por qué esto lo hacéis muchas veces.
Poner en el footer las redes sociales,
cuanto más abajo mejor.
Yo, GitHub y LinkedIn,
los puedes poner aquí arriba.
Deeply Appassionate.
Entonces, al menos Alexis es
profundamente apasionado.
He llegado a un nivel más,
profundamente.
Mira, mira que está bonito.
Súper sencillo, fácil y tal,
pero no me gustan los botones.
Ya que tienes aquí
dos iconos botones
que podríamos decir,
yo los alinearía aquí.
Lo voy a hacer mal,
pero solo para que lo veamos visualmente.
Voy a hacerlo a manija.
¿Esto qué es?
No, no, no, no, no, no.
Alexis, íbamos bien,
pero he visto algo
que no me ha gustado nada.
Sí, íbamos bien.
Estaba fácil, pa.
Jugando fácil, pase al pie,
toco tiki-taka fácil
y de repente
me metes
dentro
de un anchor
un botón.
No solo es innecesario,
sino que es problemático
en temas de accesibilidad.
Una cosa es lo visual
y otra cosa es
lo semántico.
Tú puedes tener
visualmente
un botón
y semánticamente
que sea un anchor.
Tú puedes hacer que este anchor
parezca un botón
y que siga siendo un anchor.
Si tenéis dudas de
¿Está bien lo que he hecho?
¿Puedo meter un botón
dentro de un anchor?
No, no puedes.
Mira la cara de este hombre.
Está cabreado.
Cualquier elemento
que sea interactivo
no puede contener
un elemento interactivo.
Esto sería el main,
por ejemplo.
Content.
Sí, además se llama content.
Lo tienes ahí clarísimamente.
Mira, aquí,
encima,
class,
footer.
Coño,
pues es que lo has puesto
allá a huevo,
¿no?
Footer.
Y aquí,
que pone container,
contact, section,
pues también sería un section.
Dentro de las secciones
puedes tener footers también.
O sea, por ejemplo,
donde tienes esta parte
de los botones
puede ser el footer
de esta sección.
Muy chulo.
Me gusta el hover.
Muy bien.
No sé si iría todavía
más al negro al final.
Este queda bastante bien.
Pero en este,
es que claro,
es que le has puesto gris,
tío.
Es que este es complicado.
Aquí sí que se le ve mejor.
Por eso te puede ayudar
a ir más al negro.
¡Ojo!
Hostia,
muy chulo, Orlando.
Dime la verdad, Orlando.
¿Es idea tuya
o te la has copiado?
Ah, es copiado.
Bueno, no pasa nada.
Esto es un estilo
que se llama
bento columns,
que es lo que hace
el estilo este de Apple.
Está muy chulo
que hayas puesto aquí
algo visualmente animado.
Y está muy bonito
porque ves mucha información
rápidamente.
Me inspiré en
alistair.sh.
Pues te voy a decir algo.
Me gusta más el tuyo.
Pensaba que iba a ser
una copia mucho más bestia, ¿eh?
Abajo tiene la IA
con un chat, Midu.
Bueno, aquí veo que...
Ah, mira esto.
¿Qué te gustaría saber de mí?
Saber si has probado
el sushi.
¡Sí, he probado el sushi!
¡Me encanta!
¡Ojo!
Es una deliciosa comida japonesa
que consiste en arroz.
¿Te gustaría probarlo?
Uy, qué más suena eso.
No, o sea,
el hecho de darle aquí
es como descubrirlo
es complicado.
Podrías escribir como a mano
y poner
¿Quieres hablar conmigo?
Y le pones
una flecha a esto.
Juan Morales,
Full Start Developer
más un año de experiencia
en desarrollo web
aplicando buenas prácticas
y métodos.
Oye, muy bien esto de poner
en otro color así.
Esto está ahí en negrita.
Me ha gustado eso.
Detallazo.
Yo la experiencia
la pondría encima
de los skills.
La experiencia tiene que ir
de arriba a abajo.
En Flow Byte
ya lo hemos visto alguna vez.
Yo recomiendo mucho más este.
Creo que
mucho más fácil.
¿Esto qué se supone que es?
Ah, para ver la página.
Ah, experiencia.
Es que, cabrón,
cuando pones experiencia
a lo mejor son proyectos.
Claro, es que son proyectos.
Es que he visto experiencia.
Esto parece experiencia
y esto parece un proyecto
que has hecho.
Aquí puedes utilizar el textrap.
Este es el típico ejemplo
de que puedes utilizar el textrap.
Madre mía,
pero ¿cómo te da vergüenza el hover?
La madre que os parió, ¿eh?
Tío, ¿qué hover es este?
Ay, no.
Encima lo has puesto en la imagen.
¿Dónde está la escala?
No hagáis esto.
El hover no tiene que ir en el link.
Tiene que ir en el anchor
porque es lo que es clicable.
Esta parte de aquí
no es lo que es clicable.
Lo que tienes que hacer clicable
es esto.
O sea, que este hover
tendría que ir en realidad
en el anchor.
Pues resulta que el ancho,
o sea, lo que es
el tamaño de lo clicable
y lo del i es el mismo.
No lo hagas por eso
porque si no puedes tener
muchas veces
la falsa sensación
parece que el usuario
ve que está pasando algo
y no pasa.
Esta imagen tiene muy poca resolución.
¿Sabes lo que te falta aquí?
Aquí lo que te falta
es un textrap
porque, claro,
balance.
Te lo he arreglado en una línea, ¿eh?
¿Has visto?
Porque queda muy raro
cuando tú tienes una frase
y de repente
te cae una palabra
queda muy raro.
Custom Sour.
Claro, en algunas resoluciones
te quedará bien
pero a veces te quedará
algún inchis.
Entonces, lo que tiene sentido
es que utilices el textrap.
¿Has visto?
Joder.
Hostia, este botoncillo
es un poco raro.
Take a look at my world.
Bueno, están bien.
¿Ves estas animaciones?
Es sutil.
Tampoco agobian.
Este color mostaza
no me termina de gustar mucho.
Por ejemplo, aquí ya la he usado una vez
y no mete aquí tan bien.
De hecho, me gusta más este de lila
por aquí.
Yo este header
que le has puesto un background
yo le pondría transparente directamente.
Es que creo que queda mejor integrado, ¿no?
Que no esto que queda ahí roto.
Que luego lo que puedes hacer
es que una vez que baje
si quieres
pues entonces sí ponerle el blanco.
La verdad es que esta parte
está muy bonita
pero
pero
que aquí tengas un botón
con la misma forma
que un tag.
no podéis hacer
que los botones
sean del mismo color
y casi de la misma forma
que por ejemplo
los tags
son el mismo color
la misma forma
no puede ser.
Yo creo que habría que hacer algo ahí
separarlo.
JavaScript tiene una S mayúscula.
A ver, yo esto lo separaría un poco.
Esta parte
no entiendo muy bien
por qué
porque está tan pegada.
El dip
que envuelve el button
tiene estilos
que debería tener
perfectamente el button.
O en el button
poderse hacer un after
en lugar de
tener que tener un elemento
contenedor
con cosas del fondo.
Esto lo podemos poner
un poquito así.
Fíjate aquí
la separación que hay aquí
es mayor
así que yo
lo que haría
es separarlo
un poquito mejor.