PROGRAMACI PROGRAMACI PROGRAMACI PROGRAMACI PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB

PROGRAMACI PROGRAMACI PROGRAMACI PROGRAMACI

C
O
N
T
E
N
I
D
O
S
C
O
N
T
E
N
I
D
O
S
D
e
f
i
n
i
c
i

n

d
e

a
p
l
i
c
a
c
i

n

w
e
b
A
n
t
e
c
e
d
e
n
t
e
s
PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB
A
n
t
e
c
e
d
e
n
t
e
s
E
v
o
l
u
c
i

n

d
e

l
a
s

t
e
c
n
o
l
o
g

a
s
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
DEFINICION DEFINICION
APLICACIN.- (Del lat. applicato, -nis).
1. f. Accin y efecto de aplicar o aplicarse.
2. f. Aficin y asiduidad con que se hace algo,
especialente el estudio.
3. f. !rnaentacin e"ecutada en ateria distinta
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
3. f. !rnaentacin e"ecutada en ateria distinta
de otra a la cual se sobrepone.
4. f. Inform. #rograa preparado para una
utili$acin especfica, coo el pago de ninas,
foracin de un banco de t%rinos l%&icos, etc.
5. f. Mat. !peracin por la que se hace
corresponder a todo eleento de un con"unto un
solo eleento de otro con"unto.
Diccionario RAE
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
DEFINICION DEFINICION
APLICACIN.-un prograa o con"unto
de prograas para ayudar al usuario de un
ordenador para procesar una tarea
especfica.
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
especfica.
Diccionario Oxford
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
DEFINICION DEFINICION
APLICACIN WEB.- una anera de
facilitar el logro de una tarea especfica en
la 'eb, es decir aquellas aplicaciones que
los usuarios pueden utili$ar accediendo a
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
los usuarios pueden utili$ar accediendo a
un Servidor web a trav%s de (nternet o de
una intranet ediante un navegador. En
otras palabras, es una aplicacin ()oftware)
que se codifica en un lengua"e soportado
por los navegadores web en la que se
confa la e"ecucin al navegador.
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
ANTECEDENTES ANTECEDENTES
En *++* el
fsico brit,nico
Ti !erner"#
$ee public
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
$ee public
la priera
p,gina web.
Dicho sitio tena coo -nico fin
inforar qu% era la .'orld 'ide
'eb/.
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
INICIOS* "in di"e+o web
0as cone&iones eran a trav%s de dial1up (por
lnea conutada)
2e&to siple y te&to con lin3s
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
Epie$a a usarse un
poco de dise4o pues
algunas etiquetas de la
especificacin 5260
ostraban por defecto
el te&to con alg-n
taa4o y peso
diferente al est,ndar.
PROGRAMACI PROGRAMACI PROGRAMACI PROGRAMACI
E
%
O
$
&
C
I
'
N

D
E

$
A
S

T
E
C
N
O
$
O
(
)
A
S
E
%
O
$
&
C
I
'
N

D
E

$
A
S

T
E
C
N
O
$
O
(
)
A
S
I
N
I
C
I
O
S
*

"
i
n

d
i
"
e
+
o

w
e
b
PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
E, -reva,eciien.o de ,a" .ab,a" / ,a
in.rod0cci1n de CSS
En *++7, surgi el navegador 2o"aic, que era
el priero que desplegaba las i,genes en
lnea con el te&to, en ve$ de abrirlas por
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
lnea con el te&to, en ve$ de abrirlas por
separado en otra ventana.
*++8 9erners10ee funda
el 3or,d 3ide 3eb Con"or.i0
4w3c5.
2o6aic evoluciona a Ne."ca-e
)urge In.erne. Ex-,orer
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
E, -reva,eciien.o de ,a" .ab,a" / ,a
in.rod0cci1n de CSS
)e populari$a el uso de las tablas, para un
e"or acoodo visual de los contenidos.
En *++: se introduce el uso de ho"as de estilo
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
En *++: se introduce el uso de ho"as de estilo
en cascada o (;ascading )tyle )heets < CSS)
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
E, -reva,eciien.o de ,a" .ab,a" / ,a
in.rod0cci1n de CSS
)e populari$a el uso de los contadores de
visitas, un uso e&agerado de =(>s aniados, y
te&to aniado y con despla$aiento ediante
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
te&to aniado y con despla$aiento ediante
.arquesinas/, una etiqueta 5260.
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
E, -reva,eciien.o de ,a" .ab,a" / ,a
in.rod0cci1n de CSS
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
F,a"78 e, re/ de, Di"e+o 3eb
En *++: se introdu"o >lash toando ayor
popularidad alrededor de *++?.
)u uso se increento debido a ;)) y 5260 no
eran tan poderosos para generar gr,ficos.
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
eran tan poderosos para generar gr,ficos.
(foras redondeadas, que
cabiaban de color,
con efecto
tridiensional ediante
el ane"o de
tonalidades).
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
F,a"78 e, re/ de, Di"e+o 3eb
Debido al pobre ancho de banda produca el
.crasheo/ de el navegador, pues >lash
consua todo el ancho del iso.
El ayor problea de >lash, los buscadores, ya
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
El ayor problea de >lash, los buscadores, ya
que estos .inde&an/ el 5260, lo cual genera
que sitios dise4ados puraente en >lash
difcilente apare$can en los resultados de
b-squeda.
PROGRAMACI PROGRAMACI PROGRAMACI PROGRAMACI
E
%
O
$
&
C
I
'
N

D
E

$
A
S

T
E
C
N
O
$
O
(
)
A
S
E
%
O
$
&
C
I
'
N

D
E

$
A
S

T
E
C
N
O
$
O
(
)
A
S
F
,
a
"
7
8

e
,

r
e
/

d
e
,

D
i
"
e
+
o

3
e
b
PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
Creciien.o de, CSS
A inicios del @AAA flash de"a de ser proetedor.
las especificaciones para ;)) se apliaron.
Ahora no solaente el te&to tena lin3s,
tabi%n las i,genes, con el uso de 5260 y
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
tabi%n las i,genes, con el uso de 5260 y
;)), nada de >lash ni scripts.
0os colores chillantes
caen en desuso, se
utili$an colores as
agradables a la vista.
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
Creciien.o de, CSS
0as resoluciones de pantalla y el taa4o de los
eleentos recobraron iportancia.
el dise4o web se enfocaba en usabilidad y no
en solaente llaar la atencin
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
en solaente llaar la atencin
0os otores
de b-squeda
pueden
inde&ar e"or
a cada sitio.
PROGRAMACI PROGRAMACI PROGRAMACI PROGRAMACI
E
%
O
$
&
C
I
'
N

D
E

$
A
S

T
E
C
N
O
$
O
(
)
A
S
E
%
O
$
&
C
I
'
N

D
E

$
A
S

T
E
C
N
O
$
O
(
)
A
S
C
r
e
c
i

i
e
n
.
o

d
e
,

C
S
S
PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
$a 93eb 2.:;
0os cabios totales y duraderos del dise4o
web se coen$aron a ver en esta %poca (a
partir de @AAB apro&iadaente)
0as (nterfaces son as atractivas y perite alta
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
0as (nterfaces son as atractivas y perite alta
usabilidad.
Es el inicio de la
o-.ii6aci1n de o.ore" de
b<"=0eda (search engine
optii$ation < SEO) y
t%cnicas cabiantes para
posicionar las p,ginas web.
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
$a 93eb 2.:;
El enfoque del dise4o web .bien hecho/, que
pensara tanto en usuarios<clientes, coo en
buscadoresC e&celente distribucin y taa4o de
bloques de contenido.
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
bloques de contenido.
)e favorece el uso 5260, ;)) y Dava)cript, )E!.
)e priori$a el f,cil uso de p,ginas web,
e&periencia agradable para los usuarios
ediante el dise4o, y ayor facilidad para
vender un producto<servicio directa, o e"or
a-n, indirectaente.
PROGRAMACI PROGRAMACI PROGRAMACI PROGRAMACI
E
%
O
$
&
C
I
'
N

D
E

$
A
S

T
E
C
N
O
$
O
(
)
A
S
E
%
O
$
&
C
I
'
N

D
E

$
A
S

T
E
C
N
O
$
O
(
)
A
S
$
a

9
3
e
b

2
.
:
;
PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB PROGRAMACIN WEB
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
Ac.0a,idad* Di"e+o 3eb $i-io8
2inia,i".a / Ada-.ab,e.
A finales de la priera d%cada del @AAA es el
auge de los dispositivos viles inteligentes
(sartphones, tablets, phablets)
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
(sartphones, tablets, phablets)
Euevo enfoque de
hacer p,ginas
web, en ve$ de
dise4ar por
separado un sitio
para escritorios y
otro para viles
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
Ac.0a,idad* Di"e+o 3eb $i-io8
2inia,i".a / Ada-.ab,e
0ega la tendencia 1o t%cnica1 llaada di"e+o
ada-.ab,e, que consiste en un solo sitio
(idealente un solo 5260 y un solo ;)))
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
(idealente un solo 5260 y un solo ;)))
Dependiendo del
taa4o de la
ventana, el
contenido se
acooda a su
taa4o,
Re"-on"ividad.
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
Ac.0a,idad* Di"e+o 3eb $i-io8
2inia,i".a / Ada-.ab,e
El dise4o web es inialista, en parte
propiciado por el taa4o tan peque4o de las
pantallas y la dificultad para presionar botones
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
pantallas y la dificultad para presionar botones
peque4os en p,ginas web.
algo siple a la vista que perite visuali$ar el
contenido iportante de anera uy f,cil.
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
Ac.0a,idad* Di"e+o 3eb $i-io8
2inia,i".a / Ada-.ab,e
0os botones y los bloques se tornan en
eleentos de ayor taa4o, enos
tridiensionales y ,s cuadrados, con colores y
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
tridiensionales y ,s cuadrados, con colores y
apariencias uy lipias, uso de siples lneas
para conos, as coo te&to integrado en las
i,genes
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
E%O$&CI'N DE $AS TECNO$O()AS E%O$&CI'N DE $AS TECNO$O()AS
Ac.0a,idad* Di"e+o 3eb $i-io8 2inia,i".a /
Ada-.ab,e
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
P
R
O
G
R
A
M
A
C
I
!I!$IO(RAFIA > $I(AS !I!$IO(RAFIA > $I(AS
Doyanes Aguilar, 0uis. Manual de
programacin. 4 edicion. Ed. Prentice
Hall
Definicin de Aplicacin, Fecuperado de
C httpC<<www.rae.es<
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
P
R
O
G
R
A
M
A
C
I

N

W
E
B
C httpC<<www.rae.es<
=tacharly. (@A*8). EvolucinC ,s de @A
a4os de dise4o web. Fecuperado de
httpC<<www.niuedia.&<@A*7<AG<evol
ucion1as1de1@A1anos1de1diseno1web<