Universidad de Panamá

Centro Regional Universitario de Veraguas

Facultad de Informática Electrónica y Comunicación

Lic. En Informática para la Gestión Educativa y Empresarial

Programación Web

Proyecto #2

Profesor

Diego, Santimateo

Estudiante

Mendoza, Maritza

6-708-600

Fecha de Entrega

21-05-2007
Objetivos

• Utilizar CSS de manera dinámica.

• Aplicar maquetación con CSS.

• Utilizar JavaScript para dar dinámica al documento.

Descripción de la asignación

Este trabajo consiste en desarrollar un documento DHTML que permita hacer

consultas relativas al plan de estudio de la Licenciatura en Informática para la
Gestión Educativa y Empresarial.
Las consultas solicitadas son las siguientes:

• Asignaturas de un semestre (código, abreviatura, descripción, créditos y

prerrequisitos).
• Asignaturas de un año(código, abreviatura, descripción, créditos y
prerrequisitos).
• Personal Docente.
• Campo laboral.
• Perfil del egresado.
• Objetivos de la carrera.
• Color personalizado en el área de respuestas.
 Introducción

Este informe presenta el laboratorio #2 (DHTML), con el objetivo de mejorar los

conocimientos sobre css, JavaScript y XHTML, en conjunto.
Fueron colocadas en este informe las funciones utilizadas en el Javascript, a la
vez también se colocaron como se hicieron las llamadas a estas funciones y
que argumentos se le pasaron a dichas funciones, también se da un pequeño
vistazo sobre el css.
Este informe da un resumen en la forma en que fue elaborado este proyecto
para obtener los resultados esperados.
 Informe

Funciones utilizadas en JavaScript:

4- Función encargada de hacer que se muestre un div:

function mostrar(id){ Recibe cualquier div y se

asigna a una variable.
var obj = document.getElementById(id)
if(obj.style.display == ‘block’)
obj.style.display = ‘none’ Se pregunta se este se está
mostrando, si es así, se manda a
else ocultar y en el caso contrario se
{ muestra.
oculta();
var varia = document.getElementById(id).style Como no se coloco el top
varia.top=40; en ninguno de los div en
obj.style.display = ‘block’ el css, se le da un valor
de top dinámicamente, ya
} que se le asigna este valor
} cada vez que entre a ver
Esta función se llama dentro de la
este div.
función mostrar, para así lograr ocultar
el div que se este visualizando.

2- Función encargada de ocultar un div:

 function oculta(){
Esta función como se
dijo anteriormente, es
var id1 = document.getElementById(‘sem1anno1’)
llamada dentro de la
id1.style.display = ‘none’
función mostrar, y
cuando esta es llamada,
var id2 = document.getElementById(‘sem2anno1’)
el div en acción es
id2.style.display = ‘none’
colocado en “none”
var id3 = document.getElementById(‘verano1’) para ser ocultado.
id3.style.display = ‘none’

var id4 = document.getElementById(‘sem1anno2’)

id4.style.display = ‘none’

var id5 = document.getElementById(‘sem2anno2’)

id5.style.display = ‘none’

var id6 = document.getElementById(‘verano2’)

id6.style.display = ‘none’

var id7 = document.getElementById(‘sem1anno3’)

id7.style.display = ‘none’

var id8 = document.getElementById(‘sem2anno3’)

id8.style.display = ‘none’

var id9 = document.getElementById(‘verano3’)

id9.style.display = ‘none’

var id10 = document.getElementById(‘personal’)

id10.style.display = ‘none’

var id11 = document.getElementById(‘campolaboral’)

id11.style.display = ‘none’

var id12 = document.getElementById(‘perfil’)

id12.style.display = ‘none’

var id13 = document.getElementById(‘objetivos’)

id13.style.display = ‘none’
}
3- Función encargada desplegar los semestres de todo un año:

function despliegaanno(id1,id2,id3){ Se le pasan de

var obj = document.getElementById(id1) argumentos los 3
var obj1 = document.getElementById(id2) div que se quieren
var obj2 = document.getElementById(id3) mostrar.
oculta();
if(obj.style.display == ‘block’)
obj.style.display = ‘none’
else
{
var pri = document.getElementById(id1).style
pri.top=30;
Se le asigna un top de
obj.style.display = ‘block’ 30px al primer div que
aparecerá, luego un top
var seg = document.getElementById(id2).style de 230 al segundo div y
seg.top=230; 430px al tercer top, de
obj1.style.display = ‘block’ manera que aparezcan
con su espacio superior
suficiente.
var terc = document.getElementById(id3).style
terc.top=430;
obj2.style.display = ‘block’
}
}
4- Función encargada de cambiar el color del área de respuesta:

function coloress(colore){
document.all[“ladodere”].style.backgroundColor=colore;
}
Esta es una de las funciones más
sencillas de este pequeño sistema.
Aplicando el color al div. La función colore recibe el color y
se lo aplica al div “ladoderecho”.
Pantalla de entrada con la imagen
Llamados de estas funciones anteriormente mencionadas:

1- Llamando a la función mostrar:

<li><a href=”#” onClick=”mostrar(‘sem1anno1’)”>I-Semestre</a></li>

Se puede observar que mediante un 9lic sobre la palabra “I-semestre” se llama

a la función mostrar y se le pasa como parámetro el div que en este caso se
desea visualizar.

2- Llamando a la función oculta:

function mostrar(id){
var obj = document.getElementById(id)
if(obj.style.display == ‘block’)
obj.style.display = ‘none’
else
{
oculta();
var varia = document.getElementById(id).style
varia.top=40;
obj.style.display = ‘block’

}
}

Esta función oculta es llamada dentro de otra función para así lograr el efecto
de poder ocultar los div o contenedores previamente visualizados. En este caso
se llama en la función mostrar y en la despliegaanno.

3- Llamando a la función despliegaanno:

<li><a href=”#”
onClick=”despliegaanno(‘sem1anno1’,’sem2anno1’,’verano1’)”>I-Año</a></li>
Esta es la función encargada de visualizar los 3 div o contenedores a la vez, el
que tiene al I-semestre, el que contiene al II-semestre y del verano, se le pasan
como argumentos los nombres de los 3 div y estos son procesados dentro de la
misma. Como se puede observar esta función se ejecuta al dar un click sobre
la palabra I-año en este caso, y así se llama a la función despliegaanno.

4- Llamando a la función coloress:

<td><a href=”#” onClick=”coloress(‘#fde1dd’)”><img class=”color”

src=”rosa.jpg” alt=”rosa” /></a></td>
Esta función es llamada mediante el 10lic que se le da a la imagen que
contiene el color al cual se transformará el div.
Al darle clic sobre este cuadrito se llama a la función coloress pasándole como
argumento el color entre comilla.

Un pequeño vistazo a lo que fue la confección del CSS.

CSS es una excelente herramienta ya que se puede controlar el estilo de la

página al antojo del diseñador.

En este caso se utilizó un CSS bastante dinámico tal como se requería en los
objetivos a cumplir, ya que en esta página se modificaba el top de los div que
se deseaban mostrar en el JavaScript, y en el mismo css no se le aplicaba top.

Ejemplo:
Este es el css, para el div del primer semestre-I año.
Como se puede observar no se le asigna ningún top, ya que el mismo es
controlado desde el javascript. También podemos observar que este div cuenta
con su display:none; para así controlar que el mismo está oculto y cuando este
sea llamado por la función quedará en block para asi visualizarse.

#sem1anno1{
position:absolute;
width:95%;
padding:3px 10px 3px 10px;
display:none;
text-align:justify;
}
 Conclusiones

- CSS hace que las páginas sean mucho más agradables, pero con este
proyecto se logra ver lo dinámico que puede ser esta herramienta y los
buenos resultados que te pueden dar.
- En este proyecto se usa un css dinámico a la hora de cambiar los
colores a un contenedor o div, y también es usado a la hora de cambiar
los top, para poder visualizar los 3 semestres de un año en una sola
pantalla.
- Javascript no se queda para nada atrás, esta herramienta es la que más
dinamismo le da a la página, ya que por medio de utilizar funciones
JavaScript se logró el ocultamiento y visualización de los diferentes div
en los que se contenía la información.
- Xhtml una excelente herramienta, que guarda muchas reglas y que por
supuesto se tuvieron muy en cuenta en este proyecto, ya que el mismo
fue validado por validator.w3.org.
- Estas tres herramientas juntas le dan a la página un ambiente muy
agradable, capas de lograr que el usuario se sienta que lleva el control
sobre la página.