Está en la página 1de 232

UNIVERSIDAD TECNICA DE MACHALA

INTRODUCCIN

La tecnologa hoy en da avanza a pasos agigantados, tanto que varias de las


instituciones educativas a nivel nacional cuentan con su Web Site para controlar
su gestin acadmica, el mismo que ofrece una mejor atencin y promocin
institucional, a medida que las instituciones educativas van evolucionando se
hace muy importante considerar el acceso a la informacin por parte de los
usuarios, docentes y estudiantes de la institucin a fin de ofrecer un servicio de
calidad.

Por lo mismo nuestro proyecto est basado en aplicaciones web para el Colegio
Nacional Mixto Dr. Jos Mara Velasco Ibarra del Cantn El Guabo, que le
permitir su promocin, proceso de matriculacin y beneficios, por el cual es
necesario su anlisis, en el cual descubrimos los problemas que tena la
institucin con respecto al manejo de sus datos y como se estaba promocionando
en el rea institucional, para lo cual planteamos una solucin a estos
inconvenientes, a travs de diferentes metodologas y diagramas, lograremos
conseguir las mejores opciones para el logro de nuestro objetivo, como es la
creacin del Web Site para el ingreso de estudiantes a esta institucin.

El Colegio Nacional Mixto Dr. Jos Mara Velasco Ibarra del Cantn El Guabo es
la institucin ms prestigiosa del Cantn, nos hemos visto en la necesidad de
crear un Web Site con sus respectivas aplicaciones web con una base de datos
ubicada en un servidor, para desde ah tener control de sus procesos de
matriculacin y acceso a la informacin requerida.

El Web Site cuenta con un diseo e interfaz amigable para los estudiantes y
personas en general, en donde encontraremos, imgenes, videos, material
didctico, su ubicacin geogrfica, as como tambin el acceso a los servicios que
presta esta prestigiosa institucin.

La aplicacin web servir como una herramienta indispensable para el usuario


que tiene a cargo el manejo del sistema de matriculacin, ser muy fcil de
manejarlo y contara con interfaz amigable que le facilitara al usuario el registro de
los datos que necesita para inscribir a los estudiantes en el plantel.

1
UNIVERSIDAD TECNICA DE MACHALA

OBJETIVOS

Objetivo General:

Analizar, disear e implementar un Web Site para controlar la Gestin Acadmica


del colegio nacional mixto Dr. Jos Mara Velasco Ibarra del cantn el Guabo,
aplicando la metodologa XP (Xtreme Programming).

Objetivo Especficos:

Utilizar nuevas herramientas para el diseo y desarrollo del Sitio Web.

Agilizar el ingreso de datos en el proceso de matriculacin

Realizar todos los formularios de registros donde nos permita ingresar los
datos primordiales de forma completa.

Planificar y organizar el ingreso de notas para el personal docente.

Implementar un proceso en el cual el estudiante tiene acceso a consultar


sus notas.

Realizar un proceso de descargas de material acadmico para que el


estudiante tenga un medio de investigacin.

2
UNIVERSIDAD TECNICA DE MACHALA

CAPITULO I: MARCO REFERENCIAL

JUSTIFICACIN

En la actualidad el avance de la tecnologa nos incita a tener un profundo


conocimiento de diseo, creacin de Web Sites y aplicaciones automatizadas
para controlar sus gestiones a nivel educativo para poder implementarlo
apropiadamente en las instituciones educativas a nivel mundial.

Los Web Sites y las aplicaciones web a nivel nacional forman parte de algunas
instituciones educativas que han puesto en consideracin las mismas para estar a
la par de los avances tecnolgicos que se implantan a nivel educativo.

Actualmente en nuestra provincia la mayora de las instituciones educativas no


cuentan con estos sitios y aplicaciones web para proporcionar una atencin y
promocin de acuerdo al avance tecnolgico.

La falta de conocimientos y asesoramiento sobre la utilizacin de estas


aplicaciones han creado un ambiente montono y aislado sin lograr que las
personas, docentes, estudiantes amplen sus conocimientos acerca del avance de
tecnologa y les permitan tener bases para poder desenvolverse en la actual y
futura sociedad donde las aplicaciones informticas abarcan cada da ms todos
los campos cotidianos de nuestras vidas.

El estudio de estas aplicaciones aportara con mayor informacin acerca de los


sitios web y sistemas innovadores que ayuden a dinamizar estos procesos de
navegacin y matriculacin de alumnos en las instituciones educativas que estn
ubicadas en el Cantn El Guabo.

A su vez nos permite incorporar nuevas herramientas tecnolgicas como recursos


para el diseo y elaboracin de los sitios web con sus respectivas aplicaciones
que contribuirn en el manejo automatizado de sus procesos al Colegio Nacional
Mixto Dr. Jos Mara Velasco Ibarra, el mismo que ampliaran nuestros
conocimientos en estos temas.

3
UNIVERSIDAD TECNICA DE MACHALA

Para el desarrollo de nuestra investigacin contamos con el acceso a informacin


tanto emprica como bibliogrfica. La Institucin donde realizamos el estudio nos
facilitara los datos necesarios, adems contamos con recursos humanos,
materiales y el financiamiento para el desarrollo del proyecto, as como la
disponibilidad de tiempo y el acceso a un asesoramiento profesional.

Por lo expuesto hemos considerado factible abordar este tema, del cual pedimos
su respectiva aprobacin.

4
UNIVERSIDAD TECNICA DE MACHALA

PROBLEMAS

PROBLEMA CENTRAL

Falta de informacin y promocin de la institucin a nivel educativo; y lentitud en


los procesos de agilizacin en la gestin acadmica.

PROBLEMAS ESPECFICOS

Carencia de un medio de promocin e informacin acerca de los servicios y


beneficios educativos que ofrece la institucin.

Demora en el ingreso de datos en el proceso de matriculacin de los


estudiantes.

En el proceso de matriculacin los datos son ingresados incompletos, en el


registro de los estudiantes y en el registro de matrcula.

Deficiencia en la organizacin e ingreso de notas de los estudiantes por


parte del personal docente.

Los estudiantes no tienen un medio accesible para consultar sus notas en


el momento que lo precise necesario.

No cuentan con material acadmico automatizado para que el estudiante


realice sus consultas.

5
UNIVERSIDAD TECNICA DE MACHALA

PREGUNTA CIENTFICA

Central

Cmo se proyectan y se dan a conocer a nivel institucional, adems como se


realiza los diferentes procesos para controlar la gestin acadmica en el Colegio
Nacional Mixto Dr. Jos Mara Velasco Ibarra, del Cantn El Guabo?

Particulares:

Estn capacitados los empleados de esta institucin para el manejo de un


sistema de matriculacin web, para registrar y poder obtener informacin
de los mismos de una manera rpida y eficaz?

Est la persona encargada del manejo de matriculas en capacidad de


adaptarse a un nuevo sistema o aplicacin a pesar que el mismo este
diseado con un interfaz muy amigable?

Tiene la comunidad guabea un medio por el cual pueda obtener


informacin del Colegio Nacional Mixto Dr. Jos Mara Velasco Ibarra sin
necesidad de acercarse al mismo para obtener informacin del nivel
educativo y servicios que ofrecen a la juventud de este Cantn?

Cmo analizan los usuarios la calidad de educacin que recibirn sus


hijos en este plantel educativo y al personal que labora en el mismo?

Est capacitada la mayora de la comunidad guabea para la navegacin


a travs de un portal web para obtener informacin acerca del desempeo
de sus hijos?

6
UNIVERSIDAD TECNICA DE MACHALA

ALCANCE

Dar a conocer a la ciudadana en general los servicios y beneficios a


nivel educativo que ofrece la institucin.

Facilidad y agilidad en el ingreso de datos en el proceso de


matriculacin.

Formularios con todos los campos necesarios y especficos para el


registro de datos.

El ingreso de notas de manera gil y eficaz por parte del personal


docente.

Autenticacin de estudiantes para consultar sus notas de cada materia.

Los estudiantes utilizaran el Web Site como un medio de investigacin.

Resultados

Portal web con un diseo amigable y de fcil manejo para los usuarios
y personal administrativo de la institucin.

Consultas de notas de los estudiantes mediante tablas de consultas


interactivas.

Elevar el nivel con respecto a la tecnologa y el nivel de imagen ante la


sociedad.

Sistema de matriculacin eficaz y ptimo para el usuario encargado del


mismo.

Crear un espacio sobre la consulta de noticias, notas y actividades de


la institucin.

7
UNIVERSIDAD TECNICA DE MACHALA

Proceso factible para el ingreso, modificacin o eliminacin de notas


por parte del personal docente.

CAPITULO II: MARCO TERICO

2.1 Antecedentes del Colegio

2.1.1 Misin

Formar integralmente al estudiante velasquino para asegurarle el ejercicio


pleno de su autocontrol interno y externo segn sus necesidades e intereses,
capaz de que sea beneficiado con la adquisicin de nuevas habilidades y
cualidades de aprendizaje.

2.1.2 Visin

Ser parte activa del proceso de transformacin social y coadyuvar al educado


velasquino a perfeccionar sus habilidades de percepcin, concentracin,
comprensin, memorizacin, y evocacin de conocimientos mltiples.

2.1.3 Paradigma

Nos centramos en administrar procesos de adquisicin de conocimientos e


informacin del educado velasquino, tanto en sus aspectos cognitivos como
en los de su conducta, asumiendo primordial inters en instituir destrezas
mltiples de comprensin a nivel superior desde sus propias cimentaciones
intelectuales.

Creamos disposicin de aprendizaje usando la motivacin estudiantil.

Concertamos conocer y comprender impulsando un aprendizaje


significativo.

Preparamos conciencias empleando ciencias.

8
UNIVERSIDAD TECNICA DE MACHALA

2.1.4 Objetivo

Instaurar la formacin estudiantil como el proceso sistemtico de prcticas y


actividades mentales destinados a estructurar la comprensin significativa del
conocimiento y su autorregulacin, pudiendo el velasquino influir con sus
pensamientos, creencias y valores en el colectivo social que lo recibe.

2.1.5 Historia del Colegio

El 31 de Marzo de 1970, por decreto Ministerial no. 1141, Se autoriza el


funcionamiento de un Colegio Mixto Municipal con el nombre de Jos Mara
Velasco Ibarra, en la cabecera Parroquial de l Guabo, perteneciente al
cantn Machala, de la Prov. De El Oro. Esta fundacin satur gran parte el
dficit educativo que exista en nuestro canton en ese tiempo parroquia), por
cuanto no haban planteles de educacin media hasta el ao que se implant
este centro con remuneracin municipal.

La iniciacin tubo impulso cuando rega nuestro pas el Dr. Jos Mara
Velasco Ibarra; cuyo Ministro de Educacin y Cultura era en ese entonces el
Dr. Augusto Solrzano Constantino, como subsecretario de educacin el
seor Augusto Luis Moscoso y siendo alcalde de la provincia el abogado
Luis Alberto Len Len

Al inicio del funcionamiento del colegio, era de carcter municipal, la


administracin del consejo se encargaba de realizar los pasos directos al
personal docente administrativo y de servicios que laboraban en ese entonces
desconocindose el presupuesto Asignado al plantel durante los tres
primeros aos que se mantuvo con esa categora. Cabe resaltar que la ilustre
Municipalidad de Machala cancelaba los haberes de los maestros.

.Hasta que en el ao lectivo 1973-1974 mediante decreto supremo, No. 887,


en articulo 2do. se nacionalizo y la vida econmica tuvo su giro de
independencia contando con un presupuesto de 502.000 sucres y a la

9
UNIVERSIDAD TECNICA DE MACHALA

medida que han pasado los aos se han ido incrementado cada vez mas. La
iniciacin de las labores funcionales tiene como marco las instalaciones de la
Escuela de Nios General Manuel Serrano, en ese entonces ubicados en
las calles 9 de Octubre y Eloy Alfaro, donde funciono por el lapso de un ao,
para luego continuar en la casa Municipal Parroquial, en donde permaneci
por el lapso de 6 aos, hasta la fecha que emite el decreto de giro poltico de
nuestro lugar natal , la cantonizacin de El Guabo, luego de este
acontecimiento el establecimiento se traslado a los edificios de la escuela
Zoila Ugarte de Landivar en jornada vespertina, finalmente se traslado a su
propio local ubicado en la Va Panamericana Sur, en el desvi a Pasaje, local
que est ha servicio de la comunidad de El Guabo y de la provincia desde el
mes de abril de 1984.

El plantel inicia sus labores en el ao de 1970-1971 contando con un paralelo


de ciclo bsico y con las opciones Prcticas de Agropecuarias Comercio y
Administracin, Y Manualidades femeninas y con el siguiente nmero de
alumnos 76

En primer lugar como Rector fundador fue el Dr. Vinicio Sarmiento Alvarado
desde el 12 de noviembre de 1970, radicado en esta ciudad por largos aos,
como secretaria titular fue nombrada la Srta. Miryam Snchez y como auxiliar
la Srta. Dolly Serrano Jcome. Los primeros maestros fueron: Sr. Sal Paz
mio, Sra. Mercede Orellana, Sr. Mauro Muoz, Sr. Volter Medina, Sra. Julia
Jaramillo, Sr. Rodolfo Aguirre. Alumnos matriculados en el ao 1.971-1972
103 divididos en dos paralelos uno para primer curso y otro para segundo.
En este ao aumenta dos profesores y un conserje el Sr. Miguel Mesones,
1972-1973 fueron matriculados 165 alumnos. En este ao los seores
profesores: Voltaire Medina Y Mauro Muoz solicitaron el cambio, ingresan
nuevos profesores: Marlene Serrano de Vogueley, Julin Reyes, sr, Hernn
Rosales Sra. Rosario Palacios y como conserje el Sr. Rmulo Lojas.

Despus de haber transcurrido 3 aos de labores el Dr. Vinicio Sarmiento


Alvarado, personal docente, padres de familia y el pueblo en unin de
esfuerzo, consiguieron la nacionalizacin del plantel. La misma que se emiti
con fecha 30 de julio de 1973 en Decreto Ministerial No. 887, en su artculo

10
UNIVERSIDAD TECNICA DE MACHALA

segundo firmado por el presidente de la repblica, Gral. Guillermo Rodrguez


Lara, CRL De E.M., Guillermo Duran Arcentales Ministro de Finanzas. Este
decret Supremo fue publicado en el Registro Oficial Numero 365 del da
Mircoles 8 de Agosto de 1973.1973- 1974El Dr. Vinicio Sarmiento rector del
colegio Dr. Jos Mara Velasco Ibarra, formula una solicitud al Ministerio de
Educacin y Cultura para que autorice el funcionamiento del primer curso del
ciclo diversificado de Bachillerato en Humanidades Modernas en la
Modalidad de Ciencias Fisico-Matematicos-Quimicos Biolgica lo cual fue
concedido en el mencionado ao lectivo,. Esta solicitud fue aprobada con
resolucin ministerial No.686 del 1 de Agosto de 1.973 mediante oficio No.
228224. En esta fecha el colegio comienza a laborar con 179 estudiantes
con un presupuesto de 502.000 sucres.

En este ao el nmero del personal es de 12. Ingresan. Sr. Rodolfo Aguirre,


sr, Manuel Bentez, Germn Jcome.

1974-1975 funciona el segundo ciclo del diversificado por resolucin 908 el


25 de marzo de 1974 firmada por el ministro de Educacin Publica el crol.
Guillermo Duran Arcentales. Ingreso de nuevo personal docentes. Cesar
Castro, Dr. Ivn Crespo, Sr. Charbel Fadul, Holger Martnez. Sr. Antonio
Moran, Sr. Nelson Moncayo, Julin Reyes Cavero, Luis Lamber Sra. ngela
Quimi, Sr. Herman Rsales., ser. Marco Montalvo.

1.975-1976. Entra en funcionamiento el tercer curso ciclo diversificado por


resolucin n. 1087 del 15 de Abril de 1975, en este ao el colegio Dr., Jos
Mara Velasco Ibarra da al pueblo su primera promocin de bachilleres,
muchos de ellos son destacados profesionales

El personal docente y administrativo que ayuda al desenvolvimiento del


colegio en este ao lectivo es: Rector Dr. Vinicio Alvarado Secretaria Srta.
Nelly Verdi Barros, colector Sr. Eduardo Serrano. Profesores que integran
son: Sr. Cesar Castro A. Dr. Ivn Crespo L. Sr. Charbel Fadul, Sr. Holger
Martnez, Sr. Antonio Moran, Sr. Nelson Moncay, Sr. Julin Reyes Cavero,
Srta. Julia Pompeya, Sr. Luis Lamber B. Sra. ngela Quimi, Sr. Hernn
Rosales R. Sr. Marlene serrano, Sr. Marco Montalvo.

11
UNIVERSIDAD TECNICA DE MACHALA

Alumnos de la primera promocin: Aguilar Quezada Edgar Vicente, Alaa


Jerves Douglas Asisclo, Armijos Jara Luz Mara.

Beltrn Romero Jos Vicente, Capa Faras Gabriel Agustn, Espinoza Armijos
Florencio Ilvano, Gmez Izurieta Helen Elaine, Guerra Izurieta Carlos
Gonzalo, Guerra Izurieta Marco Gabriel, izquierdo Mesones Darwin Colon,
Izurieta Jan Norma Irlanda, Orellana lvarez Guillermo Santo, Orellana
Quevedo ngela Mara, Ortiz Prez alba Marlene, Ortiz Prez Lilia Piedad,
Solano Solano Luis Antonio., Verdi Barros Rubn Benjamn, Zamora Ruiz
Rosa Dalila.

1.976-1977 aumenta el nmero, profesores Manuel Busto, Holger Martnez,


Srta. Hilda Benavides, Sr. Efrn Farz J., Sra. Carmen Guerrero. Su segunda
Promocin en Humanidades Modernas Fsico-Matemticos, Qumico-
Biolgicas fueron 11 estudiantes.

En este ao el colegio tiene sus smbolos patrios creados por la iniciativa del
Dr. Vinicio Sarmiento la bandera y el escudo.

1977-1.978 lleva 8 aos de labores cuenta con 230 estudiantes, ingresan


nuevos maestros: Sra. Martha Garca, Ing. Anecio Martnez, Sra. Nelly
Rodrguez, Sra. Mara Eugenia Pasos. Sr. Ren Rosales, Sra., Carmen
Guerrero tiene su tercera promocin es de 10 estudiantes.

En este ao el Dr. Vinicio Sarmiento, el 15 de Agosto de 1977 se celebra una


escritura pblica de compra-venta de un predio de 32.209,62 m 2, para la
construccin del edificio propio del plantel. Este predio denominado la
Chacra, lo adquiri el Ministerio de Educacin, siendo representante legal
el Sr. Miguel Calle Delgado, en su calidad de de Director Provincial de
Educacin de El Oro al Sr. Francisco Serrano Gmez, por el valor de
250.000 sucres, y cuyos linderos particulares son los siguiente: Por un
costado, con herederos de Bolvar Serrano Murillo, por otro costado,
carretero que conduce de El Guabo a Pasaje, por otro costado, con cauce
seco del ro Jubones, con varios propietarios de solares, calle al medio que
separa del Barrio Tnte. Ledesma, y por otro costado, con solar vendido a los
conyugues seor Timoteo Tenecota y seora Rosa Elicia Quichimbo Este

12
UNIVERSIDAD TECNICA DE MACHALA

ao el Dr. Vinicio Sarmiento A. renuncia a sus funciones de rector titular el 9


de septiembre de 1977, luego de haber tenido 8 aos de servicio a la
comunidad educativa.

1.978-1.979 se matricularon 256 estudiantes. Se presento la vacante del


rectorado y fue ocupada por el Ing. Juan Carlos Loayza Snchez designado
por la direccin de estudio el 13 de junio de 1.978. Tomo posesin el 14 de
junio del mismo ao y quedo integrado de la siguiente manera: Rector Ing.
Juan Carlos Loayza S., Secretaria Nelly Verdi B., Auxiliares Auxiliadora de
Morn, Vicente Beltrn, colector Eduardo Serrano Aguilar.

Nuevos maestros: que ingresan: Sr. Rubn Verdi, Sr. Tefilo Chamba, Sra.
Elva Verdi, Sr. Hernn Valverde, Sr. Mauro Valverde, Sr. Juan Reyes, .Sr.
Sra. Elena Mora.

El Ing. Carlos Loayza Snchez en unin con el Concejo Directivo Logra que
la direccin nacional de construcciones escolares DINACE efecten visitas
con el objetivo de realizar los planos previos a la construccin de las oficinas
Administrativas, el bloque para los laboratorios y los bloques de las aulas y
talleres., Se grada de 11 estudiantes en Humanidades modernas.

1.979-1.980 335 estudiante, nuevos maestros. a., Lcda. Teresa Samaniego.,


Lic. Luis Barreto, Sra. Teresa Lara, Cumanda Tinoco, Su Promocin es de 8
alumnos: 7 varones y nia Quevedo Vivanco Antonieta Luz de Ftima.

1.980-1981 promocin se incorporan 17 estudiantes. El 6 de Junio de 1980


Ingresa la Lcda. Carmen Elena Gallego de Montero como Orientadora
Vocacional.

1.981-1982 promociones 25 estudiantes. En este ao presenta la renuncia


el Rector el Ing. Juan Carlos Loayza Snchez, en el mismo ao el 29 de
noviembre se posesiona el Dr. Daniel Napolen Solano como rector del
plantel en su administracin se consigui el cerramiento frontal del plantel.

1.983-1984 Humanidades Modernas se divide en: Fsico- Matemtico


promocin fue de 6 alumnos, y qumicos biolgicos 21 alumnos.

13
UNIVERSIDAD TECNICA DE MACHALA

En el mes de Abril de 1984, el colegio pasa a funcionar en su propio local.

1984-1985 promociones fueron de 25 en QB. y 6 en FM. En este ao se


incrementa una nueva especialidad tcnica de secretariado en espaol.

1.985-1986 promociones Q.B. 18 FM. 10.

1986-1987. Q B. 15. F.M. 10. Secretariado en espaol 9 alumnos.

Se oficializo el Himno al colegio mediante una sesin solemne en el sindicato


de choferes profesionales del cantn el guabo el 12 de enero de 1987, la
letra fue escrita por el Lcdo. Eladio Montero Campo verde y la msica por
Patricio montero que fue modificada por el conservatorio Nacional de msica
Salvador Bustamante Celi de Loja.

1.88-1989: promocin Q.B. 12 F.M. 8, S.E. 6. En las festividades de su


decimotercero aniversario de fundacin, que se celebro en sesin solemne el
26 de julio de 1988, se recibi la donacin de los laboratorios de Fsica y
Qumica su inauguracin estuvo a cargo de funcionarios del ministerio de
Educacin y cultura. El 8 de diciembre de 1988 renuncia a su cargo de
rector. Se posesiona la Sra. Marlene Esperanza Molina de Vogeley.

1989-1.990: Q.B. 14. F.M. 16 S.e. 5. La seora Marlene en su


administracin Consigue la entrega de los planos para la construccin de la
biblioteca del Plantel, con fecha 22 de diciembre de 1989 por parte de la
familia Serrano Aguilar, en esta misma fecha se efectu el desvelizamiento
del retrato del patrono del colegio, donado por el Sr. Dr. Pedro Velasco
Espinoza.. 1.990-1.991 Promocin Q.B. 15 F.M.- 8 Sec. 11 En este ao por
razones personales presento la renuncia de cargo de rectora el 10 de mayo
de 1991. Toma posesin el Lcdo. Vctor Barsallo Paredes, el 16 de
diciembre de 1991.

Promocin Q.B. 17, S.E. 19., 1992-1993- promocin Q.B. 17. F.M. 11., S.E.
19., 1993-1994 promociones Q.B. 13 F.M. 1. S.E. 18., 1994-1995.- promocin
Q.B. 14, FM 12 S.E. 20.- En su administracin logro la construccin de
algunos bloques de aulas, cerramientos de linderos, en cementado del
ingreso exterior del plantel, culmino con la construccin del saln de actos

14
UNIVERSIDAD TECNICA DE MACHALA

del plantel, la adecuacin del laboratorio de Computo. En este ao se


incrementa la especialidad de computacin con resolucin no. 1118 del 23 de
Diciembre de 1.994. En 1994-1995 XXV el colegio cumple su aniversario sus
bodas de plata., El personal que labora es el siguiente: Rector Vctor
Lisandro Barsallo p. Vicerrector Sr. Dimas Julia Reyes C. Inspector General
Lcdo. Efrn Farz J. y un mdico, 1.995-1996 promocin Q.B.N. 15. F.M.
10 S.E. 15 1996- promocin Q.B. 16 F.M. 7. S.E. 14. 1997-1998
promocin Q.B. 23., Fm: 5. S.E. 7 Computacin 28. En este periodo se
increment las especialidades de Contabilidad y secretariado en espaol
computarizado.- 1998-1999 promocin Q.B. 12.-F.M. 7 S.E. 24. C. 27 - 1999-
2000 promocin Q.B.: 8, SEC. 19 C. 29 Contabilidad 31. El Lcdo. Vctor
Barsallo Se retiro el 25 de enero del 2000- Asume las funciones de rector
encargado Lcdo. Dimas Julin Reyes C. hasta el 19 de marzo del 2001. .-
2000-2001 El colegio cumple sus bodas de perlas. Est integrado de la
siguiente manera Rector encargado Dimas Julin Reyes C. Vicerrector
Luis Calle de la Cuesta, Inspector General Efrn Farz J. El personal
administrativo est compuesto por 11, personal docente y de servicio 49.-
Promociones Q.B. 9 S.E. 8. Contabilidad 20 Computacin 26.- EL 20 de
marzo del 2001, se posesiona como Rector el Lic. Hctor Fermn Pozo
Guerra, actual rector del plantel. No. De estudiantes 696.- Promociones
2001-2002 Q.B. 12. Contabilidad 18 S.E.C. 18 Computacin 31.- En este
ao lectivo hay que resaltar la obras realizada por un grupo de estudiantes
liderada por la Srta. Edith Yomayra Farz Filian, Figueroa Cedillo Alberto
Javier, Blacio Juana Alexandra, Lalvay Morocho Elvia , Prez Bermdez
Gina, Ramn Orellana Jorge Espinosa Palomino Danilo Rafael y otros ,
como objetivo y amor a su institucin se propusieron a realizar la obra de
un parque con un altar cvico y al mismo que lo denominaron : Parque
Cvico Estudiantil Dr. Jos Mara Velasco Ibarra. Para su institucin y esta
obra la lograron gracias a la colaboracin del presidente central de padres de
familia Lcdo. Ulvio Ortega Erreyes de la Brigada de artillera Batalln Bolvar y
de toda la comunidad , fue bendecida e inaugurada esta obra muy
importante para los estudiantes y el pueblo en general a cargo del coronel de
la brigada de Estado Mayor Gustavo Reyes Lara en el que se realizo una

15
UNIVERSIDAD TECNICA DE MACHALA

sesin muy especial el da 23 de de Febrero de 2002 organizada por los


mismos estudiantes coordinada por la Lcda. Fabiola Farz J. y Lcdo. Nelson
Zhigue, se conto con la presencia de todas las personas que aportaron con la
obra en este mismo da tambin se inauguro en forma oficial la biblioteca del
Plantel denominada Guillermo Serrano Aguilar. Y fue realizada por el Ing.
Jorge Alex Serrano, lo cual aos anteriores no haba tenido la oportunidad
de ser inaugurada

2002-2010 se han equipado casi todos los departamentos administrativos con


equipo de computacin, el 19 de abril del 2005 mediante resolucin 1515
autorizan al plantel la aplicacin de proyectos de innovacin curricular
Reforma al bachillerato general en ciencias y bachillerato tcnico en gestin
administrativa y contable, especializaciones: contabilidad y administracin; y
organizacin y gestin de la secretaria; y bachillerato tcnico en informtica,
especializacin aplicaciones informticas, jornada matutina a partir del ao
lectivo 2005 2006 con el siguiente reordenamiento. A.- reordenamiento
administrativo del octavo al decimo ao de educacin bsica =
quimestralizacin. B.- reordenamiento curricular del octavo al decimo ao de
educacin bsica.

2006 -2007 se realizo por parte del comit central de padres de familia, la
readecuacin de una loza que se encontraba en mal estado y la construccin
de 2 aulas en la parte superior.

Las profesoras coordinadoras de educacin ambiental Licda. Fabiola Frez


Jimnez y Lcda. Diana Quezada Zhuma, en el ao 2006-2007, desarrollaron
un arduo trabajo como fue adecuacin de las jardineras en todo el plantel,
murales, decoracin del parque cvico con baldosas , se colocaron
protectores,, parques ambientales, jardineras y pavimentacin de la parte
izquierda del ciclo bsico y del rea derecha de ingreso al plantel, con lo que
contribuyeron para una mejor presentacin y ornato del plantel.

2007-2008 la direccin nacional de servicios educativos (DINSE) hizo la


formal entrega recepcin de las seis aulas que han sido donadas a nuestro
colegio, las mismas que fueron bendecidas e inauguradas el 30 de julio del

16
UNIVERSIDAD TECNICA DE MACHALA

2007, con motivo de celebrar nuestro plantel su trigsimo sptimo aniversario


de creacin.
2008-2009 las autoridades del plantel instalan el servicio de internet, s hizo
la construccin de cerramiento de 210 mts., la construccin del portal principal
del plantel y la puerta metlica de ingreso.
El DINSE construyo el bloque de 9 aulas, y remodelo las dems existentes,
con la resolucin DEO-DPE 047-2010 de fecha 8 de enero resuelve
AMPLIAR , el funcionamiento del primer curso comn, segundo y tercer curso
de bachillerato general en ciencias, segundo y tercer curso bachillerato
tcnico en comercio y administracin, especializaciones: organizacin y
gestin de la secretaria, aplicaciones informticas y , contabilidad y
administracin.
El nmero de profesores de este ao son 38 titulares y 24 contratados y 14
personal administrativo y de servicio.
No. De estudiantes de este ao 1183 alumnos matriculados; bachillerato 525
y en el ciclo bsico 658.
En la actualidad se participa en los programas de alfabetizacin y educacin
ambiental.
En este ao ha causado enorme tristeza al conocer que la Dr. Carmen
Gallego de Montero, orientadora VOCACIONAL DEL plantel ha decidido
retirarse de la vida activa por motivos personales y acogerse a la jubilacin,
este vaco que deja ser muy difcil reemplazarlo dada a su altsima calidad
profesional esperamos que ella tenga xito en su vida privada.
Los cuarenta aos de vida de este plantel, ha sido trascendental en la historia
del cantn El Guabo, este manantial del saber, sin duda ha sido factor
potencial en la evolucin de las pequeas y grandes sociedades de este
girn de la Patria, como educadores que somos y que nos debemos a esta
gloriosa institucin velas quina, hacemos votos para que en el devenir de
los tiempos logres xito tras xitos en su marcha triunfal hacia nortes
luminosos.

Loor al Colegio Velasco Ibarra en su bodas de Rub., y que Dios y Patria


Lo Bendiga.

17
UNIVERSIDAD TECNICA DE MACHALA

2.1.6 Organigrama

18
UNIVERSIDAD TECNICA DE MACHALA

2.1.7 Ubicacin

Va Panamericana Sur, en el desvi a Pasaje

2.1.8 Quienes somos

El Colegio Jos Mara Velasco Ibarra es una institucin publica de educacin


formal, aprobado por el Ministerio de Educacin Nacional.

En bsqueda de contribuir con una educacin humanstica de jvenes, acorde


con las necesidades del mundo actual, basa su actividad en los principios de la
Pedagoga de la Educacin.

2.2 Antecedentes Conceptuales.

2.2.1 Sitio Web

Un portal de Internet es un sitio web cuyo objetivo es ofrecer al usuario, de forma


fcil e integrada, el acceso a una serie de recursos y de servicios, entre los que
suelen encontrarse buscadores, foros, documentos, aplicaciones, compra
electrnica, etc. Principalmente estn dirigidos a resolver necesidades especficas
de un grupo de personas o de acceso a la informacin y servicios de una
institucin pblica o privada.

2.2.2 Funciones y objetivos

El trmino portal tiene como significado puerta grande, y precisamente su nombre


hace referencia a su funcin u objetivo: es, por lo general, el punto de partida de
un usuario que desea entrar y realizar bsquedas en la web u obtener
informacin importante de l. Se puede decir que un portal ofrece servicios
para la navegacin en el internet, logrando incrementar la intensidad de trfico en
el mismo.

Un portal de Internet puede ser un Centro de contenido intermediario entre


compradores y vendedores de rubros especficos, estos se pueden complementar
con herramientas que le ayuden a identificar empresas que satisfagan
necesidades de un comprador, visualizar anuncios de vendedores, ofrecer
cotizaciones, brindar correos electrnicos, motores de bsqueda, etc.

19
UNIVERSIDAD TECNICA DE MACHALA

El portal es considerado un intermediario de informacin que tiene como fuente de


ingreso la publicidad de empresas que ah se anuncian.

2.2.3 Servicios adicionales

Un portal opcionalmente podra ofrecer:

Servicios de bsqueda que incluye mecanismos de bsqueda, directorios y


pginas amarillas para localizar negocios o servicios.

Contenidos. Es decir, informacin de varios temas como noticias, deportes,


pronsticos de clima, listas de eventos locales, mapas, opciones de
entretenimiento, juegos, ligas a estaciones de radio y a otros sitios con
contenido especial en ciertas reas de inters como coches, viajes y salud
entre otros.

Facilidades de comercializacin: anuncios clasificados para trabajos,


coches y casas; subastas, pequeos agregados de vendedores y ligas a
otros sitios que tambin se dedican a la venta.

2.2.4 Modalidades

Existen tres modalidades de portales:

1. Portales horizontales, tambin llamados portales masivos o de propsito


general, se dirigen a una audiencia amplia, tratando de llegar a toda la
gente con muchas cosas. Como ejemplo de portales de esta categora
estn Terra, AOL, AltaVista, UOL, Lycos,Yahoo,MSN.

2. Portales verticales, se dirigen a usuarios para ofrecer contenido dentro de


un tema especfico como puede ser un portal de msica, empleo,
inmobiliario, un portal de finanzas personales, arte o de deportes.

3. Portales diagonales: se trata de una mezcla entre el portal horizontal y el


vertical. Se tratara de portales que utilizan redes sociales o aplicaciones
generalistas como Facebook, Linkd, Flickr o YouTube complementados
con contenidos y/o utilidades dirigidas a un pblico muy concreto.

20
UNIVERSIDAD TECNICA DE MACHALA

2.3 INTRODUCCIN A LAS APLICACIONES WEB

2.3.1 Introduccin a Internet

Internet, la red de redes, nace a mediados de la dcada de los setenta, bajo los
auspicios de DARPA, la Agencia de Proyectos Avanzados para la Defensa de
Estados Unidos. DARPA inici un programa de investigacin de tcnicas y
tecnologas para unir diversas redes de conmutacin de paquetes, permitiendo
as a los ordenadores conectados a estas redes comunicarse entre s de forma
fcil y transparente.

De estos proyectos naci un protocolo de comunicaciones de datos, IP o Internet


Protocol, que permita a ordenadores diversos comunicarse a travs de una red,
Internet, formada por la interconexin de diversas redes.

A mediados de los ochenta la Fundacin Nacional para la Ciencia


norteamericana, la NSF, cre una red, la NSFNET, que se convirti en elbackbone
(el troncal) de Internet junto con otras redes similares creadas por la NASA
(NSINet) y el U.S. DoE (Department of Energy) con la ESNET. En Europa, la
mayora de pases disponan debackbones nacionales (NORDUNET, RedIRIS,
SWITCH, etc.) y de una serie de iniciativas paneuropeas (EARN y RARE). En
esta poca aparecen los primeros proveedores de acceso a Internet privados que
ofrecen acceso pagado a Internet.

A partir de esta poca, gracias entre otras cosas a la amplia disponibilidad de


implementaciones de las u i t e de protocolos TCP/IP (formada por todos los
protocolos de Internet y no slo por TCP e IP), algunas de las cuales eran ya de
cdigo libre, Internet empez lo que posteriormente se convertira en una de sus
caractersticas fundamentales, un ritmo de crecimiento exponencial, hasta que a
mediados del 2002 empieza a descender ligeramente el ritmo de crecimiento.

A mediados de los noventa se inici el boom de Internet. En esa poca el nmero


de proveedores de acceso privado se dispar, permitiendo a millones de personas
acceder a Internet, que a partir de ese momento ya se empez a conocer como la
Red, desbancado a las dems redes de comunicacin existentes (Compuserve,
FidoNet/BBS, etc.). El punto de inflexin vino marcado por la aparicin de

21
UNIVERSIDAD TECNICA DE MACHALA

implementaciones de TCP/IP gratuitas (incluso de implementaciones que


formaban parte del sistema operativo) as como por la popularizacin y
abaratamiento de medios de acceso cada vez ms rpidos (mdems de mayor
velocidad, RDSI, ADSL, cable, satlite). El efecto de todos estos cambios fue de
bola de nieve: a medida que se conectaban ms usuarios, los costes se
reducan, aparecan ms pro- veedores e Internet se haca ms atractivo y
econmico, con lo que se conectaban ms usuarios, etc.

En estos momentos disponer de una direccin de correo electrnico, de acceso a


la web, etc., ha dejado de ser una novedad para convertirse en algo normal en
muchos pases del mundo. Por eso las empresas, instituciones, administraciones
y dems estn migrando rpidamente todos sus servicios, aplicaciones, tiendas,
etc., a un entorno web que permita a sus clientes y usuarios acceder a todo ello
por Internet. A pesar del ligero descenso experimentado en el ritmo de
crecimiento, Internet est destinado a convertirse en una suerte de servicio
universal de comunicaciones, permitiendo una comunicacin universal.

2.3.2 La WWW como servicio de Internet

La WWW (World Wide Web) o, de forma ms coloquial, la web, se ha convertido,


junto con el correo electrnico, en el principal caballo de batalla de Internet. sta
ha dejado de ser una inmensa biblioteca de pginas estticas para convertirse
en un servicio que permite acceder a multitud de prestaciones y funciones, as
como a infinidad de servicios, programas, tiendas, etc.

2.3.3 Breve historia de la WWW

En 1989, mientras trabajaba en el CERN (Centro Europeo de Investigacin


Nuclear), Tim Berners-Lee empez a disear un sistema para hacer accesible
fcilmente la informacin del CERN. Dicho sistema empleaba el hipertexto para
estructurar una red de enlaces en- tre los documentos. Una vez obtenida la
aprobacin para continuar el proyecto, naci el primer navegador web, llamado
World- WideWeb (sin espacios).

En 1992 el sistema ya se haba extendido fuera del CERN. El nmero de


servidores estables haba aumentado, alcanzando la sorprendente cifra de

22
UNIVERSIDAD TECNICA DE MACHALA

veintisis. A partir de este punto, el crecimiento es espectacular. En 1993 la web


ya era merecedora de un espacio en el New York Times.

ste es el ao del lanzamiento de Mosaic, un navegador para X-Window/Unx que


con el tiempo se convertira en Netscape y que fue un factor clave de
popularizacin de la web. En 1994 se fund el WWW Consortium, que se
convertira en el motor de desarrollo de los estndares predominantes en la web
(http://www.w3c.org). A partir de ese momento, el crecimiento ya fue constante,
convirtindose hacia finales de los noventa en el servicio insignia de Internet y
dando lugar al crecimiento imparable de los servicios en lnea que estamos
experimentando actualmente.

2.3.4 Fundamentos de la web

El xito espectacular de la web se basa en dos puntales fundamentales: el


protocolo HTTP y el lenguaje HTML. Uno permite una implementacin simple y
sencilla de un sistema de comunicaciones que nos permite enviar cualquier tipo
de ficheros de una forma fcil, simplificando el funcionamiento del servidor y
permitiendo que servidores poco potentes atiendan miles de peticiones y
reduzcan los costes de despliegue. El otro nos proporciona un mecanismo de
composicin de pginas enlazadas simples y fciles, altamente eficiente y de uso
muy simple.

2.3.5 El protocolo HTTP

El protocolo HTTP (hypertext tranfer protocol) es el protocolo base de la WWW.


Se trata de un protocolo simple, orientado a conexin y sin estado. La razn de
que est orientado a conexin es que emplea

para su funcionamiento un protocolo de comunicaciones (TCP,transport control


protocol) de modo conectado, un protocolo que establece un canal de
comunicaciones de extremo a extremo (entre el cliente y el servidor) por el que
pasa el flujo de bytes que constituyen los datos que hay que transferir, en
contraposicin a los protocolos de datagrama o no orientados a conexin que
dividen los datos en pequeos paquetes (datagramas) y los envan, pudiendo
llegar por vas diferentes del servidor al cliente. El protocolo no mantiene estado,

23
UNIVERSIDAD TECNICA DE MACHALA

es decir, cada transferencia de datos es una conexin independiente de la


anterior, sin relacin alguna entre ellas, hasta el punto de que para transferir una
pgina web tenemos que enviar el cdigo HTML del texto, as como las imgenes
que la componen, pues en la especificacin inicial de HTTP, la 1.0, se abran y
usaban tantas conexiones como componentes tena la pgina, transfirindose por
cada conexin un componente (el texto de la pgina o cada una de las imgenes).

Existe una variante de HTTP llamada HTTPS (S pors e c u r e) que utiliza el


protocolo de seguridad SSL (secure socket layer) para cifrar y autenticar el trfico
entre cliente y servidor, siendo sta muy usada por los servidores web de
comercio electrnico, as como por aquellos que contienen informacin personal o
confidencial.

De manera esquemtica, el funcionamiento de HTTP es el siguiente: el cliente


establece una conexin TCP hacia el servidor, hacia el puerto HTTP (o el indicado
en la direccin de conexin), enva un comando HTTP de peticin de un recurso
(junto con algunas cabeceras informativas) y por la misma conexin el servidor
responde con los datos solicitados y con algunas cabeceras informativas.

El protocolo define adems cmo codificar el paso de parmetros entre pginas,


el tunelizar las conexiones (para sistemas defirewall), define la existencia de
servidores intermedios de cache, etc.

Las directivas de peticin de informacin que define HTTP 1.1 (la versin
considerada estable y al uso) son:

24
UNIVERSIDAD TECNICA DE MACHALA

GET Peticin de recurso.

POST Peticin de recurso pasando parmetros.


HEAD Peticin de datos sobre recurso.
PUT Creacin o envo de recurso.
DELETE Eliminacin de recurso.

TRACE Devuelve al origen la peticin tal como se ha recibido en el receptor, para


depurar errores.

OPTIONS Sirve para comprobar las capacidades del servidor.

CONNECT Reservado para uso en servidores intermedios capaces de funcionar


como tneles.

Detallaremos a continuacin algunos de estos comandos, ya que su comprensin


es fundamental para el desarrollo de aplicaciones web.

Cabe destacar que todos los recursos que sean servidos mediante HTTP debern
ser referenciados mediante una URL (universal resource locators).

Peticiones en HTTP: GET y POST

Las peticiones en HTTP pueden realizarse usando dos mtodos. El mtodo GET,
en caso de enviar parmetros junto a la peticin, las enviara codificadas en la
URL. Por su parte, el mtodo POST, en caso de enviarlos, lo hara como parte del
cuerpo de la peticin.

Una peticin GET sigue el siguiente formato:

GET /index.html HTTP/1.1


Host: www.ejemplo.com
User-Agent: Mozilla/4.5 [en]
Accept: image/gif, image/jpeg, text/html
Accept-language: en
Accept-Charset: iso-8859-1

Podemos ver que est formada por:

25
UNIVERSIDAD TECNICA DE MACHALA

1. Lnea de peticin: contiene el recurso solicitado.

2. Cabecera de peticin: contiene informacin adicional sobre el cliente.

3. Cuerpo de peticin: en las peticiones de tipo POST, y otras, contiene


informacin adicional.

Lnea de peticin

La lnea de peticin est formada por los siguientes elementos:

1. Mtodo: nombre del mtodo de HTTP llamado (GET, POST, etc.).

2. Identificador de recurso: URL (uniform resource locator) del recurso solicitado.

3. Versin de protocolo: versin del protocolo solicitada para la respuesta.

Cabecera de peticin

Contiene informacin adicional que puede ayudar al servidor (o a los servidores


intermedios, los proxies y caches) a procesar adecuadamente la peticin.

La informacin se proporciona en forma de:

Identificador: valor

De estos identificadores, los ms conocidos e importantes son:

Host: nombre del servidor solicitado.

User-Agent: nombre del navegador o programa usado para acceder al recurso.

Accept: algunos formatos de texto e imagen aceptados por el cliente.

Accept-Language: idiomas soportados (preferidos) por el cliente, til para


personalizar la respuesta automticamente.

Parmetros de peticin

Una peticin HTTP puede tambin contener parmetros, como res- puesta, por
ejemplo, a un formulario de registro, a una seleccin de producto en una tienda
electrnica, etc. Estos parmetros pueden pasarse de dos formas:

26
UNIVERSIDAD TECNICA DE MACHALA

Como parte de la cadena de peticin, codificados como parte de la URL.

Como datos extra a la peticin.

Para codificar los parmetros como parte de la URL, stos se aaden a la URL
detrs del nombre del recurso, separados de ste por un carcter?. Los diferentes
parmetros se separan entre s por el carcter&. Los espacios se sustituyen por +.
Por ltimo, los caracteres especiales (los mencionados antes de&,+ y?, as como
los caracteres no imprimibles, etc.) se representan con %xx, donde xx representa
al cdigo ASCII en hexadecimal del carcter.

Por ejemplo:

Que en la peticin HTTP quedara:

GET /indice.jsp?nombre=Perico+Palotes&OK=1 HTTP/1.0

Host: www.ejemplo.com
User-Agent: Mozilla/4.5 [en]
Accept: image/gif, image/jpeg, text/html
Accept-language: en
Accept-Charset: iso-8859-1

Para pasar los parmetros como datos extra de la peticin, stos se envan al
servidor como cuerpo de mensaje en la peticin.

Por ejemplo, la peticin anterior quedara:

POST /indice.jsp HTTP/1.0

Host: www.ejemplo.com

User-Agent: Mozilla/4.5 [en]

Accept: image/gif, image/jpeg, text/html

Accept-language: en

Accept-Charset: iso-8859-1

nombre=Perico+Palotes&OK=1

27
UNIVERSIDAD TECNICA DE MACHALA

Cabe destacar que para pasar los parmetros como cuerpo de la peticin, sta
debe realizarse como POST y no como GET, aunque una peticin POST tambin
puede llevar parmetros en la lnea de peticin. Los parmetros pasados como
cuerpo de la peticin estn codificados, al igual que en el ejemplo anterior, como
URL, o pueden usar una codifica- cin derivada del formato MIME (multipurpose
internet mail extensions), en lo que se conoce como codificacin multiparte.

La peticin anterior en formato multiparte sera:

POST /indice.jsp HTTP/1.0

Host: www.ejemplo.com

User-Agent: Mozilla/4.5 [en]

Accept: image/gif, image/jpeg, text/html

Accept-language: en

Accept-Charset: iso-8859-1

Content-Type: multipart/form-data,

delimiter=----ALEATORIO----

----ALEATORIO----

Content-Disposition: form-data; name=nombre

Perico Palotes

----ALEATORIO----
Content-Disposition: form-data; name=OK
1----ALEATORIO------

Esta codificacin es exclusiva del mtodo POST. Se emplea para enviar ficheros
al servidor.

Respuestas en HTTP

28
UNIVERSIDAD TECNICA DE MACHALA

Las respuestas en HTTP son muy similares a las peticiones. Una respuesta
estndar a una peticin de una pgina sera similar a lo siguiente:

HTTP/1.1 200 OK

Date: Mon, 04 Aug 2003 15:19:10 GMT

Server: Apache/2.0.40 (Red Hat Linux)

Last-Modified: Tue, 25 Mar 2003 08:52:53 GMT

Accept-Ranges: bytes

Content-Length: 428

Connection: close

<HTML>

...

En ella podemos observar que la primera lnea nos responde con la versin del
protocolo empleada para enviarnos la pgina, seguida de un cdigo de retorno y
una frase de retorno. El cdigo de retorno puede adoptar uno de los siguientes
valores:

1xx Peticin recibida, contina en proceso.

2xx Correcta. Peticin procesada correctamente.

3xx Redireccin. La peticin debe repetirse o redirigirse.

4xx Error de cliente. No se puede procesar la peticin porque sta

es incorrecta, no existe, etc.

5xx Error de servidor. El servidor ha fallado intentando procesar

la peticin, que a priori es correcta.

La frase de retorno depender de la implementacin, pero slo sirve como


aclaratorio del cdigo de retorno.

29
UNIVERSIDAD TECNICA DE MACHALA

Despus del estatus aparece una serie de campos de control, con el mismo
formato que en las cabeceras de la peticin que nos informan del contenido
(fecha de creacin, longitud, versin del servidor, etc.). A continuacin viene el
contenido solicitado.

2.3.6 El lenguaje HTML

El otro puntal del xito del WWW ha sido el lenguaje HTML (hypertextmark-up
language). Se trata de un lenguaje de marcas (se utiliza insertando marcas en el
interior del texto) que nos permite represen tar de forma rica el contenido y
tambin referenciar otros recursos (imgenes, etc.), enlaces a otros documentos
(la caracterstica ms destacada del WWW), mostrar formularios para
posteriormente procesarlos, etc.

El lenguaje HTML actualmente se encuentra en la versin 4.01 y em- pieza a


proporcionar funcionalidades ms avanzadas para crear pginas ms ricas en
contenido. Adems se ha definido una especificacin compatible con HTML, el
XHTML (extensible hypertext markup language) que se suele definir como una
versin XML validable de HTML, proporcionndonos un XML Schema contra el
que validar el documento para comprobar si est bien formado, etc.

2.3.7 Historia de las aplicaciones web

Inicialmente la web era simplemente una coleccin de pginas estticas,


documentos, etc., que podan consultarse o descargarse.

El siguiente paso en su evolucin fue la inclusin de un mtodo para confeccionar


pginas dinmicas que permitiesen que lo mostrado fuese dinmico (generado o
calculado a partir de los datos de la peticin). Dicho mtodo fue conocido como
CGI (common Gateway Interface) y defina un mecanismo mediante el cual
podamos pasar informacin entre el servidor HTTP y programas externos. Los
CGI siguen siendo muy utilizados, puesto que la mayora de los servidores web
los soportan debido a su sencillez. Adems, nos proporcionan total libertad a la
hora de escoger el lenguaje de programacin para desarrollarlos.

El esquema de funcionamiento de los CGI tena un punto dbil: cada vez que
recibamos una peticin, el servidor web lanzaba un proceso que ejecutaba el

30
UNIVERSIDAD TECNICA DE MACHALA

programa CGI. Como, por otro lado, la mayora de CGI estaban escritos en algn
lenguaje interpretado (Perl, Python, etc.) o en algn lenguaje que requera runtime
environment (VisualBasic, Java, etc.), esto implicaba una gran carga para la
mquina del servidor. Adems, si la web tena muchos accesos al CGI, esto
supona problemas graves.

Por ello se empiezan a desarrollar alternativas a los CGI para solucionar este
grave problema de rendimiento. Las soluciones vienen principalmente por dos
vas. Por un lado se disean sistemas de ejecucin de mdulos ms integrados
con el servidor, que evitan que ste tenga que instanciar y ejecutar multitud de
programas. La otra va consiste en dotar al servidor de un intrprete de algn
lenguaje de programacin (RXML, PHP, VBScript, etc.) que nos permita incluir las
pginas en el cdigo de manera que el servidor sea quien lo ejecute, reduciendo
as el tiempo de respuesta.

A partir de este momento, se vive una explosin del nmero de arquitecturas y


lenguajes de programacin que nos permiten desarrollar aplicaciones web. Todas
ellas siguen alguna de las dos vas ya mencionadas. De ellas, las ms tiles y las
que ms se utilizan son aquellas que permiten mezclar los dos sistemas, es decir,
un lenguaje de programacin integrado que permita al servidor interpretar
comandos que incrustemos en las pginas HTML y un sistema de ejecucin de
programas ms enlazado con el servidor que no presente los problemas de
rendimiento de los CGI.

A lo largo del curso abordaremos con ms detalle la que quizs sea la ms


exitosa y potente de estas aproximaciones, la seguida por Sun Microsystems con
su sistema Java, que est integrada por dos componentes; a saber, un lenguaje
que permite incrustar cdigo interpretable en las pginas HTML y que el servidor
traduce a programas ejecutables, JSP (Java server pages) y un mecanismo de
programacin estrechamente ligado al servidor, con un rendimiento muy superior
a los CGI convencionales, llamado Java Servlet.

Otra de las tecnologas que ms xito ha obtenido y una de las que ms se utiliza
en Internet es el lenguaje de programacin interpretado por el servidor PHP. Se
trata de un lenguaje que permite incrustar HTML en los programas, con una

31
UNIVERSIDAD TECNICA DE MACHALA

sintaxis que proviene de C y Perl. Adems, habida cuenta de su facilidad de


aprendizaje, su sencillez y potencia, se est convirtiendo en una herramienta muy
utilizada para algunos desarrollos.

Otros mtodos de programacin de aplicaciones web tambin tienen su mercado.


As sucede conmod_perl para Apache, RXML para Roxen, etc., pero muchos de
ellos estn vinculados a un servidor web concreto.

32
UNIVERSIDAD TECNICA DE MACHALA

2.4 Conceptos Bsicos del Servidor Web

2.4.1 Concepto Servidor Web

Un servidor web es un programa que atiende y responde a las diversas peticiones


de los navegadores, proporcionndoles los recursos que solicitan mediante el
protocolo HTTP o el protocolo HTTPS (la versin segura, cifrada y autenticada de
HTTP). Un servidor web bsico tiene un esquema de funcionamiento muy
sencillo, ejecutando de forma infinita el bucle siguiente:

1. Espera peticiones en el puerto TCP asignado (el estndar para HTTP es el 80).

2. Recibe una peticin.

3. Busca el recurso en la cadena de peticin.

4. Enva el recurso por la misma conexin por donde ha recibido la peticin.

5. Vuelve al punto 2.

Un servidor web que siguiese el esquema anterior cumplira los requisitos bsicos
de los servidores HTTP, aunque, eso s, slo podra servir ficheros estticos.

A partir del esquema anterior se han diseado y construido todos los programas
servidores de HTTP que existen, variando slo el tipo de peticiones (pginas
estticas, CGI, Servlets, etc.) que pueden atender, en funcin de que sean o no
multiproceso, multihilados, etc. A continuacin detallaremos algunas de las
caractersticas principales de los servidores web, que extienden, obviamente el
esquema anterior.

2.4.2 Servicio de ficheros estticos

Todos los servidores web deben incluir, como mnimo, la capacidad para servir los
ficheros estticos que se encuentren en alguna parte concreta del disco. Un
requisito imprescindible es la capacidad de especificar qu parte del disco se
servir. No resulta en absoluto recomendable que el servidor nos obligue a usar
un directorio concreto, si bien puede tener uno por defecto.

33
UNIVERSIDAD TECNICA DE MACHALA

La mayora de servidores web permiten, adems, aadir otros directorios para


servir, especificando en qu punto del sistema de ficheros virtual del servidor se
ubicarn.

Algunos servidores web permiten, adems, especificar directivas de seguridad


(para qu direcciones, usuarios, etc., est visible un direc- torio, etc.), mientras
que otros hacen posible especificar qu ficheros se considerarn como ndice del
directorio.

2.4.3 Seguridad y autenticacin

La mayora de los servidores web modernos nos permiten controlar desde el


programa servidor aquellos aspectos relacionados con la seguridad y la
autenticacin de los usuarios.

El modo ms simple de control es el proporcionado por el uso de ficheros


.htaccess. ste es un sistema de seguridad que proviene de uno de los primeros
servidores web (del NCSA httpd), que consiste en poner un fichero de nombre
.htaccess en cualquier directorio del contenido web que se vaya a servir,
indicando en este fichero qu usuarios, mquinas, etc., tienen acceso a los
ficheros y subdirectorios del directorio donde est el fichero. Como el servidor de
NCSA fue el servidor ms usado durante mucho tiempo, la mayora de servido-
res modernos permiten utilizar el fichero .htaccess respetando la sintaxis del
servidor de NCSA.

Otros servidores permiten especificar reglas de servicio de directorios y ficheros


en la configuracin del servidor web, indicando all qu usuarios, mquinas, etc.,
pueden acceder al recurso indicado.

Por lo que respecta a la autenticacin (validacin del nombre de usuario y


contrasea proporcionados por el cliente), las prestaciones ofrecidas por los
diversos servidores web son de lo ms variado. La mayora permiten, como
mnimo, proporcionar al servidor web un fichero con nombres de usuario y
contraseas contra el que se pueda validar lo enviado por el cliente. De todos
modos, es frecuente que los servidores proporcionen pasarelas que permitan
delegar las tareas de autenticacin y validacin a otro software (por ejemplo

34
UNIVERSIDAD TECNICA DE MACHALA

RADIUS, LDAP, etc.). Si usamos un sistema operativo como Linux, que dispone
de una infraestructura de autenticacin como PAM (pluggable authentication
modules), podemos usar esta funcionalidad como modo de autenticacin del
servidor web, permitindonos as usar los mltiples mtodos disponibles en PAM
para autenticar contra diversos sistemas de seguridad.

2.4.4 Contenido dinmico

Uno de los aspectos ms importantes del servidor web escogido es el nivel de


soporte que nos ofrece para servir contenido dinmico. Dado que la mayor parte
del contenido web que se sirve no proviene de pginas estticas, sino que se
genera dinmicamente, y esta tendencia es claramente alcista, el soporte para
contenido dinmico que nos ofrece el servidor web es uno de los puntos ms
crticos en su eleccin.

La mayora de servidores web ofrecen soporte para CGI (cabe recordar que los
CGI son el mtodo ms antiguo y simple de generacin de contenido dinmico).
Muchos ofrecen soporte para algunos lenguajes de programacin (bsicamente
interpretados) como PHP, JSP, ASP, Pike, etc. Es altamente recomendable que el
servidor web que utilicemos proporcione soporte para alguno de estos lenguajes,
siendo uno de los ms utilizados PHP, sin tener en cuenta JSP, que usualmente
requiere un software externo al servidor web para funcionar (como por ejemplo,
un contenedor de Servlets). La oferta en este campo es muy amplia, pero antes
de escoger un lenguaje de programacin de servidor tenemos que plantearnos si
deseamos un lenguaje muy estandarizado para que nuestra aplicacin no
dependa de un servidor web o arquitectura concreta o si, por el contrario, la
portabilidad no es una prioridad y s lo es alguna prestacin concreta que pueda
ofrecernos algn lenguaje de programacin concreto.

2.4.5 Servidores virtuales

Una prestacin que est ganado adeptos y usuarios a marchas forzadas,


especialmente entre los proveedores de servicios de Internet y los operadores de
alojamiento de dominios, es la capacidad de algunos servidores web de
proporcionar mltiples dominios con slo una direccin IP, discriminando entre los
diversos dominios alojados por el nombre de dominio enviado en la cabecera de

35
UNIVERSIDAD TECNICA DE MACHALA

la peticin HTTP. Esta prestacin permite administrar de una forma ms racional y


ahorrativa un bien escaso, como son las direcciones IP.

Si necesitamos disponer de muchos nombres de servidor (ya sea porque


proporcionamos alojamiento o por otros motivos) debemos asegurarnos de que el
servidor web escogido ofrezca estas facilidades, y adems, que el soporte que
facilita para servidores virtuales nos permita una configuracin diferente para cada
servidor (directorios, usuarios, seguridad, etc.). Lo ideal sera que cada servidor
se comportase como si de un ordenador diferente se tratase.

2.4.6 Prestaciones extra

Son muchas las prestaciones que nos ofrecen los servidores web para
diferenciarse de la competencia. Algunas de ellas resultan realmente tiles y
pueden decidir la eleccin de servidor web. Debemos ser conscientes, no
obstante, de que si usamos algunas de estas caractersticas, o si stas se
convierten en imprescindibles para nosotros, ello nos puede obligar a usar un
determinado servidor web aunque en algn momento determinado deseemos
cambiar.

Algunas caractersticas adicionales de algunos servidores web de cdigo libre son


las siguientes:

Spelling (Apache). Esta prestacin de Apache nos permite definir una pgina de
error para los recursos no encontrados que sugiera al usuario algunos nombres
de recurso parecidos al que solicitaba para el caso de que hubiese cometido un
error al escribir.

Status (Apache). Nos proporciona una pgina web generada por el servidor donde
ste nos muestra su estado de funcionamiento, nivel de respuesta, etc.

RXML Tags (Roxen). Aade a HTML algunos tags (comandos de HTML),


mejorados para programacin y generacin de contenido dinmico.

SQL Tags (Roxen). Aade al lenguaje HTML extendido de Roxen

(RXML), comandos para realizar accesos a bases de datos SQL desde las
propias pginas HTML.

36
UNIVERSIDAD TECNICA DE MACHALA

Graphics (Roxen). Aade al lenguaje HTML extendido de Roxen

(RXML), comandos para la generacin de grficos, ttulos, etc., y no requiere un


trabajo de diseo grfico.

Bfnsgd (AOLServer),mod_gd (Apache). Nos permite realizar grficos a partir de


texto y de fuentes True Type.

mod_mp3(Apache), ICECAST, MPEG(Roxen). Nos permiten convertir el servidor


web en un servidor de msica (constreaming, etc.).

Throttle(Roxen), mod_throttle (Apache). Nos proporcionan medios para limitar la


velocidad de servicio de HTTP, ya sea por usuario, servidor virtual, etc.

Nsxml (AOLServer), tDOM(AOLServer), mod_xslt (Apache). Nos permite realizar


la transformacin de ficheros XML a partir de XSL.

Kill Frame (Roxen). Enva con cada pgina web servida un cdigo que evita que
nuestra web quede como frame (enmarcada) dentro de otra pgina web.

2.4.7 Actuacin como representantes

Algunos servidores web nos permiten usarlos como servidores intermedios (proxy
servers). Podemos usar los servidores intermedios para propsitos muy variados:

Para servir de aceleradores de navegacin de nuestros usuarios (uso


comoproxy-cache).

Para servir como aceleradores de acceso frontales para un servidor web,


instalando diversos servidores web que repliquen los accesos a un servidor
maestro (reverse-proxy o HTTP server acceleration).

Como frontales a algn servidor o protocolo.

Algunos servidores web nos permiten usarlos como servidores intermediarios


para alguno de los usos anteriores. No obstante, para los dos primeros usos
(aceleradores de navegacin o de acceso) existen programas especficos de
cdigo libre mucho ms eficientes, entre los que destaca Squid (http://www.squid-
cache.org/), que se considera uno de los mejores productos de proxy existentes.

37
UNIVERSIDAD TECNICA DE MACHALA

Existen mdulos para diversos servidores web que nos permiten usar los como
frontales para otros servidores especializados en otro tipo de servicio.

2.4.8 Protocolos adicionales

Algunos servidores, adems de atender y servir peticiones HTTP (y HTTPS),


pueden atender y servir peticiones de otros protocolos o de protocolos
implementados sobre HTTP. Algunos de estos protocolos pueden convertirse en
requisitos fundamentales de nuestro sistema y, por ello, su existencia en el del
servidor web puede ser imprescindible.

38
UNIVERSIDAD TECNICA DE MACHALA

2.5 El Servidor Apache

2.5.1 Apache

Apache es un servidor web de cdigo libre robusto cuya implementacin se


realiza de forma colaborativa, con prestaciones y funcionalidades equivalentes a
las de los servidores comerciales. El proyecto est dirigido y controlado por un
grupo de voluntarios de todo el mundo que, usando Internet y la web para
comunicarse, planifican y desarrollan el servidor y la documentacin relacionada.

Estos voluntarios se conocen como el Apache Group. Adems del Apache Group,
cientos de personas han contribuido al proyecto con cdigo, ideas y
documentacin.

2.5.2 El nacimiento de Apache

En febrero de 1995, el servidor web ms popular de Internet era un servidor de


dominio pblico desarrollado en el NCSA (National Center for Supercomputing
Applications en la Universidad de Illinois). No obstante, al dejar Rob McCool (el
principal desarrollador del servidor) la NCSA en 1994, la evolucin de dicho
programa haba quedado prcticamente reducida a la nada. El desarrollo pas a
manos de los responsables de sitios web, que progresivamente introdujeron
mejoras en sus servidores. Un grupo de stos, usando el correo electrnico como
herramienta bsica de coordinacin, se puso de acuerdo en poner en comn
estas mejoras (en forma de parches,patches). Dos de estos desarrolladores,
Brian Behlendorf y Cliff Skolnick, pusieron en marcha una lista de correo, un
espacio de informacin compartida y un servidor en California donde los
desarrolladores principales pudiesen trabajar. A principios del ao siguiente, ocho
programadores formaron lo que sera el Grupo Apache.

stos, usando el servidor NCSA 1.3 como base de trabajo, aadieron todas las
correcciones de errores publicadas y las mejoras ms valiosas que encontraron y
probaron el resultado en sus propios servidores. Posteriormente publicaron lo que
sera la primera versin oficial del servidor Apache (la 0.6.2, de Abril de 1995).
Casualmente, en esas mismas fechas, NCSA reemprendi el desarrollo del
servidor NCSA.

39
UNIVERSIDAD TECNICA DE MACHALA

En este momento el desarrollo de Apache sigui dos lneas paralelas. Por un lado,
un grupo de los desarrolladores sigui trabajando sobre el Apache 0.6.2 para
producir la serie 0.7, incorporando mejoras, etc. Un segundo grupo reescribi por
completo el cdigo, creando una nueva arquitectura modular. En julio de 1995 se
migraron a esta nueva arquitectura las mejoras existentes para Apache 0.7,
hacindose pblico como Apache 0.8.

El da uno de diciembre de 1995, apareci Apache 1.0, que inclua documentacin


y muchas mejoras en forma de mdulos incrustables. Poco despus, Apache
sobrepas al servidor de NCSA como el ms usado en Internet, posicin que ha
mantenido hasta nuestros das. En 1999 los miembros del Grupo Apache
fundaron la Apache Software Foundation, que provee soporte legal y financiero al
desarrollo del servidor Apache y los proyectos laterales que han surgido de ste.

2.5.3 Instalacin de Apache

Tenemos dos opciones principales para instalar Apache: podemos compilar el


cdigo fuente o podemos instalarlo a partir de un paquete binario adecuado a
nuestro sistema operativo.

Compilacin a partir de fuentes

Para compilar Apache a partir de cdigo fuente, debemos obtener previamente de


la web de Apache la ltima versin (http:// httpd.apache.org) de ste. Una vez
descargado, seguiremos los siguientes pasos:

Descomprimiremos el fichero que acabamos de descargar, lo cual nos crear un


directorio donde estarn las fuentes del servidor.

Una vez dentro de este directorio, continuaremos con los siguientes pasos:

Configuraremos el cdigo para su compilacin. Para ello ejecutaremos:

$ ./configure

Disponemos de algunos parmetros para ajustar la compilacin de Apache.

Una vez configurado el cdigo fuente, si no se han producido errores


procederemos a compilarlo. Para ello ejecutaremos:

40
UNIVERSIDAD TECNICA DE MACHALA

$ make

El alumno debe recordar que para compilar Apache requeriremos, como mnimo,
GNU Make y GNU CC.

Una vez compilado, podemos instalarlo en el directorio que hemos designado


como destino en la configuracin anterior, con configure. Este paso se realiza
usando uno de los objetivos que ya tiene definidos make. Concretamente lo
realizaremos con:

$ make install

Una vez instalado en su lugar, dispondremos, dentro del subdirectorio bin del
directorio de instalacin, el que hemos especificado con prefix, un programa
llamado apachectl que nos permitir controlar el servidor. Para iniciar ste:

$cd <directorio de instalacion>/bin

$ ./apachectl start

Para detenerlo:

$cd <directorio de instalacion>/bin

$ ./apachectl stop

Instalacin a partir de paquetes binarios

La mayor parte de los sistemas operativos de cdigo libre, y especialmente la


mayor parte de distribuciones de Linux, incluyen el servidor Apache. A pesar de
ello, en muchos casos es necesario instalar Apache. Quizs no lo instalsemos en
su momento. As pues, ahora necesitamos una nueva versin. Tambin es posible
que deseemos reinstalarlo porque hemos tenido problemas con algn fichero.

A continuacin ofreceremos unas cuantas indicaciones sobre la instalacin de


Apache en algunas de las distribuciones de Linux ms conocidas.

Redhat/Fedora

41
UNIVERSIDAD TECNICA DE MACHALA

Las distribuciones de Redhat y Fedora incluyen desde hace tiempo el servidor


Apache. En caso de tener que instalarlo el proceso es realmente simple.

Debemos descargarnos del servidor correspondiente (bien de red-hat.com o de


fedora.us) el paquete binario de Apache (en formato RPM). Tenemos que
asegurarnos de que estamos descargando la ltima versin para nuestra
distribucin, ya que tanto Redhat como Fedora publican actualizaciones para
subsanar errores o problemas detectados. Una vez en posesin de dicho
paquete, debemos instalarlo con:

rpm -ihv httpd-x.x.x.rpm

En caso de que lo tuvisemos ya instalado, podremos actualizarlo mediante el


comando:

rpm -Uhv httpd-x.x.x.rpm

En el caso de Fedora, al usar esta distribucin un repositorio apt podemos


actualizar o instalar Apache con:

apt-get install httpd

Debian

La instalacin de Apache en Debian es realmente sencilla. Slo tenemos que


ejecutar el siguiente comando:

apt-get install apache que nos instalar Apache en la ltima versin o bien lo
actualizar, si ya lo tenamos instalado.

2.5.4 Configuracin de Apache

Una vez instalado el servidor, llega el momento de configurarlo. Por defecto


Apache incluye una configuracin mnima que arranca el servidor en el puerto
TCP de servicio por defecto (el puerto 80) y sirve todos los ficheros del directorio
especificado por la directiva de configuracin Document Root. El fichero de
configuracin de Apache se llama httpd.conf y se encuentra en el subdirectorio
conf del directorio de instalacin. El fichero httpd.conf es un fichero ASCII con las
directivas de configuracin de Apache.

42
UNIVERSIDAD TECNICA DE MACHALA

Estructura del fichero de configuracin

El fichero httpd.conf est dividido en tres bloques fundamentales, aunque las


directivas de cada bloque pueden aparecer mezcladas y desordenadas.

Dichos bloques son:

Parmetros globales

Directivas de funcionamiento

Hosts virtuales

Algunos parmetros son generales para el servidor, mientras que otros se pueden
configurar de manera independiente para cada conjunto de directorios o ficheros o
para un servidor virtual concreto. En estos casos, los parmetros se encuentran
ubicados dentro de secciones donde se indica el mbito de aplicacin del
parmetro.

Las secciones ms importantes son:

<Directory>: los parmetros que se encuentran dentro de esta seccin slo se


aplicarn al directorio especificado y a sus subdirectorios.

<DirectoryMatch>: igual que Directory, pero acepta en el nombre del directorio


expresiones regulares.

<Files>: los parmetros de configuracin proporcionan control de acceso de los


ficheros por su nombre.

<FilesMatch>: igual que Files, pero acepta expresiones regulares en el nombre


del fichero.

<Location>: proporciona un control de acceso de los ficheros por medio de la


URL.

<LocationMatch>: igual que Location, pero acepta expresiones regulares en el


nombre del fichero.

43
UNIVERSIDAD TECNICA DE MACHALA

<VirtualHost>: los parmetros slo se aplicarn a las peticiones que vayan


dirigidas a este host (nombre de servidor, o direccin IP, o puerto TCP).

<Proxy>: slo se aplican los parmetros a las peticiones de proxy (requiere, por
tanto, mod proxy instalado) que coincidan con la especificacin de URL.

<ProxyMatch>:igual queproxy, pero acepta expresiones regulares en la URL


especificada.

<IfDefine>:se aplica si al arrancar el servidor se define en la lnea de comandos


un parmetro concreto, con la opcin-D.

<IfModule>:se aplican los parmetros si al arrancar el servidor el mdulo


especificado se encuentra cargado (conLoadModule).

En caso de conflicto entre especificaciones de parmetros, el orden de


precedencia es el siguiente:

1.<Directory>y .htaccess

2.<DirectoryMatch>y <Directory>

3.<Files>y <FilesMatch>

4.<Location>y <LocationMatch>

Por lo que se refiere a<VirtualHost>, estas directivas siempre se aplican despus


de las generales. As, un Virtual Host siempre puede sobrescribir la configuracin
por defecto.

Un ejemplo de configuracin sera:

<Directory /home/*/public_html>

Options Indexes

</Directory>

<FilesMatch \.(?i:gif jpe?g png)$>

Order allow,deny

44
UNIVERSIDAD TECNICA DE MACHALA

Deny from all

</FilesMatch>.

Directivas de configuracin globales

Algunas de las directivas de configuracin jams se aplican a ninguna de las


secciones antes mencionadas (directorios, etc.), sino que afectan a todo el
servidor web. Las ms destacadas son:

ServerRoot: especifica la ubicacin del directorio raz donde se encuentra


instalado el servidor web. A partir de este directorio, encontraremos los ficheros de
configuracin, etc. Si el servidor est correctamente instalado, no debera
cambiarse nunca.

KeepAlive: especifica si se utilizarn conexiones persistentes, para atender todas


las peticiones de un usuario con la misma conexin TCP.

Listen: especifica en qu puerto se atendern las peticiones. Por defecto se


utiliza el puerto 80 de TCP. Tambin permite especificar qu direcciones IP se
utilizarn (por si el servidor tuviese ms de una). Por defecto se utilizan todas las
disponibles.

LoadModule: con LoadModule podemos cargar en el servidor los mdulos


adicionales que incorpora Apache. La sintaxis es:

LoadModule modulo ficheromodulo

Debemos tener instalado mod_so para poder usarla.

Directivas principales

Disponemos de algunas directivas que, por norma general, no suelen estar en


ninguna de las secciones anteriormente mencionadas (algunas de ellas no
pueden estar dentro de ninguna seccin y es obligatorio que estn en la principal),
sino que se hallan en la seccin principal de configuracin. Dichas directivas son:

ServerAdmin: sirve para especificar la direccin de correo electrnico del


administrador. Esta direccin puede aparecer en los mensajes de error como

45
UNIVERSIDAD TECNICA DE MACHALA

direccin de contacto para permitir a los usuarios notificar un error al


administrador. No puede estar dentro de ninguna seccin.

ServerName: especifica el nombre y el puerto TCP que el servidor utiliza para


identificarse. Puede determinarse automticamente, pero es recomendable
especificarlo. Si el servidor no tiene un nombre DNS, se recomienda incluir su
direccin IP. No puede estar dentro de ninguna seccin. La sintaxis es:
ServerName nombredireccion:puerto como en:

ServerName www.uoc.edu:80

ServerName 192.168.1.1:80

DocumentRoot: el directorio raz desde el que se servirn los documentos. Por


defecto es el directorio htdocs, que se encuentra dentro de la carpeta de
instalacin de Apache. No puede estar dentro de ninguna seccin, a excepcin de
la VirtualHost. Le corresponde una seccin < D i r e c t o r y > en la que se
establecen los parmetros de configuracin de este directorio.

DirectoryIndex: especifica el fichero que se servir por defecto para cada


directorio en el caso de que no se especifique ninguno en la URL. Por defecto es
index.html. Es decir, si por ejemplo se pone en el navegador: www.uoc.edu el
servidor por defecto enviar www.uoc.edu/index.html. Se puede especificar ms
de un fichero y el orden con el que se especifica dicho nombre determinar la
prioridad para decidir cul se sirve. La directiva se puede encontrar tanto fuera de
cualquier seccin como dentro de una de ellas.

AccessFileName: especifica el nombre de fichero de configuracin en caso de


que ste sea diferente de .htaccess. Para que esta configuracin funcione, la
directiva AllowOverride tiene que tener un valor adecuado. No puede estar dentro
de ninguna seccin. El nombre de fichero que se especifica por defecto es el del
fichero.htaccess.

ErrorDocument: esta directiva establece la configuracin del servidor en caso de


error. Se pueden establecer cuatro configuraciones distintas:

Mostrar un texto de error.

46
UNIVERSIDAD TECNICA DE MACHALA

Redirigir a un fichero en el mismo directorio.

Redirigir a un fichero en nuestro servidor.

Redirigir a un fichero fuera de nuestro servidor.

La sintaxis de la directiva es ErrorDocumentcdigo_error accin.

Esta directiva se puede encontrar tanto dentro de una seccin, como en la


configuracin global.

Por ejemplo, con:

ErrorDocument 404 /noencont.html.

En caso de no encontrarse un fichero, se mostrar el fichero noencont.html.

Alias: las directivasAlias yAliasMatch nos permiten definir accesos a directorios


que se encuentran fuera del DocumentRoot. La sintaxis es la siguiente: Alias url
directorio.

Por ejemplo:

Alias /docs /home/documentos provocar que una peticin a


http://www.uoc.edu/docs/manual se sirva desde /home/documentos/manual.

UserDir: esta directiva nos permite indicar a Apache que un subdirectorio del
directorio de trabajo de los usuarios del sistema sirva para almacenar su pgina
personal.

Por ejemplo:

UserDir publico provocar que la pgina almacenada en el directorio del usuario

test, en el subdirectorio pblico, sea accesible como:

http://www.uoc.edu/test/indice.html

Directivas de seccin

La mayor parte de secciones de localizacin (Directory, Location, etc.) incluyen en


su configuracin una serie de directivas que nos permiten controlar el acceso al

47
UNIVERSIDAD TECNICA DE MACHALA

contenido ubicado dentro. Dichas directivas vienen proporcionadas por el


mdulomod_access.

Allow: nos permite especificar quin est autorizado a acceder al recurso.


Podemos especificar direcciones IP, nombres de mquina, fragmentos del nombre
o direccin e incluso por variables de la peticin. Disponemos de la palabra clave
all para indicar todos los clientes.

Deny: nos permite especificar a quin no dejamos acceder al recurso.


Disponemos de las mismas opciones que con Allow.

Order: nos permite afinar el funcionamiento de las directivas

Allowy Deny. Disponemos de dos opciones:

Allow,Deny. El acceso est denegado por defecto y slo podrn entrar los
clientes que cumplan las especificaciones de Allow y no cumplan las de Deny.

Deny,Allow. El acceso est permitido por defecto y slo podrn entrar los clientes
que no cumplan las especificaciones de Deny o cumplan las de Allow.

Servidores virtuales

Apache soporta servir diversos sitios web con un slo servidor. Para ello
proporciona facilidades de creacin de dominios virtuales en funcin de diversas
direcciones IP o diversos nombres por IP.

Apache fue uno de los primeros servidores en soportar servidores virtuales sin IP,
en funcin de nombre. Esta capacidad simplifica mucho la administracin de los
servidores, adems de suponer un ahorro importante de direcciones IP,
normalmente escasas. Los servidores virtuales por nombre son totalmente
transparentes para el cliente, con la nica posible excepcin de aquellos
navegadores muy antiguos que no enven la cabecera Host: con las peticiones.

Servidores virtuales por direccin IP

Para atender a diversos servidores virtuales, cada uno con una direccin IP,
utilizaremos la seccin de configuracin VirtualHost. Con esta seccin definiremos
cada uno de los servidores con su propia configuracin y direccin IP.

48
UNIVERSIDAD TECNICA DE MACHALA

Un ejemplo sera el siguiente.

<VirtualHost 192.168.1.1>

ServerAdmin webmaster@uoc.edu

DocumentRoot /web/uoc

ServerName www.uoc.edu

ErrorLog /web/logs/uoc_error_log

TransferLog /web/logs/uoc_access_log

</VirtualHost>

<VirtualHost 192.168.254.254>

ServerAdmin webmaster@asociados.uoc.edu

DocumentRoot /web/asociados

ServerName asociados.uoc.edu

ErrorLog /web/logs/asociados_error_log

TransferLog /web/logs/asociados_access_log

</VirtualHost>

Como podemos ver, este ejemplo define dos servidores web, cada cual con una
IP y un nombre diferente. Ambos tienen su propio DocumentRoot, etc.

Para utilizar servidores virtuales por IP, es necesario que el sistema servidor tenga
configuradas en el sistema operativo las diversas direcciones IP que hay que
servir.

Servidores virtuales por nombre

Para atender a diversos servidores, utilizando la misma direccin IP para todos,


utilizaremos la seccin VirtualHost, que nos permitir definir los parmetros de
cada servidor. Si tenemos las mismas necesidades que en el ejemplo de

49
UNIVERSIDAD TECNICA DE MACHALA

servidores virtuales por direccin IP con una sola direccin utilizaremos la


siguiente configuracin:

NameVirtualHost *:80

<VirtualHost *:80>

ServerAdmin webmaster@uoc.edu

ServerName www.uoc.edu

DocumentRoot /web/uoc

ErrorLog /web/logs/uoc_error_log

TransferLog /web/logs/uoc_access_log

</VirtualHost>

<VirtualHost *:80>

ServerAdmin webmaster@uoc.edu

ServerName asociados.uoc.edu

DocumentRoot /web/asociados

ErrorLog /web/logs/asociados_error_log

TransferLog /web/logs/asociados_access_log

</VirtualHost>.

Podemos utilizar una direccin IP en lugar de *, lo cual nos permitira asignar un


grupo de servidores virtuales por nombre a esa IP y otro grupo a otra, por
ejemplo.

Un uso especial de las directivas de servidores por nombre se precisa cuando


nuestro servidor tiene dos direcciones IP, pero hemos asignado a las dos el
mismo nombre. Por ejemplo, cuando dispone una conexin de red en la intranet y
otra en Internet con el mismo nombre, caso en que podemos servir el mismo
contenido de la siguiente forma:

50
UNIVERSIDAD TECNICA DE MACHALA

NameVirtualHost 192.168.1.1

NameVirtualHost 172.20.30.40

<VirtualHost 192.168.1.1 172.20.30.40>

DocumentRoot /www/servidor1 ServerName servidor.uoc.edu ServerAlias servidor

</VirtualHost>

Con esta configuracin podremos servir la misma web hacia la intranet y la


Internet. Es conveniente notar el uso de un alias para el servidor que nos permite
no usar dominios en la intranet.

Disponemos, adems, de una especificacin de servidor virtual por


defecto_default_ que nos permite atender las peticiones que no sirve ningn otro.

<VirtualHost _default_>

DocumentRoot /www/defecto

</VirtualHost>

Podemos usar la etiqueta _default_ con un nmero de puerto para especificar


servidores por defecto diferentes para cada puerto.

Apache permite adems configuraciones mucho ms complejas de servidores


virtuales, especialmente tiles en casos de servidores masivos, etc. Una
magnfica gua de referencia se encuentra en la web del proyecto Apache, con
consejos y recetas tiles para configurar.

51
UNIVERSIDAD TECNICA DE MACHALA

2.6 Otros servidores web de software libre

Existen multitud de servidores HTTP de cdigo libre, pero casi todos ellos han
quedado eclipsados por la fama de Apache. Algunos de estos servidores
presentan caractersticas que les dotan de gran inters.

2.6.1. AOLServer

El servidor web AOLServer es el servidor web de cdigo libre desarrollado por


AOL (Amrica Online, el proveedor de Internet ms importante del mundo). AOL
utiliza AOLServer como servidor principal de web para uno de los entornos web
de mayor trfico y uso de Internet. AOLServer es un servidor web multihebra,
basado en TCL, y con muchas facilidades de uso en entornos de gran escala y
sitios web dinmicos. Cabe destacar que todos los dominios y servidores web de
AOL, ms de doscientos, que soportan miles de usuarios, millones de conexiones,
etc., funcionan gracias a AOLServer.

AOLServer tiene una amplia base de usuarios, gracias sobre todo a su integracin
con OpenACS, un sistema de gestin de contenidos muy potente, de cdigo libre,
desarrollado inicialmente por una empresa llamada ArsDigita y posteriormente
liberado bajo licencia GPL. El binomio AOLServer-OpenACS constituye la
infraestructura de proyectos web tan complejos y potentes como dotLRN (un
campus virtual universitario de cdigo libre).

2.6.2. Roxen y Caudium

Roxen es un servidor web publicado bajo licencia GNU por un grupo de


desarrolladores suecos que posteriormente fundaran la empresa Roxen Internet
Services. El servidor Roxen (que primeramente se haba llamado Spider y
despus, Spinner) ha destacado siempre por la gran cantidad de funcionalidades
que ofrece a los usuarios. Este servidor, desarrollado en el lenguaje de
programacin Pike, ofrece a los usuarios cientos de mdulos que permiten
desarrollar fcilmente sitios web muy ricos, dinmicos, etc., sin otra herramienta
que el servidor Roxen. Las caractersticas principales de Roxen son:

Multiplataforma, es decir, puede ejecutarse en multitud de plataformas:


Windows, Linux, Solaris, MAC OS/X, etc.

52
UNIVERSIDAD TECNICA DE MACHALA

Es de cdigo libre.

Interfaz de administracin va web muy rica y fcil de usar.

Soporte grfico integrado que permite, con slo algunas etiquetas de RXML (la
extensin de HTML de Roxen), generar imgenes, ttulos, grficas, etc.

Acceso a BBDD integrado, posibilita el acceso a PostgreSQL, Oracle, MySQL,


etc.

Base de datos MySQL integrada.

Programacin en el servidor con RXML, Java, Perl, PHP y CGI.

Soporte de criptografa fuerte.

Arquitectura modular que permite cargar y descargar extensiones del servidor


con ste en marcha.

Independencia de plataforma en los mdulos desarrollados por el usuario.

A mediados del 2000, a raz de la aparicin de la versin 2.0 de Roxen, que


rompa la compatibilidad de ste con las versiones anteriores, especialmente la
1.3, que era la ms usada, un grupo de desarrolladores que inclua a algunos de
los fundadores de Roxen, inici un nuevo proyecto que parta de la versin 1.3 de
Roxen para desarrollar un servidor web que mantuviese la compatibilidad con
sta. Dicho servidor web se denomin Caudium. En estos momentos las dos
plataformas, Roxen y Caudium, gozan de buena salud, de buenas relaciones (los
desarrolladores intentan mantener la compatibilidad entre los API de los dos
sistemas) y cuentan, adems, con una base de usuarios fiel.

Roxen es uno de los pocos casos en los que un excelente producto (ha sido
siempre uno de los servidores web ms estables, rpidos y con mayor nmero de
prestaciones y facilidades) no ha triunfado, ya que siempre ha sido eclipsado por
Apache.

53
UNIVERSIDAD TECNICA DE MACHALA

2.6.3. thttpd

thttpd es un servidor HTTP extremadamente pequeo, muy rpido, portable y


seguro. Tiene las mismas prestaciones que otros servidores convencionales,
como Apache, aunque en casos de carga extrema su rendimiento es mucho ms
alto.

Su utilidad como servidor web de propsito general es ms bien escasa, aunque


su uso principal suele ser como servidor rpido de contenido esttico, muchas
veces como soporte de servidores Apache para servir contenido binario esttico,
como puedan ser imgenes u otros, dejando para el servidor Apache las pginas
dinmicas o ms complejas. Usado como auxiliar de Apache para servir contenido
esttico ha conseguido reducir la carga del servidor principal a una centsima
parte.

2.6.4. Jetty

Jetty es un servidor web escrito totalmente en Java que incluye, adems, un


contenedor de Servlets. Tiene un tamao reducido y un rendimiento alto, lo que lo
ha convertido en uno de los preferidos para desarrollar productos embebidos que
requieran un servidor HTTP. S

bien no suelen encontrarse muchos servidores Jetty funcionando por s mismos,


s que suelen encontrarse como servidores web empotra- dos en productos como:

Integrados con servidores de aplicaciones, como JBoss y Jonas.

Integrados en el proyecto JTXA como base para el transporte HTTP.

Integrados en productos como Tivoli de IBM, MQ de Sonic y SESM de Cisco,


como servidor HTTP.

En la mayora de CD de demostracin en libros sobre Java, Servlets, XML, etc.

Ejecutndose en mltiples sistemas embebidos y ordenadores de mano.

54
UNIVERSIDAD TECNICA DE MACHALA

2.7 Javascript

2.7.1 Concepto

Javascript es un lenguaje de programacin interpretado (un lenguaje de tipo


script). A pesar de que existen intrpretes no dependientes de ningn navegador,
es un lenguaje de script que suele encontrarse vinculado a pginas web.
Javascript y Java son dos lenguajes de pro- gramacin distintos con filosofas
muy diferentes. El nico punto en comn es la sintaxis, ya que cuando Netscape
dise Javascript, se inspir en la sintaxis de Java.

2.7.2 El primer programa sencillo

Como resulta habitual al mostrar lenguajes de programacin, nues- tro primer


contacto con Javascript ser realizar un primer programa que nos muestre el ya
clsico mensaje Hola mundo. Como Javas- cript es un lenguaje que veremos,
generalmente, vinculado a una p- gina web, el siguiente cdigo ser un fichero
HTML que deberemos visualizar en un navegador.

<HTML>

<HEAD>

<SCRIPT LANGUAGE=Javascript>

function Saludo()

alert(Hola mundo);

</SCRIPT>

</HEAD>

<BODY>

<FORM>

55
UNIVERSIDAD TECNICA DE MACHALA

<INPUT TYPE=buttonNAME=Boton

VALUE=Pulsar onClick=Saludo()>

</FORM>

</BODY>

</HTML>

Este programa Javascript pinta en nuestra pantalla un botn. Al pulsarlo, se abre


una ventana con un mensaje. El aspecto que ofrece este programa es el
siguiente:

Comentaremos el cdigo anterior, lo cual nos permitir introducir los diversos


elementos de Javascript.

Como podemos ver, el cdigo Javascript se encuentra envuelto por una


etiqueta<SCRIPT>. Dicha etiqueta puede aparecer en el punto del documento
que deseemos (no es obligatorio que aparezca en la cabecera de ste). Los
navegadores que no ofrezcan soporte de Javascript ignorarn el contenido de la
etiqueta. Podemos, opcionalmente, requerir una versin concreta de Javascript si
usamos una etiqueta como:

<SCRIPT LANGUAGE=Javascript1.1>

...

</SCRIPT>

56
UNIVERSIDAD TECNICA DE MACHALA

Una forma conveniente de usar la etiqueta SCRIPT es situarla en el encabezado


de la pgina, ya que as se mejora la legibilidad del cdigo HTML.

En el interior de la etiqueta SCRIPT tenemos el cdigo Javascript.

En este caso, una nica funcin, aunque podramos tener ms.

Nuestro cdigo:

function Saludo()

alert(Hola mundo);

define una funcin llamada Saludo. Como podemos observar, y a diferencia de


Java, esta funcin no pertenece a ningn objeto. Javascript, a pesar de ser
orientado a objetos, permite la existencia de funciones fuera de los objetos (de
forma similar a C++). Veremos que el nico cdigo que contiene esta funcin es
una llamada a funcin, alert(un mtodo del objeto window).

El siguiente bloque de cdigo Javascript est dentro de la definicin en HTML del


formulario.

<FORM>

<INPUT TYPE=buttonNAME=Boton

VALUE=Pulsar onClick=Saludo()>

</FORM>

En este caso, el cdigo Javascript declara un gestor de eventos, concretamente


del evento onClick para el objeto botn. Un evento es una ocurrencia de algn
hecho (en este caso, un click del botn por parte del usuario). Al producirse el
evento Javascript se ejecutar el cdigo que le indicamos en el gestor de eventos
on Click. Este cdigo es una llamada a una funcin, Saludo.

57
UNIVERSIDAD TECNICA DE MACHALA

2.7.3 Elementos bsicos de Javascript

Las sentencias de Javascript terminan en; (igual que en C y Java) y se pueden


agrupar por bloques delimitados por { y }.

Otro punto que conviene tener presente es que los smbolos (nombres de
variables, funciones, etc.) son sensibles a cambios de maysculas/minsculas.

Comentarios

Para introducir comentarios en el programa disponemos de dos opciones:

// Comentario de una sola lnea

/*

Comentario que se extiende varias lneas

*/

Como podemos apreciar, el formato de los comentarios es idntico al de Java.

Literales

Javascript sigue el mecanismo de definicin de literales de Java y C.

Es decir, disponemos de literales de tipo:

Enteros 123

Reales 0.034

Booleanos true, false

Cadenas Cadena de texto

Javascript tambin proporciona soporte para vectores:

estaciones= [Otoo,Invierno,Primavera,Verano];.

Caracteres especiales

58
UNIVERSIDAD TECNICA DE MACHALA

Javascript, al igual que Java, utiliza ciertas secuencias de caracteres para


permitirnos introducir caracteres especiales en nuestras constantes de cadena.

Dentro de las cadenas, podemos indicar varios caracteres especiales, con


significados especiales. stos son los ms usados:

2.7.4 Tipos de datos y variables

En Javascript los tipos de datos se asignan dinmicamente a medida

que asignamos valores a las distintas variables y pueden ser:

cadenas de caracteres

enteros

reales

booleanos

vectores

matrices

referencias

objetos

59
UNIVERSIDAD TECNICA DE MACHALA

Variables

En Javascript los nombres de variables deben empezar por un carcter alfabtico


o por el carcter _ y pueden estar formados por ca- racteres alfanumricos y el
carcter _ .

No hace falta declaracin explcita de las variables, ya que stas son globales. Si
deseamos una variable local, debemos declararla usando la palabra reservada
var y hacerlo en el cuerpo de una funcin. En una declaracin de variable
mediante var podemos declarar diversas variables, separando los nombres de
stas mediante ,.

Las variables tomarn el tipo de datos a partir del tipo del objeto de datos que les
asignemos.

Referencias

Javascript elimina del lenguaje los punteros a memoria, pero mantiene el uso de
referencias. Una referencia funciona de forma muy similar a un puntero de
memoria, pero obviando para el programador las tareas relacionadas con gestin
de memoria que provocaban tantos errores en los punteros dentro de otros
lenguajes.

En Javascript se dispone de referencias a objetos y a funciones. Esta capacidad


de tener referencias a funciones nos ser muy til para utilizar funciones que
oculten las diferencias entre navegadores.

function soloExplorer()

...

function soloMozilla()

...

60
UNIVERSIDAD TECNICA DE MACHALA

function toda()

var funcion;

if(navegadorMozilla)

funcion=soloMozilla;

else

funcion=soloExplorer;

funcion();

Vectores

Disponemos en Javascript de un tipo de datos que nos permite manejar


colecciones de datos. Los elementos de estos Array pueden ser distintos.

Como podemos ver en el cdigo siguiente, los Array de Javascript son objetos (de
tipo Array) los cuales pueden tener como ndice de acceso un valor no numrico y
de los que no debemos declarar las medidas inicialmente. No disponemos de un
tipo de vector n dimensional, pudiendo usar para ello vectores de vectores.

//dimensionamos un vector de 20 elementos

vector = new Array(20);

//el vector crece para albergar el 30 elemento

miEstupendoVector[30] = contenido;.

//dimensionamos un vector

capitales = new Array();

61
UNIVERSIDAD TECNICA DE MACHALA

//podemos usar cadenas como indices

capitales[Francia]= Pars;

Operadores

Disponemos en Javascript de los mismos operadores que en Java y C, siendo su


comportamiento el habitual de estos lenguajes:

Operadores aritmticos: disponemos de los habituales operado- res aritmticos


(+, -, *, /, %, etc.), adems de los operadores de incremento (++) y decremento
().

Operadores de comparacin: disponemos de los siguientes:

Igualdad==

Desigualdad! =

Igualdad estricta===

Desigualdad estricta!==

Menor que<

Mayor que>

Menor o igual que< =

Mayor o igual que>=

Operadores lgicos: Javascript proporciona los siguientes operadores lgicos:

Negacin!

Y&&

||

Operadores de objeto: adems, para la manipulacin de objetos disponemos de:

Crear un objeto new

62
UNIVERSIDAD TECNICA DE MACHALA

Borrar un objeto delete

Referencia al objeto actual this

2.7.5 Estructuras de control

Javascript, como todos los lenguajes de programacin, proporciona algunas


estructuras de control.

Bifurcaciones condicionales

Javascript proporciona las dos estructuras de control ms conocidas:

if (condicion)

<codigo>

else

<codigo>

switch(valor)

case valortest1:

<codigo>

break;

case valortest2:

<codigo>

break;

...

default:

<codigo>

63
UNIVERSIDAD TECNICA DE MACHALA

Bucles

Dispondremos de tres bucles, el while y do, while y el bucle for.

while(condicion)

<codigo>

do{<codigo>

} while(condicion);

for(inicio; condicion; incremento)

<codigo>

Estructuras de manejo de objetos

Disponemos de dos estructuras muy peculiares para manejo de objetos. Por un


lado, tenemos el bucle for. . in que permite recorridos por las propiedades de un
objeto (generalmente en vectores):

for (<variable> in <objeto)

<codigo>

Por otro lado tenemos with, que proporcionar una mayor comodidad cuando
tengamos que tratar con mltiples propiedades de un mismo objeto. Podemos
escribir:

with (objeto)

{propiedad1 = ...

propiedad2 = ...

}en lugar de:

objeto.propiedad1=...

objeto.propiedad2=...

64
UNIVERSIDAD TECNICA DE MACHALA

2.7.6 Funciones

Javascript proporciona las construcciones necesarias para definir funciones. La


sintaxis es la siguiente:

function nombre(argumento1, argumento2,..., argumento n)

cdigo

}Los parmetros se pasan por valor.

2.7.7 Objetos

Un objeto en Javascript es una estructura de datos que contiene tanto variables


(propiedades del objeto), como funciones que manipulan el objeto (mtodos). El
modelo de programacin orientada a objetos de Javascript es mucho ms simple
que el de Java o C++. En Javascript no se distingue entre objetos e instancias de
objetos.

El mecanismo para acceder a las propiedades o a los mtodos de un objeto es el


siguiente:

objeto.propiedad

valor=objeto.metodo(parametro1, parametro2, ...)

Definicin de objetos en Javascript

Para definir un objeto en Javascript debemos, en primer lugar, definir una funcin
especial, cuya finalidad consiste en construir el objeto. A dicha funcin, llamada
constructor, debemos asignarle el mismo nombre que al objeto.

function MiObjeto(atr1, atr2)

this.atr1=atr1;

this.atr2=atr2;

65
UNIVERSIDAD TECNICA DE MACHALA

A partir de este momento podemos crear objetos de tipo MiObjeto.

objeto=new MiObjeto(....)

objeto.atr1=a;.

Para aadir mtodos a un objeto, debemos definir primero dichos mtodos como
una funcin normal:

function Metodo1(atr1, atr2)

{//codigo

// en this tenemos el objeto

}Para asignar este mtodo a un mtodo del objeto escribiremos:

objeto.metodo1=Metodo1;

A partir de ese momento podemos realizar:

objeto.metodo1(....);

Herencia

La herencia en la programacin orientada a objetos nos permite crear objetos


nuevos que dispongan de los mtodos y propiedades de unos objetos a los que
llamaremos padre. Gracias a ello, podemos crear objetos derivados y pasar de
implementaciones genricas a implementaciones cada vez ms concretas.

La sintaxis para crear un objeto derivado de otro, por ejemplo, un objeto


ObjetoHijo derivado de un objeto ObjetoPadre, el cual tena dos argumentos (arg1
yarg2), ser:

function ObjetoHijo(arg1, arg2, arg3)

{this.base=ObjetoPadre;

this.base(arg1,arg2);

66
UNIVERSIDAD TECNICA DE MACHALA

En ese momento podemos acceder por un objeto de tipo ObjetoHijo tanto a los
mtodos y propiedades del objeto hijo como del objeto padre.

Objetos predefinidos

En las implementaciones de Javascript existentes disponemos de un

conjunto de objetos ya predefinidos:

Array Vectores.

Date Para almacenar y manipular fechas.

Math Mtodos matemticos y constantes.

Number Algunas constantes.

String Manejo de cadenas.

RegExp Manejo de expresiones regulares.

Boolean Valores booleanos.

Function Funciones.

2.7.8 Eventos

Uno de los puntos ms importantes de Javascript es su interaccin con el


navegador. Para ello incorpora una serie de eventos que se disparan en el
momento en que el usuario realiza alguna accin en la pgina web.

2.7.9 Beneficios de las Aplicaciones Basadas en Web

Ventajas:

Se facilita el trabajo a distancia.

No se requieren complicadas combinaciones de Hardware/Software para utilizar


estas aplicaciones. Solo un computador con un buen navegador Web.

67
UNIVERSIDAD TECNICA DE MACHALA

Las aplicaciones Web son fciles de usar (no requieren conocimientos avanzados
de computacin).

Con una aplicacin Web tendr alta disponibilidad, ya que puede realizar
consultas en cualquier parte del mundo donde tenga acceso a Internet y a
cualquier hora.

Beneficios:

Las aplicaciones Web le permiten reunir las diferentes reas de la empresa.


Tendr mayor control de datos y mejor seguridad en las diferentes secciones del
website.

Permite tener un avanzado sistema de consultas, altas, bajas y modificaciones de


datos provenientes de cualquier rea de la empresa, lo cul nos mantendr la
informacin siempre actualizada.

Otorga la flexibilidad de determinar niveles de acceso segn la confidencialidad


de los datos as como la posibilidad de realizar transacciones on-line.

2.7.10 Antecedentes

En los primeros tiempos de la computacin cliente-servidor, cada aplicacin tena


su propio programa cliente que serva como interfaz de usuario que tena que ser
instalado por separado en cada ordenador personal de cada usuario. El cliente
realizaba peticiones a otro programa -el servidor- que le daba respuesta. Una
mejora en el servidor, como parte de la aplicacin, requera normalmente una
mejora de los clientes instalados en cada ordenador personal, aadiendo un coste
de soporte tcnico y disminuyendo la productividad.

A diferencia de lo anterior, las aplicaciones web generan dinmicamente una serie


de pginas en un formato estndar, como HTML o XHTML, que soportan por los
navegadores web comunes. Se utilizan lenguajes interpretados en el lado del
cliente, tales como JavaScript, para aadir elementos dinmicos a la interfaz de
usuario. Generalmente cada pgina web en particular se enva al cliente como un
documento esttico, pero la secuencia de pginas ofrece al usuario una

68
UNIVERSIDAD TECNICA DE MACHALA

experiencia interactiva. Durante la sesin, el navegador web interpreta y muestra


en pantalla las pginas, actuando como cliente para cualquier aplicacin web.

2.7.11 Interfaz

Las interfaces web tienen ciertas limitaciones en las funcionalidades que se


ofrecen al usuario. Hay funcionalidades comunes en las aplicaciones de escritorio
como dibujar en la pantalla o arrastrar-y-soltar que no estn soportadas por las
tecnologas web estndar. Los desarrolladores web generalmente utilizan
lenguajes interpretados o script en el lado del cliente para aadir ms
funcionalidades, especialmente para ofrecer una experiencia interactiva que no
requiera recargar la pgina cada vez (lo que suele resultar molesto a los
usuarios). Recientemente se han desarrollado tecnologas para coordinar estos
lenguajes con tecnologas en el lado del servidor, como por ejemplo PHP.

Como ejemplo, AJAX, es una tcnica de desarrollo web que usa una combinacin
de varias tecnologas.

2.7.12 Consideraciones tcnicas

Una ventaja significativa es que las aplicaciones web deberan funcionar igual
independientemente de la versin del sistema operativo instalado en el cliente. En
vez de crear clientes para Windows, Mac OS X, GNU/Linux, y otros sistemas
operativos, la aplicacin web se escribe una vez y se ejecuta igual en todas
partes. Sin embargo, hay aplicaciones inconsistentes escritas con HTML, CSS,
DOM y otras especificaciones para navegadores

Web que pueden causar problemas en el desarrollo y soporte de las aplicaciones


web. Adicionalmente, la posibilidad de los usuarios de personalizar muchas de las
caractersticas de la interfaz (tamao y color de fuentes, tipos de fuentes,
inhabilitar Javascript) puede interferir con la consistencia de la aplicacin web.

Otra aproximacin es utilizar Adobe Flash Player o Java applets para desarrollar
parte o toda la interfaz de usuario. Como casi todos los navegadores incluyen
soporte para estas tecnologas (usualmente por medio de plug-ins), las
aplicaciones basadas en Flash o Java pueden ser implementadas con

69
UNIVERSIDAD TECNICA DE MACHALA

aproximadamente la misma facilidad. Dado que ignoran las configuraciones de los


navegadores, estas tecnologas permiten ms control sobre la interfaz, aunque las
incompatibilidades entre implementaciones Flash o Java puedan crear nuevas
complicaciones. Por las similitudes con una arquitectura cliente-servidor, con un
cliente "no ligero", existen discrepancias sobre el hecho de llamar a estos
sistemas aplicaciones web; un trmino alternativo es Aplicacin Enriquecida de
Internet.

2.7.13 Estructura de las Aplicaciones Web

Aunque existen muchas variaciones posibles, una aplicacin web est


normalmente estructurada como una aplicacin de tres-capas. En su forma ms
comn, el navegador web ofrece la primera capa y un motor capaz de usar alguna
tecnologa web dinmica (ejemplo: PHP, Java Servlets o ASP, ASP.NET, CGI,
ColdFusion, embPerl, Python (programming language) o Ruby on Rails)
constituye la capa de en medio. Por ltimo, una base de datos constituye la
tercera y ltima capa.

El navegador web manda peticiones a la capa de en medio que ofrece servicios


valindose de consultas y actualizaciones a la base de datos y a su vez
proporciona una interfaz de usuario.

2.7.14 Uso empresarial

Una estrategia que est emergiendo para las empresas proveedoras de software
consiste en proveer acceso va web al software. Para aplicaciones previamente
distribuidas, como las aplicaciones de escritorio, se puede optar por desarrollar
una aplicacin totalmente nueva o simplemente por adaptar la aplicacin para ser
usada con una interfaz web. Estos ltimos programas permiten al usuario pagar
una cuota mensual o anual para usar la aplicacin, sin necesidad de instalarla en
el ordenador del usuario. Las compaas que siguen esta estrategia se
denominan Proveedores de Aplicaciones de Servicio (ASP por sus siglas en
ingls), un modelo de negocio que est atrayendo la atencin de la industria del
software.

70
UNIVERSIDAD TECNICA DE MACHALA

2.7.15 Lenguajes de programacin

Existen numerosos lenguajes de programacin empleados para el desarrollo de


Aplicaciones Web, entre los que destacan:

PHP
ASP/ASP.NET

Java, con sus tecnologas Java Servlets y JavaServer Pages (JSP)

Perl

Ruby

Python

HTML

XML

ASP no es un lenguaje de programacin en s mismo, sino una arquitectura de


desarrollo web en la que se pueden usar por debajo distintos lenguajes (por
ejemplo VB.NET o C# para ASP.NET o VBScript/JScript para ASP).

71
UNIVERSIDAD TECNICA DE MACHALA

2.8 Concepto Bsico del sitio web

2.8.1 Portal web

Un portal de Internet es un sitio web cuya caracterstica fundamental es la de


servir de Puerta de entrada (nica) para ofrecer al usuario, de forma fcil e
integrada, el acceso a una serie de recursos y de servicios relacionados a un
mismo tema. Incluye: enlaces, buscadores, foros, documentos, aplicaciones,
compra electrnica, etc. Principalmente un portal en Internet est dirigido a
resolver necesidades de informacin especfica de un tema en particular.

Beneficios:

Las aplicaciones Web le permiten reunir las diferentes reas de la empresa.


Tendr mayor control de datos y mejor seguridad en las diferentes secciones del
web site.

Permite tener un avanzado sistema de consultas, altas, bajas y modificaciones de


datos provenientes de cualquier rea de la empresa, lo cual nos mantendr la
informacin siempre actualizada.

Otorga la flexibilidad de determinar niveles de acceso segn la confidencialidad


de los datos as como la posibilidad de realizar transacciones on-line.

1. Compatibilidad multiplataforma. Las aplicaciones web tienen un camino


mucho ms sencillo para la compatibilidad multiplataforma que las aplicaciones de
software descargables. Varias tecnologas incluyendo Java, Flash, ASP y Ajax
permiten un desarrollo efectivo de programas soportando todos los sistemas
operativos principales.

2. Actualizacin. Las aplicaciones basadas en web estn siempre actualizadas


con el ltimo lanzamiento sin requerir que el usuario tome acciones pro-activas, y
sin necesitar llamar la atencin del usuario o interferir con sus hbitos de trabajo
con la esperanza de que va a iniciar nuevas descargas y procedimientos de

72
UNIVERSIDAD TECNICA DE MACHALA

instalacin (algunas veces imposible cuando usted est trabajando dentro de


grandes organizaciones).

3. Inmediatez de acceso. Las aplicaciones basadas en web no necesitan ser


descargadas, instaladas y configuradas. Usted accede a su cuenta online y
pristas estn listas para trabajar sin importar cul es su configuracin o su
hardware.

4. Facilidad de prueba. Finalmente no habr ms obstculos para permitir


pruebas sencillas y efectivas de herramientas y aplicaciones antes de cargar su
tarjeta de crdito. Actualmente, especialmente cuando hablamos de software
costoso, hay todava una gran cantidad de funcionalidades y pequeos detalles
que no pueden ser totalmente probados descubiertos antes de comprometer
dinero en alguna compra total.

5. Menos requerimientos de memoria. Las aplicaciones basadas en web


tienen muchas ms razonables demandas de memoria RAM de parte del usuario
final que los programas instalados localmente. Al residir y correr en los servidores
del proveedor, a esas aplicaciones basadas en web usa en muchos casos la
memoria de las computadoras que ellos corren, dejando ms espacio para correr
mltiples aplicaciones del mismo tiempo sin incurrir en frustrantes deterioros en el
rendimiento.

6. Menos Bugs. Las aplicaciones basadas en web deberan ser menos


propensas a colgarse y crear problemas tcnicos debido a software o conflictos
de hardware con otras aplicaciones existentes, protocolos o software personal
interno. Con aplicaciones basadas en web, todos utilizan la misma versin, y
todos los bugs pueden ser corregido tan pronto como son descubiertos. Esta es la
razn por la cual las aplicaciones basadas en web deberan tener mucho menos
bugs que el software de escritorio descargable tradicional.

7. Precio. Las aplicaciones basadas en web no requieren la infraestructura de


distribucin, soporte tcnico y marketing requerido por el software descargable
tradicional. Esto permite que las aplicaciones online cuesten una fraccin de sus
contrapartes descargables si no totalmente gratuitas, mientras que ofrecen
componentes adicionales y servicios premium como una opcin.

73
UNIVERSIDAD TECNICA DE MACHALA

8. Los datos tambin van online. Por supuesto con el desplazamiento de las
aplicaciones locales a aquellas basadas en web tambin los datos que creamos y
accedemos van a necesitar experimentar profundos cambios. A nadie le gusta no
poder acceder a su propio e-mail cuando est de viaje, o poder recuperar un
documento particular cuando se conecta desde un ciber caf a 15.000 kilmetros
de su oficina"Los clientes no deberan almacenar datos; deberan ser como
telfono. De hecho pueden convertirse en telfonos, o viceversa. Y a medida que
los clientes se hagan ms pequeos, usted tiene otra razn para no tener sus
datos en ellos: algo que usted lleva consigo pueden perderse o ser robado"

Source: Paul Graham - The Road Ahead, 2001)

9. Mltiples usuarios concurrentes. Las aplicaciones basadas en web pueda


realmente ser utilizada por mltiples usuarios al mismo tiempo. No hay ms
necesidad de compartir pantallas o enviar instantneas cuando mltiples usuarios
pueden ver e incluso editar el mismo documento de manera conjunta. Las
compaas de conferencia web y colaboracin online estn involucradas algunas
transformaciones claves y los usuarios necesitan explorar que significa realmente
trabajar efectivamente y co-editar documentos juntos.

10. Los datos son ms seguros.

Si bien la ruptura de discos no va a desaparecer, es probable que los usuarios


escuchen mucho menos del tema. A medida que las compaas se haga cargo del
almacenamiento de los datos del usuario, granjas de almacenamiento de datos
redundantes, altamente fiables, sern la norma ms que la excepcin, y los
usuarios van a tener mucho menos riesgo de perder sus datos debido a una
ruptura de disco impredecible o a un virus de la computadora. Las compaas que
provee aplicaciones basadas en web van a brindar amplios servicios de resguardo
de datos ya sea como una parte integral del servicio bsico o como una opcin
paga. Usted puede imaginar que si una compaa comercial pierde los datos de la
gente ser puesta de rodillas (financieramente) en cuestin de das.

11. Desarrollar aplicaciones en el lenguaje que usted quiera. Una vez que
las aplicaciones han sido separadas de computadoras locales y sistemas
operativos especficos esa pueden tambin ser escritas en prcticamente

74
UNIVERSIDAD TECNICA DE MACHALA

cualquier lenguaje de programacin. Ya que las aplicaciones web son


esencialmente una coleccin de programas ms que un simple programa, ellas
podran ser escritas en cualquier lenguaje de programacin que est por ah.
Mientras que para software escritorio usted est limitado a usar el mismo lenguaje
que el sistema operativo subyacente este no es el caso cuando la aplicacin de
software es independiente del sistema operativo.

La era "En vivo" tal como Bill Gates la ha denominado, realmente ya est aqu,
debajo de nuestras narices.

Fjese en estos fantsticos y exitosos ejemplos en funcionamiento provisto por


algunas de las aplicaciones ms fabulosas disponibles actualmente, y usted ver
que ya estn basadas en web:

Escribir documentos online - Writely.com

Tener una suite completa compatible con office - Thinkfree

Crear planilla de clculos - Numsum.com

Manejar su coleccin de fotos digitales - Flickr.com

Coleccionar y descubrir marcadores favoritos - Delicious

Leer, suscribirse y buscar alimentadores RSS - Bloglines

Seguimiento de trfico de sitio, visitantes y mtrica de conversin - Hitbox

Conferencia web, presentacin en vivo en la web - Presenternet

Crucial para el desarrollo exitoso la amplia adopcin de estas nuevas aplicaciones


es la necesidad de un mayor entendimiento de la importancia crtica del diseo
efectivo de la interfaz del usuario, usabilidad y diseo en la
informacin/interaccin.

Tambin crtico ser la integracin efectiva de componentes conscientes de


presencia y el apoyo para canales de comunicacin paralelos en tiempo real
como el chat de texto, MI y VoIP.

75
UNIVERSIDAD TECNICA DE MACHALA

Por ltimo, pero no por eso menos importante, las aplicaciones y los servicios
basados en web necesitarn ser apoyados por estrategias de comunicacin de
marketing que ms que nunca corte el cordn umbilical con las comunicaciones
corporativas tradicionales, de arriba-abajo y reciba abiertamente feedback y
participacin del usuario en todas las reas del desarrollo y soporte del producto.
A medida que la tangibilidad de productos, embalajes y CDs gradualmente
desaparezcan, la "cara" de la web y la habilidad para interactuar verdaderamente
con sus clientes se convertir en los nuevos pilares claves de lo que nosotros
llamamos hoy marca institucional y marketing de relaciones pblicas.

Con lo que estoy ms entusiasmado respecto al nuevo anuncio de Microsoft es la


consagracin final del valor realmente destacable de Microsoft Start como uno de
los puntos pivotales clave alrededor del cual Microsoft pueden esculpir su futuro
basado en web.

Microsoft Live permite la creacin de portales web personalizados, la recoleccin


de muchos servicios informacin incluyendo titulares de noticias y clima local,
acceso a e-mail y mensajera instantnea, completa lectura de alimentadores
RSS e incluso apoyo para reproducir o podcast, en un entorno personalizado
basado en web compatible con estndares abiertos.

2.8.2 Lenguaje PHP

Actualmente la red de Internet, compuesta por pginas web, sirve de soporte a


una gran cantidad de sistemas de informacin y comunicaciones que engloban
reas tan importantes como la investigacin, el comercio electrnico, la
visualizacin de informacin, el correo electrnico..

Las pginas web son textos ASCII escritos en HTML (Hypertext Markup
Language), que se transfieren entre los servidores de WWW y los navegadores
mediante el protocolo HTTP (Hypertext Transfer Protocol).

Cuando comenz la World Wide Web, los sitios web ofrecan pginas estticas,
es decir, que a efectos del usuario, el nico proceso realizado era el de
visualizacin de sus contenidos por parte del navegador del cliente.

76
UNIVERSIDAD TECNICA DE MACHALA

A medida que pasaron los aos, aument la afluencia de pblico y surge la


necesidad de reunir y procesar las peticiones del cliente con la finalidad de
ofrecerle informaciones mejor dirigidas, escogidas y elaboradas.

Es entonces, cuando surgen dos alternativas de diseo web:

- Las llamadas pginas en el lado del cliente, programadas en HTML dinmico


(DHTML), que se ejecutan en el navegador y son capaces de cambiar su
apariencia. Utilizando DHTML podemos conseguir que los objetos aparezcan y
desaparezcan, que varen su tamao, que se les asocie posiciones absolutas en
pantalla En definitiva, DHTML aumenta las posibilidades de visualizacin de las
instrucciones HTML.

-Las pginas del lado del servidor, permiten modificar los contenidos antes de
enviarlos al cliente. Las primeras fueron CGI (Common Gateway Interface) que
implementan pginas web activas en el servidor, capaces de leer lo que le
enviaba un cliente al servidor a travs de un formulario, o escribir en la pgina del
cliente.

PHP (Hypertext Preprocessor) es un lenguaje script (no se compila para


conseguir cdigos mquina si no que existe un intrprete que lee el cdigo y se
encarga de ejecutar las instrucciones que contiene ste cdigo), para el desarrollo
de pginas web dinmicas del lado del servidor, cuyos fragmentos de cdigo se
intercalan fcilmente en pginas HTML, debido a esto, y a que es de Open
Source (cdigo abierto), es el ms popular y extendido en la web.

PHP es capaz de realizar determinadas acciones de una forma fcil y eficaz sin
tener que generar programas programados en un lenguaje distinto al HTML. Esto
se debe a que PHP ofrece un extenso conjunto de funciones para la explotacin
de bases de datos sin complicaciones. Es por esto, que levanta un mayor inters
con respecto a los lenguajes pensados para los CGI.

PHP fue desarrollado originalmente por Rasmus Ledford en 1994 como un CGI
escrito en Perl que permita la interpretacin de un nmero limitado de comandos.
El sistema fue denominado Personal Home Page Tools y consigui relativo xito
gracias a que otras personas pidieron a Rasmus que les permitiese utilizar sus

77
UNIVERSIDAD TECNICA DE MACHALA

programas en sus propias pginas. Cuando Rasmus tuvo la necesidad de crear


pginas dinmicas que trabajasen con formularios, cre una serie de etiquetas a
las que denomin Form Interpreters, y lo sac al pblico con el nombre de
PHP/FI en 1995. Luego sali la versin mejorada, llamada PHP/FI 2.0.

Zeev Suraski y Andi Gutmans programaron el analizador sintctico incluyendo


nuevas funcionalidades como el soporte a nuevos protocolos de Internet y el
soporte a la gran mayora de las bases de datos comerciales, como MySQL y
Postgre SQL, as como un mdulo para Apache. Con estas mejoras surgi PHP3
en 1997. Este analizador define la sintaxis y semntica de la versin PHP3 y la
siguiente: PHP4.

PHP3 careca del uso de sesiones, algo muy comn en las pginas web de cierta
complejidad. En el ao 2000, PHP3 evolucion a PHP4, que utiliza el motor Zend
(desarrollado por Zeev y Andi encargado de interpretar el cdigo fuente de los
scripts de PHP), desarrollado para cubrir las necesidades actuales y solucionar
algunos inconvenientes de la anterior versin. Algunas mejoras de esta nueva
versin son su mayor independencia del servidor web y su rapidez, ya que
primero se compila y luego se ejecuta, mientras que antes se ejecutaba a la vez
que se interpretaba el cdigo.

La ltima versin es PHP5, que utiliza el motor Zend-2 y presenta mejoras


significativas y un entorno de programacin orientado a objetos mucho ms
completo, que permite que el PHP proporcione un alto rendimiento a las
aplicaciones Web empresariales a nivel de las plataformas J2EE y .NET. Otro
lenguaje de scripting para la generacin dinmica de contenidos en el servidor es
ASP. Aunque se parece a PHP en cuanto a potencia y dificultad, su sintaxis llega
a diferir notablemente.

Una diferencia sensible es que PHP ha sido desarrollado inicialmente para


entornos UNIX y es en este sistema operativo donde se aprovechan mejor sus
prestaciones y consigue un mayor rendimiento. ASP, que es una tecnologa
Microsoft, est orientado a sistemas Windows, especialmente NT.

PHP, cuyas siglas responden a un acrnimo recursivo (PHP:hypertext


preprocessor), es un lenguaje sencillo, de sintaxis cmoda y similar a la de otros

78
UNIVERSIDAD TECNICA DE MACHALA

lenguajes como Perl, C y C++. Es rpido, interpretado, orientado a objetos y


multiplataforma. Para l se encuentra disponible una multitud de libreras. PHP es
un lenguaje ideal tanto para aprender a desarrollar aplicaciones web como para
desarrollar aplicaciones web complejas. PHP aade a todo eso la ventaja de que
el intrprete de PHP, los diversos mdulos y gran cantidad de libreras
desarrolladas para PHP son de cdigo libre, con lo que el programador de PHP
dispone de un impresionante arsenal de herramientas libres para desarrollar
aplicaciones.

PHP suele ser utilizado conjuntamente con Perl, Apache, MySQL o PostgreSQL
en sistemas Linux, formando una combinacin barata (todos los componentes son
de cdigo libre), potente y verstil. Tal ha sido la expansin de esta combinacin
que incluso ha merecido conocerse con un nombre propio LAMP (formado por las
iniciales de los diversos productos).

Apache, as como algunos otros servidores web, Roxen entre ellos, puede
incorporar PHP como un mdulo propio del servidor, lo cual permite que las
aplicaciones escritas en PHP resulten mucho ms rpidas que las aplicaciones
CGI habituales.

2.8.2.1 Cmo funciona PHP

Si solicitamos a nuestro servidor una pgina PHP, ste enva dicha pgina al
intrprete de PHP que la ejecuta (de hecho, no se trata ms que de un programa)
y devuelve el resultado (generalmente HTML) al servidor web, el cual, a su vez,
se lo enviar al cliente.

Imaginemos que tenemos una pgina PHP con el siguiente contenido:

<?php echo <h1>Hola mundo!</h1>;?>

Si tenemos este cdigo en un fichero con extensin. php el servidor enviar la


pgina al intrprete de PHP, el cual ejecuta la pgina y obtiene como resultado:

<h1>Hola mundo!</h1>

El servidor se lo enviar al navegador cliente que ha solicitado la pgina. El


mensaje aparecer en la pantalla de este ltimo. Veremos que PHP permite

79
UNIVERSIDAD TECNICA DE MACHALA

mezclar en la misma pgina HTML y PHP, lo que facilita notablemente el trabajo


con ste, pero por otro lado supone un peligro, ya que complica el trabajo en caso
de que diseadores de web y programadores trabajen conjuntamente en las
pginas.

Disponemos, en los sistemas en los que est instalado PHP, de un fichero de


configuracin global de PHP llamadophp.ini que nos permitir configurar algunos
parmetros globales. Conviene revisar dicho fichero, pues aunque los valores por
defecto suelen ser correctos, puede interesarnos realizar algunos cambios.

2.8.2.2 Sintaxis de PHP

Para empezar a comprender la sintaxis del lenguaje, analizaremos un programa


mnimo de PHP:

<?php

$MYVAR = 1234;

$myvar = 4321;

echo $MYVAR. <br>\n;

echo $myvar.<br>\n;

?>

La ejecucin de este programa (su visualizacin desde un navega-

dor), dar como resultado:

1234<br>

4321<br>

El primer punto que debemos destacar es que los bloques de cdigo de PHP
estn delimitados en HTML con<?php y?>. Podemos, por tanto, escribir una
pgina HTML e incluir en ella diversos bloques de instrucciones PHP:

80
UNIVERSIDAD TECNICA DE MACHALA

<HTML>

<HEAD>

<TITLE>Ttulo del documento</TITLE>

</HEAD>

<BODY>

<h1>Cabecera H1</h1>

<?php echo Hola ?>

<h1>Cabecera H1 segunda</h1>

<?php

$MYVAR = 1234;

$myvar = 4321;

echo $MYVAR. <br>;

echo $myvar.<br>;

// Este programa presenta en pantalla unos nmeros

?>

</BODY>

</HTML>

El siguiente punto que conviene destacar es que los nombres de variables se


distinguen en que siempre deben empezar con $, y que igual que en C/C++, son
case sensitive, es decir, diferencian maysculas y minsculas. Fijaos tambin en
que para concatenar texto (las variables y<br>) utilizamos el carcter punto . y
adems, en que todas las sentencias terminan con ;.

81
UNIVERSIDAD TECNICA DE MACHALA

Asimismo conviene observar que las variables, a pesar de ser numricas, se


pueden concatenar con un texto (<br>). En este caso el intrprete convierte el
valor numrico de la variable en texto para poder realizar la concatenacin.

Tambin podemos observar que hay un comentario dentro del cdigo. Este
comentario no afectar en modo alguno al programa ni ser enviado al navegador
del cliente (de hecho, el navegador cliente nunca recibir cdigo PHP). Para
introducir comentarios en nues- tro cdigo, disponemos de dos opciones:

// Comentario de una sola lnea

/* Esto es un comentario de varias lneas.

Para ello usamos este otro marcador de inicio y final de comentario */

2.8.2.3 Variables

PHP no precisa que declaremos a priori la variable que vamos a usar ni el tipo de
sta. PHP declarar la variable y le asignar el tipo de datos correcto en el
momento en que la usemos por primera vez:

<?php $cadena = Hola Mundo;

$numero = 100;

$decimal = 8.5;

?>

Como podemos observar, las tres variables fueron definidas en el momento de


asignarles valor y no tuvimos que definir tipos.

En PHP las variables pueden tener, bsicamente, dos mbitos: uno global, en el
que sern accesibles desde todo el cdigo y otro local, en el que slo sern
accesibles desde la funcin en la que las creamos. Para asignar a una variable un
mbito global bastar con declararla (en este caso, s que hace falta una
declaracin de variable) y usar la palabra reservada global en la declaracin:

<?php

82
UNIVERSIDAD TECNICA DE MACHALA

global $test;

?>

Las variables que no califiquemos como globales, pero que sean definidas fuera
de cualquier funcin, tendrn como mbito el global.

Bastar con definir una variable dentro de una funcin. En ese caso, su mbito
quedar restringido a la funcin donde la declaremos.

<?php

global $variable; // Variable global

$a=1; // Variable global implcita

function suma()

$b=1; // b es una variable local

$res=$a+$b; // res es una variable local

?>

Podemos ver que tanto a como variable son variables globales, mientras que
b.y.res son variables locales.

Adems, disponemos en PHP de variables de vectores o arrays. stas son


variables que pueden contener listas de elementos, a los que accederemos por
medio de un ndice.

<?php

$mares = array(); //con array() declaramos un vector

$mares[0]= Mediterrneo;

$mares[1] = Aral;

83
UNIVERSIDAD TECNICA DE MACHALA

$mares[2] = Muerto;

Como podemos ver, hemos declarado la variable mares con una llamada a
array(). Esto indica a PHP que dicha variable es un vector de elementos.

Para acceder a los elementos individuales del vector, debemos utilizar el nombre
del vector e indicar la posicin del elemento al que queremos acceder entre
corchetes. En PHP los vectores empiezan a numerarse en 0.

Adems de vectores con ndices numricos, PHP soporta vectores cuyos ndices
sean cadenas de texto:

<?php

$montaas = array(); //con array() declaramos un vector

$montaas[Everest]= Himalaya;

$montaas[Fitz Roy] = Andes;

$montaas[Montblanc] = Alpes;

echo $montaas[Everest]; // Imprimir Himalaya

?>

5.2.4. Operadores

Los operadores son smbolos que se utilizan para realizar tanto operaciones
matemticas como comparaciones u operaciones lgicas.

Los ms habituales en PHP son:

Operadores matemticos:

a)+ Suma varios nmeros:5 + 4 = 9.

b)Resta varios nmeros:5-4=1.

c) * Realiza una multiplicacin:3 * 3 = 9.

d)/ Realiza una divisin: 10/2 = 5.

84
UNIVERSIDAD TECNICA DE MACHALA

e)% Devuelve el residuo de una divisin: 10 % 3 = 1.

f)++ Incrementa en 1: $v++ (Incrementa $v en 1).

g) Decrementa en 1: $v-- (Decrementa $v en 1).

Operadores de comparacin:

a)== Evala a cierto si la condicin de igualdad se cumple:

2 == 2 (Verdadero).

b)!= Evala a cierto si la condicin de igualdad no se cumple

2 != 2 (Falso).

c)< Evala a cierto si un nmero es menor que el otro

2 < 5(Verdadero).

d)> Evala a cierto si un nmero es mayor que el otro

6 > 4 (Verdadero).

e)<=Evala a cierto si un nmero es menor o igual que otro

2 <= 5 (Verdadero).

f)>=Evala a cierto si un nmero es mayor o igual que otro

6 >= 4 (Verdadero).

Operadores lgicos:

a) && Evala a cierto si los dos operadores son ciertos.

b) || Evala a cierto si alguno de los operadores es cierto.

c) And Evala a cierto si los operadores son ciertos.

d) Or Evala a cierto si alguno de los operadores es cierto.

e) Xor Evala a cierto si o un operador es cierto o lo es el otro.

85
UNIVERSIDAD TECNICA DE MACHALA

f) ! Invierte el valor de verdad del operador.

El siguiente ejemplo nos mostrar los operadores matemticos ms comunes:

<?php

$a = 5;

$b = 10;

$c = ($a + $b); //$c vale 15

$d = ($b - $a); //$d vale 5

$e = ($a * $b); //$e vale 50

$f = ($b / $a); //$f vale 2

$g = ($b % $a); //$g vale 0

?>

2.8.2.4 Estructuras de Control

Las estructuras de control de PHP nos permiten controlar el flujo de la operacin


de nuestro programa, controlando en todo momento qu porciones de cdigos se
ejecutan en funcin de determinadas condiciones.

Condicionales

Los condicionales son estructuras que permiten llevar a cabo determinadas


operaciones slo en caso de cumplirse una condicin. Suelen llamarse tambin
bifurcaciones, ya que permiten dividir el flujo de ejecucin del programa en
funcin del valor de verdad de una sentencia o condicin.

Disponemos en PHP de dos condicionales principales, el condicional if/else y el


condicional switch.

El condicional if nos permite escoger entre dos bloques de cdigo en funcin del
cumplimiento o no de una condicin.

<?php

86
UNIVERSIDAD TECNICA DE MACHALA

$a = 0;

$b = 1;

if($a == $b)

echo Pues resulta que 0 es igual a 1;

}else

echo Todo sigue igual. 0 no es igual a 1;

?>

Si seguimos el flujo de ejecucin de este programa, veremos que inicialmente


creamos dos variables a y b, a las que asignamos dos valores numricos
diferentes. Acto seguido llegamos a la sentencia condicional if. sta verifica la
veracidad o cumplimiento de la condicin especificada. En este caso tenemos un
operador= = de igualdad, el cual devuelve que la comparacin es falsa; por tanto,
la sentencia if no ejecuta el primer bloque de cdigo, el que habra ejecutado en
caso de cumplirse la condicin, sino que ejecuta el segundo, el precedido por
else.

Podemos, pues, definir la estructura de if/else como:

if(condicin)

cdigo que se ejecutar si la condicin es cierta

else

87
UNIVERSIDAD TECNICA DE MACHALA

cdigo que se ejecutar si la condicin es falsa

Podemos comprobar ms de una condicin encadenando diversos

if/else:

if(condicin1)

if(condicin2)

cdigo que se ejecutar si la condicin2 es cierta y la condicin 1 es cierta

else

cdigo que se ejecutar si la condicin2 es falsa y la condicin 1 es cierta

else

cdigo que se ejecutar si la condicin1 es falsa

Un caso extendido del encadenamiento de if/else es el correspondiente a aquellos


supuestos en los que debemos ejecutar cdigo diferente en funcin del valor de
una variable. A pesar de que podemos realizar un encadenamiento de if/else
comprobando el valor de dicha variable, si debemos comprobar diversos valores
el cdigo resulta engorroso. Por ello PHP proporciona una construccin
condicional ms adecuada para ello denominada

switch.

88
UNIVERSIDAD TECNICA DE MACHALA

<?php

$a=1;

switch($a)

case1:

case 2: echo A es 1 o 2; break;

case 3: echo A es 3; break;

case 4: echo A es 4; break;

case 5: echo A es 5; break;

case 6: echo A es 6; break;

default: echo A es otro valor;

La ejecucin de switch es un poco compleja; de hecho, es muy parecida a la de


C. La sentencia switch se ejecuta lnea a lnea. Inicialmente no se ejecuta ningn
cdigo de ninguna lnea. Cuando se encuentra un case con un valor que coincide
con el de la variable del switch PHP empieza a ejecutar las sentencias. stas
continan siendo ejecutadas hasta el final de switch o hasta que se encuentre un
break. Por eso en el ejemplo si la variable vale 1 o si la variable vale 2, se ejecuta
el mismo bloque de cdigo.

Disponemos, adems, de un valor especial default que siempre coincide con el


valor de la variable.

Bucles

La otra estructura de control importante es la de los bucles. Los bucles nos


permiten ejecutar repetidamente un bloque de cdigo en funcin de una
condicin.

89
UNIVERSIDAD TECNICA DE MACHALA

Tenemos tres bucles principales en PHP: for, while y foreach.

El bucle while

El bucle while es el ms simple de los tres, pero an as probablemente sea el


bucle ms utilizado. El bucle se ejecuta mientras la condicin que le hemos
pasado sea cierta:

<?php

$a = 1;

while($a < 4)

echo a=$a<br>;

$a++;

?>

En este caso, el bucle se ejecutar cuatro veces. Cada vez que se ejecute,
incrementaremos el valor de a e imprimiremos un mensaje. Cada vez que se
vuelve a ejecutar el cdigo, while comprueba la condicin y, en caso de cumplirse,
vuelve a ejecutar el cdigo. La cuarta vez que se ejecute, como a valdr cuatro,
no se cumplir la condicin especificada y el bucle no volver a ejecutarse.

El bucle for

Para bucles del tipo anterior, donde la condicin de continuacin es sobre una
variable que aumenta o disminuye con cada iteracin, disponemos de un tipo de
bucle ms apropiado: for.

El cdigo anterior, usando for quedara de la forma:

90
UNIVERSIDAD TECNICA DE MACHALA

<?php

for($a=1;$a < 4; $a++)

echo a=$a<br>;

?>

Como podemos ver, en el caso del bucle for en la misma sentencia declaramos la
variable sobre la que iteraremos, la condicin de finalizacin y la de incremento o
continuacin.

foreach

Para aquellos casos en los que queremos que nuestro bucle haga un recorrido
sobre los elementos de un vector disponemos de una sentencia que nos simplifica
este hecho: foreach.

<?php

$a = array (1, 2, 3, 17);

foreach ($a as $v

print Valor: $v.\n;

}?>

Como podemos ver, en su forma ms simple, foreach asigna a una variable v uno
a uno todos los valores de un vector a.

2.8.2.5 Funciones

Otro punto clave de PHP son las funciones. Las funciones en PHP pueden recibir
o no, parmetros y siempre pueden devolver un valor. Las funciones sirven para

91
UNIVERSIDAD TECNICA DE MACHALA

dar mayor modularidad al cdigo, evitan- do as la repeticin de cdigo,


permitiendo el aprovechamiento de cdigo entre proyectos, etc.

Un esquema de funcin es el siguiente:

<?php

function ejemp ($arg_1, $arg_2, ..., $arg_n)

{// Cdigo de la funcin

return$retorno;

?>

Podemos llamar a las funciones desde el cdigo principal o desde otras


funciones:

<?php

function suma ($a1, $a2)

$retorno=$a1+$a2;

return$retorno;

}function sumatorio ($b1, $b2, $b3)

for($i=$b1;$i<$b2;$i++)

$res=suma($res,$b3);

}return$res;

}echo sumatorio(1,3,2);

92
UNIVERSIDAD TECNICA DE MACHALA

?>

El resultado de ejecutar dicho programa ser que imprimir un nmero seis.

Las funciones en PHP reciben habitualmente los parmetros por valor, es decir, la
variable que se pasa como parmetro en el cdigo que llama no sufre
modificaciones si el parmetro de la funcin es modificado. Podemos, no
obstante, pasar parmetros por referencia (de forma similar a los punteros de
otros lenguajes de programacin):

<?php

function modifi ($&a1, $a2)

$a1=0;

$a2=0;

}$b1=1;

$b2=1;

modifi($b1,$b2);

echo $b1. .$b2;

?>

En este caso, el resultado del programa ser:

10

2.8.2.6 Uso de PHP para Aplicaciones Web

Para usar PHP como lenguaje de desarrollo de aplicaciones web, la primera


necesidad que tenemos es saber cmo interactuar PHP con nuestro usuario
web. Podemos dividir dicha interactuacin en dos partes, mostrando informacin
al usuario y recogiendo informacin de ste.

Mostrando informacin

93
UNIVERSIDAD TECNICA DE MACHALA

Tenemos dos mecanismos para que PHP muestre informacin al usuario: por un
lado podemos escribir pginas HTML corrientes, insertando slo el cdigo PHP
que requerimos en medio del cdigo HTML. Por ejemplo:

<HTML>

<HEAD>

<TITLE>Ttulo del documento</TITLE>

</HEAD>

<BODY>

<h1>Cabecera H1</h1>

<?php $a=1; ?>

<h1>Cabecera H1 segunda</h1>

<?php $b=1; ?>

</BODY>

</HTML>

Por otro lado, podemos usar PHP para generar contenido dinmico. Para ello
debemos usar las instrucciones de PHP de salida de datos, la ms importante,
echo.

<HTML>

<HEAD>

<TITLE>Ttulo del documento</TITLE>

</HEAD>

<BODY>

<h1>Cabecera H1</h1>

<?php echo Contenido de la <B>pgina</B>; ?>

94
UNIVERSIDAD TECNICA DE MACHALA

<h1>Cabecera H1 segunda</h1>

</BODY>

</HTML>

Recogida de informacin del usuario

Para recoger informacin del usuario, podemos utilizar los formularios de HTML,
utilizando nuestros programas PHP como ACTION de dichos formularios. Como
PHP fue diseado para crear aplicaciones web, el acceso a los valores
introducidos por el usuario en los campos del formulario es realmente fcil en
PHP, ya que ste define un vector llamado REQUEST al que accedemos con el
nombre del campo como ndice y que contiene el valor contenido en ste al
ejecutar el programa PHP.

Si tenemos este formulario:

<HTML>

<HEAD>

<TITLE>Ttulo del documento</TITLE>

</HEAD>

<BODY>

<FORM ACTION=programa.php METHOD=GET>

Entre su nombre: <INPUT TYPE=TEXT NAME=nombre>

<INPUT TYPE=submit>

</FORM>

</BODY>

</HTML>

Y definimos el siguiente programa PHP como programa.php para que responda al


formulario:

95
UNIVERSIDAD TECNICA DE MACHALA

<HTML>

<HEAD>

<TITLE>Ttulo del documento</TITLE>

</HEAD>

<BODY>

<?php

echo Hola .$REQUEST[nombre];

?>

</BODY>

</HTML>

Este programa recoger el nombre introducido por el usuario y nos lo mostrar


por pantalla.

2.8.2.7 Funciones de cadena

PHP provee de un conjunto de funciones muy interesantes para el trabajo con


cadenas de texto. Algunas de las ms destacadas son:

strlenDevuelve la longitud de una cadena.

explodeDivide una cadena en funcin de un carcter separador, y devuelve un


vector con cada uno de los trozos de la cadena.

implodeActa al revs que explode, uniendo diversas cadenas de un vector con


un carcter de unin.

strcmpCompara dos cadenas a nivel binario.

strtolowerConvierte una cadena a minsculas.

strtoupperConvierte una cadena a maysculas.

96
UNIVERSIDAD TECNICA DE MACHALA

chopElimina el ltimo carcter de una cadena, til para eliminar saltos de lnea o
espacios finales superfluos.

strposBusca dentro de una cadena otra cadena especificada y devuelve su


posicin.

str_replaceReemplaza en una cadena una aparicin de una subcadena por otra


subcadena.

Podemos ver el funcionamiento de algunas de estas funciones en el siguiente


ejemplo:

<?php

$cadena1 = hola;

$cadena2 = pera,manzana,fresa;

$longitud = str_len($cadena1);//longitud=4

$partes = explode(,,$cadena2);

//genera elarray $partes con $partes[0]=pera,

//$partes[1]=manzana; y $partes[2]=fresa;

$chop = chop($cadena); // chop elimina la a

$cadena3 = str_replace(,,;,$otracadena);

//$cadena3 contiene: pera-manzana-fresa

//Cambiamos las , por

?>

2.8.2.8 Acceso a ficheros

PHP proporciona un amplio repertorio de mtodos para el acceso a ficheros.


Vamos a mostrar la ms prctica y simple, muy adecuada si los ficheros a los que
accederemos son pequeos.

97
UNIVERSIDAD TECNICA DE MACHALA

El cdigo que comentaremos es el siguiente:

<?php

$fichero = file(entrada.txt);

$numlin = count($fichero);

for($i=0; $i < $numlin; $i++)

echo $fichero[$i];

?>

En este ejemplo leemos un archivo que tiene por nombreentrada.txt y lo


mostramos como salida. El primer paso que seguimos es declarar la variable
fichero, lo que nos genera un vector en el que PHP colocar todas las lneas del
archivo. Para ello usaremos la funcin de librera file. El siguiente paso consiste
en averiguar cuntos elementos contiene fichero. Para ello usamos la funcin
count, que nos devuelve el tamao de un vector, en este caso el vector que
hemos generado al leer el fichero. Finalmente podemos escribir un bucle que
recorrer el vector tratando cada una de las lneas del archivo.

PHP proporciona muchas funciones ms de tratamiento de ficheros. Disponemos,


por ejemplo, de la funcin fopen, que permite abrir ficheros o recursos sin leerlos
ntegramente en memoria y que es capaz de abrir ficheros de la siguiente forma:

<?php

$recurso = fopen (entrada.txt, r);

$recurso = fopen (salida.gif, wb);

$recurso = fopen (http://www.uoc.edu/, r);

$recurso = fopen (

98
UNIVERSIDAD TECNICA DE MACHALA

ftp://usuario:password@uoc.edu/salida.txt, w);

?>

Ah podemos ver cmo abrimos un fichero para lectura (r), para escritura
binaria( w b ), una pgina web para leerla como si se tratara de un fichero y un
fichero va FTP para escribirlo, respectivamente.

2.8.2.9 Acceso a bases de datos

PHP proporciona mtodos para acceder a un gran nmero de sistemas de bases


de datos (mySQL, PostgreSQL, Oracle, ODBC, etc.).

Esta funcionalidad es imprescindible para el desarrollo de aplicaciones web


complejas.

Acceso a mySQL desde PHP

mySQL es uno de los sistemas de bases de datos ms populares en el desarrollo


de aplicaciones web ligeras por su alto rendimiento para trabajar con bases de
datos sencillas. Gran cantidad de aplicaciones web de consulta, etc. estn
desarrolladas con el dueto PHP- mySQL. Por eso el API de acceso a mySQL de
PHP est altamente desarrollado.

Vamos a ver un ejemplo de acceso a la base de datos desde PHP para


comprobar as la sencillez con la que podemos usar bases de datos en nuestras
aplicaciones web:

<?php

$conexion=mysql_connect($servidor,$usuario,$password);

if(!$conexion).

exit();

}if(!(mysql_select_db($basedatos,$conexion)))

99
UNIVERSIDAD TECNICA DE MACHALA

exit();

}$consulta=mysql_query(

select nombre, telefono from agenda order by nombre,

$conexion);

while($fila = mysql_fetch_array($consulta))

$nombre = $fila[nombre];

$telfono = $fila[telefono];

echo $nombre: $telefono\n<br>;

}mysql_free_result($consulta);

mysql_close($conexion);

?>

Podemos ver que el primer paso para acceder a la base de datos es abrir una
conexin con sta. Para ello necesitaremos la direccin del ordenador que
contenga la base de datos, el usuario con el que conectaremos y la palabra de
acceso a dicha base de datos. Una vez conectados al servidor de mySQL,
debemos seleccionar qu base de datos de las mltiples que puede tener el
servidor queremos usar para trabajar. A raz de esta secuencia de conexin,
tendremos en la variable conexin los datos de la conexin a mySQL. Debemos
pasar esta variable a todas las funciones de PHP que accedan a bases de datos.
Ello nos permite disponer de diversas conexiones a diferentes bases de datos
abiertas al mismo tiempo y trabajar con ellas simultneamente.

El siguiente paso ser ejecutar una sentencia de consulta de bases de datos en el


lenguaje de nuestra base de datos, en este caso SQL. Para ello usaremos la
funcin de PHPmysql_query, que nos devolver el resultado de la consulta y que
guardaremos en la variable consulta. La consulta concreta enumera el contenido

100
UNIVERSIDAD TECNICA DE MACHALA

de una tabla de la base de datos llamada agenda, la cual contiene dos columnas
denominadas nombre y telfono.

Posteriormente, podemos ejecutar un bucle que recorrer todos los registros para
que nos devuelva la consulta a la base de datos, accediendo a ellos uno a uno y
pudiendo as mostrar los resultados.

Una vez hayamos acabado el acceso a la base de datos, debemos liberar la


memoria y los recursos consumidos con la consulta. Para ello utilizaremos la
funcinmysql_free_result y luego podremos cerrar la conexin a mySQL.

Acceso a PostgreSQL desde PHP

De forma similar a como accedemos a mySQL, podemos acceder a bases de


datos que tengamos en servidores PostgreSQL. Para ello utilizaremos, al igual
que en la seccin anterior, un cdigo que enumerar el contenido de nuestra tabla
agenda.

<?php

//conectamos a la base de datos

//$conexion = pg_connect(dbname=.$basedatos);

// conectamos a la base de datos en servidor puerto 5432

//$conexion = pg_connect(

// host=$servidor port=5432 dbname=$basedatos);

//conectamos a la base de datos en servidor puerto 5432

//con usuario y password

$conexion = pg_connect(host=$servidor port=5432 .

dbname=$basedatos user=$usuario password=$password)

or die No conecta;

$resultado = pg_query($conexin,

101
UNIVERSIDAD TECNICA DE MACHALA

select nombre, telefono from agenda order by nombre);

while($fila = pg_fetch_array($result))

$nombre = $fila[nombre];

$telefono = $fila[telefono];

echo $nombre: $telefono\n<br>;

}pg_close($dbconn);

?>

Como podemos observar si comparamos este ejemplo con el anterior realizado en


mySQL, existe gran similitud entre ambos cdigos. No obstante, a pesar de las
similitudes, el API de PostgreSQL para PHP presenta algunas diferencias
respecto al de mySQL, ya que por un lado ofrece mayor flexibilidad a la hora de
conectar y por otro lado, proporciona el soporte para trabajar con objetos grandes,
etc., lo cual muestra la mayor potencia de PostgreSQL frente a mySQL. Un punto
controvertido en el API de PostgreSQL es que nos asla totalmente del sistema de
transacciones de PostgreSQL, cosa que a pesar de que en la mayora de
situaciones es ms que correcta, existen casos en los que sera deseable un
mayor control sobre stas.

2.8.2.10 Para seguir profundizando

Uno de los puntos fuertes y una de las claves del xito de PHP como lenguaje de
programacin de aplicaciones web reside en la gran cantidad de libreras,
mdulos, etc., que se han desarrollado para l. PHP pone a nuestra disposicin
una cantidad ingente de API, funciones, mdulos, clases (recordad que,
progresivamente, PHP se est convirtiendo en un lenguaje de programacin
orientado a objetos), los cuales nos permiten operar con la complejidad creciente
de las aplicaciones web. Esta diversidad de soporte incluye, entre otras cosas:

Control de sesiones.

102
UNIVERSIDAD TECNICA DE MACHALA

Control de identidad de usuarios.

Plantillas HTML.

Carritos de compra.

Creacin dinmica de HTML.

Creacin de imgenes dinmicamente.

Manejo decookies.

Transferencia de ficheros.

Manejo de XML, XSLT, etc.

Mltiples protocolos de comunicaciones: HTTP, FTP, etc.

Creacin de ficheros PDF.

Acceso a directorios LDAP.

Interfaces a multitud de bases de datos: Oracle, Sybase, etc.

Expresiones regulares.

Manejo de equipos de red: SNMP.

Servicios web: XMLRPC, SOAP.

Manejo de contenidos Flash.

Adems de su utilidad como lenguaje de programacin de aplicaciones web, PHP


est siendo cada vez ms usado como lenguaje de programacin de propsito
general, incluyendo en su arsenal de funciones interfaces hacia las libreras de
interfaces grficos ms conocidas (Win32 o GTK, entre otras), acceso directo a
funciones del sistema operativo, etc.

Por eso, en caso de desear usar PHP para desarrollar algn proyecto, resulta
altamente recomendable visitar la pgina web del proyecto (http://www.php.net),
ya que es muy posible que nos ofrezca un surtido de herramientas que nos
faciliten grandemente el trabajo. Disponemos, adems, de PEAR, un repositorio

103
UNIVERSIDAD TECNICA DE MACHALA

de PHP que nos proporcionar la mayor parte de las herramientas que podamos
llegar a necesitar.

2.9 Acceso a Bases de Datos

Una de las necesidades ms perentorias con las que nos enfrentamos al


desarrollar aplicaciones para Internet con Java, y para muchas otras aplicaciones,
es la de disponer de un almacn de datos potente, robusto, rpido y fcilmente
accesible. Para ello existen multitud de sistemas gestores de bases de datos
(SGBD) de cdigo libre. Analizaremos algunos de ellos en las siguientes
secciones y presentaremos posteriormente una tecnologa que proporciona Java
para acceder a SGBD, especialmente relacionales, llamada JDBC (algunas veces
errneamente expandido como Java database connectivity).

2.9.1 Introduccin a las Bases de Datos

Uno de los puntos crticos en el desarrollo de aplicaciones web es la eleccin del


SGBD que utilizaremos. Existen en la actualidad bastantes SGBD de cdigo libre,
muchos de ellos del mismo nivel cualitativo que algunos de los SGBD comerciales
ms conocidos.

La mayora de los SGBD de cdigo libre proceden de dos fuentes principales: por
un lado, de proyectos que nacieron como cdigo libre desde su principio
(proyectos de investigacin, etc.) y por el otro, tenemos SGBD que pertenecan a
empresas de software propietario, cuyo negocio principal no es el SGBD. Estas
compaas optan por poner el producto bajo el amparo de una licencia de cdigo
libre, abriendo as su desarrollo a la comunidad. Veremos a continuacin algunos
de los SGBD de cdigo libre ms emblemticos.

2.9.2 PostgreSQL

PostgreSQL (o Postgres) es uno de los SGBD ms veteranos y conocidos del


mundo del cdigo libre. Arranca a mediados de los ochenta en la Universidad de
Berkeley, bajo el nombre Postgres, a raz de la investigacin del grupo de bases

104
UNIVERSIDAD TECNICA DE MACHALA

de datos de Berkeley (especialmente de Michael Stonebraker). Postgres fue


evolucionando hasta llegar a Postgres 4.2 en 1994. Postgres no usaba SQL como
lenguaje de consulta, sino Postquel, un lenguaje propio. En 1995 Andrew Yu y
Jolly Chen aadieron un intrprete SQL a Postgres 4.2, dando lugar al nacimiento
de Postgres95, un producto ya bajo licencia de cdigo libre y que sali de
Berkeley para convertirse en un desarrollo llevado a travs de todo Internet. En
1996 se eligi un nuevo nombre que resistiera el paso de los aos y reflejara la
relacin del proyecto con el original Postgres (an disponible) y las nuevas
diferencias (bsicamente, el uso de SQL). Nace as PostgreSQL.

A partir de ese momento, PostgreSQL se ha convertido en una de las bases de


datos de eleccin en infinidad de proyectos, proporcionando al usuario algunas
prestaciones del mismo nivel que las que ofrecen sistemas gestores de bases de
datos comerciales como Informix y Oracle.

Las caractersticas ms destacadas de PostgreSQL son:

Soporte para transacciones.

Subconsultas.

Soporte de vistas.

Integridad referencial.

Herencia de tablas.

Tipos definidos por el usuario.

Columnas como vectores que pueden almacenar ms de un valor.

Aadir campos a tablas en tiempo de ejecucin.

Funciones de agregacin (como sum() o count()) definibles por el usuario.

Triggers, comandos SQL que deben ejecutarse al actuar sobre una tabla.

Tablas de sistema que podemos consultar para obtener informacin de tablas,


de la base de datos y del motor de bases de datos.

105
UNIVERSIDAD TECNICA DE MACHALA

Soporte de objetos binarios grandes (mayores de 64 KB).

2.9.3 MySQL

MySQL se disputa con PostgreSQL el puesto de SGBD ms conocido y usado de


cdigo libre. MySQL es un SGBD desarrollado por la empresa MySQL AB, una
empresa de origen sueco que lo desarrolla bajo licencia de cdigo libre
(concretamente bajo GPL), aunque tambin, si se desea, puede ser adquirido con
licencia comercial para ser incluido en proyectos no libres.

MySQL es un sistema gestor de base de datos extremadamente rpido. Aunque


no ofrece las mismas capacidades y funcionalidades que otras muchas bases de
datos, compensa esta pobreza de prestaciones con un rendimiento excelente que
hace de ella la base de datos de eleccin en aquellas situaciones en las que
necesitamos slo unas capacidades bsicas.

Las funcionalidades ms destacadas de MySQL son:

Soporte de transacciones (nuevo en MySQL 4.0 si usamos InnoDB como motor


de almacenamiento).

Soporte de replicacin (con unm a s t e r actualizando mltiples slaves).

Librera para uso embebido.

Bsqueda por texto.

Cache de bsquedas (para aumentar el rendimiento).

106
UNIVERSIDAD TECNICA DE MACHALA

2.10 Adobe Photoshop

Adobe Photoshop (Taller de Fotos) es una aplicacin informtica en forma de


taller de pintura y fotografa que trabaja sobre un "lienzo" y que est destinado
para la edicin, retoque fotogrfico y pintura a base de imgenes de mapa de bits
(o grficos rasterizados).

Es un producto elaborado por la compaa de software Adobe Systems,


inicialmente para computadores Apple pero posteriormente tambin para
plataformas PC con sistema operativo Windows.

Photoshop en sus versiones iniciales trabajaba en un espacio bitmap formado por


una sola capa, donde se podan aplicar toda una serie de efectos, textos, marcas
y tratamientos. En cierto modo tena mucho parecido con las tradicionales
ampliadoras. En la actualidad lo hace con mltiples capas.

A medida que ha ido evolucionando el software ha incluido diversas mejoras


fundamentales, como la incorporacin de un espacio de trabajo multicapa,
inclusin de elementos vectoriales, gestin avanzada de color (ICM / ICC),
tratamiento extensivo de tipografas, control y retoque de color, efectos creativos,
posibilidad de incorporar plugins de terceras compaas, exportacin para web
entre otros.

Photoshop se ha convertido, casi desde sus comienzos, en el estndar de facto


en retoque fotogrfico, pero tambin se usa extensivamente en multitud de
disciplinas del campo del diseo y fotografa, como diseo web, composicin de
imgenes bitmap, estilismo digital, fotocomposicin, edicin y grafismos de vdeo
y bsicamente en cualquier actividad que requiera el tratamiento de imgenes
digitales.

107
UNIVERSIDAD TECNICA DE MACHALA

Photoshop ha dejado de ser una herramienta nicamente usada por diseadores /


maquetadores, ahora Photoshop es una herramienta muy usada tambin por
fotgrafos profesionales de todo el mundo, que lo usan para realizar el proceso de
"positivado y ampliacin" digital, no teniendo que pasar ya por un laboratorio ms
que para la impresin del material.

Con el auge de la fotografa digital en los ltimos aos, Photoshop se ha ido


popularizando cada vez ms fuera de los mbitos profesionales y es quiz, junto a
Windows y Flash (de Adobe Systems Tambin) uno de los programas que resulta
ms familiar (al menos de nombre) a la gente que comienza a usarlo[cita
requerida], sobre todo en su versin Photoshop Elements, para el retoque casero
fotogrfico.

Aunque el propsito principal de Photoshop es la edicin fotogrfica, este tambin


puede ser usado para crear imgenes, efectos, grficos y ms en muy buena
calidad. Aunque para determinados trabajos que requieren el uso de grficos
vectoriales es ms aconsejable utilizar Adobe Illustrator.

Entre las alternativas a este programa, existen algunos programas libres como
GIMP, orientada a la edicin fotogrfica en general, o propietarios como
PhotoPaint de Corel, capaz de trabajar con cualquier caracterstica de los
archivos de Photoshop, y tambin con sus filtros plugin.

108
UNIVERSIDAD TECNICA DE MACHALA

2.11 Adobe Dreamweaver

Adobe Dreamweaver es una aplicacin en forma de estudio (basada en la forma


de Adobe Flash) enfocada a la construccin y edicin de sitios y aplicaciones Web
basados en estndares. Creado inicialmente por Macromedia (actualmente
producido por Adobe Systems). Es el programa de este tipo ms utilizado en el
sector del diseo y la programacin web, por sus funcionalidades, su integracin
con otras herramientas como Adobe Flash y, recientemente, por su soporte de los
estndares del World Wide Web Consortium. Su principal competidor es Microsoft
Expression Web y tiene soporte tanto para edicin de imgenes como para
animacin a travs de su integracin con otras. Hasta la versin MX, fue
duramente criticado por su escaso soporte de los estndares de la web, ya que el
cdigo que generaba era con frecuencia slo vlido para Internet Explorer, y no
validaba como HTML estndar. Esto se ha ido corrigiendo en las versiones
recientes.

La gran ventaja de este editor sobre otros es su gran poder de ampliacin y


personalizacin del mismo, puesto que en este programa, sus rutinas (como la de
insertar un hipervinculo, una imagen o aadir un comportamiento) estn hechas
en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto
hace que los archivos del programa no sean instrucciones de C++ sino, rutinas de
Javascript que hace que sea un programa muy fluido, que todo ello hace, que
programadores y editores web hagan extensiones para su programa y lo ponga a
su gusto.

Las versiones originales de la aplicacin se utilizaban como simples editores


WYSIWYG. Sin embargo, versiones ms recientes soportan otras tecnologas
web como CSS, JavaScript y algunos frameworks del lado servidor.

109
UNIVERSIDAD TECNICA DE MACHALA

Dreamweaver ha tenido un gran xito desde finales de los 90 y actualmente


mantiene el 90% del mercado de editores HTML. Esta aplicacin est disponible
tanto para la platafoma MAC como para Windows, aunque tambin se puede
ejecutar en plataformas basadas en UNIX utilizando programas que implementan
las API's de Windows, tipo Wine.

Como editor WYSIWYG que es, Dreamweaver permite ocultar el cdigo HTML de
cara al usuario, haciendo posible que alguien no entendido pueda crear pginas y
sitios web fcilmente sin necesidad de escribir cdigo.

Algunos desarrolladores web criticaban esta propuesta ya que crean pginas


HTML ms largas de lo que solan ser al incluir mucho cdigo intil, lo cual va en
detrimento de la ejecucin de las pginas en el navegador web. Esto puede ser
especialmente cierto ya que la aplicacin facilita en exceso el diseo de las
pginas mediante tablas. Adems, algunos desarrolladores web han criticado
Dreamweaver en el pasado porque creaba cdigo que no cumpla con los
estndares del consorcio Web (W3C).

No obstante, Adobe ha aumentado el soporte CSS y otras maneras de disear


pginas sin tablas en versiones posteriores de la aplicacin, haciendo que se
reduzca el exceso de cdigo.

Dreamweaver permite al usuario utilizar la mayora de los navegadores Web


instalados en su ordenador para previsualizar las pginas web. Tambin dispone
de herramientas de administracin de sitios dirigidas a principiantes como, por
ejemplo, la habilidad de encontrar y reemplazar lneas de texto y cdigo por
cualquier tipo de parmetro especificado, hasta el sitio web completo. El panel de
comportamientos tambin permite crear JavaScript bsico sin conocimientos de
cdigo.

Con la llegada de la versin MX, Macromedia incorpor herramientas de creacin


de contenido dinmico en Dreamweaver. En lo fundamental de las herramientas
HTML WYSIWYG, tambin permite la conexin a Bases de Datos como MySQL y
Microsoft Access, para filtrar y mostrar el contenido utilizando tecnologa de script
como, por ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP

110
UNIVERSIDAD TECNICA DE MACHALA

(JavaServer Pages) y PHP sin necesidad de tener experiencia previa en


programacin.

Un aspecto de alta consideracin de Dreamweaver es su arquitectura extensible.


Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se
conocen, son pequeos programas, que cualquier desarrollador web puede
escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e
instalar, ofreciendo as funcionalidades aadidas a la aplicacin. Dreamweaver
goza del apoyo de una gran comunidad de desarrolladores de extensiones que
hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayora
de las tareas de desarrollo web, que van desde simple efectos rollover hasta
completas cartas de compra.

Tambin podra decirse, que para un diseo ms rpido y a la vez fcil podra
complementarse con fireworks en donde podra uno disear un men o para otras
creaciones de imgenes (gif web, gif websnap, gif adaptable, jpeg calidad
superior, jpeg archivo ms pequeo, gif animado websnap) para un sitio web y
despus exportar la imagen creada y as utilizarla como una sola, en donde ya
llevara los vnculos a un dicho sitio en especifico que uno le haya dado.(MRR -
U.P.C.)

111
UNIVERSIDAD TECNICA DE MACHALA

2.12 JavaScript

JavaScript es un lenguaje de scripting basado en objetos sin tipo y liviano,


utilizado para acceder a objetos en aplicaciones. Principalmente, se utiliza
integrado en un navegador web permitiendo el desarrollo de interfaces de
usuario mejoradas y pginas web dinmicas. JavaScript es un dialecto de
ECMAScript y se caracteriza por ser un lenguaje basado en prototipos, con
entrada dinmica y con funciones de primera clase. JavaScript ha tenido
influencia de mltiples lenguajes y se dise con una sintaxis similar al
lenguaje de programacin Java, aunque ms fcil de utilizar para personas
que no programan.

Todos los navegadores modernos interpretan el cdigo JavaScript integrado


dentro de las pginas web. Para interactuar con una pgina web se provee al
lenguaje JavaScript de una implementacin del Document Object Model
(DOM).

El lenguaje fue inventado por Brendan Eich en la empresa Netscape


Communications, la que desarroll los primeros navegadores web
comerciales. Apareci por primera vez en el producto de Netscape llamado
Netscape Navigator 2.0.

Tradicionalmente, se vena utilizando en pginas web HTML, para realizar


operaciones y en el marco de la aplicacin cliente, sin acceso a funciones del
servidor. JavaScript se ejecuta en el agente de usuario, al mismo tiempo que
las sentencias van descargndose junto con el cdigo HTML.

112
UNIVERSIDAD TECNICA DE MACHALA

Inicialmente los autores lo llamaron Mocha y ms tarde LiveScript pero fue


rebautizado como JavaScript en un anuncio conjunto entre Sun Microsystems
y Netscape, el 4 de diciembre de 1995.

En 1997 los autores propusieron JavaScript para que fuera adoptado como
estndar de la European Computer Manufacturers 'Association ECMA, que a
pesar de su nombre no es europeo sino internacional, con sede en Ginebra.
En junio de 1997 fue adoptado como un estndar ECMA, con el nombre de
ECMAScript. Poco despus tambin como un estndar ISO.

JScript es la implementacin de ECMAScript de Microsoft, muy similar al


JavaScript de Netscape, pero con ciertas diferencias en el modelo de objetos
del navegador que hacen ambas versiones sean incompatibles con
frecuencia.

Para evitar estas incompatibilidades, el World Wide Web Consortium dise el


estndar Document Object Model (DOM, Modelo de Objetos del Documento
en castellano), que incorporan Konqueror, las versiones 6 de Internet Explorer
y Netscape Navigator, Opera la versin 7, y Mozilla Application Suite, Mozilla
desde su primera versin.

2.12.1 Conceptos bsicos

Todos los que hasta ahora hayan seguido el curso de HTML, se habrn dado
cuenta de una cosa: crear un documento HTML es crear algo de caracter
esttico, inmutable con el paso del tiempo. La pgina se carga, y ah termina
la historia. Tenemos ante nosotros la informacin que buscbamos, pero no
podemos INTERACTUAR con ella.

As pues, como solucin a este problema, nace JavaScript. Y qu es


JavaScript?

Se trata de un lenguaje de tipo script compacto, basado en objetos y guiado


por eventos diseado especficamente para el desarrollo de aplicaciones
cliente-servidor dentro del mbito de Internet.

113
UNIVERSIDAD TECNICA DE MACHALA

Los programas JavaScript van incrustados en los documentos HMTL, y se


encargan de realizar acciones en el cliente, como pueden ser pedir datos,
confirmaciones, mostrar mensajes, crear animaciones, comprobar campos...

2.12.2 Versiones

El programa que va a interpretar los programas JavaScript es el propio


navegador, lo que significa que si el nuestro no soporta JavaScript, no
podremos ejecutar las funciones que programemos.

Desde luego, Netscape y Explorer lo soportan, el primero desde la versin 2 y el


segundo desde la versin 3.

Navegador Version de JavaScript Soporte ECMA

Nestcape 2 Javascript 1.0 --

Internet
No soporta JavaScript --
Explorer 2

Nestcape 3 Javascript 1.1 --

Internet
Javascript 1.0 --
Explorer 3

Javascript 1.2 - 1.3 ECMA-262-compliant hasta la


Nestcape 4
incompleta version 4.5

Internet
Javascript 1.2 ECMA-262-compliant
Explorer 4

ECMA compliant
Nestcape 6 Full ECMAScript-262
Javascript 1.4

Internet ECMA compliant


Full ECMAScript-262
Explorer 5 Javascript 1.3

Las diferentes versiones de JavaScript han sido finalmente integradas en un


estndar denominado ECMAScript-262. Dicho estndar ha sido realizado por
la organizacin ECMA dedicada a la estandarizacin de informacin y
sistemas de comunicacin.

114
UNIVERSIDAD TECNICA DE MACHALA

2.12.3 Dnde y cmo incluir JavaScript

Existen distintos modos de incluir lenguaje JavaScript en una pgina.

La forma ms frecuente de hacerlo es utilizando la directiva <script> en un


documento HTML (se pueden incluir tantas directivas <script> como se quiera
en un documento). El formato es el siguiente:

<script language="Javascript 1.3">

El atributo lenguaje hace referencia a la versin de JavaScript que se va a


utilizar en dicho script. Otro atributo de la directiva script es src, que puede
usarse para incluir un archivo externo que contiene JavaScript y que quiere
incluirse en el cdigo HTML.

<script language="JavaScript" src ="archivo.js"> </script>

El archivo externo simplemente es un archivo del texto que contiene cdigo


JavaScript, y cuyo nombre acaba con la extensin js.

Puede incluirse tambin cdigo JavaScript como respuesta a algn evento:


<input type="submit" onclick="alert('Acabas de hacer click');return false;"
value="Click">

Click

Nota: Los scripts pueden incluirse como comentarios para asegurar que su
cdigo no es "visto" por navegadores viejos que no reconocen JavaScript y
as evitar errores.

<script ....>
<!-
Cdigo JavaScript
//-->
</script>

2.12.4 Gramtica

115
UNIVERSIDAD TECNICA DE MACHALA

Si conoce algn otro lenguaje de programacin ya estar familiarizado con el


uso de variables, operadores, declaraciones... Lo que se resume en la tabla
siguiente son los elementos principales de la gramtica de JavaScript. Cada
uno de los elementos se ver en detalle a lo largo del manual.

Nota importante: JavaScript es sensible a maysculas y minsculas, todos los


elementos de JavaScript deben referenciarse cmo se definieron, no es lo
mismo "Salto" que "salto".

Variables Etiquetas que se refieren a un valor cambiante.

Operadores Pueden usarse para calcular o comparar valores.


Ejemplo: pueden sumarse dos valores, pueden
compararse dos valores...

Expresiones Cualquier combinacin de variables, operadores, y


declaraciones que evalan a algn resultado.
Ejemplo: intTotal=100; intTotal > 100

Sentencias Una sentencia puede incluir cualquier elemento de la


grmatica de JavaScript. Las sentencias de JavaScript
pueden tomar la forma de condicional, bucle, o
manipulaciones del objeto. La forma correcta para
separarlas es por punto y coma, esto slo es obligatorio si
las declaraciones mltiples residen en la misma lnea.
Aunque es recomedable que se acostumbre a terminar
cada instruccin con un punto y coma, se ahorrar
problemas.

Objetos Estructura "contenedora" de valores, procedimientos y


funciones, cada valor refleja una propiedad individual de
ese objeto.

116
UNIVERSIDAD TECNICA DE MACHALA

Funciones y Una funcin de JavaScript es bastante similar a un"


Mtodos procedimiento" o" subprograma" en otro lenguaje de
programacin. Una funcin es un conjunto que realizan
alguna accin. Puede aceptar los valores entrantes (los
parmetros), y puede devolver un valor saliente. Un
mtodo simplemente es una funcin contenida en un
objeto.
2.12.5 Variables

Las variables almacenan y recuperan datos, tambin conocidos como


"valores". Una variable puede referirse a un valor que cambia o se cambia.
Las variables son referenciadas por su nombre, y el nombre que les es
asignado debe ser conforme a ciertas reglas (debe empezar con una letra o
("_"); los carcteres siguientes pueden ser nmeros (0-9), letras maysculas o
letras minsculas).

Ejemplos de definiciones errneas:

var Mi Variable, 123Probando, $Variable, for, while;

Ejemplos de definiciones correctas:

var _Una_Variable, P123robando, _123, mi_carrooo;

Por supuesto, podemos inicializar una variable al declararla:

var Una_Variable="Esta Cadenita de texto";

Las variables en JavaScript pueden ser de alcance global o local. Una


variable global es accesible desde cualquier <script> de la pgina mientras
que una variable local slo lo es desde la funcin en la que fue declarada.

Normalmente, usted crea una nueva variable global asignndole simplemente


un valor:

globalVariable=5;

117
UNIVERSIDAD TECNICA DE MACHALA

Sin embargo, si usted est codificando dentro de una funcin y usted quiere
crear una variable local que slo tenga alcance dentro de esa funcin, debe
declarar la nueva variable haciendo uso de var:

function newFunction()
{
var localVariable=1;
globalVariable=0;
...
}

2.12.6 Tipos de datos

Javascript reconoce seis tipos de valores diferentes: numricos, lgicos,


objetos, cadenas, nulos e indefinidos.

JavaScript tiene la peculiaridad de ser un lenguaje dbilmente tipado, esto es,


una variable puede cambiar de tipo durante su vida, por ejemplo uno puede
declarar una variable que ahora sea un entero y ms adelante una cadena.

MiVariable=4;

y despus:

MiVariable="Una_Cadena";

A diferencia de otros lenguajes y como ya hemos visto, en Javascript no es


necesario declarar las variables especificando el tipo de dato que contendrn,
ser el propio interprete el que le asignar el tipo apropiado. (Esto es as para
seguir la filosofa de diseo de Javascript que indica que se realizan
programas pequeos y que la idea es lograr que el programador realice los
scripts de la manera ms rpida posible).

Tipos de Datos:

Nmeros Enteros o coma flotante.

Boleanos True o False.

118
UNIVERSIDAD TECNICA DE MACHALA

Cadenas Los tipos de datos cadena deben ir delimitados por comillas


simples o dobles.

Objetos Obj = new Object();

Nulos Null

Indefinidos Un valor indefinido es el que corresponde a una variable que


ha sido creada pero no le ha sido asignado un valor.
2.12.7 Operadores

Los operadores toman una o ms variables o valores (los operando) y


devuelve un nuevo valor; por ejemplo el ' +' operador puede agregar dos
nmeros para producir un tercero. Lo operadores estn clasificados en varias
clases dependiendo de la relacin que ellos realizan:

Operadores Aritmticos

Los operadores aritmticos toman los valores numricos (literales o variables)


como sus operando y devuelve un solo valor numrico. Los operadores
aritmticos normales son:

Operador Nombre Ejemplo Descripcin

+ Suma 5+6 Suma dos nmeros

- Substraccin 7-9 Resta dos nmeros

* Multiplicacin 6*3 Multiplica dos nmeros

/ Divisin 4/8 Divide dos nmeros

% Mdulo: el resto Devuelve el resto de


despus de la dividir ambos nmeros,
7%2
divisin en este ejemplo el
resultado es 1

++ Incremento. Suma 1 al contenido de


a++
una variable.

-- Decremento. a-- Resta 1 al contenido de

119
UNIVERSIDAD TECNICA DE MACHALA

una variable.

- Invierte el signo Invierte el signo de un


-a
de un operando. operando.

<!-- Manual de JavaScript de WebEstilo.com -->


<html>
<head>
<title>Ejemplo de JavaScript</title>
</head>
<body>
<script language="JavaScript">
a = 8;
b = 3;
document.write(a + b);
document.write("<br>");
document.write(a - b);
document.write("<br>");
document.write( a * b);
document.write("<br>");
document.write(a / b);
document.write("<br>");
a++;
document.write(a);
document.write("<br>");
b--;
document.write(b);
</script>
</body>
</html>

Operadores de comparacin

120
UNIVERSIDAD TECNICA DE MACHALA

Un operador de la comparacin compara sus operando y devuelve un valor


lgico basado en si la comparacin es verdad o no. Los operando pueden ser
numricos o cadenas.

Operador Descripcin

== " Igual a" devuelve true si los operandos son iguales

=== Estrictamente "igual a" (JavaScript 1.3)

!= " No igual a" devuelve true si los operandos no son iguales

!== Estrictamente " No igual a" (JavaScript 1.3)

> " Mayor que" devuelve true si el operador de la izquierda es


mayor que el de la derecha.

>= " Mayor o igual que " devuelve true si el operador de la


izquierda es mayor o igual que el de la derecha.

< " Menor que" devuelve true si el operador de la izquierda es


menor que el de la derecha.

<= "Menor o igual que" devuelve true si el operador de la


izquierda es menor o igual que el de la derecha.

Nota:

En JavaScript 1.3 y JavaScript 1.1 o anteriores, los operadores de


comparacin realizaban 'una conversin de tipos' si era necesario. Es decir, si
un operando era una cadena y el otro era un valor numrico, JavaScript

121
UNIVERSIDAD TECNICA DE MACHALA

realizaba la conversin de la cadena a numrico antes de realizar la


comparacin.

JavaScript 1.2 no realizaba 'conversiones de tipo', por eso si dos operadores


eran de tipos distintos no se realizaba la comparacin.

Finalmente, en las ltimas versiones de JavaScript se aaden los operadores


de 'comparacin estricta', los cuales realizarn la comparacin si los dos
operandos son del mismo tipo.

<!-- Manual de JavaScript de WebEstilo.com -->


<html>
<head>
<title>Ejemplo de JavaScript</title>
</head>
<body>
<script language="JavaScript">
a = 8;
b = 3;
c = 3;
document.write(a == b);document.write("<br>");
document.write(a != b);document.write("<br>");
document.write(a < b);document.write("<br>");
document.write(a > b);document.write("<br>");
document.write(a >= c);document.write("<br>");
document.write(b <= c);document.write("<br><br>");
document.write(3 == "3");document.write("<br>");
document.write(3 === "3");document.write("<br>");
</script>
</body>
</html>

Operadores Lgicos

122
UNIVERSIDAD TECNICA DE MACHALA

Los operadores Lgicos se utilizan para combinar mltiples comparaciones en una


expresin condicional. Un operador lgico toma dos operandos cada uno de los
cuales es un valor true o false y devuelve un valor true o false.

Operador Descripcin

&& " Y " Devuelve true si ambos operadores son true.

|| " O " Devuelve true si uno de los operadores es true.

! "No" Devuelve true si la negacin del operando es true.

<!-- Manual de JavaScript de WebEstilo.com -->


<html>
<head>
<title>Ejemplo de JavaScript</title>
</head>
<body>
<script language="JavaScript">
a = 8;
b = 3;
c = 3;
document.write( (a == b) && (c > b) );document.write("<br>");
document.write( (a == b) || (b == c) );document.write("<br>");
document.write( !(b <= c) );document.write("<br>");
</script>
</body>
</html>

Operadores de Cadena

Los valores cadena pueden compararse usando los operadores de


comparacin. Adicionalmente, usted puede concatenar cadenas usando el
operador +

123
UNIVERSIDAD TECNICA DE MACHALA

<!-- Manual de JavaScript de WebEstilo.com -->


<html>
<head>
<title>Ejemplo de JavaScript</title>
</head>
<body>
<script language="JavaScript">
Nombre = "Jose"
document.write( "Hola " + Nombre +"." );
</script>
</body>
</html>

Operadores de Asignacin

El operador de asignacin '=' le permite asignar un valor a una variable.

Operador Descripcin

= Asigna el valor del operando de la derecha a la


variable de la izquierda.
Ejemplo: inttotal=100;

+= Aade el valor del operando de la derecha a la


(tambien - =, * =, / =) variable de la izquierda.
Ejemplo: inttotal +=100

&= Asigna el resultado de (operando de la izquierda &


(tambin |=) operando de la derecha) al operando de la izquierda

<!-- Manual de JavaScript de WebEstilo.com -->


<html>
<head>
<title>Ejemplo de JavaScript</title>
</head>
<body>
<script language="JavaScript">

124
UNIVERSIDAD TECNICA DE MACHALA

a = 8;
b = 3;
a += 3;
document.write(a);document.write("<br>");
a -= 2;
document.write(a);document.write("<br>");
b *= 2;
document.write(b);
</script>
</body>
</html>

Operadores especiales

Varios operadores de JavaScript, es difcil clasificarlos en una categora en particular.


Estos operadores se resumen a continuacin.

Operador Descripcin

(condicin) ? Asigna un valor especificado a una variable si la


trueVal : falseVal condicin es true, por otra parte asigna un valor
alternativo si la condicin es false.

New El operador new crea una instancia de un objeto.

This La palabra clave 'this' se refiere al objeto actual.

, El operador ',' evala los dos operados.

Delete El operador delete borra un objeto, una propiedad de


un objeto, o un elemento especificado de un vector.

Void El operador Void especifica una expresin que ser


evaluada sin devolver ningn valor.

Typeof Devuelve el tipo de dato de un operando.

2.12.8 Objetos

125
UNIVERSIDAD TECNICA DE MACHALA

Una primera clasificacin del modelo de objetos lo dividira en dos grandes


grupos. Por una parte, tendramos los objetos directamente relacionados con
el navegador y las posibilidades de programacin HTML (denominados,
genricamente, objetos del navegador) y por otra parte un conjunto de
objetos relacionados con la estructura del lenguaje, llamados genricamente
objetos del lenguaje.

El Objeto String

Este objeto nos permite hacer diversas manipulaciones con las cadenas, para
que trabajar con ellas sea ms sencillo. Cuando asignamos una cadena a una
variable, JS est creando un objeto de tipo String que es el que nos permite
hacer las manipulaciones.

Propiedades

length. Valor numrico que nos indica la longitud en caracteres de la


cadena dada.

prototype. Nos permite asignar nuevas propiedades al objeto String.

Mtodos

anchor(nombre). Crea un enlace asignando al atributo NAME el valor de


'nombre'. Este nombre debe estar entre comillas " "

big(). Muestra la cadena de caracteres con una fuente grande.

blink(). Muestra la cadena de texto con un efecto intermitente.

charAt(indice). Devuelve el carcter situado en la posicin especificada por


'indice'.

fixed(). Muestra la cadena de caracteres con una fuente proporcional.

fontcolor(color). Cambia el color con el que se muestra la cadena. La


variable color debe ser especificada entre comillas: " ", o bien siguiendo el
estilo de HTML, es decir "#RRGGBB" donde RR, GG, BB son los valores
en hexadecimal para los colores rojo, verde y azul, o bien puede ponerse

126
UNIVERSIDAD TECNICA DE MACHALA

un identificador vlido de color entre comillas. Algunos de estos


identificadores son "red", "blue", "yellow", "purple", "darkgray", "olive",
"salmon", "black", "white", ...

fontsize(tamao). Cambia el tamao con el que se muestra la cadena. Los


tamaos vlidos son de 1 (ms pequeo) a 7 (ms grande).
indexOf(cadena_buscada,indice) Devuelve la posicin de la primera
ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la
posicin dada por 'indice'. Este ltimo argumento es opcional y, si se omite,
la busqueda comienza por el primer carcter de la cadena.

italics(). Muestra la cadena en cursiva.

lastIndexOf(cadena_buscada,indice). Devuelve la posicin de la ltima


ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la
posicin dada por 'indice', y buscando hacia atrs. Este ltimo argumento
es opcional y, si se omite, la busqueda comienza por el ltimo carcter de
la cadena.

link(URL). Convierte la cadena en un vnculo asignando al atributo HREF el


valor de URL.

small(). Muestra la cadena con una fuente pequea.

split(separador). Parte la cadena en un array de caracteres. Si el carcter


separador no se encuentra, devuelve un array con un slo elemento que
coincide con la cadena original. A partir de NS 3, IE 4 (JS 1.2).

strike(). Muestra la cadena de caracteres tachada.

sub(). Muestra la cadena con formato de subndice.

substring(primer_Indice,segundo_Indice). Devuelve la subcadena que


comienza en la posicin 'primer_Indice + 1' y que finaliza en la posicin
'segundo_Indice'. Si 'primer_Indice' es mayor que 'segundo_Indice',
empieza por 'segundo_Indice + 1' y termina en 'primer_Indice'. Si hacemos
las cuentas a partir de 0, entonces es la cadena que comienza en

127
UNIVERSIDAD TECNICA DE MACHALA

'primer_Indice' y termina en 'segundo_Indice - 1' (o bien 'segundo_Indice' y


'primer_Indice - 1' si el primero es mayor que el segundo).

sup(). Muestra la cadena con formato de superndice.

toLowerCase(). Devuelve la cadena en minsculas.

toUpperCase(). Devuelve la cadena en minsculas.

<!-- Manual de JavaScript de WebEstilo.com -->


<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
<!--
var cad = "Hello World",i;
var ja = new ja = Array();

cad.split("o");

with(document) {
write("La cadena es: "+cad+"<BR>");
write("Longitud de la cadena: "+cad.length+"<BR>");
write("Haciendola ancla: "+cad.anchor("b")+"<BR>");
write("En grande: "+cad.big()+"<BR>");
write("Parpadea: "+cad.blink()+"<BR>");
write("Caracter 3 es: "+cad.charAt(3)+"<BR>");
write("Fuente FIXED: "+cad.fixed()+"<BR>");
write("De color: "+cad.fontcolor("#FF0000")+"<BR>");
write("De color: "+cad.fontcolor("salmon")+"<BR>");
write("Tamao 7: "+cad.fontsize(7)+"<BR>");
write("<I>orl</I> esta en la posicion: "+cad.indexOf("orl"));
write("<BR>En cursiva: "+cad.italics()+"<BR>");

128
UNIVERSIDAD TECNICA DE MACHALA

write("La primera <I>l</I> esta, empezando a contar por detras,");


write(" en la posicion: "+cad.lastIndexOf("l")+"<BR>");
write("Haciendola enlace: "+cad.link("doc.htm")+"<BR>");
write("En pequeo: "+cad.small()+"<BR>");
write("Tachada: "+cad.strike()+"<BR>");
write("Subindice: "+cad.sub()+"<BR>");
write("Superindice: "+cad.sup()+"<BR>");
write("Minusculas: "+cad.toLowerCase()+"<BR>");
write("Mayusculas: "+cad.toUpperCase()+"<BR>");
write("Subcadena entre los caracteres 3 y 10: ");
write(cad.substring(2,10)+"<BR>");
write("Entre los caracteres 10 y 3: "+cad.substring(10,2)+"<BR>");
write("Subcadenas resultantes de separar por las <B>o:</B><BR>");
for(i=0;i<ja.length;i++) write(ja[i]+"<BR>");
}
//-->
</script>
</BODY>
</HTML>

El Objeto Array

Este objeto nos va a dar la facilidad de construir arrays cuyos elementos


pueden contener cualquier tipo bsico, y cuya longitud se modificar de forma
dinmica siempre que aadamos un nuevo elemento (y, por tanto, no
tendremos que preocuparnos de esa tarea). Para poder tener un objeto array,
tendremos que crearlo con su constructor, por ejemplo, si escribimos:

a=new Array(15);

tendremos creada una variable a que contendr 15 elementos, enumerados


del 0 al 14. Para acceder a cada elemento individual usaremos la notacin
a[i], donde i variar entre 0 y N-1, siendo N el nmero de elementos que le
pasamos al constructor.

129
UNIVERSIDAD TECNICA DE MACHALA

Tambin podemos inicializar el array a la vez que lo declaramos, pasando los


valores que queramos directamente al constructor, por ejemplo:

a=new Array(21,"cadena",true);

que nos muestra, adems, que los elementos del array no tienen por qu ser
del mismo tipo.

Por tanto: si ponemos un argumento al llamar al constructor, este ser el


nmero de elementos del array (y habr que asignarles valores
posteriormente), y si ponemos ms de uno, ser la forma de inicializar el array
con tantos elementos como argumentos reciba el constructor.

Podramos poner como mencin especial de esto lo siguiente. Las


inicializaciones que vemos a continuacin:

a=new Array("cadena");
a=new Array(false);

Inicializan el array a, en el primer caso, con un elemento cuyo contenido es la


cadena cadena, y en el segundo caso con un elemento cuyo contenido es
false.

Lo comentado anteriormente sobre inicializacin de arrays con varios valores,


significa que si escribimos

a=new Array(2,3);

NO vamos a tener un array con 2 filas y 3 columnas, sino un array cuyo


primer elemento ser el 2 y cuyo segundo elemento ser el 3. Entonces,
cmo creamos un array bidimensional? (un array bidimensional es una
construccin bastante frecuente). Creando un array con las filas deseadas y,
despus, cada elemento del array se inicializar con un array con las
columnas deseadas. Por ejemplo, si queremos crear un array con 4 filas y 7
columnas, bastar escribir:

a=new Array(4);
for(i=0;i<4;i++) a[i]=new Array(7);

130
UNIVERSIDAD TECNICA DE MACHALA

y para referenciar al elemento que ocupa la posicin (i,j), escribiremos a[i][j];

Propiedades

length. Esta propiedad nos dice en cada momento la longitud del array, es
decir, cuntos elementos tiene.

prototype. Nos permite asignar nuevas propiedades al objeto String.

Mtodos

join(separador). Une los elementos de las cadenas de caracteres de cada


elemento de un array en un string, separando cada cadena por el
separador especificado.

reverse(). Invierte el orden de los elementos del array.

sort(). Ordena los elementos del array siguiendo el orden lexicogrfico.

<!-- Manual de JavaScript de WebEstilo.com -->


<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
<!--
var j=new Array(2),h=new Array(1), i=new Array(1,"Hola",3);
var b=new Array("Palabra","Letra","Amor","Color","Cario");
var c=new Array("Otra cadena con palabras");
var d=new Array(false);

j[0]=new Array(3);
j[1]=new Array(2);

j[0][0]=0; j[0][1]=1; j[0][2]=2;


j[1][0]=3; j[1][1]=4; j[1][2]=5;

131
UNIVERSIDAD TECNICA DE MACHALA

document.write(c);
document.write("<P>"+d+"<P>");

document.write("j[0][0]="+j[0][0]+"; j[0][1]="+j[0][1]+
"; j[0][2]="+j[0][2]+"<BR>");
document.write("j[1][0]="+j[1][0]+"; j[1][1]="+j[1][1]+
"; j[1][2]="+j[1][2]);
document.write("<P>h= "+(h[0]='Hola')+"<P>");
document.write("i[0]="+i[0]+"; i[1]="+i[1]+"; i[2]="+i[2]+"<P>");
document.write("Antes de ordenar: "+b.join(', ')+"<P>");
document.write("Ordenados: "+b.sort()+"<P>");
document.write("Ordenados en orden inverso: "+b.sort().reverse());

//-->
</script>
</BODY>
</HTML>

El Objeto Math

Este objeto se utiliza para poder realizar clculos en nuestros scripts. Tiene la
peculiaridad de que sus propiedades no pueden modificarse, slo consultarse.
Estas propiedades son constantes matemticas de uso frecuente en algunas
tareas, por ello es lgico que slo pueda consultarse su valor pero no
modificarlo.

Propiedades

E. Nmero 'e', base de los logaritmos naturales (neperianos).

LN2. Logaritmo neperiano de 2.

LN10. Logaritmo neperiano de 10.

LOG2E. Logaritmo en base 2 de e.

132
UNIVERSIDAD TECNICA DE MACHALA

LOG10E. Logaritmo en base 10 de e.

PI. Nmero PI.

SQRT1_2. Raz cuadrada de 1/2.

SQRT2. Raz cuadrada de 2.

Mtodos

abs(numero). Funcin valor absoluto.

acos(numero). Funcin arcocoseno. Devuelve un valor cuyas unidades son


radianes o NaN. 'numero' debe pertenecer al rango [-1,1], en otro caso
devuelve NaN.

asin(numero). Funcin arcoseno. Devuelve un valor cuyas unidades son


radianes o NaN. 'numero' debe pertenecer al rango [-1,1], en otro caso
devuelve NaN.

atan(numero). Funcin arcotangente. Devuelve un valor cuyas unidades


son radianes o NaN.

atan2(x,y). Devuelve el ngulo formado por el vector de coordenadas (x,y)


con respecto al eje OX.

ceil(numero). Devuelve el entero obtenido de redondear 'numero' "por


arriba".

cos(numero). Devuelve el coseno de 'numero' (que debe estar en radianes)


o NaN.

exp(numero). Devuelve el valor enumero.

floor(numero). Devuelve el entero obtenido de redondear 'numero' "por


abajo".

log(numero). Devuelve el logaritmo neperiano de 'numero'.

max(x,y). Devuelve el mximo de 'x' e 'y'.

133
UNIVERSIDAD TECNICA DE MACHALA

min(x,y). Devuelve el mnimo de 'x' e 'y'.

pow(base,exp). Devuelve el valor baseexp.

random(). Devuelve un nmero pseudoaleatorio entre 0 y 1.

round(numero). Redondea 'numero' al entero ms cercano.

sin(numero). Devuelve el seno de 'numero' (que debe estar en radianes) o


NaN.

sqrt(numero). Devuelve la raz cuadrada de nmero.

tan(numero). Devuelve la tangente de 'numero' (que debe estar en


radianes) o NaN.

El Objeto Date

Este objeto nos va a permitir hacer manipulaciones con fechas: poner fechas,
consultarlas... para ello, debemos saber lo siguiente: JS maneja fechas en
milisegundos. Los meses de Enero a Diciembre vienen dados por un entero
cuyo rango vara entre el 0 y el 11 (es decir, el mes 0 es Enero, el mes 1 es
Febrero, y as sucesivamente), los das de la semana de Domingo a Sbado
vienen dados por un entero cuyo rango vara entre 0 y 6 (el da 0 es el
Domingo, el da 1 es el Lunes, ...), los aos se ponen tal cual, y las horas se
especifican con el formato HH:MM:SS.

Podemos crear un objeto Date vaco, o podemos crealo dndole una fecha
concreta. Si no le damos una fecha concreta, se crear con la fecha
correspondiente al momento actual en el que se crea. Para crearlo dndole un
valor, tenemos estas posibilidades:

var Mi_Fecha = new Date(ao, mes);

var Mi_Fecha = new Date(ao, mes, da);

var Mi_Fecha = new Date(ao, mes, da, horas);

var Mi_Fecha = new Date(ao, mes, da, horas, minutos);

134
UNIVERSIDAD TECNICA DE MACHALA

var Mi_Fecha = new Date(ao, mes, da, horas, minutos, segundos);

En da pondremos un nmero del 1 al mximo de das del mes que toque.


Todos los valores que tenemos que pasar al constructor son enteros.
Pasamos a continuacin a estudiar los mtodos de este objeto.

Mtodos

* getDate(). Devuelve el da del mes actual como un entero entre 1 y 31.

* getDay(). Devuelve el da de la semana actual como un entero entre 0 y 6.

* getHours(). Devuelve la hora del da actual como un entero entre 0 y 23.

* getMinutes(). Devuelve los minutos de la hora actual como un entero


entre 0 y 59.

* getMonth(). Devuelve el mes del ao actual como un entero entre 0 y 11.

* getSeconds(). Devuelve los segundos del minuto actual como un entero


entre 0 y 59.

* getTime(). Devuelve el tiempo transcurrido en milisegundos desde el 1 de


enero de 1970 hasta el momento actual.

* getYear(). Devuelve el ao actual como un entero.

* setDate(da_mes). Pone el da del mes actual en el objeto Date que


estemos usando.

* setDay(da_semana). Pone el da de la semana actual en el objeto Date


que estemos usando.

* setHours(horas). Pone la hora del da actual en el objeto Date que


estemos usando.

* setMinutes(minutos). Pone los minutos de la hora actual en el objeto Date


que estemos usando.

* setMonth(mes). Pone el mes del ao actual en el objeto Date que


estemos usando.

135
UNIVERSIDAD TECNICA DE MACHALA

* setSeconds(segundos). Pone los segundos del minuto actual en el objeto


Date que estemos usando.

* setTime(milisegundos). Pone la fecha que dista los milisegundos que le


pasemos del 1 de enero de 1970 en el objeto Date que estemos usando.

* setYear(ao). Pone el ao actual en el objeto Date que estemos usando.

* toGMTString(). Devuelve una cadena que usa las convenciones de


Internet con la zona horaria GMT.

El Objeto Boolean

Este objeto nos permite crear booleanos, esto es, un tipo de dato que es
cierto o falso, tomando los valores true o false. Podemos crear objetos de este
tipo mediante su constructor. Veamos varios ejemplos:

a = new Boolean(); asigna a 'a' el valor 'false'

a = new Boolean(0); asigna a 'a' el valor 'false'

a = new Boolean(""); asigna a 'a' el valor 'false'

a = new Boolean(false); asigna a 'a' el valor 'false'

a = new Boolean(numero_distinto_de_0); asigna a 'a' el valor 'true'

a = new Boolean(true); asigna a 'a' el valor 'true'

El Objeto Number

Este objeto representa el tipo de dato nmero con el que JS trabaja. Podemos
asignar a una variable un nmero, o podemos darle valor, mediante el
constructor Number, de esta forma:

a = new Number(valor);, por ejemplo, a = new Number(3.2); da a a el valor


3.2. Si no pasamos algn valor al constructor, la variable se inicializar con el
valor 0.

136
UNIVERSIDAD TECNICA DE MACHALA

Propiedades

* MAX_VALUE. Valor mximo que se puede manejar con un tipo numrico

* MIN_VALUE. Valor mnimo que se puede manejar con un tipo numrico

* NaN. Representacin de un dato que no es un nmero

* NEGATIVE_INFINITY. Representacin del valor a partir del cual hay


desbordamiento negativo (underflow)

* POSITIVE_INFINITY. Representacin del valor a partir del cual hay


desbordamiento positivo (overflow)

Para consultar estos valores, no podemos hacer:

a = new Number(); alert(a.MAX_VALUE);

porque JS nos dir undefined, tenemos que hacerlo directamente sobre


Number, es decir, tendremos que consultar los valores que hay en
Number.MAX_VALUE, Number.MIN_VALUE, etc.

Jerarqua

Con esta entrega comienza la descripcin de las propiedades y los mtodos


de los objetos del navegador. No es mi intencin hacer una descripcin
exhaustiva de todas y cada una de las propiedades y mtodos, objeto por
objeto, con todo detalle. Mi intencin es hacer una descripcin ms o menos
detallada de las propiedades y mtodos que tienen ms posibilidad de ser
usados. Es decir, que si me dejo alguna propiedad y/o mtodo por comentar,
siempre podeis buscarla los manuales de referencia de los respectivos
navegadores.

En este captulo vamos a estudiar la jerarqua que presentan los objetos del
navegador, atendiendo a una relacin "contenedor - contenido" que se da
entre estos objetos. De forma esquemtica, esta jerarqua podemos
representarla de esta manera (al lado est la directiva HTML con que se
incluyen en el documento objetos de este tipo, cuando exista esta directiva):

137
UNIVERSIDAD TECNICA DE MACHALA

* window

+ history

+ location

+ document <BODY> ... </BODY>

- anchor <A NAME="..."> ... </A>

- applet <APPLET> ... </APPLET>

- area <MAP> ... </MAP>

- form <FORM> ... </FORM>

+ button <INPUT TYPE="button">

+ checkbox <INPUT TYPE="checkbox">

+ fileUpload <INPUT TYPE="file">

+ hidden <INPUT TYPE="hidden">

+ password <INPUT TYPE="password">

+ radio <INPUT TYPE="radio">

+ reset <INPUT TYPE="reset">

+ select <SELECT> ... </SELECT>

- options <INPUT TYPE="option">

+ submit <INPUT TYPE="submit">

+ text <INPUT TYPE="text">

+ textarea <TEXTAREA> ... </TEXTAREA>

- image <IMG SRC="...">

- link <A HREF="..."> ... </A>

138
UNIVERSIDAD TECNICA DE MACHALA

- plugin <EMBED SRC="...">

+ frame <FRAME>

* navigator

Segn esta jerarqua, podemos entender el objeto area (por poner un


ejemplo) como un objeto dentro del objeto document que a su vez est dentro
del objeto window. Hay que decir que la notacin '.' tambin se usa para
denotar a un objeto que est dentro de un objeto.

Por ejemplo, si queremos hacer referencia a una caja de texto, tendremos que
escribir ventana.documento.formulario.caja_de_texto donde ventana es el
nombre del objeto window (su nombre por defecto es window), documento es
el nombre del objeto document (cuyo nombre por defecto es document),
formulario es el nombre del objeto forms (veremos que forms es un array) y
caja_de_texto es el nombre del objeto textarea (cuyo nombre por defecto es
textarea).

En la mayora de los casos podemos ignorar la referencia a la ventana actual


(window), pero ser necesaria esta referencia cuando estemos utilizando
mltiples ventanas, o cuando usemos frames. Cuando estemos usando un
nico frame, podemos pues ignorar explcitamente la referencia al objeto
window, ya que JS asumir que la referencia es de la ventana actual.

Tambin podemos utilizar la notacin de array para referirnos a algn objeto,


por ejemplo, cuando los objetos a usar no tienen nombre, como en este caso:

document.forms[0].elements[1]; hace referencia al segundo elemento del


primer formulario del documento; este elemento ser el segundo que se haya
creado en la pgina HTML.

El objeto window

Se trata del objeto ms alto en la jerarqua del navegador (navigator es un


objeto independiente de todos en la jerarqua), pues todos los componentes
de una pgina web estn situados dentro de una ventana. El objeto window

139
UNIVERSIDAD TECNICA DE MACHALA

hace referencia a la ventana actual. Veamos a continuacin sus propiedades


y sus mtodos.

Propiedades

* closed. Vlida a partir de Netscape 3 en adelante y MSIE 4 en adelante.


Es un booleano que nos dice si la ventana est cerrada ( closed = true ) o no (
closed = false ).

* defaultStatus. Cadena que contiene el texto por defecto que aparece en la


barra de estado (status bar) del navegador.

* frames. Es un array: cada elemento de este array (frames[0],


frames[1], ...) es uno de los frames que contiene la ventana. Su orden se
asigna segn se definen en el documento HTML.

* history. Se trata de un array que representa las URLS visitadas por la


ventana (estn almacenadas en su historial).

* length. Variable que nos indica cuntos frames tiene la ventana actual.

* location. Cadena con la URL de la barra de direccin.

* name. Contiene el nombre de la ventana, o del frame actual.

* opener. Es una referencia al objeto window que lo abri, si la ventana fue


abierta usando el mtodo open() que veremos cuando estudiemos los
mtodos.

* parent. Referencia al objeto window que contiene el frameset.

* self. Es un nombre alternativo del window actual.

* status. String con el mensaje que tiene la barra de estado.

* top. Nombre alternativo de la ventana del nivel superior.

* window. Igual que self: nombre alternativo del objeto window actual.

140
UNIVERSIDAD TECNICA DE MACHALA

Mtodos

* alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de dilogo

* blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4.

* clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el mtodo


setInterval(), tambin del objeto window). A partir de NS 4, IE 4.

* clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver


el mtodo setTimeout(), tambin del objeto window).

* close(). Cierra el objeto window actual.

* confirm(mensaje). Muestra un cuadro de dilogo con el mensaje 'mensaje'


y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa
aceptar y devuelve false si se pulsa cancelar.

* focus(). Captura el foco del ratn sobre el objeto window actual. A partir de
NS 3, IE 4.

* moveBy(x,y). Mueve el objeto window actual el nmero de pixels


especificados por (x,y). A partir de NS 4.

* moveTo(x,y). Mueve el objeto window actual a las coordenadas (x,y). A


partir de NS 4.

* open(URL,nombre,caracteristicas). Abre la URL que le pasemos como


primer parmetro en una ventana de nombre 'nombre'. Si esta ventana no
existe, abrir una ventana nueva en la que mostrar el contenido con las
caractersticas especificadas. Las caractersticas que podemos elegir para la
ventana que queramos abrir son las siguientes:

o toolbar = [yes|no|1|0]. Nos dice si la ventana tendr barra de


herramientas (yes,1) o no la tendr (no,0).

o location = [yes|no|1|0]. Nos dice si la ventana tendr campo de


localizacin o no.

141
UNIVERSIDAD TECNICA DE MACHALA

o directories = [yes|no|1|0]. Nos dice si la nueva ventana tendr botones


de direccin o no.

o status = [yes|no|1|0]. Nos dice si la nueva ventana tendr barra de


estado o no.

o menubar = [yes|no|1|0]. Nos dice si la nueva ventana tendr barra de


mens o no.

o scrollbars = [yes|no|1|0]. Nos dice si la nueva ventana tendr barras


de desplazamiento o no.

o resizable = [yes|no|1|0]. Nos dice si la nueva ventana podr ser


cambiada de tamao (con el ratn) o no.

o width = px. Nos dice el ancho de la ventana en pixels.

o height = px. Nos dice el alto de la ventana en pixels.

o outerWidth = px. Nos dice el ancho *total* de la ventana en pixels. A


partir de NS 4.

o outerHeight = px. Nos dice el alto *total* de la ventana el pixels. A


partir de NS 4

o left = px. Nos dice la distancia en pixels desde el lado izquierdo de la


pantalla a la que se debe colocar la ventana.

o top = px. Nos dice la distancia en pixels desde el lado superior de la


pantalla a la que se debe colocar la ventana.

* prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de dilogo


que contiene una caja de texto en la cual podremos escribir una respuesta a
lo que nos pregunte en 'mensaje'. El parmetro 'respuesta_por_defecto' es
opcional, y mostrar la respuesta por defecto indicada al abrirse el cuadro de
dilogo. El mtodo retorna una cadena de caracteres con la respuesta
introducida.

142
UNIVERSIDAD TECNICA DE MACHALA

* scroll(x,y). Desplaza el objeto window actual a las coordenadas


especificadas por (x,y). A partir de NS3, IE4.

* scrollBy(x,y). Desplaza el objeto window actual el nmero de pixels


especificado por (x,y). A partir de NS4.

* scrollTo(x,y). Desplaza el objeto window actual a las coordenadas


especificadas por (x,y). A partir de NS4.

* setInterval(expresion,tiempo). Evalua la expresin especificada despus


de que hayan pasado el nmero de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificativo por clearInterval().
A partir de NS4, IE4.

* setTimeout(expresion,tiempo). Evalua la expresin especificada despus


de que hayan pasado el nmero de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificativo por
clearTimeout(). A partir de NS4, IE4.

Me dejo en el tintero otras propiedades y mtodos como innerHeight,


innerWidth, outerHeight, outerWidth, pageXOffset, pageYOffset, personalbar,
scrollbars, back(), find(["cadena"],[caso,bkwd]), forward(), home(), print(),
stop()... todas ellas disponibles a partir de NS 4 y cuya explicacin remito
como ejercicio al lector interesado en saber ms sobre el objeto window.

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

<script LANGUAGE="JavaScript">

<!--

function moverVentana()

143
UNIVERSIDAD TECNICA DE MACHALA

mi_ventana.moveBy(5,5);

i++;

if (i<20)

setTimeout('moverVentana()',100);

else

mi_ventana.close();

//-->

</script>

</HEAD>

<BODY>

<script LANGUAGE="JavaScript">

<!--

var opciones="left=100,top=100,width=250,height=150", i= 0;

mi_ventana = window.open("","",opciones);

mi_ventana.document.write("Una prueba de abrir ventanas");

mi_ventana.moveTo(400,100);

moverVentana();

//-->

</script>

</BODY>

</HTML>

144
UNIVERSIDAD TECNICA DE MACHALA

El objeto frame

Todos sabemos que la ventana del navegador puede ser dividida en varios
frames que contengan cada uno de ellos un documento en el que mostrar
contenidos diferentes. Al igual que con las ventanas, cada uno de estos
frames puede ser nombrado y referenciado, lo que nos permite cargar
documentos en un marco sin que esto afecte al resto.

Realmente cada frame se representa con un objeto window, esto quiere decir
que el objeto frame tiene todas las propiedades y mtodos del objeto window.

Propiedades

* closed. Vlida a partir de Netscape 3 en adelante y MSIE 4 en adelante.


Es un booleano que nos dice si la ventana est cerrada ( closed = true ) o no (
closed = false ).

* defaultStatus. Cadena que contiene el texto por defecto que aparece en la


barra de estado (status bar) del navegador.

* frames. Es un array: cada elemento de este array (frames[0],


frames[1], ...) es uno de los frames que contiene la ventana. Su orden se
asigna segn se definen en el documento HTML.

* history. Se trata de un array que representa las URLS visitadas por la


ventana (estn almacenadas en su historial).

* length. Variable que nos indica cuntos frames tiene la ventana actual.

* location. Cadena con la URL de la barra de direccin.

* name. Contiene el nombre de la ventana, o del frame actual.

* opener. Es una referencia al objeto window que lo abri, si la ventana fue


abierta usando el mtodo open() que veremos cuando estudiemos los
mtodos.

* parent. Referencia al objeto window que contiene el frameset.

* self. Es un nombre alternativo del window actual.

145
UNIVERSIDAD TECNICA DE MACHALA

* status. String con el mensaje que tiene la barra de estado.

* top. Nombre alternativo de la ventana del nivel superior.

* window. Igual que self: nombre alternativo del objeto window actual.

Mtodos

* alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de dilogo

* blur(). Elimina el foco del objeto window actual. A partir de NS 3, IE 4.

* clearInterval(id). Elimina el intervalo referenciado por 'id' (ver el mtodo


setInterval(), tambin del objeto window). A partir de NS 4, IE 4.

* clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver


el mtodo setTimeout(), tambin del objeto window).

* confirm(mensaje). Muestra un cuadro de dilogo con el mensaje 'mensaje'


y dos botones, uno de aceptar y otro de cancelar. Devuelve true si se pulsa
aceptar y devuelve false si se pulsa cancelar.

* focus(). Captura el foco del ratn sobre el objeto window actual. A partir de
NS 3, IE 4.

* open(URL,nombre,caracteristicas). Abre la URL que le pasemos como


primer parmetro en una ventana de nombre 'nombre'. Si esta ventana no
existe, abrir una ventana nueva en la que mostrar el contenido con las
caractersticas especificadas. Las caractersticas que podemos elegir para la
ventana que queramos abrir son las siguientes:

* prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de dilogo


que contiene una caja de texto en la cual podremos escribir una respuesta a
lo que nos pregunte en 'mensaje'. El parmetro 'respuesta_por_defecto' es
opcional, y mostrar la respuesta por defecto indicada al abrirse el cuadro de
dilogo. El mtodo retorna una cadena de caracteres con la respuesta
introducida.

146
UNIVERSIDAD TECNICA DE MACHALA

* scroll(x,y). Desplaza el objeto window actual a las coordenadas


especificadas por (x,y). A partir de NS3, IE4.

* scrollBy(x,y). Desplaza el objeto window actual el nmero de pixels


especificado por (x,y). A partir de NS4.

* scrollTo(x,y). Desplaza el objeto window actual a las coordenadas


especificadas por (x,y). A partir de NS4.

* setInterval(expresion,tiempo). Evalua la expresin especificada despus


de que hayan pasado el nmero de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificativo por clearInterval().
A partir de NS4, IE4.

* setTimeout(expresion,tiempo). Evalua la expresin especificada despus


de que hayan pasado el nmero de milisegundos especificados en tiempo.
Devuelve un valor que puede ser usado como identificativo por
clearTimeout(). A partir de NS4, IE4.

En este ejemplo mostramos como acceder a los frames y cmo se pueden


cambiar propiedades de un frame en otro.

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<frameset cols="50%,*">

<frame name="izq" src="ejem09a.html" scrolling="auto">

<frameset rows="50%,*">

<frame name="der1" src="ejem09b.html" crolling="auto">

<frame name="der2" src="ejem09b.html" scrolling="auto">

147
UNIVERSIDAD TECNICA DE MACHALA

</frameset>

</frameset>

</HTML>

Ejecutar ejemplo Ver cdigo

ejem09a.html

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

<script LANGUAGE="JavaScript">

<!--

function color()

top.frames['der1'].document.bgColor="#FF5500";

function cargarYahoo()

top.frames['der2'].location='http://www.yahoo.com';

//-->

</script>

</HEAD>

148
UNIVERSIDAD TECNICA DE MACHALA

<BODY>

<script LANGUAGE="JavaScript">

<!--

var i=0;

document.write('<h1>Soy el frame: ' + window.name + "</h1><br>");

for (i=0;i<top.frames.length;i++)

document.write('Nombre del frame ' + i + ': ' + top.frames[i].name +


"<br>");

//-->

</script>

<br><br>

<a href="javascript:color()">Cambia el color del frame


<b>der1</b></a><br><br><br>

<a href="javascript:cargarYahoo()">Cargar Yahoo!! en el frame


<b>der2</b></a><br>

</BODY>

</HTML>

Ver cdigo

ejem09b.html

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

149
UNIVERSIDAD TECNICA DE MACHALA

</HEAD>

<BODY>

<script LANGUAGE="JavaScript">

<!--

document.write('<h1>Soy el frame: ' + window.name + "</h1><br>");

//-->

</script>

</BODY>

</HTML>

El objeto location

Este objeto contiene la URL actual as como algunos datos de inters


respecto a esta URL. Su finalidad principal es, por una parte, modificar el
objeto location para cambiar a una nueva URL, y extraer los componentes de
dicha URL de forma separada para poder trabajar con ellos de forma
individual si es el caso. Recordemos que la sintaxis de una URL era:

protocolo://maquina_host[:puerto]/camino_al_recurso

Propiedades

* hash. Cadena que contiene el nombre del enlace, dentro de la URL.

* host. Cadena que contiene el nombre del servidor y el nmero del puerto,
dentro de la URL.

* hostname. Cadena que contiene el nombre de dominio del servidor (o la


direccin IP), dentro de la URL.

* href. Cadena que contiene la URL completa.

* pathname. Cadena que contiene el camino al recurso, dentro de la URL.

150
UNIVERSIDAD TECNICA DE MACHALA

* port. Cadena que contiene el nmero de puerto del servidor, dentro de la


URL.

* protocol. Cadena que contiene el protocolo utilizado (incluyendo los dos


puntos), dentro de la URL.

* search. Cadena que contiene la informacin pasada en una llamada a un


script, dentro de la URL.

Mtodos

* reload(). Vuelve a cargar la URL especificada en la propiedad href del


objeto location.

* replace(cadenaURL). Reemplaza el historial actual mientras carga la URL


especificada en cadenaURL.

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<BODY>

<script LANGUAGE="JavaScript">

<!--

document.write("Location <b>href</b>: " + location.href + "<br>");

document.write("Location <b>host</b>: " + location.host + "<br>");

document.write("Location <b>hostname</b>: " + location.hostname +


"<br>");

document.write("Location <b>pathname</b>: " + location.pathname +


"<br>");

151
UNIVERSIDAD TECNICA DE MACHALA

document.write("Location <b>port</b>: " + location.port + "<br>");

document.write("Location <b>protocol</b>: " + location.protocol + "<br>");

//-->

</script>

</BODY>

</HTML>

El objeto history

Este objeto se encarga de almacenar una lista con los sitios por los que se ha
estado navegando, es decir, guarda las referencias de los lugares visitados.
Se utiliza, sobre todo, para movernos hacia delante o hacia atrs en dicha
lista.

Propiedades

* current. Cadena que contiene la URL completa de la entrada actual en el


historial.

* next. Cadena que contiene la URL completa de la siguiente entrada en el


historial.

* length. Entero que contiene el nmero de entradas del historial (i.e.,


cuntas direcciones han sido visitadas).

* previous. Cadena que contiene la URL completa de la anterior entrada en


el historial.

Mtodos

* back(). Vuelve a cargar la URL del documento anterior dentro del historial.

* forward(). Vuelve a cargar la URL del documento siguiente dentro del


historial.

152
UNIVERSIDAD TECNICA DE MACHALA

* go(posicion). Vuelve a cargar la URL del documento especificado por


posicion dentro del historial. posicion puede ser un entero, en cuyo caso
indica la posicin relativa del documento dentro del historial; o puede ser una
cadena de caracteres, en cuyo caso representa toda o parte de una URL que
est en el historial.

El objeto navigator

Este objeto simplemente nos da informacin relativa al navegador que est


utilizando el usuario.

Propiedades

* appCodeName. Cadena que contiene el nombre del cdigo del cliente.

* appName. Cadena que contiene el nombre del cliente.

* appVersion. Cadena que contiene informacin sobre la versin del cliente.

* language. Cadena de dos caracteres que contiene informacin sobre el


idioma de la versin del cliente.

* mimeTypes. Array que contiene todos los tipos MIME soportados por el
cliente. A partir de NS 3.

* platform. Cadena con la plataforma sobre la que se est ejecutando el


programa cliente.

* plugins. Array que contiene todos los plug-ins soportados por el cliente. A
partir de NS 3.

* userAgent. Cadena que contiene la cabecera completa del agente


enviada en una peticin HTTP. Contiene la informacin de las propiedades
appCodeName y appVersion.

Mtodos

* javaEnabled(). Devuelve true si el cliente permite la utilizacin de Java, en


caso contrario, devuelve false.

153
UNIVERSIDAD TECNICA DE MACHALA

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<BODY>

<script LANGUAGE="JavaScript">

<!--

document.write("Navigator <b>appCodeName</b>: " +


navigator.appCodeName + "<br>");

document.write("Navigator <b>appName</b>: " + navigator.appName +


"<br>");

document.write("Navigator <b>appVersion</b>: " + navigator.appVersion +


"<br>");

document.write("Navigator <b>language</b>: " + navigator.language +


"<br>");

document.write("Navigator <b>platform</b>: " + navigator.platform + "<br>");

document.write("Navigator <b>userAgent</b>: " + navigator.userAgent +


"<br>");

//-->

</script>

</BODY>

</HTML>

154
UNIVERSIDAD TECNICA DE MACHALA

El objeto document

El objeto document es el que tiene el contenido de toda la pgina que se est


visualizando. Esto incluye el texto, imgenes, enlaces, formularios, ... Gracias
a este objeto vamos a poder aadir dinmicamente contenido a la pgina, o
hacer cambios, segn nos convenga.

Propiedades

* alinkColor. Esta propiedad tiene almacenado el color de los enlaces


activos

* anchors. Se trata de un array con los enlaces internos existentes en el


documento

* applets. Es un array con los applets existentes en el documento

* bgColor. Propiedad que almacena el color de fondo del documento

* cookie. Es una cadena con los valores de las cookies del documento
actual

* domain. Guarda el nombre del servidor que ha servido el documento

* embeds. Es un array con todos los EMBED del documento

* fgColor. En esta propiedad tenemos el color del primer plano

* forms. Se trata de un array con todos los formularios del documento. Los
formularios tienen a su vez elementos (cajas de texto, botones, etc) que
tienen sus propias propiedades y mtodos, y sern tratados en el siguiente
captulo.

* images. Array con todas las imgenes del documento

* lastModified. Es una cadena con la fecha de la ltima modificacin del


documento

* linkColor. Propiedad que almacena el color de los enlaces

* links. Es un array con los enlaces externos

155
UNIVERSIDAD TECNICA DE MACHALA

* location. Cadena con la URL del documento actual

* referrer. Cadena con la URL del documento que llam al actual, en caso
de usar un enlace.

* title. Cadena con el ttulo del documento actual

* vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados

Mtodos

* clear(). Limpia la ventana del documento

* open(). Abre la escritura sobre un documento.

* close(). Cierra la escritura sobre el documento actual

* write(). Escribe texto en el documento.

* writeln(). Escribe texto en el documento, y adems lo finaliza con un salto


de lnea

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

<script LANGUAGE="JavaScript">

<!--

var i=1;

var titulooriginal = document.title;

function cambiarTitulo()

document.title = titulooriginal.substring(0,i);

156
UNIVERSIDAD TECNICA DE MACHALA

i++;

if (i>titulooriginal.length) i=0;

setTimeout('cambiarTitulo()',100);

cambiarTitulo();

//-->

</script>

</HEAD>

<BODY>

<script LANGUAGE="JavaScript">

<!--

document.write("Navigator <b>alinkColor </b>: " + document.alinkColor +


"<br>");

document.write("Navigator <b>lastModified</b>: " +document.lastModified +


"<br>");

document.write("Document <b>bgColor</b>: " + document.bgColor +


"<br>");

document.write("Document <b>fgColor</b>: " + document.fgColor + "<br>");

document.write("Document <b>referrer</b>: " + document.referrer + "<br>");

//-->

</script>

</BODY>

</HTML>

157
UNIVERSIDAD TECNICA DE MACHALA

El objeto link

Este objeto engloba todas las propiedades que tienen los enlaces externos al
documento actual.

Propiedades

* target. Es una cadena que tiene el nombre de la ventana o del frame


especificado en el parmetro TARGET

* hash. Es una cadena con el nombre del enlace, dentro de la URL

* host. Es una cadena con el nombre del servidor y nmero de puerto,


dentro de la URL

* hostname. Es una cadena con el nombre de dominio del servidor (o la


direccin IP) dentro de la URL

* href. Es una cadena con la URL completa

* pathname. Es una cadena con el camino al recurso, dentro de la URL

* port. Es una cadena con el nmero de puerto, dentro de la URL

* protocol. Es una cadena con el protocolo usado, incluyendo los : (los dos
puntos), dentro de la URL

* search. Es una cadena que tiene la informacin pasada en una llamada a


un script, dentro de la URL

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<BODY>

158
UNIVERSIDAD TECNICA DE MACHALA

<a href="http://www.yahoo.com" target="_blank">Yahoo!!</a><br><br>

<a href="http://www.google.com/search?q=crear+paginas+web">Google!
</a><br><br>

<script LANGUAGE="JavaScript">

<!--

var i;

for (i=0;i<document.links.length;i++)

document.write("Target : " + document.links[i].target + "<br>");

document.write("Host : " + document.links[i].host + "<br>");

document.write("Href : " + document.links[i].href + "<br>");

document.write("Search : " + document.links[i].search + "<br>");

document.write("<br><br>");

//-->

</script>

</BODY>

</HTML>

El objeto anchor

Este objeto engloba todas las propiedades que tienen los enlaces internos al
documento actual.

Propiedades

159
UNIVERSIDAD TECNICA DE MACHALA

* name. Nombre del ancla.

* target. Es una cadena que tiene el nombre de la ventana o del frame


especificado en el parmetro TARGET

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>

</HEAD>

<BODY>

<a name="arriba" target="_top">Inicio</a><br><br>

<script LANGUAGE="JavaScript">

<!--

var i;

for (i=0;i<document.anchors.length;i++)

document.write("Name : " + document.anchors[i].name + "<br>");

document.write("Target : " + document.anchors[i].target + "<br>");

document.write("<br><br>");

//-->
</script>
<a href="#arriba">Subir</a>
</BODY>
</HTML>

El objeto image

160
UNIVERSIDAD TECNICA DE MACHALA

Gracias a este objeto (disponible a partir de la versin 3 de Netscape, aunque


Microsoft lo adopt en la versin 4 de su navegador) vamos a poder
manipular las imgenes del documento, pudiendo conseguir efectos como el
conocido rollover (cambio de imgenes al pasar el ratn sobre la imagen).

Propiedades

* border. Contiene el valor del parmetro 'border' de la imagen.

* complete. Es un valor booleano que nos dice si la imagen se ha


descargado completamente o no.

* height. Contiene el valor del parmetro 'height' de la imagen.

* hspace. Contiene el valor del parmetro 'hspace' de la imagen.

* lowsrc. Contiene el valor del parmetro 'lowsrc' de la imagen.

* name. Contiene el valor del parmetro 'name' de la imagen.

* src. Contiene el valor del parmetro 'src' de la imagen.

* vspace. Contiene el valor del parmetro 'vspace' de la imagen.

* width. Contiene el valor del parmetro 'width' de la imagen.

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<script LANGUAGE="JavaScript">

<!--

img1 = new Image();

img1.src = "/graficos/nni1b.gif";

161
UNIVERSIDAD TECNICA DE MACHALA

img2 = new Image();

img2.src = "/graficos/nni1a.gif";

function cambia(nombre,imagen)

{
nombre.src = imagen.src
}
function dobleancho()
{
imagen1.width=imagen1.width*2;
}
function doblealto()
{
imagen1.height=imagen1.height*2;
}
function mitadancho()
{
imagen1.width=imagen1.width/2;
}
function mitadalto()
{
imagen1.height=imagen1.height/2;
}
//-->
</script>

<BODY>

<a href="" onmouseover="cambia(imagen1,img1)"


onmouseout="cambia(imagen1,img2)"><img src="/graficos/nni1a.gif"
width="68" height="68" border="0" name="imagen1"></a><br><br>

<a href="javascript:dobleancho()">Doble ancho</a><br>

<a href="javascript:doblealto()">Doble Alto</a><br>

162
UNIVERSIDAD TECNICA DE MACHALA

<a href="javascript:mitadancho()">Mitad ancho</a><br>

<a href="javascript:mitadalto()">Mitad Alto</a><br>

</BODY>

</HTML>

Formularios

En este captulo finalizamos el estudio de los objetos del navegador viendo


cmo manipular formularios. Este punto es especialmente importante: si
aprendemos correctamente a manipular todos los objetos de un formulario,
podremos hacer funciones que nos permitan validarlo antes de enviar estos
datos a un servidor, ahorrndole la faena de tener que verificar la correccin
de los datos enviados.

El objeto form

Este objeto es el contenedor de todos los elementos del formulario. Como ya


vimos al tratar el objeto document, los formularios se agrupan en un array
dentro de document. Cada elemento de este array es un objeto de tipo form.

Propiedades

* action. Es una cadena que contiene la URL del parmetro ACTION del
form, es decir, la direccin en la que los datos del formulario sern
procesados.

* elements. Es un array que contiene todos los elementos del formulario, en


el mismo orden en el que se definen en el documento HTML. Por ejemplo, si
en el formulario hemos puesto, en este orden, una caja de texto, un checkbox
y una lista de seleccin, la caja de texto ser elements[0], el checkbox ser
elements[1] y la lista de seleccin ser elements[2].

* encoding. Es una cadena que tiene la codificacin mime especificada en


el parmetro ENCTYPE del form.

163
UNIVERSIDAD TECNICA DE MACHALA

* method. Es una cadena que tiene el nombre del mtodo con el que se va
a recibir/procesar la informacin del formulario (GET/POST).

Mtodos

* reset(). Resetea el formulario: tiene el mismo efecto que si pulsramos un


botn de tipo RESET dispuesto en el form.

* submit(). Enva el formulario: tiene el mismo efecto que si pulsramos un


botn de tipo SUBMIT dispuesto en el form.

Vistas ahora las propiedades y mtodos del objeto form, pasamos a estudiar,
uno por uno, todos los objetos contenidos en el formulario.

Los objetos text, textarea y password

Estos objetos representan los campos de texto dentro de un formulario.


Adems, el objeto password es exactamente igual que el text salvo en que no
muestra los caracteres introducidos por el usuario, poniendo asteriscos (*) en
su lugar.

Propiedades

* dafaultValue. Es una cadena que contiene el valor por defecto que se le


ha dado a uno de estos objetos por defecto.

* name. Es una cadena que contiene el valor del parmetro NAME.

* value. Es una cadena que contiene el valor del parmetro VALUE.

* maxlength. Nmero mximo de caracteres que puede contener el campo


de texto.

Mtodos

* blur(). Pierde el foco del ratn sobre el objeto especificado.

* focus(). Obtiene el foco del ratn sobre el objeto especificado.

* select(). Selecciona el texto dentro del objeto dado.

164
UNIVERSIDAD TECNICA DE MACHALA

<!-- Manual de JavaScript de WebEstilo.com -->


<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!--
function Mostrar()
{
alert('Su nombre: ' + formulario.nombre.value);
alert('El password: ' + formulario.pass.value);
}
//-->
</script>

<BODY>

<form action="procesa.phtml" name="formulario" id="formulario"


method="GET">

Nombre: <input type="text" name="nombre" value="Tu nombre"


maxlength="15"><br>

Password: <input type="password" name="pass" maxlength="10"><br>

</form>

<a href="javascript:Mostrar();">Mostrar datos</a><br>

</BODY>

</HTML>

165
UNIVERSIDAD TECNICA DE MACHALA

El objeto button

Tenemos tres tipos de botones: un botn genrico, 'button', que no tiene


accin asignada, y dos botones especficos, 'submit' y 'reset'. Estos dos
ltimos s que tienen una accin asignada al ser pulsados: el primero enva el
formulario y el segundo limpia los valores del formulario.

Propiedades

* name. Es una cadena que contiene el valor del parmetro NAME.

* value. Es una cadena que contiene el valor del parmetro VALUE.

Mtodos

* click(). Realiza la accin de pulsado del botn

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<script LANGUAGE="JavaScript">

<!--

function Mostrar(boton)

alert('Ha hecho click sobre el boton: ' + boton.name+', de


valor:'+boton.value);

return true;

//-->

166
UNIVERSIDAD TECNICA DE MACHALA

</script>

<BODY>

<form action="procesa.phtml" name="formulario" id="formulario"


method="GET">

Un boton: <input type="button" name="Boton1" value="El boton 1"


OnClick="Mostrar(this);"><br><br>

Un boton: <input type="button" name="Boton2" value="El boton 2"


OnClick="Mostrar(this);"><br><br>

Un boton: <input type="button" name="Boton3" value="El boton 3"


OnClick="Mostrar(this);"><br>

</form>

</BODY>

</HTML>

El objeto checkbox

Las "checkboxes" nos permiten seleccionar varias opciones marcando el


cuadrito que aparece a su izquierda. El cuadrito pulsado equivale a un "s" y
sin pulsar a un "no" o, lo que es lo mismo, a "true" o "false".

Propiedades

* checked. Valor booleano que nos dice si el checkbox est pulsado o no

* defaultChecked. Valor booleano que nos dice si el checkbox debe estar


seleccionado por defecto o no

* name. Es una cadena que contiene el valor del parmetro NAME.

* value. Es una cadena que contiene el valor del parmetro VALUE.

Mtodos

* click(). Realiza la accin de pulsado del botn

167
UNIVERSIDAD TECNICA DE MACHALA

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>

</HEAD>

<script LANGUAGE="JavaScript">

<!--

function Mostrar(boton)

msg="Opcion 1:"+formulario.check1.checked+"\n"

msg+="Opcion 2:"+formulario.check2.checked+"\n"

msg+="Opcion 3:"+formulario.check3.checked+"\n"

alert(msg);

//-->

</script>

<BODY>

<form action="procesa.phtml" name="formulario" id="formulario"


method="GET">

<input type="checkbox" name="check1" checked> Opcion 1<br>

<input type="checkbox" name="check2"> Opcion 2<br>

<input type="checkbox" name="check3" checked> Opcion 3<br>

</form>

168
UNIVERSIDAD TECNICA DE MACHALA

<A href="javascript:Mostrar()">Ver valores</A>

</BODY>

</HTML>

El objeto radio

Al contrario que con los checkbox, que nos permiten elegir varias
posibilidades entre las dadas, los objetos radio slo nos permiten elegir una
de entre todas las que hay. Estn pensados para posibilidades mtuamente
excluyentes (no se puede ser a la vez mayor de 18 aos y menor de 18 aos,
no se puede estar a la vez soltero y casado, etc.).

Propiedades

* checked. Valor booleano que nos dice si el radio est seleccionado o no.

* defaultChecked. Valor booleano que nos dice si el radio debe estar


seleccionado por defecto o no.

* length. Valor numrico que nos dice el nmero de opciones dentro de un


grupo de elementos radio.

* name. Es una cadena que contiene el valor del parmetro NAME.

* value. Es una cadena que contiene el valor del parmetro VALUE.

Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben
tener el mismo valor en NAME.

Mtodos

* click(). Realiza la accin de pulsado del botn.


<!-- Manual de JavaScript de WebEstilo.com -->
<HTML>
<HEAD>
<title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">

169
UNIVERSIDAD TECNICA DE MACHALA

<!--
function Mostrar(boton)
{
msg="Elementos:"+formulario.edad.length+"\n";
msg+="Menor de 18 aos:"+formulario.edad[0].checked+"\n";
msg+="Entre 18 y 60 aos:"+formulario.edad[1].checked+"\n";
msg+="Mayor de 60 aos:"+formulario.edad[2].checked+"\n";
alert(msg);
}
//-->
</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario"
method="GET">
Edad:<br>
<input type="radio" name="edad" value="<18"> Menor de 18 aos.<br>
<input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60
aos.<br>
<input type="radio" name="edad" value=">60"> Mayor de 60 aos.<br>
</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>

El objeto select
Este objeto representa una lista de opciones dentro de un formulario. Puede
tratarse de una lista desplegable de la que podremos escoger alguna (o
algunas) de sus opciones.

Propiedades del objeto select

* length. Valor numrico que nos indica cuntas opciones tiene la lista

* name. Es una cadena que contiene el valor del parmetro NAME

170
UNIVERSIDAD TECNICA DE MACHALA

* options. Se trata de un array que contiene cada una de las opciones de la


lista. Este array tiene, a su vez, las siguientes propiedades:

o defaultSelected. Valor booleano que nos indica si la opcin est


seleccionada por defecto.

o index. Valor numrico que nos da la posicin de la opcin dentro de la


lista.

o length. Valor numrico que nos dice cuntas opciones tiene la lista.

o options. Cadena con todo el cdigo HTML de la lista.

o selected. Valor booleano que nos dice si la opcin est actualmente


seleccionada o no.

o text. Cadena con el texto mostrado en la lista de una opcin concreta.

o value. Es una cadena que contiene el valor del parmetro VALUE de


la opcin concreta de la lista.

* selectedIndex. Valor numrico que nos dice cul de todas las opciones
disponibles est actualmente seleccionada.

<!-- Manual de JavaScript de WebEstilo.com -->

<HTML>

<HEAD>

<title>Ejemplo de JavaScript</title>
</HEAD>
<script LANGUAGE="JavaScript">
<!--
function Mostrar(boton)
{
msg="Elementos:"+formulario.edad.length+"\n";
msg+="Edad:
"+formulario.edad.options[formulario.edad.selectedIndex].value+"\n";

171
UNIVERSIDAD TECNICA DE MACHALA

alert(msg);
}
//-->
</script>
<BODY>
<form action="procesa.phtml" name="formulario" id="formulario"
method="GET">

Edad:<br>
<select name="edad">
<option value="<18" SELECTED>Menor de 18 aos</option>
<option value=">18 y <60">Entre 18 y 60 aos</option>
<option value=">60">Mayor de 60 aos</option>
</select>
</form>
<A href="javascript:Mostrar()">Ver valores</A>
</BODY>
</HTML>

El objeto hidden
Gracias a este objeto podemos almacenar informacin extra en el formulario
de forma completamente transparente para el usuario, pues no se ver en
ningn momento que tenemos estos campos en el documento.

Es parecido a un campo de texto (objeto text) salvo que no tiene valor por
defecto (no tiene sentido pues el usuario no va a modificarlo) y que no se
puede editar.

Propiedades

* name. Es una cadena que contiene el valor del parmetro NAME.

* value. Es una cadena que contiene el valor del parmetro VALUE.

172
UNIVERSIDAD TECNICA DE MACHALA

2.13 Ajax

Ajax, acrnimo de Asynchronous JavaScript And XML (JavaScript asncrono y


XML), es una tcnica de desarrollo web para crear aplicaciones interactivas o
RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente,
es decir, en el navegador de los usuarios mientras se mantiene la
comunicacin asncrona con el servidor en segundo plano. De esta forma es
posible realizar cambios sobre las pginas sin necesidad de recargarlas, lo
que significa aumentar la interactividad, velocidad y usabilidad en las
aplicaciones.

Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales


se requieren al servidor y se cargan en segundo plano sin interferir con la
visualizacin ni el comportamiento de la pgina. JavaScript es el lenguaje
interpretado (scripting language) en el que normalmente se efectan las
funciones de llamada de Ajax mientras que el acceso a los datos se realiza
mediante XMLHttpRequest, objeto disponible en los navegadores actuales.
En cualquier caso, no es necesario que el contenido asncrono est
formateado en XML.

Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos


sistemas operativos y navegadores dados que est basado en estndares
abiertos como JavaScript y Document Object Model (DOM).

2.14.1Introduccin a Xajax

Xajax es un sistema mediante el cual podemos programar aplicaciones web


con PHP que hacen uso de Ajax para procesar solicitudes al servidor sin
necesidad de recargar la pgina.

Posiblemente todos los lectores ya conozcan lo que es Ajax, una tecnologa


que mezcla Javascript y XML para crear peticiones asncronas al servidor. En
un artculo de DesarrolloWeb.com explicamos con ms detalle lo que es Ajax.

173
UNIVERSIDAD TECNICA DE MACHALA

Para trabajar con Ajax tenemos que saber programar con Javascript y utilizar
una serie de mtodos complejos que dificultan bastante el desarrollo de las
pginas web. Pero por suerte, existen sistemas como Xajax que nos permiten
abstraernos de las complicaciones del desarrollo de pginas web que hacen
uso de Ajax. En este caso, Xajax mezcla PHP con Javascript, para el
desarrollo de aplicaciones PHP avanzadas, casi sin conocimientos Javascript
y sin necesidad de aprender a gestionar solicitudes al servidor por Ajax.

En DesarrolloWeb.com podemos aprender todo lo necesario sobre Javascript


en la seccin Javascript a fondo. Como digo, casi no hacen falta
conocimientos Javascript para operar con Xajax, pero necesitaremos unas
nociones bsicas.

Por otra parte, tenemos una seccin dedicada por completo a Ajax, que
tambin nos puede servir para trabajar con Ajax sin utilizar ningn framework.

En DesarrolloWeb.com ya hemos publicado en diversos artculos qu es


Xajax y como trabajar con el framework y PHP, en los que hemos visto una
serie de ejemplos prcticos que nos pueden ayudar. Est todo en el manual
Trabajo con Ajax y PHP utilizando Xajax. Pero se haca importante esta
introduccin previa para dar una serie de notas y referencias que ayudasen a
los lectores a seguir los ejemplos presentados en este manual.

Bsicamente se trata de comentar que Xajax es un proyecto Open Source,


por tanto gratuito y libre de uso. Pero es un proyecto relativamente nuevo, por
lo que todava estn desarrollando, mejorando y presentando nuevas
versiones.

La pgina de inicio de este proyecto es http://xajax-project.org/

En el momento de escribir este texto, en la pgina de descargas de Xajax


tienen tres versiones disponibles:

xajax 0.5 beta 3

xajax 0.5 beta 4

Actualizado: Ya se encuentra disponible Xajax 0.5 Release Candidate 1

174
UNIVERSIDAD TECNICA DE MACHALA

xajax 0.2.5 (Estable)

Las dos primeras versiones son versiones Beta, como se puede ver en el
nombre de las releases, la tercera versin, aunque es menos nueva, es la
nica que tienen publicada como estable, es decir, la nica que podemos
utilizar en nuestras aplicaciones en produccin con la confianza que est libre
de errores.

Por eso, nosotros en los artculos que venimos publicando en


DesarrolloWeb.com, a menos que se especifique lo contrario, estamos
utilizando la versin xajax 0.2.5.

Dejo aqu un link para descarga de la versin de Xajax 0.2.5. Esta versin la
podramos descargar desde la propia pgina de Xajax, pero pongo este link
por si acaso eliminan los archivos de esta versin y los queris descargar
para realizar los ejemplos de este manual en vuestros sistemas.

Actualizado: Hemos publicado un artculo sobre cmo actualizar tus scripts


PHP de Xajax 0.2 a Xajax 0.5

Si queremos utilizar las versiones ms modernas de Xajax no hay problemas,


pero tengo que decir que algunas cosas que hemos explicado en este manual
han cambiado con respecto a las versiones ms modernas, como el mtodo
$xajax->processRequests(), que en versiones ms modernas se llama $xajax-
>processRequest() y el mtodo $objResponse->addassign() que en las
versiones nuevas se llama $objResponse->assign().

Esto es todo. Simplemente decir que Xajax es una delicia, por su facilidad, por
su potencia, versatilidad, etc. Los desarrolladores de PHP podrn
comprobarlo en pocos minutos y hacer ejemplos o programas con Ajax,
fcilmente y casi sin ms conocimientos que los que ya tienen.

175
UNIVERSIDAD TECNICA DE MACHALA

2.15 WAMPSERVER

WampServer de Windows es un entorno de desarrollo Web. Le permite crear


aplicaciones web con Apache, PHP y la base de datos MySQL. Tambin viene
con SQLiteManager PHPMyAdmin para que administre sus ms fcilmente
sus bases de datos.

WampServer se instala automticamente (mediante un instalador), y su uso


es muy intuitivo. Usted ser capaz de afinar su servidor sin siquiera tocar los
archivos de configuracin.

WampServer es la nica solucin que te permitir tener tu propio servidor de


produccin. Una vez WampServer est instalado, usted tiene la posibilidad de
aadir el mayor nmero de Apache, MySQL y PHP como las emisiones que
desee.

Funcionalidades

WampServer tiene funcionalidades que lo hacen muy completo y fcil de


usar. Con un click izquierdo sobre el icono de WampServer, usted ser capaz
de:

* Gestionar sus servicios de Apache y MySQL,

* Cambiar de lnea / fuera de lnea (dar acceso a todos o slo local)

* Instalar y cambiar de Apache, MySQL y PHP emisiones

* Gestin de la configuracin de sus servidores

* Acceder a sus registros

* Acceder a sus archivos de configuracin

* Crear alias

Con un clic derecho:

* WampServer cambiar el idioma del men

* Acceder a la pgina principal

176
UNIVERSIDAD TECNICA DE MACHALA

Para la instalacin de WampServer lo nico que tenemos que hacer es hacer


doble clic en el archivo descargado y siga las instrucciones. Todo es
automtico. El paquete que se instala de WampServer cuenta con las ltimas
versiones de Apache, MySQL y PHP.

2.16 XAMPP

XAMPP es un servidor independiente de plataforma, software libre, que


consiste principalmente en la base de datos MySQL, el servidor Web Apache
y los intrpretes para lenguajes de script: PHP y Perl. El nombre proviene del
acrnimo de X (para cualquiera de los diferentes sistemas operativos),
Apache, MySQL, PHP, Perl. El programa est liberado bajo la licencia GNU y
acta como un servidor Web libre, fcil de usar y capaz de interpretar pginas
dinmicas. Actualmente XAMPP esta disponible para Microsoft Windows,
GNU/Linux, Solaris, y MacOS X.

2.17 COMPARACIN: XAMPP Y WAMP

Las diferencias estn orientadas ms a la manera trabajar con ambos que en


el fondo, porque ambos incluyen PHP, Apache y MySQL, y estoy orientando la
comparacin hacia el sistema operativo Windows, el nico sobre el que
funciona WAMP, que no es multiplataforma (XAMPP si lo es).

El trabajo que realizaba al comenzar a usar ambas aplicaciones era instalar


un servidor para Joomla (CMS), del que hablar largo y tendido ms
adelante.

Las diferencias y semejanzas ms sustanciales son:

Para acceder a tu proyecto particular WAMP incluye un explorador de


archivos, que permite moverse entre directorios partiendo de C:\wamp\www,
para abrir un proyecto en XAMPP hay que escribir la url en navegador:
http://localhost/, porque XAMPP no incluye este servicio.

Wamp no incluye el apartado de Chequeo de seguridad, el cual s incluye


XAMPP, siendo esta caracterstica muy til para ver la seguridad de tus
proyectos una vez estn online.

177
UNIVERSIDAD TECNICA DE MACHALA

La manera de acceder a las configuraciones especficas de PHP o


MySQL, sin usar phpmyadmin es bastante rida, pero con WAMP puedes
acceder a una variedad importante de estos archivos a travs del un men al
que se accede haciendo clic en el icono del rea de notificacin (para
Windows). Estos archivos incluyen la configuracin de PHP, MySQL

XAMPP incluye herramientas extra para realizar una variada cantidad de


servicios incluidos en el paquete bsico. stas son:

Webalizer: genera logs de anlisis sobre acceso y uso de una


determinada pgina: visitas, pases de procedencia de los visitantes
Las estadsticas generadas pueden ser representadas de diferentes
maneras en grficos, pudiendo configurarlo para medir das, meses o aos.

Conmutador PHP: modifica automticamente la versin de PHP que


estamos usando en nuestro proyecto entre la 4 y la 5, siendo muy til para
comprobar que los proyectos funcionan con ambas versiones.

Mercury Mail: herramienta que permite configurar un servidor de correo,


aunque viene integrada requiere un notable conocimiento sobre redes y
requiere diferentes configuraciones para mails internos (intranet) o externos
(Internet).

Al iniciar XAMPP, aparece la ventana XAMPP Control Panel, en la que


estn reflejadas las aplicaciones que estn corriendo en ese momento. Estas
aplicaciones son: Apache, MySQL, FileZilla, y Mercury Mail. Con WAMP no

178
UNIVERSIDAD TECNICA DE MACHALA

queda ms remedio que ir navegando por el men de su icono de la barra de


tareas para saber qu servicios estn funcionando, lo cual es muy incmodo.

El interfaz para crear bases de datos y usuarios, as como sus permisos son
idnticos en ambos. Ambos incluyen phpmyadmin
(http://localhost/phpmyadmin/), la herramienta para manejar la administracin
de SQL, para realizar esas tareas.

2.18 XAMPP y WAMPP

XAMPP y WAMP son servidores web, basados en software libre, que, de


forma sencilla y requiriendo un mnimo conocimiento de las aplicaciones que
utilizan, permiten publicar pginas-web desde el propio ordenador.

XAMPP es un acrnimo, sus siglas significan:

X: para cualquier sistema operativo.

A: Apache, es un servidor HTTP en software libre para cualquier


plataforma. Tiene entre sus caractersticas bases de datos de autenticacin
y negociado de contenido o mensajes de error altamente configurables.

M: MySQL, es un sistema de gestin de base de datos relacional,


multihilo y multiusuario.

179
UNIVERSIDAD TECNICA DE MACHALA

P: PHP, es un lenguaje de programacin interpretado, para crear webs


dinmicas. Su gran versatilidad radica en que puede ser embebido dentro
de cdigo HTML.

P: Perl, es un lenguaje de programacin que toma caractersticas de C, de


Lisp y, en menor grado, de muchos otros lenguajes.

Por su parte, las siglas de WAMP significan Windows (el Sistema Operativo
sobre el que funciona), Apache, MySQL y PHP.

La herramienta principal de ambos es phpMyAdmin, escrita en PHP, que


permite la gestin de la base de datos MySQL (crear, eliminar y alterar tablas,
borrar, editar y aadir campos, ejecutar cualquier sentencia SQL en general) a
travs de pginas web consecutivas, que proporcionan una interfaz de
usuario muy orientativa si no ests familiarizado con MySQL.

La forma de trabajo con estos servidores consiste en crear el contenido que


quieras publicar en tu propio ordenador (http://localhost/) y luego publicarlo
usando un cliente FTP.

2.19 Utilizar WAMP en una LAN

Un breve paso a paso de cmo utilizar WAMP en una LAN, de manera que
todos los usuarios puedan acceder a los sitios que estemos probando.

Configuracin

1. Nos aseguramos de tener las carpetas creadas para los logs.


Minimamente, si vamos a tener un sitio test dentro de www, deberamos
tener las siguientes carpetas creadas en WAMP:

C:/wamp/www/logs

C:/wamp/www/test/logs

180
UNIVERSIDAD TECNICA DE MACHALA

2. Editamos el archivo httpd.conf ubicado en algo as como:


C:\wamp\bin\apache\apache2.2.8\conf

En dicho archivo, descomentamos la lnea:

Include conf/extra/httpd-vhosts.conf

3. Editamos el archivo httpd-vhosts.conf ubicado en algo as como


C:\wamp\bin\apache\apache2.2.8\conf\extra. En dicho archivo, minimamente
deberamos tener lo siguiente (cambiar de acuerdo a los sitios que vayamos a
querer compartir):

NameVirtualHost *:80
<VirtualHost *:80>
ServerName test
DocumentRoot e:/wamp/www/test
ErrorLog e:/wamp/www/test/logs/error.log
CustomLog e:/wamp/www/test/logs/access.log common
</VirtualHost>
<VirtualHost *:80>
ServerName localhost
DocumentRoot e:/wamp/www
ErrorLog e:/wamp/www/logs/error.log
CustomLog e:/wamp/www/logs/access.log common
</VirtualHost>
(Ponemos la carpeta en que tenemos los sitios subidos en www dentro de
wamp)
4. En el servidor, abrir el archivo hosts dentro de
C:/Windows/System32/drivers/etc. Para nuestro sitio test, deberamos tener
al menos lo siguiente:
127.0.0.1 localhost
127.0.0.1 test
5. En las otras mquinas, abrimos tambin el archivo hosts, y deberemos
tener lo siguiente:
192.168.1.107 test

181
UNIVERSIDAD TECNICA DE MACHALA

Donde 192.168.1.107 es la direccin IP del servidor (la averiguamos yendo al


cmd, ipconfig).

6. Hecho esto, reiniciar el WAMP, y apretar el botn de Put Online (de lo


contrario tendremos un error 403 cuando queramos acceder de las otras
mquinas de la lan).

7. Para acceder, desde el navegador ponemos: http://test.

8. En caso de problemas, verificar que el firewall est desactivado, y la


configuracin del router.

Configuracin del Router

1. Acceder a la pantalla del Router

2. Buscar la configuracin para los Virtual Servers

3. Agregar una configuracin HTTP donde el protocolo es TCP, el puerto


privado es 80 (o en el que tengamos corriendo wamp), el pblico es 80, y el
servidor es la direccin IP del servidor.

2.19.1 Caractersticas y Requisitos

XAMPP solamente requiere descargar y ejecutar un archivo zip, tar, o exe,


con unas pequeas configuraciones en alguno de sus componentes que el
servidor Web necesitar. XAMPP se actualiza regularmente para incorporar
las ltimas versiones de Apache/MySQL/PHP y Perl. Tambin incluye otros
mdulos como OpenSSL y phpMyAdmin. Para instalar XAMPP se requiere
solamente una pequea fraccin del tiempo necesario para descargar y
configurar los programas por separado.

2.19.2 Aplicaciones

Oficialmente, los diseadores de XAMPP slo pretendan su uso como una


herramienta de desarrollo, para permitir a los diseadores de sitios webs y
programadores testear su trabajo en sus propios ordenadores sin ningn
acceso a Internet. En la prctica, sin embargo, XAMPP es utilizado
actualmente para servidor de sitios Web y, con algunas modificaciones, es

182
UNIVERSIDAD TECNICA DE MACHALA

generalmente lo suficientemente seguro para serlo. Con el paquete se incluye


una herramienta especial para proteger fcilmente las partes ms
importantes. SDFDS.

2.20 Pruebas

El proyecto conto con un proceso de pruebas y las pruebas se incluyeron en


l. Para que utilizamos esto para poder llevar a cabo el proyecto sin ningn
contratiempo, en qu consiste este proyecto, es que en el momento de estar
realizando el proyecto; se tena un software paralelamente trabajando para
detectar dichos problemas que se vayan presentando con el Flexprueba era
muy eficaz en sus procesos, el mismo que nos ayudaba a tener un control
eficiente del proyecto.

2.20.1 Pruebas de Aceptacin

Las pruebas que se realizaron fueron extensas las misma que se realizaron
con encuestas e instrucciones de comandos, y se corrigieron una por una
para evitar futuros inconvenientes.

Cada prueba se hizo unitariamente para cada tipo de problema que se


pudiese presentar en el transcurso dl proyecto.

Mediante el cuadro de dilogo Agregar nuevo proyecto Con este mtodo,


puede elegir el lenguaje de programacin del proyecto de prueba, que
puede ser importante para codificar pruebas, como en el caso de pruebas
unitarias o de pruebas Web codificadas.

183
UNIVERSIDAD TECNICA DE MACHALA

CAPITULO III: DESARROLLO DE LA PROPUESTA

3.1 Metodologa a utilizar

Hoy en da hay distintas metodologas que te ayudan a realizar eficientemente


un proyecto, y cada una de ellas se enfocan de llevar un mtodo de
lineamientos por los cuales uno se debe guiar, para la realizacin del proyecto
de ANLISIS, DISEO E IMPLEMENTACIN DE UN WEB SITE PARA
CONTROLAR LA GESTIN ACADMICA DEL COLEGIO NACIONAL MIXTO
DR. JOS MARA VELASCO IBARRA DEL CANTN EL GUABO, hemos
escogido la metodologa que esta de acorde con nuestra necesidades y nos
va ayudar a la realizacin del mismo la metodologa eXtreme Programming o
ms conocida como Metodologa XP.

3.1.1 Metodologa XP

La programacin extrema o eXtreme Programming (XP) es un enfoque de la


ingeniera de software formulado por Kent Beck, autor del primer libro sobre la
materia, Extreme Programming Explained: Embrace Change (1999). Es el ms
destacado de los procesos giles de desarrollo de software. Al igual que stos,
la programacin extrema se diferencia de las metodologas tradicionales
principalmente en que pone ms nfasis en la adaptabilidad que en la
previsibilidad. Los defensores de XP consideran que los cambios de requisitos
sobre la marcha son un aspecto natural, inevitable e incluso deseable del
desarrollo de proyectos. Creen que ser capaz de adaptarse a los cambios de
requisitos en cualquier punto de la vida del proyecto es una aproximacin
mejor y ms realista que intentar definir todos los requisitos al comienzo del
proyecto e invertir esfuerzos despus en controlar los cambios en los
requisitos.

Se puede considerar la programacin extrema como la adopcin de las


mejores metodologas de desarrollo de acuerdo a lo que se pretende llevar a
cabo con el proyecto, y aplicarlo de manera dinmica durante el ciclo de vida
del software.

184
UNIVERSIDAD TECNICA DE MACHALA

3.1.1.1 Valores

Los Valores originales de la programacin extrema son: simplicidad,


comunicacin, retroalimentacin (feedback) y coraje. Un quinto valor, respeto,
fue aadido en la segunda edicin de Extreme Programming Explained. Los
cinco valores se detallan a continuacin:

3.1.1.2 Simplicidad:

La simplicidad es la base de la programacin extrema. Se simplifica el diseo


para agilizar el desarrollo y facilitar el mantenimiento. Un diseo complejo del
cdigo junto a sucesivas modificaciones por parte de diferentes
desarrolladores hace que la complejidad aumente exponencialmente. Para
mantener la simplicidad es necesaria la refactorizacin del cdigo, sta es la
manera de mantener el cdigo simple a medida que crece. Tambin se aplica
la simplicidad en la documentacin, de esta manera el cdigo debe
comentarse en su justa medida, intentando eso s que el cdigo est
autodocumentado. Para ello se deben elegir adecuadamente los nombres de
las variables, mtodos y clases. Los nombres largos no decrementan la
eficiencia del cdigo ni el tiempo de desarrollo gracias a las herramientas de
autocompletado y refactorizacin que existen actualmente. Aplicando la
simplicidad junto con la autora colectiva del cdigo y la programacin por
parejas se asegura que cuanto ms grande se haga el proyecto, todo el
equipo conocer ms y mejor el sistema completo.

3.1.1.3 Comunicacin:

La comunicacin se realiza de diferentes formas. Para los programadores el


cdigo comunica mejor cuanto ms simple sea. Si el cdigo es complejo hay
que esforzarse para hacerlo inteligible. El cdigo autodocumentado es ms
fiable que los comentarios ya que stos ltimos pronto quedan desfasados con
el cdigo a medida que es modificado. Debe comentarse slo aquello que no
va a variar, por ejemplo el objetivo de una clase o la funcionalidad de un
mtodo. Las pruebas unitarias son otra forma de comunicacin ya que
describen el diseo de las clases y los mtodos al mostrar ejemplos concretos
de cmo utilizar su funcionalidad. Los programadores se comunican

185
UNIVERSIDAD TECNICA DE MACHALA

constantemente gracias a la programacin por parejas. La comunicacin con


el cliente es fluida ya que el cliente forma parte del equipo de desarrollo. El
cliente decide qu caractersticas tienen prioridad y siempre debe estar
disponible para solucionar dudas.

3.1.1.4 Retroalimentacin (feedback):

Al estar el cliente integrado en el proyecto, su opinin sobre el estado del


proyecto se conoce en tiempo real. Al realizarse ciclos muy cortos tras los
cuales se muestran resultados, se minimiza el tener que rehacer partes que no
cumplen con los requisitos y ayuda a los programadores a centrarse en lo que
es ms importante. Considrense los problemas que derivan de tener ciclos
muy largos. Meses de trabajo pueden tirarse por la borda debido a cambios en
los criterios del cliente o malentendidos por parte del equipo de desarrollo. El
cdigo tambin es una fuente de retroalimentacin gracias a las herramientas
de desarrollo. Por ejemplo, las pruebas unitarias informan sobre el estado de
salud del cdigo. Ejecutar las pruebas unitarias frecuentemente permite
descubrir fallos debidos a cambios recientes en el cdigo.

3.1.1.5 Coraje o valenta:

Los puntos anteriores parecen tener sentido comn, entonces, por qu


coraje? Para los gerentes la programacin en parejas puede ser difcil de
aceptar, porque les parece como si la productividad se fuese a reducir a la
mitad ya que solo la mitad de los programadores est escribiendo cdigo. Hay
que ser valiente para confiar en que la programacin por parejas beneficia la
calidad del cdigo sin repercutir negativamente en la productividad. La
simplicidad es uno de los principios ms difciles de adoptar. Se requiere
coraje para implementar las caractersticas que el cliente quiere ahora sin caer
en la tentacin de optar por un enfoque ms flexible que permita futuras
modificaciones. No se debe emprender el desarrollo de grandes marcos de
trabajo (frameworks) mientra el cliente espera. En ese tiempo el cliente no
recibe noticias sobre los avances del proyecto y el equipo de desarrollo no
recibe retroalimentacin para saber si va en la direccin correcta. La forma de

186
UNIVERSIDAD TECNICA DE MACHALA

construir marcos de trabajo es mediante la refactorizacin del cdigo en


sucesivas aproximaciones.

3.1.1.6 Respeto:

El respeto se manifiesta de varias formas. Los miembros del equipo se


respetan los unos a otros, porque los programadores no pueden realizar
cambios que hacen que las pruebas existentes fallen o que demore el trabajo
de sus compaeros. Los miembros respetan su trabajo porque siempre estn
luchando por la alta calidad en el producto y buscando el diseo ptimo o ms
eficiente para la solucin a travs de la refactorizacin del cdigo. Los
miembros del equipo respetan el trabajo del resto no haciendo menos a otros,
si no orientndolos a realizarlo mejor, obteniendo como resultado una mejor
autoestima en el equipo y elevando el ritmo de produccin en el equipo.

3.1.2 Caractersticas fundamentales

Las caractersticas fundamentales del mtodo son:

Desarrollo iterativo e incremental: pequeas mejoras, unas tras otras.

Pruebas unitarias continuas, frecuentemente repetidas y automatizadas,


incluyendo pruebas de regresin. Se aconseja escribir el cdigo de la
prueba antes de la codificacin. Vase, por ejemplo, las herramientas de
prueba JUnit orientada a Java, DUnit orientada a Delphi y NUnit para la
plataforma.NET. Estas dos ltimas inspiradas en JUnit.

Programacin en parejas: se recomienda que las tareas de desarrollo se


lleven a cabo por dos personas en un mismo puesto. Se supone que la
mayor calidad del cdigo escrito de esta manera -el cdigo es revisado y
discutido mientras se escribe- es ms importante que la posible prdida de
productividad inmediata.

Frecuente integracin del equipo de programacin con el cliente o


usuario. Se recomienda que un representante del cliente trabaje junto al
equipo de desarrollo.

187
UNIVERSIDAD TECNICA DE MACHALA

Correccin de todos los errores antes de aadir nueva funcionalidad.


Hacer entregas frecuentes.

Refactorizacin del cdigo, es decir, reescribir ciertas partes del cdigo


para aumentar su legibilidad y mantenibilidad pero sin modificar su
comportamiento. Las pruebas han de garantizar que en la refactorizacin
no se ha introducido ningn fallo.

Propiedad del cdigo compartida: en vez de dividir la responsabilidad en


el desarrollo de cada mdulo en grupos de trabajo distintos, este mtodo
promueve el que todo el personal pueda corregir y extender cualquier parte
del proyecto. Las frecuentes pruebas de regresin garantizan que los
posibles errores sern detectados.

Simplicidad en el cdigo: es la mejor manera de que las cosas funcionen.


Cuando todo funcione se podr aadir funcionalidad si es necesario. La
programacin extrema apuesta que es ms sencillo hacer algo simple y
tener un poco de trabajo extra para cambiarlo si se requiere, que realizar
algo complicado y quizs nunca utilizarlo.

La simplicidad y la comunicacin son extraordinariamente complementarias.


Con ms comunicacin resulta ms fcil identificar qu se debe y qu no se
debe hacer. Cuanto ms simple es el sistema, menos tendr que comunicar
sobre ste, lo que lleva a una comunicacin ms completa, especialmente si
se puede reducir el equipo de programadores.

3.1.3 Programacin extrema (Pipeline)

Variacin de la programacin extrema clsica que consigue cuadriplicar la


eficacia de la misma.

3.1.3.1 Principios (Pipeline)

La programacin extrema en pipeline se basa en la arquitectura Harvard de los


procesadores, de tal manera que con un nmero n de escritorios remotos
donde n es igual al nmero de participantes en la programacin del proyecto
se puede aumentar la eficiencia del trabajo hasta 4 veces, entindase que

188
UNIVERSIDAD TECNICA DE MACHALA

cada x tiempo un programador deja de programar una clase o parte del


programa para programar otra diferente en el escritorio remoto de otro de los
componentes del equipo as podramos definir el trmino eficiencia como e=x+
(n*nc-1) donde x es el tiempo de cada ciclo, n el nmero de escritorios
remotos o participantes, nc es el nmero de iteraciones del proyecto.

3.2 Planificacin

3.2.1 Plan de Entregas

El proyecto est completamente organizado y planificado para su elaboracin,


prueba y finalizacin

Estado Inicial: El proyecto se comenz con su debida planificacin,


realizando todas las encuestas y pruebas de campo que se deban
realizar, luego se comenz a disear, por ultimo programar y realizar la
base de datos.

Estado Final: Con el proyecto alcanzaremos dar a conocer al colegio


tanto como regionalmente y como internacionalmente.

Estrategia de desarrollo: La planificacin y organizacin de tareas nos


llevo a realizar el proyecto en la fecha establecida sin ningn
contratiempo.

3.2.2 Velocidad de Proyecto

El proyecto se lo realizo con un tiempo acorde con la planificacin, se produjo


en un diagrama de Gantt, elaborado con el Microsoft Proyect , el cual nos dio
una idea de cunto tiempo iba a tomar realizar el proyecto, realizando todas
las indicaciones de la elaboracin y planificacin de el tiempo, la aplicacin se
la realizo a una velocidad de acuerdo con el cronograma establecido.

Sin ninguna extensin o alargue, todos los problemas que se nos


presentaron estuvieron controlados, y le dimos su respectiva solucin la cual
se refleja en el tiempo que se entregara dicho trabajo.

189
UNIVERSIDAD TECNICA DE MACHALA

3.2.3 Iteraciones

El proyecto de la aplicacin web repetimos varias veces la estructura de la


base de datos, con el cual inclua reestructurar los enlaces de cada entidad
relacionada con otra, e incluso cambiar e ingresar nuevos elementos en
tablas que se modificaban.

Tambin se nos presentaron varios momentos de reestructurar el site web

Para evitar los numerosos cambios que se podran presentar en la


realizacin de nuestra aplicacin, dividimos la aplicacin en partes que se
podran modificar por separado pero que a su vez cambiaran toda la
estructura y diseo de la pgina.

En programacin, utilizamos varios elementos de programacin para


controlar las instrucciones desde un mismo archivo y que este archivo
represente el cambio a toda la pgina web, como un ejemplo utilizamos los
comandos javascript y las estructuras css.

3.3 Diseo

3.3.1 Funcionalidad mnima

El propsito de la aplicacin es dar una funcin de Gestin Acadmica para el


manejo de matriculacin y de ingreso de notas para dar mayor facilidad a los
administradores de dicho sistema.

Para los estudiantes ser ms provechoso conocer sus notas y poder realizar
su respectiva matricula, con la facilidad que ofrece la pgina web por medio
del internet.

190
UNIVERSIDAD TECNICA DE MACHALA

3.4 Desarrollo

El sistema tiene su respectiva Base de Datos con la informacin de los


estudiantes, docentes etc., los cuales se llevaran un control
El diseo es amigable y su aspecto es muy fcil de utilizar para todo tipo de
persona que lo utilice.
La informacin concentrada en la BD local a travs de la operacin con los
servicios integrales es propiedad del IMSS por lo que queda prohibido para
usuarios no registrados hacer uso de la BD distinto a la prestacin del
servicio.
Capacidad de bsquedas y procesamiento.
Garantizar disponibilidad de la informacin.
Capacidad de escribir en dispositivos pticos.
Capacidad de exportar informacin a medios externos para su uso en
programas de terceros incluyendo interoperabilidad
Almacenamiento de datos de estudiantes y resultados que permitan la
bsqueda
Clasificados por los diversos criterios establecidos por el Instituto.
Formatos de solicitud de pruebas disponibles para el Docente
Se debe incluir la informacin de precio de cada prueba al inicio del
contrato o en su desarrollo.
Seguridad
Autenticacin de usuarios para el uso del sistema.
Esquema de usuarios, perfiles y grupos para la administracin del acceso
y los privilegios en la aplicacin.

3.4.1 Integracin

En nuestro desarrollo del site web nos hemos visto en la necesidad de


trabajar conjuntamente con todos los involucrados en el mismo ya sean
externos e internos, como lo son con el personal administrativo, (Rector,
Secretaria, Docentes, Estudiantes).

191
UNIVERSIDAD TECNICA DE MACHALA

Adems hemos trabajado con auto capacitacin y con ayuda de nuestro


asesor el mismo que evalu y rectifico cada uno de nuestros errores que se
originaban en la elaboracin del proyecto.

192
UNIVERSIDAD TECNICA DE MACHALA

3.5 Herramientas Utilizadas

REQUISITOS FUNCIONALES

Gestin de Documentacin

- Historia del Colegio Nacional Mixto Dr. Jos Mara Velasco Ibarra

- Acta de Matriculas

- Nmina de Personal Administrativo

- Nmina de Profesores

- Nmina de Alumnos

- Institucin y su mbito.

- reas Administrativas

- Departamento de Psicologa

- Canchas deportivas

- Bares

- Parques

- reas Verdes

GESTIN ACADMICA

- Profesores

- Estudiantes

- Usuarios

- Matricula

193
UNIVERSIDAD TECNICA DE MACHALA

CONSULTAS

- Profesores

- Estudiantes

- Usuario

- Matricula

- Notas

Gestin de EVENTOS

- Quienes Somos

- Servicios

- Sistema

- Contctenos

- Descargas

- Formulario de autenticacin

REQUISITOS NO FUNCIONALES

Compatibilidad

El sistema es compatible con los sistemas operativos:

Windows XP

Vista

194
UNIVERSIDAD TECNICA DE MACHALA

Linux

Windows 7

Hardware

Pentium IV en adelante

1 Gb de memoria

Sistema operativo de 32 o 64 bits

Disco Duro de 280 o 500 Gb

Browsers:

Mozilla FireFox

Google Chrome

Opera

Safira

Copias de seguridad del sistema


Hacemos peridicamente copias de seguridad del sistema por si en
algn momento borramos sin darnos cuenta, o que se pueda estropear
el disco duro o cualquier error que nos pueda ocurrir en el sistema para
as poder corregirlo.

Identificacin de usuarios

Se necesita cada vez que abrimos el programa que se identifique el


usuario con su contrasea correspondiente para asegurarnos que
ninguna persona ajena a la empresa entre en nuestra base de datos.

195
UNIVERSIDAD TECNICA DE MACHALA

CAPITULO IV: EVALUACIN DE RESULTADOS


EVALUACIN DE EXPERTOS

ATRIBUTO DE CALIDAD BAJA CORRECTA ALTA EXCELENTE

Disponibilidad

Confidencialidad

Funcionalidad

Desempeo

Confiabilidad

Seguridad externa

Seguridad interna

Fiabilidad

Eficiencia

Mantenibilidad

Portabilidad

_____________________
Ing. Sist. Rossmery Samaniego Mg. Sc
EVALUACIN DE EXPERTOS

ATRIBUTO DE CALIDAD BAJA CORRECTA ALTA EXCELENTE

196
UNIVERSIDAD TECNICA DE MACHALA

Disponibilidad

Confidencialidad

Funcionalidad

Desempeo

Confiabilidad

Seguridad externa

Seguridad interna

Fiabilidad

Eficiencia

Mantenibilidad

Portabilidad

___________________________
Ing. Sist. Jonathan Aguilar

ENCUESTAS
USUARIOS (SECRETARIA)
BAJA

EXCELENTE
CORRECTA

ALTA

ATRIBUTO DE CALIDAD

197
UNIVERSIDAD TECNICA DE MACHALA

Diseo

Facilidad de manejo

Ayudas y documentacin

Rendimiento del programa

Tipo de navegacin que ofrece el programa

Tipo de interaccin con el programa

Estructura del programa

Animaciones

Exploracin

Herramientas

Grficos

Interactividad

Contenidos

Funcionalidades

_____________________
Secretaria
USUARIOS (PROFESORES)
BAJA

EXCELENTE
CORRECTA

ALTA

ATRIBUTO DE CALIDAD

Diseo
Facilidad de manejo
Ayudas y documentacin
Rendimiento del programa
Bases de Datos de alumnos
Versatilidad del programa
Tipo de interaccin con el programa
Estructura del programa

198
UNIVERSIDAD TECNICA DE MACHALA

Animaciones
Exploracin
Herramientas
Grficos
Interactividad
Contenidos
Funcionalidades

_____________________
Prof.:

USUARIOS (PROFESORES)

BAJA

EXCELENTE
CORRECTA

ALTA
ATRIBUTO DE CALIDAD

Diseo
Facilidad de manejo
Ayudas y documentacin
Rendimiento del programa
Bases de Datos de alumnos
Versatilidad del programa
Tipo de interaccin con el programa
Estructura del programa
Animaciones
Exploracin
Herramientas
Grficos
Interactividad
Contenidos
Funcionalidades

_____________________

199
UNIVERSIDAD TECNICA DE MACHALA

Prof.:

USUARIOS (PROFESORES)

BAJA

EXCELENTE
CORRECTA

ALTA
ATRIBUTO DE CALIDAD

Diseo
Facilidad de manejo
Ayudas y documentacin
Rendimiento del programa
Bases de Datos de alumnos
Versatilidad del programa
Tipo de interaccin con el programa
Estructura del programa
Animaciones
Exploracin
Herramientas
Grficos
Interactividad
Contenidos
Funcionalidades

_____________________
Prof.:

USUARIOS (ESTUDIANTES)
BAJA

EXCELENTE
CORRECTA

ALTA

ATRIBUTO DE CALIDAD

Facilidad de manejo para el alumno

Ayudas y documentacin suministrada para el alumno

200
UNIVERSIDAD TECNICA DE MACHALA

Tipo de navegacin que ofrece el programa

Interaccin con el programa

Estructura del programa

Aspectos que desarrollan la creatividad del usuario

Aspectos motivadores del programa

Motivacin e inters

Diseo

Contenidos

Funcionalidades

Usabilidad

Grado de entretenimiento

_____________________
Alumna:
USUARIOS (ESTUDIANTES)
BAJA

EXCELENTE
CORRECTA

ALTA

ATRIBUTO DE CALIDAD

Facilidad de manejo para el alumno

Ayudas y documentacin suministrada para el alumno

Tipo de navegacin que ofrece el programa

Interaccin con el programa

Estructura del programa

201
UNIVERSIDAD TECNICA DE MACHALA

Aspectos que desarrollan la creatividad del usuario

Aspectos motivadores del programa

Motivacin e inters

Diseo

Contenidos

Funcionalidades

Usabilidad

Grado de entretenimiento

_____________________
Alumna:
USUARIOS (ESTUDIANTES)
BAJA

EXCELENTE
CORRECTA

ALTA

ATRIBUTO DE CALIDAD

Facilidad de manejo para el alumno

Ayudas y documentacin suministrada para el alumno

Tipo de navegacin que ofrece el programa

Interaccin con el programa

Estructura del programa

Aspectos que desarrollan la creatividad del usuario

Aspectos motivadores del programa

Motivacin e inters

202
UNIVERSIDAD TECNICA DE MACHALA

Diseo

Contenidos

Funcionalidades

Usabilidad

Grado de entretenimiento

_____________________
Alumna:

USUARIOS (ESTUDIANTES)

BAJA

EXCELENTE
CORRECTA

ALTA
ATRIBUTO DE CALIDAD

Facilidad de manejo para el alumno

Ayudas y documentacin suministrada para el alumno

Tipo de navegacin que ofrece el programa

Interaccin con el programa

Estructura del programa

Aspectos que desarrollan la creatividad del usuario

Aspectos motivadores del programa

Motivacin e inters

Diseo

Contenidos

Funcionalidades

203
UNIVERSIDAD TECNICA DE MACHALA

Usabilidad

Grado de entretenimiento

_____________________
Alumna:

USUARIOS

BAJA

EXCELENTE
CORRECTA

ALTA
ATRIBUTO DE CALIDAD

Facilidad de manejo para el alumno

Ayudas y documentacin suministrada para el alumno

Tipo de navegacin que ofrece el programa

Interaccin con el programa

Estructura del programa

Aspectos que desarrollan la creatividad del usuario

Aspectos motivadores del programa

Motivacin e inters

Diseo

Contenidos

Funcionalidades

Usabilidad

Grado de entretenimiento

204
UNIVERSIDAD TECNICA DE MACHALA

_____________________
Alumna:

CONCLUSIONES

El proyecto realizado es un aporte importante para la institucin educativa, ya que


le permite estar a nivel de otras instituciones educativas que cuentan con su sitio
oficial en la Red de Internet.

Adems su sistema de matrculas es innovador y fcil de manejo para llevar a


cabo el proceso de matriculacin de los alumnos de esta institucin tan
prestigiosa y que forma parte de la historia del Cantn El Guabo y el pas.

205
UNIVERSIDAD TECNICA DE MACHALA

RECOMENDACIONES

Es preciso que esta institucin establezca estos tipos de servicios para ganar ms
prestigio a nivel educativo y profesional, el mismo que es un paso importante
dentro de la comunidad guabea y del pas.

Adems obtener informacin acerca de los avances de la tecnologa y sus


aplicaciones las mismas que les permitirn automatizar todos los procesos que se
llevan en la institucin para que no quede relegada frente a otras instituciones que
tiene su mismo fin.

206
UNIVERSIDAD TECNICA DE MACHALA

BIBLIOGRAFA

Desarrollo Web, Tu mejor ayuda para aprender a hacer webs, Consulta 5


de Enero del 2010
http://www.desarrolloweb.com/articulos/1767.php

http://www.desarrolloweb.com/manuales/xajax.html

Mundo JavaScript, Tu coleccin de JavaScript en la web, Consulta 8 de


Enero del 2010

http://www.mundojavascript.com

JotForm, Easiest Form Builder, First Web Based WYSIWYG Form Builder.
Create and publish web forms using your browser, Consulta 8 de Enero del
2010

http://jotform.com/index.php

Gamarod.com.ar, Tutorial PHP | MySql, jueves, 22 de octubre de 2007,


Consulta 10 de Enero del 2010

http://www.gamarod.com.ar/recursos/tutoriales/php/

WordPress 2.9.1, Tutorialzine - PHP MySQL jQuery CSS Tutorials,


Resources and Freebies, Consulta 10 de Enero del 2010

http://tutorialzine.com

http://www.proclave.com/esp/cursos/glosario.htm

207
UNIVERSIDAD TECNICA DE MACHALA

PHP en castellano, PHP en castellano. Tutorial de PHP y MySQL,Consulta


10 de Febrero 2010

http://www.programacion.com/php/tutorial/php/

WordPress 2.9.2, 25 PHP Form Validation Snippets,


563694112EC60C3944903F1639203648, Consulta 12 de Febrero del 2010

http://hungred.com/useful-information/php-form-validation-snippets/

Tutoriales php, Original design institution KMT, Consulta 12 de Febrero del


2010

http://www.original-design.es/tutosphp.php

208
UNIVERSIDAD TECNICA DE MACHALA

GLOSARIO

Administrador: La persona que supervisa y controla el correcto


funcionamiento de un sistema informtico.

Administrador de Bases de Datos. (DBA) La persona encargada del


mantenimiento de la base, tanto de los datos, su integridad, manejo del
gestor de datos, los ndices (por corrupcin o cualquier motivo), de
directorios y alias, consultas y sentencias desde fuera de programas, igual
que conexiones o transacciones, etc., como del acceso de usuarios,
autorizaciones, palabras de paso. Depende totalmente de la base de datos
de que se trate.

AI: Siglas de Inteligencia Artificial (Artificial Intelligence).

Alfanumrico: Conjunto de letras, nmeros y otros smbolos, como signos


de puntuacin o smbolos matemticos. Hace referencia a los caracteres
del teclado y al conjunto de caracteres disponibles para las diferentes
operaciones de transferencia de datos del ordenador.

Algoritmo: A partir de un conjunto de datos bien definidos o de un


problema concreto, es el conjunto de reglas o de procedimientos lgicos
destinados a conseguir el resultado idneo. Se emplea en programacin.

Anlisis: Distintos procesos dentro del desarrollo de una aplicacin.


Generalmente se suele dividir en tres tipos distintos: Anlisis de
Oportunidad o Previo, donde tan slo se globaliza el problema y se estudia
viabilidad. Anlisis Funcional, donde se estudian los objetivos a conseguir
bajo un prisma informtico y los pasar a dar a nivel de datos, tiempos de
procesos, etc. Anlisis Orgnico, que define exactamente la aplicacin
basndose en el anlisis funcional, y se crean los diagramas necesarios,
generando ya, con los estudios previos, el denominado "cuaderno de
carga" con el material suficiente para el desarrollo por los programadores.

Aplicacin: Programa o conjuntos de programas diseados para la


realizacin de una tarea concreta, como puede ser una aplicacin
comercial, contable, etc.

209
UNIVERSIDAD TECNICA DE MACHALA

Archivo: Se suele usar como sinnimo de fichero. En el mundo de los


compresores, es frecuente hacer una diferenciacin, diciendo que varios
ficheros originales se comprimen y se empaquetan en un archivo
comprimido.

Arranque: Se suele usar este nombre para referirse a la accin de poner


un ordenador en funcionamiento. Se suele distinguir entre "arranque en
fro" (cuando el ordenador estaba apagado) y "arranque en caliente"
(cuando el ordenador estaba encendido y se "reinicializa" sin llegar a
apagarlo fsicamente). En ingls es frecuente llamarlo "boot", y distinguir
entre "cold boot" (fro) y "warm boot" (caliente) o "reset".

Atributos: Referido a ficheros, determinadas cualidades que se crean en


stos dependiendo de si pueden ser ledos, modificados, ocultos, etc.

AVI: Formato de video comprimido para ordenador, el estndar


en Windows.

BackUp: Copia de seguridad.

Bajar: Es cada vez ms frecuente or frases como "Me he bajado de la red


una actualizacin para mi antivirus". La palabra "bajar" (o "descargar", en
ingls "download") indica una transferencia de informacin desde un
ordenador remoto (por ejemplo, un ordenador que haga de anfitrin en
Internet o en otra red) hasta nuestro ordenador personal. La palabra
"subir" (en ingls "upload") indica el envo de informacin de nuestro
ordenador a un ordenador anfitrin en la red.

Base de datos: Aplicacin informtica para manejar informacin en forma


de "fichas": clientes, artculos, pelculas, etc. La mayora de las bases de
datos actuales permiten hacer listados, consultas, crear pantallas de
visualizacin de datos, controlar el acceso de los usuarios, etc. Tambin es
cada vez ms frecuente que las consultas se puedan hacer en un lenguaje
estndar conocido como SQL.

Base de Datos Orientada a Objetos: Las BDOO almacenan y manipulan


informacin que puede ser representada por objetos. Es la evolucin de las
Bases de Datos para soportar el anlisis, diseo y programacin Orientado
a Objetos.

BIOS: Sistema de entrada/salida bsica (Basic Input Output System).


Suele tratarse de uno o varios chips de memoria ROM (habitualmente
EPROMs) que contienen las rutinas bsicas de entrada y salida, los

210
UNIVERSIDAD TECNICA DE MACHALA

primeros pasos que debe dar un ordenador al encenderse, la configuracin


bsica del sistema, etc.

Blog: Cuaderno de bitcora. Lugar que una persona crea en Internet con el
fin de reflejar sus opiniones, gustos, experiencias, etc. Estos sitios se
encuentran generalmente en servidores preparados para esta labor.

Bit: Es la unidad mnima de informacin que puede almacenar y manejar


un ordenador, equivalente a un 0 o un 1.

Bitmap: (o mapa de bits). Un tipo de imgenes para ordenador, en las que


se almacena informacin sobre los puntos que las componen y el color de
cada punto (al contrario que en las imgenes vectoriales). Esto supone que
al ampliar la imagen se pierde definicin, se ven "puntos gordos".

BMP: Es la Extensin que corresponde a un tipo de fichero grfico de


mapa de bits (el estndar en Windows): BitMaP.

Bps: Bits por segundo: es la unidad en que se mide la velocidad de


transferencia efectiva de un mdem o de una conexin serie.

Browser: Visualizador de pginas en Internet, como pueden ser Netscape


o I. Explorer.

Buffer: memoria intermedia para el almacenamiento de datos temporales


en la comunicacin entre un ordenador y un dispositivo externo (p.ej., una
impresora). Cuando es un programa informtico el que hace la misin de
almacenamiento intermedio para los datos que se envan a la impresora, a
dicho programa se le suele llamar Spooler.

Bug: error en un programa, que hace que en ciertas circunstancias pueda


no comportarse correctamente.

Buscador: pgina en Internet que permite buscar informacin a travs de


ella, bien sea tecleando nosotros mismos una serie de palabras clave, o
bien empleando el sistema de mens que la pgina incorpora. Cada da
ofrecen ms servicios, entre los que se incluyen noticias, chats, etc., y se
suelen llamar "portales".

Byte: Es la unidad bsica de informacin. En la prctica, se puede


considerar que un byte es la cantidad de espacio necesaria para
almacenar una letra. Tiene mltiplos como
el Kilobyte, Megabyte, Gigabyte y Terabyte. Internamente, corresponde a
8 bits.

211
UNIVERSIDAD TECNICA DE MACHALA

Campo: En el mundo de las bases de datos, cada una de los datos que
forman un registro (o ficha). Por ejemplo, en la ficha de cada proveedor
tendramos campos como su nombre, su direccin postal, su telfono, etc.

Carpeta: (en ingls, "folder") Nombre que se da a los directorios en


algunos sistemas, como Windows.

Clave: En el mundo de las bases de datos, se conoce como clave (en


ingls Key) al valor de es capaz de distinguir un registro de otro de forma
fiable, como podra ser el DNI o el Pasaporte para el caso de una persona
(el nombre no sera una clave correcta, ya que s puede repetirse).

Cliente: Un ordenador que accede a los recursos que red que otro
ordenador (el servidor) deja a su disposicin.

Cliente Servidor: Se le suele llamar as a la arquitectura a dos capas, es


decir, una capa servidor, u ordenador que contendr los datos y los
programas gestores asociados, y capas clientes, u ordenadores que se
dirigirn al anterior para obtener la informacin.

Cdigo: Es la sucesin de sentencias que dan lugar al programa fuente.

Columna: En una tabla o fichero de base de datos, una columna es lo que


anteriormente se denominaba como campo. Las columnas de la tabla
indican los datos que se van a introducir en la tabla, el tipo y restricciones
sobre ellos, conformando as la estructura de la tabla. Las filas sern las
entradas reales de datos.

COM: Es la extensin que corresponde a un tipo de fichero ejecutable bajo


MS-DOS. // COM: Nombre que reciben bajo DOS los puertos serie (para
conectar mdem o ratn, por ejemplo). Lo habitual es que un ordenador
tenga dos puertos de este tipo, que se designaran COM1 y COM2.

Coma (fija y flotante): La expresin "coma fija" (en ingls fixed point) se
usa para referirse a nmeros con una cantidad de cifras decimales
constantes. Estos nmeros son ms sencillos de manipular (pero menos
tiles en la prctica) que los nmeros en "coma flotante" (en ingls,
Floating Point), con un nmero variable de cifras decimales.

Compatibilidad: Es un trmino que se utiliza tanto en hardware como en


software, y haciendo una definicin casera dira que es la caracterstica de
cualquier ente informtico para que en su carrera ascendente introduzca, o
al menos no rechace, las actuaciones en versiones anteriores. Un ejemplo
de ello lo tenemos en la serie X86 donde todos los PCs tienen un factor
comn, de ellos que se utilice a bajo nivel un lenguaje ensamblador que
abarca a todos ellos.

212
UNIVERSIDAD TECNICA DE MACHALA

Compatible: Se dice que un ordenador es compatible con otro cuando


puede utilizar todo el software diseado para aquel (a veces incluso todo o
parte del hardware). Hoy en da es frecuente hablar de ordenadores
"compatibles" refirindose a ordenadores "compatibles PC", con
procesadores de la gama x86.

Compilador: Aplicacin informtica que se usa para crear programas en


un cierto lenguaje de programacin. Convierte los programas creados en
un lenguaje de programacin al lenguaje interno del ordenador (cdigo
mquina). En los compiladores, todo el programa original (fuente) se
convierte a cdigo mquina en bloque, y el programa resultante (programa
ejecutable) se puede en otro ordenador usar sin necesidad de recurrir otra
vez al compilador. En los intrpretes, el programa fuente se convierte a
cdigo mquina, lnea por lnea, justo en el momento en que se pone a
funcionar; no se crea ningn ejecutable, y por eso es necesario distribuir el
programa fuente pero tambin el intrprete que es capaz de entenderlo.

Corel: Conocido fabricante de software, autor de paquetes como Corel


Draw y que adquiri y desarrolla tambin otros como Ventura Publisher y
WordPerfect. Recientemente ha lanzado al mercado su propia distribucin
de Linux.

Correo electrnico: Tambin conocido por e-mail. Aunque parece un


concepto circunscrito al mbito de Internet, el SMTP, no es cierto, basta ver
X.400. En cualquier caso, permite el intercambio de mensajes y en muchos
casos sustituye al sistema FTP ya que acepta el envo de ficheros,
imgenes, etc. aparte del texto.

DBMS: DataBase Management System, Sistema de utilizacin de Bases


de Datos.

Directorio: apartado de un sistema de almacenamiento (diskette, disco


duro, CdRom, etc.), destinado a contener ficheros (o, a su vez, ms
directorios, que entonces se suelen llamar "subdirectorios").

DirectX: Interfaz de programacin bajo Windows, que permite acceder


directamente al hardware (por ejemplo, tarjetas grficas y de sonido). Es
empleado para programar juegos en este sistema.

Disco duro: Es un dispositivo de almacenamiento, que naci como


evolucin del diskette. Tiene una capacidad mucho mayor (hoy en da es
habitual que pasen de los 2.5Gb) y es mucho ms rpido, pero no est
diseado para ser llevado de un sitio a otro, sino para permanecer dentro
del ordenador (salvo algunas pocas excepciones, que s son portables).

213
UNIVERSIDAD TECNICA DE MACHALA

DLL: Biblioteca de enlace dinmico (Dynamic Link Library), que contiene


funciones que pueden ser utilizadas desde los programas. Es un tipo de
fichero muy frecuente en Windows.

DOC: Extensin de los ficheros de creados con Word y otros procesadores


de texto (abreviatura de DOCument).

DOS: Sistema operativo de disco (Disk Operating System). Se trata de un


sistema monousuario y monotarea. Hay diversas versiones, con distintos
nombres segn la casa que lo desarrolle: MS-DOS (Microsoft), DrDos
(Digital Research), PcDos (IBM), Novell Dos (Novell), etc.

DRAM: Memoria RAM dinmica.

Ejecutable: Un programa que se puede "ejecutar" o usar "por s solo", sin


que haga falta tener una cierta aplicacin informtica desde la que
manejarlo (para ms detalles, ver Compilador).

Ejecutar: En informtica, la palabra "ejecutar" (en ingls "run", que algunos


autores traducen literalmente por "correr") equivale a poner
un programa en funcionamiento.

E-mail: correo electrnico (electronic mail). Mensajes (normalmente


privados) enviados a travs de una red de ordenadores.

Enlace: Link. Refirindonos a Internet y pginas Web es un unin entre


varios documentos dentro de un mismo servidor, o con mayor frecuencia, la
posibilidad de acceder mediante la pulsacin de una palabra o frase,
generalmente resaltada y subrayada, a otra pgina situada en un
ordenador distinto y ubicado en cualquier lugar del mundo, ya que en el
momento de la creacin de ese enlace se le ha asignado la direccin o
URL a la que ha de dirigirse.

Evento: Trmino propio de la POO. Cuando a un objeto se le aplica una


accin para l previsible, genera un evento. Este puede ir o no
acompaado de un cdigo externo al objeto y dependiente del
programador. Por ejemplo, cuando el sistema nos da un error y nos
pregunta si continuamos, lo hace a travs de un botn, que es un objeto
sobre el que hay que presionar. La pulsacin del ratn sobre el mismo
producir la activacin del evento PulsoClick (he inventado el nombre). De
manera que si esa accin se produce, el programa estar preparado para
ejecutar el cdigo de respuesta.

Extensin: En sistemas operativos como MsDos y Windows, es frecuente


que el nombre de un fichero est formado por dos partes, separadas por un

214
UNIVERSIDAD TECNICA DE MACHALA

punto. La primera parte (limitada en Dos a 8 letras de longitud) es el


nombre propiamente dicho; la segunda parte (hasta 3 letras, en Dos) es la
extensin, que suele indicar el tipo de informacin que guarda ese fichero.

Gb: Abreviatura de GigaByte.

GIF: Es la Extensin que corresponde a un tipo de fichero grfico de mapa


de bits (Graphics Interchange Format).

GigaByte: Mltiplo del byte: un gigabyte son 1.024 MegaBytes, cerca de


1.000 millones de bytes.

GUI: Interfaz grfica de usuario (Graphical User Interface).

Hardware: La parte "que se puede tocar" de un ordenador: caja (y todo su


contenido), teclado, pantalla, etc.

HD: Disco duro (Hard Disk) // HD: Alta densidad (High Density).

HTM: Extensin bajo MsDos de los ficheros de tipo HTML.

HTML: HyperText Markup Language: el lenguaje de descripcin de pginas


habitual en Internet.

HTTP: El protocolo usado en las pginas del WWW (HyperText Transfer


Protocol).

Informacin: Elemento base del concepto informtica, susceptible de ser


tratado por los ordenadores. A causa de la proliferacin de los medios
computacionales y su universalizacin, se introduce el trmino "Sociedad
de la informacin" refirindose a la apertura del conocimiento a todas las
clases sociales.

Intel: Conocido fabricante de procesadores, creador de la gama X86.

Interfaz: Conexin de un ordenador con el exterior, o entre dos


dispositivos.

Internet: Red de ordenadores a nivel mundial. Ofrece distintos servicios,


como el envo y recepcin de correo electrnico (e-mail), la posibilidad de
ver informacin en las pginas Web, de participar en foros de discusin

215
UNIVERSIDAD TECNICA DE MACHALA

(News), de enviar y recibir ficheros mediante FTP, de charlar en tiempo real


mediante IRC, etc.

Integridad Referencial: Un gestor de base de datos debe de estar


preparado para poder asegurar que los valores introducidos por el usuario
son vlidos. Esto se puede hacer a travs de rangos, o de distintas
operaciones (ver Restricciones de Dominio) y entre ellas la que
probablemente sea ms compleja, la referencia, que se da cuando a priori
o en el momento de crear los ficheros o tablas no se conocen los valores
que puede tomar un campo, por lo que es preciso una segunda tabla de
manera que vaya almacenando los posibles, y que ser la referencia de
aquella en la que se introducen los datos, para asegurar que son correctos.

Interfaz (programacin): Conceptualmente, una interfaz no es ms que un


contrato entre el que implementa la interfaz y el usuario de la misma. Al
definir una interfaz estamos diciendo realmente: Veo la necesidad de esta
funcionalidad. Reconozco que esta funcionalidad podra implementarse de
muchas formas diferentes. No me importa cmo se implemente fsicamente
la funcionalidad, pero deber atenerse a estas especificaciones. El usuario
de la interfaz puede escribir su cdigo basndose en las especificaciones,
sin preocuparse de posibles cambios en la implementacin de stas.

Interfaz de usuario: Es la manera de funcionar el ordenador de cara al


usuario, o mejor, la relacin de ambos, es decir, cmo responde a los
sucesos o acciones.

Java: Lenguaje de programacin orientado a objetos, basado en C++, cada


da ms extendido, especialmente a travs de Internet. Pretende ser un
lenguaje totalmente portable entre distintos ordenadores, gracias a que no
se compila cdigo, sino a un lenguaje intermedio que luego es interpretado
por la "mquina virtual Java", que s es especfica de cada plataforma. Esto
le da una velocidad ligeramente inferior a la de los programas realizados en
otros lenguajes compilados, como C++, a cambio de una mayor
portabilidad (aparte de las mejoras que el lenguaje en s incorpora sobre
otros como C++).

Javascript: Lenguaje de Script para pginas Web, basado en la sintaxis de


Java.

JPEG, JPG: Es la Extensin que corresponde a un tipo de fichero grfico


de mapa. Es un formato comprimido, que, al contrario que la mayora,
pierde definicin al comprimir: se puede indicar la cantidad de compresin

216
UNIVERSIDAD TECNICA DE MACHALA

que se desea, pero cuanto ms comprimamos, mayor prdida de calidad


tiene la imagen. Para fotografas digitalizadas con 640x480 puntos o ms,
un nivel de compresin entre 15 y 25 suele ser suficiente para reducir
mucho el espacio ocupado por la imagen, pero a la vez que la prdida de
calidad no sea muy apreciable. (Joint Picture Expert Group).

Lenguaje de Programacin: Son secuencias de instrucciones, ms o


menos parecidas al lenguaje humano, que permiten, una vez traducidas o
compiladas, ejecutar las rdenes incluidas en el programa.

Lenguajes de Prog Orientada Objetos (LPOO). Se les denomina as a


aquellos lenguajes de programacin capaces de trabajar con objetos en un
sentido amplio, es decir, un lenguaje puede manejar y basarse en objetos
porque los pueden crear segn un patrn o porque ya estn creados, pero
no se considera un LPOO en tanto no admite herencia, es decir, que de un
objeto pueda crearse otro distinto, que heredar parte de las propiedades
del primero. En este sentido hay polmica, puesto que dos tipos de
lenguaje cumplen con esas caractersticas, los denominados *puros* y los
*hbridos*. Los puros rompen con la programacin anterior y cualquier cosa
a utilizar es un objeto. Los hbridos soportan igual los objetos o mtodos o
clases, pero adems se traen las estructuras de programacin
tradicionales. Entre los primeros se encuentran Smalltalk o Eiffel, entre los
segundos estn los ms utilizados y conocidos en este momento, como C+
+, Delphi (basado en Object Pascal), Java, etc.

Linux: Versin de libre distribucin (gratis) del sistema operativo Unix,


desarrollada inicialmente por Linux Torvalds, con contribuciones de
programadores de todo el mundo.

Login: Control de acceso a un cierto sistema, normalmente basado en el


nombre de usuario y una contrasea (password).

Memoria: Tanto en ordenadores como en perifricos, lugar donde se


almacenan datos o programas mientras se estn utilizando.

Metodologas de programacin: Distintos sistemas de desarrollos de


programas de manera que estudie optimizar al mximo la forma de escribir
y de interpretar el ordenador los mismos. Son clsicos Bernier o Jackson
con metodologas modulares y/o estructuradas, completamente vigentes y

217
UNIVERSIDAD TECNICA DE MACHALA

base de la ms extendida en estos momentos que es la Programacin


Orientada a Objetos.

Microsoft: Casa desarrolladora de software, creadora de sistemas


operativos como MsDos y Windows, as como de aplicaciones informticas
de todo tipo.

MySQL: Es la base de datos de fuentes abiertas probablemente ms


utilizada en los entornos Unix - Linux. Carece de la complejidad de las
grandes bases de datos, casi es suficiente con conocer el lenguaje SQL, y
es lo ms utilizado, por muchas y buenas razones, para usar en Internet
compaginando especialmente con PHP y Perl.

Navegador: Aplicacin informtica emplear para "navegar" por la red. Los


ms conocidos son el Internet Explorer de Microsoft y el Netscape
Navigator (parte de Netscape Communicator).

Navegar: Nombre que se da al hecho de buscar informacin en Internet,


empleando la WWW y sus enlaces para "saltar" de una pgina a otra.

Objeto: Trmino base de la Programacin Orientada a Objetos. En pura


teora podramos pensar en lo que el hombre conoce, una mesa, un
mechero, son cosas que nuestra inteligencia sabe comprender y explicar
porque tienen unas caractersticas comunes, a pesar de que las diferencien
muchas otras, pues hay formas y modelos muy dispares. A nivel
informtico es similar, un objeto es una parte de cdigo con unas
peculiaridades, de manera que podemos crear el objeto "subMesa", que
contendr las bsicas de su ancestro pero modificadas, es decir, todo lo
que puede hacer "Mesa" con su cdigo, llamadas a funciones, punteros,
etc., mas las particularidades que proporcionemos a este "hijo" suyo.

Operadores booleanos: Tambin se denominan "lgicos". El trmino


booleano se debe a que devuelven valores de este tipo, tan slo trabajan
con Cierto y Falso. Los ms importantes son: AND. Devuelve cierto cuando
todos los operadores lo son. OR. Devuelve cierto cuando al menos uno o
ms de uno lo es. XOR. (OR exclusivo) Devuelve cierto cuando slo lo es
uno de los operadores. NOT. Devuelve cierto cuando el operador es falso.

218
UNIVERSIDAD TECNICA DE MACHALA

Pgina principal: Se suele entender dentro del entorno de Internet, y es


aquella que sirve de inicio para el resto del sitio. Generalmente suele
denominarse "Index" con las extensiones htm o html.

Pginas Web: Forma de denominar a las hojas creadas con html que se
manejan dentro del entorno WWW.

Password: Clave de acceso o contrasea necesario para acceder a un


determinado sistema.

Pentium: Procesador de 32 bits realizado por Intel, evolucin


del 80486 (ycompatible con l y con toda la familia x86), con velocidades a
partir de 60 MHz (hasta 233 Mhz en su versin "normal", y por encima de
400 Mhz en versiones mejoradas como los Pentium II). Variantes: el
Pentium MMX reconoce una serie de instrucciones nuevas, pensadas para
acelerar las operaciones ms frecuentes en multimedia, y tena
velocidades de 133 a 233 MHz; el Pentium Pro es una versin orientada al
mercado ms profesional, y existen placas base que permiten montar
varios de estos procesadores trabajando a la vez (enparalelo); el Pentium II
es una mejora del MMX, que se "pincha" en una ranura especial (Slot 1) y
tiene velocidades de 233 a 450 MHz; el Celeron es una variante ms
barata del Pentium II, que no incorpora cach de primer nivel; el Mendocino
es una variante mejorada del Celeron, que incorpora 128k de cach de
primer nivel.

PHP: Personal Home Page. Pgina de inicio personal. Esta era la


denominacin del primer PHP realizado por Rasmus Lerdorf. En este
momento estamos en la versin 4 de este lenguaje de programacin
destinado a la Red, y que una vez interpretado por el servidor web genera
cdigo HTML.

Portable: se dice que un programa informtico (o una aplicacin, o un


sistema operativo) es portable cuando se puede hacer funcionar fcilmente
en otro sistema distinto a aquel en el que fue diseado.

Portal: pgina en Internet diseada para servir como punto de partida en


nuestra navegacin. Suelen incoporar distintos servicios, como un
directorio de pginas por distintos temas, un buscador de informacin,
noticias, chats, etc.

Pipeline: Tecnologa utilizada en chips que permite manejar a la vez


distintas rdenes, pues mientras una se est ejecutando, otra, si es
necesario, se est interpretando y una tercera ya est siendo recogida de
la memoria.

219
UNIVERSIDAD TECNICA DE MACHALA

Programa: un conjunto de rdenes para un ordenador. Un programa puede


estar formado por apenas unas pocas rdenes (por ejemplo, uno que sume
dos nmeros) o por varios miles de rdenes (como un programa de gestin
completo para una empresa). Cuando se trata de un programa ya
terminado que se compra, se suele hablar de una Aplicacin Informtica.
Los programas se deben escribir en un cierto lenguaje de programacin.
Los lenguajes de programacin que se acercan ms al lenguaje humano
que al del ordenador reciben el nombre de "lenguajes de alto nivel" (como
Pascal); los que se acercan ms al ordenador son los de "bajo nivel"
(como el ensamblador). Lo ms habitual es crear los programas en un
lenguaje de alto nivel (llamado "fuente") y despus convertirlos al lenguaje
propio del ordenador ("compilarlos" para obtener un "ejecutable").

RAM: Memoria de acceso directo (Random Access Memory). Normalmente


se usa este nombre para referirse a memorias en las que se puede leer y
tambin escribir (RWM). En los ltimos PC es habitual que se use Fast
Page Ram (386 y anteriores), EDO Ram (486 y Pentium) y SDRAM
(ltimos Pentium, Pentium MMX y superiores).

Registro: En el mundo de las bases de datos, cada una de las fichas que
componen una tabla.

Servicios: Se le suele denominar as al conjunto de posibilidades que tiene


un ordenador, generalmente el servidor, y que puede distribuir entre los
otros ordenadores que as lo reclamen.

Servicios del Sistema: Conjunto de distintos programas dependientes del


Sistema Operativo que se inician cuando este se pone en funcionamiento,
y realizan tareas consideradas fundamentales. Dependiendo del S.O. de
que se trate sern mas o menos accesibles a los programadores de
aplicaciones que precisen llegar de forma directa a esas tareas que
controlan.

Script: Son programas que se ejecutan en un servidor Web dedicados a


procesar las peticiones que le llegan de los navegadores.

Sistema operativo: Es una capa intermedia entre el ordenador y el


usuario. Se podra considerar como un programa (normalmente de gran
tamao) que toma el control del ordenador y que nos proporciona las
utilidades bsicas. Para usos ms avanzados, necesitaremos
instalar aplicaciones informticas como bases de datos, hojas de clculo,

220
UNIVERSIDAD TECNICA DE MACHALA

programas a medida, etc. Ejemplos de sistemas operativos podran ser:


MsDos, Windows 95, Windows 98, Unix, MacOS, OS/2...

Software: La parte "que no se puede tocar" de un ordenador:


los programas y los datos.

SQL: Un lenguaje estndar de consulta a bases de datos (Structured


Query Language).

Tabla: En el mundo de las bases de datos, un conjunto de registros (fichas)


que tienen una cierta homogeneidad (por ejemplo, los datos de nuestros
proveedores podran estar almacenados en una misma tabla).

URL: Direccin de una cierta pgina de informacin dentro


de Internet(Universal Resources Locator).

Variables: En programacin, una parte de la memoria que es representada


por unos caracteres a discreccin del programador, y que tiene un
contenido cambiante, generalmente por las operaciones realizadas en el
programa.

Windows: Nombre genrico de toda una familia de software diseado por


Microsoft. Las primeras versiones (hasta la 3.11) eran un entorno grfico
basado en ventanas, para el sistema operativo Dos. A partir de Windows 95
(Windows 95 y Windows 98) ya se trata de un sistema operativo en s
mismo, con capacidades multitarea. Tambin existen versiones
"especiales" de Windows, como Windows NT, diseado para entornos
profesionales, o Windows CE, para ordenadores porttiles de muy
reducidas dimensiones.

WWW: World Wide Web: posiblemente, el servicio ms conocido


de Internet: una serie de pginas de informacin, con texto, imgenes (a
veces, incluso otras posibilidades, como sonido o secuencias de video), y
enlazadas a su vez con otras pginas que tengan informacin relacionada
con ellas.

221
UNIVERSIDAD TECNICA DE MACHALA

ANEXOS

COLEGIO NACIONAL MIXTO DR. JOSE MARIA VELASCO IBARRA

BIBLIOTECA

SECRETARIA

222
UNIVERSIDAD TECNICA DE MACHALA

ADMINISTRACIN

PROGRAMACION DEL SITIO WEB

223
UNIVERSIDAD TECNICA DE MACHALA

PANTALLAS DEL PORTAL Y SISTEMA DE MATRICULA

224
UNIVERSIDAD TECNICA DE MACHALA

La pantalla de presentacin del sitio web posee el diseo ambientado a los usuarios tanto
alumnos como profesores, el mismo que les permite observar cada uno de los mens de
navegacin de acuerdo a sus necesidades.

Posee un entorno amigable que detalla cada una de las actividades que se desarrollan
dentro de la institucin, varias opciones como: hacer comentarios, descargar archivos,
enlaces con sitios web y ayuda.

Adems podr observar en la pantalla galeras de fotos, formulario de inicio de sesin


para usuarios registrados, caso contrario posee un link para acceder al formulario de
registro de usuarios, un reproductor de msica para que su visita a nuestra web sea
amena, su respectivo calendario y una calculadora para clculos rpidos.

Y como en toda institucin no puede faltar su foro para poder comentar o sugerir a cerca
de los programas que se desarrollen dentro de la institucin.

FORMULARIO DE REGISTRO DE USUARIO

225
UNIVERSIDAD TECNICA DE MACHALA

El registro de usuario le permite ingresar sus datos y obtener su propia cuenta si estos
fueron correctamente ingresados hacer clic sobre el botn REGISTRAR, el mismo que
despus le pedir guardar los datos y usted tendr que oprimir el botn ACEPTAR y si no
est de acuerdo o desea modificar alguno de los datos recientemente ingresados oprima
el botn CANCELAR, lo que le permite acceder a nuestras pginas como invitado, por
las cuales podr navegar de acuerdo a lo establecido por el sistema.

AVISOS DE ALERTAS

El sistema cuenta con sus respectivos avisos de alerta en cada uno de los campos que
componen los respectivos formularios estos estn validados de acuerdo al dato que se
sugiere que ingrese el usuario.

226
UNIVERSIDAD TECNICA DE MACHALA

Ejemplo.:

En el campo nombre y apellido solo ingresaremos caracteres alfabticos, caso contrario


obtendremos un aviso de alerta: DATO INCORRECTO.

En el campo E-mail y Nombre de Usuario: nos permite ingresar datos alfabticos,


numricos y smbolos o caracteres especiales.

En el campo Telfono: Solo nos permite ingresar datos numricos.

El campo contrasea y confirmar contrasea debe ser igual, caso contrario la validacin
del sistema le arrojara su respectiva alerta.

INICIO DE SESIN

227
UNIVERSIDAD TECNICA DE MACHALA

Una vez registrados podemos iniciar sesin y acceder al sistema como invitado.

FORMULARIO DE INGRESO DE USUARIO

Ingrese su nombre de cuenta y su respectiva contrasea, adems le da una opcin para


recobrar su contrasea y si por error ingresa al formulario encuentra un link que le
direccionara al registro de usuario.

Una vez que ingresamos como usuario podemos tener acceso al portal y navegar en el
mismo de acuerdo a lo establecido por el sistema, adems encontramos un link en el cual
hacemos clic y nos permite editar nuestros datos.

MENU DEL SISTEMA Y FORMULARIOS DE REGISTRO

El men del sistema cuenta con sus respectivas opciones en la que les detallamos las
siguientes:

228
UNIVERSIDAD TECNICA DE MACHALA

Botn Inicio: Nos permite regresar a la pgina inicial del portal web.

Botn Quienes Somos: Nos despliega un submen que nos permitir conocer ms a
cerca de la institucin, tanto sus objetivos, sus orgenes, actualidad educativa y su
personal laboral.

Botn Servicios: Despliega un submen en el que nos permite ingresar a la informacin


de promociones, eventos educativos, programas educativos e informacin de direcciones
de correo de la institucin.

Botn Matriculas: Este link nos permite acceder a las inscripciones a un submen donde
el estudiante podr realizar su matriculacin de acuerdo a cada uno de los requisitos que
se detallan en los campos del formulario de registro.

En la Opcion Inscripciones para Matricula

Al hacer clic aparece la pantalla en la que se le pide al usuario ingresar su cuenta de


usuario o caso contrario ingresar sin estar registrado o ser usuario.

En el primer caso deber ingresar su nombre de cuenta y contrasea.

En el segundo accede directamente al formulario.

FORMULARIO DE REGISTRO - ESTUDIANTE

229
UNIVERSIDAD TECNICA DE MACHALA

En el formulario est compuesto por varios campos que son necesarios ser llenadas en
su totalidad, ya que esta informacin es primordial la institucin, este formulario esta
valido al igual que los registros de usuario lo cual indica que la informacin que usted
ingrese debe ser concreta y lgica a lo que se solicita.

230
UNIVERSIDAD TECNICA DE MACHALA

Este es un formulario correctamente llenado, cumpliendo cada uno de los requisitos


establecidos, hecho una vez el ingreso de la informacin le aparecer un cuadro de
dialogo el mismo que le pedir guardar los datos si est de acuerdo oprima el botn
ACEPTAR, caso contrario desea hacer una modificacin inmediata CANCELAR.

Una de las restricciones se da aqu en Ver Matriculas por Internet ya que solo el
administrador tiene acceso a esta informacin.

231
UNIVERSIDAD TECNICA DE MACHALA

Otra es Matricular desde el Colegio, ya que el administrador es el unico que tiene


privilegios para realizar este proceso desde la institucion.

232

También podría gustarte