Villa Garca Amparo Isabeth.

Programacin WEB
UNIDAD 1 INTRODUCCIN A LAS TECNOLOGAS WEB
1.1 Perspectiva Histrica e! I"ter"et
Internet se inici como un proyecto de defensa de los Estados Unidos. A finales de los aos 60, la ARPA
(Agencia de Proyectos de Inestigacin Aan!ados" del #epartamento de #efensa defini el protocolo
$%P&IP. Aun'ue pare!ca e(trao, la idea era garanti!ar mediante este sistema la comunicacin entre
lugares ale)ados en caso de ata'ue nuclear. A*ora el $%P&IP sire para garanti!ar la transmisin de los
pa'uetes de informacin entre lugares remotos, siguiendo cual'uier ruta disponi+le.
En ,-./, ARPAnet comen! a funcionar como red, siriendo como +ase para unir centros de inestigacin
militares y uniersidades, y se tra+a) en desarrollar protocolos m0s aan!ados para diferentes tipos de
ordenadores y cuestiones espec1ficas. En ,-23 se adopt el $%P&IP como est0ndar principal para todas
las comunicaciones, y en ,--0 desapareci ARPAnet para dar paso )unto a otras redes $%P&IP a Internet.
Por a'uel entonces tam+i4n comen!aron a operar organi!aciones priadas en la Red.
1#$ Pr%t%c%!% HTTP
El protocolo de transferencia de *iperte(to (5$$P, 5yper$e(t $ransfer Protocol" es el protocolo usado en
cada transaccin de la 6e+ (666". El *iperte(to es el contenido de las p0ginas 7e+, y el protocolo de
transferencia es el sistema mediante el cual se en1an las peticiones de acceder a una p0gina 7e+, y la
respuesta de esa 7e+, remitiendo la informacin 'ue se er0 en pantalla. $am+i4n sire el protocolo para
eniar informacin adicional en am+os sentidos, como formularios con mensa)es y otros similares.
8us principales caracter1sticas son9
:igere!a9 reduce la comunicacin entre clientes y seridores a intercam+ios discretos, de modo 'ue
no so+recarga la red y permite saltos *iper;te(tuales r0pidos.
E(tensi+ilidad9 contempla distintos tipos de transacciones entre clientes y seridores y el futuro
desarrollo de otros nueos. 8eg<n =erners;:ee (,--3" el es'uema +0sico de cual'uier transaccin 5$$P
entre un cliente y un seridor es el siguiente9
%one(in9 El cliente esta+lece una cone(in con el seridor a tra4s del puerto 20 (puerto
est0ndar", u otro especificado. > Peticin9 El cliente en1a una peticin al seridor. >Respuesta9 El seridor
en1a al cliente la respuesta (es decir, el o+)eto demandado o un cdigo de error". > %ierre9 Am+as partes
cierran la cone(in. :a eficiencia del 5$$P posi+ilita la transmisin de o+)etos multimedia y la reali!acin
de saltos *iper;te(tuales con gran rapide!. :a ?igura 3 muestra una pgina Web con su correspondiente
direccin 5$$P.
,#$#1 Ar&'itect'ra e! (((
El 666 responde a un modelo @cliente ; seridor@. 8e trata de un paradigma de diisin del tra+a)o
inform0tico en el 'ue las tareas se reparten entre un n<mero de clientes 'ue efect<an peticiones de
sericios de acuerdo con un protocolo, y un n<mero de seridores 'ue responden a estas peticiones. En el
Web los clientes demandan *iperte(tos a los seridores
1#$#$ URL
8ignifica Uniform Resource :ocator, es decir, locali!ador uniforme de recurso. Es una secuencia de
caracteres, de acuerdo a un formato est0ndar, 'ue se usa para nom+rar recursos, como documentos e
im0genes en Internet, por su locali!acin.
:as UR: fueron una innoacin fundamental en la *istoria del internet. ?ueron usadas por primera e! por
$im =erners;:ee en ,--,, para permitir a los autores de documentos esta+lecer *iperenlaces en la 6orld
6ide 6e+ (666 o 6e+". #esde ,--A, en los est0ndares del internet, el concepto de UR: *a sido
Villa Garca Amparo Isabeth. Programacin WEB
incorporado dentro del m0s general de URI (Uniform Resource Identifier ; Identificador Uniforme de
Recurso", pero el t4rmino UR: a<n se utili!a ampliamente.
El formato general de un UR: es9
protocolo9&&m0'uina&directorio&fic*ero
$am+i4n pueden aadirse otros datos9
protocolo9&&usuario9contraseaBm0'uina9puerto&directorio&fic*ero
Un 5$$P UR: com+ina en una direccin simple los cuatro elementos +0sicos de informacin 'ue son
necesarios para recuperar un recurso desde cual'uier parte en la Internet9
El protocolo 'ue se usa para comunicar,
El anfitrin (seridor" con el 'ue se comunica,
El puerto de red en el seridor para conectarse,
:a ruta al recurso en el seridor (por e)emplo, su nom+re de arc*io".
Un UR: t1pico puede lucir como9
*ttp9&&es.7iCipedia.org920&7iCi&8pecial98earc*Dsearc*EtrenFgoEGo
*ttp es el protocolo,
es.7iCipedia.org es el anfitrin,
20 es el n<mero de puerto de red en el seridor (siendo 20 el alor por omisin para el protocolo
5$$P, esta porcin puede ser omitida por completo",
&7iCi&8pecial98earc* es la ruta de recurso,
Dsearc*EtrenFgoEGo es la cadena de +<s'uedaH esta parte es opcional.
Iuc*os naegadores 7e+ no re'uieren 'ue el usuario ingrese @*ttp9&&@ para dirigirse a una p0gina 7e+,
puesto 'ue 5$$P es el protocolo m0s com<n 'ue se usa en naegadores 7e+. Igualmente, dado 'ue 20
es el puerto por omisin para 5$$P, usualmente no se especifica. Usualmente uno slo ingresa una UR:
parcial tal como 777.7iCipedia.org&7iCi&$rain. Para ir a una p0gina principal usualmente se entra slo el
nom+re de anfitrin, como 777.7iCipedia.org.
5$I: es el acrnimo ingl4s de 5yper$e(t IarCup :anguage, 'ue se traduce al espaol como :engua)e de
Eti'uetas de 5iperte(to. Es un lengua)e de marcado diseado para estructurar te(tos y presentarlos en
forma de *iperte(to, 'ue es el formato est0ndar de las p0ginas 7e+.5$I: es un lengua)e para la definicin
de estilos lgicos en documentos de *iperte(to, siendo el medio principal para la diseminacin de
informacin en 6orld 6ide 6e+. 5$I: se limita a descri+ir la estructura y el contenido de un documento,
nunca el formato de la p0gina y su apariencia, ya 'ue 4stos son muy dependientes del isuali!ador
utili!ado.
Gracias a Internet y a los naegadores como Internet E(plorer, Jpera, ?irefo(, Ketscape o 8afari, el 5$I:
se *a conertido en uno de los formatos m0s populares y f0ciles de aprender 'ue e(isten para la
ela+oracin de documentos para 7e+. 5$I: no es un :engua)e de Programacin, aun'ue si permite
incluirle cdigo en :engua)es de Programacin, +a)o ciertos criterios, e(tendiendo su capacidad y
funcionalidad, aun'ue eso se logre e(cediendo los alcances del 5$I: en s1.
1#)#1 HT*L c%+% '" tip% SG*L#
:engua)e est0ndar utili!ado en la 6e+ para representar la informacin intercam+iada por sus usuarios en
forma de documentos de *iperte(to. Podr1amos definir este lengua)e como un documento A8%II con una
serie de eti'uetas 'ue indican al naegador cmo interpretar y dar formato al te(to 'ue las acompaa.
Est0 +asado en el metalengua)e 8GI: (8tandard Generali!ed IarC;up :anguage, I8J 22.-9,-26", un
est0ndar para la descripcin de documentos. :a gram0tica 5$I: est0 escrita en 8GI:, en un documento
Villa Garca Amparo Isabeth. Programacin WEB
denominado #$# (#ocument $ype #efinition". El 8GI: es un sistema para definir lengua)es para dar
formato a documentos (marCup languages".
1#)#$ E!e+e"t%s e! !e",'a-e HT*L#
A las instrucciones 'ue forman el lengua)e 5$I: las denominaremos elementos. 8e distinguen tres tipos
de elementos9
;Elementos llenos9 Estos elementos se forman mediante una marca de inicio y otra de final. En 5$I: las
marcas se de militan con los signos L (inferior a" y M (superior a". :a marca de fin es id4ntica a la inicial
pero con el aadido de la +arra inclinada, &, )usto antes del nom+re de la misma. ;Elementos ac1os9
Estos elementos no re'uieren de la marca final, ya 'ue normalmente no producen un efecto so+re el te(to
en s1, sino 'ue definen separadores.;Elementos con argumentos9
Algunos elementos tienen argumentos, los cuales son denominados atri+utos. %ada uno de estos atri+utos
podr0 tener un alor el cual ir0 entre comillas, si es alfanum4rico9
Lmarca atri+uto, atri+utoNEnum4rico atri+uto3E@alfanum4rico@M
1#)#) Ta.!as e" HT*L#
Una ta+la 5$I: puede ser considerada de manera simple como un grupo de filas donde cada una de ellas
contiene un grupo de celdas. :as ta+las, as1 como toda estructura en documentos 5$I:, son definidas
usando tags. Una ta+la simple puede ser insertada en un documento 5$I: usando tres tags9 el tag 5$I:
ta+le (principal contenedor", el tag 5$I: tr (fila contenedora" y el tag 5$I: td (celda simple
1#)#/ 0%r+'!ari%s#
Usando 5$I: podemos <nicamente eniar el formulario a un correo electrnico. 8i 'ueremos procesar el
formulario mediante un programa la cosa puede resultar un poco m0s comple)a ya 'ue tendremos 'ue
emplear otros lengua)es m0s sofisticados. En este caso, la solucin m0s sencilla es utili!ar los programas
prediseados 'ue nos proponen un gran n<mero de seridores de alo)amiento y 'ue nos permiten
almacenar y procesar los datos en forma de arc*ios u otros formatos. 8i uestras p0ginas est0n alo)adas
en un seridor 'ue no os propone este tipo de enta)as, siempre pod4is recurrir a seridores de terceros
'ue ofrecen este u otro tipo de sericios gratuitos para 7e+s. Por supuesto, e(iste otra alternatia 'ue es
la de aprender lengua)es como A8P o P5P 'ue nos permitir0n, entre otras cosas, el tratamiento de
formularios.
:os formularios son definidos por medio de las eti'uetas LformM y L&formM. Entre estas dos eti'uetas
colocaremos todos los campos y +otones 'ue componen el formulario. #entro de esta eti'ueta LformM
de+emos especificar algunos atri+utos9
acti%". #efine el tipo de accin a llear a ca+o con el formulario.
E(isten dos posi+ilidades9
> El formulario es eniado a una direccin de correo electrnico
> El formulario es eniado a un programa o script 'ue procesa su contenido
En el primer caso, el contenido del formulario es eniado a la direccin de correo electrnico especificada
por medio de una sinta(is de este tipo9
Lform actionE@mailto9direccionBcorreo.com@ ...M
8i lo 'ue 'ueremos es 'ue el formulario sea procesado por un programa, *emos de especificar la direccin
del arc*io 'ue contiene dic*o programa. :a eti'ueta 'uedar1a en este caso de la siguiente forma9
Lform actionE@direccin del arc*io@ ...M
+et1%. Este atri+uto se encarga de especificar la forma en la 'ue el formulario es eniado. :os dos
alores posi+les 'ue puede tomar esta atri+uto son post y get. A efectos pr0cticos y, salo 'ue se os diga
lo contrario, daremos siempre el alor post.
e"ct2pe# 8e utili!a para indicar la forma en la 'ue ia)ar0 la informacin 'ue se mande por el formulario.
En el caso m0s corriente, eniar el formulario por correo electrnico, el alor de este atri+uto de+e de ser
@te(t&plain@.
Ejemplo de etiqueta <form> completa
As1, para el caso m0s *a+itual ;el en1o del formulario por correo; la eti'ueta de creacin del formulario
tendr0 el siguiente aspecto9
Lform actionE@mailto9direccionBcorreo.com (o nom+re del arc*io de proceso"@ met*odE@post@
enctypeE@te(t&plain@M
Villa Garca Amparo Isabeth. Programacin WEB
1#/ Ev%!'ci" esarr%!!% e ap!icaci%"es We.
Una aplicacin 7e+ es similar a un programa tradicional, con la diferencia 'ue este se puede e)ecutar
desde cual'uier ordenador con acceso a internet o a una red local este donde este.
El usuario accede a la aplicacin a tra4s de un simple naegador de internet, no re'uiriendo ning<n otro
soft7are para su e)ecucin.
:as enta)as son independientes del sistema operatio 'ue utilice, adem0s ya no tendr0 'ue instalar el
programa en cada ordenador donde desee utili!arlo <nicamente +asta con instalarlas en su seridor.
Om+ito9 *a+itualmente, las aplicaciones 7e+ se utili!an para controlar el funcionamiento interno de los
diferentes departamentos de la empresa, gestionando9
P>%ontactos
P>Reuniones
P>Eentos
P>%orreos electrnicos
P>EtcQ
Aun'ue no solamente es este su campo de aplicacinH la eolucin de los lengua)es de desarrollo est0
*aciendo 'ue cada e! m0s acaparen el mercado propio de los programas tradicionales
El desarrollo de aplicaciones 7e+ *a eolucionado por los siguientes aspectos9
Eolucin del (uso&demandas, $ecnolog1as&Kaegador, $ecnolog1as&8eridores", IarCeting de entas,
5iper;5ype y las #ot.com, Informatios y contenido est0tico (5$I: est0tico".
>#5$I: (R#S de din0mico", 'ue incluye la posi+ilidad de incluir comportamiento din0mico en la p0gina.
E)emplo9 men<s, *o)as de estilo.
:engua)es de programacin del lado del cliente como Taascript, U+script, Applets (Taa".
Incorporacin de multimedia (?las*, 8iler:igt*".
:engua)es de programacin del lado del seridor (tecnolog1a %GI".
:engua)es de programacin del lado del seridor de siguiente generacin (A8P, P5P, T8P, etc.".
#esarrollo de tecnolog1a para la seguridad (uso de claes, encriptacin".
Aplicaciones en 6e+ como %omercio Electrnico.
E;Goernment, E;procurement, Internet +anCing, etc.
8ericios 6e+.
1#3# H%-as e esti!% e" cascaa e i"tr%'cci" a! 4*L#
CSS es un lengua)e sencillo para la aplicacin de estilos a un elemento VI:. Un documento VI: puede
estar formateado de muc*as diferentes formas y propsitos por lo 'ue ser1a muy <til utili!ar un slo
documento VI: y diferentes posi+les formateos dependiendo del uso 'ue se le aya a dar al documento.
%88, %ascading 8tyle 8*eets, *o)as de estilo en cascada, fue introducido en ,--6 como el standar para
aadir informacin de estilo a los documentos 5$I:. Pero este uso esta+a restringido slo a las eti'uetas
propias de 5$I:.
VI:, es el est0ndar de E(tensi+le IarCup :anguage. VI: no es m0s 'ue un con)unto de reglas para
definir eti'uetas sem0nticas 'ue nos organi!an un documento en diferentes partes. VI: es un
metalengua)e 'ue define la sinta(is utili!ada para definir otros lengua)es de eti'uetas estructurados.
VI: fue creado al amparo del 6ord 6ide 6e+ %onsortium (63%" organismo 'ue ela por el desarrollo de
666 partiendo de las amplias especificaciones de 8GI:.
4*L.
(eVtensi+le IarCup :anguage :engua)e e(tensi+le de marcas" es un con)unto de reglas 'ue siren para
definir eti'uetas sem0nticas para organi!ar un documento. Adem0s el VI: es un metalengua)e 'ue te
permite disear tu propio lengua)e de eti'uetas. A diferencia de un lengua)e de eti'uetas normal (5$I:",
VI: te permite definir tu propio lengua)e..Ui4ndolo desde un punto de ista simple y sin meternos en
definiciones muy t4cnicas. VI: nos ayuda a tener nuestra informacin estructurada )er0r'uicamente por
medio de eti'uetas o $ags 'ue nosotros mismos crearemos. A*ora, para crear un documento VI: no
necesitas nada m0s 'ue un Procesador de te(to simple, E).9 =loc de Kotas y al terminar el documento solo
tienes 'ue salarlo con la e(tensin (ml.