You are on page 1of 108

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.

BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL DE CELAYA


INCORPORADO A LA SECRETARIA DE EDUCACIN DE
GUANAJUATO CLAVE. 11PCT0054WACUERDO No. 129

DESARROLLO DE PGINA WEB PARA BSQUEDA DE


UNIVERIDADES: EDUNET CELAYA.

TESINA PRESENTADA PARA OBTENER EL TTULO DE TCNICO


EN COMPUTACIN Y SISTEMAS ADMINISTRATIVOS

PRESENTA:
DIANA MARIEL RIVERA VALENZUELA

ASESOR:
ING.JORGE ALBERTO MARTNEZ VZQUEZ

CELAYA, GTO.

JULIO 2015

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

AGRADECIMIENTOS
Gracias a mis paps por querer una mejor educacin para m, por ser un ejemplo a
seguir, porque gracias a sus consejos y llamadas de atencin no dej de estudiar; le
agradezco a mi hermano y a mi hermana, por ayudarme siempre y no dejarme sola.
Gracias a mi tutor Jorge Alberto Martnez Vzquez, por ser constante conmigo,
porque gracias a l pude realizar este proyecto de tesis, por su sabidura, paciencia,
criterio, motivacin y buena disposicin.
Gracias a mis maestros y maestras del Instituto Tecnolgico de Superacin Integral
que siempre me dieron nimos de seguir adelante con mis estudios y jams dejarme
vencer;
Gracias a mis amigos y amigas del grupo, porque con las crticas de cada exposicin
me hicieron ser mejor y aparte que todos nos ayudamos entre s en cada fase;
Agradezco a todas y cada una de las personas que estuvieron en la etapa de la
preparatoria, aprend mucho de ellas y gracias a una persona especial que siempre
me dio nimos y me ayud a ser mejor. Gracias a todos en el Instituto Tecnolgico
de Superacin Integral.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

INTRODUCCIN................................................................................................................................... 1
OBJETIVOS ........................................................................................................................................... 2
JUSTIFICACION.................................................................................................................................... 3
CAPTULO 1: HISTORIA DEL INTERNET. ...................................................................................... 4
1.1

Los orgenes de Internet. ..................................................................................................... 5

1.2

La explosin del Internet. ..................................................................................................... 8

1.3

Universalizacin del Internet................................................................................................ 9

1.4

Funcionamiento de Internet. .............................................................................................. 10

1.4.1

Topologa de Internet. ................................................................................................. 10

1.5

Modelo Cliente/Servidor. .................................................................................................... 11

1.6

Protocolo de Comunicaciones TCP/IP. ............................................................................ 13

CAPTULO 2: WORLD WIDE WEB.................................................................................................. 17


2.1 World Wide Web. ...................................................................................................................... 18
2.2 Antiguas Herramientas de Bsqueda en Internet................................................................ 19
CAPTULO 3: NAVEGADORES. ...................................................................................................... 22
3.1 Definicin.................................................................................................................................... 23
3.2 Tipos de Navegadores. ............................................................................................................ 24
3.3 Tipos de Navegadores. ............................................................................................................ 25
3.3.1 Google Chrome.................................................................................................................. 25
3.3.2 Internet Explorer. ............................................................................................................... 28
3.3.3 Mozilla Firefox. ................................................................................................................... 30
3.3.4 Opera................................................................................................................................... 33
3.3.5 Safari. .................................................................................................................................. 35
3.3.6 Principales navegadores de internet. ............................................................................. 38
CAPTULO 4: HTML. .......................................................................................................................... 40
4.1 Definicin. .................................................................................................................................. 41
4.2 Estructura Bsica de HTML. ................................................................................................... 42
4.3 Comandos Bsicos de HTML. ................................................................................................ 44
CAPTULO 5: PHP. ............................................................................................................................. 58
5.1 Historia de PHP ......................................................................................................................... 59

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.
5.2 Definicin. .................................................................................................................................. 61
5.3 Funcionamiento de PHP. ......................................................................................................... 61
5.4 Alcances. .................................................................................................................................... 62
5.5 Estructura bsica de PHP. ...................................................................................................... 63
5.6 Tipos de datos en PHP. ........................................................................................................... 65
5.6.1 Declaracin de Variables. ................................................................................................ 69
5.7 Servidor Local. .......................................................................................................................... 70
CAPTULO 6: ENTORNO APPSERV. ............................................................................................. 72
6.1 Qu es AppServer? ................................................................................................................ 73
6.1.1 Servidor Apache. ............................................................................................................... 74
6.1.2 MySQL ................................................................................................................................ 75
6.1.3 PhpMyAdmin. ..................................................................................................................... 76
CAPTULO 7: CREACIN DE LA PGINA WEB. ......................................................................... 78
7.1 Creacin de la Base de Datos usuario en phpMyAdmin 2.10.3. ............................... 79
7.2 Creacin de una plantilla en Dreamweaver 8. ..................................................................... 82
7.3 Creacin de la ventana Nuevo_Usuario. .............................................................................. 83
7.4 Creacin de la ventana Entrada. ............................................................................................ 85
7.5 Creacin de la Ventana Envio. ............................................................................................... 88
7.6 Creacin del Panel del Control. .............................................................................................. 90

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

INTRODUCCIN

En esta era, la ciencia ha ido innovando de tal manera que su utilizacin ha llegado a
ser una parte esencial en la vida cotidiana, por eso es conveniente localizar
programas o pginas que sirvan de apoyo a las actividades diarias de cada habitante
en general.
El medio ms habitual para consulta y descarga de informacin; adems de la
resolucin de dudas es el internet, ya que por su accesibilidad, es el mtodo ms
frecuentado y empleado por los seres humanos.
Cualquier tipo de navegador contiene pginas web, donde encuentras informacin de
una forma rpida y eficaz; el nico problema es que a veces no obtienes fcilmente
lo que buscas o la informacin no es verdica. Un claro ejemplo es cuando
emprendes una bsqueda de instituciones y la mayora de las veces no te topas
alguna ventana educacional donde contenga toda la informacin que auxilie tu
bsqueda.
Para esto se desarroll una pgina web, que contendr los elementos principales de
informacin de universidades, as como, un control de usuarios donde por medio de
ste, entregue las noticias y las novedades al perfil; cabe destacar que llevar un test
vocacional para saber en qu rea te puedes especializar y que la bsqueda de
instituciones sea ms fcil.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

OBJETIVOS

Objetivo General:

Realizar una pgina web sobre variadas instituciones educativas nivel


superior, para obtener informacin ms fcilmente de cada una de ellas y
conforme al control de usuario mandar nueva informacin disponible al perfil
del mismo.

Objetivos Especficos:

Slo sern instituciones del municipio de Celaya.

Slo contendr nivel superior.

Separar en dos tipos de instituciones: privadas y gubernamentales, para una


mejor bsqueda.

Creacin de un control de usuario, que permitir mandar la informacin


actualizada al perfil.

sta tendr como fin ayudar a los alumnos de preparatoria, personas en


general y tambin a los padres de familia, para que perciban mejores opciones
formativas.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

JUSTIFICACION

La mayora de las personas, ya sean alumnos o padres de familia necesitamos el


asesoramiento sobre escuelas que estn al alcance del lugar donde se radique (en
este caso Celaya), pero sobretodo que contengan la informacin necesaria para que
pueda tomarse una mejor educacin ante la decisin ms importante en sus vidas;
es por eso que con la pgina web que est por desarrollarse ser ms fcil y eficaz
la bsqueda de informacin escolarizada, ya que la mayora de las personas usan el
internet como medio de indagacin y difusin.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

CAPTULO 1: HISTORIA DEL INTERNET.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

1.1 Los orgenes de Internet.

Internet, es una gran Red mundial de redes de ordenadores o computadores,


que se convirti en lo que es desde los aos noventa, en este momento es
cuando la internet deja de ser utilizada exclusivamente por la sociedad cientfica
y universitaria, y se convierte en todo un fenmeno social que trasciende ms
all de sus tipologas tecnolgicas.
El incremento desde entonces est siendo simplemente espectacular, adems
de sorprendente, ya que se han ido desarrollando rpidamente todo tipo de
usos y aplicaciones, de las cuales las de mayor relevancia son las comerciales.
Sus orgenes se encumbran a finales de los aos sesenta, que en plena Guerra
Fra y con el apoyo del Departamento de Defensa de los Estados Unidos, puso
en marcha una red experimental donde comunicaba los equipos de cmputo de
diversas universidades y centros de investigacin.
ste plan tena la intencin de crear una infraestructura de telecomunicaciones
ms fiable y fuerte que las que ya existan en ese momento, que sea capaz de
seguir funcionando ante situaciones diversas y extremas, como la cada de
varios de sus nodos en el caso de un ataque nuclear.
Naci as la red ARPHANET en 1969, precursora de la actual Internet. Esta red
comenz a expandirse por los Estados Unidos en la dcada de los setenta,
desarrollndose a nuevas universidades y centros de investigacin.
Para su expansin se vio favorecida que se tratase de una red descentralizada
y un tanto anrquica, a lo que se refiere es que no se encuentra en un solo
punto. sta caracterstica hizo ms fcil y en gran medida la inclusin de
nuevos nodos o sea que varios elementos coincidan en un mismo punto de
conexin en un mismo lugar.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

A mediados de los setenta la red ARPHANET se extendi por todo el mundo al


establecerse las primeras conexiones desde los Estados Unidos con Gran
Bretaa y Noruega. En 1983 la parte estrictamente militar se separ
convirtindose as en la red MILNET, momento en el cual ARPHANET dej de
estar controlada por el Departamento de Defensa de los Estados Unidos.
El hecho de que el software de los protocolos de comunicaciones que regan la
funcionalidad del ARPHANET fuera de dominio pblico, as como que la
estructura de la red fuera un tanto anrquica debido a su naturaleza, propiciaron
que muchas organizaciones que disponan los equipos de cmputo necesarios
pudieran conectarse a ella, de los cuales los ms fundamentales eran
universidades y grandes empresas tecnolgicas. As como por ejemplo, la
European Unix Network (Red Europea de Unix, EuNet), que se integra por
variadas organizaciones de los Pases Bajos como Dinamarca, Suecia y Gran
Bretaa, se conect a ARPHANET en 1982.
En 1986 la National Science Foundation (Fundacin Nacional para la Ciencia,
NSF)

de Estados Unidos empez a construir una red NSFNET para

interconectar varios centros de supercomputacin con enlaces de muy alta


capacidad. Esto aceler el desarrollo tecnolgico de la Red, mejorando as las
infraestructuras de telecomunicaciones. Otras significativas agencias de la
Administracin norteamericana, como la NASA, el Instituto Nacional de la Salud
o el Departamento de Energa, se anexaron a la Red, incorporando sus tan
variados e inmensos recursos informticos y de comunicaciones.
El incremento de la Red en la dcada de los ochenta fue exponencial, se
aumentaba cada vez ms rpido, pasando de 1,000 servidores conectados en
1984 a 10,000 en 1987 y alcanzando una cifra superior a los 100,000 en 1989.
En 1990 se extingui oficialmente como entidad la red ARPHANET y de ese
punto otras redes fueron tomando su relevo: la National Research and
Education Network (Red Nacional de la Investigacin y la Educacin, NREN) y,
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

ms recientemente, la very-High-SpeedBackbone Network Service (Servicio de


Red Troncal de muy alta velocidad, vBNS), que han constituido el ncleo de
Internet.
A partir de ese ao se conectaron a Internet redes de investigacin de diversos
pases de todo el mundo, especialmente en Europa, Latinoamrica, el Sudeste
Asitico y, por supuesto, Espaa, a travs de la Red Iris, depende del Consejo
Superior de Investigaciones Cientficas.
La NSF, que se refiere a la Fundacin Nacional para la Ciencia, retir las
restricciones al uso comercial de Internet en 1991, hecho que impuls an ms
su crecimiento, esto hizo que se propiciara la incorporacin de las redes
corporativas de las grandes empresas multinacionales, as como de las redes
de servicio on-line (en lnea), muy populares en los Estados Unidos de los
cuales destacan Compuserve, Amrica Online, Prodigy, etc. La Red alcanz el
milln de servidores conectados en 1992, los 2 millones en 1993 y los 3,8
millones en 1994.
Un hecho concluyente en la historia del Internet lo constituy la aparicin del
servicio World Wide Web (Red Informtica Mundial, WWW) en 1993,
desarrollado a finales de los aos ochenta en el laboratorio CERN (Centro
Europeo para las Investigaciones Nucleares) de Berna, Suiza.
El World Wide Web provoc un cambio contundente en la facilidad de uso de
las aplicaciones y el nacimiento de un nuevo medio que se ha denominado
hipermedia. Este medio est constituido por un conjunto de documentos que
contienen todo tipo de informacin en formato multimedia (texto, imgenes,
sonido,

animaciones)

que

incorporan

vnculos

(denominados

hiperenlaces), entre distintas partes de cada documento y entre distintos


documentos.
En 1995 la Administracin norteamericana elimin la contribucin a la NFSNET,
parte esencial de Internet. A partir de este momento la gestin y el
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

mantenimiento de la Red pas a mano de operadores de telecomunicaciones


como MCI y Sprint, que cobraban a sus clientes por sus servicios de conexin a
la Red. Ese mismo ao el nmero de servidores conectados super los 5
millones.
En la figura que se muestra a continuacin, se resume el proceso seguido
desde la aparicin del ARPHANET hasta llegar a la Internet que conocemos
hoy en da:
ARPHANET (1969)
(DARPA)

MILNET (1983)

NSFNET (1986)
(Universidades y centros de
investigacin en EE.UU.)

EARN (Universidades europeas)

Redes corporativas
transaccionales
(IBM, DEC, etc.)

Redes de servicios on-line


(Compuserve, AOL)

INTERNET
Figura1.1 La Evolucin del Internet. Fuente: Elaboracin propia.

1.2 La explosin del Internet.

A pesar de ser una red que fue puesta en marcha desde 1969, Internet no tuvo
amplia difusin hasta finales de los aos noventa. Durante sus primeros 25
aos de historia estuvo restringida en el mbito cientfico y universitario. Es a
partir de 1995 en Estados Unidos y de 1969 en Europa cuando se generaliza su
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

utilizacin para otros fines, primordialmente, para la comunicacin de los


ciudadanos recin convertidos en internautas (gracias a servicios populares
como el correo electrnico y el chat), para el desarrollo de aplicaciones
comerciales (a travs del Marketing digital y el comercio electrnico) y para la
difusin de todo tipo de informacin de forma rpida y electrnica.
En un corto periodo de tiempo, Internet se convierte en todo un fenmeno social
comenzando un crecimiento exponencial que le permite alcanzar casi 500
millones de usuarios conectados a finales del ao 2001, con las mayores tasas
de crecimiento en los medios de comunicacin y en los servicios de
telecomunicaciones.
Desde un punto de vista tcnico, la clave del xito del Internet se debe a la
definicin de una serie de protocolos estndares (que son conocidos como
reglas ya establecidas que se deben seguir siempre), que facilitan la
interconexin de distintos tipos de redes y sistemas informticos, consiguiendo
de este modo la interoperabilidad entre equipos de distintos fabricantes.
Nos podemos preguntar cules han sido las causas que han conseguido y
ayudado a la popularizacin de Internet, que han contribuido a su consolidacin
como todo un fenmeno social a fines el siglo XX y principios del siglo XXI.
Seguidamente se mencionan algunos factores que sin duda han tenido su
importancia para explicar este crecimiento de Internet.

1.3 Universalizacin del Internet.


En los prximos aos asistiremos, segn afirman los expertos, a una
universalizacin en el acceso a Internet, gracias a varios factores tales como:

Navegacin desde los equipos de televisin y desarrollo de la


televisin.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Electrodomsticos con conexin a Internet que pueden ser


controlados desde la propia Red y que ofrecern nuevos servicios a
sus usuarios: as, como por ejemplo, ya es posible realizar la compra
en un supermercado virtual, a travs de neveras que incorporan una
pantalla LCD con conexin a Internet, o programar y motorizar el
funcionamiento

de

lavadoras

lavavajillas

desde

equipos

conectados a Internet. Adems la conexin remonta a travs de


Internet con el fabricante desde estos electrodomsticos posibilitar
el

desarrollo

de

nuevos

servicios

de

teleasistencias

telemantenimiento y, en muchos casos, estos equipos podrn


actualizar y mejorar sus prestaciones descargando mdulos de
software desde el Website (Sitio Web) del fabricante.

Coche que ofrecen conexiones inalmbricas para solicitar servicios


de informacin, descargar planos de ciudades con informacin en
tiempo real del trfico o realizar la compra o reserva de algn
producto o servicio, tal como, entradas para un espectculo o
concierto, reservaciones a hoteles, etc.

Telfonos mviles que ya cuentan con tecnologa WAP (Protocolo de


Aplicaciones

Inalmbricas),

Telecomunicaciones

Mviles)

UMTS
y

(Sistema

PDAs

Universal

(Asistentes

de

Digitales

Personales), que facilitan el desarrollo de la Internet inalmbrica.

1.4 Funcionamiento de Internet.


1.4.1 Topologa de Internet.
Teniendo en cuenta el objetivo perseguido con el proyecto precursor de
Internet (crear un nuevo sistema de telecomunicaciones ms robusto), la red
ARPHANET adopta la configuracin de red en malla, donde cada nodo
(punto de conexin) est comunicado con los restantes, de tal modo que
existen varios caminos posibles para interconectar dos nodos de la red.
Todos los nodos desempean el mismo papel en el funcionamiento de red,
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

10

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

por lo que podemos considerarla como una Red de Telecomunicaciones


Distribuida.
Nodo A
Nodo F
Nodo B

Nodo E

Nodo C

Nodo D
Figura 1.2 Red en Malla. Fuente: www.eveliux.com.

En contraposicin con este planteamiento, otros sistemas adoptan una


configuracin jerrquica, en la que unos nodos desempean un papel clave para
el correcto funcionamiento del conjunto de la red (tal caso, de la red Telefnica),
caracterstica que les confiere una mayor vulnerabilidad. No obstante, la
configuracin jerrquica permite un mejor aprovechamiento de los recursos
disponibles, ya que minimiza el nmero de enlaces necesarios para interconectar
los nodos.

1.5 Modelo Cliente/Servidor.


En el funcionamiento de Internet se sigue el modelo Cliente/Servidor: en la
mquina des usuario que se conecta a Internet se ejecuta un programa que
acta de Cliente, solicitando una serie de operaciones y servicios a
ordenadores que se encuentran en la Red y que actan de Servidores. Las
aplicaciones de Internet se basan en la interaccin entre el programa Cliente y
el Servidor.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

11

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 1.3 Modelo Cliente/Servidor. Fuente: ulyla003.wordpress.com.

El modelo informtico tradicional se ha basado en un sistema centralizado, en el


que un ordenador central (mainframe) se encarga de ejecutar todas las
aplicaciones y trabajos de los usuarios del sistema. Los usuarios se conectan al
ordenador central mediante terminales sin ninguna capacidad de procesamiento
(son simples pantallas y teclados, por lo que en el habla informtica se conocen
como: terminales tontos).
Sin embargo, la aparicin de los ordenadores personales, tras el lanzamiento al
mercado de IBM PC XT en 1981, supuso un cambio radical en el modelo
informtico: estos equipos tenan una capacidad de procesamiento y
almacenamiento a precios factibles, abriendo nuevas posibilidades para el
desarrollo de aplicaciones de productividad personal (procesadores de texto,
hojas de clculo, etc.).
La necesidad de compartir informacin y recursos entre los puestos de trabajo
propici el desarrollo de las redes locales (LAN), con la aparicin de estndares
como Token Ring y, sobre todo, Ethernet. En esta nueva situacin, que ha
estado caracterizada por la descentralizacin de la capacidad de procesamiento
y almacenamiento, ha surgido un nuevo y funcional modelo informtico basado
en un esquema distribuido, en el que ciertos ordenadores dentro de la red con
mayores prestaciones se especializan en ofrecer una serie de servicios
(almacenamiento de ficheros, gestin de impresoras compartidas en red,

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

12

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

ejecucin de ciertas aplicaciones, etc.) y que, por este motivo, se denominan


Servidores.
A estos equipos Servidores se conectan otros que actan como Clientes y
que, a diferencia de los terminales tontos, s tienen capacidad para ejecutar
aplicaciones y procesar los datos que reciben.

1.6 Protocolo de Comunicaciones TCP/IP.


El principal problema que se ha tenido que afrontar durante el desarrollo de
Internet ha sido el conseguir que la interconexin de distintos tipos de redes y
sistemas informticos totalmente incompatibles entre s. Para ello se ha definido
un conjunto de protocolos de comunicaciones que permiten alcanzar la
interoperabilidad entre los distintos sistemas, constituyendo una especie de
lenguaje comn a todos los equipos conectados a la red.
El protocolo TCP/IP es el que se encarga de garantizar la comunicacin
confiable entre equipos y para cada uno de los servicios proporcionados por
Internet se ha desarrollado un protocolo especfico:

Protocolo

Descripcin

HTTP

Para el World Wide Web.

HTTPS

Para el World Wide Web Seguro.

SMTP

Para el Correo Electrnico.

NNTP

Para Acceso a Grupos de Noticias, etc.

Tabla1.1 Los Protocolos. Fuente: Elaboracin Propia.

La descripcin de cada uno de estos protocolos y de otros servicios de Internet


se recoge en una serie de documentos denominados RFCs (Solicitud de

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

13

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Comentarios), elaborados por los equipos de trabajo encargados de su


desarrollo dentro de las organizaciones que rigen Internet.

Figura 1.4 Protocolos. Fuente: www.utp.edu.com.

TCP/IP define, por tanto, un conjunto de normas que rigen la transmisin de


datos entre los ordenadores conectados a Internet. Se divide en dos protocolos:
El protocolo TCP (Protocolo de Control de Transmisin), que se
encarga de llevar a cabo la fragmentacin de la informacin en paquetes
y de garantizar la transmisin confiable de datos entre el transmisor y el
receptor (reagrupamiento de los paquetes, deteccin de errores y gestin
de retransmisiones, control de flujo de datos, etc.).
El protocolo IP (Protocolo de Internet), cuyo cometido principal es el
encaminamiento de los paquetes de datos por la Red, seleccionando la
ruta que deba seguir cada uno para alcanzar su destino.

Por otra parte, dentro del mundo de la Internet se utilizan otros protocolos para
proporcionar determinados servicios y aplicaciones. Los ms importantes son
los que se citan a continuacin:

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

14

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

PPP (Protocolo Punto a Punto): define un mtodo para transmitir


paquetes a travs de enlaces serie, como en el caso de una conexin a
Internet a travs de un mdem.

PPTP (Protocolo de Tnel Punto a Punto): permite establecer enlaces IP


seguros a travs de Internet, empleando tcnicas de encapsulamiento
que definen tneles para el envo de los datos de una organizacin.

HTTP (Protocolo de Transferencia de Hipertexto): es el protocolo


utilizado en el World Wide Web para la transmisin de pginas HTML.

FTP (Protocolo de Transferencia de Ficheros): uno de los primeros


protocolos de Internet que permite descargar (o subir) ficheros desde un
servidor a un equipo cliente.

SMTP (Protocolo Simple de Transferencia de Correo Electrnico): es el


protocolo utilizado para la transferencia de mensajes de correo
electrnico.

POP (Protocolo de Oficina Postal): permite acceder desde un equipo


cliente a los buzones de correo electrnico que se encuentran
almacenados en un servidor.

Formato MIME (Extensiones Multipropsito de Correo Internet): formato


de codificacin de mensajes que permite enviar ficheros binarios a travs
del correo electrnico.

NNTP (Protocolo para la Transferencia de Noticias en Red): es el


protocolo de lectura de los grupos de noticias (news groups) de Internet.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

15

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Se denomina Usenet al conjunto de miles de foros electrnicos de


debate y discusin que constituyen estos grupos de noticias.

Telnet: protocolo utilizado para la conexin remota a servidores a travs


de Internet, emulando un terminal virtual.

Finger: muestra informacin (nombre y apellidos, hora de la ltima


conexin, tiempo de conexin, etc.) acerca de un usuario especfico
conectado a un sistema IP local o remoto.

Whois: permite a los usuarios hacer bsquedas en una base de datos


sobre personas y otras entidades de Internet, tales como dominios, redes
y servidores.

ICMP (Protocolo de Mensajes de Control de Internet): utilizado por los


routers y otros equipos dentro del Internet para intercambiar mensajes de
control con informacin sobre el funcionamiento de la Red.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

16

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

CAPTULO 2: WORLD WIDE WEB.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

17

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

2.1 World Wide Web.


El World Wide Web (WWW), que en espaol significa Red Informtica Mundial, es
el servicio que ha provocado una autntica e inigualable revolucin en el acceso a
la informacin, que se basa en una interfaz grfica amigable y muy fcil de usar.

Figura 1.5 World Wide Web. Fuente: www.duoc.cl.

Fue desarrollado en el CERN (Centro de Investigaciones Nucleares Avanzadas),


en Berna, Suiza, a finales de los aos ochenta (exactamente, fue presentado en
1989) y se basa en dos elementos fundamentales:
Documentos que contienen informacin en mltiples formatos multimedia
como: textos, grfico, conos, imgenes, animaciones, sonido, etc.
Vnculos entre distintas partes o elementos es estos documentos:
hiperenlaces en los que el usuario puede hacer clic para acceder a otra
pgina con informacin relacionada.

Se ha definido el Hipermedia como el nuevo medio surgido de la unin de la


multimedia

los

hiperenlaces,

tambin

denominados

hipervnculos

(denominados links en ingls).


DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

18

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

El WWW es una gigantesca telaraa mundial, constituida por millones de


pginas entrelazadas mediante hipervnculos. La navegacin o exploracin en el
World Wide Web consiste en saltar mediante un hipervnculo de una pgina a otra,
empleando para esta tarea el programa navegador o explorador. En la
actualidad dos aplicaciones, Internet Explorer de Microsoft y Netscape, reparten el
mercado de los navegadores, con una ventaja notable por parte del primero.
Dentro del World Wide Web la informacin se organiza en pginas Web,
construidas con el lenguaje HTML (Lenguaje de Marcas de Hipertexto). Cada
pgina posee una direccin URL (Localizador Uniforme de Recursos) que la
identifica, presentando el siguiente formato:

Protocolo // nombre del servidor / directorio / peticin


Ejemplo: http://www.simce.com/infogestor.htm

Por otra parte, conviene distinguir entre servidor Web, sitio Web (Website) y
pgina Web (Webpage). El servidor Web es el ordenador permanentemente
conectado a Internet que ejecuta el servicio World Wide Web, conteniendo las
pginas Web con la informacin de la empresa u organizacin. Cada pgina Web
est constituida por un fichero HTML y varios ficheros grficos que contienen
botones, conos e imgenes que acompaan a la informacin textual. El conjunto
de pginas Web con la informacin de una organizacin constituye el sitio web de
dicha organizacin.

2.2 Antiguas Herramientas de Bsqueda en Internet.


Seguidamente se describen una serie de herramientas software dedicadas a
facilitar la bsqueda de informacin dentro de Internet que, ante la popularizacin

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

19

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

y el uso de los nuevos buscadores y del servicio WWW, se pueden considerar en


vas de extincin.
Estos protocolos y servicios nicamente se siguen empleando en el entorno
universitario y acadmico por tradicin, adems porque mantienen cierta
informacin no disponible en el World Wide Web. Todos ellos siguen la
arquitectura cliente-servidor y necesitaban inicialmente un cliente especfico, que
ahora ha sido constituido por el propio navegador Web (es decir. Desde el propio
navegador podemos acceder a estos servicios). Entre estas herramientas estn
las siguientes:
GOPHER:
A pesar de no ser mucho ms viejo que el servicio WWW, no ha tenido la
misma evolucin. Es una herramienta de bsqueda y recuperacin de
informacin distribuida, desarrollado en la Universidad de Minnesota, que
ofrece colecciones jerarquizadas de informacin de Internet y las visualiza
en forma de mens. Fue el primer sistema en incorporar el concepto de los
enlaces para saltar de un sitio a otro de informacin, como el caso de
World Wide Web. Un cliente Gopher o un navegador pueden acceder a
informacin

en

proporcionndole

cualquier
un

nico

servidor
espacio

Gopher
Gopher

que

est

(Gopher

accesible,
Space)

de

informacin.
ARCHIE:
Es una herramienta software diseada para facilitar la localizacin de
ficheros a travs del servicio FTP (Protocolo de Transferencia de Ficheros).
Un servidor Archie se encarga de mantener un ndice actualizado de
servidores FTP y de archivos de informacin.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

20

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

VERONICA:
Es una herramienta complementaria de Gopher (como Archie lo es del
servicio FTP), que permite realizar bsquedas por palabras clave en el
Gopher Space.
WAIS:
Los servidores WAIS permiten buscar informacin sobre un tema especfico
contenida en bases de datos distribuidas ubicadas en distintos ordenadores
a lo largo de Internet. En un servidor WAIS es posible hacer preguntas en
lenguaje natural, as como realizar una bsqueda indexada para obtener
informacin con rapidez.

Figura 1.6 Herramientas Gopher y WAIS. Fuentes: brebru.com y www.let.leidenuniv.nl.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

21

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

CAPTULO 3: NAVEGADORES.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

22

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

3.1 Definicin
Para implantar conexiones con los servidores electrnicos y que se obtenga la
informacin y aparte los servicios que stos prestan, el usuario necesita instalar en
su equipo un programa cliente que sea capaz de comunicarse con ellos. Estos
programas que generan las anteriores acciones son los llamados navegadores
electrnicos.
Los navegadores de Web electrnicos, tambin llamados visores de Web o
browser (buscadores), son aplicaciones que permiten ver en pantalla texto con
formato (como palabras en negrita, cursiva, subrayado, adems de diferentes
fuentes con varios tamaos y colores) y presentar imgenes en lnea. Tambin
permiten concebir secuencias de vdeo y escuchar archivos de sonido,
dependiendo de la versin.
La versin del navegador que utilizas actualmente puedes verla en el men
Ayuda de tu navegador. Si tu versin es anterior a la que est en el mercado, es
conveniente que instales sta, pues seguramente incluye mejoras y facilita en gran
medida su utilizacin.

Figura 1.7 Los Navegadores Web. Fuente: lenguajesdp.wordpress.com.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

23

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

3.2 Tipos de Navegadores.


Tradicionalmente el navegador ms utilizado de Internet ha sido Internet Explorer,
debido a su caracterstica de estar integrado en todas las instalaciones de
Windows.
Durante los ltimos aos esta ventaja ha ido disminuyendo cada vez ms, gracias
a las mejoras que han implementado en otros buscadores. La disminucin de su
utilizacin por los usuarios se debe a la popularidad alcanzada por otros
navegadores alternativos, que han conseguido superarlo tanto en velocidad como
en rendimiento.
La siguiente grfica muestra las estadsticas hechas en Julio del 2012, de los
accesos a los sitios web ms concurridos. Estos datos fueron tomados del servicio
Google Analytics:

Figura 1.8 Grfica de Estadsticas Julio 2012. Fuente: Google Analytics.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

24

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Safari

Otros
Mviles

6%

5.60 % 4.50 %

7.30 %

17.50 %

5.40 %

5.30 % 4.70 %

6%

25.70 %

20.80 %

3.79 %

3.39 % 3.98 %

41.34 %

25.70 %

20.80 %

3.79 %

3.39 % 3.98 %

Marzo

41.55 %

26.46 %

22.43 %

2.46 %

2.66 % 3.56 %

Febrer
o

40.78 %

27.39 %

22.15 %

2.87 %

2.48 % 3.48 %

Enero

40.10 %

27.90 %

22.70 %

2.30 %

3.50 % 3.30 %

2012

Chrome

I.Explorer

Firefox

Android

Julio

35.80 %

23.30 %

17.50 %

Junio

36.20 %

24.60 %

Mayo

41.34 %

Abril

Opera

Tabla 1.2 Tabla Estadsticas Julio 2012. Fuente: Elaboracin Propia. Inf: Google Analytics.

Es ms que notable que el navegador ms utilizado de acuerdo a las tablas y las


grficas de Julio del 2012, es el Google Chrome, debido a que es el ms eficiente y
eficaz, porque a ste ya no es necesario que se le instalen los complementos
faltantes que a otros navegadores les faltan. Por ejemplo si quieres reproducir un
video en Internet Explorer tienes que instalarle el complemento Flash, en cambio al
reproducirlo en Mozilla Firefox o en Google Chrome, te permite visualizar el video
sin necesidad de interrupciones al momento de tener acceso.

3.3 Tipos de Navegadores.


3.3.1 Google Chrome.
Ser el navegador ms joven y el ms rpido de la red, para el poco tiempo que
lleva desde septiembre del 2008, se considera un gran logro gracias a la
popularidad alcanzada, adems sigue aumentando no solo en nmero de
usuarios, sino que en sus funcionalidades y en mejoras de desempeo y
usabilidad.
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

25

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Probablemente este navegador es el que ha .comenzado una nueva batalla y por


qu no, decir que un nuevo captulo en la historia de los navegadores, pues las
funcionalidades y el nivel de desempeo que est ofreciendo se est convirtiendo
en una nueva lnea base a seguir por parte de sus competidores.

Figura 3.1 Logo Google Chrome. Fuente: www.google.es/chrome/.

Los puntos que se mostrarn a continuacin hacen referencia a las caractersticas,


cualidades y ventajas que el utilizar Google Chrome ofrece para que los usuarios
puedan hacer sus bsquedas sin ninguna irregularidad:

Navegador minimalista, es decir posee las funciones esenciales y


bsicas por lo que es ideal para personas con poco conocimiento o
dominio en la navegacin web.

Velocidad sper-rpida del navegador, para eso emplea recursos como


un motor de rende rizado de Java script V8 y prefetching (Precarga) de
DNS (Sistema de Resolucin de Nombres) para mejorar el rendimiento
en la carga de pginas web. Esta ltima caracterstica es una innovacin

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

26

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

reciente, Google Chrome es el nico navegador que la implementa por


defecto, resuelve la relacin IP/Nombre de dominio y la mantiene en su
cache cierto tiempo por si es solicitada nuevamente.

El sistema tradicional usado hasta ahora por los otros navegadores, es


que Windows es el que la almacena y la libera al apagar el sistema.

Para ver el registro del prefetching de DNS que tienes actualmente en tu


navegador escribe en la barra de direcciones about:dns te mostrar la
direccin url, el nombre de host, tiempo de respuesta, hora a la que se
resolvi, etc.

Es el navegador ms favorecido a la hora de hacer una bsqueda web,


solo es necesario escribir la palabra o termino de bsqueda en la barra
de direcciones que es multiuso.

Permite ver estadsticas de la memoria consumida en cada pestaa con


sus detalles, incluso la que consumen otros navegadores si se estn
usando simultneamente en la misma Computadora. Para eso abre una
nueva pestaa (CONTROL+T) y escribe: about:memory.

Google ofrece las actualizaciones automticas del navegador, lo que


asegura siempre tener instalada la ltima versin estable y disponer de
la blacklist, que es una lista que contiene informacin sobre phishing
(Sitios de Suplantacin de Identidad) y malware ms reciente en la red.

Ofrece algo similar a Internet Explorer, que es la navegacin llamada de


Incognito, las pginas a las que se accedan no quedarn registradas en
el historial del navegador ni en el historial de bsquedas, y tampoco
dejarn otros rastros en el equipo (como cookies).

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

27

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

En la pgina de inicio (como introdujo Opera) muestra miniaturas de las


pginas visitadas, lo que puedes usar como una especie de Bookmarks
(Marcadores de Internet) involuntarios.

Es as como Google Chrome se ha convertido en uno de los navegadores ms


conocido, no slo por su funcin y rapidez, sino porque es el ms conocido por ser
el ms joven y eso le favorece incansablemente.

3.3.2 Internet Explorer.


El navegador ms utilizado hasta hace poco tiempo en Internet Explorer. Es un
complemento indispensable, que el sistema operativo de Windows ya lo tiene por
defecto en cada computadora, gracias a esto ha logrado su alto nivel de uso. Ha
sido criticado por su desempeo, conformidad con estndares y seguridad, pero
aun as sigue siendo utilizando.

Figura 3.2 Internet Explorer. Fuente: en.wikipedia.org.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

28

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Los puntos establecidos a continuacin son las caractersticas, cualidades y


ventajas, por las cuales Internet Explorer ha llegado a ser lo que hoy en da es:

Ofrece un elevado nivel de seguridad que en ocasiones, puede


llegar a ser desesperante, sin embargo es demasiado efectivo para
la proteccin del usuario, adems de poseer distintos niveles de
seguridad dividida en zonas cada una con sus limitaciones.

La exploracin de InPrivate permite navegar por Internet sin


necesidad de guardar ningn dato de la sesin de exploracin,
como cookies, archivos temporales de Internet historial y otros
datos.

Es el nico navegador que brinda soporte en las pginas web para


ActiveX y VBScript, lo que procura indiscutibles ventajas al usuario,
esenciales e indispensables para muchas empresas y sitios web.

Compatible con paginas HTA, formato de pginas web que permiten


interactuar con programas y archivos del equipo donde se ejecuten.

Soporte para los applets de Java que funcionan mejor que en


cualquier otro navegador.

Al ser el explorador nativo de Windows puede descargar e instalar


updates (actualizaciones) para el sistema operativo desde el sitio de
Microsoft.

Los Bookmarks, marcadores o favoritos son legtimos accesos


directos que se pueden editar y modificar fcilmente por el usuario.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

29

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

A partir de la versin 8 incorpora nuevas funcionalidades como el


uso de las WebSlice (Icono de Color Verde que puedes ver en esta
pgina, en la barra de comandos del navegador), compatibilidad con
el estndar CSS, la posibilidad de elegir otros motores de
bsquedas, disponibilidad de multitud de complementos (llamados
aceleradores), etc.

Aunque tambin ste navegador tiene su lado obscuro, al conllevar una serie de
desventajas e ineficiencias que hace que el explorador no tenga las suficientes
visitas o usuarios que otros tienen:

No muestra la pgina web hasta que no finalice de cargar sus


elementos.

Imposibilidad de acceder a algn contenido multimedia en la red por


exceso de seguridad.

Versiones anteriores lentitud, resuelta a partir de la 8.

Como podemos observar, en su poca tuvo sus grandes funcionalidades, pero con
el paso del tiempo, stas se fueron convirtiendo en grandes barreras para que
Internet Explorer fuera hoy en da el ms funcional para todos los usuarios.

3.3.3 Mozilla Firefox.


Indiscutiblemente, es el navegador ms popular de la red.
Firefox es un navegador web libre y de cdigo abierto desarrollado por Mozilla,
que es una comunidad global que trabaja junta para mantener una web abierta,
pblica y accesible. ste mismo ha revolucionado la forma de pensar y mantenido
la innovacin en la web, para llevar a sus usuarios una mejor experiencia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

30

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Entre sus logros est en ser uno de los proyectos de Software Libre, ms
importantes del mundo y poseer el rcord Guinness al software ms descargado
en 24 horas, con 8 millones de descargas, esto fue el 17 de Junio del 2008.
Los que usan Mozilla Firefox estn dando su apoyo a una nueva forma de crear,
utilizar y compartir en Internet que se llama Software Libre. El objetivo es romper
las barreras del Software propietario, que nos encarcela en un cdigo que no
conocemos, no sabemos cmo funciona y no podemos modificar para que se
adapte a nuestras necesidades.

Figura 3.3 Mozilla Firefox. Fuente: www.mozilla.org.

Los siguientes puntos son las caractersticas, cualidades y ventajas de usar este
navegador que se ha hecho llamar Mozilla Firefox:

Ofrece un Software de cdigo abierto. Es un navegador totalmente


configurable, tanto su funcionamiento, configuracin, aspecto, add-ons o
complementos. En su sitio 22web Mozilla ofrece toda la informacin
tcnica necesaria a desarrolladores y usuarios en general.

Alto nivel de seguridad, proteccin efectiva contra el spyware y


diferentes tipos de malware, bloqueo asegurado contra pop-up y otras

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

31

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

formas de publicidad comunes en la web, ActiveX no est permitido por


considerarse un riesgo total.

Sus desarrolladores aseguran una fuente casi infinita de extensiones


hechas para todo tipo de propsito.

Permite crear y utilizar simultneamente varios perfiles o preferencias en


el mismo navegador, lo cual en la prctica es muy til, en pocas
palabras puedes tener una configuracin diferente para usar Firefox en
tus tareas laborales o estudiantiles y otra para tu uso privado o familiar,
todo con el mismo navegador en la misma PC.

Despus de estos hay ltimas versiones que aaden varias opciones para una
mejor funcionalidad, tales como:

Uso del protocolo HTTPS por defecto a la hora de realizar bsquedas.


Es una innovacin en materia de seguridad que nos protege de aquellos
atacantes que intenten interceptar nuestros datos al encriptar las
comunicaciones desde nuestro equipo al servidor.

Cambio en el diseo de la interfaz que ahora trae nuevos botones y una


nueva barra de direcciones.

Incluye un visor de PDF ya integrado.

Mejoras en el ratn que afectan al rendimiento en los juegos y cualquier


tipo de aplicacin web gracias a la API Pointer Lock.

Actualizaciones automticas y silenciosas, como en Google Chrome

Nuevos controles multimedia para audio y vdeo HTML5.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

32

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Se incluye un botn nuevo denominado "Reiniciar Firefox" que devuelve


el programa a la configuracin por defecto, la solucin de diversos
conflictos.

Es as como Firefox se ha ido destacando de muchos otros navegadores, por sus


extensas funcionalidades, y adems de ser el ms utilizado pos sus ventajas que
conlleva.

3.3.4 Opera.
Es un navegador, presentado por la compaa noruega Opera Software, que se
desarroll como una alternativa a otros productos muy conocidos como Internet
Explorer. Entre las caractersticas con que cuenta esta aplicacin para
diferenciarse de la competencia directa, se destaca el uso de poca memoria y su
rpida respuesta. Asimismo, fue unos de los primeros software en incluir
"pestaas" para la navegacin de sitios web.
Opera tiene varias versiones que le hacen compatible con los siguientes
operadores: Linux, Mac, Windows, FreeBSD, Solaris.
Opera incluye un navegador de cdigo JavaScript y cuenta, adems, con dos
modelos (Opera Mobile y Opera Mini) que permiten instalar esta aplicacin en
telfonos mviles para ofrecer al usuario una conexin porttil a Internet.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

33

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 3.4 Opera. Fuente: www.opera.com.

La ltima versin de este producto, Opera 8.5, de la cual mostraremos algunas


caractersticas que hace de este un navegador efectivo:

Cliente de correo integrado.

Identificador

(administrador

de

usuarios/contraseas):

te

da

la

posibilidad de recordar datos de acceso de cualquier sitio web que as lo


requiera.

Administrador de descargas que ofrece la posibilidad de pausar


cualquier descarga y continuarla cuando as se desee o realizar
mltiples descargas simultneamente.

Cliente de chat IRC (Charla Interactiva Internet).

Navegacin por sesiones: permite guardar la sesin de navegacin


actual y volver a retomarla. As, el usuario puede cerrar el navegador, y
abrirlo ms tarde teniendo exactamente las mismas pginas abiertas
que cuando lo cerr.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

34

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Administrador de cookies.

Notas: almacena pequeos textos asociados a la pgina que se est


visitando.

Sistema de seguridad y eliminacin de informacin privada: rechaza


cookies, datos y pginas protegidos por contrasea, historiales otro tipo
de informacin no pblica.

Navegacin por voz: solo presente en ingls y para el Sistema Windows


2000/XP.

Zoom en las pginas: muestra el contenido de cualquier pgina a


distintas escalas.

Bloqueo de ventanas emergentes.

No por nada este navegador se ha dado a conocer, ya que cuenta con extremas
medidas que hace que sea eficiente y eficaz, cabe destacar que fue el primer
navegador en incluir pestaas al dirigirse a la web. Es por eso que se encuentra
en los mejores navegadores, gracias a su funcionalidad.

3.3.5 Safari.
Es un navegador web de cdigo cerrado desarrollado por Apple Inc. Aunque ste
ya se encuentra disponible para OS X, iOS y Windows. Antes del lanzamiento de
Safari, Apple inclua el navegador Internet Explorer para Mac de Microsoft a sus
computadoras como navegador predeterminado

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

35

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Anteriormente solamente se encontraba para productos hecho por Apple tal como
es Mac, pero con el lanzamiento de Safari 3, se habilit una versin para Microsoft
Windows la cual ha estado siendo actualizada con las nuevas versiones del
navegador.

Figura 3.5 Safari. Fuente: https://www.apple.com.

Los puntos que mostraremos a continuacin son las caractersticas, cualidades y


ventajas que hace que Safari, se muestre como uno de los mejores navegadores:

Segn algunos estudios, es el navegador ms rpido para la carga de


CSS (Hojas de Estilo en Cascada).

Safari, est disponible tanto para Mac como para Windows.

El navegador es muy accesible y tiene una interfaz simple.

El lector de Safari elimina esos anuncios intermitentes que te distraen,


mientras que ests leyendo tus artculos online.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

36

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Con Top Sites, Safari guardar un registro de los sitios web que visites y
crear una pgina grfica, mostrando hasta 24 miniaturas de tus
pginas favoritas.

Se destacan la velocidad, un diseo muy cuidado, la seguridad y las


prestaciones que ofrece.

Es por las innovaciones que Safari ha llegado a ser uno de los mejores
navegadores, de acuerdo a velocidad y a seguridad, adems de que su diseo de
pgina es muy simple y cualquier persona podra entender la funcionalidad.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

37

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

3.3.6 Principales navegadores de internet.


NAVEGADORES

CARACTERSTICAS

Navegador
web
desarrollado
por
Microsoft para el sistema
operativo
Microsoft
Internet Explorer.
Windows desde 1995.
Aos atrs, el lder en
navegadores de internet
gratis.

Navegador
web
desarrollado por Google.

Est
disponible
gratuitamente
bajo
Google Chrome. condiciones de servicio
especficas.

Mozilla Firefox.

Opera.

Safari.

Navegador web libre y


de
cdigo
abierto
desarrollado para
Microsoft Windows.
Navegador web y suite
de Internet desarrollado
por Opera Software.

Incorpora
muchas
caractersticas como el
zoom y la bsqueda
Desarrollado por Apple,
hasta hace algn tiempo
solo era instalable en
sistemas operativos Mac
OS e IOS.
Actualmente existe
una versin para
Windows.

VENTAJAS

DESVENATAJAS

Listo para usar en


todos los sistemas
operativos Windows.
Versiones actuales
ofrecen una mejor
interfaz
para
dispositivos tctiles.

Versiones atrs
se caracterizaba
por su lentitud e
inseguridad.

No
siempre
aparece
la
informacin
requerida

La
barra
de
Compatibilidad
bsqueda,
sirve con pginas web.
como un buscador,
as
que
aunque
busquemos mal la
direccin, te lleva al
sitio adecuado.
Rapidez de
Carga.
Es seguro.
No siempre es
Es personalizable.
compatible con el
sistema operativo
de Windows.
Mejor sistema de No hay mucha
recuperacin
de variedad.
pestaas.

Capacidad
de
tomar notas en el
propio navegador.
Es el navegador No tiene una
ms rpido para la tienda
de
carga de CSS.
aplicaciones
Est disponible (como
Google
tanto para Mac como Chrome y Firefox).
para Windows.
El navegador es
muy accesible y tiene
una interfaz Simple.

Tabla 1.3 Principales navegadores de internet.


Fuente: http://futuraslicenciadasenturismo.bligoo.com.mx/

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

38

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Gracias a los datos prestados de Google Analitycs, podemos observar que el


navegador ms utilizado y requerido por los usuarios es el Google Chrome, ya que
ha llegado a cautivar a millones, gracias a su seguridad, rapidez, diseo y la
facilidad de uso y bsqueda con la que cuenta, adems de que las opciones que
posee son de gran utilidad; Aunque cabe destacar que Internet Explorer sigue
tratando de innovarse, de tal manera que su uso an sigue y es uno de los
navegadores ms importantes por ser el lder es stos mismos.
Mozilla Firefox lleg a darle a la navegacin un giro enorme, porque hubo una
nueva forma de buscar informacin a parte de todo un poco ms rpida que lo
normal, sin embargo no ha llegado a ser el ms usado, ese puesto an sigue
ocupado por Google Chrome.
Safari y Opera, grandes navegadores, pero que ya estn quedando muy detrs de
los otros. Safari utilizado por los que usan ordenadores Mac. Opera un navegador
que impresion por las pestaas que brindaba.
No cabe duda que cada uno de los navegadores mencionados, han sido de los
mejores, o por lo menos los usuarios as los consideramos, porque somos
nosotros, quienes los usamos y empleamos en la vida cotidiana.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

39

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

CAPTULO 4: HTML.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

40

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

4.1 Definicin.
HyperText Markup Language (HTML), que en el espaol significa Lenguaje de
Marcas de Hipertexto, es un lenguaje de etiquetas con el que se disean las
pginas web. Estas pueden ser vistas por el usuario mediante el navegador. Por
lo tanto esto quiere decir que, HTML es el lenguaje usado por los navegadores
para mostrar las pginas web de informacin al usuario, que hoy en da es la
interface con mayor alcance en la red.
Este lenguaje nos permite reunir textos, sonidos e imgenes y combinarlos al
gusto del diseador. HTML nos permite la introduccin de referencias a otras
pginas por medio de los enlaces hipertexto (URL).
El HTML se cre en un principio con objetivos divulgativos. No se pens que la
web llegara a ser un rea de ocio con carcter multimedia, de modo que, el HTML
se cre sin dar respuesta a todos los posibles usos que se le iba a dar y a todos
los grupos de gente que lo utilizaran en un futuro.
Para que este lenguaje pueda mostrar resultados, es necesario de un navegador
para ver los efectos de trabajo realizado y aparte necesitamos otra herramienta
capaz de crear la pgina. Un archivo HTML (una pgina) no es ms que un texto.
Es por ello que para programar en HTML necesitamos un editor de textos.
Es recomendable usar el Bloc de Notas que viene con Windows, u otros editores
de texto que sean sencillos. Aunque hay que tener cuidado con algunos que llegan
a ser ms complejos tales como Wordpad o Microsoft Word, puesto que colocan
su propio cdigo especial al guardar las pginas y HTML es nicamente texto
plano, con lo que no tendremos algn problema mayor.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

41

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 4.1 Bloc de Notas HTML. Fuente: www.aulaclic.es.

Existen otros tipos de editores especficos para la creacin de pginas web los
cuales ofrecen muchas facilidades que nos permiten aumentar nuestra
productividad. No obstante, es aconsejable en un principio utilizar una herramienta
lo ms sencilla posible para poder prestar la mxima atencin a nuestro cdigo y
familiarizarnos lo antes posible con l. Siempre tendremos tiempo ms delante de
pasarnos a editores ms verstiles con la ganancia de tiempo necesaria.

4.2 Estructura Bsica de HTML.


Un documento HTML, no es ms que texto definido entre marcas o etiquetas:

<HTML>

</HTML>

Un documento HTML, siempre se compondr de lo siguiente:

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

42

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

<HTML>
<HEAD> Cabecera del documento.
</HEAD>
<TITLE> Ttulo del documento.
</TITLE>
<BODY> Contenido del documento.
</BODY>
</HTML>

A continuacin se explicar el significado de <HEAD>, <TITLE> y <BODY>:

Cabecera (HEAD): Se inicia mediante el comando <HEAD> y se cierra con


</HEAD>. Dentro de lo que es la cabecera se introduce informacin del
documento que no se ve en la pantalla principal, y que precisa las
caractersticas del documento, principalmente el ttulo del documento.

Ttulo (TITLE): El ttulo del documento se declara entre las etiquetas


<TITLE> y </TITLE>. ste debe ser breve y descriptivo de su contenido,
puesto que ser lo que vean los dems cuando aadan la pgina a sus
direcciones favoritas.

Cuerpo (BODY): Se inicia mediante el comando <BODY> y concluye con


</BODY>. ste comando acepta diversos y numerosos modificadores,
dentro de cuerpo del documento se incluye cualquier carcter.

En la prctica algunos visualizadores no necesitan las etiquetas de comienzo y


cierre de <HTML>, <HEAD>, <TITLE> y <BODY> para interpretar un documento
HTML. Sin embargo cuando se est diseando una pgina Web, debemos tener

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

43

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

en cuenta a la mayora de usuarios posibles, por lo tanto es altsimamente


recomendable incluir estas marcas.

4.3 Comandos Bsicos de HTML.


A continuacin se describen las marcas bsicas de HTML, que se pueden incluir
en el cuerpo de un documento HTML.

-Definicin de prrafos:
P: la marca <P> sirve para separar prrafos en HTML. Adems de
introducir un retorno de carro, fuerza un segundo retorno de carro para
dejar una lnea en blanco entre un prrafo y el siguiente. De esta manera
los prrafos quedan ms espaciados y el texto se vuelve ms legible.
En esta etiqueta de fin es opcional.
Por defecto, el prrafo de un documento HTML, est justificado a la izquierda.
Pero podemos modificar la alineacin horizontal mediante el atributo ALIGN de la
marca <P>, que puede tomar los siguientes valores:
LEFT: el prrafo es justificado a la izquierda. Valor por defecto
CENTER: el prrafo es centrado.
RIGHT: el prrafo es justificado a la derecha.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

44

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 4.2 Comandos P y ALIGN. Fuente: ofimatica-avanzada.blogspot.com

-Ruptura de lneas:
BR: la marca <BR> introduce un retorno de carro (o salto de lnea) en el
punto del documento en el que es colocada Es equivalente al punto y
aparte de un texto normal.

Esta marca es vaca de manera que no necesita de la etiqueta de fin.


-Ttulos de encabezamiento:
HTML, dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamao,
que se utilizan para marcar los ttulos o resaltes en las pginas. Se activan con el
comando <Hn> y de tal manera se desactiva con </Hn>, donde n es un nmero
de 1 a 6, siendo el nmero que indica el tamao. El tamao mayor es el
correspondiente al nmero 1.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

45

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

<H1> Nivel de encabezado 1 </H1>

<H2> Nivel de encabezado 2 </H2>

<H3> Nivel de encabezado 3 </H3>

<H4> Nivel de encabezado 4 </H4>

<H5> Nivel de encabezado 5 </H5>

<H6> Nivel de encabezado 6 </H6>


Tabla 1.4 Tamao de letras. Fuente: Elaboracin propia.

Los ttulos de encabezado requieren la marca de principio a fin, al igual que


siempre provocan un salto de lnea, aunque no se les marque la indicacin.

-Dando estilo al texto:


Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva, etc.),
tamao y color, el cual se desee para el texto especificado.
Tipos de letras: algunas de las marcas que permiten especificar la tipografa
de los caracteres son las siguientes:

<B> Negrita (Bold) </B>


<I> Cursiva (Italic) </I>
<BLINK> Parpadeante (Blink) </BLINK>
<TT> Tamao Fijo (TypeWriter) </TT>
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

46

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

<EM> nfasis (Emphasis) </EM>


<STRONG> Gran nfasis (Strong) </STRONG>
<U> Subrayado (Underline) </U>

Todas estas etiquetas requieren las marcas de principio a fin.


Tamao del texto: para modificar el tamao, se utiliza el atributo SIZE de la
marca <FONT>, de la manera siguiente:
<FONT SIZE= tamao>Texto</FONT>
El comando <FONT> requiere la etiqueta de cierre.
HTML, requiere de 7 tamaos de letra distintos, siendo el tamao 3 el que
se adopta por defecto.
Existen dos formas de establecer el tamao de un trozo de texto.
Tamao de texto absoluto:
<FONT SIZE=argumento>Texto</FONT>
Donde argumento es un nmero entre 1 y 7.
Tamao de letra relativos:
<FONT SIZE=argumento>Texto</FONT>
Donde argumento es una cadena de caracteres que nos indica,
con un signo + -, el nmero de veces que esa fuente va a ser
mayor o menor que el tamao de la fuente por defecto.

Si queremos modificar el tamao de

todo el texto del documento, una

forma de hacerlo sera englobar todo el cuerpo del documento en una


DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

47

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

etiqueta con el tamao de letra que queremos utilizar. As se tendr que


escribir algo parecido a lo que se mostrar a continuacin:
<HTML>
<HEAD>
..
</HEAD>
<BODY><FONT SIZE=4>
..
(Contenido del documento)
..
</FONT><BODY>
</HTML>

Sin embargo, hay otra manera de hacerlo ms elegante y legible, utilizando


la siguiente etiqueta:
<BASEFONT SIZE=tamao>
Esta etiqueta puede situarse en cualquier lugar del documento, pero al
tratarse de una etiqueta donde afecta todo el documento, para mantener la
legibilidad, lo ms lgico es colocarlo en la cabecera.
Colores de texto: para dar color a un texto se utiliza el comando siguiente:
<FONT COLOR=color>Texto</FONT>
En un principio la forma de especificar un color en HTML, era mediante el
formato hexadecimal. Consista en tres nmero hexadecimales, esto quiere
decir nmeros expresados en base 16, de dos dgitos cada uno. Con un
nmero hexadecimal de dos dgitos podemos expresar hasta 256 valores
distintos.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

48

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

El primer nmero hexadecimal nos va a mostrar la cantidad de rojo que


tiene nuestro color, el segundo la cantidad de verde, y el tercero la cantidad
de azul (el blanco ser FFFFFF, el negro 000000). Esta forma de definir los
colores como combinacin de los colores rojo, verde, y azul se denomina
RGB (red green blue).
Para mayor facilidad de uso, la mayora de los visualizadores, al menos en
las versiones ltimas de cada uno, admiten otra forma de insertar colores.
En lugar de expresarlos en la forma ya mencionada anteriormente, ahora se
expresan como cadena de caracteres. Esta cadena significa el nombre del
color, pero interpretado en ingls.

Para dar color a todo el texto del documento se puede hacer con:
<BODY TEXT=blue>
Para especificar el color de fondo del documento deberemos utilizar:
<BODY BGCOLOR=blue>

-Listas:
Las listas en HTML proporcionan una forma de clasificar la informacin, y hacer
que sta sea ms legible por parte del visitante de las pginas.
Listas ordenadas (OL): Tambin llamadas listas numeradas son
aquellas en las que cada lista de elemento tiene delante un nmero
que indica el orden del elemento dentro del conjunto se la lista.
La marca para crear una lista ordenada es <OL> .... </OL>. Son
obligatorias las etiquetas de comienzo y fin de estas marcas.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

49

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Cada elemento de la lista ordenada se identifica escribindolo dentro


de la marca <LI> . </LI>. La etiqueta de fin puede ser omitida.
Con la marca LI no es necesario introducir un retorno de carro detrs
de cada elemento de la lista.
Es posible poner en especfico el tipo de numeracin que se dar, tal
como: nmeros arbigos, romanos, letras, etc., aunque por defecto
se sigue la numeracin rabe. Las listas numeradas pueden ser
anidadas una dentro de otra.

Figura 4.3 Cdigo HTML y vista OL. Fuente: apuntesmultimedia.wordpress.com.

Listas desordenadas (UL): tambin llamadas listas no numeradas


son listas en las que no es necesario numerar los elementos que la
componen, sino que casa elemento tiene delante de l un smbolo,
tal como: un punto, un cuadrado, una flecha, etc.
La forma de especificar una lista desordenada es mediante la marca
<UL>. Las etiquetas de comienzo y fin de esta marca son
obligatorias.
Cada elemento de la lista se identifica mediante la marca <LI>. La
etiqueta para fin de la marca anterior se puede omitir.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

50

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 4.4 Cdigo HTML y vista UL. Fuente: www.monografias.com.

Tambin podemos modificar las vietas o los smbolos por medio del
atributo TYPE =circle, disc o square (crculo, disco o cuadrado) y
aadir sublistas.

Figura 4.5 Cdigo HTML y vista UL con TYPE. Fuente: www.monografias.com.

Listas de definicin: a diferencia de los dos tipos ya mencionados de


listas, stas se utilizan para presentar la informacin sin marcas, ni
nmeros, sino que utiliza los sangrados de los prrafos.

Las listas de definicin estn constituidas por trminos y su


subsiguiente definicin.
La forma de implementar las listas de definicin es con la marca
<DL> de la siguiente manera:

<DL>
<DT> Nombre del trmino.
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

51

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

<DD> Definicin del trmino.


</DL>

Cada trmino de la lista de definicin se indica con la marca <DT> y


no sangrar, mientras que la descripcin del trmino se indica con la
marca <DD> y sangrar hacia la derecha para resaltarla del trmino.
Antes y despus de la descripcin de cada palabra clave, las listas
de definicin incorporan un retorno de carro y estas mismas tambin
pueden anidarse.

Figura 4.6 Ejemplo etiqueta DL vista navegador. Fuente: sites.google.com.

Lneas horizontales: la marca <HR> permite trazar una lnea


horizontal para separar distintas secciones de una pgina HTML.

Por defecto las lneas horizontales van de la parte izquierda de la


ventana del visualizador a la derecha, tienen la parte superior oscura
y la otra inferior clara, por lo que dan una sensacin de relieve.
Esta etiqueta tiene varios modificadores que permite cambiar el
aspecto de la lnea horizontal (ancho, longitud, etc.).

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

52

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Comentarios no visibles en la pantalla: la mayora de las veces es


demasiado til escribir comentarios en el documento HTML, sobre el
cdigo que escribimos, que nos puede servir para recordar en algn
tiempo sobre lo que hicimos y que no se requiere ver en la pantalla.

Esto se consigue encerrando dichos comentarios entre estos dos


smbolos: <!y -->.
Como por ejemplo:

<!Esto es un comentario al cdigo, que no se visualizar en


la pantalla -->.
Enlaces: la clave de la facilidad de uso de HTML, es gracias a los
enlaces. Los enlaces (o links) proporciona al visitante de las pginas
un

mecanismo

muy

sencillo

para

moverse

entre

distintos

documentos, permitindole moverse en aquellos que considere


importantes, mientras que desde el punto de vista del creador de la
pgina, permite distribuir el lugar o los lugares en los que se van a
almacenar los distintos documentos.

Para definir enlaces hipertexto se utiliza la marca <A> de la manera


siguiente:
<A HREF=direccin>Texto del enlace</A>

Dnde:
Direccin: es el destino del enlace.
Texto de enlace: es el texto indicativo del enlace que aparece
en la pantalla normalmente con color especial y subrayado. <A>
requiere de la marca de fin.
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

53

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Se distinguen tres tipos de enlaces:


1. Enlaces a otras zonas de la misma pgina.
2. Enlaces a otras pginas.
3. Enlaces a otras zonas de otras pginas.

-Enlaces a otras zonas de la misma pgina:


A veces en casos de pginas muy extensas, nos puede interesar dar un salto
desde una posicin a otra determinada.
As es posible crear enlaces que lleven al usuario de una parte del documento a
otra dentro del mismo con solo hacer un clic. A este tipo de enlaces se les llama
enlaces locales.
Estos enlaces constan de dos objetivos fundamentales:

El enlace: corresponde a la zona en la cual el usuario har clic para viajar a


otra parte del documento. Esta zona aparece subrayada en el documento.
Un enlaces se crea delimitando la zona con el comando:
<A NAME=nombre> </A>
En donde nombre es la etiqueta que se est haciendo referencia.

El nombre enlazado o referenciado: corresponde a la zona del documento a


la cual el usuario llegar al hacer clic en la referencia correspondiente. Un
nombre local se crea delimitando la zona con el comando:
<A NAME=nombre> . </A>
Donde nombre es la etiqueta que asignamos a esta zona.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

54

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

-Enlaces a otras pginas:


Para enlazar a otro documento, es necesario conocer la ubicacin exacta del
documento que se referenciar. Una ubicacin, puede ser referenciada en forma
relativa o absoluta:

Ubicacin relativa: se indica especificado la posicin del documento en la


estructura de subdirectorios a partir de la ubicacin del documento actual.
Slo se puede usar en documentos ubicados en el mismo ordenador.
Una referencia relativa a otro documento se hace usando el siguiente
comando:
<A HREF=ubicacin> . </A>

Ubicacin absoluta: se indica especificando el URL (localizador de recursos


uniforme) de la pgina que se est referenciando.
Los URL son una manera universal de especificar una direccin. La forma
ms bsica de referenciar un hipertexto es utilizando el comando:
<A HREF=http://ordenador/directorio/archivo>
El ordenador indica la mquina donde se encuentra el documento.
Directorio y archivo indican su posicin dentro de ese ordenador.

-Imgenes:
Inclusin de una imagen:
La etiqueta que se utiliza para la inclusin de imgenes en una
pgina Web es la siguiente:
<IMG SRC=imagen.jpg></IMG>

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

55

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Dnde imagen.jpg es el archivo de imagen. Dependiendo del formato


que tenga la imagen se estar cambiando (.JPG, .GIF, .PNG, etc.).
Tamao de las imgenes:

Si no especificamos, las imgenes aparecern en el navegador con


el tamao que se obtienen originalmente.
Para modificar el tamao de las mismas se utilizan los siguientes
modificadores en la etiqueta <IMG>:
WIDTH: que es la anchura en pixeles de la imagen.
HEIGTH: que son los pixeles de lo alto de la imagen.
Uso de imgenes como enlaces:

Para utilizar una imagen como enlace a otra parte de la pgina o a


otra pgina, simplemente hay que introducirlas dentro de la etiqueta
<A HREF> de la siguiente manera:
<A HREF=enlace><IMG SRC=imagen></A>
Imgenes como fondo de un documento:

Un efecto muy utilizado es el uso de imgenes como fondo de un


documento HTML. La manera de hacerlo es con el atributo
BACKGROUND de la marca <BODY>.

La imagen de fondo en general ser ms pequea que el rea del


documento del navegador. Lo que hace entonces el navegador es
repetir, partiendo de la esquina superior izquierda, la imagen que
hemos elegido como el fondo del documento.
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

56

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

A la hora de elegir la imagen de fondo, debemos tener en cuenta que


el texto del documento debe ser legible por encima de la imagen, por
lo que se tiene que evitar colocar imgenes con colores demasiado
fuertes

Ahora que tenemos el conocimiento de la estructura bsica y adems de las


etiquetas y comandos, podemos comenzar a disear la pgina Web que sea del
gusto o de las especificaciones que cada persona desee visualizar.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

57

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

CAPTULO 5: PHP.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

58

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

5.1 Historia de PHP


-En 1994, Rasmus Lerdorf crea un parser (compilador) que se encarga de ejecutar
macros: tratamiento de formularios y acceso a base de datos, ste procesador es
llamado PHP/FI
-En 1998, gran multitud de sitios web usan PHP/FI. Se aaden numerosas
funcionalidades y se da soporte a varias plataformas y servidores.
En este mismo ao, se libera PHP 3.0 como proyecto Open Source, pero en poco
tiempo Zend Technologies crea PHP 4.0 PHP, stas son algunas de sus
funcionalidades:

Reescritura completa del ncleo del intrprete

Mejora notable en el rendimiento.

Nuevas funcionalidades: IMAP, SNMP

Capacidades iniciales de Orientacin a Objetos

-PHP 5.0, algunas de sus caractersticas son:

Remodelacin completa del soporte de Objetos

"PHP5:

Coming

Soon

to

a Webserver

Near

You,"

http://

www.

sitepoint.com/article/ 1192/

-La versin 6 de PHP ha estado en preparacin durante largo tiempo en formato


de borrador, sin llegar a publicarse. Por ello se propuso que la nueva versin de
PHP se llamara PHP 7, dejando PHP 6 como una versin no publicada.

La siguiente tabla muestra las versiones que ha tenido PHP con su debida
informacin:

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

59

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Versin

PHP 3

PHP 4

PHP 5

Informacin

-PHP 3.0, liberada en 1998, era


la primera versin que se
pareca fielmente al PHP tal y
como lo conocemos hoy en da.

Caractersticas
-Una de las mejores caractersticas
de PHP 3.0 era su gran
extensibilidad. Cuando hablamos de
extensibilidad nos referimos a la
existencia de un ncleo o core al
que se le pueden ir aadiendo
fragmentos de cdigo que permiten
hacer ms cosas.
-A
parte
del
aumento
en
rendimiento,
se
introdujeron
novedades relacionadas con el
soporte de objetos en PHP. La
programacin orientada a objetos
es una forma avanzada de
programacin y gracias a estas
caractersticas PHP se encuentra
entre los lenguajes de vanguardia.

-La principal novedad de PHP 4,


est en el intrprete del lenguaje
PHP. Con la nueva versin se
lograron aumentos de entre 5 y
10 veces en la velocidad de
ejecucin de pginas PHP
respecto a la versin anterior, lo
-Otra caracterstica fue que poda
cual
fue
un
salto
muy
soportar hilos, cosa que en PHP 3
importante.
no era posible. Un hilo es
bsicamente una tarea que puede
ser ejecutada en paralelo con otra
tarea.
-PHP 5 ha sido mejorar los
mecanismos de programacin
-La principal caracterstica de PHP
orientada
a
objetos
para
5 con respecto a PHP 4 es la
solucionar las carencias de las
mejora
en
la
programacin
anteriores versiones.
orientada a objetos (POO). Aunque
El resultado ha sido un lenguaje
este tipo de programacin ya se
ms potente, que cada vez es
haba introducido en el lenguaje
ms popular y que cada vez se
desde PHP 3, las versiones
usa ms, tanto a nivel
anteriores a PHP 5 tenan bastantes
profesional en empresas como a
limitaciones para el uso de este tipo
nivel de usuarios que quieren
de programacin.
construir pequeas pginas o
portales web.

Tabla 1.5 Versiones de PHP. Fuente: http://aprenderaprogramar.com/. Elaboracin Propia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

60

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

5.2 Definicin.
PHP (Hypertext Preprocessor) es un lenguaje de cdigo abierto, adecuado para
desarrollo web y que puede ser implementado en HTML. Es muy popular porque
un gran nmero de pginas y portales web estn creadas con PHP. Cdigo abierto
significa que es de uso libre y gratuito para todos los programadores que quieran
utilizarlo. Implementado en HTML significa que en un mismo archivo vamos a
poder combinar cdigo PHP con cdigo HTML, siguiendo unas reglas.

Figura 5.1 PHP. Fuente: www.aprenderaprogramar.com.

5.3 Funcionamiento de PHP.


PHP se utiliza para generar pginas web dinmicas porque hay que recordar que
llamamos pgina esttica, a aquella cuyos contenidos permanecen siempre
igual, mientras que llamamos pginas dinmicas, a aquellas cuyo contenido no
es el mismo siempre. Por ejemplo, los contenidos pueden cambiar en base a los
cambios que haya en una base de datos, de bsquedas o aportaciones de los
usuarios, etc.
El lenguaje PHP se procesa en servidores, que son ordenadores muy potentes
con un software y hardware especial. Cuando se escribe una direccin tipo
http://www.miservidor.com/index.php en un navegador web como Internet
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

61

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Explorer, Firefox o Chrome, se envan los datos de la solicitud al servidor que los
procesa, rene los datos (por eso decimos que es un proceso dinmico) y el
servidor lo que devuelve es una pgina HTML como si fuera esttica.
Por regla general este tipo de lenguaje suele ser utilizado para crear contenido
dinmico y poder interactuar con el usuario.

Figura 5.2 Procesamiento en Servidores. Fuente: web.fdi.ucm.es.

5.4 Alcances.
Se pueden realizar muchas acciones con la ayuda de ste lenguaje, a
continuacin se mencionarn las principales funcionalidades que tiene:
Realizar operaciones sobre ficheros del servidor.
Obtener datos de un formulario (X)HTML.
Acceder a Bases de Datos.
Gestionar "cookies"
Gestionar la seguridad de un sitio web (autorizacin).
Crear imgenes.
Crear PDF.
Tratamiento de XML.
Comunicacin con Java Servlets.
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

62

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

5.5 Estructura bsica de PHP.


Para abrir un archivo .php, es necesario de un intrprete. El intrprete de PHP
intentar ejecutar todas las instrucciones que estn entre los delimitadores de
instrucciones PHP.
Ejemplo de esto es lo que se pondr a continuacin, es una estructura bsica para
entender la tarea que realiza un delimitador en una pgina Web:

<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo "Bienvenidos a edunetcelaya.com";
?>
</body>
</html>

Las letras que estn resaltadas con el rectngulo azul,

a estas se le llaman

delimitadores. Un delimitador es una separacin del cdigo HTML al PHP, ste


dice dnde empieza y termina el cdigo correspondiente ya sea en los dos tipos
de lenguajes.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

63

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Hay muchas formas de delimitar, ya que, existen tres tipos de delimitadores, con
diferentes palabras, pero la realidad es que tienen la misma funcin. Ms adelante
conoceremos el cdigo que se tiene que utilizar para cada uno de los
delimitadores.

Ejemplos de los 3 delimitadores existentes:

Delimitador
#1
Delimitador #2
(El ms comn)

Delimitador
#3

Figura 5.3 Tipos de delimitadores. Fuente: http://web.fdi.ucm.es/.

Dentro de los delimitadores de PHP se puede escribir un nmero cualquiera de


instrucciones. Las instrucciones PHP de un bloque deben terminar con ;. En la
ltima instruccin de un bloque no hace mucha falta.
<?php echo (2+2); ?>
<?php echo (2+2) ?>
Si no incluye el ; se generar un error en tiempo de ejecucin. Las instrucciones
pueden contener espacios en blanco y saltos de lnea.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

64

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

<?php
echo (2+2);

<?php
echo ( 2

echo (3+2)

+2

?>

); echo (3+2)
?>

5.6 Tipos de datos en PHP.


Los siguientes tipos de datos primitivos aceptados en este lenguaje son los
siguientes:
Tipos Bsicos (Tipos Escalares) :
o String.
o Boolean.
o Integer.
o Float (double es el mismo no hay diferencia de tamao).
Tipos Compuestos:
o Array.
o Object.
Tipos Especiales:
o Resource.
o NULL.
A continuacin se encontrar ms informacin sobre los tipos bsicos que se
utilizan en el lenguaje PHP.
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

65

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Integer: podemos especificar enteros en decimal (base 10), en hexadecimal

(base 16) y octal (base 8), opcionalmente podemos incluir el signo ( + , - ).


o Sintaxis.

Figura 5.4 Sintaxis Integer. Fuente: http://web.fdi.ucm.es/.

o Ejemplo:

Figura 5.5 Ejemplo Integer. Fuente: http://web.fdi.ucm.es/.

Boolean: este tipo fue introducido en PHP 4. Para especificar un valor


booleano se usan las palabras reservadas TRUE, FALSE que son
insensibles a maysculas y minsculas.
o Ejemplo:

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

66

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 5.6 Ejemplo Boolean. Fuente: http://web.fdi.ucm.es/.

Float: Los nmeros en punto flotante (float =double). Normalmente los


valores mximos son ~1.8e308 con una precisin de 14 dgitos.
o Sintaxis:
F
i
g
u
r
5
Figura 5.7 Sintaxis Float. Fuente: http://web.fdi.ucm.es/.

o Ejemplo:

Figura 5.8 Ejemplo Float. Fuente: http://web.fdi.ucm.es/.

String: Las cadenas de caracteres PHP slo contienen caracteres ASCII,


no se da soporte nativo a Unicode. Existen funciones de extensin que nos
permiten trabajar con Unicode: utf8_encode (), utf8_decode ().

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

67

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

No hay restriccin para el tamao de las cadenas. Podemos especificar


cadenas de 3 maneras: cadenas entre comillas simples, cadenas entre
comillas dobles y "here documents".

Acceso/Modificacin de los caracteres de la cadena. El ndice del primer


carcter es 0.
o Sintaxis:

Figura 5.9 Sintaxis String. Fuente: http://web.fdi.ucm.es/.

o Ejemplo:

Figura 5.10 Ejemplo String. Fuente: http://web.fdi.ucm.es/.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

68

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

5.6.1 Declaracin de Variables.


Para declarar una variable es necesario el signo '$'. Los nombres de cada una de
las variables son sensibles entre maysculas y minsculas.

Sintaxis: $<identificador>

El identificador de la variable tiene que comenzar por letra o '_'. El resto de


caracteres pueden ser letras, nmeros o '_'.
Hasta PHP3, las variables slo podan ser asignadas por valor, a partir de PHP4,
las variables tambin pueden ser asignadas por referencia.
Al asignar una variable por referencia, un cambio en la referencia tambin se
aplica sobre la variable original.
El mbito de una variable es el contexto dentro del cual la variable se encuentra
definida. La mayora de variables de PHP tienen un nico mbito. En este mbito
tambin se encuentran las variables que definamos dentro de un fichero que
incluyamos con include o require.

<?php
$a = 1;

*La variable $a puede ser usada


por el cdigo PHP de c.inc

Include c.inc;
?>

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

69

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Las siguientes son funciones para tratar con variables:


Isset (<variable>): devuelve TRUE si a la variable '<variable>' se le ha
asignado un valor, devuelve FALSE en otro caso.
Unset (<variable>): elimina la variable <variable>'.
is_<tipo> (<variableevuelve>): si a la variable tiene asignado un valor
de devuelve TRUE si a la variable '<variable>' tiene asignado un valor
de tipo boolean, devuelve FALSE en otro caso. < tipo>, puede tomar
los valores string, boolean, integer, float, double, null, object, array,
string.
is_callable (<variable>): devuelve TRUE si a la variable '<variable>'
tiene asignado una cadena con el nombre de una funcin vlida o si
contiene: array ($algunObjeto, nombreMetodo') o devuelve FALSE en
otro caso.

Con lo anterior se tiene un conocimiento general de todos los tipos de datos que
acepta y adems cmo declarar una variable, pero para que pueda correr una
pgina con lenguaje PHP, en necesario un servidor que sea el traductor de la
pgina dinmica hacia el navegador.

5.7 Servidor Local.


Es aquel servidor Web que reside en una red local al equipo de referencia. El
servidor Web local puede estar instalado en cualquiera de los equipos que forman
parte de una red local.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

70

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 5.10 Servidores Locales. Fuente: www.linuxerz.cl.

Todos los Servidores Web, son locales a la red local en la que se encuentran, o
como mnimo, locales al sistema en el que estn instalados.
Cuando un servidor Web se encuentra instalado en el mismo equipo desde el que
se desea acceder, puede utilizarse la direccin de Loopback, que es la interfaz de
red virtual de un navegador, la cual tiene una direccin de rango 127.0.0.1. Los
archivos se almacenan en un directorio determinado por la configuracin, que en
determinado momento que se desee, puede ser modificable.
Existen numerosas aplicaciones que facilitan la instalacin automtica de
servidores web, entre ellas est Apache y aplicaciones adicionales como MySQL y
PHP, entre otros, de forma conjunta, como XAMPP, JAMP p EasyPHP. Estas
aplicaciones reciben el nombre de LAMP cuando se instalan en plataformas Linux,
WAMP en sistemas Windows y MAMP en sistemas Apple Macintosh.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

71

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

CAPTULO 6: ENTORNO APPSERV.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

72

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

6.1 Qu es AppServer?
AppServ, es un paquete de software el cual nos permite instalar en nuestro
ordenador, variados programas bajo el sistema operativo Windows, en pocos
segundos y sin dificultad.

Figura 6.1 AppServer Logo. Fuente: //www.appserv.com.mx.

Los programas que se encuentran en AppServ son los siguientes:


Apache WebServer 1.3.26.
Apache Monitor.
PHP Script Language 4.2.2.
MySQL Database 3.23.51.
PhpMyAdmin Database Manager 2.2.6.
PHP-Nuke Web Portal System 5.6.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

73

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Esto es lo que incluye el actual paquete AppServ. Es preciso recordar que est
formado por 4 paquetes, los cuales son: Apache, PHP, MySQL y phpMyAdmin;
Por lo general no debemos apresurarnos a nuevas versiones, ya que nuestro
computador lo usamos de entorno de desarrollo y prueba de las aplicaciones.

6.1.1 Servidor Apache.


Apache, es un servidor web HTTP de cdigo abierto, que es ejecutable para
plataformas: Unix-like (BSD, GNU/Linux, etc.), Windows, Macintosh y otras, que
implementa el protocolo HTTP/1.1 y la nocin de sitio virtual. Esta aplicacin es
necesaria para montar un host local en el cual se apoyarn los dems programas
que vamos a instalar, adems de ser el servidor web ms usado en todo el
mundo.

Figura 6.2 Servidor Apache Logo. Fuente://www.apachehttpserv.com.mx.

Este servidor cuenta con mltiples lenguajes de Script, tales como:


PHP.
Perl.
Tcl.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

74

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Python.
Los virtual hosts que tiene Apache, ofrecen un mismo servidor fsico para varias
IPs y nombres de dominio.

6.1.2 MySQL
MySQL, es un sistema de gestor de bases de datos relacionales multiusuario
adems de ser un complemento perfecto para desarrollar sitios web dinmicos, ya
que cada usuario podr modificar el contenido de la pgina o ampliarlo; Pero la
virtud fundamental y la clave de su xito, es que se trata de un sistema de libre
distribucin (se puede descargar libremente de internet) y de cdigo abierto
(significa que cualquier programador puede editar el cdigo, tal como Linux).

Figura 6.3 MySQL Logo. Fuente: //apuntesmysql.com.

Existen cuatro versiones de MySQL:


Estndar: incluye el motor estndar y la posibilidad de usar bases de datos.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

75

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

InnoDB: todo el potencial de MySQL, pero sin soporte completo para


utilizar transacciones.
Max: para usuarios que quieran MySQL con herramientas de prueba para
realizar opciones avanzadas de base de datos
Pro: Versin comercial del MySQL estndar Classic. Igual que la estndar
pero no dispone de soporte para InnoDB.
El uso de MySQL (excepto en la versin Pro) est sujeto a licencia GNU (Public
License, llamada GPL). sta licencia admite el uso de MySQL para crear cualquier
tipo de aplicacin.

6.1.3 PhpMyAdmin.
PhpMyAdmin, es una herramienta que ofrece una interfaz grfica para la
administracin del servidor MySQL, con la utilidad de gestionar (crear, modificar,
borrar) las bases de datos, tablas, campos, relaciones, ndices, etc. y que, es
necesaria para el desarrollo de un sitio web dinmico para que se sustente sobre
una base de datos.

Figura 6.4 PhpMyAdmin Logo. Fuente: //appserver/phpMyAdmin/es.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

76

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Facilita mucho la tarea, ya que nos permite administrar una base de datos sin
necesidad de tener que recurrir a la escritura de lneas de comandos sobre la
consola del equipo, ya que nos proporciona un entorno grfico para ello, que
adems es bastante intuitivo.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

77

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

CAPTULO 7: CREACIN DE LA PGINA


WEB.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

78

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

7.1 Creacin de la Base de Datos usuario en phpMyAdmin 2.10.3.


1. Lo primero que debemos hacer es abrir el phpMyAdmin para poder crear una
base de datos, el mtodo para hacerlo es:
I. Abrir el navegador.
II. Escribir en la barra de buscador lo siguiente:

Figura 7.1 Link para acceder a phpMyAdmin. Fuente: Elaboracin Propia.

III. Dar enter y en unos cuantos segundos, te aparecer una ventana


emergente donde introducirs obligatoriamente los datos correspondientes
a nombre de usuario (root, que es el nombre determinado) y contrasea;
Hay que dar clic en iniciar sesin, para acceder.

Figura 7.2 Ventana emergente de acceso. Fuente: Elaboracin Propia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

79

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

IV. Cuando accedas a phpMyAdmin te mostrar el panel de control donde


podrs crear tus bases de datos de manera fcil y rpida.

Figura 7.3 Ventana de inicio en phpMyAdmin. Fuente: Elaboracin Propia.

V. Mi base de datos contiene una tabla llamada usuarios, que es con la


que estar enlazada las pginas de Nuevo Registro, Acceso, Recuperar
Contrasea, etc Que contienen los datos siguientes:

usuario_id: int (11) [tipo entero con un espacio de 11 caracteres],


con el atributo UNSIGEND [para que solamente introduzca valores
positivos],

como

extra

AUTO_INCREMET

[para

incrementando su valor] y la accin llave primaria

que

vaya

[para

que

no pueda ser editada].

nombre_user: varchar (60) [acepta tipo texto y caracteres especiales


con un espacio de 60].

nombre: varchar (50) [acepta tipo texto y caracteres especiales con


un espacio de 50].

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

80

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

apellido: varchar (50) [acepta tipo texto y caracteres especiales con


un espacio de 50].

password: varchar (50) [acepta tipo texto y caracteres especiales con


un espacio de 50].

email: varchar (100) [acepta tipo texto y caracteres especiales con un


espacio de 100, ya que algunos correos suelen ser extensos].

imagen: varchar (70) [acepta tipo texto y caracteres especiales con


un espacio de 70, porque algunos nombres o links de las imgenes
son largos], adems de habilitar (s) el campo NULO [ya que este
campo puede o no puede llenarse, y no causa ningn inconveniente].

control: enum(Admin, User, Premium) [en este tipo se generar un


listado y en el campo Longitud/Valores, podremos determinar qu es
lo que quiere que se muestre en ese listado], en este caso
pondremos PREDETERMINADO User [para que nos ponga
automticamente cmo quieres que el usuario tenga su cuenta al
generarla, en este caso, todos los que se registren tendrn las
acciones de usuario a menos que el administrador cambie su tipo
de control].

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

81

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 7.4 Estructura Tabla Usuarios. Fuente: Elaboracin Propia.

Con ste ltimo punto concluyo la explicacin de mi base de datos que tiene por
nombre: usuario.

7.2 Creacin de una plantilla en Dreamweaver 8.


1. Abrir un nuevo documento en Dreamweaver 8 y guardarlo instantneamente, en
mi caso el nombre de mi plantilla es: base.
2. Se insertar una tabla de 2 filas y 1 columna con un ancho de 80 cm con
alineacin al centro.

Figura 7.5 Ejemplo tabla. Fuente: Elaboracin Propia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

82

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

3. Pondrs el ttulo de lo que quieras que est en la primera celda, como por
ejemplo: BIENVENIDOS A EDUNET CELAYA. Puedes ponerle un diseo de
fondo, ya sea degradado, color, imagen, etc. Dndole clic a la pgina en blanco y
en la parte inferior te mostrara un recuadro que dice Page Properities o
Propiedades de Pgina. Quedar algo como lo siguiente:

Figura 7.6 Ejemplo plantilla. Fuente: Elaboracin Propia.

El recuadro azul que dice contenido es donde introducirs el diseo o los


comportamientos que realizar tu pgina, dice reemplazar porque cada que se
realice una nueva ventana, se usar la misma plantilla, pero esta estar lista para
editarse a su gusto mediante el contenido.

7.3 Creacin de la ventana Nuevo_Usuario.


1. Esta fue la primera ventana que se cre, con el fin de que los usuarios pudieran
registrarse para poder acceder a todas las opciones y dems pginas con las que
cuenta el sitio de Edunet Celaya.
2. Para que esta fuera posible de crear, se tuvo que poner un Asistente de
insercin

de

formulario,

gracias a este se pudo crear el formulario

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

83

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

donde se introducirn los datos correspondientes (nombre usuario, nombre,


apellido, contrasea, email e imagen) y con este se guardarn los datos mediante
la conexin con phpMyAdmin y la tabla usuarios.

Figura 7.7 Creacin de un nuevo usuario. Fuente: Elaboracin Propia.

Al momento de que el usuario le d clic en Crear Usuario se guardar en la base


de datos, as como lo muestra la siguiente imagen:

Figura 7.8 Insercin en la base de datos de un nuevo usuario. Fuente: Elaboracin Propia.

Adems apliqu un comportamiento de servidor llamado Check New Username


el cual checar el nombre de usuario. Si este se repite generar un error y te
revindicar a otra pgina, que a esta la llam Ya_Existe. El siguiente ejemplo
representa lo anterior, puse un mismo nombre de usuario que en el ejemplo es:
Pau_Balderas, al momento de darle clic a Crear Usuario, mediante al
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

84

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

comportamiento que le coloqu me mandar a Ya_Existe; eso es posible, ya que


mediante un hipervnculo le mand que al introducir un mismo nombre de usuario,
se fuera a la ventana ya mencionada.

Figura 7.9 Ventana Ya_Existe. Fuente: Elaboracin Propia

Despus al darle clic a Intentar con un nuevo usuario, te revindicar a


Nuevo_Usuario, para que tengas una segunda oportunidad de estar registrado
en Edunet Celaya.

7.4 Creacin de la ventana Entrada.


Al tener una cuenta en Edunet Celaya, al momento de crearla te redireccionar a
la pgina Entrada, que es el control de usuario con el que podrs acceder al
panel de control que especifiques, ya sea administrador, usuario normal o usuario
premium. A continuacin se especificar lo que conlleva la pgina Entrada.
Se introduce un formulario donde se insertar una tabla en el que se pondr,
nombre de usuario y la contrasea correspondiente, y un botn.
Agregu un comportamiento de servidor, el cual se hace llamar autentificacin de
usuario

con la opcin de conectar usuario, esto es para que verifique si

la cuenta que se acaba de introducir, est registrada en la base de datos de

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

85

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Edunet, de esta manera si se confirma que est todo correctamente te mandar a


una ventana que lleva por nombre Acceso que es el panel de control de usuario;
pero en caso de que los datos sean nulos, mandar hacia la ventana Error.

Figura 7.10 Ventana Entrada. Fuente: Elaboracin Propia.

Tambin este apartado de la pgina contiene lo que son validaciones de usuario,


as si t no agregas nada en la ventana te pondr un mensaje que te dir que es
necesario que se agreguen los datos correspondientes, tal como en la siguiente
imagen lo dice:

Figura 7.11 Mensaje de formulario. Fuente: Elaboracin Propia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

86

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Los hipervnculos que se visualizan en el formulario Acceso son para las pginas
Nuevo_Usuario y Envio. Al igual si agregas algn dato que no est registrado o
est incorrecto te mandar a la ventana Error, ms que nada la principal funcin
de este apartado es mandar el mensaje de que ha cometido una falta en los datos
que ha ingresado o de tal manera que si quieres abrir una ventana sin haber
pasado por la ventana Entrada, te mandar el error, pero te dejar intentarlo de
nuevo, con ayuda de un hipervnculo; el enlace est hecho para reivindicarte a la
pgina Entrada. Su estructura es la siguiente:

Figura 7.12 Ventana Error. Fuente: Elaboracin Propia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

87

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

7.5 Creacin de la Ventana Envio.


sta ventana se ocupar la siguiente opcin:

Figura 7.13 Opcin Ventana Envio. Fuente: Elaboracin Propia.

Al darle clic al texto que est de color azul (hipervnculo), se revindicar al


apartado Envio, sta servir para mandar la contrasea al correo electrnico
especificado al inicio del registro en Edunet. Se logra mediante el nombre de
usuario, as como se muestra a continuacin:

Figura 7.14 Ventana Envio. Fuente: Elaboracin Propia.

Cuando agregues tu nombre de usuario, y se le d clic al botn correspondiente


de enviar datos te enviar a otra ventana llamada enviodatos que ser la
confirmacin de que el nombre de usuario y contrasea han sido enviados con

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

88

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

xito, solamente si se llenan correctamente los datos. A continuacin se mostrar


la pgina correspondiente al dar clic al botn [Enviar Datos]:

Figura 7.15 Ventana enviodatos exitosamente. Fuente: Elaboracin Propia.

Esta es la confirmacin del envo de los datos que se quieren recuperar, y se pone
la confirmacin del correo electrnico. En la parte inferior manda un mensaje, esto
lo que quiere decir es que en un servidor gratuito no se puede generar esta
accin, solamente con un hosting de paga.
Cuando en la ventana Envio introduces un usuario el cual no est en la base de
datos, te mandar a otra parte de la misma pgina enviodatos, pero con otro
contenido. Esto es posible gracias a un comportamiento de servidor que se llama
Mostrar Regin, que funcionan bajo la condicional If; este lo que va a hacer es
mostrar un mensaje cuando se cumpla una condicin y mostrar otro mensaje, en
caso de que esta condicin ya especificada no se cumpla.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

89

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

El hipervnculo que est en la siguiente imagen, tiene como funcin regresar a que
intentes de nuevo poner un usuario existente, as que te enviar a envio.

Figura 7.16 Ventana enviodatos cuando el usuario no existe. Fuente: Elaboracin Propia.

7.6 Creacin del Panel del Control.


Ya que se explicaron cada una de las opciones fuera del panel de control, es
momento de explicar cada opcin que contiene este mismo.
Primeramente el panel tendr todo lo referente a formato, la bienvenida, algunas
imgenes, el catlogo donde se mostrarn todas las universidades que se
encuentran en la ciudad de Celaya con los datos referentes de cada una de ellas,
las noticias que estarn clasificadas en: Noticias para todos los Usuarios, Noticias
para Usuarios y Noticias para Usuarios Premium, el texto de Desconectar que te
sacar de Edunet para que tu cuenta no se quede abierta por cuestin de
seguridad, el hipervnculo Ir Arriba que te lleva a la parte principal de los datos,
adems de ms opciones donde podrs descargar las noticias, los avisos
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

90

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

personales y el test vocacional, para que al momento de entrar puedas realizar el


test sin salirte de tu panel de control. A continuacin la captura del panel:

Figura 7.17 Panel de Control de Usuario Premium. Fuente: Elaboracin Propia.

Ahora se ve grficamente el panel en donde podrs realizar las acciones de


usuario premium que te ofrece Edunet Celaya, tambin hay usuarios normales, lo
nico diferente es que a este en vez de llegarle notificaciones para universitarios
mandar solamente notificaciones para usuarios; el panel de administrador, te
ofrece ms acciones que se mostrarn a continuacin:

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

91

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Figura 7.18 Panel de Control de Administrador. Fuente: Elaboracin Propia.

Tomar como referencia el compartimiento de administrador, ya que contiene


todas las acciones las cuales hacen funcionar todo lo expresado en la figura 7.18.
A continuacin se explicarn las tareas que realizan las secciones en el panel de
administrador, que bsicamente son las mismas que la de los dems.

Figura 7.19 Primera Seccin del Panel. Fuente: Elaboracin Propia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

92

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Esta se hace gracias a una variable de sesin, lo que hace que el nombre del
usuario que est guardado en

MM_USERNAME, se

refleje en la primera

seccin de tal manera que cuando se cambie de usuario aparezca el nombre con
el que te registraste y sepas que ese muro te pertenece.

Figura 7.20 Variable de Sesin vista Diseo en Dreamweaver 8. Fuente: Elaboracin Propia.

Tambin contiene una imagen.gif que estar en constante movimiento; En la parte


superior derecha, hay una imagen de una puerta, esta se utiliza para realizar la
funcin Desconectar, que har que la cuenta se cierre por completo. Gracias a
que al poner el hipervnculo le agregars un parmetro llamado Log Out User
que comete la accin de que el texto o la imagen al que le pongas un vnculo con
este parmetro, ya no se podr regresar a la ventana anterior a menos de que
pase por Acceso nuevamente. Con esto concluyo la primera seccin del panel.
En la segunda seccin se tienen 2 opciones, donde la primera te mandar al
Catlogo de Universidades y la segunda es para el Test Vocacional, que al
momento de dar clic en el hipertexto, se descargar automticamente de una
manera muy rpida el ejecutable del programa del test. El texto adicional
solamente se escribe mediante el diseo de la pgina, no conlleva ningn tipo de
accin, es solamente de informacin.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

93

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Entonces con lo ya mencionado tendremos lo siguiente:

Figura 7.21 Segunda Seccin del Panel. Fuente: Elaboracin Propia.

Vnculo Catlogo de Universidades: en esta opcin se encuentra todo lo


referente a las universidades de las cuales me di a la tarea de investigar su
pgina

principal,

telfonos,

direcciones,

redes

sociales,

etc.

Est

conformada con tablas, y est seccionada por universidades pblicas y


privadas; en las tablas aparecen todas las carreras referentes a cada
entidad estudiantil, como se mostrar a continuacin:

Figura 7.22 Tablas: Catlogo de Universidades. Fuente: Elaboracin Propia.


DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

94

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

La figura 7.22. Demuestra las tablas con carreras, con las que cuentan
cada una de las universidades correspondientes. Son de manera
corrida, y al final de todo contiene lo siguiente:

Figura 7.23 Parte Inferior de la Pgina Catlogo de Universidades. Fuente: Elaboracin Propia.

Esto ms que nada es para que las personas tengan mayor rapidez al ir
arriba, ya que son muchas tablas y es muy tedioso estar con el mouse
subiendo y subiendo, esto se logr gracias a un hipervnculo el cual lo
conect a la misma pgina Catlogo_Uni para que volviera a cargar la
pgina y apareciera al principio de esta misma. Como el nombre lo dice
anterior es para ir a la ventana que est antes de esta que en este caso
sera Acceso, a parte tambin est ubicado este hipertexto al principio
de la pgina.

Vnculo Test Vocacional: en esta segunda opcin, est alojado el test


vocacional, que al momento de darle clic al vnculo determinado, se
descargar automticamente el ejecutable y comenzar de una manera
muy rpida y eficaz.

Figura 7.24 Descarga de Test Vocacional. Fuente Elaboracin Propia.


DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

95

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

La flecha indica que se est descargando CIPC (6).EXE, que es


[nombre_del_test.ejecutable], que al darle clic aparecer:

Figura 7.25. Ejecutar Archivo. Fuente. Elaboracin Propia.

Se tiene que ejecutar. Es un Test con 150 preguntas, que al final te dar
resultados en una grfica y dar tus fuertes para poder meterte a la
universidad correcta de acuerdo a tus capacidades.

Figura 7.26. Programa de Test Ejecutado. Fuente: Elaboracin Propia.

El cdigo que se tiene para la descarga del test es:

Figura 7.25 Cdigo para descarga. Fuente: Elaboracin Propia.


DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

96

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

A lo que se refiere es que <a href=, va a llamar a la carpeta que se llama


test y que dentro de esa carpeta estar /CIPC.EXE>. Todo esto estar
alojado en el texto Test Vocacional que est como ejecutable .exe; hay
que cerrar la etiqueta que se abri </a>. Con esto concluyo la segunda
seccin del panel.
En la tercera seccin se encuentran las acciones que solamente un administrador
puede realizar, tal como recurrir al listado de usuarios, crear un aviso a usuarios
en general o a un usuario en especfico, a parte poder borrarlos de la pgina y
crear una notificacin para en general. Esto se cre gracias a una Variable de
Sesin, que se muestra a continuacin:

Figura 7.26 Variable de sesin Admin. Fuente: Elaboracin Propia.

[MM_UserGroup] quiere decir, es que si la variable de sesin es igual a Admin,


entonces habilitar la tercera seccin y si llega a ser User o Premium, se
ocultar. Esto va dentro del recuadro donde se pondr el contenido y se tendr
que ingresar la accin en un <?php ?> y al cerrar el parntesis despus de
Admin se tiene que poner una llave { para que la funcin se cierre con otro
<?php ?>, pero al final de todo tu recuadro adentro del php ya mencionado debe
ir } , para que concluyas con la accin del if. A continuacin la captura del
apartado donde solamente un administrador puede tener acceso, para ver el
listado de usuario, enviar avisos al mismo de una manera especfica, adems de
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

97

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

borrarlo y aparte crear sus notificaciones siendo usuario, universitario o para todos
en general:

Figura 7.27 Tercera Seccin del Panel. Fuente: Elaboracin Propia.

Se divide en dos los cuales tienen diferentes funciones que se explicarn a


continuacin:

Listado de Usuarios: las funciones que se tienen dentro de esta ventana es


mediante una tabla donde contiene a todos los usuarios en general con
toda su informacin correspondiente como nombre de usuario y correo
electrnico. A este se le puede crear un aviso, la ventaja es que especificas
el aviso de la persona a la cual le quieres mandar el aviso, al igual que
puedes borrarla de la lista y que ya no pueda ingresar de nuevo a Edunet.

Figura 7.28 Listado de Usuarios. Fuente: Elaboracin Propio.

Para el hipervnculo crear aviso te mandar a otra pgina donde


insertars el texto del aviso y un botn para mandar el mismo; Obtiene
otras dos opciones que es para regresar a una pgina anterior y para
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

98

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

regresar al panel de control, esto se logra mediante las conexiones por el


link o por la carpeta a la que querrs regresar.

Figura 7.29 Ventana Nuevo Aviso. Fuente: Elaboracin Propia.

Al dar clic en Insertar Aviso, se proyectar a tu inicio en el panel de control


como se muestra en la siguiente imagen:

Figura 7.30 Vista Avisos Personalizados en Panel de Control. Fuente: Elaboracin


Propia.

Esto se logra mediante la variable de sesin MM_USERNAME y la tabla


de la base de datos llamada Avisos, tambin gracias al comportamiento
de servidor llamado Repetir Regin, los avisos se pueden visualizar de
DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

99

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

una manera acomodada y salteada, adems de que actualiza cada uno de


estos para que se tenga la informacin de manera renovada.
Para el hipervnculo Borrar, se encuentran dos ventanas ms, las cuales
son para decidir si en realidad lo quieres borrar o no; en caso de haberlos
borrado te mandar al listado pero sin el usuario y si no te regresa al listado
de usuarios normalmente. De sta manera:

Figura 7.31 Ventana Si/No Eliminar un Usuario. Fuente: Elaboracin Propia.

Al momento de darle SI, automticamente te borra el usuario de la base de


datos y te redirecciona al listado, como ven en la siguiente imagen, ya no
aparece Silvia_fono, porque fue eliminada:

Figura 7.32 Listado de Usuarios sin Silvia_fono. Fuente: Elaboracin Propia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

100

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Aadir Notificaciones: este tiene una nica funcin enviar notificaciones o


noticias a los dos tipos de usuario y a usuarios en general.
Esta pgina cuenta con un formulario, gracias a este se puede plasmar al
panel de control, ya que tiene un juego de registro una tabla de la base de
datos, llamada Noticias y sta misma contiene tres comportamientos, los
cuales les llam:
Tabla Noticias Todos.
Tabla Noticias Usuarios.
Tabla Noticias Premium.
A partir de las anteriores, se tuvo que especificar cada una de las noticias
por la variable de sesin [MM_UserGroup] esto significa que si la variable
de sesin es igual a Noticias para Todos los Usuarios, entonces habilitar
las noticias para los 2 tipos de usuarios y si las notificaciones llegan a ser
Noticias para los Usuarios o Noticias para Universitarios, se enviarn a
cada visitante, ya dependiendo que tipo de cuenta solicite, ya que las
noticias para universitarios son ms concretas, que las otras.

Figura 7.33 Ventana para Agregar una Notificacin. Fuente: Elaboracin Propia.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

101

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Al momento de llenar el formulario, es como si se mandara un correo electrnico


que contendr todo lo referente a los campos tal como: Universidad, Asunto,
Texto, Fecha y lo ms importante, especificar a qu grupo de usuarios se mandar
la notificacin (todos, usuarios o premium). Se plasmar en el panel del usuario
pretendiendo del grupo. Presentando un ejemplo en la Figura 7.33, se especifica
que esa noticia va para todos o que estn registrados. Y en cada perfil se
visualizara de esta manera:

Figura 7.34 Visualizacin de la Notificacin para Todos los Usuarios. Fuente: Elaboracin Propia.

Lo ingresado, se pudo visualizar en el panel de Notificaciones para Usuarios y


Universitarios (todos), en caso de que haya escogido Premium entonces las
noticias le llegaran a los Universitarios solamente y as sucesivamente.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

102

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

Con la tercera seccin se termina la explicacin de la Creacin del Panel de


Control mencionando cada una de las acciones que contiene, cules son las
funciones que se logran, qu tipo de cdigo y diseo se implant, y lo ms
importante, explicar cada una de las herramientas que se utilizaron en
Dreamweaver 8 para que sta pgina fuera totalmente dinmica y funcional.
Este sera el ltimo subtema para la explicacin de mi proyecto; el cual lo conclu
con gran xito y de acuerdo a mis objetivos por los que Edunet Celaya, se creara.

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

103

INSTITUTO TECNOLGICO DE SUPERACIN INTEGRAL A.C.


BACHILLERATO TECNOLGICO DE SUPERACIN INTEGRAL.

BIBLIOGRAFA
Redes Locales Instalacin y Configuracin Bsica, Raya Jos Luis/Raya Laura/
Martnez Miguel A. Editorial Alfaomega. 1ra Edicin.

REFERENCIAS DE INTERNET
http://futuraslicenciadasenturismo.bligoo.com.mx/media/users/35/1750086/files/66
1145/PRINCIPALES_NAVEGADORES_DE_INTERNET.pdf
http://es.slideshare.net/Rubenislasdominguez/safari-navegador
http://www.e-autonomos.com/admin/SOFTWARE/yrY3r4Drw9.pdf
https://www.um.es/atica/documentos/html.pdf
http://www.fdi.ucm.es/profesor/jpavon/web/31-ServidoresWeb-Apache.pdf
http://www.dipler.org/2008/10/que-es-appserv/
http://www.cartagena99.com/recursos/programacion/apuntes/mysql.pdf
http://www.desarrolloweb.com/articulos/534.php
http://servicio.uca.es/softwarelibre/publicaciones/apuntes_php
http://es.scribd.com/doc/8614394/Que-Es-AppServ#scribd
http://www.fdi.ucm.es/profesor/jpavon/web/35-PHP-MySQL.pdf

DESARROLLO DE PGINA WEB PARA BSQUEDA DE UNIVERSIDADES: EDUNET CELAYA

104

You might also like