clase 8: “creación de sitios web en wix. agregado de elementos...

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

7-Menú de agregado de elementos Permite el agregado de elementos multimediales,

interactivos, dinámicos, a medida e hipermediales.

Agregado de elementos MULTIMEDIALES

Texto: admite diversas tipografías y tamaño.

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

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

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

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

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

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

Y pueden personalizarse estéticamente.

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

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

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

Videos: desde dentro o fuera del sitio.

Música: desde dentro o fuera del sitio.

Menú: permite crear otras secciones del sitio.

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.

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

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”

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.

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.

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

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.

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

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

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

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

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.…).

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

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

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

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.

Ventana: emite una notificación (de bienvenida, suscripción,

descuento, etc.) al momento de ingresar a un sitio.

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

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…

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.

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.

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

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

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.

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

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

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

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

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

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

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.

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.

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>

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

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

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>

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

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

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

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

Encuestas: ejemplo de trabajo en Servio.

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

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

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

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