Tesis Lista

UNIVERSIDAD TECNICA DE MACHALA
INTRODUCCIÓN
La tecnología hoy en día avanza a pasos agigantados, tanto que varias de las
instituciones educativas a nivel nacional cuentan con su Web Site para controlar
su gestión académica, el mismo que ofrece una mejor atención y promoción
institucional, a medida que las instituciones educativas van evolucionando se
hace muy importante considerar el acceso a la información por parte de los
usuarios, docentes y estudiantes de la institución 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é María Velasco Ibarra” del Cantón El Guabo, que le
permitirá su promoción, proceso de matriculación y beneficios, por el cual es
necesario su análisis, en el cual descubrimos los problemas que tenía la
institución con respecto al manejo de sus datos y como se estaba promocionando
en el área institucional, para lo cual planteamos una solución a estos
inconvenientes, a través de diferentes metodologías y diagramas, lograremos
conseguir las mejores opciones para el logro de nuestro objetivo, como es la
creación del Web Site para el ingreso de estudiantes a esta institución.
El Colegio Nacional Mixto “Dr. José María Velasco Ibarra” del Cantón El Guabo es
la institución más prestigiosa del Cantón, 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
matriculación y acceso a la información requerida.
El Web Site cuenta con un diseño e interfaz amigable para los estudiantes y
personas en general, en donde encontraremos, imágenes, videos, material
didáctico, su ubicación geográfica, así como también el acceso a los servicios que
presta esta prestigiosa institución.
La aplicación web servirá como una herramienta indispensable para el usuario

que tiene a cargo el manejo del sistema de matriculación, será muy fácil 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
OBJETIVOS
Objetivo General:
Analizar, diseñar e implementar un Web Site para controlar la Gestión Académica

del colegio nacional mixto “Dr. José María Velasco Ibarra” del cantón el Guabo,
aplicando la metodología XP (Xtreme Programming).
Objetivo Específicos:
 Utilizar nuevas herramientas para el diseño y desarrollo del Sitio Web.
 Agilizar el ingreso de datos en el proceso de matriculación
 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 académico para que el

estudiante tenga un medio de investigación.
2
CAPITULO I: MARCO REFERENCIAL
JUSTIFICACIÓN
En la actualidad el avance de la tecnología nos incita a tener un profundo

conocimiento de diseño, creación 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 consideración las mismas para estar a
la par de los avances tecnológicos que se implantan a nivel educativo.
Actualmente en nuestra provincia la mayoría de las instituciones educativas no

cuentan con estos sitios y aplicaciones web para proporcionar una atención y
promoción de acuerdo al avance tecnológico.
La falta de conocimientos y asesoramiento sobre la utilización de estas

aplicaciones han creado un ambiente monótono y aislado sin lograr que las
personas, docentes, estudiantes amplíen sus conocimientos acerca del avance de
tecnología y les permitan tener bases para poder desenvolverse en la actual y
futura sociedad donde las aplicaciones informáticas abarcan cada día más todos
los campos cotidianos de nuestras vidas.
El estudio de estas aplicaciones aportara con mayor información acerca de los

sitios web y sistemas innovadores que ayuden a dinamizar estos procesos de
navegación y matriculación de alumnos en las instituciones educativas que están
ubicadas en el Cantón El Guabo.
A su vez nos permite incorporar nuevas herramientas tecnológicas como recursos

para el diseño y elaboración de los sitios web con sus respectivas aplicaciones
que contribuirán en el manejo automatizado de sus procesos al Colegio Nacional
Mixto “Dr. José María Velasco Ibarra”, el mismo que ampliaran nuestros
conocimientos en estos temas.
3
Para el desarrollo de nuestra investigación contamos con el acceso a información

tanto empírica como bibliográfica. La Institución donde realizamos el estudio nos
facilitara los datos necesarios, además 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 aprobación.
4
PROBLEMAS
PROBLEMA CENTRAL
Falta de información y promoción de la institución a nivel educativo; y lentitud en

los procesos de agilización en la gestión académica.
PROBLEMAS ESPECÍFICOS
 Carencia de un medio de promoción e información acerca de los servicios y

beneficios educativos que ofrece la institución.
 Demora en el ingreso de datos en el proceso de matriculación de los

estudiantes.
 En el proceso de matriculación los datos son ingresados incompletos, en el

registro de los estudiantes y en el registro de matrícula.
 Deficiencia en la organización 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 académico automatizado para que el estudiante

realice sus consultas.
5
PREGUNTA CIENTÍFICA
Central
¿Cómo se proyectan y se dan a conocer a nivel institucional, además como se

realiza los diferentes procesos para controlar la gestión académica en el Colegio
Nacional Mixto “Dr. José María Velasco Ibarra”, del Cantón El Guabo?
Particulares:
 ¿Están capacitados los empleados de esta institución para el manejo de un

sistema de matriculación web, para registrar y poder obtener información
de los mismos de una manera rápida y eficaz?
 ¿Está la persona encargada del manejo de matriculas en capacidad de

adaptarse a un nuevo sistema o aplicación a pesar que el mismo este
diseñado con un interfaz muy amigable?
 ¿Tiene la comunidad guabeña un medio por el cual pueda obtener

información del Colegio Nacional Mixto “Dr. José María Velasco Ibarra” sin
necesidad de acercarse al mismo para obtener información del nivel
educativo y servicios que ofrecen a la juventud de este Cantón?
 ¿Cómo analizan los usuarios la calidad de educación que recibirán sus

hijos en este plantel educativo y al personal que labora en el mismo?
 ¿Está capacitada la mayoría de la comunidad guabeña para la navegación

a través de un portal web para obtener información acerca del desempeño
de sus hijos?
6
ALCANCE
 Dar a conocer a la ciudadanía en general los servicios y beneficios a

nivel educativo que ofrece la institución.
 Facilidad y agilidad en el ingreso de datos en el proceso de

matriculación.
 Formularios con todos los campos necesarios y específicos para el

registro de datos.
 El ingreso de notas de manera ágil y eficaz por parte del personal

docente.
 Autenticación de estudiantes para consultar sus notas de cada materia.
 Los estudiantes utilizaran el Web Site como un medio de investigación.
Resultados
 Portal web con un diseño amigable y de fácil manejo para los usuarios
y personal administrativo de la institución.
 Consultas de notas de los estudiantes mediante tablas de consultas

interactivas.
 Elevar el nivel con respecto a la tecnología y el nivel de imagen ante la

sociedad.
 Sistema de matriculación eficaz y óptimo para el usuario encargado del

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

la institución.
7
 Proceso factible para el ingreso, modificación o eliminación de notas

por parte del personal docente.
CAPITULO II: MARCO TEÓRICO
2.1 Antecedentes del Colegio
2.1.1 Misión
Formar integralmente al estudiante velasquino para asegurarle el ejercicio

pleno de su autocontrol interno y externo según sus necesidades e intereses,
capaz de que sea beneficiado con la adquisición de nuevas habilidades y
cualidades de aprendizaje.
2.1.2 Visión
Ser parte activa del proceso de transformación social y coadyuvar al educado

velasquino a perfeccionar sus habilidades de percepción, concentración,
comprensión, memorización, y evocación de conocimientos múltiples.
2.1.3 Paradigma
Nos centramos en administrar procesos de adquisición de conocimientos e

información del educado velasquino, tanto en sus aspectos cognitivos como
en los de su conducta, asumiendo primordial interés en instituir destrezas
múltiples de comprensión a nivel superior desde sus propias cimentaciones
intelectuales.
 Creamos disposición de aprendizaje usando la motivación estudiantil.
 Concertamos conocer y comprender impulsando un aprendizaje

significativo.
 Preparamos conciencias empleando ciencias.
8
2.1.4 Objetivo
Instaurar la formación estudiantil como el proceso sistemático de prácticas y

actividades mentales destinados a estructurar la comprensión significativa del
conocimiento y su autorregulación, 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é María
Velasco Ibarra”, en la cabecera Parroquial de él Guabo, perteneciente al
cantón Machala, de la Prov. De El Oro. Esta fundación saturó gran parte el
déficit educativo que existía en nuestro canton en ese tiempo parroquia), por
cuanto no habían planteles de educación media hasta el año que se implantó
este centro con remuneración municipal.
La iniciación tubo impulso cuando regía nuestro país el Dr. José María
Velasco Ibarra; cuyo Ministro de Educación y Cultura era en ese entonces el
Dr. Augusto Solórzano Constantino, como subsecretario de educación el
señor Augusto Luis Moscoso y siendo alcalde de la provincia el abogado
Luis Alberto León León
Al inicio del funcionamiento del colegio, era de carácter municipal, la

administración del consejo se encargaba de realizar los pasos directos al
personal docente administrativo y de servicios que laboraban en ese entonces
desconociéndose el presupuesto Asignado al plantel durante los tres
primeros años que se mantuvo con esa categoría. Cabe resaltar que la ilustre
Municipalidad de Machala cancelaba los haberes de los maestros.
.Hasta que en el año lectivo 1973-1974 mediante decreto supremo, No. 887,
en articulo 2do. se nacionalizo y la vida económica tuvo su giro de
independencia contando con un presupuesto de 502.000 sucres y a la
9
medida que han pasado los años se han ido incrementado cada vez mas. La
iniciación de las labores funcionales tiene como marco las instalaciones de la
Escuela de Niños General Manuel Serrano, en ese entonces ubicados en
las calles 9 de Octubre y Eloy Alfaro, donde funciono por el lapso de un año,
para luego continuar en la casa Municipal Parroquial, en donde permaneció
por el lapso de 6 años, hasta la fecha que emite el decreto de giro político de
nuestro lugar natal , la cantonización 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 Vía 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 año de 1970-1971 contando con un paralelo

de ciclo básico y con las opciones Prácticas de Agropecuarias Comercio y
Administración, Y Manualidades femeninas y con el siguiente número 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 años,
como secretaria titular fue nombrada la Srta. Miryam Sánchez y como auxiliar
la Srta. Dolly Serrano Jácome. Los primeros maestros fueron: Sr. Saúl Paz
miño, Sra. Mercede Orellana, Sr. Mauro Muñoz, Sr. Volter Medina, Sra. Julia
Jaramillo, Sr. Rodolfo Aguirre. Alumnos matriculados en el año 1.971-1972
103 divididos en dos paralelos uno para primer curso y otro para segundo.
En este año aumenta dos profesores y un conserje el Sr. Miguel Mesones,
1972-1973 fueron matriculados 165 alumnos. En este año los señores
profesores: Voltaire Medina Y Mauro Muñoz solicitaron el cambio, ingresan
nuevos profesores: Marlene Serrano de Vogueley, Julián Reyes, sr, Hernán
Rosales Sra. Rosario Palacios y como conserje el Sr. Rómulo Lojas.
Después de haber transcurrido 3 años de labores el Dr. Vinicio Sarmiento

Alvarado, personal docente, padres de familia y el pueblo en unión de
esfuerzo, consiguieron la nacionalización del plantel. La misma que se emitió
con fecha 30 de julio de 1973 en Decreto Ministerial No. 887, en su artículo
10
segundo firmado por el presidente de la república, Gral. Guillermo Rodríguez

Lara, CRL De E.M., Guillermo Duran Arcentales Ministro de Finanzas. Este
decretó Supremo fue publicado en el Registro Oficial Numero 365 del día
Miércoles 8 de Agosto de 1973.1973- 1974El Dr. Vinicio Sarmiento rector del
colegio Dr. José María Velasco Ibarra, formula una solicitud al Ministerio de
Educación 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 Biológica lo cual fue
concedido en el mencionado año lectivo,. Esta solicitud fue aprobada con
resolución 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 año el número del personal es de 12. Ingresan. Sr. Rodolfo Aguirre,
sr, Manuel Benítez, Germán Jácome.
1974-1975 funciona el segundo ciclo del diversificado por resolución 908 el

25 de marzo de 1974 firmada por el ministro de Educación Publica el crol.
Guillermo Duran Arcentales. Ingreso de nuevo personal docentes. Cesar
Castro, Dr. Iván Crespo, Sr. Charbel Fadul, Holger Martínez. Sr. Antonio
Moran, Sr. Nelson Moncayo, Julián Reyes Cavero, Luis Lamber Sra. Ángela
Quimi, Sr. Herman Rósales., ser. Marco Montalvo.
1.975-1976. Entra en funcionamiento el tercer curso ciclo diversificado por

resolución n. 1087 del 15 de Abril de 1975, en este año el colegio Dr., José
María Velasco Ibarra da al pueblo su primera promoción de bachilleres,
muchos de ellos son destacados profesionales
El personal docente y administrativo que ayuda al desenvolvimiento del

colegio en este año lectivo es: Rector Dr. Vinicio Alvarado Secretaria Srta.
Nelly Verdi Barros, colector Sr. Eduardo Serrano. Profesores que integran
son: Sr. Cesar Castro A. Dr. Iván Crespo L. Sr. Charbel Fadul, Sr. Holger
Martínez, Sr. Antonio Moran, Sr. Nelson Moncayó, Sr. Julián Reyes Cavero,
Srta. Julia Pompeya, Sr. Luis Lamber B. Sra. Ángela Quimi, Sr. Hernán
Rosales R. Sr. Marlene serrano, Sr. Marco Montalvo.
11
Alumnos de la primera promoción: Aguilar Quezada Edgar Vicente, Alaña

Jerves Douglas Asisclo, Armijos Jara Luz María.
Beltrán Romero José Vicente, Capa Farías Gabriel Agustín, Espinoza Armijos
Florencio Ilvano, Gómez Izurieta Helen Elaine, Guerra Izurieta Carlos
Gonzalo, Guerra Izurieta Marco Gabriel, izquierdo Mesones Darwin Colon,
Izurieta Jaén Norma Irlanda, Orellana Álvarez Guillermo Santo, Orellana
Quevedo Ángela María, Ortiz Pérez alba Marlene, Ortiz Pérez Lilia Piedad,
Solano Solano Luis Antonio., Verdi Barros Rubén Benjamín, Zamora Ruiz
Rosa Dalila.
1.976-1977 aumenta el número, profesores Manuel Busto, Holger Martínez,

Srta. Hilda Benavides, Sr. Efrén Faréz J., Sra. Carmen Guerrero. Su segunda
Promoción en Humanidades Modernas Físico-Matemáticos, Químico-
Biológicas fueron 11 estudiantes.
En este año el colegio tiene sus símbolos patrios creados por la iniciativa del
Dr. Vinicio Sarmiento la bandera y el escudo.
1977-1.978 lleva 8 años de labores cuenta con 230 estudiantes, ingresan

nuevos maestros: Sra. Martha García, Ing. Anecio Martínez, Sra. Nelly
Rodríguez, Sra. María Eugenia Pasos. Sr. René Rosales, Sra., Carmen
Guerrero tiene su tercera promoción es de 10 estudiantes.
En este año el Dr. Vinicio Sarmiento, el 15 de Agosto de 1977 se celebra una

escritura pública de compra-venta de un predio de 32.209,62 m 2, para la
construcción del edificio propio del plantel. Este predio denominado la
“Chacra”, lo adquirió el Ministerio de Educación, siendo representante legal
el Sr. Miguel Calle Delgado, en su calidad de de Director Provincial de
Educación de El Oro al Sr. Francisco Serrano Gómez, por el valor de
250.000 sucres, y cuyos linderos particulares son los siguiente: Por un
costado, con herederos de Bolívar Serrano Murillo, por otro costado,
carretero que conduce de El Guabo a Pasaje, por otro costado, con cauce
seco del río 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 señor Timoteo Tenecota y señora Rosa Elicia Quichimbo Este
12
año el Dr. Vinicio Sarmiento A. renuncia a sus funciones de rector titular el 9

de septiembre de 1977, luego de haber tenido 8 años 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 Sánchez designado
por la dirección de estudio el 13 de junio de 1.978. Tomo posesión el 14 de
junio del mismo año y quedo integrado de la siguiente manera: Rector Ing.
Juan Carlos Loayza S., Secretaria Nelly Verdi B., Auxiliares Auxiliadora de
Morán, Vicente Beltrán, colector Eduardo Serrano Aguilar.
Nuevos maestros: que ingresan: Sr. Rubén Verdi, Sr. Teófilo Chamba, Sra.
Elva Verdi, Sr. Hernán Valverde, Sr. Mauro Valverde, Sr. Juan Reyes, .Sr.
Sra. Elena Mora.
El Ing. Carlos Loayza Sánchez en unión con el Concejo Directivo Logra que
la dirección nacional de construcciones escolares DINACE efectúen visitas
con el objetivo de realizar los planos previos a la construcción de las oficinas
Administrativas, el bloque para los laboratorios y los bloques de las aulas y
talleres., Se gradúa 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 Promoción es de 8
alumnos: 7 varones y niña Quevedo Vivanco Antonieta Luz de Fátima.
1.980-1981 promoción 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 año presenta la renuncia

el Rector el Ing. Juan Carlos Loayza Sánchez, en el mismo año el 29 de
noviembre se posesiona el Dr. Daniel Napoleón Solano como rector del
plantel en su administración se consiguió el cerramiento frontal del plantel.
1.983-1984 Humanidades Modernas se divide en: Físico- Matemático

promoción fue de 6 alumnos, y químicos biológicos 21 alumnos.
13
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 año se

incrementa una nueva especialidad técnica de secretariado en español.
1.985-1986 promociones Q.B. 18 FM. 10.
1986-1987. Q B. 15. F.M. 10. Secretariado en español 9 alumnos.
Se oficializo el Himno al colegio mediante una sesión solemne en el sindicato

de choferes profesionales del cantón el guabo el 12 de enero de 1987, la
letra fue escrita por el Lcdo. Eladio Montero Campo verde y la música por
Patricio montero que fue modificada por el conservatorio Nacional de música
Salvador Bustamante Celi de Loja.
1.88-1989: promoción Q.B. 12 – F.M. 8, S.E. 6. En las festividades de su

decimotercero aniversario de fundación, que se celebro en sesión solemne el
26 de julio de 1988, se recibió la donación de los laboratorios de Física y
Química su inauguración estuvo a cargo de funcionarios del ministerio de
Educación 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 señora Marlene en su

administración Consigue la entrega de los planos para la construcción 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 Promoción Q.B. 15 F.M.- 8 Sec. 11 En este año por
razones personales presento la renuncia de cargo de rectora el 10 de mayo
de 1991. Toma posesión el Lcdo. Víctor Barsallo Paredes, el 16 de
diciembre de 1991.
Promoción Q.B. 17, S.E. 19., 1992-1993- promoción Q.B. 17. F.M. 11., S.E.
19., 1993-1994 promociones Q.B. 13 F.M. 1. S.E. 18., 1994-1995.- promoción
Q.B. 14, FM 12 S.E. 20.- En su administración logro la construcción de
algunos bloques de aulas, cerramientos de linderos, en cementado del
ingreso exterior del plantel, culmino con la construcción del salón de actos
14
del plantel, la adecuación del laboratorio de Computo. En este año se

incrementa la especialidad de computación con resolución 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 Víctor
Lisandro Barsallo p. Vicerrector Sr. Dimas Julia Reyes C. Inspector General
Lcdo. Efrén Faréz J. y un médico, – 1.995-1996 promoción Q.B.N. 15. F.M.
10 S.E. 15 – 1996- promoción Q.B. 16 F.M. 7. S.E. 14. – 1997-1998
promoción Q.B. 23., Fm: 5. S.E. 7 Computación 28. En este periodo se
incrementó las especialidades de Contabilidad y secretariado en español
computarizado.- 1998-1999 promoción Q.B. 12.-F.M. 7 S.E. 24. C. 27 - 1999-
2000 promoción Q.B.: 8, SEC. 19 C. 29 Contabilidad 31. El Lcdo. Víctor
Barsallo Se retiro el 25 de enero del 2000- Asume las funciones de rector
encargado Lcdo. Dimas Julián 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 Julián Reyes C. Vicerrector
Luis Calle de la Cuesta, Inspector General Efrén Faréz J. El personal
administrativo está compuesto por 11, personal docente y de servicio 49.-
Promociones Q.B. 9 S.E. 8. Contabilidad 20 Computación 26.- EL 20 de
marzo del 2001, se posesiona como Rector el Lic. Héctor Fermín Pozo
Guerra, actual rector del plantel. No. De estudiantes 696.- Promociones
2001-2002 Q.B. 12. Contabilidad 18 S.E.C. 18 Computación 31.- En este
año lectivo hay que resaltar la obras realizada por un grupo de estudiantes
liderada por la Srta. Edith Yomayra Faréz Filian, Figueroa Cedillo Alberto
Javier, Blacio Juana Alexandra, Lalvay Morocho Elvia , Pérez Bermúdez
Gina, Ramón Orellana Jorge Espinosa Palomino Danilo Rafael y otros ,
como objetivo y amor a su institución se propusieron a realizar la obra de
un parque con un altar cívico y al mismo que lo denominaron : Parque
Cívico Estudiantil Dr. José María Velasco Ibarra. Para su institución y esta
obra la lograron gracias a la colaboración del presidente central de padres de
familia Lcdo. Ulvio Ortega Erreyes de la Brigada de artillería Batallón Bolívar 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
sesión muy especial el día 23 de de Febrero de 2002 organizada por los

mismos estudiantes coordinada por la Lcda. Fabiola Faréz J. y Lcdo. Nelson
Zhigue, se conto con la presencia de todas las personas que aportaron con la
obra en este mismo día también se inauguro en forma oficial la biblioteca del
Plantel denominada Guillermo Serrano Aguilar. Y fue realizada por el Ing.
Jorge Alex Serrano, lo cual años anteriores no había tenido la oportunidad
de ser inaugurada
2002-2010 se han equipado casi todos los departamentos administrativos con

equipo de computación, el 19 de abril del 2005 mediante resolución 1515
autorizan al plantel la aplicación de proyectos de innovación curricular “
Reforma al bachillerato general en ciencias y bachillerato técnico en gestión
administrativa y contable, especializaciones: contabilidad y administración; y
organización y gestión de la secretaria; y bachillerato técnico en informática,
especialización aplicaciones informáticas, jornada matutina a partir del año
lectivo 2005 – 2006 con el siguiente reordenamiento. A.- reordenamiento
administrativo del octavo al decimo año de educación básica =
quimestralización. B.- reordenamiento curricular del octavo al decimo año de
educación básica.
2006 -2007 se realizo por parte del comité central de padres de familia, la
readecuación de una loza que se encontraba en mal estado y la construcción
de 2 aulas en la parte superior.
Las profesoras coordinadoras de educación ambiental Licda. Fabiola Fárez

Jiménez y Lcda. Diana Quezada Zhuma, en el año 2006-2007, desarrollaron
un arduo trabajo como fue adecuación de las jardineras en todo el plantel,
murales, decoración del parque cívico con baldosas , se colocaron
protectores,, parques ambientales, jardineras y pavimentación de la parte
izquierda del ciclo básico y del área derecha de ingreso al plantel, con lo que
contribuyeron para una mejor presentación y ornato del plantel.
2007-2008 la dirección nacional de servicios educativos (DINSE) hizo la

formal entrega recepción de las seis aulas que han sido donadas a nuestro
colegio, las mismas que fueron bendecidas e inauguradas el 30 de julio del
16
2007, con motivo de celebrar nuestro plantel su trigésimo séptimo aniversario

de creación.
2008-2009 las autoridades del plantel instalan el servicio de internet, sé hizo
la construcción de cerramiento de 210 mts., la construcción del portal principal
del plantel y la puerta metálica de ingreso.
El DINSE construyo el bloque de 9 aulas, y remodelo las demás existentes,
con la resolución DEO-DPE – 047-2010 de fecha 8 de enero resuelve
AMPLIAR , el funcionamiento del primer curso común, segundo y tercer curso
de bachillerato general en ciencias, segundo y tercer curso bachillerato
técnico en comercio y administración, especializaciones: organización y
gestión de la secretaria, aplicaciones informáticas y , contabilidad y
administración.
El número de profesores de este año son 38 titulares y 24 contratados y 14
personal administrativo y de servicio.
No. De estudiantes de este año 1183 alumnos matriculados; bachillerato 525
y en el ciclo básico 658.
En la actualidad se participa en los programas de alfabetización y educación
ambiental.
En este año 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 jubilación,
este vacío que deja será muy difícil reemplazarlo dada a su altísima calidad
profesional esperamos que ella tenga éxito en su vida privada.
Los cuarenta años de vida de este plantel, ha sido trascendental en la historia
del cantón El Guabo, este manantial del saber, sin duda ha sido factor
potencial en la evolución de las pequeñas y grandes sociedades de este
girón de la Patria, como educadores que somos y que nos debemos a esta
gloriosa institución 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
2.1.6 Organigrama
18
2.1.7 Ubicación
Vía Panamericana Sur, en el desvió a Pasaje
2.1.8 Quienes somos
El Colegio “José María Velasco Ibarra” es una institución publica de educación

formal, aprobado por el Ministerio de Educación Nacional.
En búsqueda de contribuir con una educación humanística de jóvenes, acorde

con las necesidades del mundo actual, basa su actividad en los principios de la
Pedagogía de la Educación.
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

fácil e integrada, el acceso a una serie de recursos y de servicios, entre los que
suelen encontrarse buscadores, foros, documentos, aplicaciones, compra
electrónica, etc. Principalmente están dirigidos a resolver necesidades específicas
de un grupo de personas o de acceso a la información y servicios de una
institución pública o privada.
2.2.2 Funciones y objetivos
El término portal tiene como significado puerta grande, y precisamente su nombre

hace referencia a su función u objetivo: es, por lo general, el punto de partida de
un usuario que desea entrar y realizar búsquedas en la web u obtener
información importante de él. Se puede decir que un portal ofrece servicios
para la navegación en el internet, logrando incrementar la intensidad de tráfico en
el mismo.
Un portal de Internet puede ser un Centro de contenido intermediario entre

compradores y vendedores de rubros específicos, 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 electrónicos, motores de búsqueda, etc.
19
El portal es considerado un intermediario de información que tiene como fuente de

ingreso la publicidad de empresas que ahí se anuncian.
2.2.3 Servicios adicionales
Un portal opcionalmente podría ofrecer:
 Servicios de búsqueda que incluye mecanismos de búsqueda, directorios y

páginas amarillas para localizar negocios o servicios.
 Contenidos. Es decir, información de varios temas como noticias, deportes,

pronósticos 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 interés como coches, viajes y salud
entre otros.
 Facilidades de comercialización: anuncios clasificados para trabajos,

coches y casas; subastas, pequeños agregados de vendedores y ligas a
otros sitios que también se dedican a la venta.
2.2.4 Modalidades
Existen tres modalidades de portales:
1. Portales horizontales, también llamados portales masivos o de propósito

general, se dirigen a una audiencia amplia, tratando de llegar a toda la
gente con muchas cosas. Como ejemplo de portales de esta categoría
están Terra, AOL, AltaVista, UOL, Lycos,Yahoo,MSN.
2. Portales verticales, se dirigen a usuarios para ofrecer contenido dentro de

un tema específico como puede ser un portal de música, 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 trataría de portales que utilizan redes sociales o aplicaciones
generalistas como Facebook, Linkd, Flickr o YouTube… complementados
con contenidos y/o utilidades dirigidas a un público muy concreto.
20
2.3 INTRODUCCIÓN A LAS APLICACIONES WEB
2.3.1 Introducción a Internet
Internet, la red de redes, nace a mediados de la década de los setenta, bajo los
auspicios de DARPA, la Agencia de Proyectos Avanzados para la Defensa de
Estados Unidos. DARPA inició un programa de investigación de técnicas y
tecnologías para unir diversas redes de conmutación de paquetes, permitiendo
así a los ordenadores conectados a estas redes comunicarse entre sí de forma
fácil y transparente.
De estos proyectos nació un protocolo de comunicaciones de datos, IP o Internet

Protocol, que permitía a ordenadores diversos comunicarse a través de una red,
Internet, formada por la interconexión de diversas redes.
A mediados de los ochenta la Fundación 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
mayoría de países disponían 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 sólo por TCP e IP), algunas de las cuales eran ya de
código libre, Internet empezó lo que posteriormente se convertiría en una de sus
características 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 número

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 demás redes de comunicación existentes (Compuserve,
FidoNet/BBS, etc.). El punto de inflexión vino marcado por la aparición de
21
implementaciones de TCP/IP gratuitas (incluso de implementaciones que

formaban parte del sistema operativo) así como por la popularización y
abaratamiento de medios de acceso cada vez más rápidos (módems de mayor
velocidad, RDSI, ADSL, cable, satélite). El efecto de todos estos cambios fue de
“bola de nieve”: a medida que se conectaban más usuarios, los costes se
reducían, aparecían más proveedores e Internet se hacía más atractivo y
económico, con lo que se conectaban más usuarios, etc.
En estos momentos disponer de una dirección de correo electrónico, de acceso a

la web, etc., ha dejado de ser una novedad para convertirse en algo normal en
muchos países del mundo. Por eso las empresas, instituciones, administraciones
y demás están migrando rápidamente 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 comunicación universal.
2.3.2 La WWW como servicio de Internet
La WWW (World Wide Web) o, de forma más coloquial, la web, se ha convertido,

junto con el correo electrónico, en el principal caballo de batalla de Internet. Ésta
ha dejado de ser una inmensa “biblioteca” de páginas estáticas 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 Investigación

Nuclear), Tim Berners-Lee empezó a diseñar un sistema para hacer accesible
fácilmente la información del CERN. Dicho sistema empleaba el hipertexto para
estructurar una red de enlaces entre los documentos. Una vez obtenida la
aprobación para continuar el proyecto, nació el primer navegador web, llamado
World- WideWeb (sin espacios).
En 1992 el sistema ya se había extendido fuera del CERN. El número de

servidores “estables” había aumentado, alcanzando la sorprendente cifra de
22
veintiséis. 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 año del lanzamiento de Mosaic, un navegador para X-Window/Uníx que

con el tiempo se convertiría en Netscape y que fue un factor clave de
popularización de la web. En 1994 se fundó el WWW Consortium, que se
convertiría en el motor de desarrollo de los estándares predominantes en la web
(http://www.w3c.org). A partir de ese momento, el crecimiento ya fue constante,
convirtiéndose hacia finales de los noventa en el servicio insignia de Internet y
dando lugar al crecimiento imparable de los servicios en línea 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 implementación simple y
sencilla de un sistema de comunicaciones que nos permite enviar cualquier tipo
de ficheros de una forma fácil, 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
composición de páginas enlazadas simples y fáciles, 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 conexión y sin estado. La razón de
que esté orientado a conexión 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
contraposición a los protocolos de datagrama o no orientados a conexión que
dividen los datos en pequeños paquetes (datagramas) y los envían, pudiendo
llegar por vías diferentes del servidor al cliente. El protocolo no mantiene estado,
23
es decir, cada transferencia de datos es una conexión independiente de la

anterior, sin relación alguna entre ellas, hasta el punto de que para transferir una
página web tenemos que enviar el código HTML del texto, así como las imágenes
que la componen, pues en la especificación inicial de HTTP, la 1.0, se abrían y
usaban tantas conexiones como componentes tenía la página, transfiriéndose por
cada conexión un componente (el texto de la página o cada una de las imágenes).
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 tráfico
entre cliente y servidor, siendo ésta muy usada por los servidores web de
comercio electrónico, así como por aquellos que contienen información personal o
confidencial.
De manera esquemática, el funcionamiento de HTTP es el siguiente: el cliente

establece una conexión TCP hacia el servidor, hacia el puerto HTTP (o el indicado
en la dirección de conexión), envía un comando HTTP de petición de un recurso
(junto con algunas cabeceras informativas) y por la misma conexión el servidor
responde con los datos solicitados y con algunas cabeceras informativas.
El protocolo define además cómo codificar el paso de parámetros entre páginas,

el tunelizar las conexiones (para sistemas defirewall), define la existencia de
servidores intermedios de cache, etc.
Las directivas de petición de información que define HTTP 1.1 (la versión
considerada estable y al uso) son:
24
GET Petición de recurso.
POST Petición de recurso pasando parámetros.

HEAD Petición de datos sobre recurso.
PUT Creación o envío de recurso.
DELETE Eliminación de recurso.
TRACE Devuelve al origen la petición 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 túneles.
Detallaremos a continuación algunos de estos comandos, ya que su comprensión

es fundamental para el desarrollo de aplicaciones web.
Cabe destacar que todos los recursos que sean servidos mediante HTTP deberán
ser referenciados mediante una URL (universal resource locators).
• Peticiones en HTTP: GET y POST
Las peticiones en HTTP pueden realizarse usando dos métodos. El método GET,
en caso de enviar parámetros junto a la petición, las enviaría codificadas en la
URL. Por su parte, el método POST, en caso de enviarlos, lo haría como parte del
cuerpo de la petición.
Una petición 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
1. Línea de petición: contiene el recurso solicitado.
2. Cabecera de petición: contiene información adicional sobre el cliente.
3. Cuerpo de petición: en las peticiones de tipo POST, y otras, contiene

información adicional.
• Línea de petición
La línea de petición está formada por los siguientes elementos:
1. Método: nombre del método de HTTP llamado (GET, POST, etc.).
2. Identificador de recurso: URL (uniform resource locator) del recurso solicitado.
3. Versión de protocolo: versión del protocolo solicitada para la respuesta.
• Cabecera de petición
Contiene información adicional que puede ayudar al servidor (o a los servidores

intermedios, los proxies y caches) a procesar adecuadamente la petición.
La información se proporciona en forma de:
Identificador: valor
De estos identificadores, los más 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 automáticamente.
Parámetros de petición
Una petición HTTP puede también contener parámetros, como respuesta, por
ejemplo, a un formulario de registro, a una selección de producto en una tienda
electrónica, etc. Estos parámetros pueden pasarse de dos formas:
26
– Como parte de la cadena de petición, codificados como parte de la URL.
– Como datos extra a la petición.
Para codificar los parámetros como parte de la URL, éstos se añaden a la URL
detrás del nombre del recurso, separados de éste por un carácter?. Los diferentes
parámetros se separan entre sí por el carácter&. 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 código ASCII en hexadecimal del carácter.
Por ejemplo:
Que en la petición HTTP quedaría:
GET /indice.jsp?nombre=Perico+Palotes&OK=1 HTTP/1.0
Accept-language: en
Para pasar los parámetros como datos extra de la petición, éstos se envían al
servidor como cuerpo de mensaje en la petición.
Por ejemplo, la petición anterior quedaría:
POST /indice.jsp HTTP/1.0
Accept-language: en
nombre=Perico+Palotes&OK=1
27
Cabe destacar que para pasar los parámetros como cuerpo de la petición, ésta
debe realizarse como POST y no como GET, aunque una petición POST también
puede llevar parámetros en la línea de petición. Los parámetros pasados como
cuerpo de la petición están codificados, al igual que en el ejemplo anterior, como
URL, o pueden usar una codifica- ción derivada del formato MIME (multipurpose
internet mail extensions), en lo que se conoce como codificación multiparte.
La petición anterior en formato multiparte sería:
POST /indice.jsp HTTP/1.0
Accept-language: en
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 codificación es exclusiva del método POST. Se emplea para enviar ficheros
al servidor.
• Respuestas en HTTP
28
Las respuestas en HTTP son muy similares a las peticiones. Una respuesta
estándar a una petición de una página sería 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 línea nos responde con la versión del
protocolo empleada para enviarnos la página, seguida de un código de retorno y
una frase de retorno. El código de retorno puede adoptar uno de los siguientes
valores:
– 1xx Petición recibida, continúa en proceso.
– 2xx Correcta. Petición procesada correctamente.
– 3xx Redirección. La petición debe repetirse o redirigirse.
– 4xx Error de cliente. No se puede procesar la petición porque ésta
es incorrecta, no existe, etc.
– 5xx Error de servidor. El servidor ha fallado intentando procesar
la petición, que a priori es correcta.
La frase de retorno dependerá de la implementación, pero sólo sirve como

aclaratorio del código de retorno.
29
Después del estatus aparece una serie de campos de control, con el mismo
formato que en las cabeceras de la petición que nos informan del contenido
(fecha de creación, longitud, versión del servidor, etc.). A continuación 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
también referenciar otros recursos (imágenes, etc.), enlaces a otros documentos
(la característica más destacada del WWW), mostrar formularios para
posteriormente procesarlos, etc.
El lenguaje HTML actualmente se encuentra en la versión 4.01 y empieza a

proporcionar funcionalidades más avanzadas para crear páginas más ricas en
contenido. Además se ha definido una especificación compatible con HTML, el
XHTML (extensible hypertext markup language) que se suele definir como una
versión XML validable de HTML, proporcionándonos 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 colección de páginas estáticas,

documentos, etc., que podían consultarse o descargarse.
El siguiente paso en su evolución fue la inclusión de un método para confeccionar

páginas dinámicas que permitiesen que lo mostrado fuese dinámico (generado o
calculado a partir de los datos de la petición). Dicho método fue conocido como
CGI (common Gateway Interface) y definía un mecanismo mediante el cual
podíamos pasar información entre el servidor HTTP y programas externos. Los
CGI siguen siendo muy utilizados, puesto que la mayoría de los servidores web
los soportan debido a su sencillez. Además, nos proporcionan total libertad a la
hora de escoger el lenguaje de programación para desarrollarlos.
El esquema de funcionamiento de los CGI tenía un punto débil: cada vez que
recibíamos una petición, el servidor web lanzaba un proceso que ejecutaba el
30
programa CGI. Como, por otro lado, la mayoría de CGI estaban escritos en algún
lenguaje interpretado (Perl, Python, etc.) o en algún lenguaje que requería runtime
environment (VisualBasic, Java, etc.), esto implicaba una gran carga para la
máquina del servidor. Además, si la web tenía muchos accesos al CGI, esto
suponía 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
vías. Por un lado se diseñan sistemas de ejecución de módulos más integrados
con el servidor, que evitan que éste tenga que instanciar y ejecutar multitud de
programas. La otra vía consiste en dotar al servidor de un intérprete de algún
lenguaje de programación (RXML, PHP, VBScript, etc.) que nos permita incluir las
páginas en el código de manera que el servidor sea quien lo ejecute, reduciendo
así el tiempo de respuesta.
A partir de este momento, se vive una explosión del número de arquitecturas y

lenguajes de programación que nos permiten desarrollar aplicaciones web. Todas
ellas siguen alguna de las dos vías ya mencionadas. De ellas, las más útiles y las
que más se utilizan son aquellas que permiten mezclar los dos sistemas, es decir,
un lenguaje de programación integrado que permita al servidor interpretar
comandos que “incrustemos” en las páginas HTML y un sistema de ejecución de
programas más enlazado con el servidor que no presente los problemas de
rendimiento de los CGI.
A lo largo del curso abordaremos con más detalle la que quizás sea la más
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 código interpretable en las páginas HTML y que el servidor
traduce a programas ejecutables, JSP (Java server pages) y un mecanismo de
programación estrechamente ligado al servidor, con un rendimiento muy superior
a los CGI convencionales, llamado Java Servlet.
Otra de las tecnologías que más éxito ha obtenido y una de las que más se utiliza
en Internet es el lenguaje de programación interpretado por el servidor PHP. Se
trata de un lenguaje que permite incrustar HTML en los programas, con una
31
sintaxis que proviene de C y Perl. Además, habida cuenta de su facilidad de

aprendizaje, su sencillez y potencia, se está convirtiendo en una herramienta muy
utilizada para algunos desarrollos.
Otros métodos de programación de aplicaciones web también tienen su mercado.

Así sucede conmod_perl para Apache, RXML para Roxen, etc., pero muchos de
ellos están vinculados a un servidor web concreto.
32
2.4 Conceptos Básicos 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, proporcionándoles los recursos que solicitan mediante el
protocolo HTTP o el protocolo HTTPS (la versión segura, cifrada y autenticada de
HTTP). Un servidor web básico tiene un esquema de funcionamiento muy
sencillo, ejecutando de forma infinita el bucle siguiente:
1. Espera peticiones en el puerto TCP asignado (el estándar para HTTP es el 80).
2. Recibe una petición.
3. Busca el recurso en la cadena de petición.
4. Envía el recurso por la misma conexión por donde ha recibido la petición.
5. Vuelve al punto 2.
Un servidor web que siguiese el esquema anterior cumpliría los requisitos básicos
de los servidores HTTP, aunque, eso sí, sólo podría servir ficheros estáticos.
A partir del esquema anterior se han diseñado y construido todos los programas
servidores de HTTP que existen, variando sólo el tipo de peticiones (páginas
estáticas, CGI, Servlets, etc.) que pueden atender, en función de que sean o no
multiproceso, multihilados, etc. A continuación detallaremos algunas de las
características principales de los servidores web, que extienden, obviamente el
esquema anterior.
2.4.2 Servicio de ficheros estáticos
Todos los servidores web deben incluir, como mínimo, la capacidad para servir los
ficheros estáticos 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
La mayoría de servidores web permiten, además, añadir otros directorios para

servir, especificando en qué punto del “sistema de ficheros” virtual del servidor se
ubicarán.
Algunos servidores web permiten, además, especificar directivas de seguridad

(para qué direcciones, usuarios, etc., está visible un directorio, etc.), mientras
que otros hacen posible especificar qué ficheros se considerarán como índice del
directorio.
2.4.3 Seguridad y autenticación
La mayoría de los servidores web modernos nos permiten controlar desde el

programa servidor aquellos aspectos relacionados con la seguridad y la
autenticación de los usuarios.
El modo más 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, máquinas, etc., tienen acceso a los
ficheros y subdirectorios del directorio donde está el fichero. Como el servidor de
NCSA fue el servidor más usado durante mucho tiempo, la mayoría 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 configuración del servidor web, indicando allí qué usuarios, máquinas, etc.,
pueden acceder al recurso indicado.
Por lo que respecta a la autenticación (validación del nombre de usuario y

contraseña proporcionados por el cliente), las prestaciones ofrecidas por los
diversos servidores web son de lo más variado. La mayoría permiten, como
mínimo, proporcionar al servidor web un fichero con nombres de usuario y
contraseñas 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 autenticación y validación a otro software (por ejemplo
34
RADIUS, LDAP, etc.). Si usamos un sistema operativo como Linux, que dispone
de una infraestructura de autenticación como PAM (pluggable authentication
modules), podemos usar esta funcionalidad como modo de autenticación del
servidor web, permitiéndonos así usar los múltiples métodos disponibles en PAM
para autenticar contra diversos sistemas de seguridad.
2.4.4 Contenido dinámico
Uno de los aspectos más importantes del servidor web escogido es el nivel de
soporte que nos ofrece para servir contenido dinámico. Dado que la mayor parte
del contenido web que se sirve no proviene de páginas estáticas, sino que se
genera dinámicamente, y esta tendencia es claramente alcista, el soporte para
contenido dinámico que nos ofrece el servidor web es uno de los puntos más
críticos en su elección.
La mayoría de servidores web ofrecen soporte para CGI (cabe recordar que los
CGI son el método más antiguo y simple de generación de contenido dinámico).
Muchos ofrecen soporte para algunos lenguajes de programación (básicamente
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 más 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 programación de servidor tenemos que plantearnos si
deseamos un lenguaje muy estandarizado para que nuestra aplicación 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 prestación concreta que pueda
ofrecernos algún lenguaje de programación concreto.
2.4.5 Servidores virtuales
Una prestación 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 múltiples dominios con sólo una dirección IP, discriminando entre los
diversos dominios alojados por el nombre de dominio enviado en la cabecera de
35
la petición HTTP. Esta prestación permite administrar de una forma más 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 además, que el soporte que
facilita para servidores virtuales nos permita una configuración diferente para cada
servidor (directorios, usuarios, seguridad, etc.). Lo ideal sería 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 elección de servidor web. Debemos ser conscientes, no
obstante, de que si usamos algunas de estas características, o si éstas se
convierten en imprescindibles para nosotros, ello nos puede obligar a usar un
determinado servidor web aunque en algún momento determinado deseemos
cambiar.
Algunas características adicionales de algunos servidores web de código libre son

las siguientes:
Spelling (Apache). Esta prestación de Apache nos permite definir una página 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 página web generada por el servidor donde
éste nos muestra su estado de funcionamiento, nivel de respuesta, etc.
RXML Tags (Roxen). Añade a HTML algunos tags (comandos de HTML),

mejorados para programación y generación de contenido dinámico.
SQL Tags (Roxen). Añade al lenguaje HTML extendido de Roxen
(RXML), comandos para realizar accesos a bases de datos SQL desde las
propias páginas HTML.
36
Graphics (Roxen). Añade al lenguaje HTML extendido de Roxen
(RXML), comandos para la generación de gráficos, títulos, etc., y no requiere un

trabajo de diseño gráfico.
Bfnsgd (AOLServer),mod_gd (Apache). Nos permite realizar gráficos 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 música (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 transformación de ficheros XML a partir de XSL.
Kill Frame (Roxen). Envía con cada página web servida un código que evita que
nuestra web quede como frame (enmarcada) dentro de otra página web.
2.4.7 Actuación como representantes
Algunos servidores web nos permiten usarlos como servidores intermedios (proxy
servers). Podemos usar los servidores intermedios para propósitos muy variados:
• Para servir de aceleradores de navegación 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 algún 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 navegación o de acceso) existen programas específicos de
código libre mucho más eficientes, entre los que destaca Squid (http://www.squid-
cache.org/), que se considera uno de los mejores productos de proxy existentes.
37
Existen módulos 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, además 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
2.5 El Servidor Apache
2.5.1 Apache
Apache es un servidor web de código libre robusto cuya implementación 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 documentación relacionada.
Estos voluntarios se conocen como el Apache Group. Además del Apache Group,
cientos de personas han contribuido al proyecto con código, ideas y
documentación.
2.5.2 El nacimiento de Apache
En febrero de 1995, el servidor web más popular de Internet era un servidor de

dominio público 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 evolución de dicho
programa había quedado prácticamente 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 electrónico como
herramienta básica de coordinación, se puso de acuerdo en poner en común
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 información compartida y un servidor en California donde los
desarrolladores principales pudiesen trabajar. A principios del año siguiente, ocho
programadores formaron lo que sería el Grupo Apache.
Éstos, usando el servidor NCSA 1.3 como base de trabajo, añadieron todas las
correcciones de errores publicadas y las mejoras más valiosas que encontraron y
probaron el resultado en sus propios servidores. Posteriormente publicaron lo que
sería la primera versión 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
En este momento el desarrollo de Apache siguió dos líneas 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 código, creando una nueva arquitectura modular. En julio de 1995 se
migraron a esta nueva arquitectura las mejoras existentes para Apache 0.7,
haciéndose público como Apache 0.8.
El día uno de diciembre de 1995, apareció Apache 1.0, que incluía documentación
y muchas mejoras en forma de módulos incrustables. Poco después, Apache
sobrepasó al servidor de NCSA como el más usado en Internet, posición que ha
mantenido hasta nuestros días. 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 Instalación de Apache
Tenemos dos opciones principales para instalar Apache: podemos compilar el

código fuente o podemos instalarlo a partir de un paquete binario adecuado a
nuestro sistema operativo.
Compilación a partir de fuentes
Para compilar Apache a partir de código fuente, debemos obtener previamente de

la web de Apache la última versión (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 estarán las fuentes del servidor.
Una vez dentro de este directorio, continuaremos con los siguientes pasos:
– Configuraremos el código para su compilación. Para ello ejecutaremos:
$ ./configure
Disponemos de algunos parámetros para ajustar la compilación de Apache.
– Una vez configurado el código fuente, si no se han producido errores

procederemos a compilarlo. Para ello ejecutaremos:
40
$ make
El alumno debe recordar que para compilar Apache requeriremos, como mínimo,
GNU Make y GNU CC.
– Una vez compilado, podemos instalarlo en el directorio que hemos designado

como destino en la configuración 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 instalación, 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
Instalación a partir de paquetes binarios
La mayor parte de los sistemas operativos de código 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. Quizás no lo instalásemos en
su momento. Así pues, ahora necesitamos una nueva versión. También es posible
que deseemos reinstalarlo porque hemos tenido problemas con algún fichero.
A continuación ofreceremos unas cuantas indicaciones sobre la instalación de

Apache en algunas de las distribuciones de Linux más conocidas.
• Redhat/Fedora
41
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 versión para nuestra
distribución, ya que tanto Redhat como Fedora publican actualizaciones para
subsanar errores o problemas detectados. Una vez en posesión de dicho
paquete, debemos instalarlo con:
rpm -ihv httpd-x.x.x.rpm
En caso de que lo tuviésemos ya instalado, podremos actualizarlo mediante el

comando:
rpm -Uhv httpd-x.x.x.rpm
En el caso de Fedora, al usar esta distribución un repositorio apt podemos

actualizar o instalar Apache con:
apt-get install httpd
Debian
La instalación de Apache en Debian es realmente sencilla. Sólo tenemos que

ejecutar el siguiente comando:
apt-get install apache que nos instalará Apache en la última versión o bien lo
actualizará, si ya lo teníamos instalado.
2.5.4 Configuración de Apache
Una vez instalado el servidor, llega el momento de configurarlo. Por defecto

Apache incluye una configuración mínima 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 configuración Document Root. El fichero de
configuración de Apache se llama httpd.conf y se encuentra en el subdirectorio
conf del directorio de instalación. El fichero httpd.conf es un fichero ASCII con las
directivas de configuración de Apache.
42
Estructura del fichero de configuración
El fichero httpd.conf está dividido en tres bloques fundamentales, aunque las

directivas de cada bloque pueden aparecer mezcladas y desordenadas.
Dichos bloques son:
• Parámetros globales
• Directivas de funcionamiento
•Hosts virtuales
Algunos parámetros 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 parámetros se encuentran
ubicados dentro de secciones donde se indica el ámbito de aplicación del
parámetro.
Las secciones más importantes son:
<Directory>: los parámetros que se encuentran dentro de esta sección sólo se

aplicarán al directorio especificado y a sus subdirectorios.
<DirectoryMatch>: igual que Directory, pero acepta en el nombre del directorio

expresiones regulares.
<Files>: los parámetros de configuración 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
<VirtualHost>: los parámetros sólo se aplicarán a las peticiones que vayan

dirigidas a este host (nombre de servidor, o dirección IP, o puerto TCP).
<Proxy>: sólo se aplican los parámetros a las peticiones de proxy (requiere, por
tanto, mod proxy instalado) que coincidan con la especificación 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 línea de comandos

un parámetro concreto, con la opción-D.
<IfModule>:se aplican los parámetros si al arrancar el servidor el módulo

especificado se encuentra cargado (conLoadModule).
En caso de conflicto entre especificaciones de parámetros, 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 después

de las generales. Así, un Virtual Host siempre puede sobrescribir la configuración
por defecto.
Un ejemplo de configuración sería:
<Directory /home/*/public_html>
Options Indexes
</Directory>
<FilesMatch \.(?i:gif jpe?g png)$>
Order allow,deny
44
Deny from all
</FilesMatch>.
Directivas de configuración globales
Algunas de las directivas de configuración jamás se aplican a ninguna de las

secciones antes mencionadas (directorios, etc.), sino que afectan a todo el
servidor web. Las más destacadas son:
•ServerRoot: especifica la ubicación del directorio raíz donde se encuentra

instalado el servidor web. A partir de este directorio, encontraremos los ficheros de
configuración, etc. Si el servidor está correctamente instalado, no debería
cambiarse nunca.
•KeepAlive: especifica si se utilizarán conexiones persistentes, para atender todas

las peticiones de un usuario con la misma conexión TCP.
•Listen: especifica en qué puerto se atenderán las peticiones. Por defecto se

utiliza el puerto 80 de TCP. También permite especificar qué direcciones IP se
utilizarán (por si el servidor tuviese más de una). Por defecto se utilizan todas las
disponibles.
•LoadModule: con LoadModule podemos cargar en el servidor los módulos

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 sección y es obligatorio que estén en la principal),
sino que se hallan en la sección principal de configuración. Dichas directivas son:
•ServerAdmin: sirve para especificar la dirección de correo electrónico del

administrador. Esta dirección puede aparecer en los mensajes de error como
45
dirección de contacto para permitir a los usuarios notificar un error al

administrador. No puede estar dentro de ninguna sección.
•ServerName: especifica el nombre y el puerto TCP que el servidor utiliza para

identificarse. Puede determinarse automáticamente, pero es recomendable
especificarlo. Si el servidor no tiene un nombre DNS, se recomienda incluir su
dirección IP. No puede estar dentro de ninguna sección. La sintaxis es:
ServerName nombredireccion:puerto como en:
ServerName www.uoc.edu:80
ServerName 192.168.1.1:80
•DocumentRoot: el directorio raíz desde el que se servirán los documentos. Por

defecto es el directorio htdocs, que se encuentra dentro de la carpeta de
instalación de Apache. No puede estar dentro de ninguna sección, a excepción de
la VirtualHost. Le corresponde una sección < D i r e c t o r y > en la que se
establecen los parámetros de configuración 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 más
de un fichero y el orden con el que se especifica dicho nombre determinará la
prioridad para decidir cuál se sirve. La directiva se puede encontrar tanto fuera de
cualquier sección como dentro de una de ellas.
•AccessFileName: especifica el nombre de fichero de configuración en caso de

que éste sea diferente de .htaccess. Para que esta configuración funcione, la
directiva AllowOverride tiene que tener un valor adecuado. No puede estar dentro
de ninguna sección. El nombre de fichero que se especifica por defecto es el del
fichero.htaccess.
•ErrorDocument: esta directiva establece la configuración del servidor en caso de

error. Se pueden establecer cuatro configuraciones distintas:
– Mostrar un texto de error.
46
– 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 ErrorDocumentcódigo_error acción.
Esta directiva se puede encontrar tanto dentro de una sección, como en la

configuración 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 petición 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 página
personal.
Por ejemplo:
UserDir publico provocará que la página almacenada en el directorio del usuario
test, en el subdirectorio público, sea accesible como:
http://www.uoc.edu/˜test/indice.html
Directivas de sección
La mayor parte de secciones de localización (Directory, Location, etc.) incluyen en

su configuración una serie de directivas que nos permiten controlar el acceso al
47
contenido ubicado dentro. Dichas directivas vienen proporcionadas por el

módulomod_access.
•Allow: nos permite especificar quién está autorizado a acceder al recurso.

Podemos especificar direcciones IP, nombres de máquina, fragmentos del nombre
o dirección e incluso por variables de la petición. Disponemos de la palabra clave
all para indicar todos los clientes.
•Deny: nos permite especificar a quién 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 sólo podrán entrar los
clientes que cumplan las especificaciones de Allow y no cumplan las de Deny.
–Deny,Allow. El acceso está permitido por defecto y sólo podrán 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 sólo servidor. Para ello
proporciona facilidades de creación de dominios virtuales en función de diversas
direcciones IP o diversos nombres por IP.
Apache fue uno de los primeros servidores en soportar servidores virtuales sin IP,
en función de nombre. Esta capacidad simplifica mucho la administración de los
servidores, además 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 excepción de aquellos
navegadores muy antiguos que no envíen la cabecera Host: con las peticiones.
Servidores virtuales por dirección IP
Para atender a diversos servidores virtuales, cada uno con una dirección IP,
utilizaremos la sección de configuración VirtualHost. Con esta sección definiremos
cada uno de los servidores con su propia configuración y dirección IP.
48
Un ejemplo sería 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 dirección IP para todos,

utilizaremos la sección VirtualHost, que nos permitirá definir los parámetros de
cada servidor. Si tenemos las mismas necesidades que en el ejemplo de
49
servidores virtuales por dirección IP con una sola dirección utilizaremos la

siguiente configuración:
NameVirtualHost *:80
<VirtualHost *:80>
ServerName www.uoc.edu
DocumentRoot /web/uoc
ErrorLog /web/logs/uoc_error_log
TransferLog /web/logs/uoc_access_log
</VirtualHost>
<VirtualHost *:80>
ServerName asociados.uoc.edu
DocumentRoot /web/asociados
ErrorLog /web/logs/asociados_error_log
TransferLog /web/logs/asociados_access_log
</VirtualHost>.
Podemos utilizar una dirección IP en lugar de *, lo cual nos permitiría 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 conexión 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
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 configuración 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, además, de una especificación de servidor virtual por

defecto_default_ que nos permite atender las peticiones que no sirve ningún otro.
<VirtualHost _default_>
DocumentRoot /www/defecto
</VirtualHost>
Podemos usar la etiqueta _default_ con un número de puerto para especificar

servidores por defecto diferentes para cada puerto.
Apache permite además configuraciones mucho más complejas de servidores

virtuales, especialmente útiles en casos de servidores masivos, etc. Una
magnífica guía de referencia se encuentra en la web del proyecto Apache, con
consejos y recetas útiles para configurar.
51
2.6 Otros servidores web de software libre
Existen multitud de servidores HTTP de código libre, pero casi todos ellos han
quedado eclipsados por la fama de Apache. Algunos de estos servidores
presentan características que les dotan de gran interés.
2.6.1. AOLServer
El servidor web AOLServer es el servidor web de código libre desarrollado por

AOL (América Online, el proveedor de Internet más importante del mundo). AOL
utiliza AOLServer como servidor principal de web para uno de los entornos web
de mayor tráfico 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 dinámicos. Cabe destacar que todos los dominios y servidores web de
AOL, más 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 integración
con OpenACS, un sistema de gestión de contenidos muy potente, de código 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 código libre).
2.6.2. Roxen y Caudium
Roxen es un servidor web publicado bajo licencia GNU por un grupo de

desarrolladores suecos que posteriormente fundarían la empresa Roxen Internet
Services. El servidor Roxen (que primeramente se había llamado Spider y
después, Spinner) ha destacado siempre por la gran cantidad de funcionalidades
que ofrece a los usuarios. Este servidor, desarrollado en el lenguaje de
programación Pike, ofrece a los usuarios cientos de módulos que permiten
desarrollar fácilmente sitios web muy ricos, dinámicos, etc., sin otra herramienta
que el servidor Roxen. Las características principales de Roxen son:
• Multiplataforma, es decir, puede ejecutarse en multitud de plataformas:

Windows, Linux, Solaris, MAC OS/X, etc.
52
• Es de código libre.
• Interfaz de administración vía web muy rica y fácil de usar.
• Soporte gráfico integrado que permite, con sólo algunas etiquetas de RXML (la
extensión de HTML de Roxen), generar imágenes, títulos, gráficas, etc.
• Acceso a BBDD integrado, posibilita el acceso a PostgreSQL, Oracle, MySQL,

etc.
• Base de datos MySQL integrada.
• Programación en el servidor con RXML, Java, Perl, PHP y CGI.
• Soporte de criptografía fuerte.
• Arquitectura modular que permite cargar y descargar extensiones del servidor

con éste en marcha.
• Independencia de plataforma en los módulos desarrollados por el usuario.
A mediados del 2000, a raíz de la aparición de la versión 2.0 de Roxen, que

rompía la compatibilidad de éste con las versiones anteriores, especialmente la
1.3, que era la más usada, un grupo de desarrolladores que incluía a algunos de
los fundadores de Roxen, inició un nuevo proyecto que partía de la versión 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, además, 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 más estables, rápidos y con mayor número de
prestaciones y facilidades) no ha triunfado, ya que siempre ha sido eclipsado por
Apache.
53
2.6.3. thttpd
thttpd es un servidor HTTP extremadamente pequeño, muy rápido, portable y

seguro. Tiene las mismas prestaciones que otros servidores convencionales,
como Apache, aunque en casos de carga extrema su rendimiento es mucho más
alto.
Su utilidad como servidor web de propósito general es más bien escasa, aunque
su uso principal suele ser como servidor rápido de contenido estático, muchas
veces como soporte de servidores Apache para servir contenido binario estático,
como puedan ser imágenes u otros, dejando para el servidor Apache las páginas
dinámicas o más complejas. Usado como auxiliar de Apache para servir contenido
estático ha conseguido reducir la carga del servidor principal a una centésima
parte.
2.6.4. Jetty
Jetty es un servidor web escrito totalmente en Java que incluye, además, un

contenedor de Servlets. Tiene un tamaño 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 mayoría de CD de demostración en libros sobre Java, Servlets, XML, etc.
• Ejecutándose en múltiples sistemas embebidos y ordenadores de mano.
54
2.7 Javascript
2.7.1 Concepto
Javascript es un lenguaje de programación interpretado (un lenguaje de tipo

script). A pesar de que existen intérpretes no dependientes de ningún navegador,
es un lenguaje de script que suele encontrarse vinculado a páginas web.
Javascript y Java son dos lenguajes de pro- gramación distintos con filosofías
muy diferentes. El único punto en común 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 programación, nuestro primer

contacto con Javascript será realizar un primer programa que nos muestre el ya
clásico mensaje “Hola mundo”. Como Javas- cript es un lenguaje que veremos,
generalmente, vinculado a una pá- gina web, el siguiente código 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
<INPUT TYPE=“button”NAME=“Boton”
VALUE=“Pulsar” onClick=“Saludo()”>
</FORM>
</BODY>
</HTML>
Este programa Javascript pinta en nuestra pantalla un botón. Al pulsarlo, se abre

una ventana con un mensaje. El aspecto que ofrece este programa es el
siguiente:
Comentaremos el código anterior, lo cual nos permitirá introducir los diversos

elementos de Javascript.
Como podemos ver, el código 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 ignorarán el contenido de la
etiqueta. Podemos, opcionalmente, requerir una versión concreta de Javascript si
usamos una etiqueta como:
<SCRIPT LANGUAGE=“Javascript1.1”>
...
</SCRIPT>
56
Una forma conveniente de usar la etiqueta SCRIPT es situarla en el encabezado

de la página, ya que así se mejora la legibilidad del código HTML.
En el interior de la etiqueta SCRIPT tenemos el código Javascript.
En este caso, una única función, aunque podríamos tener más.
Nuestro código:
function Saludo()
alert(“Hola mundo”);
define una función llamada Saludo. Como podemos observar, y a diferencia de

Java, esta función no pertenece a ningún 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 código que contiene esta función es
una llamada a función, alert(un método del objeto window).
El siguiente bloque de código Javascript está dentro de la definición en HTML del

formulario.
<FORM>
<INPUT TYPE=“button”NAME=“Boton”
VALUE=“Pulsar” onClick=“Saludo()”>
</FORM>
En este caso, el código Javascript declara un gestor de eventos, concretamente

del evento onClick para el objeto botón. Un evento es una ocurrencia de algún
hecho (en este caso, un click del botón por parte del usuario). Al producirse el
evento Javascript se ejecutará el código que le indicamos en el gestor de eventos
on Click. Este código es una llamada a una función, Saludo.
57
2.7.3 Elementos básicos 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 símbolos (nombres de
variables, funciones, etc.) son sensibles a cambios de mayúsculas/minúsculas.
Comentarios
Para introducir comentarios en el programa disponemos de dos opciones:
// Comentario de una sola línea
/*
Comentario que se extiende varias líneas
*/
Como podemos apreciar, el formato de los comentarios es idéntico al de Java.
Literales
Javascript sigue el mecanismo de definición 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 también proporciona soporte para vectores:
estaciones= [“Otoño”,”Invierno”,”Primavera”,”Verano”];.
Caracteres especiales
58
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 más usados:
2.7.4 Tipos de datos y variables
En Javascript los tipos de datos se asignan dinámicamente a medida
que asignamos valores a las distintas variables y pueden ser:
• cadenas de caracteres
• enteros
• reales
• booleanos
• vectores
• matrices
• referencias
• objetos
59
Variables
En Javascript los nombres de variables deben empezar por un carácter alfabético

o por el carácter ‘_ ‘ y pueden estar formados por caracteres alfanuméricos y el
carácter ‘_ ‘.
No hace falta declaración explícita 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 función. En una declaración de variable
mediante var podemos declarar diversas variables, separando los nombres de
éstas mediante ,.
Las variables tomarán 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 gestión
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
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 código siguiente, los Array de Javascript son objetos (de
tipo Array) los cuales pueden tener como índice de acceso un valor no numérico 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
//podemos usar cadenas como indices
capitales[“Francia”]= “París”;
Operadores
Disponemos en Javascript de los mismos operadores que en Java y C, siendo su

comportamiento el habitual de estos lenguajes:
•Operadores aritméticos: disponemos de los habituales operadores aritméticos

(+, -, *, /, %, etc.), además de los operadores de incremento (++) y decremento
(–).
•Operadores de comparación: disponemos de los siguientes:
– Igualdad==
– Desigualdad! =
– Igualdad estricta===
– Desigualdad estricta!==
– Menor que<
– Mayor que>
– Menor o igual que< =
– Mayor o igual que>=
•Operadores lógicos: Javascript proporciona los siguientes operadores lógicos:
– Negación!
– Y&&
– Ó||
•Operadores de objeto: además, para la manipulación de objetos disponemos de:
– Crear un objeto new
62
– Borrar un objeto delete
– Referencia al objeto actual this
2.7.5 Estructuras de control
Javascript, como todos los lenguajes de programación, proporciona algunas

estructuras de control.
Bifurcaciones condicionales
Javascript proporciona las dos estructuras de control más conocidas:
if (condicion)
<codigo>
else
<codigo>
switch(valor)
case valortest1:
<codigo>
break;
case valortest2:
<codigo>
break;
...
default:
<codigo>
63
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 múltiples propiedades de un mismo objeto. Podemos
escribir:
with (objeto)
{propiedad1 = ...
propiedad2 = ...
}en lugar de:
objeto.propiedad1=...
objeto.propiedad2=...
64
2.7.6 Funciones
Javascript proporciona las construcciones necesarias para definir funciones. La

sintaxis es la siguiente:
function nombre(argumento1, argumento2,..., argumento n)
código
}Los parámetros 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 (métodos). El
modelo de programación orientada a objetos de Javascript es mucho más 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 métodos de un objeto es el

siguiente:
objeto.propiedad
valor=objeto.metodo(parametro1, parametro2, ...)
Definición de objetos en Javascript
Para definir un objeto en Javascript debemos, en primer lugar, definir una función
especial, cuya finalidad consiste en construir el objeto. A dicha función, llamada
constructor, debemos asignarle el mismo nombre que al objeto.
function MiObjeto(atr1, atr2)
this.atr1=atr1;
this.atr2=atr2;
65
A partir de este momento podemos crear objetos de tipo MiObjeto.
objeto=new MiObjeto(....)
objeto.atr1=a;.
Para añadir métodos a un objeto, debemos definir primero dichos métodos como
una función normal:
function Metodo1(atr1, atr2)
{//codigo
// en this tenemos el objeto
}Para asignar este método a un método del objeto escribiremos:
objeto.metodo1=Metodo1;
A partir de ese momento podemos realizar:
objeto.metodo1(....);
Herencia
La herencia en la programación orientada a objetos nos permite crear objetos

nuevos que dispongan de los métodos y propiedades de unos objetos a los que
llamaremos padre. Gracias a ello, podemos crear objetos derivados y pasar de
implementaciones genéricas a implementaciones cada vez más concretas.
La sintaxis para crear un objeto derivado de otro, por ejemplo, un objeto

ObjetoHijo derivado de un objeto ObjetoPadre, el cual tenía dos argumentos (arg1
yarg2), será:
function ObjetoHijo(arg1, arg2, arg3)
{this.base=ObjetoPadre;
this.base(arg1,arg2);
66
En ese momento podemos acceder por un objeto de tipo ObjetoHijo tanto a los
métodos 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 Métodos matemáticos 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 más importantes de Javascript es su interacción con el

navegador. Para ello incorpora una serie de eventos que se disparan en el
momento en que el usuario realiza alguna acción en la página 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
Las aplicaciones Web son fáciles de usar (no requieren conocimientos avanzados
de computación).
Con una aplicación 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 cuál nos mantendrá la
información siempre actualizada.
Otorga la flexibilidad de determinar niveles de acceso según la confidencialidad

de los datos así como la posibilidad de realizar transacciones on-line.
2.7.10 Antecedentes
En los primeros tiempos de la computación cliente-servidor, cada aplicación tenía

su propio programa cliente que servía como interfaz de usuario que tenía 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 aplicación, requería normalmente una
mejora de los clientes instalados en cada ordenador personal, añadiendo un coste
de soporte técnico y disminuyendo la productividad.
A diferencia de lo anterior, las aplicaciones web generan dinámicamente una serie

de páginas en un formato estándar, como HTML o XHTML, que soportan por los
navegadores web comunes. Se utilizan lenguajes interpretados en el lado del
cliente, tales como JavaScript, para añadir elementos dinámicos a la interfaz de
usuario. Generalmente cada página web en particular se envía al cliente como un
documento estático, pero la secuencia de páginas ofrece al usuario una
68
experiencia interactiva. Durante la sesión, el navegador web interpreta y muestra

en pantalla las páginas, actuando como cliente para cualquier aplicación 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 están soportadas por las
tecnologías web estándar. Los desarrolladores web generalmente utilizan
lenguajes interpretados o script en el lado del cliente para añadir más
funcionalidades, especialmente para ofrecer una experiencia interactiva que no
requiera recargar la página cada vez (lo que suele resultar molesto a los
usuarios). Recientemente se han desarrollado tecnologías para coordinar estos
lenguajes con tecnologías en el lado del servidor, como por ejemplo PHP.
Como ejemplo, AJAX, es una técnica de desarrollo web que usa una combinación
de varias tecnologías.
2.7.12 Consideraciones técnicas
Una ventaja significativa es que las aplicaciones web deberían funcionar igual
independientemente de la versión del sistema operativo instalado en el cliente. En
vez de crear clientes para Windows, Mac OS X, GNU/Linux, y otros sistemas
operativos, la aplicación 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
características de la interfaz (tamaño y color de fuentes, tipos de fuentes,
inhabilitar Javascript) puede interferir con la consistencia de la aplicación web.
Otra aproximación 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 tecnologías (usualmente por medio de plug-ins), las
aplicaciones basadas en Flash o Java pueden ser implementadas con
69
aproximadamente la misma facilidad. Dado que ignoran las configuraciones de los

navegadores, estas tecnologías permiten más 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 término alternativo es “Aplicación Enriquecida de
Internet”.
2.7.13 Estructura de las Aplicaciones Web
Aunque existen muchas variaciones posibles, una aplicación web está

normalmente estructurada como una aplicación de tres-capas. En su forma más
común, el navegador web ofrece la primera capa y un motor capaz de usar alguna
tecnología web dinámica (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

valiéndose 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 vía web al software. Para aplicaciones previamente
distribuidas, como las aplicaciones de escritorio, se puede optar por desarrollar
una aplicación totalmente nueva o simplemente por adaptar la aplicación para ser
usada con una interfaz web. Estos últimos programas permiten al usuario pagar
una cuota mensual o anual para usar la aplicación, sin necesidad de instalarla en
el ordenador del usuario. Las compañías que siguen esta estrategia se
denominan Proveedores de Aplicaciones de Servicio (ASP por sus siglas en
inglés), un modelo de negocio que está atrayendo la atención de la industria del
software.
70
2.7.15 Lenguajes de programación
Existen numerosos lenguajes de programación empleados para el desarrollo de

Aplicaciones Web, entre los que destacan:
 PHP
 ASP/ASP.NET
 Java, con sus tecnologías Java Servlets y JavaServer Pages (JSP)
 Perl
 Ruby
 Python
 HTML
 XML
ASP no es un lenguaje de programación 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
2.8 Concepto Básico del sitio web
2.8.1 Portal web
Un portal de Internet es un sitio web cuya característica fundamental es la de

servir de Puerta de entrada (única) para ofrecer al usuario, de forma fácil e
integrada, el acceso a una serie de recursos y de servicios relacionados a un
mismo tema. Incluye: enlaces, buscadores, foros, documentos, aplicaciones,
compra electrónica, etc. Principalmente un portal en Internet está dirigido a
resolver necesidades de información específica 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
información siempre actualizada.
Otorga la flexibilidad de determinar niveles de acceso según la confidencialidad

de los datos así como la posibilidad de realizar transacciones on-line.
1. Compatibilidad multiplataforma. Las aplicaciones web tienen un camino

mucho más sencillo para la compatibilidad multiplataforma que las aplicaciones de
software descargables. Varias tecnologías incluyendo Java, Flash, ASP y Ajax
permiten un desarrollo efectivo de programas soportando todos los sistemas
operativos principales.
2. Actualización. Las aplicaciones basadas en web están siempre actualizadas

con el último lanzamiento sin requerir que el usuario tome acciones pro-activas, y
sin necesitar llamar la atención del usuario o interferir con sus hábitos de trabajo
con la esperanza de que va a iniciar nuevas descargas y procedimientos de
72
instalación (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
priístas están listas para trabajar sin importar cuál es su configuración o su
hardware.
4. Facilidad de prueba. Finalmente no habrá más obstáculos para permitir

pruebas sencillas y efectivas de herramientas y aplicaciones antes de cargar su
tarjeta de crédito. Actualmente, especialmente cuando hablamos de software
costoso, hay todavía una gran cantidad de funcionalidades y pequeños 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 más 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 más espacio para correr
múltiples aplicaciones del mismo tiempo sin incurrir en frustrantes deterioros en el
rendimiento.
6. Menos Bugs. Las aplicaciones basadas en web deberían ser menos

propensas a colgarse y crear problemas técnicos 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 versión, y
todos los bugs pueden ser corregido tan pronto como son descubiertos. Esta es la
razón por la cual las aplicaciones basadas en web deberían tener mucho menos
bugs que el software de escritorio descargable tradicional.
7. Precio. Las aplicaciones basadas en web no requieren la infraestructura de

distribución, soporte técnico y marketing requerido por el software descargable
tradicional. Esto permite que las aplicaciones online cuesten una fracción de sus
contrapartes descargables si no totalmente gratuitas, mientras que ofrecen
componentes adicionales y servicios premium como una opción.
73
8. Los datos también van online. Por supuesto con el desplazamiento de las
aplicaciones locales a aquellas basadas en web también 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 kilómetros
de su oficina"Los clientes no deberían almacenar datos; deberían ser como
teléfono. De hecho pueden convertirse en teléfonos, o viceversa. Y a medida que
los clientes se hagan más pequeños, usted tiene otra razón 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. Múltiples usuarios concurrentes. Las aplicaciones basadas en web pueda

realmente ser utilizada por múltiples usuarios al mismo tiempo. No hay más
necesidad de compartir pantallas o enviar instantáneas cuando múltiples usuarios
pueden ver e incluso editar el mismo documento de manera conjunta. Las
compañías de conferencia web y colaboración online están involucradas algunas
transformaciones claves y los usuarios necesitan explorar que significa realmente
trabajar efectivamente y co-editar documentos juntos.
10. Los datos son más 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 compañías se haga cargo del
almacenamiento de los datos del usuario, granjas de almacenamiento de datos
redundantes, altamente fiables, serán la norma más que la excepción, 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 compañías que
provee aplicaciones basadas en web van a brindar amplios servicios de resguardo
de datos ya sea como una parte integral del servicio básico o como una opción
paga. Usted puede imaginar que si una compañía comercial pierde los datos de la
gente será puesta de rodillas (financieramente) en cuestión de días.
11. Desarrollar aplicaciones en el lenguaje que usted quiera. Una vez que
las aplicaciones han sido separadas de computadoras locales y sistemas
operativos específicos esa pueden también ser escritas en prácticamente
74
cualquier lenguaje de programación. Ya que las aplicaciones web son

esencialmente una colección de programas más que un simple programa, ellas
podrían ser escritas en cualquier lenguaje de programación 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 aplicación 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.
Fíjese en estos fantásticos y exitosos ejemplos en funcionamiento provisto por

algunas de las aplicaciones más fabulosas disponibles actualmente, y usted verá
que ya están basadas en web:
 Escribir documentos online - Writely.com
 Tener una suite completa compatible con office - Thinkfree
 Crear planilla de cálculos - Numsum.com
 Manejar su colección de fotos digitales - Flickr.com
 Coleccionar y descubrir marcadores favoritos - Delicious
 Leer, suscribirse y buscar alimentadores RSS - Bloglines
 Seguimiento de tráfico de sitio, visitantes y métrica de conversión - Hitbox
 Conferencia web, presentación en vivo en la web - Presenternet
Crucial para el desarrollo exitoso la amplia adopción de estas nuevas aplicaciones

es la necesidad de un mayor entendimiento de la importancia crítica del diseño
efectivo de la interfaz del usuario, usabilidad y diseño en la
información/interacción.
También crítico será la integración efectiva de componentes conscientes de

presencia y el apoyo para canales de comunicación paralelos en tiempo real
como el chat de texto, MI y VoIP.
75
Por último, pero no por eso menos importante, las aplicaciones y los servicios
basados en web necesitarán ser apoyados por estrategias de comunicación de
marketing que más que nunca corte el cordón umbilical con las comunicaciones
corporativas tradicionales, de arriba-abajo y reciba abiertamente feedback y
participación 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 públicas.
Con lo que estoy más entusiasmado respecto al nuevo anuncio de Microsoft es la

consagración 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 creación de portales web personalizados, la recolección

de muchos servicios información incluyendo titulares de noticias y clima local,
acceso a e-mail y mensajería instantánea, completa lectura de alimentadores
RSS e incluso apoyo para reproducir o podcast, en un entorno personalizado
basado en web compatible con estándares abiertos.
2.8.2 Lenguaje PHP
Actualmente la red de Internet, compuesta por páginas web, sirve de soporte a

una gran cantidad de sistemas de información y comunicaciones que engloban
áreas tan importantes como la investigación, el comercio electrónico, la
visualización de información, el correo electrónico..
Las páginas 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 ofrecían páginas estáticas,
es decir, que a efectos del usuario, el único proceso realizado era el de
visualización de sus contenidos por parte del navegador del cliente.
76
A medida que pasaron los años, aumentó la afluencia de público 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 diseño web:
- Las llamadas páginas en el lado del cliente, programadas en HTML dinámico

(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 varíen su tamaño, que se les asocie posiciones absolutas en
pantalla… En definitiva, DHTML aumenta las posibilidades de visualización de las
instrucciones HTML.
-Las páginas del lado del servidor, permiten modificar los contenidos antes de
enviarlos al cliente. Las primeras fueron CGI (Common Gateway Interface) que
implementan páginas web activas en el servidor, capaces de leer lo que le
enviaba un cliente al servidor a través de un formulario, o escribir en la página del
cliente.
PHP (Hypertext Preprocessor) es un lenguaje script (no se compila para

conseguir códigos máquina si no que existe un intérprete que lee el código y se
encarga de ejecutar las instrucciones que contiene éste código), para el desarrollo
de páginas web dinámicas del lado del servidor, cuyos fragmentos de código se
intercalan fácilmente en páginas HTML, debido a esto, y a que es de Open
Source (código abierto), es el más popular y extendido en la web.
PHP es capaz de realizar determinadas acciones de una forma fácil 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 explotación
de bases de datos sin complicaciones. Es por esto, que levanta un mayor interés
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 permitía la interpretación de un número 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
programas en sus propias páginas. Cuando Rasmus tuvo la necesidad de crear

páginas dinámicas que trabajasen con formularios, creó una serie de etiquetas a
las que denominó “Form Interpreters”, y lo sacó al público con el nombre de
PHP/FI en 1995. Luego salió la versión mejorada, llamada PHP/FI 2.0.
Zeev Suraski y Andi Gutmans programaron el analizador sintáctico incluyendo

nuevas funcionalidades como el soporte a nuevos protocolos de Internet y el
soporte a la gran mayoría de las bases de datos comerciales, como MySQL y
Postgre SQL, así como un módulo para Apache. Con estas mejoras surgió PHP3
en 1997. Este analizador define la sintaxis y semántica de la versión PHP3 y la
siguiente: PHP4.
PHP3 carecía del uso de sesiones, algo muy común en las páginas web de cierta
complejidad. En el año 2000, PHP3 evolucionó a PHP4, que utiliza el motor Zend
(desarrollado por Zeev y Andi encargado de interpretar el código fuente de los
scripts de PHP), desarrollado para cubrir las necesidades actuales y solucionar
algunos inconvenientes de la anterior versión. Algunas mejoras de esta nueva
versión 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 código.
La última versión es PHP5, que utiliza el motor Zend-2 y presenta mejoras

significativas y un entorno de programación orientado a objetos mucho más
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 generación dinámica 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 tecnología
Microsoft, está orientado a sistemas Windows, especialmente NT.
PHP, cuyas siglas responden a un acrónimo recursivo (PHP:hypertext

preprocessor), es un lenguaje sencillo, de sintaxis cómoda y similar a la de otros
78
lenguajes como Perl, C y C++. Es rápido, interpretado, orientado a objetos y

multiplataforma. Para él se encuentra disponible una multitud de librerías. PHP es
un lenguaje ideal tanto para aprender a desarrollar aplicaciones web como para
desarrollar aplicaciones web complejas. PHP añade a todo eso la ventaja de que
el intérprete de PHP, los diversos módulos y gran cantidad de librerías
desarrolladas para PHP son de código 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 combinación barata (todos los componentes son
de código libre), potente y versátil. Tal ha sido la expansión de esta combinación
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 módulo propio del servidor, lo cual permite que las
aplicaciones escritas en PHP resulten mucho más rápidas que las aplicaciones
CGI habituales.
2.8.2.1 Cómo funciona PHP
Si solicitamos a nuestro servidor una página PHP, éste envía dicha página al
intérprete de PHP que la ejecuta (de hecho, no se trata más 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 página PHP con el siguiente contenido:
<?php echo “<h1>¡Hola mundo!</h1>“;?>
Si tenemos este código en un fichero con extensión. php el servidor enviará la

página al intérprete de PHP, el cual ejecuta la página y obtiene como resultado:
<h1>¡Hola mundo!</h1>
El servidor se lo enviará al navegador cliente que ha solicitado la página. El

mensaje aparecerá en la pantalla de este último. Veremos que PHP permite
79
mezclar en la misma página 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 diseñadores de web y programadores trabajen conjuntamente en las
páginas.
Disponemos, en los sistemas en los que esté instalado PHP, de un fichero de

configuración global de PHP llamadophp.ini que nos permitirá configurar algunos
parámetros 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

mínimo de PHP:
<?php
$MYVAR = “1234”;
$myvar = “4321”;
echo $MYVAR. “<br>\n”;
echo $myvar.”<br>\n”;
?>
La ejecución de este programa (su visualización desde un navega-
dor), dará como resultado:
1234<br>
4321<br>
El primer punto que debemos destacar es que los bloques de código de PHP
están delimitados en HTML con<?php y?>. Podemos, por tanto, escribir una
página HTML e incluir en ella diversos bloques de instrucciones PHP:
80
<HTML>
<HEAD>
<TITLE>Título 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 números
?>
</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 mayúsculas y minúsculas. Fijaos también en
que para concatenar texto (las variables y“<br>“) utilizamos el carácter punto “.” y
además, en que todas las sentencias terminan con “;”.
81
Asimismo conviene observar que las variables, a pesar de ser numéricas, se

pueden concatenar con un texto (“<br>“). En este caso el intérprete convierte el
valor numérico de la variable en texto para poder realizar la concatenación.
También podemos observar que hay un comentario dentro del código. Este
comentario no afectará en modo alguno al programa ni será enviado al navegador
del cliente (de hecho, el navegador cliente nunca recibirá código PHP). Para
introducir comentarios en nuestro código, disponemos de dos opciones:
// Comentario de una sola línea
/* Esto es un comentario de varias líneas.
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, básicamente, dos ámbitos: uno global, en el
que serán accesibles desde todo el código y otro local, en el que sólo serán
accesibles desde la función en la que las creamos. Para asignar a una variable un
ámbito global bastará con declararla (en este caso, sí que hace falta una
declaración de variable) y usar la palabra reservada global en la declaración:
<?php
82
global $test;
?>
Las variables que no califiquemos como globales, pero que sean definidas fuera
de cualquier función, tendrán como ámbito el global.
Bastará con definir una variable dentro de una función. En ese caso, su ámbito
quedará restringido a la función donde la declaremos.
<?php
global $variable; // Variable global
$a=1; // Variable global implícita
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.
Además, 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]= “Mediterráneo”;
$mares[1] = “Aral”;
83
$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 posición del elemento al que queremos acceder entre
corchetes. En PHP los vectores empiezan a numerarse en 0.
Además de vectores con índices numéricos, PHP soporta vectores cuyos índices
sean cadenas de texto:
<?php
$montañas = array(); //con array() declaramos un vector
$montañas[“Everest”]= “Himalaya”;
$montañas[“Fitz Roy”] = “Andes”;
$montañas[“Montblanc”] = “Alpes”;
echo $montañas[“Everest”]; // Imprimirá Himalaya
?>
5.2.4. Operadores
Los operadores son símbolos que se utilizan para realizar tanto operaciones
matemáticas como comparaciones u operaciones lógicas.
Los más habituales en PHP son:
• Operadores matemáticos:
a)+ Suma varios números:5 + 4 = 9.
b)−Resta varios números:5-4=1.
c) * Realiza una multiplicación:3 * 3 = 9.
d)/ Realiza una división: 10/2 = 5.
84
e)% Devuelve el residuo de una división: 10 % 3 = 1.
f)++ Incrementa en 1: $v++ (Incrementa $v en 1).
g)−− Decrementa en 1: $v-- (Decrementa $v en 1).
• Operadores de comparación:
a)== Evalúa a cierto si la condición de igualdad se cumple:
2 == 2 (Verdadero).
b)!= Evalúa a cierto si la condición de igualdad no se cumple
2 != 2 (Falso).
c)< Evalúa a cierto si un número es menor que el otro
2 < 5(Verdadero).
d)> Evalúa a cierto si un número es mayor que el otro
6 > 4 (Verdadero).
e)<=Evalúa a cierto si un número es menor o igual que otro
2 <= 5 (Verdadero).
f)>=Evalúa a cierto si un número es mayor o igual que otro
6 >= 4 (Verdadero).
• Operadores lógicos:
a) && Evalúa a cierto si los dos operadores son ciertos.
b) || Evalúa a cierto si alguno de los operadores es cierto.
c) And Evalúa a cierto si los operadores son ciertos.
d) Or Evalúa a cierto si alguno de los operadores es cierto.
e) Xor Evalúa a cierto si o un operador es cierto o lo es el otro.
85
f) ! Invierte el valor de verdad del operador.
El siguiente ejemplo nos mostrará los operadores matemáticos más 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 operación

de nuestro programa, controlando en todo momento qué porciones de códigos se
ejecutan en función de determinadas condiciones.
Condicionales
Los condicionales son estructuras que permiten llevar a cabo determinadas

operaciones sólo en caso de cumplirse una condición. Suelen llamarse también
bifurcaciones, ya que permiten dividir el flujo de ejecución del programa en
función del valor de verdad de una sentencia o condición.
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 código en función del
cumplimiento o no de una condición.
<?php
86
$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 ejecución de este programa, veremos que inicialmente

creamos dos variables a y b, a las que asignamos dos valores numéricos
diferentes. Acto seguido llegamos a la sentencia condicional if. Ésta verifica la
veracidad o cumplimiento de la condición especificada. En este caso tenemos un
operador= = de igualdad, el cual devuelve que la comparación es falsa; por tanto,
la sentencia if no ejecuta el primer bloque de código, el que habría ejecutado en
caso de cumplirse la condición, sino que ejecuta el segundo, el precedido por
else.
Podemos, pues, definir la estructura de if/else como:
if(condición)
código que se ejecutará si la condición es cierta
else
87
código que se ejecutará si la condición es falsa
Podemos comprobar más de una condición encadenando diversos
if/else:
if(condición1)
if(condición2)
código que se ejecutará si la condición2 es cierta y la condición 1 es cierta
else
código que se ejecutará si la condición2 es falsa y la condición 1 es cierta
else
código que se ejecutará si la condición1 es falsa
Un caso extendido del encadenamiento de if/else es el correspondiente a aquellos

supuestos en los que debemos ejecutar código diferente en función 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 código resulta engorroso. Por ello PHP proporciona una construcción
condicional más adecuada para ello denominada
switch.
88
<?php
$a=1;
switch($a)
case1:
case 2: echo “A es 1 o 2”; break;
case 3: echo “A es 3”; break;
default: echo “A es otro valor”;
La ejecución de switch es un poco compleja; de hecho, es muy parecida a la de

C. La sentencia switch se ejecuta línea a línea. Inicialmente no se ejecuta ningún
código de ninguna línea. Cuando se encuentra un case con un valor que coincide
con el de la variable del switch PHP empieza a ejecutar las sentencias. Éstas
continúan 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 código.
Disponemos, además, 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 código en función de una
condición.
89
Tenemos tres bucles principales en PHP: for, while y foreach.
• El bucle while
El bucle while es el más simple de los tres, pero aún así probablemente sea el
bucle más utilizado. El bucle se ejecuta mientras la condición 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 código, while comprueba la condición y, en caso de cumplirse,
vuelve a ejecutar el código. La cuarta vez que se ejecute, como a valdrá cuatro,
no se cumplirá la condición especificada y el bucle no volverá a ejecutarse.
• El bucle for
Para bucles del tipo anterior, donde la condición de continuación es sobre una
variable que aumenta o disminuye con cada iteración, disponemos de un tipo de
bucle más apropiado: for.
El código anterior, usando for quedaría de la forma:
90
<?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 condición de finalización y la de incremento o
continuación.
• 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 más 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, parámetros y siempre pueden devolver un valor. Las funciones sirven para
91
dar mayor modularidad al código, evitan- do así la repetición de código,

permitiendo el aprovechamiento de código entre proyectos, etc.
Un esquema de función es el siguiente:
<?php
function ejemp ($arg_1, $arg_2, ..., $arg_n)
{// Código de la función
return$retorno;
?>
Podemos llamar a las funciones desde el código 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
?>
El resultado de ejecutar dicho programa será que imprimirá un número seis.
Las funciones en PHP reciben habitualmente los parámetros por valor, es decir, la
variable que se pasa como parámetro en el código que llama no sufre
modificaciones si el parámetro de la función es modificado. Podemos, no
obstante, pasar parámetros por referencia (de forma similar a los punteros de
otros lenguajes de programación):
<?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 cómo interactuará PHP con nuestro usuario
web. Podemos dividir dicha interactuación en dos partes, mostrando información
al usuario y recogiendo información de éste.
Mostrando información
93
Tenemos dos mecanismos para que PHP muestre información al usuario: por un
lado podemos escribir páginas HTML corrientes, insertando sólo el código PHP
que requerimos en medio del código HTML. Por ejemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>
<?php $a=1; ?>
<?php $b=1; ?>
</BODY>
</HTML>
Por otro lado, podemos usar PHP para generar contenido dinámico. Para ello
debemos usar las instrucciones de PHP de salida de datos, la más importante,
echo.
<HTML>
<HEAD>
</HEAD>
<BODY>
<?php echo “Contenido de la <B>página</B>“; ?>
94
</BODY>
</HTML>
Recogida de información del usuario
Para recoger información del usuario, podemos utilizar los formularios de HTML,
utilizando nuestros programas PHP como ACTION de dichos formularios. Como
PHP fue diseñado para crear aplicaciones web, el acceso a los valores
introducidos por el usuario en los campos del formulario es realmente fácil 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>
</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
<HTML>
<HEAD>
</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 más destacadas son:
strlenDevuelve la longitud de una cadena.
explodeDivide una cadena en función de un carácter separador, y devuelve un

vector con cada uno de los trozos de la cadena.
implodeActúa al revés que explode, uniendo diversas cadenas de un vector con

un carácter de unión.
strcmpCompara dos cadenas a nivel binario.
strtolowerConvierte una cadena a minúsculas.
strtoupperConvierte una cadena a mayúsculas.
96
chopElimina el último carácter de una cadena, útil para eliminar saltos de línea o
espacios finales superfluos.
strposBusca dentro de una cadena otra cadena especificada y devuelve su

posición.
str_replaceReemplaza en una cadena una aparición 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 métodos para el acceso a ficheros.

Vamos a mostrar la más práctica y simple, muy adecuada si los ficheros a los que
accederemos son pequeños.
97
El código 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 líneas del
archivo. Para ello usaremos la función de librería file. El siguiente paso consiste
en averiguar cuántos elementos contiene fichero. Para ello usamos la función
count, que nos devuelve el tamaño 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 líneas del archivo.
PHP proporciona muchas funciones más de tratamiento de ficheros. Disponemos,

por ejemplo, de la función 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
“ftp://usuario:password@uoc.edu/salida.txt”, “w”);
?>
Ahí podemos ver cómo abrimos un fichero para lectura (‘‘r’’), para escritura
binaria( ‘ ‘ w b ’’), una página web para leerla como si se tratara de un fichero y un
fichero vía FTP para escribirlo, respectivamente.
2.8.2.9 Acceso a bases de datos
PHP proporciona métodos para acceder a un gran número 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 más 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. están
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
exit();
}$consulta=mysql_query(
“select nombre, telefono from agenda order by nombre”,
$conexion);
while($fila = mysql_fetch_array($consulta))
$nombre = $fila[“nombre”];
$teléfono = $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
conexión con ésta. Para ello necesitaremos la dirección 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 múltiples que puede tener el
servidor queremos usar para trabajar. A raíz de esta secuencia de conexión,
tendremos en la variable conexión los datos de la conexión 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 simultáneamente.
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
función 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
de una tabla de la base de datos llamada agenda, la cual contiene dos columnas
denominadas nombre y teléfono.
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
funciónmysql_free_result y luego podremos cerrar la conexión 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 sección anterior, un código 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($conexión,
101
“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 códigos. 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 aísla totalmente del sistema de
transacciones de PostgreSQL, cosa que a pesar de que en la mayoría de
situaciones es más que correcta, existen casos en los que sería 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
programación de aplicaciones web reside en la gran cantidad de librerías,
módulos, etc., que se han desarrollado para él. PHP pone a nuestra disposición
una cantidad ingente de API, funciones, módulos, clases (recordad que,
progresivamente, PHP se está convirtiendo en un lenguaje de programación
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
• Control de identidad de usuarios.
Plantillas HTML.
• Carritos de compra.
• Creación dinámica de HTML.
• Creación de imágenes dinámicamente.
• Manejo decookies.
• Transferencia de ficheros.
• Manejo de XML, XSLT, etc.
• Múltiples protocolos de comunicaciones: HTTP, FTP, etc.
• Creación 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.
Además de su utilidad como lenguaje de programación de aplicaciones web, PHP

está siendo cada vez más usado como lenguaje de programación de propósito
general, incluyendo en su arsenal de funciones interfaces hacia las librerías de
interfaces gráficos más conocidas (Win32 o GTK, entre otras), acceso directo a
funciones del sistema operativo, etc.
Por eso, en caso de desear usar PHP para desarrollar algún proyecto, resulta
altamente recomendable visitar la página 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, además, de PEAR, un repositorio
103
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 más perentorias con las que nos enfrentamos al
desarrollar aplicaciones para Internet con Java, y para muchas otras aplicaciones,
es la de disponer de un almacén de datos potente, robusto, rápido y fácilmente
accesible. Para ello existen multitud de sistemas gestores de bases de datos
(SGBD) de código libre. Analizaremos algunos de ellos en las siguientes
secciones y presentaremos posteriormente una tecnología que proporciona Java
para acceder a SGBD, especialmente relacionales, llamada JDBC (algunas veces
erróneamente expandido como Java database connectivity).
2.9.1 Introducción a las Bases de Datos
Uno de los puntos críticos en el desarrollo de aplicaciones web es la elección del

SGBD que utilizaremos. Existen en la actualidad bastantes SGBD de código libre,
muchos de ellos del mismo nivel cualitativo que algunos de los SGBD comerciales
más conocidos.
La mayoría de los SGBD de código libre proceden de dos fuentes principales: por
un lado, de proyectos que nacieron como código libre desde su principio
(proyectos de investigación, etc.) y por el otro, tenemos SGBD que pertenecían a
empresas de software propietario, cuyo negocio principal no es el SGBD. Estas
compañías optan por poner el producto bajo el amparo de una licencia de código
libre, abriendo así su desarrollo a la comunidad. Veremos a continuación algunos
de los SGBD de código libre más emblemáticos.
2.9.2 PostgreSQL
PostgreSQL (o Postgres) es uno de los SGBD más veteranos y conocidos del

mundo del código libre. Arranca a mediados de los ochenta en la Universidad de
Berkeley, bajo el nombre Postgres, a raíz de la investigación del grupo de bases
104
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 añadieron un intérprete SQL a Postgres 4.2, dando lugar al nacimiento
de Postgres95, un producto ya bajo licencia de código libre y que salió de
Berkeley para convertirse en un desarrollo llevado a través de todo Internet. En
1996 se eligió un nuevo nombre que resistiera el paso de los años y reflejara la
relación del proyecto con el original Postgres (aún disponible) y las nuevas
diferencias (básicamente, el uso de SQL). Nace así PostgreSQL.
A partir de ese momento, PostgreSQL se ha convertido en una de las bases de

datos de elección 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 características más 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 más de un valor.
• Añadir campos a tablas en tiempo de ejecución.
• Funciones de agregación (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 información de tablas,

de la base de datos y del motor de bases de datos.
105
• Soporte de objetos binarios grandes (mayores de 64 KB).
2.9.3 MySQL
MySQL se disputa con PostgreSQL el puesto de SGBD más conocido y usado de

código libre. MySQL es un SGBD desarrollado por la empresa MySQL AB, una
empresa de origen sueco que lo desarrolla bajo licencia de código libre
(concretamente bajo GPL), aunque también, 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 rápido. 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 elección en aquellas situaciones en las que
necesitamos sólo unas capacidades básicas.
Las funcionalidades más destacadas de MySQL son:
• Soporte de transacciones (nuevo en MySQL 4.0 si usamos InnoDB como motor

de almacenamiento).
• Soporte de replicación (con unm a s t e r actualizando múltiples slaves).
• Librería para uso embebido.
• Búsqueda por texto.
•Cache de búsquedas (para aumentar el rendimiento).
106
2.10 Adobe Photoshop
Adobe Photoshop (Taller de Fotos) es una aplicación informática en forma de

taller de pintura y fotografía que trabaja sobre un "lienzo" y que está destinado
para la edición, retoque fotográfico y pintura a base de imágenes de mapa de bits
(o gráficos rasterizados).
Es un producto elaborado por la compañía de software Adobe Systems,

inicialmente para computadores Apple pero posteriormente también para
plataformas PC con sistema operativo Windows.
Photoshop en sus versiones iniciales trabajaba en un espacio bitmap formado por

una sola capa, donde se podían aplicar toda una serie de efectos, textos, marcas
y tratamientos. En cierto modo tenía mucho parecido con las tradicionales
ampliadoras. En la actualidad lo hace con múltiples capas.
A medida que ha ido evolucionando el software ha incluido diversas mejoras

fundamentales, como la incorporación de un espacio de trabajo multicapa,
inclusión de elementos vectoriales, gestión avanzada de color (ICM / ICC),
tratamiento extensivo de tipografías, control y retoque de color, efectos creativos,
posibilidad de incorporar plugins de terceras compañías, exportación para web
entre otros.
Photoshop se ha convertido, casi desde sus comienzos, en el estándar de facto

en retoque fotográfico, pero también se usa extensivamente en multitud de
disciplinas del campo del diseño y fotografía, como diseño web, composición de
imágenes bitmap, estilismo digital, fotocomposición, edición y grafismos de vídeo
y básicamente en cualquier actividad que requiera el tratamiento de imágenes
digitales.
107
Photoshop ha dejado de ser una herramienta únicamente usada por diseñadores /

maquetadores, ahora Photoshop es una herramienta muy usada también por
fotógrafos profesionales de todo el mundo, que lo usan para realizar el proceso de
"positivado y ampliación" digital, no teniendo que pasar ya por un laboratorio más
que para la impresión del material.
Con el auge de la fotografía digital en los últimos años, Photoshop se ha ido

popularizando cada vez más fuera de los ámbitos profesionales y es quizá, junto a
Windows y Flash (de Adobe Systems También) uno de los programas que resulta
más familiar (al menos de nombre) a la gente que comienza a usarlo[cita
requerida], sobre todo en su versión Photoshop Elements, para el retoque casero
fotográfico.
Aunque el propósito principal de Photoshop es la edición fotográfica, este también

puede ser usado para crear imágenes, efectos, gráficos y más en muy buena
calidad. Aunque para determinados trabajos que requieren el uso de gráficos
vectoriales es más aconsejable utilizar Adobe Illustrator.
Entre las alternativas a este programa, existen algunos programas libres como
GIMP, orientada a la edición fotográfica en general, o propietarios como
PhotoPaint de Corel, capaz de trabajar con cualquier característica de los
archivos de Photoshop, y también con sus filtros plugin.
108
2.11 Adobe Dreamweaver
Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma

de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web
basados en estándares. Creado inicialmente por Macromedia (actualmente
producido por Adobe Systems). Es el programa de este tipo más utilizado en el
sector del diseño y la programación web, por sus funcionalidades, su integración
con otras herramientas como Adobe Flash y, recientemente, por su soporte de los
estándares del World Wide Web Consortium. Su principal competidor es Microsoft
Expression Web y tiene soporte tanto para edición de imágenes como para
animación a través de su integración con otras. Hasta la versión MX, fue
duramente criticado por su escaso soporte de los estándares de la web, ya que el
código que generaba era con frecuencia sólo válido para Internet Explorer, y no
validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones
recientes.
La gran ventaja de este editor sobre otros es su gran poder de ampliación y

personalización del mismo, puesto que en este programa, sus rutinas (como la de
insertar un hipervinculo, una imagen o añadir un comportamiento) están 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 aplicación se utilizaban como simples editores

WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías
web como CSS, JavaScript y algunos frameworks del lado servidor.
109
Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente

mantiene el 90% del mercado de editores HTML. Esta aplicación está disponible
tanto para la platafoma MAC como para Windows, aunque también 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 código HTML de
cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y
sitios web fácilmente sin necesidad de escribir código.
Algunos desarrolladores web criticaban esta propuesta ya que crean páginas

HTML más largas de lo que solían ser al incluir mucho código inútil, lo cual va en
detrimento de la ejecución de las páginas en el navegador web. Esto puede ser
especialmente cierto ya que la aplicación facilita en exceso el diseño de las
páginas mediante tablas. Además, algunos desarrolladores web han criticado
Dreamweaver en el pasado porque creaba código que no cumplía con los
estándares del consorcio Web (W3C).
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar

páginas sin tablas en versiones posteriores de la aplicación, haciendo que se
reduzca el exceso de código.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web

instalados en su ordenador para previsualizar las páginas web. También dispone
de herramientas de administración de sitios dirigidas a principiantes como, por
ejemplo, la habilidad de encontrar y reemplazar líneas de texto y código por
cualquier tipo de parámetro especificado, hasta el sitio web completo. El panel de
comportamientos también permite crear JavaScript básico sin conocimientos de
código.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación

de contenido dinámico en Dreamweaver. En lo fundamental de las herramientas
HTML WYSIWYG, también permite la conexión a Bases de Datos como MySQL y
Microsoft Access, para filtrar y mostrar el contenido utilizando tecnología de script
como, por ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP
110
(JavaServer Pages) y PHP sin necesidad de tener experiencia previa en

programación.
Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible.

Es decir, permite el uso de "Extensiones". Las extensiones, tal y como se
conocen, son pequeños programas, que cualquier desarrollador web puede
escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e
instalar, ofreciendo así funcionalidades añadidas a la aplicación. 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 mayoría
de las tareas de desarrollo web, que van desde simple efectos rollover hasta
completas cartas de compra.
También podría decirse, que para un diseño más rápido y a la vez fácil podría
complementarse con fireworks en donde podría uno diseñar un menú o para otras
creaciones de imágenes (gif web, gif websnap, gif adaptable, jpeg calidad
superior, jpeg archivo más pequeño, gif animado websnap) para un sitio web y
después exportar la imagen creada y así utilizarla como una sola, en donde ya
llevara los vínculos a un dicho sitio en especifico que uno le haya dado.(MRR -
U.P.C.)
111
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 páginas web dinámicas. JavaScript es un dialecto de
ECMAScript y se caracteriza por ser un lenguaje basado en prototipos, con
entrada dinámica y con funciones de primera clase. JavaScript ha tenido
influencia de múltiples lenguajes y se diseñó con una sintaxis similar al
lenguaje de programación Java, aunque más fácil de utilizar para personas
que no programan.
Todos los navegadores modernos interpretan el código JavaScript integrado

dentro de las páginas web. Para interactuar con una página web se provee al
lenguaje JavaScript de una implementación 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 venía utilizando en páginas web HTML, para realizar

operaciones y en el marco de la aplicación cliente, sin acceso a funciones del
servidor. JavaScript se ejecuta en el agente de usuario, al mismo tiempo que
las sentencias van descargándose junto con el código HTML.
112
Inicialmente los autores lo llamaron Mocha y más 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
estándar 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 estándar ECMA, con el nombre de
ECMAScript. Poco después también como un estándar ISO.
JScript es la implementación 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

estándar 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 versión 7, y Mozilla Application Suite, Mozilla
desde su primera versión.
2.12.1 Conceptos básicos
Todos los que hasta ahora hayan seguido el curso de HTML, se habrán dado
cuenta de una cosa: crear un documento HTML es crear algo de caracter
estático, inmutable con el paso del tiempo. La página se carga, y ahí termina
la historia. Tenemos ante nosotros la información que buscábamos, pero no
podemos INTERACTUAR con ella.
Así pues, como solución 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 diseñado específicamente para el desarrollo de aplicaciones
cliente-servidor dentro del ámbito de Internet.
113
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 versión 2 y el

segundo desde la versión 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

estándar denominado ECMAScript-262. Dicho estándar ha sido realizado por
la organización ECMA dedicada a la estandarización de información y
sistemas de comunicación.
114
2.12.3 Dónde y cómo incluir JavaScript
Existen distintos modos de incluir lenguaje JavaScript en una página.
La forma más 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 versión 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 código HTML.
<script language="JavaScript" src ="archivo.js"> </script>
El archivo externo simplemente es un archivo del texto que contiene código

JavaScript, y cuyo nombre acaba con la extensión js.
Puede incluirse también código JavaScript como respuesta a algún 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
código no es "visto" por navegadores viejos que no reconocen JavaScript y
así evitar errores.
<script ....>
<!-
Código JavaScript
//-->
</script>
2.12.4 Gramática
115
Si conoce algún otro lenguaje de programación ya estará familiarizado con el

uso de variables, operadores, declaraciones... Lo que se resume en la tabla
siguiente son los elementos principales de la gramática de JavaScript. Cada
uno de los elementos se verá en detalle a lo largo del manual.
Nota importante: JavaScript es sensible a mayúsculas y minúsculas, todos los

elementos de JavaScript deben referenciarse cómo 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 combinación de variables, operadores, y

declaraciones que evalúan a algún resultado.
Ejemplo: intTotal=100; intTotal > 100
Sentencias Una sentencia puede incluir cualquier elemento de la

grámatica 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 sólo es obligatorio si
las declaraciones múltiples residen en la misma línea.
Aunque es recomedable que se acostumbre a terminar
cada instrucción 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
Funciones y Una función de JavaScript es bastante similar a un"

Métodos procedimiento" o" subprograma" en otro lenguaje de
programación. Una función es un conjunto que realizan
alguna acción. Puede aceptar los valores entrantes (los
parámetros), y puede devolver un valor saliente. Un
método simplemente es una función contenida en un
objeto.
2.12.5 Variables
Las variables almacenan y recuperan datos, también 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 carácteres siguientes pueden ser números (0-9), letras mayúsculas o
letras minúsculas).
Ejemplos de definiciones erróneas:
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 página mientras
que una variable local sólo lo es desde la función en la que fue declarada.
Normalmente, usted crea una nueva variable global asignándole simplemente

un valor:
globalVariable=5;
117
Sin embargo, si usted está codificando dentro de una función y usted quiere
crear una variable local que sólo tenga alcance dentro de esa función, 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: numéricos, lógicos,

objetos, cadenas, nulos e indefinidos.
JavaScript tiene la peculiaridad de ser un lenguaje débilmente 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 más adelante una cadena.
MiVariable=4;
y después:
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 contendrán,
será el propio interprete el que le asignará el tipo apropiado. (Esto es así para
seguir la filosofía de diseño de Javascript que indica que se realizan
programas pequeños y que la idea es lograr que el programador realice los
scripts de la manera más rápida posible).
Tipos de Datos:
Números Enteros o coma flotante.
Boleanos True o False.
118
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 más variables o valores (los operando) y

devuelve un nuevo valor; por ejemplo el ' +' operador puede agregar dos
números para producir un tercero. Lo operadores están clasificados en varias
clases dependiendo de la relación que ellos realizan:
Operadores Aritméticos
Los operadores aritméticos toman los valores numéricos (literales o variables)

como sus operando y devuelve un solo valor numérico. Los operadores
aritméticos normales son:
Operador Nombre Ejemplo Descripción
+ Suma 5+6 Suma dos números
- Substracción 7-9 Resta dos números
* Multiplicación 6*3 Multiplica dos números
/ División 4/8 Divide dos números
% Módulo: el resto Devuelve el resto de

después de la dividir ambos números,
7%2
división en este ejemplo el
resultado es 1
++ Incremento. Suma 1 al contenido de

a++
una variable.
-- Decremento. a-- Resta 1 al contenido de
119
una variable.
- Invierte el signo Invierte el signo de un

-a
de un operando. operando.


<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( a * b);
document.write(a / b);
a++;
document.write(a);
b--;
document.write(b);
</script>
</body>
</html>
Operadores de comparación
120
Un operador de la comparación compara sus operando y devuelve un valor

lógico basado en si la comparación es verdad o no. Los operando pueden ser
numéricos o cadenas.
Operador Descripción
== " 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

comparación realizaban 'una conversión de tipos' si era necesario. Es decir, si
un operando era una cadena y el otro era un valor numérico, JavaScript
121
realizaba la conversión de la cadena a numérico antes de realizar la

comparación.
JavaScript 1.2 no realizaba 'conversiones de tipo', por eso si dos operadores

eran de tipos distintos no se realizaba la comparación.
Finalmente, en las últimas versiones de JavaScript se añaden los operadores

de 'comparación estricta', los cuales realizarán la comparación si los dos
operandos son del mismo tipo.

<html>
<head>
</head>
<body>
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 Lógicos
122
Los operadores Lógicos se utilizan para combinar múltiples comparaciones en una

expresión condicional. Un operador lógico toma dos operandos cada uno de los
cuales es un valor true o false y devuelve un valor true o false.
&& " Y " Devuelve true si ambos operadores son true.
|| " O " Devuelve true si uno de los operadores es true.
! "No" Devuelve true si la negación del operando es true.

<html>
<head>
</head>
<body>
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

comparación. Adicionalmente, usted puede concatenar cadenas usando el
operador +
123

<html>
<head>
</head>
<body>
Nombre = "Jose"
document.write( "Hola " + Nombre +"." );
</script>
</body>
</html>
Operadores de Asignación
El operador de asignación '=' le permite asignar un valor a una variable.
= Asigna el valor del operando de la derecha a la

variable de la izquierda.
Ejemplo: inttotal=100;
+= Añade 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 &

(también |=) operando de la derecha) al operando de la izquierda

<html>
<head>
</head>
<body>
124
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 difícil clasificarlos en una categoría en particular.

Estos operadores se resumen a continuación.
(condición) ? Asigna un valor especificado a una variable si la

trueVal : falseVal condición es true, por otra parte asigna un valor
alternativo si la condición es false.
New El operador new crea una instancia de un objeto.
This La palabra clave 'this' se refiere al objeto actual.
, El operador ',' evalúa 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 expresión que será

evaluada sin devolver ningún valor.
Typeof Devuelve el tipo de dato de un operando.
2.12.8 Objetos
125
Una primera clasificación del modelo de objetos lo dividiría en dos grandes

grupos. Por una parte, tendríamos los objetos directamente relacionados con
el navegador y las posibilidades de programación HTML (denominados,
genéricamente, objetos del navegador) y por otra parte un conjunto de
objetos relacionados con la estructura del lenguaje, llamados genéricamente
objetos del lenguaje.
El Objeto String
Este objeto nos permite hacer diversas manipulaciones con las cadenas, para
que trabajar con ellas sea más 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 numérico que nos indica la longitud en caracteres de la

cadena dada.
 prototype. Nos permite asignar nuevas propiedades al objeto String.
Métodos
 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 carácter situado en la posición 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
un identificador válido de color entre comillas. Algunos de estos

identificadores son "red", "blue", "yellow", "purple", "darkgray", "olive",
"salmon", "black", "white", ...
 fontsize(tamaño). Cambia el tamaño con el que se muestra la cadena. Los

tamaños válidos son de 1 (más pequeño) a 7 (más grande).
indexOf(cadena_buscada,indice) Devuelve la posición de la primera
ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la
posición dada por 'indice'. Este último argumento es opcional y, si se omite,
la busqueda comienza por el primer carácter de la cadena.
 italics(). Muestra la cadena en cursiva.
 lastIndexOf(cadena_buscada,indice). Devuelve la posición de la última

ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la
posición dada por 'indice', y buscando hacia atrás. Este último argumento
es opcional y, si se omite, la busqueda comienza por el último carácter de
la cadena.
 link(URL). Convierte la cadena en un vínculo asignando al atributo HREF el

valor de URL.
 small(). Muestra la cadena con una fuente pequeña.
 split(separador). Parte la cadena en un array de caracteres. Si el carácter

separador no se encuentra, devuelve un array con un sólo 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 subíndice.
 substring(primer_Indice,segundo_Indice). Devuelve la subcadena que

comienza en la posición 'primer_Indice + 1' y que finaliza en la posición
'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
'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 superíndice.
 toLowerCase(). Devuelve la cadena en minúsculas.
 toUpperCase(). Devuelve la cadena en minúsculas.

<HTML>
<HEAD>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">

</script>
</BODY>
</HTML>
El Objeto Array
Este objeto nos va a dar la facilidad de construir arrays cuyos elementos

pueden contener cualquier tipo básico, y cuya longitud se modificará de forma
dinámica siempre que añadamos 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 notación
a[i], donde i variará entre 0 y N-1, siendo N el número de elementos que le
pasamos al constructor.
129
También 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, además, 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

número de elementos del array (y habrá que asignarles valores
posteriormente), y si ponemos más de uno, será la forma de inicializar el array
con tantos elementos como argumentos reciba el constructor.
Podríamos poner como mención especial de esto lo siguiente. Las

inicializaciones que vemos a continuación:
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 inicialización 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,
¿cómo creamos un array bidimensional? (un array bidimensional es una
construcción bastante frecuente). Creando un array con las filas deseadas y,
después, 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
y para referenciar al elemento que ocupa la posición (i,j), escribiremos a[i][j];
Propiedades
 length. Esta propiedad nos dice en cada momento la longitud del array, es
decir, cuántos elementos tiene.
 prototype. Nos permite asignar nuevas propiedades al objeto String.
Métodos
 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 lexicográfico.

<HTML>
<HEAD>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
El Objeto Math
Este objeto se utiliza para poder realizar cálculos en nuestros scripts. Tiene la
peculiaridad de que sus propiedades no pueden modificarse, sólo consultarse.
Estas propiedades son constantes matemáticas de uso frecuente en algunas
tareas, por ello es lógico que sólo pueda consultarse su valor pero no
modificarlo.
Propiedades
 E. Número '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
 LOG10E. Logaritmo en base 10 de e.
 PI. Número PI.
 SQRT1_2. Raíz cuadrada de 1/2.
 SQRT2. Raíz cuadrada de 2.
Métodos
 abs(numero). Función valor absoluto.
 acos(numero). Función arcocoseno. Devuelve un valor cuyas unidades son

radianes o NaN. 'numero' debe pertenecer al rango [-1,1], en otro caso
devuelve NaN.
 asin(numero). Función arcoseno. Devuelve un valor cuyas unidades son

radianes o NaN. 'numero' debe pertenecer al rango [-1,1], en otro caso
devuelve NaN.
 atan(numero). Función 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 máximo de 'x' e 'y'.
133
 min(x,y). Devuelve el mínimo de 'x' e 'y'.
 pow(base,exp). Devuelve el valor baseexp.
 random(). Devuelve un número pseudoaleatorio entre 0 y 1.
 round(numero). Redondea 'numero' al entero más cercano.
 sin(numero). Devuelve el seno de 'numero' (que debe estar en radianes) o

NaN.
 sqrt(numero). Devuelve la raíz cuadrada de número.
 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 varía entre el 0 y el 11 (es decir, el mes 0 es Enero, el mes 1 es
Febrero, y así sucesivamente), los días de la semana de Domingo a Sábado
vienen dados por un entero cuyo rango varía entre 0 y 6 (el día 0 es el
Domingo, el día 1 es el Lunes, ...), los años se ponen tal cual, y las horas se
especifican con el formato HH:MM:SS.
Podemos crear un objeto Date vacío, o podemos crealo dándole 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 dándole un
valor, tenemos estas posibilidades:
var Mi_Fecha = new Date(año, mes);
var Mi_Fecha = new Date(año, mes, día);
var Mi_Fecha = new Date(año, mes, día, horas);
var Mi_Fecha = new Date(año, mes, día, horas, minutos);
134
var Mi_Fecha = new Date(año, mes, día, horas, minutos, segundos);
En día pondremos un número del 1 al máximo de días del mes que toque.
Todos los valores que tenemos que pasar al constructor son enteros.
Pasamos a continuación a estudiar los métodos de este objeto.
Métodos
* getDate(). Devuelve el día del mes actual como un entero entre 1 y 31.
* getDay(). Devuelve el día de la semana actual como un entero entre 0 y 6.
* getHours(). Devuelve la hora del día 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 año 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 año actual como un entero.
* setDate(día_mes). Pone el día del mes actual en el objeto Date que

estemos usando.
* setDay(día_semana). Pone el día de la semana actual en el objeto Date

que estemos usando.
* setHours(horas). Pone la hora del día 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 año actual en el objeto Date que

estemos usando.
135
* 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(año). Pone el año 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 número con el que JS trabaja. Podemos
asignar a una variable un número, 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 algún valor al constructor, la variable se inicializará con el
valor 0.
136
Propiedades
* MAX_VALUE. Valor máximo que se puede manejar con un tipo numérico
* MIN_VALUE. Valor mínimo que se puede manejar con un tipo numérico
* NaN. Representación de un dato que no es un número
* NEGATIVE_INFINITY. Representación del valor a partir del cual hay

desbordamiento negativo (underflow)
* POSITIVE_INFINITY. Representación 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.
Jerarquía
Con esta entrega comienza la descripción de las propiedades y los métodos

de los objetos del navegador. No es mi intención hacer una descripción
exhaustiva de todas y cada una de las propiedades y métodos, objeto por
objeto, con todo detalle. Mi intención es hacer una descripción más o menos
detallada de las propiedades y métodos que tienen más posibilidad de ser
usados. Es decir, que si me dejo alguna propiedad y/o método por comentar,
siempre podeis buscarla los manuales de referencia de los respectivos
navegadores.
En este capítulo vamos a estudiar la jerarquía que presentan los objetos del
navegador, atendiendo a una relación "contenedor - contenido" que se da
entre estos objetos. De forma esquemática, esta jerarquía 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
* 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
- plugin <EMBED SRC="...">
+ frame <FRAME>
* navigator
Según esta jerarquía, 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 notación '.' también 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 mayoría de los casos podemos ignorar la referencia a la ventana actual

(window), pero será necesaria esta referencia cuando estemos utilizando
múltiples ventanas, o cuando usemos frames. Cuando estemos usando un
único frame, podemos pues ignorar explícitamente la referencia al objeto
window, ya que JS asumirá que la referencia es de la ventana actual.
También podemos utilizar la notación de array para referirnos a algún 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 página HTML.
El objeto window
Se trata del objeto más alto en la jerarquía del navegador (navigator es un

objeto independiente de todos en la jerarquía), pues todos los componentes
de una página web están situados dentro de una ventana. El objeto window
139
hace referencia a la ventana actual. Veamos a continuación sus propiedades

y sus métodos.
Propiedades
* closed. Válida 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 según se definen en el documento HTML.
* history. Se trata de un array que representa las URLS visitadas por la

ventana (están almacenadas en su historial).
* length. Variable que nos indica cuántos frames tiene la ventana actual.
* location. Cadena con la URL de la barra de dirección.
* 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 método open() que veremos cuando estudiemos los
métodos.
* 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
Métodos
* alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo
* 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 método

setInterval(), también del objeto window). A partir de NS 4, IE 4.
* clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver

el método setTimeout(), también del objeto window).
* close(). Cierra el objeto window actual.
* confirm(mensaje). Muestra un cuadro de diálogo 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 ratón sobre el objeto window actual. A partir de
NS 3, IE 4.
* moveBy(x,y). Mueve el objeto window actual el número 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 parámetro en una ventana de nombre 'nombre'. Si esta ventana no
existe, abrirá una ventana nueva en la que mostrará el contenido con las
características especificadas. Las características 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

localización o no.
141
o directories = [yes|no|1|0]. Nos dice si la nueva ventana tendrá botones

de dirección 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

menús 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 tamaño (con el ratón) 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 diálogo

que contiene una caja de texto en la cual podremos escribir una respuesta a
lo que nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es
opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro de
diálogo. El método retorna una cadena de caracteres con la respuesta
introducida.
142
* 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 número 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 expresión especificada después

de que hayan pasado el número 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 expresión especificada después

Devuelve un valor que puede ser usado como identificativo por
clearTimeout(). A partir de NS4, IE4.
Me dejo en el tintero otras propiedades y métodos 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 explicación remito
como ejercicio al lector interesado en saber más sobre el objeto window.
<HTML>
<HEAD>

</script>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
144
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 métodos del objeto window.
Propiedades
* closed. Válida 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 según se definen en el documento HTML.
* history. Se trata de un array que representa las URLS visitadas por la

ventana (están almacenadas en su historial).
* length. Variable que nos indica cuántos frames tiene la ventana actual.
* location. Cadena con la URL de la barra de dirección.
* 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 método open() que veremos cuando estudiemos los
métodos.
* parent. Referencia al objeto window que contiene el frameset.
* self. Es un nombre alternativo del window actual.
145
* 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.
Métodos
* alert(mensaje). Muestra el mensaje 'mensaje' en un cuadro de diálogo
* 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 método

setInterval(), también del objeto window). A partir de NS 4, IE 4.
* clearTimeout(nombre). Cancela el intervalo referenciado por 'nombre' (ver

el método setTimeout(), también del objeto window).
* confirm(mensaje). Muestra un cuadro de diálogo 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 ratón sobre el objeto window actual. A partir de
NS 3, IE 4.
* open(URL,nombre,caracteristicas). Abre la URL que le pasemos como

primer parámetro en una ventana de nombre 'nombre'. Si esta ventana no
existe, abrirá una ventana nueva en la que mostrará el contenido con las
características especificadas. Las características que podemos elegir para la
ventana que queramos abrir son las siguientes:
* prompt(mensaje,respuesta_por_defecto). Muestra un cuadro de diálogo

que contiene una caja de texto en la cual podremos escribir una respuesta a
lo que nos pregunte en 'mensaje'. El parámetro 'respuesta_por_defecto' es
opcional, y mostrará la respuesta por defecto indicada al abrirse el cuadro de
diálogo. El método retorna una cadena de caracteres con la respuesta
introducida.
146
* 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 número 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 expresión especificada después

Devuelve un valor que puede ser usado como identificativo por clearInterval().
A partir de NS4, IE4.
* setTimeout(expresion,tiempo). Evalua la expresión especificada después

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 cómo se pueden

cambiar propiedades de un frame en otro.
<HTML>
<HEAD>
</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
</frameset>
</frameset>
</HTML>
Ejecutar ejemplo Ver código
ejem09a.html
<HTML>
<HEAD>

</script>
</HEAD>
148
<BODY>

</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 código
ejem09b.html
<HTML>
<HEAD>
149
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
El objeto location
Este objeto contiene la URL actual así como algunos datos de interés
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 número del puerto,
dentro de la URL.
* hostname. Cadena que contiene el nombre de dominio del servidor (o la

dirección 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
* port. Cadena que contiene el número 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 información pasada en una llamada a un

script, dentro de la URL.
Métodos
* 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.
<HTML>
<HEAD>
</HEAD>
<BODY>

</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 atrás 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 número de entradas del historial (i.e.,

cuántas direcciones han sido visitadas).
* previous. Cadena que contiene la URL completa de la anterior entrada en

el historial.
Métodos
* 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
* 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 posición 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 información relativa al navegador que esté

utilizando el usuario.
Propiedades
* appCodeName. Cadena que contiene el nombre del código del cliente.
* appName. Cadena que contiene el nombre del cliente.
* appVersion. Cadena que contiene información sobre la versión del cliente.
* language. Cadena de dos caracteres que contiene información sobre el

idioma de la versión 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 petición HTTP. Contiene la información de las propiedades
appCodeName y appVersion.
Métodos
* javaEnabled(). Devuelve true si el cliente permite la utilización de Java, en

caso contrario, devuelve false.
153
<HTML>
<HEAD>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
154
El objeto document
El objeto document es el que tiene el contenido de toda la página que se está

visualizando. Esto incluye el texto, imágenes, enlaces, formularios, ... Gracias
a este objeto vamos a poder añadir dinámicamente contenido a la página, o
hacer cambios, según 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 métodos, y serán tratados en el siguiente
capítulo.
* images. Array con todas las imágenes del documento
* lastModified. Es una cadena con la fecha de la última modificación del

documento
* linkColor. Propiedad que almacena el color de los enlaces
* links. Es un array con los enlaces externos
155
* 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 título del documento actual
* vlinkColor. Propiedad en la que se guarda el color de los enlaces visitados
Métodos
* 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 además lo finaliza con un salto

de línea
<HTML>
<HEAD>

</script>
</HEAD>
<BODY>

</script>
</BODY>
</HTML>
157
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 parámetro TARGET
* hash. Es una cadena con el nombre del enlace, dentro de la URL
* host. Es una cadena con el nombre del servidor y número de puerto,

dentro de la URL
* hostname. Es una cadena con el nombre de dominio del servidor (o la

dirección 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 número 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 información pasada en una llamada a

un script, dentro de la URL
<HTML>
<HEAD>
</HEAD>
<BODY>
158
<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>
</BODY>
</HTML>
El objeto anchor
Este objeto engloba todas las propiedades que tienen los enlaces internos al
documento actual.
Propiedades
159
* name. Nombre del ancla.
* target. Es una cadena que tiene el nombre de la ventana o del frame

especificado en el parámetro TARGET
<HTML>
<HEAD>
</HEAD>
<BODY>
<a name="arriba" target="_top">Inicio</a><br><br>

</script>
<a href="#arriba">Subir</a>
</BODY>
</HTML>
El objeto image
160
Gracias a este objeto (disponible a partir de la versión 3 de Netscape, aunque

Microsoft lo adoptó en la versión 4 de su navegador) vamos a poder
manipular las imágenes del documento, pudiendo conseguir efectos como el
conocido rollover (cambio de imágenes al pasar el ratón sobre la imagen).
Propiedades
* border. Contiene el valor del parámetro '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 parámetro 'height' de la imagen.
* hspace. Contiene el valor del parámetro 'hspace' de la imagen.
* lowsrc. Contiene el valor del parámetro 'lowsrc' de la imagen.
* name. Contiene el valor del parámetro 'name' de la imagen.
* src. Contiene el valor del parámetro 'src' de la imagen.
* vspace. Contiene el valor del parámetro 'vspace' de la imagen.
* width. Contiene el valor del parámetro 'width' de la imagen.
<HTML>
<HEAD>
</HEAD>

</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
<a href="javascript:mitadancho()">Mitad ancho</a><br>
<a href="javascript:mitadalto()">Mitad Alto</a><br>
</BODY>
</HTML>
Formularios
En este capítulo finalizamos el estudio de los objetos del navegador viendo

cómo 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, ahorrándole la faena de tener que verificar la corrección
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 parámetro ACTION del
form, es decir, la dirección en la que los datos del formulario serán
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 selección, la caja de texto será elements[0], el checkbox será
elements[1] y la lista de selección será elements[2].
* encoding. Es una cadena que tiene la codificación mime especificada en

el parámetro ENCTYPE del form.
163
* method. Es una cadena que tiene el nombre del método con el que se va
a recibir/procesar la información del formulario (GET/POST).
Métodos
* reset(). Resetea el formulario: tiene el mismo efecto que si pulsáramos un

botón de tipo RESET dispuesto en el form.
* submit(). Envía el formulario: tiene el mismo efecto que si pulsáramos un

botón de tipo SUBMIT dispuesto en el form.
Vistas ahora las propiedades y métodos 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.

Además, 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 parámetro NAME.
* value. Es una cadena que contiene el valor del parámetro VALUE.
* maxlength. Número máximo de caracteres que puede contener el campo

de texto.
Métodos
* blur(). Pierde el foco del ratón sobre el objeto especificado.
* focus(). Obtiene el foco del ratón sobre el objeto especificado.
* select(). Selecciona el texto dentro del objeto dado.
164

<HTML>
<HEAD>
</HEAD>

</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
El objeto button
Tenemos tres tipos de botones: un botón genérico, 'button', que no tiene

acción asignada, y dos botones específicos, 'submit' y 'reset'. Estos dos
últimos sí que tienen una acción asignada al ser pulsados: el primero envía el
formulario y el segundo limpia los valores del formulario.
Propiedades
Métodos
* click(). Realiza la acción de pulsado del botón
<HTML>
<HEAD>
</HEAD>

166
</script>
<BODY>

method="GET">
Un boton: <input type="button" name="Boton1" value="El boton 1"

OnClick="Mostrar(this);"><br><br>

OnClick="Mostrar(this);"><br><br>

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
Métodos
* click(). Realiza la acción de pulsado del botón
167
<HTML>
<HEAD>
</HEAD>

</script>
<BODY>

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
<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 sólo nos permiten elegir una
de entre todas las que hay. Están pensados para posibilidades mútuamente
excluyentes (no se puede ser a la vez mayor de 18 años y menor de 18 años,
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 numérico que nos dice el número de opciones dentro de un

grupo de elementos radio.
Hay que recordar que para agrupar elementos de tipo radio, todos ellos deben
tener el mismo valor en NAME.
Métodos
* click(). Realiza la acción de pulsado del botón.

<HTML>
<HEAD>
</HEAD>
169

</script>
<BODY>
method="GET">
Edad:<br>
<input type="radio" name="edad" value="<18"> Menor de 18 años.<br>
<input type="radio" name="edad" value=">18 y <60" checked> Entre 18 y 60
años.<br>
<input type="radio" name="edad" value=">60"> Mayor de 60 años.<br>
</form>
</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 numérico que nos indica cuántas opciones tiene la lista
* name. Es una cadena que contiene el valor del parámetro NAME
170
* 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 opción está

seleccionada por defecto.
o index. Valor numérico que nos da la posición de la opción dentro de la

lista.
o length. Valor numérico que nos dice cuántas opciones tiene la lista.
o options. Cadena con todo el código HTML de la lista.
o selected. Valor booleano que nos dice si la opción está actualmente

seleccionada o no.
o text. Cadena con el texto mostrado en la lista de una opción concreta.
o value. Es una cadena que contiene el valor del parámetro VALUE de

la opción concreta de la lista.
* selectedIndex. Valor numérico que nos dice cuál de todas las opciones
disponibles está actualmente seleccionada.
<HTML>
<HEAD>
</HEAD>

</script>
<BODY>
method="GET">
Edad:<br>
<select name="edad">
<option value="<18" SELECTED>Menor de 18 años</option>
<option value=">18 y <60">Entre 18 y 60 años</option>
<option value=">60">Mayor de 60 años</option>
</select>
</form>
</BODY>
</HTML>
El objeto hidden
Gracias a este objeto podemos almacenar información extra en el formulario
de forma completamente transparente para el usuario, pues no se verá en
ningún 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
172
2.13 Ajax
Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y

XML), es una técnica 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
comunicación asíncrona con el servidor en segundo plano. De esta forma es
posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo
que significa aumentar la interactividad, velocidad y usabilidad en las
aplicaciones.
Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales

se requieren al servidor y se cargan en segundo plano sin interferir con la
visualización ni el comportamiento de la página. JavaScript es el lenguaje
interpretado (scripting language) en el que normalmente se efectúan 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 asíncrono esté
formateado en XML.
Ajax es una técnica válida para múltiples plataformas y utilizable en muchos

sistemas operativos y navegadores dados que está basado en estándares
abiertos como JavaScript y Document Object Model (DOM).
2.14.1Introducción 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 página.
Posiblemente todos los lectores ya conozcan lo que es Ajax, una tecnología

que mezcla Javascript y XML para crear peticiones asíncronas al servidor. En
un artículo de DesarrolloWeb.com explicamos con más detalle lo que es Ajax.
173
Para trabajar con Ajax tenemos que saber programar con Javascript y utilizar
una serie de métodos complejos que dificultan bastante el desarrollo de las
páginas web. Pero por suerte, existen sistemas como Xajax que nos permiten
abstraernos de las complicaciones del desarrollo de páginas 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 sección Javascript a fondo. Como digo, casi no hacen falta
conocimientos Javascript para operar con Xajax, pero necesitaremos unas
nociones básicas.
Por otra parte, tenemos una sección dedicada por completo a Ajax, que
también nos puede servir para trabajar con Ajax sin utilizar ningún framework.
En DesarrolloWeb.com ya hemos publicado en diversos artículos qué es

Xajax y como trabajar con el framework y PHP, en los que hemos visto una
serie de ejemplos prácticos que nos pueden ayudar. Está todo en el manual
Trabajo con Ajax y PHP utilizando Xajax. Pero se hacía importante esta
introducción previa para dar una serie de notas y referencias que ayudasen a
los lectores a seguir los ejemplos presentados en este manual.
Básicamente 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 todavía están desarrollando, mejorando y presentando nuevas
versiones.
La página de inicio de este proyecto es http://xajax-project.org/
En el momento de escribir este texto, en la página 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
xajax 0.2.5 (Estable)
Las dos primeras versiones son versiones Beta, como se puede ver en el
nombre de las releases, la tercera versión, aunque es menos nueva, es la
única que tienen publicada como estable, es decir, la única que podemos
utilizar en nuestras aplicaciones en producción con la confianza que está libre
de errores.
Por eso, nosotros en los artículos que venimos publicando en

DesarrolloWeb.com, a menos que se especifique lo contrario, estamos
utilizando la versión xajax 0.2.5.
Dejo aquí un link para descarga de la versión de Xajax 0.2.5. Esta versión la
podríamos descargar desde la propia página de Xajax, pero pongo este link
por si acaso eliminan los archivos de esta versión y los queréis descargar
para realizar los ejemplos de este manual en vuestros sistemas.
Actualizado: Hemos publicado un artículo sobre cómo actualizar tus scripts

PHP de Xajax 0.2 a Xajax 0.5
Si queremos utilizar las versiones más 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 más modernas, como el método
$xajax->processRequests(), que en versiones más modernas se llama $xajax-
>processRequest() y el método $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 podrán
comprobarlo en pocos minutos y hacer ejemplos o programas con Ajax,
fácilmente y casi sin más conocimientos que los que ya tienen.
175
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. También viene
con SQLiteManager PHPMyAdmin para que administre sus más fácilmente
sus bases de datos.
WampServer se instala automáticamente (mediante un instalador), y su uso

es muy intuitivo. Usted será capaz de afinar su servidor sin siquiera tocar los
archivos de configuración.
WampServer es la única solución que te permitirá tener tu propio servidor de

producción. Una vez WampServer está instalado, usted tiene la posibilidad de
añadir el mayor número de Apache, MySQL y PHP como las emisiones que
desee.
Funcionalidades
WampServer tiene funcionalidades que lo hacen muy completo y fácil de

usar. Con un click izquierdo sobre el icono de WampServer, usted será capaz
de:
* Gestionar sus servicios de Apache y MySQL,
* Cambiar de línea / fuera de línea (dar acceso a todos o sólo local)
* Instalar y cambiar de Apache, MySQL y PHP emisiones
* Gestión de la configuración de sus servidores
* Acceder a sus registros
* Acceder a sus archivos de configuración
* Crear alias
Con un clic derecho:
* WampServer cambiar el idioma del menú
* Acceder a la página principal
176
Para la instalación de WampServer lo único que tenemos que hacer es hacer

doble clic en el archivo descargado y siga las instrucciones. Todo es
automático. 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 intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del
acrónimo de X (para cualquiera de los diferentes sistemas operativos),
Apache, MySQL, PHP, Perl. El programa está liberado bajo la licencia GNU y
actúa como un servidor Web libre, fácil de usar y capaz de interpretar páginas
dinámicas. Actualmente XAMPP esta disponible para Microsoft Windows,
GNU/Linux, Solaris, y MacOS X.
2.17 COMPARACIÓN: XAMPP Y WAMP
Las diferencias están orientadas más a la manera trabajar con ambos que en
el fondo, porque ambos incluyen PHP, Apache y MySQL, y estoy orientando la
comparación 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 más
adelante.
Las diferencias y semejanzas más 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 característica muy útil para ver la seguridad de tus
proyectos una vez estén online.
177
♦ La manera de acceder a las configuraciones específicas de PHP o

MySQL, sin usar ‘phpmyadmin’ es bastante árida, pero con WAMP puedes
acceder a una variedad importante de estos archivos a través del un menú al
que se accede haciendo clic en el icono del área de notificación (para
Windows). Estos archivos incluyen la configuración de PHP, MySQL…
♦ XAMPP incluye herramientas extra para realizar una variada cantidad de

servicios incluidos en el paquete básico. Éstas son:
 Webalizer: genera logs de análisis sobre acceso y uso de una

determinada página: visitas, países de procedencia de los visitantes…
Las estadísticas generadas pueden ser representadas de diferentes
maneras en gráficos, pudiendo configurarlo para medir días, meses o años.
 Conmutador PHP: modifica automáticamente la versión 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

están reflejadas las aplicaciones que están corriendo en ese momento. Estas
aplicaciones son: Apache, MySQL, FileZilla, y Mercury Mail. Con WAMP no
178
queda más remedio que ir navegando por el menú de su icono de la barra de

tareas para saber qué servicios están funcionando, lo cual es muy incómodo.
♦ El interfaz para crear bases de datos y usuarios, así como sus permisos son
idénticos en ambos. Ambos incluyen ‘phpmyadmin’
(http://localhost/phpmyadmin/), la herramienta para manejar la administración
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 mínimo conocimiento de las aplicaciones que
utilizan, permiten publicar páginas-web desde el propio ordenador.
XAMPP es un acrónimo, sus siglas significan:
 X: para cualquier sistema operativo.
 A: Apache, es un servidor HTTP en software libre para cualquier

plataforma. Tiene entre sus características bases de datos de autenticación
y negociado de contenido o mensajes de error altamente configurables.
 M: MySQL, es un sistema de gestión de base de datos relacional,

multihilo y multiusuario.
179
 P: PHP, es un lenguaje de programación interpretado, para crear webs

dinámicas. Su gran versatilidad radica en que puede ser embebido dentro
de código HTML.
 P: Perl, es un lenguaje de programación que toma características 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 gestión de la base de datos MySQL (crear, eliminar y alterar tablas,
borrar, editar y añadir campos, ejecutar cualquier sentencia SQL en general) a
través de páginas web consecutivas, que proporcionan una interfaz de
usuario muy orientativa si no estás 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 cómo utilizar WAMP en una LAN, de manera que
todos los usuarios puedan acceder a los sitios que estemos probando.
Configuración
1. Nos aseguramos de tener las carpetas creadas para los logs.

Minimamente, si vamos a tener un sitio “test” dentro de www, deberíamos
tener las siguientes carpetas creadas en WAMP:
C:/wamp/www/logs
C:/wamp/www/test/logs
180
2. Editamos el archivo httpd.conf ubicado en algo así como:

C:\wamp\bin\apache\apache2.2.8\conf
En dicho archivo, descomentamos la línea:
“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
deberíamos 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”, deberíamos tener
al menos lo siguiente:
127.0.0.1 localhost
127.0.0.1 test
5. En las otras máquinas, abrimos también el archivo hosts, y deberemos
tener lo siguiente:
192.168.1.107 test
181
Donde 192.168.1.107 es la dirección IP del servidor (la averiguamos yendo al

cmd, ipconfig).
6. Hecho esto, reiniciar el WAMP, y apretar el botón de “Put Online” (de lo

contrario tendremos un error 403 cuando queramos acceder de las otras
máquinas 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

configuración del router.
Configuración del Router
1. Acceder a la pantalla del Router
2. Buscar la configuración para los “Virtual Servers”
3. Agregar una configuración HTTP donde el protocolo es TCP, el puerto

privado es 80 (o en el que tengamos corriendo wamp), el público es 80, y el
servidor es la dirección IP del servidor.
2.19.1 Características y Requisitos
XAMPP solamente requiere descargar y ejecutar un archivo zip, tar, o exe,

con unas pequeñas 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. También incluye otros
módulos como OpenSSL y phpMyAdmin. Para instalar XAMPP se requiere
solamente una pequeña fracción del tiempo necesario para descargar y
configurar los programas por separado.
2.19.2 Aplicaciones
Oficialmente, los diseñadores de XAMPP sólo pretendían su uso como una

herramienta de desarrollo, para permitir a los diseñadores de sitios webs y
programadores testear su trabajo en sus propios ordenadores sin ningún
acceso a Internet. En la práctica, sin embargo, XAMPP es utilizado
actualmente para servidor de sitios Web y, con algunas modificaciones, es
182
generalmente lo suficientemente seguro para serlo. Con el paquete se incluye

una herramienta especial para proteger fácilmente las partes más
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 ningún
contratiempo, en qué consiste este proyecto, es que en el momento de estar
realizando el proyecto; se tenía 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 Aceptación
 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 diálogo Agregar nuevo proyecto Con este método,

puede elegir el lenguaje de programación del proyecto de prueba, que
puede ser importante para codificar pruebas, como en el caso de pruebas
unitarias o de pruebas Web codificadas.
183
CAPITULO III: DESARROLLO DE LA PROPUESTA
3.1 Metodología a utilizar
Hoy en día hay distintas metodologías que te ayudan a realizar eficientemente

un proyecto, y cada una de ellas se enfocan de llevar un método de
lineamientos por los cuales uno se debe guiar, para la realización del proyecto
de ANÁLISIS, DISEÑO E IMPLEMENTACIÓN DE UN WEB SITE PARA
CONTROLAR LA GESTIÓN ACADÉMICA DEL COLEGIO NACIONAL MIXTO
“DR. JOSÉ MARÍA VELASCO IBARRA” DEL CANTÓN EL GUABO, hemos
escogido la metodología que esta de acorde con nuestra necesidades y nos
va ayudar a la realización del mismo la metodología eXtreme Programming o
más conocida como Metodología XP.
3.1.1 Metodología XP
La programación extrema o eXtreme Programming (XP) es un enfoque de la

ingeniería de software formulado por Kent Beck, autor del primer libro sobre la
materia, Extreme Programming Explained: Embrace Change (1999). Es el más
destacado de los procesos ágiles de desarrollo de software. Al igual que éstos,
la programación extrema se diferencia de las metodologías tradicionales
principalmente en que pone más é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 aproximación
mejor y más realista que intentar definir todos los requisitos al comienzo del
proyecto e invertir esfuerzos después en controlar los cambios en los
requisitos.
Se puede considerar la programación extrema como la adopción de las

mejores metodologías de desarrollo de acuerdo a lo que se pretende llevar a
cabo con el proyecto, y aplicarlo de manera dinámica durante el ciclo de vida
del software.
184
3.1.1.1 Valores
Los Valores originales de la programación extrema son: simplicidad,

comunicación, retroalimentación (feedback) y coraje. Un quinto valor, respeto,
fue añadido en la segunda edición de Extreme Programming Explained. Los
cinco valores se detallan a continuación:
3.1.1.2 Simplicidad:
La simplicidad es la base de la programación extrema. Se simplifica el diseño

para agilizar el desarrollo y facilitar el mantenimiento. Un diseño complejo del
código junto a sucesivas modificaciones por parte de diferentes
desarrolladores hace que la complejidad aumente exponencialmente. Para
mantener la simplicidad es necesaria la refactorización del código, ésta es la
manera de mantener el código simple a medida que crece. También se aplica
la simplicidad en la documentación, de esta manera el código debe
comentarse en su justa medida, intentando eso sí que el código esté
autodocumentado. Para ello se deben elegir adecuadamente los nombres de
las variables, métodos y clases. Los nombres largos no decrementan la
eficiencia del código ni el tiempo de desarrollo gracias a las herramientas de
autocompletado y refactorización que existen actualmente. Aplicando la
simplicidad junto con la autoría colectiva del código y la programación por
parejas se asegura que cuanto más grande se haga el proyecto, todo el
equipo conocerá más y mejor el sistema completo.
3.1.1.3 Comunicación:
La comunicación se realiza de diferentes formas. Para los programadores el

código comunica mejor cuanto más simple sea. Si el código es complejo hay
que esforzarse para hacerlo inteligible. El código autodocumentado es más
fiable que los comentarios ya que éstos últimos pronto quedan desfasados con
el código a medida que es modificado. Debe comentarse sólo aquello que no
va a variar, por ejemplo el objetivo de una clase o la funcionalidad de un
método. Las pruebas unitarias son otra forma de comunicación ya que
describen el diseño de las clases y los métodos al mostrar ejemplos concretos
de cómo utilizar su funcionalidad. Los programadores se comunican
185
constantemente gracias a la programación por parejas. La comunicación con

el cliente es fluida ya que el cliente forma parte del equipo de desarrollo. El
cliente decide qué características tienen prioridad y siempre debe estar
disponible para solucionar dudas.
3.1.1.4 Retroalimentación (feedback):
Al estar el cliente integrado en el proyecto, su opinión 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 más importante. Considérense 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
código también es una fuente de retroalimentación gracias a las herramientas
de desarrollo. Por ejemplo, las pruebas unitarias informan sobre el estado de
salud del código. Ejecutar las pruebas unitarias frecuentemente permite
descubrir fallos debidos a cambios recientes en el código.
3.1.1.5 Coraje o valentía:
Los puntos anteriores parecen tener sentido común, entonces, ¿por qué
coraje? Para los gerentes la programación en parejas puede ser difícil 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 código. Hay
que ser valiente para confiar en que la programación por parejas beneficia la
calidad del código sin repercutir negativamente en la productividad. La
simplicidad es uno de los principios más difíciles de adoptar. Se requiere
coraje para implementar las características que el cliente quiere ahora sin caer
en la tentación de optar por un enfoque más 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 retroalimentación para saber si va en la dirección correcta. La forma de
186
construir marcos de trabajo es mediante la refactorización del código 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 compañeros. Los miembros respetan su trabajo porque siempre están
luchando por la alta calidad en el producto y buscando el diseño óptimo o más
eficiente para la solución a través de la refactorización del código. Los
miembros del equipo respetan el trabajo del resto no haciendo menos a otros,
si no orientándolos a realizarlo mejor, obteniendo como resultado una mejor
autoestima en el equipo y elevando el ritmo de producción en el equipo.
3.1.2 Características fundamentales
Las características fundamentales del método son:
 Desarrollo iterativo e incremental: pequeñas mejoras, unas tras otras.
 Pruebas unitarias continuas, frecuentemente repetidas y automatizadas,

incluyendo pruebas de regresión. Se aconseja escribir el código de la
prueba antes de la codificación. Véase, 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.
 Programación 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 código escrito de esta manera -el código es revisado y
discutido mientras se escribe- es más importante que la posible pérdida de
productividad inmediata.
 Frecuente integración del equipo de programación con el cliente o

usuario. Se recomienda que un representante del cliente trabaje junto al
equipo de desarrollo.
187
 Corrección de todos los errores antes de añadir nueva funcionalidad.

Hacer entregas frecuentes.
 Refactorización del código, es decir, reescribir ciertas partes del código

para aumentar su legibilidad y mantenibilidad pero sin modificar su
comportamiento. Las pruebas han de garantizar que en la refactorización
no se ha introducido ningún fallo.
 Propiedad del código compartida: en vez de dividir la responsabilidad en

el desarrollo de cada módulo en grupos de trabajo distintos, este método
promueve el que todo el personal pueda corregir y extender cualquier parte
del proyecto. Las frecuentes pruebas de regresión garantizan que los
posibles errores serán detectados.
 Simplicidad en el código: es la mejor manera de que las cosas funcionen.

Cuando todo funcione se podrá añadir funcionalidad si es necesario. La
programación extrema apuesta que es más sencillo hacer algo simple y
tener un poco de trabajo extra para cambiarlo si se requiere, que realizar
algo complicado y quizás nunca utilizarlo.
La simplicidad y la comunicación son extraordinariamente complementarias.

Con más comunicación resulta más fácil identificar qué se debe y qué no se
debe hacer. Cuanto más simple es el sistema, menos tendrá que comunicar
sobre éste, lo que lleva a una comunicación más completa, especialmente si
se puede reducir el equipo de programadores.
3.1.3 Programación extrema (Pipeline)
Variación de la programación extrema clásica que consigue cuadriplicar la

eficacia de la misma.
3.1.3.1 Principios (Pipeline)
La programación extrema en pipeline se basa en la arquitectura Harvard de los

procesadores, de tal manera que con un número n de escritorios remotos
donde n es igual al número de participantes en la programación del proyecto
se puede aumentar la eficiencia del trabajo hasta 4 veces, entiéndase que
188
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í podríamos definir el término eficiencia como e=x+
(n*nc-1) donde x es el tiempo de cada ciclo, n el número de escritorios
remotos o participantes, nc es el número de iteraciones del proyecto.
3.2 Planificación
3.2.1 Plan de Entregas
El proyecto está completamente organizado y planificado para su elaboración,

prueba y finalización
 Estado Inicial: El proyecto se comenzó con su debida planificación,

realizando todas las encuestas y pruebas de campo que se debían
realizar, luego se comenzó a diseñar, 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 planificación y organización de tareas nos

llevo a realizar el proyecto en la fecha establecida sin ningún
contratiempo.
3.2.2 Velocidad de Proyecto
El proyecto se lo realizo con un tiempo acorde con la planificación, se produjo

en un diagrama de Gantt, elaborado con el Microsoft Proyect , el cual nos dio
una idea de cuánto tiempo iba a tomar realizar el proyecto, realizando todas
las indicaciones de la elaboración y planificación de el tiempo, la aplicación se
la realizo a una velocidad de acuerdo con el cronograma establecido.
Sin ninguna extensión o alargue, todos los problemas que se nos

presentaron estuvieron controlados, y le dimos su respectiva solución la cual
se refleja en el tiempo que se entregara dicho trabajo.
189
3.2.3 Iteraciones
El proyecto de la aplicación web repetimos varias veces la estructura de la

base de datos, con el cual incluía reestructurar los enlaces de cada entidad
relacionada con otra, e incluso cambiar e ingresar nuevos elementos en
tablas que se modificaban.
También se nos presentaron varios momentos de reestructurar el site web
 Para evitar los numerosos cambios que se podrían presentar en la

realización de nuestra aplicación, dividimos la aplicación en partes que se
podrían modificar por separado pero que a su vez cambiarían toda la
estructura y diseño de la página.
 En programación, utilizamos varios elementos de programación para

controlar las instrucciones desde un mismo archivo y que este archivo
represente el cambio a toda la página web, como un ejemplo utilizamos los
comandos javascript y las estructuras css.
3.3 Diseño
3.3.1 Funcionalidad mínima
El propósito de la aplicación es dar una función de Gestión Académica para el

manejo de matriculación y de ingreso de notas para dar mayor facilidad a los
administradores de dicho sistema.
Para los estudiantes será más provechoso conocer sus notas y poder realizar
su respectiva matricula, con la facilidad que ofrece la página web por medio
del internet.
190
3.4 Desarrollo
 El sistema tiene su respectiva Base de Datos con la información de los

estudiantes, docentes etc., los cuales se llevaran un control
 El diseño es amigable y su aspecto es muy fácil de utilizar para todo tipo de
persona que lo utilice.
 La información concentrada en la BD local a través de la operación 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 prestación del
servicio.
 Capacidad de búsquedas y procesamiento.
 Garantizar disponibilidad de la información.
 Capacidad de escribir en dispositivos ópticos.
 Capacidad de exportar información a medios externos para su uso en
programas de terceros incluyendo interoperabilidad
 Almacenamiento de datos de estudiantes y resultados que permitan la
búsqueda
 Clasificados por los diversos criterios establecidos por el Instituto.
 Formatos de solicitud de pruebas disponibles para el Docente
 Se debe incluir la información de precio de cada prueba al inicio del
contrato o en su desarrollo.
Seguridad
 · Autenticación de usuarios para el uso del sistema.
 · Esquema de usuarios, perfiles y grupos para la administración del acceso
y los privilegios en la aplicación.
3.4.1 Integración
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
Además hemos trabajado con auto capacitación y con ayuda de nuestro

asesor el mismo que evaluó y rectifico cada uno de nuestros errores que se
originaban en la elaboración del proyecto.
192
3.5 Herramientas Utilizadas
REQUISITOS FUNCIONALES
Gestión de Documentación
- Historia del Colegio Nacional Mixto “Dr. José María Velasco Ibarra”
- Acta de Matriculas
- Nómina de Personal Administrativo
- Nómina de Profesores
- Nómina de Alumnos
- Institución y su ámbito.
- Áreas Administrativas
- Departamento de Psicología
- Canchas deportivas
- Bares
- Parques
- Áreas Verdes
GESTIÓN ACADÉMICA
- Profesores
- Estudiantes
- Usuarios
- Matricula
193
CONSULTAS
- Profesores
- Estudiantes
- Usuario
- Matricula
- Notas
Gestión de EVENTOS
- Quienes Somos
- Servicios
- Sistema
- Contáctenos
- Descargas
- Formulario de autenticación
REQUISITOS NO FUNCIONALES
 Compatibilidad
El sistema es compatible con los sistemas operativos:
Windows XP
Vista
194
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 periódicamente copias de seguridad del sistema por si en
algún 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.
 Identificación de usuarios
Se necesita cada vez que abrimos el programa que se identifique el

usuario con su contraseña correspondiente para asegurarnos que
ninguna persona ajena a la empresa entre en nuestra base de datos.
195
CAPITULO IV: EVALUACIÓN DE RESULTADOS

EVALUACIÓN DE EXPERTOS
ATRIBUTO DE CALIDAD BAJA CORRECTA ALTA EXCELENTE
Disponibilidad
Confidencialidad
Funcionalidad
Desempeño
Confiabilidad
Seguridad externa
Seguridad interna
Fiabilidad
Eficiencia
Mantenibilidad
Portabilidad
_____________________
Ing. Sist. Rossmery Samaniego Mg. Sc
EVALUACIÓN DE EXPERTOS
ATRIBUTO DE CALIDAD BAJA CORRECTA ALTA EXCELENTE
196
Disponibilidad
Confidencialidad
Funcionalidad
Desempeño
Confiabilidad
Seguridad externa
Seguridad interna
Fiabilidad
Eficiencia
Mantenibilidad
Portabilidad
___________________________
Ing. Sist. Jonathan Aguilar
ENCUESTAS
USUARIOS (SECRETARIA)
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
197
Diseño
Facilidad de manejo
Ayudas y documentación
Rendimiento del programa
Tipo de navegación que ofrece el programa
Tipo de interacción con el programa
Estructura del programa
Animaciones
Exploración
Herramientas
Gráficos
Interactividad
Contenidos
Funcionalidades
_____________________
Secretaria
USUARIOS (PROFESORES)
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
Diseño
Facilidad de manejo
Bases de Datos de alumnos
Versatilidad del programa
198
Animaciones
Exploración
Herramientas
Gráficos
Interactividad
Contenidos
Funcionalidades
_____________________
Prof.:
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
Diseño
Facilidad de manejo
Animaciones
Exploración
Herramientas
Gráficos
Interactividad
Contenidos
Funcionalidades
_____________________
199
Prof.:
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
Diseño
Facilidad de manejo
Animaciones
Exploración
Herramientas
Gráficos
Interactividad
Contenidos
Funcionalidades
_____________________
Prof.:
USUARIOS (ESTUDIANTES)
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
Facilidad de manejo para el alumno
Ayudas y documentación suministrada para el alumno
200
Interacción con el programa
Aspectos que desarrollan la creatividad del usuario
Aspectos motivadores del programa
Motivación e interés
Diseño
Contenidos
Funcionalidades
Usabilidad
Grado de entretenimiento
_____________________
Alumna:
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
201
Diseño
Contenidos
Funcionalidades
Usabilidad
_____________________
Alumna:
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
202
Diseño
Contenidos
Funcionalidades
Usabilidad
_____________________
Alumna:
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
Diseño
Contenidos
Funcionalidades
203
Usabilidad
_____________________
Alumna:
USUARIOS
BAJA
EXCELENTE
CORRECTA
ALTA
ATRIBUTO DE CALIDAD
Diseño
Contenidos
Funcionalidades
Usabilidad
204
_____________________
Alumna:
CONCLUSIONES
El proyecto realizado es un aporte importante para la institución educativa, ya que

le permite estar a nivel de otras instituciones educativas que cuentan con su sitio
oficial en la Red de Internet.
Además su sistema de matrículas es innovador y fácil de manejo para llevar a

cabo el proceso de matriculación de los alumnos de esta institución tan
prestigiosa y que forma parte de la historia del Cantón El Guabo y el país.
205
RECOMENDACIONES
Es preciso que esta institución establezca estos tipos de servicios para ganar más
prestigio a nivel educativo y profesional, el mismo que es un paso importante
dentro de la comunidad guabeña y del país.
Además obtener información acerca de los avances de la tecnología y sus

aplicaciones las mismas que les permitirán automatizar todos los procesos que se
llevan en la institución para que no quede relegada frente a otras instituciones que
tiene su mismo fin.
206
BIBLIOGRAFÍA
 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 colección 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
 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
GLOSARIO
 Administrador: La persona que supervisa y controla el correcto

funcionamiento de un sistema informático.
 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 corrupción 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).
 Alfanumérico: Conjunto de letras, números y otros símbolos, como signos

de puntuación o símbolos matemáticos. 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 lógicos
destinados a conseguir el resultado idóneo. Se emplea en programación.
 Análisis: Distintos procesos dentro del desarrollo de una aplicación.

Generalmente se suele dividir en tres tipos distintos: Análisis de
Oportunidad o Previo, donde tan sólo se globaliza el problema y se estudia
viabilidad. Análisis Funcional, donde se estudian los objetivos a conseguir
bajo un prisma informático y los pasar a dar a nivel de datos, tiempos de
procesos, etc. Análisis Orgánico, que define exactamente la aplicación
basándose en el análisis 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.
 Aplicación: Programa o conjuntos de programas diseñados para la

realización de una tarea concreta, como puede ser una aplicación
comercial, contable, etc.
209
 Archivo: Se suele usar como sinónimo de fichero. En el mundo de los

compresores, es frecuente hacer una diferenciación, diciendo que varios
ficheros originales se comprimen y se empaquetan en un archivo
comprimido.
 Arranque: Se suele usar este nombre para referirse a la acción de poner

un ordenador en funcionamiento. Se suele distinguir entre "arranque en
frío" (cuando el ordenador estaba apagado) y "arranque en caliente"
(cuando el ordenador estaba encendido y se "reinicializa" sin llegar a
apagarlo físicamente). En inglés es frecuente llamarlo "boot", y distinguir
entre "cold boot" (frío) y "warm boot" (caliente) o "reset".
 Atributos: Referido a ficheros, determinadas cualidades que se crean en

éstos dependiendo de si pueden ser leídos, modificados, ocultos, etc.
 AVI: Formato de video comprimido para ordenador, el estándar

en Windows.
 BackUp: Copia de seguridad.
 Bajar: Es cada vez más frecuente oír frases como "Me he bajado de la red
una actualización para mi antivirus". La palabra "bajar" (o "descargar", en
inglés "download") indica una transferencia de información desde un
ordenador remoto (por ejemplo, un ordenador que haga de anfitrión en
Internet o en otra red) hasta nuestro ordenador personal. La palabra
"subir" (en inglés "upload") indica el envío de información de nuestro
ordenador a un ordenador anfitrión en la red.
 Base de datos: Aplicación informática para manejar información en forma

de "fichas": clientes, artículos, películas, etc. La mayoría de las bases de
datos actuales permiten hacer listados, consultas, crear pantallas de
visualización de datos, controlar el acceso de los usuarios, etc. También es
cada vez más frecuente que las consultas se puedan hacer en un lenguaje
estándar conocido como SQL.
 Base de Datos Orientada a Objetos: Las BDOO almacenan y manipulan

información que puede ser representada por objetos. Es la evolución de las
Bases de Datos para soportar el análisis, diseño y programación Orientado
a Objetos.
 BIOS: Sistema de entrada/salida básica (Basic Input Output System).

Suele tratarse de uno o varios chips de memoria ROM (habitualmente
EPROMs) que contienen las rutinas básicas de entrada y salida, los
210
primeros pasos que debe dar un ordenador al encenderse, la configuración

básica del sistema, etc.
 Blog: Cuaderno de bitácora. 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 mínima de información que puede almacenar y manejar

un ordenador, equivalente a un 0 o un 1.
 Bitmap: (o mapa de bits). Un tipo de imágenes para ordenador, en las que

se almacena información sobre los puntos que las componen y el color de
cada punto (al contrario que en las imágenes vectoriales). Esto supone que
al ampliar la imagen se pierde definición, se ven "puntos gordos".
 BMP: Es la Extensión que corresponde a un tipo de fichero gráfico de

mapa de bits (el estándar en Windows): BitMaP.
 Bps: Bits por segundo: es la unidad en que se mide la velocidad de

transferencia efectiva de un módem o de una conexión serie.
 Browser: Visualizador de páginas en Internet, como pueden ser Netscape

o I. Explorer.
 Buffer: memoria intermedia para el almacenamiento de datos temporales

en la comunicación entre un ordenador y un dispositivo externo (p.ej., una
impresora). Cuando es un programa informático el que hace la misión de
almacenamiento intermedio para los datos que se envían 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: página en Internet que permite buscar información a través de

ella, bien sea tecleando nosotros mismos una serie de palabras clave, o
bien empleando el sistema de menús que la página incorpora. Cada día
ofrecen más servicios, entre los que se incluyen noticias, chats, etc., y se
suelen llamar "portales".
 Byte: Es la unidad básica de información. En la práctica, se puede

considerar que un byte es la cantidad de espacio necesaria para
almacenar una letra. Tiene múltiplos como
el Kilobyte, Megabyte, Gigabyte y Terabyte. Internamente, corresponde a
8 bits.
211
 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
tendríamos campos como su nombre, su dirección postal, su teléfono, etc.
 Carpeta: (en inglés, "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

inglés Key) al valor de es capaz de distinguir un registro de otro de forma
fiable, como podría ser el DNI o el Pasaporte para el caso de una persona
(el nombre no sería 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 disposición.
 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
dirigirán al anterior para obtener la información.
 Código: Es la sucesión 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 serán las
entradas reales de datos.
 COM: Es la extensión que corresponde a un tipo de fichero ejecutable bajo

MS-DOS. // COM: Nombre que reciben bajo DOS los puertos serie (para
conectar módem o ratón, por ejemplo). Lo habitual es que un ordenador
tenga dos puertos de este tipo, que se designarían COM1 y COM2.
 Coma (fija y flotante): La expresión "coma fija" (en inglés fixed point) se
usa para referirse a números con una cantidad de cifras decimales
constantes. Estos números son más sencillos de manipular (pero menos
útiles en la práctica) que los números en "coma flotante" (en inglés,
Floating Point), con un número variable de cifras decimales.
 Compatibilidad: Es un término que se utiliza tanto en hardware como en

software, y haciendo una definición casera diría que es la característica de
cualquier ente informático 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
común, de ellos que se utilice a bajo nivel un lenguaje ensamblador que
abarca a todos ellos.
212
 Compatible: Se dice que un ordenador es compatible con otro cuando

puede utilizar todo el software diseñado para aquel (a veces incluso todo o
parte del hardware). Hoy en día es frecuente hablar de ordenadores
"compatibles" refiriéndose a ordenadores "compatibles PC", con
procesadores de la gama x86.
 Compilador: Aplicación informática que se usa para crear programas en

un cierto lenguaje de programación. Convierte los programas creados en
un lenguaje de programación al lenguaje interno del ordenador (código
máquina). En los compiladores, todo el programa original (fuente) se
convierte a código máquina en bloque, y el programa resultante (programa
ejecutable) se puede en otro ordenador usar sin necesidad de recurrir otra
vez al compilador. En los intérpretes, el programa fuente se convierte a
código máquina, línea por línea, justo en el momento en que se pone a
funcionar; no se crea ningún ejecutable, y por eso es necesario distribuir el
programa fuente pero también el intérprete que es capaz de entenderlo.
 Corel: Conocido fabricante de software, autor de paquetes como Corel

Draw y que adquirió y desarrolla también otros como Ventura Publisher y
WordPerfect. Recientemente ha lanzado al mercado su propia distribución
de Linux.
 Correo electrónico: También 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 envío de ficheros,
imágenes, etc. aparte del texto.
 DBMS: DataBase Management System, Sistema de utilización de Bases

de Datos.
 Directorio: apartado de un sistema de almacenamiento (diskette, disco

duro, CdRom, etc.), destinado a contener ficheros (o, a su vez, más
directorios, que entonces se suelen llamar "subdirectorios").
 DirectX: Interfaz de programación bajo Windows, que permite acceder

directamente al hardware (por ejemplo, tarjetas gráficas y de sonido). Es
empleado para programar juegos en este sistema.
 Disco duro: Es un dispositivo de almacenamiento, que nació como

evolución del diskette. Tiene una capacidad mucho mayor (hoy en día es
habitual que pasen de los 2.5Gb) y es mucho más rápido, pero no está
diseñado para ser llevado de un sitio a otro, sino para permanecer dentro
del ordenador (salvo algunas pocas excepciones, que sí son portables).
213
 DLL: Biblioteca de enlace dinámico (Dynamic Link Library), que contiene

funciones que pueden ser utilizadas desde los programas. Es un tipo de
fichero muy frecuente en Windows.
 DOC: Extensión 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 según la casa que lo desarrolle: MS-DOS (Microsoft), DrDos
(Digital Research), PcDos (IBM), Novell Dos (Novell), etc.
 DRAM: Memoria RAM dinámica.
 Ejecutable: Un programa que se puede "ejecutar" o usar "por sí solo", sin

que haga falta tener una cierta aplicación informática desde la que
manejarlo (para más detalles, ver Compilador).
 Ejecutar: En informática, la palabra "ejecutar" (en inglés "run", que algunos

autores traducen literalmente por "correr") equivale a poner
un programa en funcionamiento.
 E-mail: correo electrónico (electronic mail). Mensajes (normalmente

privados) enviados a través de una red de ordenadores.
 Enlace: Link. Refiriéndonos a Internet y páginas Web es un unión entre

varios documentos dentro de un mismo servidor, o con mayor frecuencia, la
posibilidad de acceder mediante la pulsación de una palabra o frase,
generalmente resaltada y subrayada, a otra página situada en un
ordenador distinto y ubicado en cualquier lugar del mundo, ya que en el
momento de la creación de ese enlace se le ha asignado la dirección o
URL a la que ha de dirigirse.
 Evento: Término propio de la POO. Cuando a un objeto se le aplica una

acción para él previsible, genera un evento. Este puede ir o no
acompañado de un código externo al objeto y dependiente del
programador. Por ejemplo, cuando el sistema nos da un error y nos
pregunta si continuamos, lo hace a través de un botón, que es un objeto
sobre el que hay que presionar. La pulsación del ratón sobre el mismo
producirá la activación del evento PulsoClick (he inventado el nombre). De
manera que si esa acción se produce, el programa estará preparado para
ejecutar el código de respuesta.
 Extensión: En sistemas operativos como MsDos y Windows, es frecuente

que el nombre de un fichero esté formado por dos partes, separadas por un
214
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
extensión, que suele indicar el tipo de información que guarda ese fichero.
 Gb: Abreviatura de GigaByte.
 GIF: Es la Extensión que corresponde a un tipo de fichero gráfico de mapa

de bits (Graphics Interchange Format).
 GigaByte: Múltiplo del byte: un gigabyte son 1.024 MegaBytes, cerca de

1.000 millones de bytes.
 GUI: Interfaz gráfica 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: Extensión bajo MsDos de los ficheros de tipo HTML.
 HTML: HyperText Markup Language: el lenguaje de descripción de páginas

habitual en Internet.
 HTTP: El protocolo usado en las páginas del WWW (HyperText Transfer

Protocol).
 Información: Elemento base del concepto informática, susceptible de ser

tratado por los ordenadores. A causa de la proliferación de los medios
computacionales y su universalización, se introduce el término "Sociedad
de la información" refiriéndose a la apertura del conocimiento a todas las
clases sociales.
 Intel: Conocido fabricante de procesadores, creador de la gama X86.
 Interfaz: Conexión de un ordenador con el exterior, o entre dos

dispositivos.
 Internet: Red de ordenadores a nivel mundial. Ofrece distintos servicios,

como el envío y recepción de correo electrónico (e-mail), la posibilidad de
ver información en las páginas Web, de participar en foros de discusión
215
(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 válidos. Esto se puede hacer a través de rangos, o de distintas
operaciones (ver Restricciones de Dominio) y entre ellas la que
probablemente sea más 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 (programación): Conceptualmente, una interfaz no es más 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 podría implementarse de
muchas formas diferentes. No me importa cómo se implemente físicamente
la funcionalidad, pero deberá atenerse a estas especificaciones. El usuario
de la interfaz puede escribir su código basándose en las especificaciones,
sin preocuparse de posibles cambios en la implementación de éstas.
 Interfaz de usuario: Es la manera de funcionar el ordenador de cara al

usuario, o mejor, la relación de ambos, es decir, cómo responde a los
sucesos o acciones.
 Java: Lenguaje de programación orientado a objetos, basado en C++, cada

día más extendido, especialmente a través de Internet. Pretende ser un
lenguaje totalmente portable entre distintos ordenadores, gracias a que no
se compila código, sino a un lenguaje intermedio que luego es interpretado
por la "máquina virtual Java", que sí es específica 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 páginas Web, basado en la sintaxis de

Java.
 JPEG, JPG: Es la Extensión que corresponde a un tipo de fichero gráfico

de mapa. Es un formato comprimido, que, al contrario que la mayoría,
pierde definición al comprimir: se puede indicar la cantidad de compresión
216
que se desea, pero cuanto más comprimamos, mayor pérdida de calidad

tiene la imagen. Para fotografías digitalizadas con 640x480 puntos o más,
un nivel de compresión entre 15 y 25 suele ser suficiente para reducir
mucho el espacio ocupado por la imagen, pero a la vez que la pérdida de
calidad no sea muy apreciable. (Joint Picture Expert Group).
 Lenguaje de Programación: Son secuencias de instrucciones, más 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 programación capaces de trabajar con objetos en un
sentido amplio, es decir, un lenguaje puede manejar y basarse en objetos
porque los pueden crear según un patrón o porque ya estén 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 polémica, puesto que dos tipos de
lenguaje cumplen con esas características, los denominados *puros* y los
*híbridos*. Los puros rompen con la programación anterior y cualquier cosa
a utilizar es un objeto. Los híbridos soportan igual los objetos o métodos o
clases, pero además se traen las estructuras de programación
tradicionales. Entre los primeros se encuentran Smalltalk o Eiffel, entre los
segundos están los más utilizados y conocidos en este momento, como C+
+, Delphi (basado en Object Pascal), Java, etc.
 Linux: Versión de libre distribución (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 contraseña (password).
 Memoria: Tanto en ordenadores como en periféricos, lugar donde se

almacenan datos o programas mientras se están utilizando.
 Metodologías de programación: Distintos sistemas de desarrollos de

programas de manera que estudie optimizar al máximo la forma de escribir
y de interpretar el ordenador los mismos. Son clásicos Bernier o Jackson
con metodologías modulares y/o estructuradas, completamente vigentes y
217
base de la más extendida en estos momentos que es la Programación

Orientada a Objetos.
 Microsoft: Casa desarrolladora de software, creadora de sistemas

operativos como MsDos y Windows, así como de aplicaciones informáticas
de todo tipo.
 MySQL: Es la base de datos de fuentes abiertas probablemente más

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 más utilizado, por muchas y buenas razones, para usar en Internet
compaginando especialmente con PHP y Perl.
 Navegador: Aplicación informática emplear para "navegar" por la red. Los

más conocidos son el Internet Explorer de Microsoft y el Netscape
Navigator (parte de Netscape Communicator).
 Navegar: Nombre que se da al hecho de buscar información en Internet,

empleando la WWW y sus enlaces para "saltar" de una página a otra.
 Objeto: Término base de la Programación Orientada a Objetos. En pura

teoría podríamos pensar en lo que el hombre conoce, una mesa, un
mechero, son cosas que nuestra inteligencia sabe comprender y explicar
porque tienen unas características comunes, a pesar de que las diferencien
muchas otras, pues hay formas y modelos muy dispares. A nivel
informático es similar, un objeto es una parte de código con unas
peculiaridades, de manera que podemos crear el objeto "subMesa", que
contendrá las básicas de su ancestro pero modificadas, es decir, todo lo
que puede hacer "Mesa" con su código, llamadas a funciones, punteros,
etc., mas las particularidades que proporcionemos a este "hijo" suyo.
 Operadores booleanos: También se denominan "lógicos". El término

booleano se debe a que devuelven valores de este tipo, tan sólo trabajan
con Cierto y Falso. Los más importantes son: AND. Devuelve cierto cuando
todos los operadores lo son. OR. Devuelve cierto cuando al menos uno o
más de uno lo es. XOR. (OR exclusivo) Devuelve cierto cuando sólo lo es
uno de los operadores. NOT. Devuelve cierto cuando el operador es falso.
218
 Página 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.
 Páginas Web: Forma de denominar a las hojas creadas con html que se
manejan dentro del entorno WWW.
 Password: Clave de acceso o contraseña necesario para acceder a un

determinado sistema.
 Pentium: Procesador de 32 bits realizado por Intel, evolución

del 80486 (ycompatible con él y con toda la familia x86), con velocidades a
partir de 60 MHz (hasta 233 Mhz en su versión "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 más frecuentes en multimedia, y tenía
velocidades de 133 a 233 MHz; el Pentium Pro es una versión orientada al
mercado más 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 más
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. Página de inicio personal. Esta era la

denominación del primer PHP realizado por Rasmus Lerdorf. En este
momento estamos en la versión 4 de este lenguaje de programación
destinado a la Red, y que una vez interpretado por el servidor web genera
código HTML.
 Portable: se dice que un programa informático (o una aplicación, o un

sistema operativo) es portable cuando se puede hacer funcionar fácilmente
en otro sistema distinto a aquel en el que fue diseñado.
 Portal: página en Internet diseñada para servir como punto de partida en

nuestra navegación. Suelen incoporar distintos servicios, como un
directorio de páginas por distintos temas, un buscador de información,
noticias, chats, etc.
 Pipeline: Tecnología 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
 Programa: un conjunto de órdenes para un ordenador. Un programa puede

estar formado por apenas unas pocas órdenes (por ejemplo, uno que sume
dos números) o por varios miles de órdenes (como un programa de gestión
completo para una empresa). Cuando se trata de un programa ya
terminado que se compra, se suele hablar de una Aplicación Informática.
Los programas se deben escribir en un cierto lenguaje de programación.
Los lenguajes de programación que se acercan más al lenguaje humano
que al del ordenador reciben el nombre de "lenguajes de alto nivel" (como
Pascal); los que se acercan más al ordenador son los de "bajo nivel"
(como el ensamblador). Lo más habitual es crear los programas en un
lenguaje de alto nivel (llamado "fuente") y después 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
también 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 serán 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 podría considerar como un programa (normalmente de gran
tamaño) que toma el control del ordenador y que nos proporciona las
utilidades básicas. Para usos más avanzados, necesitaremos
instalar aplicaciones informáticas como bases de datos, hojas de cálculo,
220
programas a medida, etc. Ejemplos de sistemas operativos podrían 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 estándar 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 podrían estar almacenados en una misma tabla).
 URL: Dirección de una cierta página de información dentro

de Internet(Universal Resources Locator).
 Variables: En programación, una parte de la memoria que es representada

por unos caracteres a discrección del programador, y que tiene un
contenido cambiante, generalmente por las operaciones realizadas en el
programa.
 Windows: Nombre genérico de toda una familia de software diseñado por

Microsoft. Las primeras versiones (hasta la 3.11) eran un entorno gráfico
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. También existen versiones
"especiales" de Windows, como Windows NT, diseñado para entornos
profesionales, o Windows CE, para ordenadores portátiles de muy
reducidas dimensiones.
 WWW: World Wide Web: posiblemente, el servicio más conocido

de Internet: una serie de páginas de información, con texto, imágenes (a
veces, incluso otras posibilidades, como sonido o secuencias de video), y
enlazadas a su vez con otras páginas que tengan información relacionada
con ellas.
221
ANEXOS
COLEGIO NACIONAL MIXTO “DR. JOSE MARIA VELASCO IBARRA”
BIBLIOTECA
SECRETARIA
222
ADMINISTRACIÓN
PROGRAMACION DEL SITIO WEB
223
PANTALLAS DEL PORTAL Y SISTEMA DE MATRICULA
224
La pantalla de presentación del sitio web posee el diseño ambientado a los usuarios tanto
alumnos como profesores, el mismo que les permite observar cada uno de los menús de
navegación de acuerdo a sus necesidades.
Posee un entorno amigable que detalla cada una de las actividades que se desarrollan
dentro de la institución, varias opciones como: hacer comentarios, descargar archivos,
enlaces con sitios web y ayuda.
Además podrá observar en la pantalla galerías de fotos, formulario de inicio de sesión

para usuarios registrados, caso contrario posee un link para acceder al formulario de
registro de usuarios, un reproductor de música para que su visita a nuestra web sea
amena, su respectivo calendario y una calculadora para cálculos rápidos.
Y como en toda institución no puede faltar su foro para poder comentar o sugerir a cerca
de los programas que se desarrollen dentro de la institución.
FORMULARIO DE REGISTRO DE USUARIO
225
El registro de usuario le permite ingresar sus datos y obtener su propia cuenta si estos
fueron correctamente ingresados hacer clic sobre el botón REGISTRAR, el mismo que
después le pedirá guardar los datos y usted tendrá que oprimir el botón ACEPTAR y si no
está de acuerdo o desea modificar alguno de los datos recientemente ingresados oprima
el botón CANCELAR, lo que le permite acceder a nuestras páginas 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 están validados de acuerdo al dato que se
sugiere que ingrese el usuario.
226
Ejemplo.:
En el campo nombre y apellido solo ingresaremos caracteres alfabéticos, caso contrario

obtendremos un aviso de alerta: DATO INCORRECTO.
En el campo E-mail y Nombre de Usuario: nos permite ingresar datos alfabéticos,

numéricos y símbolos o caracteres especiales.
En el campo Teléfono: Solo nos permite ingresar datos numéricos.
El campo contraseña y confirmar contraseña debe ser igual, caso contrario la validación
del sistema le arrojara su respectiva alerta.
INICIO DE SESIÓN
227
Una vez registrados podemos iniciar sesión y acceder al sistema como invitado.
FORMULARIO DE INGRESO DE USUARIO
Ingrese su nombre de cuenta y su respectiva contraseña, además le da una opción para

recobrar su contraseña 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, además 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
Botón Inicio: Nos permite regresar a la página inicial del portal web.
Botón Quienes Somos: Nos despliega un submenú que nos permitirá conocer más a
cerca de la institución, tanto sus objetivos, sus orígenes, actualidad educativa y su
personal laboral.
Botón Servicios: Despliega un submenú en el que nos permite ingresar a la información

de promociones, eventos educativos, programas educativos e información de direcciones
de correo de la institución.
Botón Matriculas: Este link nos permite acceder a las inscripciones a un submenú donde
el estudiante podrá realizar su matriculación 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 contraseña.
En el segundo accede directamente al formulario.
FORMULARIO DE REGISTRO - ESTUDIANTE
229
En el formulario está compuesto por varios campos que son necesarios ser llenadas en
su totalidad, ya que esta información es primordial la institución, este formulario esta
valido al igual que los registros de usuario lo cual indica que la información que usted
ingrese debe ser concreta y lógica a lo que se solicita.
230
Este es un formulario correctamente llenado, cumpliendo cada uno de los requisitos

establecidos, hecho una vez el ingreso de la información le aparecerá un cuadro de
dialogo el mismo que le pedirá guardar los datos si está de acuerdo oprima el botón
ACEPTAR, caso contrario desea hacer una modificación inmediata CANCELAR.
Una de las restricciones se da aquí en Ver Matriculas por Internet ya que solo el
administrador tiene acceso a esta información.
231
Otra es Matricular desde el Colegio, ya que el administrador es el unico que tiene

privilegios para realizar este proceso desde la institucion.
232

Tesis Lista

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tesis Lista

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD TECNICA DE MACHALA

La aplicación web servirá como una herramienta indispensable para el usuario

Analizar, diseñar e implementar un Web Site para controlar la Gestión Académica

 Utilizar nuevas herramientas para el diseño y desarrollo del Sitio Web.

 Agilizar el ingreso de datos en el proceso de matriculación

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

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

 Realizar un proceso de descargas de material académico para que el

CAPITULO I: MARCO REFERENCIAL

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

Actualmente en nuestra provincia la mayoría de las instituciones educativas no

La falta de conocimientos y asesoramiento sobre la utilización de estas

El estudio de estas aplicaciones aportara con mayor información acerca de los

A su vez nos permite incorporar nuevas herramientas tecnológicas como recursos

Para el desarrollo de nuestra investigación contamos con el acceso a información

Falta de información y promoción de la institución a nivel educativo; y lentitud en

 Carencia de un medio de promoción e información acerca de los servicios y

 Demora en el ingreso de datos en el proceso de matriculación de los

 En el proceso de matriculación los datos son ingresados incompletos, en el

 Deficiencia en la organización e ingreso de notas de los estudiantes por

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

 No cuentan con material académico automatizado para que el estudiante

¿Cómo se proyectan y se dan a conocer a nivel institucional, además como se

 ¿Están capacitados los empleados de esta institución para el manejo de un

 ¿Está la persona encargada del manejo de matriculas en capacidad de

 ¿Tiene la comunidad guabeña un medio por el cual pueda obtener

 ¿Cómo analizan los usuarios la calidad de educación que recibirán sus

 ¿Está capacitada la mayoría de la comunidad guabeña para la navegación

 Dar a conocer a la ciudadanía en general los servicios y beneficios a

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

 Formularios con todos los campos necesarios y específicos para el

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

 Autenticación de estudiantes para consultar sus notas de cada materia.

 Los estudiantes utilizaran el Web Site como un medio de investigación.

 Consultas de notas de los estudiantes mediante tablas de consultas

 Elevar el nivel con respecto a la tecnología y el nivel de imagen ante la

 Sistema de matriculación eficaz y óptimo para el usuario encargado del

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

 Proceso factible para el ingreso, modificación o eliminación de notas

CAPITULO II: MARCO TEÓRICO

2.1 Antecedentes del Colegio

Formar integralmente al estudiante velasquino para asegurarle el ejercicio

Ser parte activa del proceso de transformación social y coadyuvar al educado

Nos centramos en administrar procesos de adquisición de conocimientos e

 Creamos disposición de aprendizaje usando la motivación estudiantil.

 Concertamos conocer y comprender impulsando un aprendizaje

 Preparamos conciencias empleando ciencias.

Instaurar la formación estudiantil como el proceso sistemático de prácticas y

2.1.5 Historia del Colegio

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

Al inicio del funcionamiento del colegio, era de carácter municipal, la

El plantel inicia sus labores en el año de 1970-1971 contando con un paralelo

Después de haber transcurrido 3 años de labores el Dr. Vinicio Sarmiento

segundo firmado por el presidente de la república, Gral. Guillermo Rodríguez

1974-1975 funciona el segundo ciclo del diversificado por resolución 908 el

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

El personal docente y administrativo que ayuda al desenvolvimiento del

Alumnos de la primera promoción: Aguilar Quezada Edgar Vicente, Alaña

1.976-1977 aumenta el número, profesores Manuel Busto, Holger Martínez,

1977-1.978 lleva 8 años de labores cuenta con 230 estudiantes, ingresan

En este año el Dr. Vinicio Sarmiento, el 15 de Agosto de 1977 se celebra una

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

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