Clase 7 Tecnología de la Comunicación II Lics. en Com. Social y Periodismo F AC. DE C S. H UMANAS....

Clase 7

Tecnología de la Comunicación II Lics. en Com. Social y Periodismo

FAC. DE CS. HUMANAS. UNSL.

Sitio Web: construcción en In

Design

Selecciono la opción:

DIAGRAMACIÓN DEL SITIO

Y luego la opción:


La apariencia del documento es la siguiente:


1 2 3

4

5

(1)Barra de menú (2)Opciones de visualización (3) Espacios de trabajo (4) Herramientas (5) Paneles de trabajo (6) Panel de control (7) y (8) Reglas (9) Espacio de trabajo

6

7

8

9

Un ejemplo de periódico



Uso de tablas

Podemos hacer uso de tablas o columnas para organizar la información.

DIAGRAMACIÓN DEL SITIOCon las tablas podemos realizar distintas operaciones:

Y al agregar texto en las celdas de las tablas podemos manipularlos a través de diferentes opciones:

En las celdas de las tablas podemos colocar imágenes, mediante el comando: FilePlace


A las imágenes se les puede:

Aplicar Efectos

DIAGRAMACIÓN DEL SITIOConvertir a objeto interactivo

Editar en algún programa Bloquear,

Ocultar, Ordenar en relación con otras, asociar un enlace, etc.

Para colocar un enlace se utiliza el siguiente comando:


Los enlaces nos pueden redireccionar a una página web, una dirección de correo electrónica, un marcador, etc.

Ejemplos de enlaces


Enlace a una página externa del sitio: http://www.facebook.com

Enlace a una página interna del sitio: https://registracion.lanacion.com.ar

Visualización del sitio en un explorador

Cuando se trabaja con varias imágenes a la vez suele ser conveniente colocar cada una de ellas en una celda de la tabla para que se visualicen correctamente desde un navegador de páginas web…

!!

http://www.facebook.com/

https://registracion.lanacion.com.ar/

La vista desordenada de las imágenes se soluciona dividiendo las celdas en una o más filas o columnas y colocando a cada imagen en una celda


En In Design

En un navegador…

El primer problema que aparece con el enlace es que se abre en la misma ventana donde se muestra nuestro sitio, por lo que deberemos hacer una modificación en HTML para solucionarlo.

Para modificar el código de nuestro archivo en HTML debemos editarlo en el Bloc de Notas


El Bloc de Notas nos permite ver todo el código de programación del archivo que estamos creando


Allí deberíamos buscar el código que corresponde a cada enlace y modificarlo para que se abra en una nueva ventana.


<a href="http://www.facebook.com "> <img class="frame-9" src="index-web-resources/image/lanacionenface_fmt.jpeg" alt="lanacionenface.jpg" /> </a>

La palabra clave para buscar el código es href y el parámetro que debemos agregar en el código de programación es target=“_blank”

ANTES

DESPUÉS<a href=http://www.facebook.com target=“_blank”> <img class="frame-9" src="index-web-resources/image/lanacionenface_fmt.jpeg" alt="lanacionenface.jpg" /> </a>

***Los cambios en el código deben ser hechos una vez que se finalizó la creación de la página en In Design. De lo contrario habrá que modificar el código por cada cambio que hagamos.



Con los enlaces es posible vincular los titulares a las páginas donde se encuentra la noticia completa. Para esto debemos disponer de la página principal de titulares y de las páginas de cada noticia en particular.


Titular de la Página Principal

Página donde se encuentra la noticia completa en los formatos .indd y html


En In Design

En un navegador de páginas web

La ppágina web se genera desde la página de In Design mediante la opción: “FileExport y seleccionando en tipo: html”


Una vez creada la página que contiene la nota completa en formato html procedemos a realizar el enlace del titular a esa página (que en este caso se trata de un enlace a un archivo)


Lq paleta de colores que se utiliza es la RGB: (red, green, black). Con la combinación de estos colores se producen el resto de los colores para la Web. Las ventanas más utilizadas son: Muestras, Color y Opciones de Muestra.


Al navegar y al hacer clic sobre el titular el efecto es el siguiente:


Otro tipo de enlace que podemos crear es a la fuente que escribió las noticias. A ella le podemos redireccionar una dirección de correo electrónico, por ej.


El efecto es el siguiente:


Trabajando con columnas:


Las columnas se seleccionan al momento de crear un nuevo documento o desde el menú Layout


Las imágenes y textos se pueden colocar directamente o bien haciendo uso de las cajas de texto:


En todo caso y en cualquier momento se puede recurrir a las tablas si la información no queda organizada como queremos.

Las notas principales de una revista como así también de un periódico se pueden componer de audios, videos, animaciones, etc. Las opciones de inserción son accesibles desde el menú:


Algunos de los formatos aceptados son flv, mp3 y swf

Al insertar archivos multimediales estos se visualizan de diferentes formas.En In Design


Audio

Video


La visualización de los elementos multimedia insertados de esta forma puede requerir su modificación en formato html, por lo que nos conviene alojar estos archivos en sitios web como Youtube, Goear y otros e insertarlos mediante la opción:

El comando anterior nos sirve para agregar cualquier tipo de elemento dinámico e interactivo en nuestro blog.


Clase 7 Tecnología de la Comunicación II Lics. en Com. Social y Periodismo F AC. DE C S. H UMANAS....

Documents

Transcript of Clase 7 Tecnología de la Comunicación II Lics. en Com. Social y Periodismo F AC. DE C S. H UMANAS....