<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: adridoz</title>
    <description>The latest articles on Forem by adridoz (@adridoz).</description>
    <link>https://forem.com/adridoz</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F392693%2F810e1de0-12c0-47b6-abf2-4ac3a72295ad.png</url>
      <title>Forem: adridoz</title>
      <link>https://forem.com/adridoz</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/adridoz"/>
    <language>en</language>
    <item>
      <title>Mesa redonda: LGTBIQ+ en el mundo tech</title>
      <dc:creator>adridoz</dc:creator>
      <pubDate>Mon, 14 Jun 2021 12:43:23 +0000</pubDate>
      <link>https://forem.com/adevintaspain/mesa-redonda-lgtbiq-en-el-mundo-tech-7ob</link>
      <guid>https://forem.com/adevintaspain/mesa-redonda-lgtbiq-en-el-mundo-tech-7ob</guid>
      <description>&lt;p&gt;En el contexto de las celebraciones del Orgullo 2021 🏳️‍🌈, en Adevinta Spain organizamos esta mesa redonda para debatir sobre ser LGTBIQ+ en el mundo tech desde una perspectiva local a partir de las experiencias de nuestros 4 participantes: Anna Mora, Verónica Escobar, Miguel Ángel Rodríguez y Diego Calvo.&lt;/p&gt;

&lt;p&gt;Hablamos de cómo fue su salida del armario, percepción del entorno laboral, temas de actualidad, WITECH, comunicación en redes sociales y cómo les gustaría que las cosas cambiaran en el futuro, entre otros...&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/f0wxqlhAtjQ"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>lgbtq</category>
      <category>techtalks</category>
      <category>inclusion</category>
    </item>
    <item>
      <title>Usando Web Share API para llegar más lejos</title>
      <dc:creator>adridoz</dc:creator>
      <pubDate>Thu, 03 Dec 2020 14:54:34 +0000</pubDate>
      <link>https://forem.com/adevintaspain/usando-la-share-api-para-llegar-mas-lejos-4l13</link>
      <guid>https://forem.com/adevintaspain/usando-la-share-api-para-llegar-mas-lejos-4l13</guid>
      <description>&lt;h1&gt;
  
  
  Introducción
&lt;/h1&gt;

&lt;p&gt;La &lt;em&gt;Web Share API&lt;/em&gt; nos permite compartir contenido de &lt;strong&gt;forma nativa&lt;/strong&gt;, una funcionalidad que antes estaba limitada exclusivamente a aplicaciones nativas iOS y Android. En este &lt;em&gt;post&lt;/em&gt; veremos qué ventajas nos ofrece, la compatibilidad entre navegadores y su implementación.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fttvamr8t3xjy1jlp67xb.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fttvamr8t3xjy1jlp67xb.gif" alt="Compartición con Web Share API"&gt;&lt;/a&gt;&lt;/p&gt;
Fig.1 - Grabación compartiendo un inmueble de habitaclia.



&lt;h1&gt;
  
  
  ✅ ¿Qué ventajas nos proporciona?
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;El usuario ya está acostumbrado a compartir de forma nativa mediante su dispositivo, con lo que la &lt;strong&gt;experiencia de usuario es más óptima&lt;/strong&gt; que si se hiciera con un nuevo componente.&lt;/li&gt;
&lt;li&gt;Muestra &lt;strong&gt;conversaciones recientes y las últimas aplicaciones&lt;/strong&gt; usadas y/o que tiene configuradas el usuario. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6k3nex578lsli0obewpj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F6k3nex578lsli0obewpj.png" alt="Conversaciones recientes al compartir"&gt;&lt;/a&gt;&lt;/p&gt;
Fig.2 - Conversaciones y aplicaciones recientes al compartir.



&lt;ul&gt;
&lt;li&gt;Se añaden aplicaciones nuevas &lt;strong&gt;sin necesidad de iterar&lt;/strong&gt; ningún componente y opciones como imprimir o compartir entre dispositivos si el sistema operativo lo permite.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Mejora el rendimiento&lt;/strong&gt; de la página debido a que no hace falta usar librerías de terceros, plugins o componentes propios.&lt;/li&gt;
&lt;li&gt;El usuario compartirá más que con botones propios según los resultados obtenidos por &lt;a href="https://web.dev/web-share/#santa-tracker-case-study" rel="noopener noreferrer"&gt;este caso de estudio&lt;/a&gt; de Google.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Y, por último, el hecho de usar API's que nos brinda la plataforma nos proporciona una ventaja añadida:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Al ser un estándar (&lt;a href="https://www.w3.org/TR/web-share/" rel="noopener noreferrer"&gt;o estar en vías de serlo&lt;/a&gt;) a medida que los navegadores la implementan, llegará &lt;strong&gt;a más usuarios&lt;/strong&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  🔧 ¿Qué necesitamos para poder usarla?
&lt;/h1&gt;

&lt;p&gt;Se deben cumplir algunas condiciones para poder usar la Share API:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Nuestra página web debe estar en un &lt;strong&gt;contexto seguro &lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share" rel="noopener noreferrer"&gt;usando HTTPS&lt;/a&gt;&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Solo podemos invocarla mediante una &lt;strong&gt;acción del usuario&lt;/strong&gt;; por ejemplo al pulsar un botón.&lt;/li&gt;
&lt;li&gt;Para evitar errores es recomendable &lt;strong&gt;comprobar que la API está disponible&lt;/strong&gt; en el navegador del usuario.&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  🧭 ¿Qué compatibilidad tiene?
&lt;/h1&gt;

&lt;p&gt;Actualmente el soporte es &lt;strong&gt;bastante amplio&lt;/strong&gt; si consideramos que la mayoría de usuarios usan iOS Safari o Chrome para Android. En la siguiente captura del portal &lt;a href="https://caniuse.com/web-share" rel="noopener noreferrer"&gt;Can I Use&lt;/a&gt; podemos ver en verde los exploradores móviles compatibles:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fr1lsrq6b5cioi0qopqci.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fr1lsrq6b5cioi0qopqci.png" alt="Web Share API compatibilidad en CanIUse"&gt;&lt;/a&gt;&lt;/p&gt;
Fig.3 - Captura de compatibilidad en Can I Use.



&lt;p&gt;En cualquier caso, tal y como se comenta en el apartado anterior, es mejor comprobar si está disponible.&lt;/p&gt;

&lt;h1&gt;
  
  
  👩🏻‍💻 ¿Cómo se usa?
&lt;/h1&gt;

&lt;p&gt;Llamaremos a la Web Share API mediante el método &lt;em&gt;share&lt;/em&gt; que está disponible en el objecto &lt;em&gt;navigator&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Primero comprobamos que está disponible en el navegador:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;navigator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;share&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Código si la Web Share API es soportada&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Fallback&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Si está disponible, usaremos el siguiente código para compartir contenido:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="nb"&gt;navigator&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;share&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
      &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Usando la Web Share API para llegar más lejos&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;text&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Comparte contenido en tu página web de forma nativa&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="na"&gt;url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://dev.to/adevintaspain/usando-la-share-api-para-llegar-mas-lejos&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
    &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;¡Enlace compartido! Muchas gracias&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
    &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Ups, se ha producido un error&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;¡Así de sencillo! Podemos compartir contenido con más usuarios y mediante más aplicaciones!&lt;/p&gt;

&lt;p&gt;Si te ha parecido útil el artículo, dale al ♥️ y deja tus comentarios, impresiones o preguntas más abajo👇 ¿Te animas a usar la Web Share API en tu página web? ¿Ya la usas?&lt;/p&gt;

&lt;p&gt;&lt;span&gt;Imagen portada por &lt;a href="https://unsplash.com/@christopher__burns?utm_source=unsplash&amp;amp;utm_medium=referral&amp;amp;utm_content=creditCopyText" rel="noopener noreferrer"&gt;Christopher Burns&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>html</category>
      <category>webdev</category>
      <category>webperf</category>
    </item>
  </channel>
</rss>
