sábado, 19 de febrero de 2011
SOLUCION GUIA 3
Estado OFF | Estado ON |
Imágenes de sustitución en DreamWeaver
La imagen de Sustitución describe un comportamiento interactivo que se activa simplemente al pasar el cursor del mouse encima de la imagen en cuestión, es decir, cuando usted desliza por encima el cursor del mouse sobre la imagen ésta cambiará por otra imagen.
En primer lugar se necesitarán dos imágenes, una que estará en estado OFF o Apagado, la cual actuará cuando el cursor del mouse no esté encima de la imagen, la segunda imagen solo actuará en estado ON o Encendido, esto quiere decir que se hará presente siempre y cuando el cursor del mouse esté encima de la imagen con el comportamiento interactivo.
| |
Después de conseguir las dos imágenes necesarias para aplicar este comportamiento interactivo se necesitará ir al menú principal del programa y elegir la opciónInsertar, inmediatamente seleccione Objetos de Imagen y en el menú emergente elija Imagen de sustitución, tal como muestra la siguiente imagen.
En este instante usted deberá rellenar el cuadro de diálogo Insertar imagen de sustitución. A continuación se describirá brevemente cada campo.
Nombre de la imagen:
Servirá para tener una referencia de la imagen que presenta un comportamiento interactivo.
Imagen original:
Esta imagen será la que actuará en estado OFF
Imagen de sustitución:
Esta imagen será la que actuará en estado ON
Carga previa de imagen de sustitución :
Es importante marcar esta casilla de verificación, ya que permite que se incluya automáticamente en la carga de la página la(s) imagen(es) de sustitución (las del tipo ON), esto evita posibles demoras debido a la descarga de la imagen (del tipo ON) cuando sea oportuno (al pasar el cursor del mouse encima de la imagen de sustitución).
Texto Alternativo:
Este campo se refiere al efecto que se le inserta a las imágenes que permite mostrar un texto después de permanecer el cursor del mouse por pocos segundos encima de la imagen en cuestión. Este campo es opcional.
Al hacer clic, ir a URL:
Este campo se refiere a la inserción de un hipervínculo a la imagen. Este campo es opcional.
2)
VÍNCULOS DE HYPERTEXTO
El hipertexto son vínculos dentro del texto del documento HTML que permiten al usuario navegar con facilidad a través de la black, tanto a nivel interno como externo, es decir , pueden crearse vínculos que lleven hacia una misma parte del documento (interno) o hacia otra parte del mundo Web (externo). También existen otro tipo de vínculos que llevan al surfeador a otra partes como correo, gopher, ftp, entre otras.
Las etiquetas HTML que se encargan de generar los vínculos son y . A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente manera :
Vínculos externos hacia páginas lejanas
Este vínculo envía al lector fuera de la página hacia otro site Web. Generalmente son usados para relacionar al usuario con otros sitios interesantes en el mundo Web.
El URL será entonces la dirección completa de la página a la que se desea crear el vínculo. Ejemplo : http ://www.insomnia-group.com
Vínculos externos hacia páginas cercanas
Generalmente las personas que diseñan sus páginas no encuentran cómodo desplegar toda la información en una sola, sino que crean varias páginas vinculadas entre sí. Por ejemplo, es común ver una página principal (Home Page) con una tabla de contenido a la cual se le han creado vínculos hacia cada uno de sus temas. Estos vínculos son hacia archivos HTML que, generalmente, se encuentran en el mismo directorio de la página principal.
El URL será entonces la ruta completa (incluyendo el nombre del archivo) que lleva al visualizador a cargar el documento que se desea desplegar.
Por ejemplo en mi cuenta he creado una página para que las personas que visiten al Home Page registren su visita. Si el nombre de documento es firmas.html y se encuentra en el mismo directorio de la Home Page, el URL sería firmas.html.
Cuando un página tiene un gran contenido, es posible hacer que el usuario navegue a través de la página. Para ello se debe marcar tanto el inicio como el fin del ancla.
Para marcar el inicio del ancla se utiliza la etiqueta Texto que relaciona al ancla . Nótese que lo que sería en los otros casos el URL se ha cambiado por el nombre que se le da al ancla, precedido del signo #.
Para marcar el fin del ancla (a donde debemos llegar) se hace uso de la etiqueta Texto del ancla . Donde "sección" debe coincidir con el nombre designado en el inicio del ancla.
Vínculos de correo electrónico
Por lo general las personas que diseñan sus paginas proporcionan la opción de tener una retroalimentación por parte del visitante. La manera mas sencilla de lograr esto es través de un vínculo que lleve al surfeador a un cuadro de correo electrónico con la dirección pblacketerminada.
La estructura es la siguiente:
Ejemplo:
Vínculos hacia otros recursos del Web
En la black, a parte del World Wide Web, existen otros cuatro recursos, que son el gopher, el FTP, el Usenet y el Telnet.
Para generar un vínculo hacia cualquiera de estos recursos, basta con designar adecuadamente el URL requerido dentro de la estructura normal de etiquetas de vínculo.
1)
Una plantilla es una forma de dispositivo que proporciona una separación entre la forma o estructura y el contenido. Es un medio o un aparato que permite guiar, portar o construir un diseño o esquema predefinido.
Una plantilla agiliza el trabajo de reproducción de muchas copias idénticas o casi idénticas (que no tiene que ser tan elaborado, sofisticado o personal). Si se quiere un trabajo más refinado, más creativo, la plantilla no es sino un punto de partida, un ejemplo, una idea aproximada de lo que se quiere hacer, o partes comunes de una diversidad de copias. A partir de la plantilla pueden asimismo diseñarse y fabricarse nuevas plantillas.
Las plantillas, como norma general, pueden ser utilizadas por personas o por sistemas automatizados. Se utilizan plantillas en todos los terrenos de la industria y la tecnología. Una plantilla puede servir como muestra base de una diversidad sobre la que comparten elementos comunes (patrón) y que en sí es lo que constituye la plantilla.
En relación con la edición o composición de textos o imágenes, se compone de cajas y líneas, con unos tamaños y márgenes, para facilitar la escritura de artículos o cartas, con títulos, fotos y diagramas.
En relación con la mecánica, puede ser una forma específica de ángulos y medidas, tal que colocando las partes constituyentes en su sitio permite un ensamblaje calibrado y uniforme e identificar la carencia de algún elemento.
4)
Vamos a tratar de explicar el proceso de creación de una barra de navegación sencilla pero muy versátil que podríamos incluir en una página web. El trabajo es sencillo, si se dominan las tablas del HTML, que como muchos sabrán, son el principal elemento que tenemos a nuestra disposición para maquetar una web, aparte de las capas.
El resultado que pretendemos conseguir se puede ver en una página aparte.
Referencias: En nuestro manual de HTML tenemos toda la teoría y un poco de la práctica necesaria para dominar las tablas. En nuestro taller de HTML tenemos unas interesantes prácticas con tablas que pueden orientarnos también.
Las imágenes
Vamos a utilizar tres imágenes muy simples. Una es el lateral izquierdo de las cajas de los enlaces, otra el lateral derecho, y un píxel transparente. Las podemos descargar en un archivo comprimido .zip.
Con las imágenes laterales vamos a hacer el efecto de caja con el borde con esquinas suavizadas. Una se utilizará en la parte de la derecha y otra en la izquierda. Con el píxel transparente utilizaremos algún truco de maquetación muy habitual en HTML, que consiste en colocar la imagen para crear un espacio de un tamaño definido por nosotros.
Las imágenes utilizan la transparencia del GIF para poder crear barras de navegación a las que podemos aplicarles distintos colores, fácilmente editables si utilizamos una hoja de estilos.
La tabla con el enlace
Vamos a dividir el problema en varias partes para que sea más fácil de entender cada una de ellas y el efecto global. Ahora vamos a ver cómo hacer una solapa. Al reunir varias solapas crearemos la barra de navegación.
5)
Línea de tiempo (Timelines)
La Línea de tiempo organiza y controla el contenido de una película a través del tiempo, en capas y fotogramas. Los componentes principales de la Línea de tiempo son las capas, los fotogramas y la cabeza lectora.
Las capas de una película aparecen en una columna situada a la izquierda de la Línea de tiempo. Los fotogramas contenidos en capa cada aparecen en una fila a la derecha del nombre de la capa. El encabezado de la Línea de tiempo situado en la parte superior de la Línea de tiempo indica los números de fotogramas. La cabeza lectora indica el fotograma actual que se muestra en el Escenario.
La información de estado de la Línea de tiempo situada en la parte inferior de la Línea de tiempo indica el número de fotograma actual, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.
Nota: Al reproducir una animación, se muestra la velocidad de fotogramas actual, que puede diferir de la velocidad de fotogramas de la película si el sistema no puede mostrar la animación con la rapidez apropiada.
Puede cambiar la manera según la que se muestran los fotogramas y mostrar miniaturas del contenido de los fotogramas en la Línea de tiempo. La Línea de tiempo muestra dónde hay animación en una película, incluyendo la animación fotograma a fotograma, la animación interpolada y los trazados de movimiento.
Modificación del aspecto de la Línea de tiempo
De forma predeterminada, la Línea de tiempo aparece en la parte superior de la ventana de la aplicación principal, encima del Escenario. Para cambiar su posición, puede acoplarla tanto a la parte inferior como a uno de los dos lados de la ventana de la aplicación principal, así como mostrarla en su propia ventana. También es posible ocultarla.
Puede cambiar el tamaño de la Línea de tiempo para cambiar el número de capas y fotogramas visibles. Si hay más capas de las que es posible mostrar en la Línea de tiempo, puede ver las capas adicionales utilizando las barras de desplazamiento situadas a la derecha de la Línea de tiempo.
Para mover la Línea de tiempo:
Arrástrela desde el área por encima del encabezado de la Línea de tiempo.
Arrastre la Línea de tiempo hasta el borde de la ventana de la aplicación para acoplarla. Presione Control (en Windows y en Macintosh) mientras la arrastra para impedir que la Línea de tiempo se acople a los bordes.
Para aumentar o reducir los campos de nombre de las capas:
Arrastre la barra que separa los nombres de capa y la Línea de tiempo.
GUIA 3 MODULO 2
1. Identificación de la Guía de Aprendizaje
| Código de la guía: DIM G3M2 | Fecha de utilización (aaaa/mm/dd) | | |
| Nombre de la Guía de aprendizaje: Técnicas para elaboración de prototipos de Mapas de Navegación. | Duración en horas | 24 | |
| Estructura Curricular: Diseño e integración de multimedia. | |||
| Modulo de formación: Diseño de la solución multimedia | Duración en horas | 440 | |
| Unidad de Aprendizaje: Diseño del mapa de navegación. | Duración en horas | 310 | |
| Modalidad de formación: Presencial X Virtual Desescolarizada | |||
| Actividad Enseñanza Aprendizaje: Producir el prototipo del mapa de navegación y validarlo con el usuario | Duración en horas | 90 | |
| Orientador (a): | |||
2. Introducción
La eficiencia en un proyecto multimedia esta medida por la facilidad que encuentre el usuario para navegar por la información que contiene el proyecto, la forma de subdividir los temas, de establecer las relaciones, de realizar hipertextos y vincular archivos externos de tal forma que determine lo que se denomina usabilidad del proyecto. Con la utilización de diferente software se pretende elaborar varios prototipos de navegación para un proyecto multimedia.
Recuerde señor alumno que usted es el responsable de su proceso de formación realice esta guía de aprendizaje con honestidad y responsabilidad.
Importante: El docente entregará el mapa de navegación a los diferentes grupos, para que estos elaboren el prototipo con el software instado en el aula de formación se sugiere (“Dreamweaver”).
3. Resultados de aprendizaje
Entender el concepto de plantillas
Establecer vínculos tanto internos como externos
Crear imágenes de sustitución
Crear una barra de navegación
Crear comportamientos dentro del prototipo
Realizar una animación con la línea de tiempo.
4. Actividades y Estrategias de aprendizaje
4.1. Estrategia de aprendizaje explicación magistral.
EL docente utilizando el aula de formación, explica la elaboración de plantillas y su aplicación en el mapa de navegación. (Para esta actividad dispone de 2 horas)
El docente utilizando el aula de formación explica la elaboración de vínculos tanto internos como externos y su aplicación en el mapa de navegación. (Para esta actividad dispone de 2 horas).
El docente utilizando el aula de formación explica la elaboración de imágenes de sustitución y su aplicación en el mapa de navegación. (Para esta actividad dispone de 2 horas).
El docente utilizando el aula de formación explica la elaboración de barra de navegación y su aplicación en el mapa de navegación. (Para esta actividad dispone de 2 horas).
El docente utilizando el aula de formación explica la elaboración de comportamientos y su aplicación en el mapa de navegación. (Para esta actividad dispone de 4 horas).
El docente utilizando el aula de formación explica la elaboración de animación utilizando la línea de tiempo y su aplicación en el mapa de navegación. (Para esta actividad dispone de 4 horas).
4.2. Estrategia de aprendizaje trabajo colaborativo.
Para la entrega del prototipo de navegación dispone de 6 horas de práctica en el salón de clase con el acompañamiento del docente.
El trabajo debe ser expuesto por los integrantes del equipo, cada exposición debe ser máxima de 20 minutos. (Para esta actividad dispone de 2 horas).
5. Evaluación
5.1. Criterios de evaluación
Elabora un prototipo de un mapa de navegación para ser validado con el docente.
5.2. Evidencias de Aprendizaje
CONOCIMIENTO:
Exposición del prototipo.
PRODUCTO:
Entrega del prototipo utilizando el software instalado (“se sugiere Dreanwever”).
6. Ambientes de Aprendizaje, medios, recursos didácticos
Nuevos ambientes de aprendizaje
Internet, procesador de palabra, textos.
Computador, software apropiado.
Guía de aprendizaje
7. Glosario
8. Bibliografía
Dreamweaver 8. ASP, Coldfusion y PHP versión dual Bardzell, Jeffrey
Diseño y desarrollo multimedia. Herramientas de Autor. Colmenar, A., Y Otros.,
Elaborada por: John Fredy Sádder / Benjamín Montoya
SOLUCION GUIA 2
Información general sobre topologías de navegación
Este tema contiene las siguientes secciones:
- Topologías de navegación
- Topologías de navegación estructuradas
- Navegación por una topología fija lineal
- Navegación dinámica por una topología fija jerárquica
- Ejemplo de navegación por una topología generada dinámicamente
Topologías de navegación
En WPF, la navegación suele estar compuesta de páginas (Page) con hipervínculos (Hyperlink) que navegan a otras páginas cuando se hace clic en ellos.Las páginas a las que se navega se identifican mediante identificadores de recursos uniformes (URIs) (consulte Empaquetar URI en WPF).Estudie el ejemplo siguiente sencillo, en el que se muestran páginas, hipervínculos y identificadores de recursos uniformes (URIs):
Estas páginas están organizadas en una topología de navegación cuya estructura se determina en virtud de cómo se puede navegar entre ellas.Esta topología de navegación concreta es adecuada en escenarios simples, aunque la navegación puede exigir topologías más complejas, algunas de las cuales sólo se pueden definir cuando una aplicación se está ejecutando.
En este tema se abarcan tres topologías de navegación comunes: fija lineal, fija jerárquica y generada dinámicamente.Cada topología de navegación se muestra con un ejemplo que tiene una interfaz de usuario como la mostrada en la ilustración siguiente:
Topologías de navegación estructuradas
Hay dos tipos generales de topologías de navegación:
- Topología fija: se define en tiempo de compilación y no cambia en tiempo de ejecución.Las topologías fijas son útiles para la navegación a través de una secuencia fija de páginas en orden lineal o jerárquico.
- Topología dinámica: se define en tiempo de ejecución basándose en los datos proporcionados por el usuario, la aplicación o el sistema.Las topologías dinámicas son útiles cuando se puede navegar por las páginas en secuencias diferentes.
Aunque es posible crear topologías de navegación mediante páginas, en los ejemplos se utilizan funciones de página, porque proporcionan compatibilidad adicional que simplifica la compatibilidad con el paso y la devolución de datos a través de las páginas de una topología.
Navegación por una topología fija lineal
Una topología fija lineal es parecida a la estructura de un asistente, que tiene una o más páginas por las que se navega siguiendo una secuencia fija.En la ilustración siguiente se muestra la estructura de nivel superior y el flujo de un asistente con una topología fija lineal.
Los comportamientos típicos para navegar por una topología fija lineal son:
- Navegar desde la página de llamada a una página de inicio que inicializa el asistente y navega a la primera página de este último.No se requiere una página de inicio (PageFunction(Of T) sin interfaz de usuario), ya que una página de llamada puede llamar directamente a la primera página del asistente.Sin embargo, el uso de una página de inicio puede simplificar la inicialización del asistente, especialmente si es compleja.
- El usuario puede navegar de una página a otra mediante los botones (o hipervínculos) de retroceso y avance (Atrás y Siguiente).
- El usuario puede navegar de una página a otra mediante el diario.
- El usuario puede cancelar el asistente desde cualquier página del mismo presionando el botón de cancelación (Cancelar).
- El usuario puede aceptar el asistente en la última página del mismo presionando un botón de finalización (Finalizar).
- Si se cancela un asistente, éste devuelve el resultado correspondiente y no devuelve ningún dato.
- Si el usuario acepta un asistente, éste devuelve el resultado correspondiente y los datos que ha recolectado.
- Cuando se completa el asistente (se acepta o se cancela), las páginas que componen el asistente se quitan del diario.De este modo, cada instancia del asistente se mantiene aislada, lo que evita posibles anomalías en los datos o en el estado.
Navegación dinámica por una topología fija jerárquica
En algunas aplicaciones, las páginas permiten la navegación a dos o más otras páginas, como se muestra en la ilustración siguiente.
Esta estructura se denomina topología fija jerárquica y la aplicación o el usuario suelen determinar en tiempo de ejecución la secuencia en la que se recorre la jerarquía.En tiempo de ejecución, cada página de la jerarquía que permite la navegación a dos o más otras páginas recolecta los datos necesarios para determinar a qué página se va a navegar.En la ilustración siguiente se muestra una de las distintas secuencias de navegación posibles basándose en la ilustración anterior.
Aunque la secuencia en la que se navega por las páginas en una estructura fija jerárquica se determina en tiempo de ejecución, la experiencia del usuario es igual que en una topología fija lineal:
- Navegar desd la página de llamada a una página de inicio que inicializa el asistente y navega a la primera página de este último.No se requiere una página de inicio (PageFunction(Of T) sin interfaz de usuario), ya que una página de llamada puede llamar directamente a la primera página del asistente.Sin embargo, el uso de una página de inicio puede simplificar la inicialización del asistente, especialmente si es compleja.
- El usuario puede navegar de una página a otra mediante los botones (o hipervínculos) de retroceso y avance (Atrás y Siguiente).
- El usuario puede navegar de una página a otra mediante el diario.
- El usuario puede cambiar la secuencia de navegación si navega hacia atrás en el diario.
- El usuario puede cancelar el asistente desde cualquier página del mismo presionando el botón de cancelación (Cancelar).
- El usuario puede aceptar el asistente en la última página del mismo presionando un botón de finalización (Finalizar).
- Si se cancela un asistente, éste devuelve el resultado correspondiente y no devuelve ningún dato.
- Si el usuario acepta un asistente, éste devuelve el resultado correspondiente y los datos que ha recolectado.
- Cuando se completa el asistente (se acepta o se cancela), las páginas que componen el asistente se quitan del diario.De este modo, cada instancia del asistente se mantiene aislada, lo que evita posibles anomalías en los datos o en el estado.
Ejemplo de navegación por una topología generada dinámicamente
En algunas aplicaciones, la secuencia en la que se navega por dos o más páginas se puede determinar únicamente en tiempo de ejecución, ya sea por el usuario, por la aplicación o por los datos externos.En la ilustración siguiente se muestra un conjunto de páginas con una secuencia de navegación indeterminada.
En la figura siguiente se muestra una secuencia de navegación elegida por el usuario en tiempo de ejecución.
La secuencia de navegación se denomina topología generada dinámicamente.Para el usuario, al igual que en las otras topologías de navegación, la experiencia es igual que en las topologías anteriores:
- Navegar desde la página de llamada a una página de inicio que inicializa el asistente y navega a la primera página de este último.No se requiere una página de inicio (PageFunction(Of T) sin interfaz de usuario), ya que una página de llamada puede llamar directamente a la primera página del asistente.Sin embargo, el uso de una página de inicio puede simplificar la inicialización del asistente, especialmente si es compleja.
- El usuario puede navegar de una página a otra mediante los botones (o hipervínculos) de retroceso y avance (Atrás y Siguiente).
- El usuario puede navegar de una página a otra mediante el diario.
- El usuario puede cancelar el asistente desde cualquier página del mismo presionando el botón de cancelación (Cancelar).
- El usuario puede aceptar el asistente en la última página del mismo presionando un botón de finalización (Finalizar).
- Si se cancela un asistente, éste devuelve el resultado correspondiente y no devuelve ningún dato.
- Si el usuario acepta un asistente, éste devuelve el resultado correspondiente y los datos que ha recolectado.
- Cuando se completa el asistente (se acepta o se cancela), las páginas que componen el asistente se quitan del diario.De este modo, cada instancia del asistente se mantiene aislada, lo que evita posibles anomalías en los datos o en el estado.
~Links e hipertextos~
Existen dos métodos principales para navegar, los cuales se utilizan para navegar tanto en como entre los diferentes sitios web: los links o conexiones de hipertexto en primer lugar, y las barras de navegación en segundo.
El hipertexto es la esencia de Internet, pues gracias a esta función se puede lograr unir lo que de otro modo serían distintas páginas inconexas.
Mediante las conexiones de hipertexto, gráficas y/o textuales, las distintas página web pueden ser fácilmente referenciadas, o, más precisamente, "linkeadas" a imágenes e información de otros sitios en Internet.
La mayoría de las conexiones de hipertexto se distinguen por el hecho de estar subrayadas y/o con colores diferentes al texto general. Asimismo, para ver si un elemento gráfico de una página web tiene un link o se puede ampliar, puede pasar su cursor sobre el mismo, fijándose si ve una URL (dirección del sitio) en la Barra de Posición al pie de la ventana del navegador o si cambia la forma del cursor a una mano. En estos casos, se tratará de una conexión que lo llevará a otra página dentro del sitio o hacia otra página del Internet.
Los menúes de navegación, que pueden diferir en ubicación y apariencia, están generalmente diseñadas para la navegación dentro de un solo sitio, y son a menudo los medios principales para recorrer los mismos. Si están bien diseñadas, las barras de navegación pueden ser la forma más directa y clara de llegar a un vínculo.
Suscribirse a:
Entradas (Atom)