Vamos a ir con la primera charla que tenemos a Carmen Anzio,
quien nos va a hablar del futuro del CSS.
Bueno, no sé si del futuro, Carmen, o nos va a hablar del presente
o del Back to the Future. ¿Cómo ha sido esto?
Muy buenas. Bueno, la película es la excusa.
Espero que todo el mundo pille la referencia.
Y si no, tenéis que ver la peli, mal, si no la habéis visto.
Bueno, seguro que pilláis la referencia.
Vamos a hablar un poquito de CSS.
Buenísimo. Oye, Carmen, pues muchísimas gracias por estar aquí.
Te doy toda la gente que tenemos por aquí
para que les hables del futuro de CSS.
Así que, nada, mucha suerte y muchas gracias.
A ti, muchísimas gracias.
Genial. Vale, pues ya estamos compartiendo la presentación.
Bueno, lo primero, gracias a Miguel Ángel, como siempre,
por contar conmigo, que es un placer poder participar
en estos eventos, que se lo curra muchísimo.
Y siempre todo el apoyo que podamos dar a la comunidad,
pues bienvenido.
Bien, os doy la bienvenida a todos y a todas.
Hoy vamos a entrar en una emocionante aventura
que nos va a llevar un poco como la película de Regreso al futuro.
Pero en este caso, versión mundo del diseño y desarrollo web.
En la charla vamos a explorar juntos
algunas de las últimas novedades y funcionalidades
que han habido en CSS, sobre todo el año pasado,
y las que se están acabando de implementar
o de acabar de sacar el estándar este año.
Y, bueno, al igual que la icónica película,
pues nos van a permitir ver un poco
lo que nos espera en el horizonte del futuro,
tanto en el diseño como en el desarrollo web, ¿no?
Teniendo en cuenta CSS.
Al igual que Marty McFly, que es el prota de la peli,
que ya he dicho que si habéis visto la película,
deberéis verlas.
Es una trilogía, creo.
Bueno, pues al igual que Marty McFly y Doc Brown,
que es el que le ayuda con esta máquina del tiempo,
nos vamos a subir a nuestro flamante DeLorean,
que es este coche que hace a la parte máquina del tiempo.
Y vamos a viajar a través del tiempo
para descubrir cómo CSS ha ido evolucionando
y se ha vuelto, en estos momentos,
estamos en un momento súper dulce para CSS,
se ha vuelto más poderoso que nunca.
Y eso me hace inmensamente feliz.
Nos vamos a sumergir en algunas de las características
que son más innovadoras
o las que yo estaba esperando con más ansias
y que están transformando mucho la forma
y la manera en que vamos a diseñar
y, sobre todo, vamos a construir e implementar
nuestras interfaces.
Así que nos van a permitir hacer experiencias
experiencias muchísimo más creativas,
que sean más accesibles
y, sobre todo, más rápidas,
que también es lo que queremos.
Por ponerles un poco de contexto,
fue alguien así como Haikun Wim,
no sé pronunciarlo bien,
fue el creador de CSS
y fue el primer, digamos, borrador que hizo,
el primer draft fue en 1994.
O sea, han pasado años ya,
pero no fue un estándar por la W3C,
que es el consorcio de web,
hasta el 1996.
Bien, pues desde entonces,
CSS ha evolucionado muchísimo
a través de muchas versiones
que son conocidas como módulos.
No es una única especificación,
por eso tenemos,
desde el draft,
tenemos CSS1, CSS2, CSS3,
stop, CSS4,
no va a llegar.
En otro momento,
si queréis, os explico por qué,
pero tal cual como módulo,
no va a llegar,
ya está en la especificación.
Así que ponedos cómodos todos,
abrochas el cinturón,
vamos a prepararnos
para pegar este acelerón
de muchísimas millas por hora
mientras vamos a ir viendo ejemplos
en este emocionante mundo de CSS
que de verdad que nos espera,
espero que sea un viaje lleno de sorpresas
y sobre todo de descubrimientos.
Es una charla cortita,
pero que salgáis de aquí diciendo
ostras, eso no lo sabía,
tengo muchísimas ganas de tocarlo
y de ponerme manos a la obra.
Un disclaimer,
que esto cada año con Miguel Ángel
hacemos un poco,
comentamos un poco
la encuesta del State of CSS,
igual que el de State of JS,
perdón, JS,
pues sale esta encuesta
que nos ayuda a descubrir
nuevas funcionalidades
y sobre todo cómo la gente
ha utilizado esas propiedades de CSS
durante el año
y el conocimiento que tiene
de las que están actualmente en uso.
Bien, os animo infinito
a que participéis rellenando
esta encuesta este año, por favor,
porque nos pasa siempre
que luego a final de año
comentamos los resultados
y los resultados nunca se ajustan
a nuestra realidad, ¿vale?
Entonces, os animo de verdad
a que la rellenéis,
a que nombréis a Miguel Ángel
como persona principal
que os aporta conocimiento de CSS
y bueno,
si os acordáis de mí,
pues mira,
también está bien.
Tengo una pregunta,
bien,
no sé si el chat va a estar ahí atento,
pero tengo una pregunta,
en realidad son dos.
Una, ¿reconocéis estos logos?
Esa es la primera.
Y la segunda es si sabéis
qué animal es el logo
que hay en Firefox.
Os voy a dar 20 segundillos
para que podáis ir diciendo
y yo mientras os voy dando
un poco la turra
de qué son estas cosas, ¿vale?
Bien,
son las versiones developer
de los navegadores,
son las ediciones
que son especial
para desarrolladores
que están,
principalmente están diseñadas
para nosotros,
para los que implementamos cosas.
¿Por qué?
¿Por qué son especiales?
Tienen características
que son experimentales.
O sea,
hay herramientas
más avanzadas
tanto a nivel de debugging,
de performance
y el mayor,
¿no?
Como la mayor cosa
es que se van actualizando
prácticamente cada noche a diario.
Están como a tres o cuatro versiones
de la versión estable
del navegador
que podéis utilizar
y yo sobre todo
la utilizo para probar
nuevas características,
puedes experimentar
con nuevas funcionalidades,
características,
API, etcétera,
que aún no se han lanzado
en la versión estable
del navegador
y eso te permite
preparar ya sea
tu página web,
tu producto,
lo que estés desarrollando
para futuras actualizaciones
y así garantizar
sobre todo
la compatibilidad
con esas propiedades.
¿Bien?
Bueno,
también es una buena forma
de compartir
o de apoyar
a la comunidad
de desarrolladores
dándoles feedback
si hay algún bug,
si hay algún error,
lo que sea, ¿vale?
En cualquier caso,
estas son las versiones
de Canary,
de Firefox Developer Editions
y la de Safari,
que Safari le ha puesto
un nombre raro,
se llama Safari Technology Preview
o algo así.
Y eso sí,
es importante tener en cuenta
que estas versiones
son bastante inestables
y no las utilicéis
como navegador principal,
pero como herramienta secundaria
para poder experimentar,
ver propiedades nuevas
que se vienen
y todo eso es genial,
¿vale?
No sé si habéis dicho
todos que es un zorro
lo que hay,
es un panda rojo,
ya está,
o sea,
la fricada de la charla,
todo el mundo se piensa
que es un zorro,
es un panda rojo,
sin más,
¿vale?
Una de las herramientas
que podéis utilizar
que es una plataforma online
se llama Canary Use,
aquí podéis buscar cualquier propiedad
que queráis de CSS
y os va a decir
en qué estado está,
en qué estado
respecto a la compatibilidad
con el navegador
y con qué versión.
A veces te dirá,
pues,
que necesitas activar
un flag en el navegador
o utilizar la Developer Edition
de ese navegador
o incluso que hay
una compatibilidad parcial
con alguno de los navegadores
o que en Firefox sí que funciona
pero en Chrome
aún no la han implementado.
Bueno,
utilizarla porque la verdad
es que va súper bien.
Vamos a empezar un poco
a hablar de algunas
de las propiedades
que yo estaba esperando bastante.
Pensad que mi perfil
es entre diseño y desarrollo,
entonces,
son cosas como bastante visuales,
sobre todo,
a nivel de quitarte JavaScript
del medio,
en el sentido de poder hacer
un montón de cosas con CSS
sin tener la necesidad
de utilizar JavaScript
para hacerlo, ¿vale?
Entonces,
una de las propiedades
que estaba esperando muchísimo
es esta de Scroll Link Animations
que es una característica
que lo que nos permite
es vincular animaciones CSS
a la oposición de scroll
del elemento
de donde estés en la página.
Adiós JavaScript.
Adiós JavaScript,
adiós librerías,
hola a animaciones
que sean suaves
y que puedan ser bastante eficientes
a nivel de performance
únicamente con CSS.
Es muy fácil de utilizar,
solo necesitamos esta propiedad,
Animation Timeline Scroll Root,
¿vale?
para que sea a nivel de todo Root.
Problema,
entre comillas,
solo está disponible de momento
en Firefox,
en la Developer Edition.
Pero, bueno,
se espera que durante 2023
esta y las otras
que os voy a comentar
estén ya implementadas.
Espero que a final de año
cuando hagamos lo de la encuesta
viendo los resultados
del State of CSS
podamos decir
que esto ya se puede utilizar
y que ya no necesito
JavaScript
para poder hacer
este tipo de animaciones.
Sí que es verdad
que hay librerías
como GreenShop
de GSAP
que te permiten hacerlo
con un montón más
de funcionalidad,
pero, bueno,
a menos que lo básico
que puedas hacer
ya se puede hacer
únicamente con CSS.
Anidamiento nativo.
Yo el año pasado
dije que si esto llegaba a CSS
dejaría de utilizar SAS
porque el anidamiento nativo
es una característica
que lo que hace
es que puedas anidar elementos
dentro de contenedores
o de padres, ¿no?
Esta sintaxis de anidación
es muy parecida
a la que tiene SAS
pero va a ser
con el símbolo ampersand.
Se utiliza, pues,
justamente eso
para ir al selector padre
y los selectores
que estén anidados
pues haces combinaciones
de selectores más complejos
y puedes añadirles estilos.
Actualmente,
sí que es un anidamiento similar,
sí que tiene que ser
con un preprocesador
como, bueno,
yo utilizo SAS.
A lo mejor hay gente
que utiliza un LES
pero, bueno,
esta característica
cuando la tengamos
implementada
en una versión estable
del navegador
pues, por mi parte,
adiós SAS.
Seguramente hay gente
que me diga que no
pero por mi parte sí,
hasta luego SAS.
Algo interesante
es que hay un montón
de pseudo clases nuevas
como pueden ser
IS, WHERE, NOT.
La diferencia
es que con IS
lo que podemos hacer
es permitir,
te permite agrupar
varios selectores
en una sola declaración
y es como,
no llega a ser un condicional
pero te está diciendo
que sí,
esa condición se cumple,
se aplique el estilo.
Tanto IS
como WHERE
funcionan parecido,
la diferencia es que WHERE
no aumenta
la especificidad.
Que esto,
si conocéis CSS,
la cascada,
la herencia
y la especificidad
sabréis que es
una cosa bastante importante
para que luego
no venga nadie
a decir que es que CSS
está roto.
¿Bien?
Shaming.
Como he comentado,
la pseudo clase
IS la podríamos utilizar
en un ejemplo
que os voy a enseñar ahora.
Podríamos hacer una card,
¿vale?
Y decirle
según qué condiciones,
en plan de
si la card
cumple esta condición,
haz este estilo,
si no,
haz este otro.
En el ejemplo
que os pongo aquí,
esto es un embedido
de CodePen,
¿vale?
El ejemplo
lo tengo en CodePen.
El ejemplo
que vemos aquí,
si miramos el CSS,
creo que lo vais
a poder ver bien,
¿no?
Sí,
sí,
se ve bien la letra,
digo,
si no lo hago más grande.
Vale,
aquí tenemos este selector
con Not y con Hash.
Estamos diciéndole
que si la card
no tiene
un elemento,
una etiqueta P
dentro de su DOM
y si no tiene
tampoco una Small,
queremos que tenga
un aspect ratio
de tres cuartos.
O sea,
si yo voy al CSS
y le quito tanto
la P
como Small,
¿vale?
Esto lo borro.
Ahora vamos a ver
que va a cambiar
de aspect ratio,
¿vale?
O sea,
es un ejemplo
un poco exagerado
que no haría nunca
porque va a ver muy mal,
pero para que veáis
que se pueden hacer condiciones.
Por ejemplo,
si hay otra condición
por aquí,
de si en vez de ser,
si no tiene,
si tiene imagen
que se vea el texto
en purple.
Entonces,
si quitamos la imagen,
¿qué va a pasar?
Pues que el texto
se pondrá del color
que tiene especificado
en el body,
que en este caso
pues se quitaría la card,
el aspect ratio
sí que se mantendría,
pero se cambiará de color.
Esto nos da una potencia infinita
para poder tener componentes
con variantes diferentes
y que solo necesitemos
tener estas condiciones
sin tener que estar
reinventando la rueda
ni repitiendo código CSS,
que eso lo único que hace
es que hace que tus proyectos
sean menos mantenibles
y menos escalables.
Bien,
hemos estado hablando
ahora de imagen.
Esta imagen se deformaba,
¿no?
Cuando habéis visto
que he cambiado el CSS,
se deformaba.
Una propiedad que tenemos
que ya está desde el año pasado
es la de aspect ratio,
que es una forma muy fácil,
muy sencilla
de establecer esa relación
de aspecto en la imagen
cuando un elemento
se agranda.
He dicho imagen,
pero básicamente puede ser
cualquier elemento
como un vídeo,
un A-frame,
cualquier elemento
que necesite mantener
esa proporción,
esa relación de aspecto
al cambiar de tamaño.
Para las imágenes
y para los vídeos,
lo podéis hacer así,
es muy sencillo.
¿Qué hacíamos antes?
O sea,
el enfoque anterior
es este de aquí.
O sea,
imaginaos el cambio ahora
poniendo la propiedad
aspect ratio
y el aspecto
de que queramos que tenga.
En este caso,
he puesto 16,9
que es el típico
que tenemos
en la relación
de aspecto de los vídeos.
Para poder hacer eso antes,
teníamos que poner
que tuviera un vídeo 100%
y hacer un padding top.
Esto era un hack
súper sucio,
¿vale?
Para poder conseguir
ese efecto.
Os he puesto
unos ejemplos aquí
para que podáis verlos.
El aspect ratio
puedes cambiar.
Así es tan sencillo
como cambiar el valor.
Podríamos poner
únicamente un auto 1
y auto lo que quiere decir
es que cogería
uno de los lados
y haría el cálculo solo.
Pero estos ejemplos
los tengo en CodePen,
los podéis,
luego comparto la presentación
y los podéis toquetear,
¿vale?
Para que los podáis ver,
para que podáis ver bien
cómo están montados.
Pero fijaos
que solo es una clase,
una clase
que ponga aspectal,
lo que sea.
O sea,
aquí es en plan
de funcionalidad
y el valor que queráis.
Tan sencillo como eso.
Y ya tendríamos
los diferentes aspectos
de imagen.
Pero, ¿qué pasa?
Aquí os fijáis
que se acaba de cortar
la cara de Doc.
Esto es algo
que es bastante doloroso
cuando hacemos headers.
Cuando tienes un mega hero
en tu header
de la página,
si es un fondo
de un background
de un bosque,
no hay problema.
Pero cuando tienes a personas,
es muy complejo
poder decidir
qué trozo
de imagen se ve.
Porque si haces un cover
o un contain,
puede ser que
en algún breakpoint
o en algún tamaño
de pantalla,
esa cabeza
de esa persona
acabe cortada.
¿Qué propiedad
tenemos nueva
para poder solucionar esto?
Object Viewbox.
Si trabajáis con SVG,
si me seguís un poco,
sabréis que soy
fanática de los SVGs
y esta propiedad
es un efecto
muy similar
al del atributo
Viewbox de SVG.
Lo que nos permite
es mostrar únicamente
la parte específica
de la imagen
o del vídeo
que queramos,
¿vale?
Es súper útil
cuando queramos
recortar
o reencuadrar
una parte de la imagen
y solo queramos
mostrar esa parte
de imagen
o de vídeo.
También se puede utilizar
para ampliar imágenes.
Ahora vais a ver
un ejemplo.
Podemos hacer
un hover
y que la imagen
se amplíe.
En la card que hemos visto
podríamos hacer
que la imagen
se ampliase
desde el interior
y hacer efectos
bastante chulos.
En este ejemplo
veis que tiene un inset
de 25, 20, 15 y 5.
Esas son las posiciones
igual que cualquier padding
o margin
va desde el top.
Si miráis
cómo se comporta
un reloj
pues tiene desde stop,
right,
button y left.
Perdón,
tengo dislexia,
giro cosas
así que creo que lo he dicho bien.
Pero bueno,
tienes las posiciones superior,
derecha, inferior
y izquierda
del fotograma
y tú seleccionas
qué parte quieres ver.
Puedes utilizar
tanto porcentajes
como vais a ver
ahora aquí el ejemplo.
Aquí lo tenéis.
Podéis utilizar
tanto porcentajes
como píxeles
y podéis elegir
el trozo de imagen
que queráis,
¿vale?
Podéis recortar
el trozo de imagen.
Eso os da
un control increíble
para que podáis
no solo
controlar el contenedor
y el aspecto
relacional
a la hora
de agrandar
ese contenedor
sino el contenido,
¿vale?
Esta funcionalidad
a nivel de SVG
es súper importante
porque es como tener
un espacio abierto
y tener un telescopio
y poder elegir
qué trocito
de ese gráfico
muestras.
Pues lo mismo
con imágenes,
¿de acuerdo?
Y si os fijáis aquí
podéis hacer un hover
y en este hover
lo que hace
no se agranda la imagen,
lo que hace
es un zoom in
de esa imagen.
Bueno,
con todo esto
podéis decir,
vale,
sí,
son ejemplos
pero a nivel
práctico
de caso de uso
¿dónde podríamos
aplicarlo?
Bien,
¿conocéis el término
masonry?
No lo pronuncio
bien seguro.
Si pensáis en Pinterest
¿vale?
Podéis imaginaros
lo que es un masonry
¿vale?
Tenéis un layout
ese layout
se comporta
de manera responsive
o fluida
dependiendo de la pantalla
y sus imágenes
que tienen diferentes aspectos
pueden ser vertical
o horizontal
se van acumulando
y se van posicionando
dependiendo de
dependiendo del espacio
que tengan en ese contenedor.
Bien,
todo esto
se solía hacer
con una librería
masonry.js
o con otras librerías
pero de nuevo
necesitabas JavaScript.
Bien,
pues hasta luego
JavaScript
para montar estos layouts
que son más complejos
y que son adaptativos
podemos utilizar
esta propiedad
a nivel de grid
también se ha añadido
subgrid
no lo comento
pero subgrid
tanto subgrid
como gap
de Flexbox
es como lo más top
que ha salido
a nivel de layout
para poder
posicionar elementos
y tener más control
entre los hijos
y los padres
también
y hay otra propiedad
que os voy a enseñar
que vais a ver
aplicada en este masonry
que es esta de aquí
que es
Mixed Blend Mode
si habéis trabajado
con Photoshop
sabréis que Photoshop
tiene modos de capa
que básicamente
lo que establece
es cómo debe mezclarse
el contenido que hay
con el elemento padre
y el fondo de este
es decir
si ponéis un fondo
con otra imagen
y ponéis un multiply
vais a ver
parte de ese fondo
reflejado
en la capa superior
ejemplo
aquí tenéis el masonry
si veis que tienen aquí
las imágenes
están así
si pusiéramos
un aspecto responsive
que aquí no lo voy a hacer
porque si no
el navegador se me va por ahí
pero bueno
si veis que
al hacer la pantalla
más pequeña
ya veis que
las imágenes
se van adaptando
bien
y además
tenemos aplicado
a nivel de CSS
que luego ya podéis jugar
con este ejemplo
el Mixed Blend Mode
vale
si yo lo elimino
pues se van a ver
las imágenes originales
con su tono original
vale
lo mismo
te da una versatilidad
y una libertad creativa
a la hora de poder
retocar imágenes
sin necesidad de pasar
por Photoshop
guardar ese asset
volver a retocarlo
volver atrás
volver a pasarlo a desarrollo
subirlo y tal
te da una libertad
brutal
es más
podéis hacer vosotros mismos
desde CSS
las pruebas
y luego decir
a diseño
mira pues si
te encaja
esta versión
lo podemos hacer rápidamente
sin que tengas que hacer nada
en la imagen
tienen más parámetros
para modificar
os he enseñado
solo lo básico
pero que sepáis
que ahora podéis tener control
también de cómo se van a visualizar
esas imágenes
por último
pensad en un masonry
pues pondríamos un título
a ese masonry
quiero hablaros
de un formato
de tipografía
que creo que aún
no está muy extendida
pero es una pasada
¿sabéis que existen
unas fuentes
que se llaman
fuentes variables?
son variable fonts
¿sí?
no sé si lo sabéis
por el chat
no sé si alguien
está diciendo algo
si no
os lo explico
¿vale?
este tipo de fuentes
yo que soy
yo vengo de diseño gráfico
y he hecho mucha tipografía
me flipa la tipografía
a nivel de imprenta
he trabajado en imprenta
entonces yo he tenido
tipos de plomo
en la mano
que por cierto
peligroso el plomo
pero
a nivel digital
tener este formato
de tipografía
es una locura
estas fuentes
son súper especiales
porque nos permiten
elegir exactamente
exactamente
qué grosor
qué inclinación
qué ancho
todo lo que quieras
en lugar de
tener que estar
cargando
todas las imágenes
todas las fuentes
perdón
todos los archivos de fuente
vale
imagínate
ejemplo
tradicionalmente
todos los pesos
que son los grosores
y los estilos
están separados
en distintos archivos
de fuente
¿verdad?
os tiene que sonar
esta manera de llamar
a las fuentes
en phone face
desde css
vas poniendo
todos los formatos
¿no?
la url
del source
de donde está alojada
esa tipografía
luego el formato
que es
pues si es
es wav, wav2
es obg
ttf
open type
etc
bien
pues con
variable fonts
mientras que con las otras fuentes
tienes que cargar todos esos archivos
con las fuentes variables
tienes la combinación
de todas esas variables
en una única fuente
en un archivo
así que
de este modo
tenemos varias ventajas
la primera es el tamaño total
del archivo
obviamente se reduce
enormemente
en comparación
con la carga
de varios archivos
de fuentes individuales
que teníamos que cargar
o sea que esto ya
a nivel de performance
es fundamental
para trabajar
con esas tipografías
y además
con las fuentes variables
podemos integrar
muchísimas variaciones
en un único tipo
de letra
es decir
cargamos ese archivo
y tenemos
todos los pesos
y todos los estilos
¿bien?
sí que es verdad
que existía
open type
esto es como una
una evolución
¿no?
es como que han evolucionado
esa especificación
es una pasada
de todas maneras
es
tiene compatibilidad
tiene compatibilidad
con todos los navegadores modernos
si quisierais
o necesitarais
hacer un fallback
es decir
si el navegador
no entiende
que es una variable font
que cargáis
una que sí que va a entender
el navegador
porque
el 90% de una página web
es contenido
es texto
así que
tenemos que hacer
que los usuarios
siempre puedan acceder
a ese texto
pero tenéis una manera
de hacer un fallback
¿y qué podéis hacer
con esto?
o sea
¿qué os imagináis?
yo lo primero
que me voy siempre
es hacer animaciones
podemos hacer
cosas tan chulas
como estas animaciones
o sea
me parece
una auténtica maravilla
el código
lo tenéis
en el ejemplo
en content
lo podéis revisar
luego
lo podéis bichear
pero
vaya
perdón
hoy no es el día
de
hoy no es el día
de las conexiones
dadme un segundo
que vuelva a cargar
la presentación
ahora
voy a ir rápido
para que no vuelva a petar
¿vale?
vale
pues tenemos este
tenemos este ejemplo
con la animación
estamos cargando
una única
tipografía
y podemos hacer
esta animación
y ya para acabar
os quiero explicar
una cosa
que tiene que ver
también con
tiene que ver
también con tipografía
¿vale?
pero aparte de tipografía
no sé si
he hecho algún ejemplo
con un tecladito
que tengo
tengo este teclado
¿vale?
esto es un teclado
MIDI
¿vale?
a nivel de APIs
el navegador
tiene un montón de APIs
con las que podéis
interactuar
y hacer peticiones
a nivel de audio
tiene una API
de audio
el navegador
y tiene otra API
que es MIDI
con lo que
nos permite trabajar
con audio
en la web
o sea
nos proporciona
una forma
súper potente
y versátil
de poder crear
y procesar
y manipular
audios
y sonidos
directamente
en el navegador
podéis hacer mil cosas
no quiero
daros la tuya
con todo lo que podéis hacer
pero básicamente
podéis comunicaros
con el navegador
¿vale?
podéis tocar música
con el teclado
y que eso se transforme
en cosas
¿qué es lo que pensé?
digo
si puedes comunicarte
con el navegador
si el navegador
puede interpretar sonidos
y puedo darle acceso
al micrófono
del navegador
y las variable fonts
con un único
con un único archivo
tienes todos los pesos
de una tipografía
¿por qué no?
¿por qué no?
probar
si
una tipografía
sería capaz
de entender
que estoy hablando
más fuerte
o que estoy hablando
más flojo
entonces
este ejemplo
es muy chulo
imaginad
todo el mundo
de creatividad
y todo lo que podemos
llegar a hacer
con el navegador
que es la base
de cualquier cosa
que desarrollemos
y mi consejo
ya para finalizar
es que
ceñío siempre
a los estándares
porque los estándares
van a estar ahí siempre
¿bien?
entonces
aprendeos bien los estándares
aprendeos
cómo trabaja el navegador
cómo renderiza
las cosas
el navegador
y tener en cuenta
de no reinventar
la rueda
porque el navegador
ya le saque responsive
todas esas cosas
antes de aprenderos
mil frameworks
que está genial
pero aprenderos bien
las bases
y sobre todo
los estándares
que por eso son estándares
aquí llegamos al
final de nuestro
emocionante viaje
espero que os haya gustado
los ejemplos que he puesto
que os hayan dado
ideas más locas
para poder seguir
estirando del hilo
y poder seguir
antes de despedirme
sí que me gustaría
recordar que
al igual que está haciendo
Miguel Ángel
con todas estas iniciativas
y aportando a la comunidad
que la comunidad
de desarrolladores
y diseñadores web
tienen que seguir trabajando
incansablemente
para continuar
fomentando la comunicación
innovando
mejorando nuestras herramientas
técnicas
etc
y que como en la película
el futuro no está escrito
que el futuro
lo podemos escribir nosotros
así que
os animo
a que sigáis explorando
mención especial para Manz
que este ejemplo
no lo he hecho yo
que es de Manz
que es un crack
de L'Oreal
está hecho con CSS
así que echarle también
un vistazo
a lo que hace
porque es
como el dios del CSS
y hasta aquí
muchas gracias
bueno bueno
madre mía
madre mía
Carmen
como nos ha volado
la cabeza
hay un montón de comentarios
en el chat
era la idea
estaba la gente
alucinando
mira que crack
aplausos
que grande Carmen
muchos corazones
muy buena charla
la primera charla
ya empezamos así
no la verdad
que guay
espectacular
alegro
me ha encantado
Carmen
muchísimas gracias
porque ha sido
tremendísimo
a ti
a ti
a ti
y madre mía
decías
no bueno
era cortita
porque no tenía mucho
voy a añadir una demo
y no veas
no sé
qué demo
ha sido la que has añadido
al final
he añadido
los ejemplos
primeros
en código
porque solo tenía
demos así
con code pen
pero
aprovecho y explico
algo más
pero sí
parece que sí
que era bastante
es la idea
es como
una mini degustación
y luego
que la gente
ya en casa
que se anime
a seguir
explorando
es que la gente
lo gana
de qué buenísima
la charla
qué locura
o sea
lo más
gracias
la verdad
es que me parece
muy bonito
tu mensaje
de la importancia
del CSS
porque al final
el desarrollo web
no solo es JavaScript
y me pone muy contento
que has empezado
tú la conferencia
justamente
para darle importancia
al CSS
y además
haberlo dejado
a este nivelazo
que es increíble
pues Carmen
que guay
muchísimas gracias
un abrazo a todo el mundo
cuidaos mucho
cuídate
hasta luego
chao
bueno amigos
amigas
si os ha gustado
la charla de Carmen
todavía nos quedan
unas cuantas
o sea que
quédate ahí
a por todas
vamos a conectar
un momento
con la buena
gracias