La propiedad text-rendering

Esta es una propiedad de CSS poco difundida y lo que nos permite es controlar la forma en que los navegadores y sistemas operativos (Windows y Linux) muestran los textos cuando se utilizan determinado tipo de fuentes, haciendo hincapié en alguna característica.

La propiedad se llama text-rendering y puede tener cuatro valores diferentes:

optimizeSpeed enfatiza la velocidad, deshabilitando ciertas características de las fuentes
optimizeLegibility enfatiza la legibilidad y habilita esas características en desmedro de la velocidad
geometricPrecision en este momento, da el mismo resultado que utilizar optimizeLegibility
auto es el valor por defecto y en la práctica, utiliza optimizeSpeed para fuentes pequeñas (menos de 20 pixeles) y optimizeLegibility para el resto.

La propiedad puede ser utilizada en Firefox, Safari y Chrome y en la mayoría de los casos, el efecto es muy suti pero es más notable cuando se utilizan fuentes específicas como Calibri o Constantia que suelen estar instaladas en Windows.

Al margen de eso, siempre debemos tener en cuenta que eso que vemos nosotros no es necesariamente lo mismo que ven los demás ya que si no se tiene esa fuente instalada, el navegador mostrará la fuente definida como alternativa; por ejemplo:

font-family: Constantia, Arial, sans-serif;

Si no tenemos la fuente Constantia, el texto se mostrará en Arial y si tampoco tenemos esa (cosa bastante improbable) se mostrará con cualquiera de tipo sans-serif.

De allí que se hable de "fuentes seguras" que no son seguras porque no crean problemas sino porque son aquellas que están presentes en la enorme mayoría de los sistemas operativos que usamos:

• font-family: Arial, sans-serif;
• font-family: ‘Comic Sans MS’, cursive;
• font-family: Georgia, serif;
• font-family: Helvetica, sans-serif;
• font-family: Tahoma, sans-serif;
• font-family: ‘Times New Roman’, serif;
• font-family: ‘Trebuchet MS’, sans-serif;
• font-family: ‘Lucida Grande’, sans-serif;
• font-family: Verdana, sans-serif;

La lista la podemos ampliar un poco más pero no mucho:

• font-family: 'Arial Black’, sans-serif;
• font-family: ‘Courier New’, Courier, monospace;
• font-family: Garamond, serif;
• font-family: Geneva, sans-serif;
• font-family: Impact, sans-serif;
• font-family: ‘Lucida Console’, monospace;
• font-family: Palatino, serif;

Si queremos ser más sofisticados pero, a la vez, queremos que la fuente la vean todos, deberemos incrustarla o bien utilizar algunas de las que provee Google Font API.

REFERENCIAS:developer.mozilla.org

Añadir un gadget en Blogger es sencillo, en la primera pantalla de Diseño se muestran las secciones en que está dividido nuestro blog y basta hacer click en el enlace respectivo para que se abra la ventana que muestra los diferentes elementos; de allí en más, seguimos las instrucciones o completamos los datos y voilá. Podemos moverlo, editarlo, eliminarlo; no suele haber problemas y en la plantilla en si misma, se agrega una línea:

<b:widget id='NOMBRE' locked='false' title='TITULO' type='TIPO'/>

donde:
id='NOMBRE' varía según el tipo y se los identifica con un número
title='TITULO' es el texto que hayamos agregado en el cuadro correspondiente al crear el gadget
type='TIPO' es el tipo definido por Blogger mismo (Feed, BlogList, Label, etc)

El título no es obligatorio pero siempre es bueno ponerlo y, en todo caso, si no queremos que se muestre, conviene modificar el código de la plantilla misma para ocultarlo ¿Por qué conviene ponerlo? porque si no lo hacemos, en la pantalla de diseño nos resultará difícil identificar cual es cuál si es que tenemos varios del mismo tipo.

Para personalizar eso, lo que debemos hacer es marcar Expandir plantillas de artilugios y de ese modo, las etiquetas widget que permanecían contraidas se expandirán, mostrando su contenido. En general, veremos que comienzan con algo así:

<b:widget id='NOMBRE' locked='false' title='TITULO' type='TIPO'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    .......
</b:widget>

Esa parte en negrita es el título así que si no queremos que se vea, simplemente, borramos esas líneas.

El contenido de cada etiqueta widget varía con el tipo; algunas pueden editarse, otras no.

Hay un gadget en particular que utilizamos mucho, es el llamado HTML/Javascript y es el que nos permite agregar cualquier tipo de código sin mayores restricciones. Ese gadget no es otra cosa que un mini editor y por lo tanto, es uno de los elementos más flexibles del sistema. Todo bien pero ... siempre hay un pero ... o varios peros.

Lo primero que debemos saber es que desde el punto de vista de la carga del blog, agregar códigos dentro de ese tipo de elemento es exactamente igual que agregarlo directamente en la plantilla aunque Blogger comete un error conceptual al establecer reglas de sintaxis diferentes para ambos. La más evidente es que en la platilla, debemos usar CDATA para que los scripts no se modifiquen o no nos volvamos locos cambiando caracteres y permutando comillas pero, en un gadget, esto no es necesario. Lo mismo ocurre con el uso de ciertos caracteres como & que en la plantilla están prohibidos, etc, etc.

Los gadgets también tienen otra limitación, cuando queremos hacer un backup de la plantilla usando la opción Descargar plantilla completa, el contenido de estos no es guardado y debemos hacerlo de manera manual; esto es particularmente molesto en el caso de los elementos HTML/Javascript. Entonces ¿para qué usamos gadgets de este tipo? Porque de ese modo, la plantilla nos parece menos densa y aparentemente, es más fácil encontrar cosas. De alguna manera, es una forma de barrer y guardar todo bajo la alfombra.

Pero, eso no es necesario, si queremos, podemos tener ambas cosas, usar el gadget y poner el código en la plantilla, para eso, simplemente creamos uno, le ponemos un titulo y algún contenido cualquiera ya que si no, no nos dejará guardarlo. Lo ubicamos y luego, vamos a la plantilla, expandimos todo y buscamos ese titulo. Veríamos algo así:

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Con el título hacemos lo mismo, lo eliminamos o lo personalizamos a gusto.

La etiqueta <b:include name='quickedit'/> es la que agrega el ícono de edición que vemos en el blog cuando estamos logueados con nuestra cuenta de administradores y al igual que el título, si queremos, podemos eliminarla.

Lo que queda, es el contenido en si mismo que se agrega siempre en un DIV que no tiene propiedades de estilo predeterminadas así que podemos dejarlo y entonces, TODO se reduce a la etiqueta <data:content/> que es la que carga el contenido así que basta eliminarla para que nos quede un gadget vacio donde podemos agregar cualquier cosa, que se expandirá y contraera como cualquier otro y cuyo código será parte del backup si descargamos la plantilla.

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <div class='widget-content'>
    ....... aquí coloco cualquier tipo de código .......
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Como cualquier otra cosa, eso también podemos condicionarlo de tal modo que se vea en determinado tipo de páginas; por ejemplo, este gadget sólo se verá en las páginas individuales:

<b:widget id='HTMLXX' locked='false' title='MI TITULO' type='HTML'>
<b:includable id='main'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='widget-content'>
      ....... aquí coloco cualquier tipo de código .......
    </div>
    <b:include name='quickedit'/>
  </b:if>
</b:includable>
</b:widget>

Cambiando las condiciones podemos controlar las páginas y las variantes son muchas; aquí hay algunas:

<!-- esto sólo se verá en el home -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
  .......
</b:if>

<!-- esto NO se verá en el home -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas estáticas -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  .......
</b:if>

<!-- esto NO se verá en las páginas estáticas -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas individuales -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  .......
</b:if>

<!-- esto NO se verá en las páginas individuales -->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
  .......
</b:if>

<!-- esto sólo se verá en las páginas de listas (etiquetas/archivos/etc) -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  .......
</b:if>
</b:if>
</b:if>

REFERENCIAS:100+ Free High Quality Icon Sets for Web Designers and Developers

Countdown Calendar es un servicio que nos permit ingresar algunos datos y nos devuelve un código que genera un calendario de eventos con un contador que muestra el tiempo que falta para determinada fecha.

La página es bastante intuitiva y allí basta ir seleccionando las diferentes opcion para previsualizar el resultado e ir ajustando los detalles.

El resultado final es un código que podemos agregar por ejemplo, en cualquier elemento HTML.

Como lo que nos dan es un código HTML y un script, con un poco de esfuerzo, podemos cambiarlo por completo y adaptarlo a cualquier necesidad sin tener que limitarnos a lo que ellos proponen.

REFERENCIAS:Blogtecnia

Muchos utilizan jQuery y para ellos, New2WP muestra una forma simple de crear efectos de distino tipo; este, en particular, permite deslizar imagenes de tal modo que superponemos dos y cuando ponemos el cursor encima, se muestra la otra; es decir un efecto hover pero animado:

El script en si mismo es corto, agregamos jQuery antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>

Y debajo, la función:

<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('.animar').hover(function() {
    $(this).children('.front').stop().animate({ "top" : "150px"}, 700);
  }, function() {
    $(this).children('.front').stop().animate({ "top" : "0px"}, 200);
  });
});
//]]>
</script>

Por último, un poco de CSS:

<stye>
.animar {
  cursor: pointer;
  height: 150px;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 200px;
}
.animar img {
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}
</stye>

Lo usaremos de este modo:

<div class="animar">
  <img src="URL_SEGUNDA_IMAGEN" />
  <img src="URL_PRIMERA_IMAGEN" class="front" />
</div>

Todo lo que debemos hacer es colocar dos imágenes dentro de un DIV con la clase animar y adentro, dos imágenes; la segunda de ellas tendrá la clase front y es la que se verá por defecto; como están posicionadas de forma absoluta, están superpuestas y la segunda, tapa la primera.

El tamaño de las imágenes del ejemplo es de 200x150 y el script buscará la imagen con la clase front y cambiará el valor de la propiedad top de tal forma que se "mueva" hacia abajo tanto como el alto de la imagen misma y de esa forma, se verá la otra que está debajo animando ese desplazamiento con una cierta velocidad (700 en este caso):

$(this).children('.front').stop().animate({ "top" : "150px"}, 700); // baja 150 pixeles

Al sacar el cursor de encima se restaura la posición a cero pero más rápidamente (200):

$(this).children('.front').stop().animate({ "top" : "0px"}, 200);

Lo mismo puede hacerse en cualquier dirección; esto desplaza la imagen hacia arriba:

$(this).children('.front').stop().animate({ "top" : "-150px"}, 700);  // sube 150 pixeles

Y estas dos, desplazarían la imagen horizontalmente ya que en lugar de top, usamos left:

// hacia la derecha:
$(this).children('.front').stop().animate({ "left" : "200px"}, 700);  // se mueve 200 pixeles a la derecha (valores positivos)
...
$(this).children('.front').stop().animate({ "left" : "0px"}, 200); });

// hacia la izquierda:
$(this).children('.front').stop().animate({ "left" : "-200px"}, 700);  // se mueve 200 pixeles a la izquierda (valores negativos)
...
$(this).children('.front').stop().animate({ "left" : "0px"}, 200); });

Mucho CSS pero no importa, leaverou.me muestra la forma de crear patterns sin imégens y aplicarlos como fondos a cualquier etiqueta de bloque aunque, claro, al hacer uso (y abuso) del CSS3, no será visible en Internet Explorer. De todos modos, es una nueva demostración de lo poderoso que pueden ser estas nuevas herramientas.

Esta sería la clase básica donde definimos el tamaño del pattern utilizando la propiedad background-size:

.stripes {
  -moz-background-size: 25px 25px;
  -webkit-background-size: 25px 25px;
  background-size: 25px 25px;
  height: 150px;
  margin: 0 auto;
  width: 600px;
}

Cada modelo tiene sus propias reglas y la longitud de ellas puede asustar. Las aplicamos, colocando la clase base y la clase del modelo en la etiqueta; por ejemplo:

<div class="horizontal stripes"></div>
<div class="vertical stripes"></div>
<div class="picnic stripes"></div>

.angled {
  background-color: #AC0;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),  to(transparent));
  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.angled-135 {
  background-color: #c16;
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),  to(transparent));
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

.horizontal {
  background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.vertical {
  background-color: #f90;
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

.checkered {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
  -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
  -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
  -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
  -moz-linear-gradient(45deg, transparent 75%, #555 75%),
  -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
  -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
  -o-linear-gradient(45deg, transparent 75%, #555 75%),
  -o-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
}

.picnic {
  background-color:white;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
  -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
  background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
  linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

¿Un poco más sobre JSON? Es una pregunta retórica porque acá vamos con un poco más sobre JSON. En realidad, no sólo porque es una forma bastante cómoda de leer contenidos de la web sino porque en Blogger es uno de los pocos métodos que podemos implementar a la hora de acceder a ciertos datos.

No todas las webs poseen esa posibilidad pero, por lo general, los servicios más importantes permiten que usemos este sistema. Uno de ellos es Twitter y eso, lo hacemos accediendo a su API que es la misma que utilizan todos los widgets.

Cuando accedemos a la URL de ese API, lo que nos devuelve es una serie de datos ¿Qué datos? Una forma fácil de verlos es utilizar una de las heramientas de Json Format; allí en el cuadro Load JSON Data from URL podemos colocar la dirección que queremos verificar y al hacer click en Process, nos mostrará el resultado es decir, los datos a los que podemos acceder.

En este caso, pondremos esta URL:

http://api.twitter.com/1/users/show.json?screen_name=nombreusuario

donde reemplazaremos nombreusuario por el nombre de nuestra cuenta en Twitter así que, en mi caso, en el cuadro Formatted JSON Data se mostrará algo así:

{ "contributors_enabled" : false,
  "created_at" : "Wed Sep 10 05:57:39 +0000 2008",
  "description" : "Lo bueno de Twitter es que sirve para hablar solo ... y que no te tomen por loco ...",
  "favourites_count" : 14,
  "follow_request_sent" : false,
  "followers_count" : 1213,
  .......
  "name" : "vagabundia",
  "notifications" : false,
  .......
  "profile_image_url" : "http://a0.twimg.com/profile_images/59754928/Avatar90x90_normal.png",
  .......
  "screen_name" : "vagabundia",
  "show_all_inline_media" : false,
  "status" : { "contributors" : null,
    "coordinates" : null,
    "created_at" : "Wed Nov 03 03:00:12 +0000 2010",
    .......
    "text" : "BLOGGER:  tubePlayer: Nueva versión del reproductor http://goo.gl/fb/4FEeL",
    "truncated" : false
  },
  "statuses_count" : 3097,
  .......
  "url" : "http://vagabundia.blogspot.com/",
  "utc_offset" : -10800,
  "verified" : false
}

¿Muy raro? En realidad, no tanto si es que hemos entendido cómo funciona este coso. La primera palabra de cada línea es el nombre del dato y lo que está después de los dos puntos, es el dato en si mismo así que, "screen_name" : "vagabundia" significa que el nombre de mi cuenta está guardado en un dato llamado screen_name así que, podría llerlo con JavaScript; ese ytodos lod demás.

Vamos a verlo paso a paso; necesito llamar a ese API desde el blog así que pongo algo así antes de </body>, al final de mi plantilla para que se ejecute sin molestar al resto:

<script src="http://api.twitter.com/1/users/show.json?screen_name=nombreusuario&amp;alt=json-in-script&amp;callback=leerTwitter"></script>

Como en los ejemplos anteriores, coloco en callback, el nombre de la función que voy a utilizar para interpretar o manipular los datos leidos así que, antes de </head> (o antes de ese script), colocaré mi función:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  // aquí es donde leeré los datos y haré algo con ellos
}
//]]>
</script>

¿Cómo sé cuáles son los datos? Es lo que nos mostró la herramienta así que, en esa función, la variable json contiene todo eso y accedemos a cada uno de ellos de este modo:

json.description contendrá la descripción de la cuenta
json.followers_count la cantidad de seguidores
json.screen_name es el nombre de lacuenta
json.statuses_count la cantidad de tweets enviados

Esos son faciles pero hay otros que tienen "subdatos", para leer esos, basta agregar un punto y seguir leyendo a sí que:

json.status.text contendrá el texto del último tweet que hayamos enviado

Sabiendo esto, entonces, puedo llenar al función para hacer algo y mostrar esos datos; por ejemplo:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  var salida ="";
  salida += "<h5><img src='" + json.profile_image_url + "' />" + json.screen_name + "</h5>";
  salida += "<small>" + json.description + "</small><p>" + json.status.text + "</p>";
  document.getElementById("mitwitter").innerHTML = salida;
}
//]]>
</script>

o esta otra que mostrará la cantidad de seguidores:

<script type='text/javascript'>
//<![CDATA[
function leerTwitter(json) {
  var salida ="";
  salida += json.followers_count + "<small>seguidores</small>";
  document.getElementById("misseguidores").innerHTML = salida;
}
//]]>
</script>

En ambos casos, lo que necesitamos es un DIV o etiqueta con un ID así que alli donde querramos mostrarlo, pondremos:

<div id="mitwitter"></div>

o bien:

<div id="misseguidores"></div>

En resumen, el orden es siempre el mismo; primero la función, luego el DIV con el ID exclusivo donde se mostrarán los datos y por último, el script que carga el API.