Este documento describe cómo agregar elementos interactivos, dinámicos y personalizados a sitios web creados con Wix. Explica cómo incorporar redes sociales, formularios de contacto, ventanas emergentes, blogs, tiendas online y más utilizando las aplicaciones disponibles en Wix. También cubre cómo insertar elementos mediante códigos HTML, como gráficos de Google, líneas de tiempo y chats. El objetivo es enriquecer los sitios y mejorar la experiencia de los usuarios.

1. Tecnología de la Comunicación II
Clase 7: “WIX: agregado de elementos interactivos,
dinámicos y personalizados. Almacenamiento,
previsualización, publicación y adaptación a versión
celular”
Lics. en Comunicación Social y Periodismo-FCH-UNSL-2018
Elaborado por la Prof. Viviana Ponce, Lic. Creative Commons

2. Agregado de elementos interactivos
Interactivo: permite agregar publicidades,
presentaciones con diapositivas, efectos de cursor, etc.
Al ser accedidos por el lector enlazan a elementos
diferentes (páginas, sitios web, …)

3. Agregado de elementos interactivos
Redes sociales: permiten vincular con lectores a partir de
diversas aplicaciones sociales.

4. Agregado de elementos interactivos
Las redes sociales admiten la personalización de las
aplicaciones con las que se interactúa en el sitio.

5. Agregado de elementos interactivos
Redes sociales en un periódico…

6. Agregado de elementos interactivos
Contacto: permite establecer una comunicación íntima y
privada vía formulario web.

7. Agregado de elementos interactivos
Contacto: posibilita configurar su estilo, diseño,
animación y un email donde se recepcionarán los
mensajes enviados por los lectores.
vivianaponce@gmail.com

8. Agregado de elementos interactivos
Contacto: Las consultas enviadas a través del formulario
se recepcionan en la cuenta de correo electrónico del
medio o bien, de su administrador.

9. Agregado de elementos interactivos
Ventana: permite agregar una notificación (de
bienvenida, suscripción, descuento, etc.) que se
despliega de forma automática en una página del sitio.

10. Agregado de elementos interactivos
Ventana: cada uno de sus elementos puede
personalizarse en tipografía, contenido, fondos, etc.

11. Agregado de elementos interactivos
Ventana en un periódico…

12. Agregado de elementos interactivos
Ventana en una revista…

13. Agregado de elementos interactivos
Blog: cada sitio puede incorporar un blog, que puede
agregar como contenido de una página.

14. Agregado de elementos interactivos
Blog: posibilita administrar sus entradas, estilo y diseño,
entre otras opciones.

15. Agregado de elementos interactivos
Entradas del Periódico: “Diario San Luis” con uso de tags
y categorías…

16. Agregado de elementos interactivos
Entradas del sitio web de la Revista:”Sun Yoga” sin uso
de tags ni categorías…

17. Agregado de elementos interactivos
Tienda online: posibilita comercializar con productos en
línea.

18. Agregado de elementos interactivos
Tienda online: la personalización de sus productos
implica establecer el catalogo, los pedidos, promoción y
política de venta, etc.

19. Agregado de elementos interactivos
Tienda online en un periódico…

20. Agregado de otros elementos
WIX APP MARKET contiene acceso a diversidad de
aplicaciones interactivas, dinámicas y personalizadas.

21. Agregado de elementos interactivos
Comentarios (Wix-App-Market): permiten recepcionar la
opinión de los lectores mediante su fidelización.

22. Agregado de elementos interactivos
Comentarios (Wix-App-Market): sus opciones de
configuración son variadas.

23. gregado de elementos interactivos
Chat (Wix-App-Market): permite interactuar en línea con
los lectores.

24. Agregado de elementos interactivos
Chat (Wix-App-Market): muchas apps de chat pueden
ser utilizadas durante un periodo de prueba…a menos
que se disponga de una cuenta premium en Wix.

25. Agregado de elementos interactivos
Chat (Wix-App-Market): en ocasiones es útil la opción
“Chatea con nosotros”.

26. Agregado de elementos interactivos
Maps (Wix-App-Market): permite geolocalizar un punto
geográfico determinado.

27. Agregado de elementos interactivos
Maps (Wix-App-Market): Se configura mediante ingreso
de una dirección física, descripción y opciones de
comportamiento.

28. Agregado de elementos interactivos
Buscador (Wix-App-Market): facilita la búsqueda de
información dentro del sitio.

29. Agregado de elementos interactivos
Foro (Wix-App-Market): admite el flujo de mensajes
permanente al interior de un sitio.

30. Agregado de elementos interactivos
Foro en un
periódico…

31. Agregado de elementos dinámicos
Contador de visitas (Wix-App-Market): registra la
cantidad de visitas a un sitio.

32. Agregado de elementos dinámicos
Contador de visitas (Wix-App-Market): en muchos casos
permiten elegir un diseño del botón, su texto y su inicio
numérico, entre otras opciones.

33. Agregado de elementos dinámicos
Calendario de eventos (Wix App Market): configura y
activa diversos acontecimientos.

34. Su configuración permite asociar fechas, enlaces,
imágenes, ubicaciones en mapas…

35. Agregado de elementos dinámicos
Clima (Wix App Market): establece el estado del tiempo
para un lugar geográfico determinado.

36. Agregado de elementos dinámicos
Clima (Wix App Market): sus opciones de configuración
son variadas.

37. Agregado de elementos personalizados
Suscripción al sitio (Wix App Market): permite que los
lectores suscriptos reciban contenidos puntuales en una
casilla de email.

38. Uso de códigos web para el agregado de
más elementos al sitio
En la Web existen otros elementos (personalizados,
interactivos, dinámicos, multimediales, etc.) que pueden
ser agregados desde la opción: “HTML” del
supermercado de apps de WIX, mediante su código web.

39. Uso de códigos web para el agregado de
más elementos al sitio
El sitio debe permitir el agregado de elementos y
proveer el código para su inserción en otro sitio web.

40. Uso de códigos web para el agregado de
más elementos al sitio
Se debe chequear que el código provisto funcione en
WIX, caso contrario no se visualizará correctamente al
publicar el sitio.

41. Uso de códigos web para el agregado de
más elementos al sitio
Con conocimientos en HTML además, es posible
modificar el efecto de estos códigos, o tomarlos como
insumo para la generación de códigos futuros.
<div style="text-
align:center;width:350px;padding:0.5em 0;">
<h2><a style="text-decoration:none;"
href="http://www.zeitverschiebung.net/es/timez
one/america--argentina--san_luis"><span
style="color:gray;">Hora actual en</span><br
/>America/Argentina/San_Luis</a></h2> <iframe
src="http://www.zeitverschiebung.net/clock-
widget-
iframe?language=es&timezone=America%2FArge
ntina%2FSan_Luis" width="100%" height="130"
frameborder="0" seamless></iframe> <small
style="color:gray;">&copy; <a
href="http://www.zeitverschiebung.net/es/"
style="color: gray;">Diferencia
horaria</a></small> </div>
<div style="text-
align:center;width:350px;padding:0.5em 0;">
<iframe src="http://www.zeitverschiebung.net/clock-
widget-
iframe?language=es&timezone=America%2FArgentina
%2FSan_Luis" width="100%" height="130"
frameborder="0" seamless></iframe>

42. Uso de códigos web para el agregado de
más elementos al sitio
La visualización final varía en cuanto eliminemos o
agreguemos líneas de código, pero para esto se debe
tener conocimientos en programación.

43. Uso de códigos web para el agregado de
más elementos al sitio
Existe una gran cantidad de sitios que proveen códigos
web para reutilizar en nuestro sitio, pero no todos estos
códigos funcionan.
Se recomienda probarlos antes mediante la opción:
“Actualizar”.

44. Uso de códigos web para el agregado de
más elementos al sitio
Líneas de tiempo: permite organizar de modo
cronológico acontecimientos de una temática, previo
ingreso y registro en la aplicación (por ej. Timetoast).

45. Uso de códigos web para el agregado de
más elementos al sitio
Líneas de tiempo: se constituye de eventos, a los que se
le asocia descripción, imagen y periodo de tiempo.
Fuente: https://www.youtube.com/watch?v=HtoS1JltSIY

46. Uso de códigos web para el agregado de
más elementos al sitio
Líneas de tiempo: pueden ser compartidas mediante su
dirección web (siempre que sean públicas).
Fuente: https://www.youtube.com/watch?v=HtoS1JltSIY

47. Uso de códigos web para el agregado de
más elementos al sitio
Líneas de tiempo: Timeline es otro ejemplo de aplicación
que permite la creación e inserción de una línea de
tiempo en un sitio web.

48. Uso de códigos web para el agregado de
más elementos al sitio
Gráficos de Google: permite agregar gráficos (de torta,
líneas de tiempo, mapas, etc.) que pueden embeberse
en un blog.
Fuente:
https://google-
developers.appsp
ot.com/chart/int
eractive/docs/gal
lery/piechart

49. Uso de códigos web para el agregado de
más elementos al sitio
Gráficos de Google: los gráficos se construyen a partir
del código html, que puede personalizarse…
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['2016', 11],
['2015', 9],
['2014', 8],
['2013', 7],
['2012', 7]
]);
var options = {
title: '2012-2016',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="height: 250px; width: 350px;">
</div>
</body>
</html>

50. Uso de códigos web para el agregado de
más elementos al sitio
Gráficos de Google:
el nuevo código se
agrega mediante la
app “HTML”

51. Uso de códigos web para el agregado de
más elementos al sitio
Visualización del gráfico en el periódico…

52. Uso de códigos web para el agregado de
más elementos al sitio
Gráficos más complejos: pueden realizarse sobre un
conjunto de valores más extenso.

53. Uso de códigos web para el agregado de
más elementos al sitio
Gráficos: permiten personalizar el contenido y obtener
códigos html, previo registro en su sitio web.

54. Uso de códigos web para el agregado de
más elementos al sitio
Gráficos: la publicación y visualización permiten apreciar
cómo se vería inserto en un sitio…

55. Uso de códigos web para el agregado de
más elementos al sitio
Gráfico en un
periódico…

56. Uso de códigos web para el agregado de
más elementos al sitio
Chat: existen aplicaciones variadas que por un bajo costo
o de modo gratuito admiten los mensajes por esta vía.

57. Uso de códigos web para el agregado de
más elementos al sitio
Chat: su
configuración
permite su
inserción en
un sitio web.

58. Uso de códigos web para el agregado de
más elementos al sitio
Chat en un
periódico…

59. Uso de códigos web para el agregado de
más elementos al sitio
Encuestas: constituyen diferentes formas de realizar
indagaciones en el lector.

60. Uso de códigos web para el agregado de
más elementos al sitio
Encuestas: ejemplo de trabajo en Servio.

61. Uso de códigos web para el agregado de
más elementos al sitio
Encuestas: permite configurar su estilo y aspecto visual.

62. Uso de códigos web para el agregado de
más elementos al sitio
Encuestas: provee un código web para su inserción en un
sitio web.

63. Uso de códigos web para el agregado de
más elementos al sitio
Encuesta en
un
periódico…

64. Uso de códigos web para el agregado de
más elementos al sitio
Transmisión de audio y TV en vivo: pueden realizarse a
través de aplicaciones concretas (gratuitas o pagas).

65. Guardar sitio web
En Wix es fundamental guardar nuestro trabajo, caso
contrario perderemos todo lo que hemos realizado.
Al guardar es importante además registrar la dirección
URL de nuestro sitio.

66. Publicar sitio web
La publicación del sitio se realiza cuando está terminado
y funciona adecuadamente. Mientras tanto y durante la
edición, se utiliza la opción: “Guardar”.

67. Obtener la URL de una página del sitio
Es importante recordar que todas las páginas que
creamos en un sitio poseen una dirección URL, esta se
obtiene desde la información SEO.

68. Adaptación a versión celular
Una vez creado el sitio para su versión en la Web, se
procede a su adaptación para la plataforma celular.

69. Adaptación a versión celular
La adaptación es un proceso sencillo que consiste en
ubicar los elementos del sitio, en el área especificada.

70. Adaptación a versión celular
Además algunos contenidos pueden ocultarse, en caso
que amerite no incluirlos en la visualización.

71. Fin de la Clase
…por su atención!