ojo cuidado con safari 17 durante mucho tiempo nos hemos reído de safari de que era el nuevo
internet explorer vale ojo con la nueva versión de safari tiene cosas que están por delante de
chrome o sea yo no sé esto cómo puede ser han sacado hoy han sacado safari 17 este fue el 18
de septiembre o sea que fue la semana pasada y también está disponible para ios 17 ipad os 17
safari 17 para el sistema operativo de esto va a llegar un poquito más tarde llegará mañana no
sea mañana que es 26 mañana llega el nuevo macos sonoma que es el nuevo sistema operativo y ahí
tenemos safari en ios y en ipad ya lo tenemos pero es que ojo la de cosas que tiene todo esto son
novedades del mundo del desarrollo web que tiene safari 17 cuánto te pagaron porque me van a pagar
me han pagado me han pagado cero no ha pagado apple no ha pagado jamás en la vida ojalá ojalá apple lo
único que ha hecho es amenazarme con que me va a cerrar mi canal de twitch como vuelva a retransmitir
un evento de apple sin su consentimiento eso es lo único que apple me ha escrito para que lo sepas
pero ojo porque se vienen cosas muy muy interesantes de las novedades que tiene una es esta que hace
mucho tiempo parece mentira que no se ve un nuevo elemento de html no es una cosa que pase todos los
días y te voy a explicar esto este elemento de html este elemento search este de aquí es nuevo es un nuevo
elemento que va a llegar a html no es una cosa que ocurra todos los días así que es una noticia
bastante importante y hombre es interesante que lo conozcas cuál es la idea de este elemento search
para qué sirve y qué es lo que pasará vale este elemento search durante mucho tiempo en nuestras
páginas web sobre todo es las actividades accesibles podrías utilizar un dip para envolver el formulario
que fuese tu búsqueda por ejemplo si vas a google google.es aunque a google le importa un pepino muchas
veces la accesibilidad pero bueno si inspeccionamos aquí este este formulario que bueno ya veis que
esta gente ni formularios ni hostias veis aquí el formulario aquí poner rol search el tema es que
cuando vosotros tenéis una búsqueda o la búsqueda de vuestra página lo ideal es que le pongáis que el
rol de esa búsqueda es que es la búsqueda porque por un tema de accesibilidad pero incluso puede ser un
tema para el seo para las páginas web para google porque porque no sé si habéis visto alguna vez no sólo que
podéis buscar dentro de una página a google y buscar dentro de una página sino que hay veces que a lo
mejor le pones una página yo que sé aquí javascript from midudev puntocom no sé algo así vale y sólo
busca o debería sólo buscar en midudev a no cano site no es from es site vale site y tal veis y ahora
sólo busca dentro de la página de midudev vale pero aparte de esto hay veces que te pueda te pueda
aparecer un buscador dentro del buscador esto lo he visto alguna vez no es una cosa que haga mucho pero
lo pueda puede pasar entonces por un tema de accesibilidad por un tema de ayudar al seo y un montón de
cosas puedes indicar cuando tienes aquí un elemento por ejemplo un dip y le dices que el rol esto me lo voy a copiar
vamos a poner el rol aquí le podéis poner el rol y que sea search para esto ahora justamente ha sacado un nuevo
elemento que se llama search directamente y entonces te va a explicar unas cuantas cosas para que tengas en cuenta porque así
vas a entender también cómo funciona html que es muy interesante que aquí ya te lo explican no que en lugar
de utilizar el dip ahora vas a poder utilizar un elemento se llama search que automáticamente provee de la
accesibilidad y la semántica correcta para indicar la sección de la web o la aplicación que es la búsqueda
vale dice esto se alinea con los principios de html haciendo que sea por defecto accesible en lugar de
requerir que recuerdes que tienes que añadir algo para que sea accesible esto es muy entera es muy
interesante porque justamente el objetivo del lenguaje de html es hacerlo semántico es que los
elementos tengan cuál es su objetivo vale esto es muy importante porque mucha gente no entiende o por qué
está este nuevo elemento search o por qué no puede utilizar siempre dip o cosas así no y es justamente
porque estás utilizando mal html mira que mucha gente lo infravalora como un lenguaje que no es
importante pero es por esto no porque html la idea es que tú utilices siempre las etiquetas correctas
para representar bien la semántica y aparte de todas las ventajas que tiene es porque la forma
correcta de utilizar el lenguaje y hasta ahora no había una forma de darle una semántica de cuál era la
sección que tenía el buscador y por eso lo están haciendo y seguramente más adelante vamos a ir viendo
nuevas añadidos por ejemplo dialo que es uno nuevo que hace poco que era para tener un diálogo porque
si no no había forma de representarlo en condiciones así que ya sabéis por qué lo han añadido no es que
lo hagan porque porque quieran dicho esto el soporte obviamente de esto es mínimo o sea no esto no soporta
ni el tato ahora mismo si veis search vale fijaos que sólo tiene un 0,13 0,13 o sea esto no soporta
nadie si quieres hacer una una rima la puedes hacer en tu cabeza fijaos que lo soporta safari es el primero
que lo soporta porque chrome 18 todavía 118 todavía no ha salido así que ojo cuidado porque safari está
soportando antes que chrome el nuevo elemento search y ahora dirás bueno pero entonces bueno pues no te
preocupes porque aunque esto es un 0,13 ahora marca mis palabras dentro de menos de un mes va a ser de
más del 50% y esto es así porque por suerte como puedes ver tanto chrome ya en la próxima versión
va a tener el soporte y chrome es el motor chromium que es el que utiliza edge por lo tanto edge también
tendrá soporte safari ya tiene soporte firefox en la próxima versión también va a tener soporte que por
cierto no me había fijado a mí me ha llamado bastante atención que resulta que firefox y chrome no sé
por qué se han puesto a la par de la versión creo que es una cosa que ha hecho aposta firefox como
para demostrar que también está evolucionando sabes habéis visto que las versiones de firefox y chrome
ahora siempre son las mismas a mí me ha sorprendido porque no me había dado cuenta pero me da la
sensación como que firefox decidió tomar esta estrategia porque si os fijáis chrome como que subía muy
rápido de versiones esto es como una cosa que hizo google a mí parecer como una estrategia en
marketing todo esto pero es un tema que muchas veces se hace como para dar la sensación que está
constantemente en evolución porque no es lo mismo decir que es chrome 10.1.2.3.4 que parece que no sea
la misma evolución que 118 119 cosas así y me ha resultado curioso de que firefox ya desde hace un
tiempo están justamente también a la par en las versiones y están siguiendo la misma estrategia
de cada mes lanzar una versión mayor bueno curioso el tema es que firefox también lo va a tener y safari
ios también entonces en un mes este elemento lo vais a tener pero igualmente una cosa que tenéis
que saber si por lo que sea un navegador no soporta un elemento vale este search lo que va a entenderlo por
defecto es como si fuese un dip o sea si yo pongo esto esto ahora mismo no tiene la semántica no porque
brave todavía no lo soporta este search entonces lo que está viendo brave es como si esto fuese un dip
directamente así que utilizar lo podéis utilizar ya si queréis o sea no hay ningún problema lo que pasa
es que tenéis que entender que no le está dando la semántica y seguramente si queréis estar tranquilos y
tranquilas y decir ostras esto estoy utilizando el elemento correcto y además le estoy dando la semántica al 100%
siendo navegadores lo mejor sería añadir también el rol que sé que es un poco raro vale es un poco
raro porque no debería ser necesario pero lo que estás consiguiendo aquí es por un lado darle soporte
a todos los navegadores que sí que entienden la etiqueta y por otro lado a todos los navegadores
que no entienden todavía la etiqueta y creen que este search es un dip y con esto pues ya lo tendrías
entonces dos pájaros de un tiro tienes un montón de cosas más tienes el popover también para añadir soporte
al atributo popover que esto no sé si lo habéis visto sería como para hacer un popover literalmente
mira tenéis aquí te dais ves y aquí tienes un popover y lo puedes cerrar y tienes diferentes
configuraciones por ejemplo ves cuando le das al fondo que se cierra también pues esto también lo
puedes hacer es un poco diferente a una modal vale un popover y una modal son un poco diferentes una
modal para que lo entendamos bien porque si no la gente se vuelve un poco loca esto normalmente antes
sólo lo podíamos hacer con bibliotecas con dependencias y era un poco rollo ahora esto
lo podemos hacer sin ninguna biblioteca popover lo malo por ahora también es la mala el mal soporte
que tiene pero bueno al menos ha llegado popover 63 por ciento ya tiene porque esto sí que ya lo
soportaba chrome edge y firefox lo tienen un flag que yo creo que muy pronto lo van a poder poner 63 por
ciento o sea que ya tiene mucho más lo interesante del popover es que la diferencia entre un dialogue y un
popover es que el dialogue normalmente es un contenido que se pone por encima digamos como
que si fuese otra capa diferente no el popover la idea más bien es como que sea una información
suplementaria como lo que ocurre muchas veces cuando tú te pones encima de un botón pero normalmente mira
esto sea un popover este sea un buen ejemplo de popover vale veis que le he dado un clic y sale esto pero
fíjate que el resto del contenido esto sigue siendo clic hable le podéis llamar tooltip pero es que un
tooltip sería todavía más pequeño un popover puede funcionar como tooltip pero un tooltip sería más más
pequeño esto sería un popover vale porque fíjate que yo he abierto este popover no porque es un trozo
solo que se queda por encima pero aunque esto ha aparecido esto sigue siendo clic hable en cambio un
dialog la idea no sería esta la idea del dialog es que todo quedaría por detrás sabes o sea que
sea una capa por encima de todo el contenido de la web veis esto esto debería quedar como por encima de
todo y no puedas utilizar nada nada que haya detrás en cambio el popover que aunque parezca mentira se
utiliza muchísimo y tenerlo nativo va a ser espectacular por ejemplo puede separar unos filtros puede ser para
una ayuda estos estos son dos ejemplos de popover bastante bueno pero a ver es fácil chavito es fácil
hay tres cosas mira el dialog sería un contenido que puede ser en una caja o puede ser a nivel de todo
que aparece solo encima de un trozo de la web dejando que el resto de la web sea todavía aplicable o
accesible por ejemplo aquí va es le doy al filtro este esto sería un popover porque yo todavía puedo
seguir interaccionando con el resto de la página web le puedo dar clic aquí ningún problema esto es un
ejemplo un ejemplo de dialog mira es que me encanta esta página porque tiene todos los ejemplos esto
sería un poco ver vale todos los restos accesible un ejemplo de de modal o de dialog sería esto le
damos un clic y este contenido queda por encima de nuestra página web fíjate que por detrás está la
página pero no es clicable ves que yo no le puedo dar clic a la parte de atrás no es accesible ni puedes
interactuar con ella así que ahí tendrías un ejemplo esto sería por ejemplo una modal o un dialog esto
sea un dialog y luego tendríamos un tooltip que el tooltip normalmente esto sería un ejemplo de
tooltip esto sea un ejemplo de tooltip fíjate que es una información que aparece al ponerte encima que
es flotante que desaparece una vez que no puedes accionar con ella que desaparece rápidamente y tal
normalmente los tooltips son un poco más pequeños pero bueno son bastante más parecidos al popover pero
sería como información mucho más no está tan pensada de clicar y desclicar vale que sí que pasa un poco
con el filtro con el popover que es más de clicar no en cambio el tooltip sería más de pasar por encima
que aparece y tal el mejor ejemplo que tienes de tooltip es cuando tú tienes un enlace y tienes el
atributo title y entonces te aparece como el título a ver si éste tampoco tiene title no porque hay veces
que cuando te pones encima de un enlace te aparece ahí como un mensajito eso será un ejemplo de tooltip vale
y ahí tendrías los tres diferentes si pudiese interactuar con el fondo para salir a modal como se
denominaría sería una modal sería un diálogo igualmente porque en realidad estás interactuando
con el fondo pero en realidad es para cerrarlo vale no estás interactuando con el contenido de
la web está como en otra capa y por eso sería un diálogo de hecho los diálogos tienen fondo y lo
puedes customizar