UNIDAD DIDCTICA 1.

CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS

2. EL DESARROLLO WEB
!" $%&'(()**) +%,
'(-./0%10.(' $% .2' '3*/1'1/42 +%,

!"#$%&$ ( )$*+#,-*
Las apllcaclones web suelen Lener una arqulLecLura cllenLe/servldor.

La arqulLecLura cllenLe-servldor es un modelo de apllcacln dlsLrlbulda en el que las
Lareas se reparLen enLre los proveedores de recursos o servlclos, llamados
servldores, y los demandanLes de los recursos o servlclos, llamados cllenLes. Ln esLe
modelo de apllcacln, la capacldad de proceso esL reparLlda enLre el cllenLe y el
servldor.

La separacln enLre cllenLe y servldor es una separacln de Llpo lglco, donde el
servldor no se e[ecuLa necesarlamenLe sobre una sola mqulna nl es necesarlamenLe
un solo programa.

Lse es el caso de las apllcaclones web, donde la apllcacln esL dlsLrlbulda enLre
varlos ordenadores a Lraves de una red de ordenadores.

Ll cllenLe e[ecuLa el navegador web, el servldor e[ecuLa el servldor web y ambos se
comunlcan a Lraves de lnLerneL por medlo del proLocolo P11.


567896:7
Ll mlsmo modelo se puede apllcar en redes prlvadas, y en ese caso, se suele declr
que la red prlvada es una lnLraneL".




UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB
%6 ;<= 565>5<=

ConsulLas cllenLe - servldor

?@@A
Cuando el navegador neLscape navlgaLor lnLrodu[o el lengua[e de scrlpL !avaScrlpL,

!BBA
La lmporLancla del procesamlenLo de las apllcaclones web en el lado del cllenLe ha
aumenLado conslderablemenLe desde el ano 2003 con la expansln de A!Ax

L[emplo: Coogle docs



or e[emplo, una arqulLecLura muy comun es Lodo en un servldor": el servldor web
y el servldor de bases de daLos se alo[an en el mlsmo servldor.




UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB


'8CD57:>7D89 :6 ! 65E:;:=

uonde el cllenLe sollclLa recursos y el servldor responde dlrecLamenLe a la sollclLud,
con sus proplos recursos. LsLo slgnlflca que el servldor no requlere oLra apllcacln
para proporclonar parLe del servlclo.


una arqulLecLura muy comun es Lodo en un servldor": el servldor web y el servldor
de bases de daLos alo[ados en el mlsmo servldor.

un arqulLecLura ms soflsLcada se logra cuando se separa el servldor web y el
servldor de bases de daLos.



'8CD57:>7D89 :6 F 65E:;:=
Aqul exlsLe un nlvel lnLermedlarlo.
1. un cllenLe, es declr, el equlpo que sollclLa los recursos, equlpado con una
lnLerfaz de usuarlo (generalmenLe un navegador Web) para la presenLacln.
2. Ll servldor de apllcaclones (=<G7H98: 567:8I:J5<), cuya Larea es proporclonar
los recursos sollclLados.
3. Ll servldor de daLos, que proporclona al servldor de apllcaclones los daLos
que requlere

UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB



ero sl van a acceder varlos mlles de usuarlos o lncluso mlllones al mlsmo Llempo,
son necesarlas arqulLecLuras ms comple[as y cosLosas.

una gran[a de servldores aporLa lmporLanLes venLa[as: permlLe dlsLrlbulr las
peLlclones enLre los dlferenLes servldores.




Sln embargo, en los ulLlmos anos ha surgldo un nuevo concepLo de arqulLecLura, la
arqulLecLura basada en la compuLacln en la nube o cloud compuLlng.

UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB
Poy es poslble hacer uso de slsLemas con una arqulLecLura muy comple[a y poLenLe
sln lncurrlr en cosLes muy elevados.

L[emplo:
Amazon Web Servlces

hLLp://aws.amazon.com/es/

'I9K<6 +:L &:8E5>:= ('+& abrevlado) es una coleccln de servlclos de escrlLorlo
remoLo (Lamblen llamados servlclos web) que en con[unLo forman una plaLaforma
de compuLacln en la nube, ofrecldas a Lraves de lnLerneL por Amazon.com. Ls
usado en apllcaclones populares como uropbox, loursquare, PooLSulLe.

Ls una de las oferLas lnLernaclonales ms lmporLanLes de la compuLacln en la nube
complLe y dlrecLamenLe conLra servlclos como Wlndows Azure y Coogle Cloud
laLform. Ls conslderado como un plonero en esLe campo.


$./010234 5/ 146 6782060234 9/:; <=5/8= 08>?20=

Modelo clslco de e[ecucln de una apllcacln web.

Ln la arqulLecLura cllenLe/servldor apllcada a la Web, el cllenLe, el navegador web,
slempre lnlcla la comunlcacln al reallzar una peLlcln al servldor.



MedlanLe el proLocolo P11.

UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB



Crflcos

ArLlculo A[ax: A new Approach Lo Web AppllcaLlons"

hLLp://www.adapLlvepaLh.com/ldeas/a[ax-new-approach-web-appllcaLlons/



llgure 1: 1he LradlLlonal model for web appllcaLlons (lefL) compared Lo Lhe A[ax
model (rlghL).


Ln el modelo clslco, la mayorla de las acclones que reallza el usuarlo lnlclan una
peLlcln P11 al servldor web.




UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB
ero problemas:

una pglna web no es slo el cdlgo P1ML, slno Lodos los flcheros adlclonales que se
emplean en la pglna, como las lmgenes, las ho[as de esLllo CSS, el cdlgo de scrlpL
y oLras cosas que hacen que una pglna web pueda ocupar varlos megas.







UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB

M-.N %& %* $%&'(()**) +%,O

,$)@**-""- A ,#)$B- C$D

Ll dlseno web se reflere al dlseno vlsual de un slLlo web o de una pglna web y con
frecuencla lmpllca el dlseno de los elemenLos grflcos de la pglna. Ln el dlseno se
Llenen en cuenLa elemenLos grflcos como la Llpografla, los colores, los Lamanos y las
proporclones.

%; J5=:P<

lmpllca el dlseno de los elemenLos grflcos de la pglna. Ln el dlseno se Llenen en
cuenLa:

o Llpografla,
o los colores
o los Lamanos
o las proporclones

Q:889I5:679=R

Adobe hoLoshop
ClM
hLLp://www.glmp.org.es/
hLLp://www.glmp.org/

lormaLo:
ulseno sln cdlgo - lmagen ([pg, png) en Lrozos
ara componer en P1ML + CSS
ara los elemenLos grflcos

%; J:=988<;;< H:L

arLe CllenLe
arLe Servldor

Se suele dlvldlr en dos parLes que pueden esLar conecLadas, la parLe cllenLe y la
parLe servldor que funclonan de forma lndependlenLe y emplean Lecnologlas
dlsLlnLas, aunque muchas veces Lamblen lnLeracLuan, por lo que Lamblen se habla de
programacln de la parLe cllenLe-servldor.



UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB

ConoclmlenLos necesarlos del desarrollador para la parLe cllenLe:

o P1ML + CSS
o !ava ScrlpL
o uCM

ConoclmlenLos necesarlos del desarrollador para la parLe servldor:

Ll desarrollo de la parLe servldor se reflere a la programacln necesarla para
consLrulr el "back end" de un slLlo web.

o Lengua[es de scrlpL como
o P
o AS
o AS.nL1
o !S
o erl y Coldfuslon
o ulseno y desarrollo de las bases de daLos
o Segurldad



UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB



UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB




UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB
Ln la segunda parLe podemos enconLrar daLos que provlenen de la Cflclna de
LsLadlsLlcas de Lmpleo de los LsLados unldos.

LsLo concuerda con el senLldo comun, ya que en un proyecLo normal la fase de
desarrollo requlere un mayor esfuerzo que la fase de dlseno, por lo que es necesarla
una mayor mano de obra.

or oLro lado, desLacan los salarlos que reclbe cada uno, ya que el salarlo del
desarrollador web casl dobla al del dlsenador web.

Crflco

hLLp://www.downgraf.com/lnsplraLlon/web-deslgner-vs-web-developer-
lnfographlc/



Se comparan las apLlLudes prlnclpales de uno y oLro:

$5=:P9J<8 H:L
neceslLa lnLulcln, creaLlvldad e lmaglnacln.

$:=988<;;9J<= H:L
neceslLa lglca, pensamlenLo llneal y Lecnlca.
UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB

un dlsenador web neceslLa una LlLulacln en dlseno grflco, bellas arLes o
produccln mulLlmedla, mlenLras que un desarrollador web neceslLa experlencla en
programacln.

Crflco

hLLp://www.slmplesquare.com/wp-conLenL/uploads/A-Web-SlLe-ueslgned-S.pdf



Ll grflco dlvlde el desarrollo de un slLlo web en las slgulenLes fases:

ConLacLo lnlclal
lanlflcacln
ConLenldo
ulseno
uesarrollo
LanzamlenLo.

ero depender del Llpo de slLlo web que creemos, la fase de desarrollo sera ms o
menos exLensa y comple[a.







UNIDAD DIDCTICA 1. CREACIN DE PGINAS WEB CON EL LENGUAJE DE MARCAS
2. EL DESARROLLO WEB

2'S%T'$)(%& +%,

EF@)&@ !GH%,-I
PasLa cundo Lengo que hacer que ml slLlo web sea compaLlble con lnLerneL
Lxplorer 6, 7, 8 o 9?
Ln una lnLraneL esLamos en un enLorno conLrolado en el que se puede saber que
navegadores usan los usuarlos o lncluso se puede obllgar a los usuarlos a que usen
un navegador concreLo.

Ln lnLerneL no exlsLe el usuarlo medlo, cada usuarlo es unlco. LnLonces, hasLa
cundo Lengo que hacer que ml slLlo web sea compaLlble con un navegador
concreLo?

La me[or forma de asegurarse de que un slLlo web funclone correcLamenLe con los
navegadores web acLuales y fuLuros es empleando los esLndares web de 3WC

Segun !akob nlelsen y Poa Loranger en "rlorlzando la usabllldad web",

nuesLra recomendacln general es que hay que esperar enLre clnco y sels anos a
parLlr del lanzamlenLo de una nueva versln del navegador anLes de de[ar de
preocuparse por la anLerlor. or e[emplo, lL 3 fue lanzado en 1999, por lo que podlas
lgnorar con segurldad la versln 4 en 2004.

Ln realldad, para Lomar la declsln de de[ar de soporLar un navegador, me[or
comprueba los reglsLros del servldor para ver que porcenLa[e de Lus cllenLes acLuales
emplea esa versln.

Sln embargo soporLar navegadores anLlguos Le puede lmpedlr hacer uso de las
nuevas Lecnologlas como P1ML 3. ueberlamos anlmar a Lus usuarlos a acLuallzar sus
navegadores web.