Capítulo 8, otras utilidades básicas en paginas html

Universidad de Panamá
Centro Regional Universitario de Coclé
Facultad de Informática, Electrónica y Comunicación
Licenciatura en Informática para la Gestión Educativa y Empresarial

Asignatura:
Programación Web

Profesora:
Arelis Valdés
Capítulo 8. Otras utilidades de
javascript

Preparado por:
Aguilar Maidelyn, Martínez Kathya, Trujillo Silvia
12 Junio 2012

CONTENIDO
INTRODUCCIÓN

CAPÍTULO 8 8.6. TOOLTIP

8.1. RELOJES - FUNCIONES 8.7. PASOS PARA HACER UN TOOLTIP

8.2. SINTAXIS DE UN EJEMPLO 8.8. LIBRERÍA OVERLIB

8.3. EJEMPLO DE RELOJ 8.9. FUNCIONES DEL TOOLTIP

8.4. CALENDARIO 8.10.EJEMPLO CON TOOLTIP

8.5. EJEMPLO DE CALENDARIO 8.11.RESULTADO DEL TOOLTIP

CONTENIDO…
8.12. MENÚ DESPLEGABLE

8.13. SINTAXIS DE UN EJEMPLO

8.14.EJEMPLO SENCILLO

8.15.GALERÍA DE IMÁGENES

8.16. PAQUETE DE IMÁGENES

CONCLUSIÓN

Introducción
• En el capítulo 8 pretendemos ofrecer
información mas esencial para aprender a
incluir scripts como calendario, reloj, menú
desplegable, tooltip, galería de imágenes los
cuales se programan en el lenguaje de
javascript que nos pueden ayudar a aplicar
dinamismo a una página web.

SEGUIR

Capítulo 8: Otras utilidades básicas
dentro de una página web con
Javascript
• Reloj
• Calendario
• Tooltip
• Menú desplegables
• Galería de Imagénes

SEGUIR

8.1. Relojes--Funciones
• Actualizar
• Contar
• Marcar
• Generar
Las horas indefinidamente.

SEGUIR

8.2. Sintaxis de un ejemplo
• function mueveReloj(){
• momentoActual = new Date() Indicar que se ejecute dentro de
utilidad que proporciona JavaScript
• hora = momentoActual.getHours() 1 segundo
• minuto = momentoActual.getMinutes() para crear fechas y horas
• segundo = momentoActual.getSeconds()
• str_segundo = new String (segundo)
• if (str_segundo.length == 1)
• segundo = "0" + segundo
• str_minuto = new String (minuto)
• if (str_minuto.length == 1)
• minuto = "0" + minuto
• str_hora = new String (hora)
• if (str_hora.length == 1)
• hora = "0" + hora
• horaImprimible = hora + " : " + minuto + " : " + segundo
• document.form_reloj.reloj.value = horaImprimible
• setInterval("mueveReloj()",1000)
Esta función hace que el
• } reloj se ejecute
indefinidamente

SEGUIR

8.3. Ejemplo Completo
F:PROGRA.PARA WEBejem_libro_int_java

SEGUIR

8.4. Calendario
El calendario es una cuenta sistematizada del
transcurso del tiempo, utilizado para la organización
cronológica de las actividades humanas.

http://sourceforge.net/projects/jscalendar/

<head>
<style type="text/css">@import url("css/calendar-estilo.css");</style>
<script type="text/javascript" src="js/calendar.js" />
<script type="text/javascript" src="js/calendar-es.js" />
<script type="text/javascript" src="js/calendar-setup.js" />
</head>

SEGUIR

8.5. Ejemplo
Elementos
Propiedades

ifFormat
Cuadro de
texto
button

Imagen o
icono
inputField
SEGUIR

8.6. Tooltip
• Los tooltips son pequeños recuadros de
información que aparecen al posicionar el
ratón sobre un elemento. Se utilizan para
ofrecer información adicional sobre el
elemento seleccionado o para mostrar al
usuario pequeños mensajes de ayuda.

SEGUIR

8.7. Pasos necesarios para incluir un
tooltip básico en cualquier página web:

1) Enlazar los archivos JavaScript requeridos.
http://www.bosrup.com/web/overlib/

2) Definir el texto que activa el tooltip y su contenido.

SEGUIR

8.8. Uso de la librería overLIB
• La librería overLIB permite configurar
completamente el aspecto y comportamiento de
cada tooltip. Las opciones se indican en cada
tooltip y se incluyen como parámetros al final de
la llamada a la función overlib();

SEGUIR

8.9. Funciones del Tooltip
• onmouseover = el dispositivo apuntador se
sitúa sobre un elemento

• onmouseout = el dispositivo apuntador se
aparta de un elemento.

SEGUIR

8.10. Ejemplo con tooltip

SEGUIR

8.11. Resultado del ejemplo con
tooltip

SEGUIR

8.12. Menú desplegable
• Navegación
• Menús
• Horizontal y Vertical
• Niveles
• Usuario
• Elemento

SEGUIR

8.13. Sintaxis de un ejemplo
• <body>
• <ul class="menu" id="menu">
• <li><a href="#" class="menulink">Frutas</a>
• <ul>
• <li><a href="#">Manzana</a></li>
• <li>
• <a href="#" class="sub">Uva</a>
• <ul>
• <li class="topline"><a href="#">Verdes</a></li>
Contiene las
• <li><a href="#">Sin semillas</a></li>
• <li><a href="#">Negras</a></li> etiquetas que
• <li><a href="#">Amarillas</a></li> irán dentro de
• <li><a href="#">Rojas</a></li> cada menú
• </ul>
• <li>
• <li>
• <a href="#" class="sub">Mangos</a>
• <ul>
• <li class="topline"><a href="#">Piñas</a></li>
• <li><a href="#">Alcanfor</a></li>
• <li>
• …..
• <html>
SEGUIR

8.14. Ejemplo Sencillo
• F:PROGRA.PARA
WEBejem_libro_int_javadropdown-
menudropdown-menu

SEGUIR

8.15. Galerías de imágenes (Lightbox)
La galería no es mas que un espacio que
se le otorga dentro de la pagina a las
fotos e imágenes.
Técnica Lightbox

Http://www.huddletogether.com/projects/lightbox2/

SEGUIR

8.16. PAQUETE DE
IMÁGENES

SEGUIR

Conclusión
Hemos aprendido de explicar el capítulo 8, en donde nos
podemos percatar que los errores mas comunes al ejecutar
JavaScript son los errores de sintaxis por escribir de manera
errónea las líneas de código a la hora de escribir nombres de
una estructura o utilizar llaves o paréntesis incorrectamente.

Hemos aprendido que las pequeñas utilidades que contiene
una página web hacen de esta una página dinámica con una
mejor navegabilidad.

Como construir nuestros propios objetos dentro de una
página y conociendo la función que realiza cada una de ellas.

Capítulo 8, otras utilidades básicas en paginas html

Capítulo 8, otras utilidades básicas en paginas html

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Capítulo 8, otras utilidades básicas en paginas html

Similar a Capítulo 8, otras utilidades básicas en paginas html (20)

Capítulo 8, otras utilidades básicas en paginas html