Recopilación detalles finales

[jlantunez]

Recopilo detalles. Sólo el bloque 1 y 2 necesitaban algunos cambios menores en Figma y los he actualizado. Las issues de los bloques 1 y 2 son las que he cambiado en Figma.:

Bloque 1:

• [x] En mobile habría que central vertical y horizontalmente todos los elementos. Ya puesto en Figma.
• [x] El emoji de "cool" hace un escalón raro en desktop y mobile. Antes creo que no pasaba.

Bloque 2:

• [x] Bloque 2: En desktop y mobile habría que centrar todo el contenido horizontal y verticalmente. Antes sólo estaba centrado el contenido del centro. Culpa mía. Ya puesto en Figma.
• [x] Habría que reducir tamaño del círculo y del icono de dentro. Ya eran más pequeños antes.

Bloque Tramontana:

• [x] En desktop: Las líneas/bordes que se cruzaban del container del contenido no salen

Bloque de closing:

• [x] Cambiaría el orden de los enlaces. Email a la derecha y twitter a la izquierda.

Animaciones:

• [x] Repasar que vaya muy fina entre bloques.
• [x] Pulir la animación hover del círculo para que no dé tantas vueltas y sólo dé una.

Navegación entre bloques:

• [x] Ya que hemos ido a navegación ppt/keynote, activar teclas del cursor de arriba y abajo como ya hicimos con webslides.

Assets:

• [ ] Hablar con Miguel por si puede pasarnos mejores resoluciones de Marco Aurelio, el emoji de cool, el escudo del fcb, la tarjeta de culers, el cta de barça tv+, No comprendo por qué tiene baja calidad si están importados del Sketch.

Manía personal: la poesía del HTML y CSS :)

• [ ] Que cuando alguien quiera ver el código fuente desde el navegador (no desde el inspector) se vea la poesía bien anidada igual que hicimos con la landing de webslides. Es web personal, sé que soy un antiguo, pero quiero proyectar romanticismo aunque no sea tan buena práctica.
• [ ] Repasar al final de todo las puntuaciones de los tests en performance por si hay que cambiar de hosting u otra medida.
• [ ] Recordar validación de HTML y CSS

FIN.

PD: Muchísimas gracias por tanto karma en cariño, profesionalidad... Cuando acabemos, me gustaría que charlásemos un rato y contarte alguna cosas :)

[Antonio-Laguna]

@jlantunez me pongo con las cosas. Algunas dudas.

Repasar que vaya muy fina entre bloques.

¿Qué te refieres aquí?

La navegación por teclas ya debería de ir, es de lo primero que hice antes de meterle el resto. Dime si te falta algo. Incluso puedes darle a Home y End ;)

La tarjeta de Culers por ejemplo está a más de 3 veces el tamaño necesario: https://jlantunez.com/new/static/img/bar%C3%A7a/culers-card.png y se ve bien ahí, creo que es problema de que está chico. Lo mismo con Marco Aurelio: https://jlantunez.com/new/static/img/marco-aurelio.jpg?hash=5be14f8e55 está a más de 2x del tamaño.

Que cuando alguien quiera ver el código fuente desde el navegador (no desde el inspector) se vea la poesía bien anidada igual que hicimos con la landing de webslides. Es web personal, sé que soy un antiguo, pero quiero proyectar romanticismo aunque no sea tan buena práctica.

Te refieres al hecho de que está todo comprimido, ¿no?

Respecto a charlar, en cuanto te venga a ti bien quedamos 😉

Esta tarde tienes todo hecho.

[jlantunez]

Perfect:

Repasar que vaya muy fina entre bloques.

¿Qué te refieres aquí?

A nada en concreto. Tan sólo a testear. Yo la veo perfecta.

Te refieres al hecho de que está todo comprimido, ¿no?

Sí, a eso :)

¿Hablamos mañana a 16h?

[Antonio-Laguna]

Claro, ¿en Sevilla o pensabas en remoto?

[Antonio-Laguna]

Dejo dudas:

Dices de alinear bloque uno vertical y horizontalmente en mobile pero veo que ya está así:

¿Qué me he perdido?

En Tramontana dice "En desktop: Las líneas/bordes que se cruzaban del container del contenido no salen" pero la versión subida ahora mismo está así:

¿Es otra cosa?

[Antonio-Laguna]

Lo mismo con approach. Seguro que es algo tonto que no estoy viendo 🤔

[Antonio-Laguna]

En validación de HTML aparece un warning

Que es por esto: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

Si aun así lo quieres quitar dímelo y lo hago salir :)

En el CSS aparecen algunas cosas pero no son correctas. Son vendor prefixes para aumentar la compatibilidad. Si quieres desactivo autoprefixer.

[jlantunez]

Respecto a vernos, lo decía en remoto. :)

Lo de las líneas de Tramontana esta mañana antes de hablar no salía. Veo que ya sí. Resuelto. No sé...

En cuanto a centrar el primer bloque en mobile, me daba la impresión que no lo estaba. No vi la CSS realmente. Si lo está, perfect. Quizá sea Brave que tiene barra abajo y despista/cubre el espacio de abajo.

Respecto al segundo bloque, por fallo mío en Figma en desktop y mobile, tenía la misma sensación. Lo único que estaba centrado verticalmente en figma era el listado y no la frase de arriba y la de abajo. A eso me refería. No he visto CSS. Y me he dado cuenta de que no es un problema de flexbox. Es problema de padding creo.

@media (min-width: 64em)
.section--approach .section__content__wrapper {
    padding: 5.25rem 0;
}

Adjunto captura. La captura corresponde a 1200x800

Si reducimos ese padding y lo ponemos a equivalente de 48px

En el segundo bloque, editemos también la alineación del círculo. Lo corregí en Figma para que estuviera encima del vision + craft. Respecto al icono del unicornio tal como veo ahora en mobile habría que reducirlo 8px.

[jlantunez]

Respecto al role="list", me fío más de tu criterio. Si ves que es mejor, lo dejamos. Llevo una etapa muy ANTI-RAE y antiorganizaciones que quieren estandarizar cuestiones con criterios discutibles :)

[jlantunez]

Sí, por responsabilidad conservemos los prefixes.

[Antonio-Laguna]

Lighthouse me da un 100 en todo menos en performance que por algún motivo está fallando al trazar el LCP. Le echo un ojo a lo demás

[jlantunez]

Loveando mucho 🔥🔥

[jlantunez]

He encontrado un defectillo en la navegación con scroll. Sólo sucede cuando refrescas la página. Se queda a mitad de dos bloques. A partir de los 18 segundos https://www.dropbox.com/s/lorlgiu14wcl6bu/Grabaci%C3%B3n%20de%20pantalla%202021-09-12%20a%20las%2019.08.38.mov?dl=0

[Antonio-Laguna]

Pues parece ser que el performance no lo podemos testear con Lighthouse por las animaciones debido a https://github.com/GoogleChrome/lighthouse/issues/10869

El defectillo se ha ido 🙈

[Antonio-Laguna]

De todas formas acabo de hacer un WebPageTest y https://www.webpagetest.org/result/210912_AiDc74_f8ee0f56ed1354c886274c6088be88ca/

Todo A y las métricas de performance todas en verde:

[jlantunez]

Creo que de CSS sólo quedaría ajustar los paddings en desktop del bloque 2. Ahora está más abajo que antes. Ni se ve la section al completo en desktop en 1280x800. Usa Figma de referencia.

Pienso qué podemos poner cuando los círculos giran. No quiero desvelar el unicornio en el primer bloque ni que se repita luego el marco aurelio en el bloque 2. Lo hablo con Miguel. ¿Sugerencias?

[Antonio-Laguna]

Qué torpe con el padding! Ya lo he quitado.

Pienso en algo. ¿Giralda y Sagrada familia? 🤔 No se me ocurre qué poner que tenga sentido y que no haya que explicar.

[jlantunez]

Me mola, pero tendría que tener el mismo estilo de ilustración que Marco Aurelio.

[jlantunez]

quedamos mañana a las 16h entonces para pasarte invite?

[jlantunez]

Qué torpe con el padding!

Viendo que el figma no es muy exacto con la resolución luego de la pantalla. Hay que seguir haciendo ajustes en el margin-bottom del h2, el padding de

@media (min-width: 42.751em) .section .section__content { margin: 0 auto; min-height: 40rem; padding: 5rem; }

Y subir unos 24-32 px el circulo del unicornio y vision + craft.

[Antonio-Laguna]

quedamos mañana a las 16h entonces para pasarte invite?

Claro!

[Antonio-Laguna]

Qué torpe con el padding!

Viendo que el figma no es muy exacto con la resolución luego de la pantalla.

Hay que seguir haciendo ajustes en el margin-bottom del h2, el padding de

@media (min-width: 42.751em)

.section .section__content {

margin: 0 auto;

min-height: 40rem;

padding: 5rem;

}

Y subir unos 24-32 px el circulo del unicornio y vision + craft.

Ese padding es global a todas, lo quito?

[jlantunez]

Creo que no que es mejor hacer padding particular para el bloque 2 solo. Si los quitamos en todos los bloques y en el futuro meto más trabajos y alguno tiene background-color como el de Tramontana la fastidiamos, no?

[jlantunez]

Puede que sea también el min-height?

[Antonio-Laguna]

@jlantunez acabo de subir y creo que está resuelto, le he quitado el padding a esta sección en vertical y acercado más el unicornio. He probado a 800 y creo que va bien.

[jlantunez]

Lo conseguiste.

[Antonio-Laguna]

Por cierto, una chuminá pero que sepas que está. Cuando cambiamos de sección, el color cambia y en safari he hecho que coja el color de la sección para la barra del notch (iOS15 en adelante)

[jlantunez]

Vivan las chuminás. ¿Metemos el meta name="theme-color" o no hace falta? Hoy cuando hablemos a ver si me ayudas a decidir favicon (no sé cual) y también con la instalación en local. No lo consigo y cuando ya pueda me meto de fondo para jugar yo también.

[Antonio-Laguna]

El theme-color es lo que hace eso. Lo único que hago es cambiarle el valor :)

Claro, miramos todo eso en un rato!

[jlantunez]

Añado aquí:

• [x] Documentar bien el proceso para instalar en local con ¿capturas de imagen para torpes como yo?
• [ ] migrar el wp a /blog con redirect en en htacess para que anterior urls no den 404
• [x] subir las copas de la champions en mobile, sólo en mobile, unos 24px.
• [x] favicon
• [ ] liberación figma y github
• [ ] lanzamiento :)

[Antonio-Laguna]

@jlantunez acabo de subir instrucciones, dime qué te parecen :)

[Antonio-Laguna]

Copas subidas. El resto tú marcas el ritmo :)

Una vez que vayamos a lanzar hacemos lanzamiento y .htaccess Lo de Figma necesitaría que me pases el fichero Figma para subirlo aquí o poner la URL si quieres en el README. Y abrir el GitHub lo tienes que hacer tú como admin. Mi consejo es que borres todas las issues a mano para evitar que nadie pueda leerlas. No hay nada crítico de cualquier forma pero por si acaso.

[jlantunez]

Te sales. De lujo las instrucciones. He añadido headings de Step 1, Step 2...

[jlantunez]

Creo que la URL del Figma mejor al comienzo del readme y con una captura del primer bloque?

[jlantunez]

Por mí, lanzamos a principios de la semana que viene y damos tiempo a Miguel para detalles de marco aurelio y emoji.

[Antonio-Laguna]

Claro que sí! Quedo atento

[jlantunez]

Empezando a jugar desde local. Al principio, por imbécil, no sabía instalarlo porque no clicaba ENTER en Terminal. Va de lujo.

¿Cómo puedo saber la correspondencia exacta entre las medidas en .rem y px? ¿2.5rem equivale a 25px? Es para jugar con márgenes y paddings.

[Antonio-Laguna]

@jlantunez la equivalencia es 16px (que además es múltiplo de 8) en este caso 2.5 son 40 píxeles

[Antonio-Laguna]

PD: Nada de imbécil. Este es mi pan del día a día y puede parecer muy obvio/fácil y a menudo me olvido de esas cosas. Mejor "falta de práctica" 😉

[jlantunez]

Ya estoy de vuelta en casa tras dos días de estrés por primer día de clase.

Feedback de Manu desde NYC:

--

Sobre la web, muy buena pinta tio! Mis impresiones:

Intro: buen primer parrafo, concepto y ejecucion visual. Tal vez un poco mas de texto ayude a entender, pero lo dejo a tu criterio. Sí me falta un affordande para el siguiente slide, que entre que está todo en la misma slide y que hay algo de resistencia al scroll, parece que no hay más.

How: Lo veo bien, muy directo. Me descuadra un poco el uso de emojis (personalmente los quitaría) pero eso son gustos personales.

Casos de estudio: mamma mía, las transiciones. Absolutamente nada que objetar. Limpio, directo, y bello. Con la información necesaria.

Contacto: tal vez cerraría con algo más de narrativa, como resumiendo por qué deben contactar contigo y cómo puedes ayudar.

--

[Antonio-Laguna]

@jlantunez si quieres hacer cambios dime. Quizá sea mejor abrir nuevas issues aunque enlacemos a esta por claridad.

[jlantunez]

ok, primero iré jugando en figma.