clase 7 tecnología de la comunicación ii lics. en com. social y periodismo f ac. de c s. h umanas....
TRANSCRIPT
![Page 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/2.jpg)
Selecciono la opción:
DIAGRAMACIÓN DEL SITIO
![Page 3: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/3.jpg)
Y luego la opción:
DIAGRAMACIÓN DEL SITIO
![Page 4: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/4.jpg)
La apariencia del documento es la siguiente:
DIAGRAMACIÓN DEL SITIO
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
![Page 5: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/5.jpg)
Un ejemplo de periódico
DIAGRAMACIÓN DEL SITIO
![Page 6: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/6.jpg)
DIAGRAMACIÓN DEL SITIO
Uso de tablas
Podemos hacer uso de tablas o columnas para organizar la información.
![Page 7: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/7.jpg)
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:
![Page 8: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/8.jpg)
En las celdas de las tablas podemos colocar imágenes, mediante el comando: FilePlace
DIAGRAMACIÓN DEL SITIO
![Page 9: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/9.jpg)
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.
![Page 10: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/10.jpg)
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.
![Page 11: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/11.jpg)
Ejemplos de enlaces
DIAGRAMACIÓN DEL SITIO
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…
!!
![Page 12: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/12.jpg)
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.
![Page 13: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/13.jpg)
Para modificar el código de nuestro archivo en HTML debemos editarlo en el Bloc de Notas
DIAGRAMACIÓN DEL SITIO
![Page 14: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/14.jpg)
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.
![Page 15: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/15.jpg)
DIAGRAMACIÓN DEL SITIO
<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.
![Page 16: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/17.jpg)
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
![Page 18: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/18.jpg)
La ppágina web se genera desde la página de In Design mediante la opción: “FileExport y seleccionando en tipo: html”
DIAGRAMACIÓN DEL SITIO
![Page 19: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/19.jpg)
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
![Page 20: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/21.jpg)
Al navegar y al hacer clic sobre el titular el efecto es el siguiente:
DIAGRAMACIÓN DEL SITIO
![Page 22: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/23.jpg)
El efecto es el siguiente:
DIAGRAMACIÓN DEL SITIO
![Page 24: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/24.jpg)
Trabajando con columnas:
DIAGRAMACIÓN DEL SITIO
![Page 25: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/25.jpg)
Las columnas se seleccionan al momento de crear un nuevo documento o desde el menú Layout
DIAGRAMACIÓN DEL SITIO
![Page 26: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/26.jpg)
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.
![Page 27: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/27.jpg)
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
![Page 28: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/28.jpg)
Al insertar archivos multimediales estos se visualizan de diferentes formas.En In Design
DIAGRAMACIÓN DEL SITIO
Audio
Video
![Page 29: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/29.jpg)
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:
![Page 30: 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](https://reader035.vdocuments.pub/reader035/viewer/2022062808/5665b4ae1a28abb57c932d6a/html5/thumbnails/30.jpg)
El comando anterior nos sirve para agregar cualquier tipo de elemento dinámico e interactivo en nuestro blog.
DIAGRAMACIÓN DEL SITIO