INTERFAZ GRAFICA CREADA EN HTML PARA UNA BD EN FIREBIRD

INSTITUTO TECNOLOGICO SUPERIOR DE LERDO

TALLER DE BD

// Carrera Lic. En informática

// Tema creación de la aplicación para Firebird (INTERFAZ)

6to. Semestre

LIC.I Aranxa Argentina Velazquez Salas 09232116 LIC.I Alejandra Limones Espinoza 09232106 LIC.I Mayra Elida Arguijo Cordero 09232012

LIC.I María Elena Rodríguez Vargas 06230260 LIC.I. Eduardo Solís Gonzales 09232114 LIC.I. Eduardo Castillo Galván 07230509

ING. Ricardo De Jesús Bustamante González

12/OCT/2011

Documentación de la aplicación HTML y PHP

Esta aplicación fue echa en block de notas, los componentes que se utilizan son,

TexBox, ComboBox, y botones, una descripción general de la creación de estos

componentes por medio de codigo son: para generar un TexBox se pone el

siguiente codigo:

<INPUT TYPE="TEXT" NAME="CLAVELIBRO"> //Donde clave libro, es el nombre

o el identificador que se le quiere dar al TexBox.

Para generar un ComboBox se coloca el siguiente codigo:

<select name="CLAVEAUTOR"> //Clave autor va identifica al ComboBox <option select>---- <option>vacio //<option> indica el nombre de la opción <option>vacio </select> Para generar un botón se coloca el siguiente codigo:

<input type="submit" value="Aceptar"> //Value indica el nombre del botón, en este

caso se le da al botón el nombre de Aceptar

Una vez descrito de manera general la sintaxis de los códigos de los componentes a programar, se empieza a describir la manera en que se hiso //la primer interfaz., la interfaz queda de la siguiente manera:

Lo primero que se realizo fue poner un fondo en la pagina, Para colocar el fondo de pantalla se utilizó una imagen .jpg y el siguiente codigo:

codigo: <BODY BACKGROUND=”imagen.jpg”> El banner que se ve al principio

Se creo con el siguiente codigo: <CENTER> <embed src="http://www.criticallayouts.com/Generators/LED-Scroller/LCD1.swf" FlashVars="t=BIBLIOTECA VIRTUAL&msg=MySpace Generators&b=1" quality="high" bgcolor="#F5A9F2" width="450" height="60" name="LCDScroller" align="middle" allowScriptAccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed> </CENTER> Este banner se genero con ayuda de una pagina web: http://www.webmasterac.es.tl/GENERADOR-DE-TEXTO-SCOLL-%3Cimg-src%3D-g-http-d--s--s-img61-.-imageshack-.-us-s-img61-s-5580-s-newbotonoz0-.-gif-g--alt%3D-g-Image-Hosted-by-ImageShack-.-us-g--border%3D-g-0-g-%3E%3C-s-a%3E.htm

El cubo 3D con movimiento que se ve al centro de la pagina

Se creo con el siguiente codigo: <embed src="http://www.criticallayouts.com/Generators/photo-cube-3d/show.swf?baseURL=http://www.criticallayouts.com/Generators/photo-cube-

http://www.webmasterac.es.tl/GENERADOR-DE-TEXTO-SCOLL-%3Cimg-src%3D-g-http-d--s--s-img61-.-imageshack-.-us-s-img61-s-5580-s-newbotonoz0-.-gif-g--alt%3D-g-Image-Hosted-by-ImageShack-.-us-g--border%3D-g-0-g-%3E%3C-s-a%3E.htm



3d/&clickURL=http://www.photocube3d.com/&clickLABEL=Photo Cube&rect=off&pic1=pic131849026475755275312.gif&pic2=pic13184902920747116496.gif&pic3=pic131849030055348981017.gif&pic4=pic131849030913364765171.gif&pic5=pic131849032599742953567.gif&pic6=pic13184903346639252305.gif&shadow=on&alpha=on&xrot=on&yrot=on&xangle=0&yangle=0&cl=16777215" quality="high" bgcolor="#ffffff" width="400" height="400" name="show" align="middle" wmode="transparent" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

Este cubo se genero también con ayuda de una página web: http://www.webmasterac.es.tl/CREA-TU-CUBO-%3Cimg-src%3D-g-http-d--s--s-img61-.-imageshack-.-us-s-img61-s-5580-s-newbotonoz0-.-gif-g--alt%3D-g-Image-Hosted-by-ImageShack-.-us-g--border%3D-g-0-g-%3E%3C-s-a%3E.htm

El botón que se ve a un lado del cubo

se creo con ayuda de un programa llamado 123 Flash

Menú, para crear el botón de color rosa una vez creado solo se guardo el archivo

.swf en la carpeta donde contiene todo lo referente a esta aplicación. Una vez ya

terminada la interfaz se guardo con el nombre index.html

//Segunda interfaz La siguiente interfaz contiene, el titulo biblioteca virtual, una línea divisoria de color rosa, y una marquesina con el nombre bienvenidos, un menú, un fondo de pantalla, como se muestra en la siguiente imagen:

http://www.webmasterac.es.tl/CREA-TU-CUBO-%3Cimg-src%3D-g-http-d--s--s-img61-.-imageshack-.-us-s-img61-s-5580-s-newbotonoz0-.-gif-g--alt%3D-g-Image-Hosted-by-ImageShack-.-us-g--border%3D-g-0-g-%3E%3C-s-a%3E.htm



Para colocar el fondo de pantalla se utilizó una imagen .jpg y el siguiente codigo:

codigo: <BODY BACKGROUND=”imagen.jpg”> El banner Biblioteca virtual que se ve al principio se creo con el siguiente codigo: <CENTER> <embed src="http://www.criticallayouts.com/Generators/LED-Scroller/LCD1.swf" FlashVars="t=BIBLIOTECA VIRTUAL&msg=MySpace Generators&b=1" quality="high" bgcolor="#F5A9F2" width="450" height="60" name="LCDScroller" align="middle" allowScriptAccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed> </CENTER> Este banner se genero con ayuda de una pagina web: http://www.webmasterac.es.tl/GENERADOR-DE-TEXTO-SCOLL-%3Cimg-src%3D-g-http-d--s--s-img61-.-imageshack-.-us-s-img61-s-5580-s-newbotonoz0-.-gif-g--alt%3D-g-Image-Hosted-by-ImageShack-.-us-g--border%3D-g-0-g-%3E%3C-s-a%3E.htm La línea divisoria rosa y la marquesina se creo con el siguiente codigo:

<HR SIZE=15 COLOR="#F5A9F2"> //genera la línea divisoria de color rosa <BR> //Salto de línea <MARQUEE BEHAVIOR=ALTERNATE BGCOLOR="#F4FA58" WIDTH=25%><FONT COLOR="#00BFFF" FACE="Jokerman">Bienvenidos</FONT></MARQUEE> //crea la marquesina, las etiquetas marque son las que permiten que se mueva el texto, y el comando behavior=altérnate permite que se mueva de izquierda a derecha

En el menú se utilizaron cuatro imágenes, y un programa llamado 123 Flash Menú para crear los botones de color azul una vez creado solo se guardo el archivo .swf en la carpeta donde contiene todo lo referente a esta aplicación.




En el caso de las imágenes para dar un efecto de zoom a cada una al pasar el mouse se utilizo el siguiente codigo: <A HREF="autores.html" BORDER="0"><img src="aut.png" onmouseover="this.width=128;this.height=128;" onmouseout="this.width=100;this.height=80;" width="100" height="80" /></A> Solo se fue cambiando el nombre de la imagen en IMG SRC=”aut.jpg” y el nombre de la pagina ala cual va a mandar al dar clic A HREF=”autores.html”,por ultimo se Se guardo con el nombre index1.html

//Tercera interfaz Esta interfaz corresponde al registro de libros, asi es como se visualiza esta interfaz:

En el caso del fondo de pantalla, la línea divisoria y banner se creo con el siguiente codigo: < BODY BACKGROUND=”imagen.jpg”> //codigo para el fondo de pantalla <CENTER> //aqui empieza el codigo del banner <embed src="http://www.criticallayouts.com/Generators/LED-Scroller/LCD1.swf" FlashVars="t=BIBLIOTECA VIRTUAL&msg=MySpace Generators&b=1" quality="high" bgcolor="#F5A9F2" width="450" height="60" name="LCDScroller" align="middle" allowScriptAccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed> </CENTER> <HR SIZE=15 COLOR="#F5A9F2"><BR> //Crea la linea divisoria

En esta parte se volvió a colocar la misma imagen para que identifique que corresponde al registro de libros, se coloco el titulo y la imagen que tiene una flecha esta se utilizo como botón para regresar al menú principal, a esta imagen también se le dio un efecto de zoom para cuando pase el mouse sobre esta, el codigo para realizar esto fue: <CENTER><TABLE> <TR> <TD> <IMG SRC="lib.png" WIDTH=100 HEIGHT=100> </TD> <TD> <FONT COLOR="#FFFFFF" FACE="Jokerman">REGISTRAR LIBRO</FONT><BR> <CENTER> <A HREF="index1.html" BORDER=0><img src="Back.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=50;this.height=40;" width="50" height="40" /></A> </CENTER> </TD> </TR> </TABLE></CENTER>

Para realizar esta parte, se utilizo un recuadro con fondo de color amarillo este va a contener los TexBox y ComboBox el codigo que se utilizo fue el siguiente: <CENTER><TABLE BGCOLOR=”# F4FA58”>

<TR> <TD> CLAVE DEL LIBRO:

</TD> <TD> <INPUT TYPE="TEXT" NAME="CLAVELIBRO"> </TD> </TR> <TR> <TD> NOMBRE DEL LIBRO: </TD> <TD> <INPUT TYPE="TEXT" NAME="NOMBRELIBRO"> </TD> </TR> <TR> <TD> CLAVE DEL AUTOR: </TD> <TD> <select name="CLAVEAUTOR"> <option select>---- <option>vacio <option>vacio <option>vacio <option>vacio </select> </TD> </TR> <TR> <TD> NOMBRE DEL AUTOR: </TD> <TD> <INPUT TYPE="TEXT" NAME="NOMBREAUTOR" <DIV style="BORDER-RIGHT:#848484 2px solid; BORDER-TOP:#848484 2px solid; HEIGHT: 25px; BACKGROUND-COLOR:#848484"</div> </TD> </TR> <TR> <TD> CLAVE EDITORIAL: </TD> <TD> <select name="CLAVEEDITORIAL"> <option select>---- <option>vacio <option>vacio <option>vacio <option>vacio </select> </TD> </TR> <TR>

<TD> NOMBRE DE LA EDITORIAL: </TD> <TD> <INPUT TYPE="TEXT" NAME="NOMBREEDITORIAL" <DIV style="BORDER-RIGHT:#848484 2px solid; BORDER-TOP:#848484 2px solid; HEIGHT: 25px; BACKGROUND-COLOR:#848484"</div> </TD> </TR> <TR> <TD> CLAVE TEMATICAS: </TD> <TD> <select name="CLAVETEMATICAS"> <option select>---- <option>vacio <option>vacio <option>vacio <option>vacio </select> </TD> </TR> <TR> <TD> NOMBRE DE LA TEMATICA: </TD> <TD> <INPUT TYPE="TEXT" NAME="NOMBRETEMATICA" <DIV style="BORDER-RIGHT:#848484 2px solid; BORDER-TOP:#848484 2px solid; HEIGHT: 25px; BACKGROUND-COLOR:#848484"</div> </TD> </TR> </TABLE></CENTER> <BR>

Por ultimo en este interfaz se programaron dos botones con los nombres Aceptar y Cancelar, el codigo fue el siguiente:

<input type="submit" value="Cancelar"> <input type="submit" value="Aceptar"> Se guardo con el nombre libro.html

//Cuarta interfaz Esta interfaz queda de la siguiente manera como se muestra en la imagen

En esta interfaz se fue siguiendo el mismo procedimiento que en las primeras interfacez, primero se colo el banner y luego la linea divisoria con este codigo: <CENTER> <embed src="http://www.criticallayouts.com/Generators/LED-Scroller/LCD1.swf" FlashVars="t=BIBLIOTECA VIRTUAL&msg=MySpace Generators&b=1" quality="high" bgcolor="#F5A9F2" width="450" height="60" name="LCDScroller" align="middle" allowScriptAccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed> </CENTER> <HR SIZE=15 COLOR="#F5A9F2"><BR> Se coloco el mísmo icono que esta en el menú y representa al autor también la imagen como botón para regresar al inicio esto se creo con el siguiente codigo:

<IMG src="aut.png"width="100" height="100"> <A HREF="index1.html"

BORDER=0><img src="Back.png" onmouseover="this.width=60;this.height=60;"

onmouseout="this.width=50;this.height=40;" width="50" height="40" /></A>

Para el caso del cuadro de color amarillo, los nombres, TexBox y ComboBox, el botón registrar y cancelar, se utilizo el siguiente codigo: <TEXTCOLOR=BLACK>

<span style="color:##190707">

<FORM NAME="FORMULARIO UNO" ACTION="FACTORIAL2.PHP"=METHOD=POST">

<center><TABLE border="3" height="100px" bgcolor="#F4FA58" > </center>

<TH>

<BR> <BR><BR>

CLAVE DEL AUTOR:

<INPUT TYPE "TEXT" NAME="N">

<BR>

<BR>

NOMBRE DEL AUTOR:

<INPUT TYPE "TEXT" NAME="N"

<BR>

<BR>

<BR>

CLAVE DE LA EDITORIAL:

<SELECT NAME="EDITORIALES">SANTILLANA

<OPTION VALUE="OPCION">----------------

<OPTION VALUE="EDITORIAL1">OMEGA

<OPTION VALUE="EDITORIAL2">DGTI

<OPTION VALUE="EDITORIAL3">CAMBRIDGE

<OPTION VALUE="EDITORIAL4">ANACIEMS

<BR>

<BR>

</SELECT>

<BR>

<BR>

NOMBRE DE LA EDITORIAL:

<INPUT TYPE "TEXT" NAME="N" <DIV style="BORDER-RIGHT:#848484

2px solid; BORDER-TOP:#848484 2px solid; HEIGHT: 25px; BACKGROUND-

COLOR:#848484"</div>

view-source:file:///C:/Users/lxmx7/Desktop/argentina%20firebird/aut.png

view-source:file:///C:/Users/lxmx7/Desktop/argentina%20firebird/index1.html

view-source:file:///C:/Users/lxmx7/Desktop/argentina%20firebird/Back.png

<BR>

<BR>

<BR>

<BR>

<INPUT TYPE="SUBMIT" NAME="CANCELAR" VALUE="CANCELAR">

<INPUT TYPE="SUBMIT" NAME="REGISTRAR" VALUE="REGISTRAR">

<BR>

<BR>

<BR>

<BR>

nbsp;

</TABLE>

</FORM>

Al terminar esta interfaz se guardo con el nombre autores.html

//Quinta interfaz Esta interfaz corresponde al registro de editorial, la interfaz se visualiza de la siguiente manera:

Para realizar esta interfaz se coloco el banner con el titulo biblioteca virtual y la línea divisoria con el siguiente codigo: <CENTER>

<Th> Clave de la Editorial: <INPUT TYPE "TEXT" NAME="N" <DIV style="BORDER-RIGHT:#848484 2px solid; BORDER-TOP:#848484 2px solid; HEIGHT: 25px; BACKGROUND-COLOR:#848484"</div> <br> <br> Nombre de la Editorial: <INPUT TYPE "TEXT" NAME="N"> <BR> <BR> <CENTER> <CENTER> <input type="submit" value="Cancelar"> <input type="submit" value="Aceptar"> </CENTER> </CENTER> </Th> </TABLE>

Al terminar Esta interfaz se guardo con el nombre editorial.html //Sexta interfaz

Esta interfaz se ve de la siguiente manera:

Para la realización de esta ultima interfaz se siguió el mismo procedimiento que las anteriores, primero se

coloco un fondo de pantalla después un banner con el titulo biblioteca virtual, y una línea divisoria de color rosa con el siguiente codigo: <BODY BACKGROUND="madera.jpg"> <BR> <CENTER> <embed src="http://www.criticallayouts.com/Generators/LED-Scroller/LCD1.swf" FlashVars="t=BIBLIOTECA VIRTUAL&msg=MySpace Generators&b=1" quality="high" bgcolor="#F5A9F2" width="450" height="60" name="LCDScroller" align="middle" allowScriptAccess="samedomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed> </CENTER> <HR SIZE=15 COLOR="#F5A9F2"><BR> Después se coloco la misma imagen del menú para identificar el registro de temáticas

El codigo que se utilizo para generar esta parte fue: <CENTER><TABLE> <TR> <TD> <IMG SRC="tem.png" WIDTH=100 HEIGHT=100> </TD> <TD> <FONT COLOR="#FFFFFF" FACE="Jokerman">Registro de tematica</FONT><BR> <CENTER> <A HREF="index1.html" BORDER=0><img src="Back.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=50;this.height=40;" width="50" height="40" /></A> </CENTER> </TD> </TR> </TABLE></CENTER> <BR>

Por ultimo para generar este cuadro amarillo con sus componentes TexBox y sus dos botones cancelar y aceptar se utilizo el siguiente codigo: <center><TABLE border="2" height="400px" bgcolor="#F4FA58" > </center> <Th> Clave de la Tematica: <INPUT TYPE "TEXT" NAME="N" <DIV style="BORDER-RIGHT:#848484 2px solid; BORDER-TOP:#848484 2px solid; HEIGHT: 25px; BACKGROUND-COLOR:#848484"</div> <br> <br> Nombre de la Tematica: <INPUT TYPE "TEXT" NAME="N"> <BR> <BR> <CENTER> <input type="submit" value="Cancelar"> <input type="submit" value="Aceptar"> </CENTER> </Th> </TABLE> Al terminarla se guardo con el nombre tematicas.html

//CONCLUSION

Se pudo explotar algunas de las características de HTML este es de nuestra

preferencia ya que existen otros software para diseñar interfaz de páginas web

como embarcadero entre otros, pero se nos hiso una manara mas padre en block

de notas y es de nuestro gusto ya que podemos modificarlo que queramos a

nuestra preferencia.

INTERFAZ GRAFICA CREADA EN HTML PARA UNA BD EN FIREBIRD

Documents

Transcript of INTERFAZ GRAFICA CREADA EN HTML PARA UNA BD EN FIREBIRD