Clase 7 Tecnología de la Comunicación II Lics. en Com. Social y Periodismo F AC. DE C S. H UMANAS. UNSL. Sitio Web: construcción en In Design.

Presentación del tema: "Clase 7 Tecnología de la Comunicación II Lics. en Com. Social y Periodismo F AC. DE C S. H UMANAS. UNSL. Sitio Web: construcción en In Design."— Transcripción de la presentación:

1 Clase 7 Tecnología de la Comunicación II Lics. en Com. Social y Periodismo F AC. DE C S. H UMANAS. UNSL. Sitio Web: construcción en In Design

2 Selecciono la opción: DIAGRAMACIÓN DEL SITIO

3 Y luego la opción: DIAGRAMACIÓN DEL SITIO

4 La apariencia del documento es la siguiente: DIAGRAMACIÓN DEL SITIO 123 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

5 Un ejemplo de periódico DIAGRAMACIÓN DEL SITIO

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

7 DIAGRAMACIÓN DEL SITIO Con las tablas podemos realizar distintas operaciones: Y al agregar texto en las celdas de las tablas podemos manipularlos a través de diferentes opciones:

8 En las celdas de las tablas podemos colocar imágenes, mediante el comando: File  Place DIAGRAMACIÓN DEL SITIO

9 A las imágenes se les puede: Aplicar Efectos DIAGRAMACIÓN DEL SITIO Convertir a objeto interactivo Editar en algún programa Bloquear, Ocultar, Ordenar en relación con otras, asociar un enlace, etc.

10 Para colocar un enlace se utiliza el siguiente comando: DIAGRAMACIÓN DEL SITIO Los enlaces nos pueden redireccionar a una página web, una dirección de correo electrónica, un marcador, etc.

11 Ejemplos de enlaces DIAGRAMACIÓN DEL SITIO Enlace a una página externa del sitio: http://www.facebook.com http://www.facebook.com Enlace a una página interna del sitio: https://registracion.lanacion.com.ar 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… !!

12 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 DIAGRAMACIÓN DEL SITIO 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.

13 Para modificar el código de nuestro archivo en HTML debemos editarlo en el Bloc de Notas DIAGRAMACIÓN DEL SITIO

14 El Bloc de Notas nos permite ver todo el código de programación del archivo que estamos creando DIAGRAMACIÓN DEL SITIO Allí deberíamos buscar el código que corresponde a cada enlace y modificarlo para que se abra en una nueva ventana.

15 DIAGRAMACIÓN DEL SITIO http://www.facebook.com 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 http://www.facebook.com ***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.

16 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. DIAGRAMACIÓN DEL SITIO Titular de la Página Principal

17 Página donde se encuentra la noticia completa en los formatos.indd y html DIAGRAMACIÓN DEL SITIO En In Design En un navegador de páginas web

18 La ppágina web se genera desde la página de In Design mediante la opción: “File  Export y seleccionando en tipo: html” DIAGRAMACIÓN DEL SITIO

19 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) DIAGRAMACIÓN DEL SITIO

20 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. DIAGRAMACIÓN DEL SITIO

21 Al navegar y al hacer clic sobre el titular el efecto es el siguiente: DIAGRAMACIÓN DEL SITIO

22 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. DIAGRAMACIÓN DEL SITIO

23 El efecto es el siguiente: DIAGRAMACIÓN DEL SITIO

24 Trabajando con columnas: DIAGRAMACIÓN DEL SITIO

25 Las columnas se seleccionan al momento de crear un nuevo documento o desde el menú Layout DIAGRAMACIÓN DEL SITIO

26 Las imágenes y textos se pueden colocar directamente o bien haciendo uso de las cajas de texto: DIAGRAMACIÓN DEL SITIO En todo caso y en cualquier momento se puede recurrir a las tablas si la información no queda organizada como queremos.

27 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ú: DIAGRAMACIÓN DEL SITIO Algunos de los formatos aceptados son flv, mp3 y swf

28 Al insertar archivos multimediales estos se visualizan de diferentes formas. En In Design DIAGRAMACIÓN DEL SITIO Audio Video

29 DIAGRAMACIÓN DEL SITIO 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:

30 El comando anterior nos sirve para agregar cualquier tipo de elemento dinámico e interactivo en nuestro blog. DIAGRAMACIÓN DEL SITIO