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

Capítulo 8. Otras utilidades de javascript

Preparado por:

Aguilar Maidelyn, Martínez Kathya, Trujillo Silvia

12 Junio 2012

Universidad de PanamáCentro Regional Universitario de Coclé

Facultad de Informática, Electrónica y ComunicaciónLicenciatura en Informática para la Gestión Educativa y Empresarial

Asignatura: Programación Web

Profesora: Arelis Valdés

CONTENIDO

CAPÍTULO 8

8.1. RELOJES - FUNCIONES

8.2. SINTAXIS DE UN EJEMPLO

8.3. EJEMPLO DE RELOJ

8.4. CALENDARIO

8.5. EJEMPLO DE CALENDARIO

8.6. TOOLTIP

8.7. PASOS PARA HACER UN TOOLTIP

8.8. LIBRERÍA OVERLIB

8.10.EJEMPLO CON TOOLTIP

8.11.RESULTADO DEL TOOLTIP

8.9. FUNCIONES DEL TOOLTIP

INTRODUCCIÓN

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• GenerarLas horas indefinidamente.

SEGUIR

8.2. Sintaxis de un ejemplo• function mueveReloj(){ • momentoActual = new Date() • hora = momentoActual.getHours() • minuto = momentoActual.getMinutes() • 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) • }

utilidad que proporciona JavaScript para crear fechas y horas

Indicar que se ejecute dentro de 1 segundo

Esta función hace que el reloj se ejecute indefinidamente

SEGUIR

8.3. Ejemplo Completo

F:\PROGRA.PARA WEB\ejem_libro_int_java

SEGUIR

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>

8.4. Calendario

SEGUIR

ifFormat

button

inputField

PropiedadesElementos

Cuadro de texto

Imagen o icono

8.5. Ejemplo

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

http://www.bosrup.com/web/overlib/

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>• <li><a href="#">Sin semillas</a></li>• <li><a href="#">Negras</a></li>• <li><a href="#">Amarillas</a></li>• <li><a href="#">Rojas</a></li>• </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>

Contiene las etiquetas que irán dentro de

cada menú

SEGUIR

8.14. Ejemplo Sencillo

• F:\PROGRA.PARA WEB\ejem_libro_int_java\dropdown-menu\dropdown-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

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



8.16. PAQUETE DE IMÁGENES

SEGUIR

ConclusiónHemos 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.

GRACIAS POR SU ATENCIÓN

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

Documents

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