GUÍA DE DISEÑO DE APLICACIONES DE PROGRAMAS …cb06tic.wikispaces.com/file/view/DAPI_II.pdf ·...

1

GUÍA DE DISEÑO DE APLICACIONES DE PROGRAMAS INTEGRADOS II Examen de Recuperación En el presente trabajo encontrarás la base teórica-practica para resolver los ejercicios que se te solicitan. La teoría es un compendio de la página www.aulaclic.es, por lo que si consideras necesario ingresa a ella para ahondar en los temas. Los ejercicios que haz de resolver se encuentran las páginas 17 a la 21 y de las 36-38 que tendrás que contestar al reverso de éste cuadernillo. Lic. María Cristina Martínez Ramos 18/01/2010

Edición y Elaboración: Profra. María Cristina Martínez Ramos

2

INTENCIÓN DE LA ASIGNATURA

Que es estudiante diseñe presentaciones gráficas y páginas Web y

las instale en un servidor, mediante la utilización de un programa

gráfico de presentaciones y del lenguaje HTML; lo que le permitirá

expresar ideas en forma gráfica, así como el intercambio de

información con diversos usuarios en intranet e Internet.

INDICE TEMÁTICO

Unidad I. Programas de presentación gráfica

Características.

Tipos de presentación.

Diseño de presentaciones básicas.

Diseño de presentaciones intermedias.

Salidas de las diapositivas.

Unidad II. Multimedia e hipervínculos

2.1 Animación.

2.2 Audio.

2.3 Video.

2.4 Importación de objetos.

2.5Hipervínculos.

Unidad III. Elaboración de páginas Web

3.1 Características del lenguaje HTML.

3.2 Tags más relevantes

3.3 Imágenes, sonido y video

3.4 Tablas y marcos

3.5 Hipervínculos y anclas

Unidad IV. Montado de páginas Web

4.1 Servidor Web.

4.2 Intranet.

4.3 Programa FTP.


3

UNIDAD I

PROGRAMAS DE PRESENTACIÓN GRÁFICA

Un programa de presentación es un paquete de software usado para mostrar información,

normalmente mediante una serie de diapositivas. Típicamente incluye tres funciones principales:

un editor que permite insertar un texto y darle formato, un método para insertar y manipular

imágenes y gráficos y un sistema para mostrar el contenido en forma continua. Hay muchos tipos

de presentaciones, para educación, o para comunicar noticias en general. Los programas de

presentación pueden servir de ayuda o reemplazar a las formas tradicionales de dar una

presentación, como por ejemplo panfletos, resúmenes en papel, pizarras, diapositivas o

transparencias. Un programa de presentación permite colocar texto, gráficos, películas y otros

objetos en páginas individuales o "diapositivas". El término "diapositiva" es una referencia al

proyector de diapositivas, un dispositivo que se ha quedado obsoleto para estos fines desde la

aparición de los programas de presentación. Las diapositivas se pueden imprimir en transparencias

y ser mostradas mediante un proyector de transparencias, o ser visualizadas directamente en la

pantalla del ordenador (o en una pantalla normal usando un proyector de vídeo) bajo el control de

la persona que da la presentación. La transición de una diapositiva a otra puede ser animada de

varias formas, y también se puede animar la aparición de los elementos individuales en cada

diapositiva.

Diez consejos para convencer a la audiencia

1. Se debe distinguir claramente el objetivo y la intención del mensaje que se va a dar: información, persuasión o ambas.

2. Distribuye el contenido de la presentación en tres partes bien diferenciadas: introducción, cuerpo y conclusión.

3. Limita el número de temas clave a siete o a menos por cada presentación. Una buena presentación exige organización, brevedad y un uso cuidado de la lengua.

4. Utiliza un lenguaje adecuado con el público y emplea sustantivos y verbos que doten de fuerza y dinamismo al texto. Evita la voz pasiva.

5. Expresa una idea en cada elemento utilizando frases cortas en lugar de oraciones compuestas.

6. Es recomendable ser creativo y sustituir palabras por ilustraciones. Una ilustración despierta el interés y transmite la información con mayor rapidez.

7. Utiliza gráficos, tablas y diagramas para que los datos puedan ser contrastados fácilmente.

8. En el momento de la presentación hay que dar la imagen de estar relajado y seguro, aunque se esté como un flan. Deberemos vocalizar con claridad y evitar hablar de forma entrecortada.


4

9. Es muy bueno tener un vaso de agua a mano para utilizarlo en caso de que se nos seque la boca, o simplemente para cuando necesitemos una excusa para pensar en la siguiente idea.

10. Nunca hay que admitir que se está nervioso y disculparse por ello. Si se nos olvida algo, lo mejor es seguir adelante y mencionarlo cuando lo recordemos.

http://www.quadernsdigitals.net/datos_web/hemeroteca/r_1/nr_5/a_42/42.html

PRESENTACIONES BÁSICAS

PowerPoint es la herramienta que nos ofrece Microsoft Office para crear presentaciones. Las presentaciones son imprescindibles hoy en día ya que permiten comunicar información e ideas de forma visual y atractiva.

Se pueden utilizar presentaciones en la enseñanza como apoyo al profesor para desarrollar un determinado tema, para exponer resultados de una investigación, en la empresa para preparar reuniones, para presentar los resultados de un trabajo o los resultados de la empresa, para presentar un nuevo producto, etc. En definitiva siempre que se quiera exponer información de forma visual y agradable para captar la atención del interlocutor.

Con PowerPoint podemos crear presentaciones de forma fácil y rápida pero con gran calidad ya que incorpora gran cantidad de herramientas que nos permiten personalizar hasta el último detalle, por ejemplo podemos controlar el estilo de los textos y de los parrafos, podemos insertar gráficos, dibujos, imágenes, e incluso texto WordArt.

Podemos también insertar efectos animados, películas y sonidos. Podemos revisar la ortografía de los textos e incluso insertar notas para que el locutor pueda tener unas pequeñas aclaraciones para su exposición y muchas más cosas que veremos a lo largo del curso.

Para empezar veremos la forma de arrancar el programa y cuáles son los elementos básicos de PowerPoint, la pantalla, las barras, etc, para familiarizarnos con el entorno.

Aprenderás cómo se llaman, donde están y para qué sirven. Cuando conozcas todo esto estarás en disposición de empezar a crear presentaciones en el siguiente tema.

Pantalla Inicial

Al iniciar PowerPoint aparece una pantalla inicial como la que a continuación te mostramos. Ahora conoceremos los nombres de los diferentes elementos de esta pantalla y así será más fácil entender el resto del curso. La pantalla que se muestra a continuación puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.


5

La parte central de la ventana es donde visualizamos y creamos las diapositivas que formarán la presentación. Una diapositiva no es más que una de las muchas pantallas que forman parte de una presentación, es como una página de un libro.

NOMBRE DEL APARTADO

DESCRIPCIÓN

1. La barra de título

Contiene el nombre del documento sobre el que se está trabajando en ese momento. Cuando creamos una Presentación se le asigna el nombre provisional Presentación1, hasta que lo guardemos y le demos el nombre que queramos. En el extremo de la derecha están los botones para minimizar, restaurar/maximizar y cerrar la ventana.

2. La barra de

menús

Contiene todas las operaciones que nos permite realizar PowerPoint con nuestras presentaciones, estas operaciones suelen ir agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en PowerPoint.

Todas las operaciones se pueden realizar desde estos menús, pero las cosas más habituales se realizan más rápidamente a partir de los iconos de las otras barras que veremos después, para ayudarnos a recordar estos

1 2

3

4

6

7

8


6

iconos, en el menú desplegable aparece en el lateral izquierdo el icono correspondiente a la opción

3. Las barras de herramientas

Contienen iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Guardar, Copiar, Pegar, Imprimir,etc.

Las iremos detallando a lo largo del curso.

4. La barra de estado

Muestra el estado de la presentación, en este caso el número de la diapositiva en la cual nos encontramos y el número total de diapositivas, el tipo de diseño y el idioma.

5. Las barras de desplazamiento

Permiten movernos a lo largo y ancho de la pantalla de forma rápida y sencilla, simplemente hay que desplazar la barra arrastrándola con el ratón, o hacer clic en los triángulos. Tenemos una barra horizontal (la que te enseña

6.El área de esquema

Muestra los títulos de las diapositivas que vamos creando con su número e incluso puede mostrar las diapositivas en miniatura si seleccionamos la

pestaña .

Al seleccionar una diapositiva en el área de esquema aparecerá inmediatamente la diapositiva en el área de trabajo para poder modificarla.

7. Los Botones de vistas,

Con ellos podemos elegir el tipo de Vista en la cual queremos encontrarnos según nos convenga, por ejemplo podemos tener una vista general de todas las diapositivas que tenemos, también podemos ejecutar la presentación para ver cómo queda, etc. El icono que queda resaltado nos indica la vista en la que nos encontramos.

8. El Panel de Tareas

Muestra las tareas más utilizadas en PowerPoint y las clasifica en secciones. El contenido del panel de tareas va cambiando según lo que estemos haciendo

Tipos de Vistas

Vista Normal

El saber manejar los tipos de vistas es muy importante ya que nos va a permitir tener tanto una visión particular de cada diapositiva como una visión global de todas las diapositivas, incluso nos permitirá reproducir la presentación para ver cómo queda al final.

La vista normal es la que se utiliza para trabajar habitualmente, con ella podemos ver, diseñar y modificar la diapositiva que seleccionamos.

Para ver la diapositiva en esta vista despliega el menú Ver y selecciona la opción normal.


7

También puedes pulsar en el botón que aparece debajo del área de esquema en la parte izquierda.

En la parte izquierda de la pantalla aparece el área de esquema en el cual podemos seleccionar la diapositiva que queremos visualizar y en la parte derecha aparece la diapositiva en grande para poder modificarla. En la parte inferior se encuentra el área de notas en el cual se introducen aclaraciones para el orador sobre la diapositiva.

Esta es la vista que más utilizarás ya que en ella podemos insertar el texto de las diapositivas, cambiarles el color y diseño y es además la que más se aproxima al tamaño real de la diapositiva.

Vista clasificador de diapositivas

Este tipo de vista muestra las diapositivas en miniatura y ordenadas por el orden de aparición, orden que como podrás ver aparece junto con cada diapositiva.

Con este tipo de vista tenemos una visión más global de la presentación, nos permite localizar una diapositiva más rápidamente y es muy útil para mover, copiar o eliminar las diapositivas, para organizar las diapositivas.

Vistas de presentación con diapositivas

La vista Presentación con diapositivas reproduce la presentación a partir de la diapositiva seleccionada, con este tipo de vista podemos apreciar los efectos animados que hayamos

podido insertar en las distintas diapositivas que forman la presentación.

También puedes pulsar en el botón que aparece debajo del área de esquema o pulsar la tecla F5.

Trabajando con PowerPoint

Insertar una diapositiva

Para insertar una nueva diapositiva te aconsejamos que si te encuentras en la vista normal

selecciones la pestaña diapositiva del área de esquema ya que de esta forma es más fácil apreciar cómo se añade la nueva diapositiva a la presentación. Puedes añadir una diapositiva de varias formas:

Pulsa en el botón que se encuentra en la barra de Formato.

Puedes hacerlo también a través de la barra de menús seleccionando el menú Insertar y después seleccionando la opción Nueva diapositiva

O bien puedes hacerlo a través de las teclas Ctrl + M.

Para acabar la inserción de la diapositiva tendrás que


8

seleccionar qué diseño quieres que tenga la nueva diapositiva y para ello tendrás que hacer clic sobre el diseño que quieras del Panel de tareas.

En el panel de tareas tenemos una sección Diseño de diapositiva que nos permite elegir un tipo de diapositiva que incluye ya los objetos preparados para que sólo nos quede completarla con contenido.

Cuando hacemos clic sobre un diseño nuestra diapositiva toma el diseño seleccionado. Es bastante intuitivo ver en qué consiste cada diseño, para verlo detallaremos algunos de los que se ven a la derecha.

una diapositiva con un título y un subtítulo.

una diapositiva con un título un texto.

una diapositiva con un título y un texto a dos columnas.

una diapositiva en blanco.

una diapositiva con un título y cuadro para añadir un objeto.

Para darle mayor presentación visual a tu trabajo añade Estilo de la diapositiva: en ella se muestran opciones para plantillas que controlan el fondo, las fuentes, tamaños de las fuentes, viñetas.


9

O también puedes agregar color de fondo para cada diapositiva o texturas.

Ahora que ya tiene un diseño y un estilo, es hora de agregar objetos. Los objetos son los elementos que podemos incorporar en una diapositiva, por ejemplo un gráfico, una imagen,

textos, vídeos, sonidos, etc.


10

Barra de dibujos:

Se utiliza para dibujar una línea recta

Muy parecido al botón anterior pero la línea acabará en flecha

Es la herramienta del rectángulo, con ella dibujaremos rectángulos, éstos por defecto aparecen con borde y relleno verde, pero podemos cambiarlo.

Parecida a la anterior herramienta, pero sirve para dibujar elipses.

Es quizás, es la herramienta más complicada y a la vez la más útil, siempre que queramos escribir texto en nuestra diapositiva tendremos que insertar estos cuadros de texto

Con la herramienta del WordArt, podemos dibujos títulos muy llamativos

Podremos insertar distintos tipos de diagramas u organigramas. Es fácil manejarlos, ya que una vez insertados se manejan igual que el resto de figuras ya vistas.

Haciendo clic en este botón abrimos rápidamente la galería de imágenes prediseñadas en el panel de tareas.

En este caso, podemos insertar imágenes, pero no prediseñadas, sino desde un archivo, es decir imágenes que tengamos guardadas en cualquier unidad, para ello tendremos que buscar la imagen en el cuadro de diálogo que aparece.

Ingresando textos

En las diapositivas podemos insertar textos y aplicarles casi las mismas operaciones que con un procesador de texto, es decir, podemos modificar el tamaño de la letra, color, forma, podemos organizar los textos en párrafos, podemos aplicarles sangrías, etc.

Es posible que con los textos de esquema que incorporan las plantillas de PowerPoint no sea suficiente por lo que tendrás que insertar nuevos cuadros de texto para añadir más contenido a la diapositiva.

Para añadir un nuevo cuadro de texto puedes elegir entre:

- Hacer clic en el botón Cuadro de texto de la barra

de dibujo,

- o desde la barra de menús desplegando el menú Insertar y seleccionando la opción Cuadro de texto.

Ingresando tablas

En una diapositiva además de insertar texto, gráficos, etc también podemos insertar tablas que nos permitirán organizar mejor la información.

Para insertar una tabla en una diapositiva sigue estos pasos:

Despliega el menú Insertar y selecciona la opción Tabla o utiliza el botón de la barra de herramientas.


11

Si lo haces a través del menú Insertar te aparecerá una ventana en la que podrás indicar el número de columnas y filas.

Insertando gráficos

Los gráficos se utilizan muy a menudo en las presentaciones por su facilidad de esquematizar gran cantidad de información.

Para insertar un gráfico en una diapositiva unicamente tienes que pulsar en el botón de la barra estándar.

PowerPoint insertará un gráfico en la diapositiva y te mostrará la hoja de datos que

contiene las cantidades que se representan en el gráfico.

En la hoja de datos la primera columna que aparece es la que representa la leyenda, la primera fila (1er trim.,2do trim....) representa el eje X (horizontal) y las cantidades serán representadas en el eje Y.

Este dibujo es la representación de la hoja de datos que te hemos mostrado anteriormente.

Una vez insertado el gráfico es muy fácil de modificar los datos de la hoja de datos, únicamente sitúate sobre la celda que quieras modificar e inserta el nuevo valor que inmediatamente verás representado en la gráfica.


12

Una vez determinado el tamaño de la tabla pulsa Aceptar y aparecerá una tabla en la diapositiva junto con una nueva barra de herramientas que te permitirá personalizar la tabla.

UNIDAD II

Insertar películas y sonidos

Otro elemento muy útil a la hora de diseñar presentaciones son elementos multimedia como sonido y películas.

Para insertar un sonido en una presentación despliega el menú Insertar y elige Películas y sonidos.

Después aparecerá una lista en la que podrás elegir un sonido de la galería de sonidos

que incorpora PowerPoint.

Podrás también insertar un sonido o películas que ya tengas almacenado en tu ordenador (con la opción Sonido de archivo), o grabar tú mismo el sonido e incluso insertar como sonido una pista de un Cd de audio.

Botones de acción Los botones de acción son figuras que podemos insertar desde el menú Presentación. Funcionan como cualquier otra figura de la barra de dibujo, con la diferencia de que tienen configurada una acción por defecto. Por ejemplo, podemos insertar un botón para ir a la última diapositiva, a la primera…


13

En el momento en que insertemos uno de estos botones, saltará un cuadro de diálogo “Configuración de la acción” para que aceptemos o cambiemos la acción de ese botón. Si quisiéramos elegir otra acción, tendríamos que desplegar la lista Hipervínculo a para elegirla. Hay que tener en cuenta, que estas acciones pueden aplicarse a todos los objetos, sin embargo en el caso de los botones, la acción ya está predeterminada. Si deseamos aplicar una acción a otra figura, tras seleccionarla, iremos al menú Presentación y elegiremos la opción Configuración de la acción. Aparece el cuadro de diálogo anterior.

Crear Presentaciones rápidamente

PowerPoint nos permite crear una presentación de formas distintas, bien a través del asistente que es muy útil cuando nuestros conocimientos sobre PowerPoint son escasos porque nos guiará en todo el proceso de creación de la presentación, también podemos crearlas a través de algunas de las plantillas que incorpora el propio PowerPoint o plantillas nuestras. También se puede crear la presentación desde cero, es decir, crearla a partir de una presentación en blanco.

PowerPoint tiene muchas presentaciones estándares que se pueden utilizar para ahorrar tiempo. Estas presentaciones estándares están agrupadas en varios temas. Con los botones que aparecen en la parte central de la ventana seleccionamos el tema, a continuación aparecen en la parte derecha de la ventana las presentaciones asociadas al tema seleccionado. Por ejemplo hemos seleccionado el tema Organización y la presentación Reunión de la organización. Con esto PowerPoint me va a crear una presentación para una reunión con un esquema y unas diapositivas predefinidas, nosotros sólo tendremos que retocar la presentación para adaptarla a nuestras necesidades.


14

Animaciones

En las presentaciones podemos dar movimiento a los objetos que forman parte de ellas e incluso al texto haciéndolas así más profesionales o más divertidas, además de conseguir llamar la atención de las personas que la están viendo.

Para animar un texto u objeto lo primero que hay que hacer es seleccionarlo, a continuación desplegar el menú Presentación y seleccionar personalizar animación.


15

Después aparecerá en el Panel de tareas algo similar a lo que te mostramos a continuación.

En este panel aparece la lista desplegable Agregar efecto en la cual seleccionaremos el tipo de efecto que queramos aplicar, incluso podremos elegir la trayectoria exacta del movimiento seleccionándola del menú Trayectorias de desplazamiento.

Podemos utilizar el botón Quitar para eliminar alguna

animación que hayamos aplicado a algún texto.

En la lista desplegable Inicio podemos seleccionar cuándo queremos que se aplique la animación (al hacer clic sobre el ratón, después de la anterior diapositiva, etc).

Las demás listas desplegables cambiarán en función del tipo de movimiento y el inicio del mismo.

La velocidad suele ser una característica común por lo que podemos controlarla en casi todas las animaciones que apliquemos a un objeto.

La lista que aparece debajo de velocidad nos muestra las distintas animaciones que hemos aplicado a los objetos de la diapositiva, como podrás comprobar aparecen en orden.

El botón Reproducir te muestra la diapositiva tal y como quedará con las animaciones que hemos aplicado.

Transición

La transición de diapositiva nos permite determinar cómo va a producirse el paso de una diapositiva a la siguiente para producir efectos visuales más estéticos.

Para aplicar la transición a una diapositiva despliega el menú Presentación y selecciona la opción Transición de diapositiva.


16

En el panel de tareas aparece algo similar a esto:

La primera lista que aparece Aplicar a las diapositivas seleccionadas: te permite seleccionar el movimiento de transición entre una diapositiva y la siguiente. Hay una lista muy larga de movimientos.

En la lista Velocidad: podemos indicarle la velocidad de la transición entre una y otra diapositiva.

Incluso podemos insertar algún sonido de la lista Sonido:.

En la sección Diapositiva avanzada podemos indicarle que si para pasar de una diapositiva a la siguiente hay de hacer clic con el ratón o bien le indicas un tiempo de transición (1

minuto, 00:50 segundos, etc..)

Si quieres aplicar estas características a todas las diapositivas pulsa en el botón Aplicar a todas las diapositivas.

El botón Reproducir te muestra el resultado.

Intervalos de tiempos

Ensayar intervalos te permite calcular el tiempo que necesitas para ver cada diapositiva sin prisas.

Para calcular el tiempo que necesitas tienes que desplegar el menú Presentación y elegir la opción Ensayar Intervalos, después verás que la presentación empieza a reproducirse pero con una diferencia, en la parte superior izquierda aparece una especie de contador que cronometra el tiempo que tardas en pasar de una diapositiva a otra pulsando algún botón del ratón.

En el recuadro blanco te mostrará el tiempo para la diapositiva actual y el recuadro del tiempo que aparece en la parte derecha muestra la suma total de intervalos, es decir, el tiempo que transcurrido desde la primera diapositiva.

La flecha sirve para pasar a la siguiente diapositiva, el botón para pausar el ensayo de

intervalos y para repetir la diapositiva (para poner a cero el cronómetro de la diapositiva.

Una vez terminas el ensayo PowerPoint te pregunta si quieres conservar esos intervalos para aplicarlos a cada diapositiva de la presentación. Si contestas que sí verás que aparece una


17

pantalla en la que te muestra en miniatura las diapositivas y debajo de cada una aparece el tiempo utilizado para ver cada una de ellas.

EJERCICIOS DE EVALUACIÓN DE POWER POINT

APARTADO I. 19%

INSTRUCCIONES: Subraya la respuesta correcta para dar solución a la oración

1. El Asistente para autocontenido crea _____.

a. una nueva presentación en blanco, con fuentes y un fondo atractivo

b. una nueva presentación con diapositivas de muestra y sugerencias sobre qué información debería ser incluida

c. una nueva apariencia para una presentación existente

d. una nueva plantilla para futuro uso

2. Usando las mismas fuentes y estilos de viñetas en todas sus textos en las diapositivas usted puede _____.

a. fijarlas en el Patrón de las Diapositivas

b. fijarlas en el Patrón de Títulos

c. fijarlas en el Asistente para autocontenido

d. seleccionar todas las miniaturas de diapositivas y usar la barra de herramientas Formato, para fijar las fuentes y las viñetas.

3. El primer objetivo de su diseño de diapositivas debería ser _____.

a. atraer la vista de su audiencia

b. coordinar con el logotipo de su compañía y el esquema de color

c. hacer que la información sea fácil de leer

d. hacer las diapositivas interesantes y hasta excitantes

4. El efecto en que parece como que la nueva diapositiva está empujando a la anterior fuera de la pantalla, es un ejemplo de una _____.

a. transición de diapositivas

b. animación de diapositivas

c. personalizar animación

d. ninguna de las anteriores

5. Para hacer que corra una presentación por si misma, de modo completamente automático usted haría que _____.

a. fijar que las animaciones de diapositivas comiencen, Con Anterior.

b. fijar todas las transiciones de diapositivas para que se ejecuten después de cierta cantidad de

c. fijar las transiciones para que avancen automáticamente después de cierto tiempo, que puede ser

d. fijar las transiciones para que avancen automáticamente después de cierto


18

segundos

distinto para cada diapositiva.

tiempo Y fijar todas las animaciones de diapositivas para que se ejecuten, Con Anterior.

6. Para guardar una presentación como plantilla debe guardarla con el tipo de archivo _____.

a. Presentation (*.ppt) b. Presentación con diapositivas de PowerPoint (*.pps)

c. Plantilla de diseño (*.ptt)

d. Plantilla de presentación (*.pot)

7. La ubicación por defecto de PowerPoint para una plantilla personalizada, que permite que se vea en la lista de plantillas disponibles, es _____.

a. la misma carpeta de plantillas que viene con PowerPoint

b. la carpeta dentro de la cual usted instaló a PowerPoint

c. C:\Documents and Settings\[nombre del usuario]\Aplicación Datos\Microsoft\Plantillas

d. diferente, dependiendo de que versión de PowerPoint o de Office sea, de qué sistema operativo usa y si ha establecido identidades

8. Una vez que ha modificado un esquema de color, usted _____guardarlo para usarlo más adelante en una presentación diferente

a. puede b. no puede

9. Cuando Autovista previa está habilitada para la Animación Personalizada y usted modifica una animación, el Panel de Diapositivas ejecutará _____ .

a. solamente la animación cambiada

b. solamente la transición de diapositiva existente

c. cualquier transición y animaciones que hayan sido aplicadas a la diapositiva

10. Para modificar un efecto de animación, puede usar _____.

a. el panel de tareas de Animación Personalizada

b. el diálogo Efecto Opciones c. la barra de herramientas Formato


19

INSTRUCCIONES: Relaciona las columnas anotando en el paréntesis la letra que

corresponda a la oración

( ) Muestra el nombre del programa y el nombre de la presentación actual.

( ) Barra que contiene los menús con todas las acciones que podemos aplicar a una presentación.

( ) Se utiliza para poner aclaraciones que le pueden servir al orador de apoyo y no se muestran en la presentación sino únicamente cuando se imprimen las diapositivas.

( ) Para desplegar un menú con el teclado podemos pulsar Ctrl + la letra subrayada del menú.

( ) Aparece en la zona izquierda de la pantalla.

( ) Barra que contiene iconos acerca de los comandos inmediatos se pueden ejecutar y se caracterizan por ser los más empleados.

( ) Aparecen sólo cuando la dispositiva no cabe toda la pantalla.

( ) En un menú desplegable tenemos a la izquierda de la opción el icono correspondiente, cuando este existe.

( ) Es una herramienta que incorpora Windows XP para generar diapositivas.

( ) Se puede cerrar PowerPoint con el botón

que se encuentra en la barra de menús.

d. Panel de tareas

j. Tecla de función directa

m. Barra de menús

ñ. Barra de desplazamiento.

l. PowerPoint

s. Barra de título

p. Areá de esquema

f. Barra de herramientas

g. Notas del Orador


20

APARTADO II. 25%

INSTRUCCIONES: A partir de las siguientes pantallas menciona si corresponde a animación

o transición, explica y escribe cada una de las partes de cada una de ellas.

Pantalla 1 Pantalla 2

INSTRUCCIONES: Describa lo que se te pide a continuación

a) Diferencia entre una transición y una animación ___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

b) Diferencia entre un hipervínculo y un botón de acción ____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

c) Diferencia entre un estilo y un diseño de diapositiva _______________________________________________________________________________

_______________________________________________________________________________

_______________________________________________________________________________

_______________________________________________________________________________


21

INSTRUCCIONES: Emplea PowerPoint para que realices una animación de una autopista,

aplica efectos de animación, transición e intervalos de tiempo, agrega sonidos para hacer

más realista tu animación.


22

UNIDAD III

HTML

HTML, HyperText Markup Language, es un lenguaje simple utilizado para crear documentos de hipertexto para WWW. El HTML es un lenguaje de “marcadores” o tags, que se insertan en un documento de texto. Los tags son indicaciones que silenciosamente le dicen al navegador qué hacer. El navegador lee las instrucciones y despliega o ejecuta lo que se le indica. Al conjunto de instrucciones que definen una página Web se le llama código fuente Los tags son por lo general palabras en inglés (por ejemplo body), o abreviaturas (por ejemplo p que significa párrafo). Se distinguen del resto del texto porque están encerrados entre los símbolos “<” y “>”. La primera regla de HTML es muy simple: Los tags siempre van en parejas. Por ejemplo, si utilizo el tag <h1> para comenzar un encabezado, debo utilizar el tag </h1> para terminarlo. Habrás notado que se utiliza una diagonal/ en el segundo tag. La diagonal distingue al tag que cierra (con diagonal), del tag que abre (sin diagonal). Ejemplo: <b> Este texto se mostrará en negrita </b> El tag inicial <b> activa la orden de colocar el texto en negritas y el tag final </b> la desactiva. Como en toda regla, hay algunas excepciones: no todos las tags requieren la marca de cierre y se denominan marcas abiertas. Ejemplo: Para indicar un salto de línea en un texto, la etiqueta es la siguiente: Con este tag se insertará un salto <br> entre el texto pasado y éste.

Estructura general de una página Y te preguntarás y ¿dónde se codifica éste lenguaje?, se puede realizar en programas específicos tales como Dreamweaver o en un simple editor de texto como el Bloc de notas, y para que sea

reconocido como una página Web es necesario guardar el archivo con la extensión .html


23

La estructura general de un código html es la siguiente:

Todas las páginas HTML comienzan con el tag <html> y terminan con el tag </html>. Esta sección limita el documento e indica que todo lo que está dentro de los marcadores se encuentra escrito en este lenguaje. En medio de estos dos tags globales hay dos secciones generales: la cabeza <head> y el cuerpo <body> del documento. En la cabeza (que está limitada por los tags <head> y </head>) se pone información que no aparece directamente en el interior de la página, como el título de la ventana (delimitado por los tags <title> y </title>). Sólo puede haber un título por documento, corto y significativo. En el cuerpo del documento (limitado por lo tags <body> y </body>) se encierra todo lo que aparecerá en la página, es decir, todo el contenido.


24

Otra de las características del hmtl, es que cada uno de sus tags tienen propiedades o atributos que pueden ser compartidas con otras etiquetas, y estas definen las características propias de cada una de ellas. <BODY>

Esta es la que define los atributos de la página. En estos se incluye: el color del fondo, la imagen de fondo (si hay alguna), el color del texto, el color de los enlaces, el color de los enlaces visitados y los enlaces activos, dentro de esta etiqueta esta la mayoría del contenido de tu página web. ATRIBUTOS: BGCOLOR: Color de fondo de la página. BACKGROUND: Imagen de fondo. TEXT: Color del texto. LINK: Color de los enlaces. VLINK: Color de los enlaces visitados. ALINK: Color de los enlaces activos. Ejemplo: <body bgcolor="red" background="imagen.jpg" text="white" link="green" vlink"green" alink="blue"> Este código indica que el fondo de la página estará en rojo, que tendrá de fondo una imagen jpg, el color de texto será blanco, el color de los enlaces se encontrará en color verde y cuando ya se hayan revisado los enlaces el color será azul y no morado como comúnmente se visualiza en cualquier página. ETIQUETAS COMUNES

<BR> Un salto de linea que indica que la linea debe terminar aqui.

<H1>Este es un encabezado</H1>

Los encabezados pueden ser creados utilizando las etiquetas <H1> a la <H7>.

<P> Esto comienza un nuevo párrafo. </P> Esto termina el párrafo.

<B> El texto entre estas etiquetas será puesto en negritas. </B>

<U> El texto entre estas etiquetas será subrayado </U>

<I> El texto entre estas etiquetas será italizado. </I>


25

LISTA DESORDENADA

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).

Por ejemplo, para insertar la siquiente lista:

o Perro o Gato o Periquito

Habría que escribir:

<ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul>

LISTA ORDENADA

Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas).


i. Perro ii. Gato iii. Periquito


<ol type="i"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ol>


26

ANIDAMIENTO DE LISTAS

Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas.


1. Lunes Ingles Frances

2. Martes 1. Ingles

A. Correccion de ejercicios B. Proponer ejercicios

<ol> <li>Lunes <ul type="square"> <li>Ingles</li> <li>Frances</li> </ul> </li> <li>Martes <ol> <li>Ingles</li> <ol type="A"> <li>Correccion de ejercicios</li> <li>Proponer ejercicios </li> </ol> </li> </ol> </li> </ol>

FONT

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos

insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la

etiqueta:

Atributo Significado Posibles valores

face fuente nombre de la fuente, o fuentes

color color del texto número hexadecimal o texto predefinido

size tamaño del texto valores del 1 al 7, siendo por defecto el 3,

o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor


27

Por ejemplo, para insertar el texto Comic San tamaño en 4 y color en verde:

Bienvenidos


<font color="green" size="4" face="Comic Sans MS, Arial, MS Sanserif">

Bienvenidos

</font>

IMG

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.

Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita

etiqueta de cierre.

El nombre de la imagen ha de especificarse a través del atributo src.

Por ejemplo, para insertar la siguiente imagen:


<img src="imagenes/logo_animales.gif">

Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento).

Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.


28

Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de menor calidad que las imágenes BMP, son más recomendables debido a que ocupan menos memoria. Vamos a ver un poco más sobre estos formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para imágenes con grandes áreas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten definir transparencias y animación.

Formato JPG:

Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse se utilizan más para fotos.

Puedes incluir imágenes en otros formatos, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG.

Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opción, exportar a tipo gif que reduce considerablemente la ocupación de la imagen sin perder en calidad (siempre que la imagen se adecue al formato).

Dependiendo del programa utilizado existirá una mayor o menor cantidad de opciones a la hora de modificar las imágenes. Para realizar modificaciones sencillas, como la de recortar las imágenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.

La etiqueta IMG puede acompañarse de los siguientes atributos:

1. SRC=Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar. 2. ALIGN= Permite controlar la alineación de una imagen con respecto a una línea de texto

adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.

3. ALT= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.

4. WIDTH =Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.

5. HEIGHT=Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.

6. BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.


29

TABLE

Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de

la intersección entre una fila y una columna.

Para crear una tabla hay que insertar las etiquetas <table> y </table>. Entre dichas etiquetas habrá que especificar las filas y columnas que formarán la tabla.

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiqetas <table> y </table>.

Por ejemplo, para crear una tabla con cinco filas escribiríamos:

<table> <tr>...</tr> <tr>...</tr> <tr>...</tr> </table>

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

Entre las etiquetas <td> y </td> se podrá especificar el contenido de cada una de las celdas.

Por ejemplo para generar la siguiente tabla:

<table border="1"> <tr>

<td>Sabado</td> <td>Domingo</td> </tr> <tr> <td>Curso HTML</td>

<td>Curso Dreamweaver</td> </tr> <tr> <td>Curso Frontpage</td>

<td>Curso Flash</td> </tr>

</table>

Sábado Domingo

Curso HTML Curso Dreamweaver

Curso FrontPage Curso Flash


30

Es posible modificar los siguientes atributos de una tabla:


width ancho de la tabla un número, acompañado de % cuando se desee

que sea en porcentaje

height altura de la tabla un número, acompañado de % cuando se desee


cellpadding espacio entre el contenido de las

celdas y el borde un número

cellspacing espacio entre celdas un número

border grosor del borde un número

align alineación de la tabla dentro de la

página

left (izquierda)

right (derecha)

center (centro)

bgcolor color de fondo número hexadecimal

background imagen de fondo número hexadecimal

bordercolor color del borde número hexadecimal

Es posible modificar los siguientes atributos de una celda:


width ancho de la tabla un número, acompañado de % cuando se desee


height altura de la tabla un número, acompañado de % cuando se desee


align alineación horizontal del

contenido de la celda

left (izquierda) right (derecha) center (centro)

valign alineación vertical del contenido

de la celda

baseline (línea de base) bottom (inferior) middle (medio) top (superior)

bgcolor color de fondo número hexadecimal

background imagen de fondo número hexadecimal


También es posible modificar estos atributos de toda una fila, especificándolos en la etiqueta <tr>, en lugar de en la etiqueta <td>.

Hay que tener en cuenta que los atributos tienen más prioridad cuando son establecidos para una celda que cuando son establecidos para una fila completa. Al mismo tiempo, tienen más prioridad los atributos establecidos para una fila que los establecidos para toda la tabla.


31

HIPERENLACES

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de

encontrarse entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la página que

se visualizará cuando el usuario haga clic en el enlace.

Por ejemplo para realizar la siguiente vinculación a la página de Youtube.com, el código sería:

<a href=”http:/www.youtube.com”>

Youtube,com

</a>

Existen diferentes formas de expresar una referencia a una página a través del atributo href.

Referencia absoluta:

Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.

Por ejemplo, "http://www.aulaclic.com" tendrá el mismo efecto que "http://www.aulaclic.com/index.htm"

Referencia relativa al sitio:

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.

Por ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra directamente dentro

de la carpeta raíz del sitio, para insertar el enlace:


<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Observa como aparece el símbolo "/" delante del nombre del documento. Esta barra inclinada indica la carpeta raíz del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo, dentro de una carpeta llamada tema4, y esta estuviera dentro de la carpeta raíz del sitio, habría que

escribir:

<a href="/tema4/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>


32

Punto de fijación o anclas:

Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser "nombre_de_documento#nombre_de_punto".


<a href="t_4_1.htm#tipos">Punto de fijacion Tipos de enlaces</a>

Teniendo en cuenta que el documento se llama t_4_1.htm y el punto de fijación se llama tipos.

Los atributos relacionados a esta son: Href= Dirección del vínculo Name= Establece un ancla Target= establece el destino de un vínculo dentro de un Frameset o Marco BGSOUND

Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.

Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.

El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza

para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.

A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.

Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que

asignarle el valor infinite o -1.

Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:

<bgsound src="varios/audio.mid" loop="-1">

La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible

que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna

modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.


33

VIDEO Y AUDIO

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.

La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la

etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y

</embed> no hay que insertar nada.

A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.

Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos

autostart y loop.

El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la

página, y puede tomar los valores true o false.

El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también

puede tomar los valores true o false.

Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la

consola de control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.

A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles.

Para insertar el vídeo anterior, se podría escribir:

<embed src="varios/cotorra.avi" autostart="false" loop="true">

Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta

<embed>, que funciona del mismo modo para los archivos de audio y de vídeo.

No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.

Si no se desea que se muestren los controles de un archivo de audio, porque va a ser

utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero.

También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor

estrue, se ocultan los controles de reproducción.

Por ejemplo, para insertar sonido de fondo se podría escribir:


34

<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >

O también:

<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >

MARCOS O FRAMESET

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es el que en este caso contiene el grupo de marcos.

El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que vemos solamente algunos conteptos básicos y ejemplos sencillos.

Como hemos visto si queremos utilizar marcos debemos crear una página con la definición del conjunto de marcos (en el ejemplo anterior la página marcos.htm).

Los conjuntos de marcos se definen a través de las etiquetas <frameset> y

</frameset>, que van después de la etiqueta <head>. A través de estas etiquetas se indica el

número de marcos en que se dividirá la ventana, cada uno de los cuales será una especie de subventana.

Cuando se insertan las etiquetas <frameset> y </frameset> no hay que insertar las

etiquetas <body> y </body>, ya que el cuerpo del documento será el cuerpo de las páginas

que se carguen en cada uno de los marcos del conjunto de marcos.


35

Los atributos que pueden especificarse sobre la etiqueta <frameset> son los siguientes:


cols tamaño de cada una de las

columnas en que se divide el documento

un número (acompañado de % cuando se desee que sea en porcentaje) por cada

columna, separados por comas.

rows tamaño de cada una de las

columnas en que se divide el documento

un número (acompañado de % cuando se desee que sea en porcentaje) por cada fila,

separados por comas.

frameborder aparece o no el borde de los

marcos

yes

no

framespacing separación entre los marcos un número

border grosor del borde un número, acompañado de % cuando se

desee que sea en porcentaje


También es posible incluir asteriscos como valores para los atributos cols y rows. Este

valor indica que dicha fila o columna ocupará todo lo que quede de ventana o subventana. Cuando existan varias columnas o filas con este valor, se repartirán de forma equitativa lo que quede de ventana.

Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la

etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las

etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre.

Es posible modificar los siguientes atributos de un marco:


frameborder aparece o no el borde del marco yes o 1

no o 0

name nombre del marco cualquier valor

noresize si aparece, el usuario no podrá redimensionar el

tamaño de este marco no puede tomar valores

marginwidth anchura del margen con respecto a los bordes del

marco

un número, acompañado de % cuando se desee que sea en

porcentaje

marginheight altura del margen con respecto a los bordes del

marco

un número, acompañado de % cuando se desee que sea en

porcentaje

scrolling se mostrará o no la barra de desplazamiento cuando

la página del marco no se pueda visualizar completamente en él

yes

no

auto

src documento que se cargará en el marco ruta y nombre del documento


36

EJERCICIOS DE EVALUACIÓN DE HTML

INSTRUCCIONES: Relaciona ambas columnas colocando en el paréntesis la respuesta

correcta.

1. Etiqueta que permite vincular imagenes ( ) bakcground 2. Etiqueta que permite manipular el color de la página ( ) <p></p> 3. Etiqueta que permite manipular atributos de la letra ( ) img 4. Etiqueta que permite poner viñetas ( ) embed 5. Etiqueta que permite poner números ( ) bgcolor 6. Etiqueta que permite incrustar imágenes ( ) bgsound 7. Etiqueta que permite vincular sonido ( ) font 8. Etiqueta que permite vincular video ( ) &ñtilde 9. Etiqueta que permite poner una imagen a toda la página ( ) ol 10 etiqueta que permite crear tablas ( ) color 11. Etiqueta que permite acentuar 12. Etiqueta que permite poner ñ ( ) face 13. Etiqueta que permite poner letras negritas ( ) a href 14. Instrucción que permite ingresar un párrafo ( ) size 15. Atributo de letra que permite cambiar el color ( ) ul 16. Atributo de letra que permite cambiar la fuente ( ) table 17. Atributo de letra que permite cambiar el tamaño ( ) &letraacute

INSTRUCCIONES: Desarrolla los siguientes códigos HTML para desplegar lo que se pide a

continuación, haz uso de la correcta escritura (identación).

1. Genera la siguiente tabla

Nombre Dirección Mail Foto

Juan Rubalcaba Av de las Conchas 325 Col.Nápoles

[email protected]

Andrea Perales Calle Flores Muertas

1987 Col. Buenavista [email protected]

http://images.google.com.mx/imgres?imgurl=http://instalaches.com/wp-content/uploads/2006/12/rostros11.jpg&imgrefurl=http://www.instalaches.com/category/todos/gimp/page/2/&usg=__eYAr8uqEU4XIV59I0X5XkKa7doU=&h=430&w=347&sz=30&hl=es&start=3&tbnid=rVE6Dm4Plrdu5M:&tbnh=126&tbnw=102&prev=/images?q=rostros&gbv=2&hl=es

http://images.google.com.mx/imgres?imgurl=http://www.atravesdevenezuela.com/imagen/simetrica.jpg&imgrefurl=http://www.mirabolivia.com/foro_total.php?id_foro_ini=12490&usg=__upXuVLQKBE_x9WRfRAmkcG8KPUY=&h=380&w=288&sz=47&hl=es&start=1&tbnid=MxkTQqKTY4TgTM:&tbnh=123&tbnw=93&prev=/images?q=rostros&gbv=2&hl=es


37

Consideraciones:

A. La imagen de Juan se encuentra en una ruta absoluta en:

http://instalaches.com/wp-content/uploads/2006/12/rostros11.jpg

B. La imagen de Andrea se encuentra en una carpeta de fotos relativa al sitio donde esta la

página, el nombre de la imagen se llama rostros345.GIF

C. Los Mail’s deberán estar enlazados directamente a los correos ahí mencionados.

2. Crear el siguiente marco y enlázalo a las siguientes páginas que se encuentran en la misma carpeta.

3. Escribe el código para poner el sonido chismes.wav en un archivo html que se encuentra en mis documentos

Enca.html

Pie.html

Pagina1.html

http://instalaches.com/wp-content/uploads/2006/12/rostros11.jpg


38

4. Genera el código para el siguiente listado compleja:

MATERIAS DE LA CAPACITACIÓN DE INFORMATICA

a. CUARTO

TAPS

LÓGICA b. QUINTO

DAPI I

BASE DE DATOS I

PIAE c. SEXTO

DAPI II

REDES

BASE DE DATOS II

5. Genera el código para crear dos anclas para llegara a los apartados introducción y desarrollo.

6. Genera el código para incrustar el video clock.avi que se encuentra en la siguiente dirección y el archivo html que se creará se encontrara en mis documentos.

Para mayor referencia revisar la página web

www.aulaclic.es


39

GUÍA DE DISEÑO DE APLICACIONES DE PROGRAMAS …cb06tic.wikispaces.com/file/view/DAPI_II.pdf ·...

Documents

Transcript of GUÍA DE DISEÑO DE APLICACIONES DE PROGRAMAS …cb06tic.wikispaces.com/file/view/DAPI_II.pdf ·...