Creacion de sitios web en Wix- Parte II

1. Clase 8: “Creación de sitios web en WIX. Agregado de
elementos multimediales, hipermediales, interactivos,
dinámicos y personalizados”
Lics. en Comunicación Social y Periodismo-FCH-UNSL-2019
Elaborado por la Prof. Viviana Ponce, Lic. Creative Commons

2. 7-Menú de agregado de elementos
Permite el agregado de elementos multimediales,
interactivos, dinámicos, a medida e hipermediales.

3. Agregado de elementos MULTIMEDIALES
Texto: admite diversas tipografías y tamaño.

4. Imagen: desde dentro o fuera del sitio puede incorporarse
imágenes de mapa de bits.

5. Galería: agrupa imágenes de mapa de bits con propósitos
diferentes.

6. Arte vectorial: incluye imágenes de esta tipología…

7. Formas: contiene atractivos dibujos para incluir en una o más
páginas del sitio.

8. Botones: se asocian a una acción determinada: obtener más
información, contactar con un medio, etc.

9. Los botones se pueden enlazar a diversos elementos; por
ejemplo en el caso del botón: “Contáctenos” puede
modificarse su nombre y el lugar donde se dirige, a través de
su enlace….

10. Y pueden personalizarse estéticamente.

11. Cajas: se usan para contener elementos textuales, visuales,
etc.

12. Franjas: visten la página con atractivos diseños.

13. Listas y Cuadrícula: organizan literalmente la información, en
conjunto con textos, botones e imágenes.

14. Videos: desde dentro o fuera del sitio.

15. Música: desde dentro o fuera del sitio.

16. Menú: permite crear otras secciones del sitio.

17. Agregado de elementos HIPERMEDIALES
Cobran sentido a partir de los enlaces que interrelacionan a
uno o más páginas de un sitio. Pueden ser realizados desde
diferentes elementos (texto, enlace, botón…) y admiten
diferentes tipologías.

18. Tipo 1: Ejemplo de enlace a una página interna del sitio: se
realiza desde una sección particular del menú, pero también
podría efectuarse desde el título, imagen de la noticia, etc.
http://diariodesanluis.wixsite.com/periodicodeprueba/clausurabombonera

19. Tipo 2: Ejemplo de enlace a un ancla: permite “saltar” a
diferentes marcas o puntos dentro de una misma página.
Asume que las anclas ya fueron creadas desde el menú
“Anclas y más”

20. Las anclas suelen utilizarse además como método alternativo
a los enlaces externos y logran concentrar en una única
página toda la información.

21. Como modo alternativo al uso de una única ancla, se utiliza el
“menú de anclas”. Éste sustituye al clásico menú de opciones
y puede ocultarse, mientras se desplaza por la barra de
desplazamiento.

22. Tipo 3: Ejemplo de enlace a una dirección web: permiten
direccionar a un sitio externo al que estamos trabajando.

23. El sitio al que se dirige el enlace puede ser abierto en la
misma ventana o en una ventana nueva. La primera opción
suele utilizarse cuando se trata de páginas internas al sitio;
mientras que la segunda opción se utiliza cuando se trata de
páginas externas.

24. Tipo 4: Ejemplo de enlace a un correo electrónico: puede
crearse desde una página del menú o desde cualquier otro
elemento.

25. Tipo 5: Enlace a un número telefónico
Al cliquear desde un celular se presta a activar la llamada por
teléfono.

26. Tipo 6: Enlace a un documento: puede crearse desde una
página del menú o desde otro elemento.

27. Tipo 7: Enlace a una sección del encabezado o pie de página:
enlaza a la parte superior o inferior de una página

28. Agregado de elementos INTERACTIVOS
Establecen una vinculación con el usuario a través de
diferentes elementos (publicidades, presentaciones con
diapositivas, efectos de cursor, etc.) que al ser accedidos por
enlazan a lugares diversos (páginas, sitios web, etc.…).

29. Redes sociales: permiten vincular con lectores a partir de
diversas aplicaciones colectivas.

30. Contacto: permite establecer una comunicación, en este
caso, de carácter íntimo y privado vía formulario web.

31. Admite además la configuración de su estilo, diseño,
animación y un email donde se recepcionarán los mensajes
enviados por los lectores.
vivianaponce@gmail.com

32. Las respuestas a las consultas enviadas a través del
formulario se dirigen a la cuenta de correo electrónico del
medio o bien, de su administrador.

33. Ventana: emite una notificación (de bienvenida, suscripción,
descuento, etc.) al momento de ingresar a un sitio.

34. Blog: cada sitio puede incorporar un blog, que puede agregar
como contenido de una página.

35. Su configuración permite administrar sus entradas, estilo y
diseño, a la vez que organizar la información en categorías, lo
que permite identificar rápidamente la sección en la que se
clasifica…

36. Tienda online: posibilita comercializar con productos en
línea, a través de establecimiento de catálogo, pedidos,
promoción y política de venta, etc.

37. Una gran diversidad de elementos interactivos, dinámicos y
personalizados pueden ser agregados desde WIX APP
MARKET, una aplicación con acceso a diversas
funcionalidades.

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

39. Chat (Wix-App-Market): permite interactuar en línea con los
lectores. Sus versiones mayormente son de prueba o pagas.

40. Maps (Wix-App-Market): permite geolocalizar un punto
geográfico determinado. Se configura mediante ingreso de
una dirección física, descripción y opciones de
comportamiento.

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

42. Foro (Wix-App-Market): admite el flujo de mensajes
permanente al interior de un sitio.

43. Agregado de elementos DINÁMICOS
Contador de visitas (Wix-App-Market): registra la cantidad de
visitas a un sitio.

44. Calendario de eventos (Wix App Market): configura y activa
diversos acontecimientos.

45. Clima (Wix App Market): establece el estado del tiempo para
un lugar geográfico determinado.

46. Agregado de elementos PERSONALIZADOS
Suscripción al sitio (Wix App Market): permite que los
lectores suscriptos reciban contenidos puntuales en una
casilla de email (acordes a sus necesidades).

47. Otras formas de agregar contenido digital al
interior de sitios web-USO DE CÓDIGOS WEB
Incluyen el uso de códigos web que pueden ser agregados
desde la opción: “HTML” del supermercado de apps de WIX,
mediante su código web.

48. Estos códigos, que se obtienen desde sitios web gratuitos y
se orientan a diferentes funcionalidades, deben ser
chequeados previamente en WIX para garantizar su
funcionamiento.

49. 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>

50. ELEMENTOS QUE SE PUEDEN AGREGAR
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).
Fuente: https://www.youtube.com/watch?v=HtoS1JltSIY

51. 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

52. Gráficos de Google: los gráficos se construyen a partir del
código html, que puede personalizarse antes de embeberse
en un blog…
<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>

53. Otros gráficos más complejos pueden realizarse con otras
aplicaciones y sobre un conjunto de valores más extenso.

54. La publicación y visualización permiten apreciar cómo se
vería inserto en un sitio…

55. Chat: por un bajo costo o de modo gratuito pueden
incorporarse los mensajes por esta vía.

56. Encuestas: constituyen diferentes formas de realizar
indagaciones en el lector.

57. Encuestas: ejemplo de trabajo en Servio.

59. Transmisión de audio y TV en vivo: pueden realizarse a través
de aplicaciones concretas (gratuitas o pagas).

60. OPERACIONES PARA NO OLVIDAR
Guardar sitio web: se efectúa de forma periódica para no
perder el trabajo realizado.
Publicar sitio web: una vez que éste está terminado.
Obtener la URL de una página del sitio: desde la información
SEO asociada a cada página.
http://eldiariodesanluis.wixsite.com/yoga/clases

61. ADAPTACIÓN A VERSIÓN CELULAR
Es un proceso sencillo que se realiza una vez concluido el
sitio web y consiste en ubicar sus elementos (aquellos que se
considere deben visualizarse) en un área especificada.
Fin de la Clase

62. Lics. en Comunicación Social y Periodismo-FCH-UNSL-2019
Elaborado por la Prof. Viviana Ponce, Lic. Creative Commons