1. Taller de Periodismo Digital II
Prof. Marcelo Santos - @celoo
Gadgets, Widgets & cia
USACH - 2020

2. Vocabulario de hoy
• Gadget
• Widget
• Embed
• API
2

3. USACH Prof. Marcelo Santos - @celoo3

4. Contenidos para mi sitio
Cargar Articular
USACH 4 Prof. Marcelo Santos - @celoo

5. Cargar
Aspectos Positivos
•Confianza y control sobre
el contenido
•No hay riesgo de que
“desaparezca”
Aspectos Negativos
•Peso en el servidor
•Más lento
•No se actualiza
•Si algo cambia, tengo que
cambiar
•Credibilidad de pantallazo
no es lo mismo
USACH 5 Prof. Marcelo Santos - @celoo

6. Articular
Aspectos Positivos
•No necesito servidor (host de
contenido)
•Se mantienen las
funcionalidades originales
(enlaces, botones etc.)
•Si algo se actualiza, estará
automáticamente actualizado
en mi sitio
•Rápido
•Usar recursos que uno no
tendría como tener acceso
(API*)
Aspectos Negativos
•Riesgo de actualización
inesperada de contenido
•Riesgo que el contenido
desaparezca
•Técnicamente más difícil
•Cuidado con derechos de
autor
USACH 6 Prof. Marcelo Santos - @celoo

7. RED = Articulación de Contenido
USACH 7 Prof. Marcelo Santos - @celoo
FLUIDEZ
Interconectividad
Hipertextualidad
Interoperabilidad

8. Tipos de contenido a incrustar
• Imágenes
• Gráficas (interactivas o estáticas)
• Texto
• Audio (podcasts, músicas)
• Video
• Mecanismos (gadgets/widgets)
• Mapas
USACH 8 Prof. Marcelo Santos - @celoo

9. Tipos de contenido a incrustar
• Flujos (streams)
• Stream de video, playlists, hasta slides!!
• Línea de tiempo: Tiki-Toki y Knight Lab Timeline JS
• Gadgets Wordpress para Twitter/FB/Instagram
• Comparativo (juxtapose)
• Gráficas e infografías (interactivas o no)
• Tableau (Mineduc)
• Interactivos: Genial.ly tutorial Genial.ly,
infogr.am
USACH 9 Prof. Marcelo Santos - @celoo

10. Otros
• Encuestas
• Mapas (Google)
• Proyectos Knight Lab:
https://knightlab.northwestern.edu/projects
• Gráficas complejas hechas fáciles: RAW
USACH 10 Prof. Marcelo Santos - @celoo

11. Ejemplos
• Línea de Tiempo interactiva multimedia
(hecha con Timeline.js)
• ¿Citar y no articular?
• Narrativas interactivas (Otros ejemplos)
USACH 11 Prof. Marcelo Santos - @celoo

12. EL SECRETO…
Busque el
<embed>
USACH 12 Prof. Marcelo Santos - @celoo

13. Ejemplos de Embeds
USACH 13 Prof. Marcelo Santos - @celoo

14. Ejemplos de Embeds
USACH 14 Prof. Marcelo Santos - @celoo

15. En WP
USACH 15 Prof. Marcelo Santos - @celoo

16. En WP – Todas las opciones
USACH 16 Prof. Marcelo Santos - @celoo

17. Ejercicio 1: “Incrustando”
1. Seleccionar algún contenido de RRSS para
insertar en una página
- Twitter, Facebook, Instagram, Soundcloud, YouTube etc
2. Incrustar el código:
• Buscar opción embed o signo < > en el sitio original
• Copiar el código
3. En tu sitio en Wordpress:
• Nueva página o nueva entrada
• Insertar bloque (opción todos los bloques)
• Buscar su opción
• Pegar código
* Algunos tienen “shortcode” para WP
USACH 17 Prof. Marcelo Santos - @celoo