Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
1
ContenidoIntroducción .................................................................................................................................. 1
Contenidos estáticos ..................................................................................................................... 2
Contenidos dinámicos ................................................................................................................... 2
Lenguajes de programación en el diseño web .............................................................................. 3
Introducción a la programación .................................................................................................... 4
Variables y tipos de datos ......................................................................................................... 5
Operadores ................................................................................................................................ 5
Asignaciones .............................................................................................................................. 6
Funciones .................................................................................................................................. 7
Estructuras de control ............................................................................................................... 7
Bifurcaciones condicionales .................................................................................................. 7
Bucles .................................................................................................................................... 8
Eventos ...................................................................................................................................... 9
Lenguajes de entorno cliente ...................................................................................................... 10
Javascript ................................................................................................................................. 10
Lenguajes de entorno servidor ................................................................................................... 12
PHP .......................................................................................................................................... 13
Conceptos iniciales .............................................................................................................. 13
Comunicación entre cliente y servidor ............................................................................... 14
Introducción
Caso práctico Una vez que Luisa ha trabajado en
diferentes herramientas web le
entra la curiosidad por saber cómo
se crean.
Luisa: ¿Cómo se crea una aplicación
web, Juan?
Juan: Pues se escriben unos scripts,
o sea se hacen programas, que
realizan las tareas que el usuario va pidiendo desde el navegador.
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
2
Luisa: O sea, que yo tecleo algo en el navegador lo envío y en servidor realizan las tareas
programadas y me envían la respuesta ¿correcto?1
Juan: Pues sí, pero además hay scripts que se pueden ejecutar en el navegador sin necesitar al
servidor, es lo que se denominan scripts de cliente. Por ejemplo, si haces una animación que al
pasar el ratón por una foto se agranda, no es necesario el servidor.
Luisa: ¡que interesante!
Juan: Si. Pero no es fácil la programación.
ContenidosestáticosPara realizar una aplicación web lo primero que
tenemos que conocer es HTML y CSS, que nos
permiten desarrollar los contenidos estáticos. Las
últimas versiones son 5 y 3 respectivamente.
Por contenidos estáticos se entiende a páginas web
cuyo contenido siempre es el mismo, es decir, el
código HTML y CSS son siempre el mismo.
Tanto HTML como CSS son impartidos en la asignatura
de Lenguajes de Marca y Sistemas de Gestión de la
Información de este mismo ciclo formativo, por tanto,
no se tratan en esta asignatura.
ContenidosdinámicosCon HTML5 y CSS3 solo obtenemos contenidos estáticos para obtener contenidos dinámicos
necesitamos añadir a estos dos componentes un lenguaje para script, con los que indicaremos
las tareas a realizar según las solicitudes del usuario.
Como ya hemos mencionado anteriormente hay dos tipos de scripts:
Script de cliente, se ejecutan en el navegador. Es decir, el trabajo, las tareas las realiza
el PC, móvil o dispositivo que utiliza el usuario.
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
3
Script de servidor, se ejecutan en el servidor, al navegador solo llega su resultado. Por
tanto, el trabajo no se realiza en el dispositivo cliente.
Conclusión, todo lo que podamos desarrollar con scripts de cliente es trabajo que quitamos al
servidor.
LenguajesdeprogramacióneneldiseñowebEN EL LADO CLIENTE, el lenguaje de programación de script que se utiliza es Javascript. Y para
dotar a nuestras páginas de un buen aspecto y bonitas animaciones la combinación perfecta
es:
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
4
Aunque la complejidad y los largos códigos que hay que desarrollar hacen que los
desarrollados utilicen librerías con funciones ya desarrolladas que hacen más fácil el diseño
web, cabe destacar jquery.
EN EL LADO SERVIDOR, en cambio, hay más competencia, podemos desarrollar entre otros en:
PHP (Hypertext Preprocessor), es un lenguaje de sintaxis similar a C. Es interpretado,
orientado a objetos y multiplataforma. Es el que utilizaremos en la asignatura por su
fácil aprendizaje. Tiene multitud de librerías gratuitas (un ejemplo para generar pdf)
JSP (Java Server Pages) es una tecnología que permite mezclar HTML estático con
HTML generado dinámicamente mediante código Java embebido en las páginas.
ASP (Active Server Pages) es el lenguaje de programación de script de servidor
desarrollado por Microsoft y está incluido dentro de sus servidor IIS.
CGI (Common Gateway Interface), es un mecanismo que permite que un servidor web
ejecute un programa escrito en cualquier lenguaje de programación. Las primeras
páginas dinámicas que se desarrollaron utilizaban este sistema. El lenguaje de
programación más habitual es Perl.
IntroducciónalaprogramaciónLo primero, en esta asignatura veremos una programación “resumida”, necesaria para
entender el funcionamiento de las aplicaciones web. Evidentemente esta materia necesita de
un estudio más profundo, de hecho, en otros ciclos formativos como los específicos de
desarrollo (DAW y DAM) se estudian en varias asignaturas de programación.
Programar es indicar la secuencia de instrucciones que tiene que realizar el ordenador para
resolver un determinado problema. Estas instrucciones se escriben en determinado lenguaje
de programación.
Hay diferentes tipos de programación o formas de programar, la más clásica, es la
programación estructurada, que surgió como una técnica para realizar la programación de una
forma más organizada, permitiendo tres estructuras básicamente: secuencia, selección e
iteración.
Ejemplo de programa estructurado “Suma”
Solicitar dato A
Solicitar dato B
Resultado = A + B
Mostrar Resultado
Después apareció la programación orientada a objetos, en la que se hace uso de estructuras de
datos llamadas objetos, estos soportan propiedades (color, anchura, nombre, apellidos, etc) y
métodos (borrar, actualizar, etc).
Ejemplo de programa orientado a objetos “Actualizar Nombre” del objeto Persona a “Juan”
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
5
Persona.nombre = “Juan”
Para llamar al método anterior se utilizaría una expresión similar a:
Persona.actualizar(“Juan”);
En algunos entornos también se usa el término programación orientada a eventos, esto no es
más que una programación en la que se desarrollan secuencias de comandos asociados a
eventos producidos por el usuario (clic en el ratón, pulsar una determinada tecla, arrastrar un
objeto…) o por la ejecución del propio código (cerrar el programa, cargar una página, etc).
Ejemplo de programa orientado a eventos “Botón borrar”, en javascript
<input type=”button” onclick=”borrar();”>
VariablesytiposdedatosUna variable representa únicamente el identificador que se le asigna a una posición de
memoria (espacio físico del ordenador) donde se almacena un valor (numérico o
alfanumérico). Pueden tener un valor fijo durante toda la ejecución o variar.
Tipos de datos que podemos almacenar en las variables: pueden ser de numérico (entero,
decimal, binario), alfanuméricas (cadenas de texto) o booleanas (verdadero o falso)
Guardar en la variable A (posición de memoria) el valor 30
A = 30
Guardar en la variable Aprobado (posición de memoria) el valor verdadero
Aprobado = verdadero
OperadoresAunque depende del lenguaje de programación que utilicemos los operadores más habituales
son:
+ Suma Sumar
‐ Resta Restar
* Multiplicación Multiplicar
/ División Dividir
% Resto Resto de una división
++ Incremento Sumar 1 al valor de una variable, finalidad contar
iteración o similares
‐‐ Decremento Restar 1 al valor de una variable
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
6
== Comparación de igualdad Comparar si dos expresiones son iguales
!= Comparación de desigualdad Comparar si dos expresiones son diferentes
< Comparación menor Comparar si una expresión es menor que otra
> Comparación mayor Comparar si una expresión es mayor que otra
! Operador de negación Negar una expresión booleana
&& Operador Y Combinar dos expresiones booleanas para ver si
las dos se cumplen
|| Operador O Combinar dos expresiones booleanas para ver si
una de las dos se cumple
Ejemplo dividir A entre 2
A / 2
Ejemplo incrementar en 1 el valor de X (si X vale 3 pasa a valer 4, si X vale 54 pasa a valer 55)
X++
Ejemplo comprobar si alumno es mayor de edad y residente en “Zafra”, suponemos que
alumno es un objeto con, entre otras, las propiedades edad y ciudad.
alumno.edad > 17 && alumno.ciudad == “Zafra”
AsignacionesEl símbolo = asigna el valor de la derecha a la variable de la izquierda, el valor puede ser el
resultado de evaluar una expresión.
Ejemplo guardar en la variable Resultado el total de sumar A y B
Resultado = A + B
Ojo, si la misma variable está en la derecha y la izquierda entonces el nuevo valor (izquierda)
es el resultado de la expresión de la derecha:
A = A + B
Significa: Nuevo valor de A es igual al antiguo valor de A más B.
Algunas expresiones de asignación se pueden abreviar:
Contador++
Nuevo valor de contador es antiguo valor de contador más uno (contador = contador + 1)
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
7
FuncionesBloques de código que se definen como una unidad independiente con nombre, se invocan
colocando su nombre seguido de paréntesis.
Ejemplo función alerta que muestra un mensaje “Hola” y es invocada al producir el evento clic
(hacer clic con el ratón) sobre un botón.
function alerta()
{
alert(“Hola”);
}
…
<input type=”button” onclic=”alerta();”>
EstructurasdecontrolTodos los lenguajes de programación trabajan con estructuras de control para ejecutar las
secuencias de comandos de forma que dependiendo de, normalmente, una condición se
ejecutan unas secuencias de comandos u otras o se repiten secuencias de comandos.
BifurcacionescondicionalesLas dos estructuras de control condicional más conocidas:
if (condicion)
{ secuencia de comandos si se cumple la condición }
else
{ secuencia de comandos si NO se cumple la condición }
switch(variable)
{
case valor1:
secuencia de comandos si variable vale valor1
break;
case valor2:
secuencia de comandos si variable vale valor2
break;
...
default:
secuencia de comandos si variable NO vale ninguno de los anteriores
break;
}
Ejemplo secuencia de comando que indique si es valor nota es aprobado o suspenso
if (nota<5)
{ alert(“Suspenso”); }
else
{ alert(“Aprobado”); }
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
8
Ejemplo secuencia de comando que indique la nota en forma de texto asociada a una nota
numérica:
switch(nota)
{
case 10:
alert(“Matrícula de Honor”);
break;
case 9:
alert(“Sobresaliente”);
break;
case 8:
alert(“Notable”);
break;
case 7:
alert(“Notable”);
break;
case 6:
alert(“Bien”);
break;
case 5:
alert(“Suficiente”);
break;
default:
alert(“Suspenso”);
break;
}
BuclesDispondremos de diferentes tipos bucles o iteraciones, entre ellos:
while (condicion)
{ secuencia de comandos que se repiten mientras se cumpla la condición }
for(inicio; condicion; incremento)
{ secuencia de comandos que se repiten desde que la situación expresada en
inicio llega hasta el final que expresa la condición por el incremento
progresivo }
foreach (elemento en colección)
{ secuencia de comandos que se repiten por cada uno de los elementos que
hay en la colección}
Ejemplo sumar cantidades hasta llegar a 100 (se inicia el acumulado a 0, en algunos lenguajes
no es necesario, se irán tecleando cantidades y sumando al acumulado, llegará un momento
en que el acumulado supere 100, en ese momento se deja de repetir el proceso. Recordemos
que la expresión Acumulado=Acumulado+Cantidad, la podíamos traducir por nuevo
Acumulado = Antiguo Acumulado + la cantidad introducida);
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
9
Acumulado=0;
while (Acumulado<100)
{
Leer Cantidad;
Acumulado=Acumulado+Cantidad;
}
Ejemplo mostrar la tabla de multiplicar del 2. En este caso una variable llamada i empieza
valiendo 1 (i=1), se va incrementando uno a uno (i++), mientras que no sea superior a 10, o sea
hasta que llega a 9 (i<10), se producida 9 iteraciones donde i irá cambiando y se irá mostrando
el resultado 2*i
for(i=1; i<10; i++)
{
write 2*i ;
}
Repetición típica para mostrar un listado de una base de datos (el objeto registro irá
cambiando, siendo uno a uno todos los registros de la tabla y se irá mostrando sus campos):
foreach (registro en tabla)
{ escribir registro.campo1, registro.campo2, registro.campo3}
EventosLo normal para una aplicación es que haya una comunicación con el usuario, es decir, el
usuario manejará la aplicación usando el ratón, el teclado, etc.
Un evento es una señal que se dispara al producirse un cambio. Los eventos son provocados la
mayor parte de las veces por las acciones del usuario (a medida que maneja el ratón o el
teclado), aunque también pueden ser provocados por otros tipos de cambios en el entorno,
como los que ocurren durante el procesamiento (fin de la carga de página, cerrar navegador) o
los que se producen al encontrarse situaciones de error.
Los programas también pueden generar eventos por su cuenta.
Cuando se produce un evento se ejecuta automáticamente el guion del correspondiente
manejador de evento; cada evento concreto que se puede producir tiene asociado su propio
manejador.
Por defecto los manejadores de eventos no tienen guiones asociados, de forma que no se hace
nada cuando se producen, somos nosotros los que tenemos que asociar guiones a los
manejadores de los eventos que queramos controlar.
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
10
Relación de eventos típicos:
Clic El usuario hace clic sobre un objeto Dblclic El usuario hace doble clic sobre un objeto MouseDown El usuario ha hundido el dedo sobre el botón del ratón MouseUp El usuario ha soltado el botón del ratón MouseOver El usuario ha colocado el puntero del ratón sobre un objeto MouseOut El usuario ha situado fuera del objeto el puntero del ratón KeyDown El usuario ha hundido el dedo sobre una tecla KeyUp El usuario ha liberado la tecla Focus El usuario se ha enfocado un objeto (para escribir en él o
similar) Change Cambia el valor de un objeto Select El usuario ha seleccionado algo dentro del objeto Error Se ha producido un error Load Se ha cargado un objeto
LenguajesdeentornoclienteLa programación del lado del cliente es la que permite realizar tareas que se ejecutarán en el
navegador del usuario, es decir, el código del script se incorpora dentro del HTML de la página
web.
Los scripts de cliente se usan para:
Validar datos antes de enviarlos al servidor. Por ejemplo, comprobamos si un correo
electrónico tiene el formato correcto, no enviamos los datos al servidor hasta que no
sean correctos y así no cargamos con trabajo innecesariamente al servidor.
Realizar animaciones en las páginas web
Enviar y recibir datos del servidor. Por ejemplo a medida que vamos tecleando se
envían los datos tecleados al servidor y se reciben sugerencias sobre la búsqueda.
Hay básicamente dos lenguajes de script de cliente: VBScript desarrollado a partir de Visual
Basic pero que solo es permitido por algunas navegadores y Javascript, que es sin duda alguna
el lenguaje más extendido.
Dentro de este apartado también podemos incluir algún plugin como flash que se ejecuta en el
lado del cliente, pero que por cuestiones de seguridad tiende a desaparecer.
JavascriptJavaScript es un lenguaje de scripts basado en objetos. No tiene nada que ver con el
lenguaje Java, solamente que su sintaxis fue copiada de éste.
Es un lenguaje interpretado, esto significa que a las instrucciones las analiza y procesa el
navegador en el momento que van a ser ejecutadas, pero no previamente.
Para interactuar con una página web se provee al lenguaje JavaScript de una implementación
del Document Object Model (DOM).
Unidad
DOM
conju
sobre
mani
estru
princ
Ejem
va ha
Cuida
Ejem
llama
En es
de un
links,
Una
propo
ratón
la red
una v
algún
Ejem
d 2: Desarrollo de
M es esencialm
unto estánda
e cómo pued
pularlos. A
ctura y est
ipalmente. E
plo de mani
acia atrás, de
window
ado: JavaScri
plo de man
ado “texto”:
window
ste lenguaje
n objeto del
forms). Ejem
window
aplicación
orcionando
n o validación
d una página
ventana de d
n tipo de acc
plo al hacer
e Aplicaciones W
mente una in
ar de objetos
den combina
través del D
tilo de los
El responsab
pulación de
el elemento h
w.history.back()
ipt distingue
nipulación de
w.document.get
cada objeto
mismo tipo
mplo cambia
w.document.im
escrita en
un mecanism
n de entrada
a HTML con
diálogo, de q
ión como eje
clic en el bot
Web
nterfaz de pr
s para repres
arse dichos o
DOM, los pr
documento
le del DOM e
DOM, naveg
history de wi
);
entre mayú
e DOM, rec
tElementById(“
tiene un no
en un docu
ar la segunda
ages[1].src=”nu
JavaScript
mo para la d
as realizadas
n JavaScript
que las entra
ecutar un fic
tón cambiar
rogramación
sentar docum
objetos, y un
rogramas pu
os HTML y
es el World W
gar a la págin
indow):
úsculas y min
cuperar el co
“texto”).value
ombre, el cua
mento web,
a imagen de
ueva.jpg”;
puede ser
detección y
en formular
incrustado
adas de los f
hero de soni
la segunda i
n de aplicacio
mentos HTM
na interfaz es
ueden acced
XML, que
Wide Web C
na anterior (
úsculas.
ontenido es
al es exclusiv
estos se org
una página (
r incrustada
tratamiento
rios. Sin exist
puede interp
formularios n
ido, un apple
imagen:
ones (API) qu
ML y XML, un
stándar para
der y modifi
es para lo
onsortium (W
accedemos m
crito en un
vo y único. C
ganizan en u
se empieza a
a en un d
o de eventos
tir comunica
pretar, y aler
no son válida
et de Java, et
Manuel Castaño
ue proporcio
n modelo est
a acceder a e
icar el conte
o que se d
W3C).
método bac
cuadro de
Cuando exist
un vector (im
a contar por
ocumento
s, como clic
ación a trav
rtar al usuar
as. O bien re
tc.
o Guillén
11
ona un
tándar
ellos y
enido,
diseñó
k, que
texto
e más
mages,
r 0):
HTML
ks del
vés de
io con
ealizar
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
12
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo </title>
</head>
<body>
<img src="imagenes/primera.jpg"/>
<img src="imagenes/antigua.jpg"/>
<input type="button" onclick="document.images[1].src=’imagenes/nueva.jpg’;">
</body>
</html>
Para una fácil lectura, lo habitual, es incluir el código javascript dentro de la etiqueta script y
organizado en funciones que serán ejecutadas a medida que se produzcan los eventos:
<script type="text/javascript">
function uno()
{ comandos de la función}
function dos()
{ comandos de la función}
…
</script>
….
<etiquetaHTML evento=”uno();”>
<etiquetaHTML evento=”dos();”>
También podemos separar en un fichero aparte el código e incrustarlo en la página con:
<script type="text/javascript" src="archivoexterno.js"></script>
LenguajesdeentornoservidorLa programación del lado del servidor es la que permite realizar tareas que se ejecutarán en el
servidor a partir de peticiones del usuario (normalmente enviadas desde el navegador) y que
devolverán respuestas, generalmente en HTML.
Como conclusión deducimos:
El trabajo es realizado por el servidor siguiendo las órdenes indicadas en el código del
script
El cliente no verá el código del script, solo verá su resultado (HTML)
Hay muchos lenguajes de programación utilizados para el lado del servidor, podemos destacar
JSP (JavaServer Pages es una tecnología Java que permite generar contenido dinámico para
web, en forma de documentos HTML, XML o de otro tipo), ASP (Active Server Pages, es una
tecnología de Microsoft que ha sido comercializada como un anexo a Internet Information
Services – IIS – ).
Unidad
PHP
ConcA la
cuent
d 2: Desarrollo de
P
ceptosinicihora de dise
ta:
El fichero
El código
que nos
<? ?>.
En php se
Cada una
Las varia
distinguim
o V
o V
in
o V
v
la
o C
d
d
Tiene mu
http://ww
o e
o fi
e Aplicaciones W
ialeseñar nuestra
o donde se en
PHP está en
permitirán e
e distingue e
a de las instru
bles comien
mos:
Variables de
Variables de
nformación q
Variables de
varias página
as páginas qu
Cookies ($_C
de la misma,
durante la vid
ultitud de fun
ww.php.net/
echo nos mue
ile_exists(fic
Web
as páginas d
ncuentre el s
ntre medio d
entrar y salir
ntre mayúsc
ucciones o co
nzan por $.
ámbito simp
e formulari
que se recibe
sesión ($_S
s, requieren
ue usen la va
OOKIE), se a
por tanto, s
da de la varia
nciones desa
/manual/es/
estra un text
chero) nos in
Hyperte
abierto
lenguaje
puede
HTML.
desarro
tecnolo
de scripts de
script de php
de etiquetas
r del "modo
culas y minús
omandos qu
Entre los ti
ple, se utiliza
io ($_POST
e desde los f
SESSION) pa
poner la fun
ariable de se
almacenan e
son válidas e
able en ese e
arrolladas pa
/funcref.php,
to o una vari
ndica si existe
ext Preproce
adecuado p
e para desar
ser incrust
Es el leng
ollar scripts
gías web má
e servidor en
p debe tener
de comienzo
PHP". Se pu
sculas.
ue indicamos
ipos de vari
n en una pág
T, $_GET,
formularios.
ara almacen
nción session
esión.
en el equipo
en todas las
equipo.
ara realizar l
, por ejemplo
iable.
e un fichero
ssor es un le
para desarro
rrollar script
ado dentro
guaje más
de servido
ás habituales
n php tenem
r la extensión
o y final espe
uede usar un
debe acaba
ables que s
gina o funció
$_REQUEST)
ar informac
n_start() al c
del usuario
sesiones qu
as operacion
o:
en el servido
Manuel Castaño
enguaje de c
ollo web y
ts de servido
o de las pá
extendido
or dentro d
s.
mos que ten
n .php
eciales <?ph
n modo abre
ar en ;
se pueden u
ón.
), almacena
ción necesar
comienzo de
indicando l
e inicie el us
nes más inus
or
o Guillén
13
código
es un
or que
áginas
para
de las
ner en
p y ?>
eviado
utilizar
an la
ria en
todas
a vida
suario
suales
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
14
o header() envía cabeceras HTTP, entre otras utilidades permite desvía a otra
página
o isset(variable) nos indica si una variable existe
o rand(mínimo,máximo) genera un número aleatorio entre mínimo y máximo
o strlen(cadena) nos indica la longitud de una cadena.
Ejemplo script de servidor que muestra un mensaje “H o l a” (el comando echo escribe un
texto o valor de variable):
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo </title>
</head>
<body>
<h1> Primer ejemplo </h1>
<? echo “H o l a”; ?>
</body>
</html>
El cliente recibirá el SOLO el siguiente código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo </title>
</head>
<body>
<h1> Primer ejemplo </h1>
H o l a
</body>
</html>
ComunicaciónentreclienteyservidorEvidentemente entre cliente y servidor debe haber una comunicación puesto que el cliente
(navegador) es el que mostrará los resultados recibidos del servidor.
Basta con que desde el navegador solicitemos una página con scripts de servidor para que
recibamos el resultado HTML de la ejecución de ese código.
Aunque lo normal no es solo solicitar una página, lo habitual es que enviemos algún dato y
recibamos respuesta a partir de ellos, como por ejemplo en una búsqueda en internet,
enviamos una frase y recibimos un listado de enlaces relacionados con el tema.
En el esquema siguiente se muestra como sería el proceso. El PC solo tiene el software para
visualizar las páginas recibidas, el navegador. El servidor de páginas es el que tiene en su
almacenamiento las páginas. El cliente pedirá páginas que el navegador visualiza y sobre las
que trabaja el usuario, este introducirá los datos solicitados en las páginas y se enviarán al
servidor, que los procesará y remita el resultado para que el navegador de nuevo lo visualice.
Unidad 2: Desarrollo de Aplicaciones Web Manuel Castaño Guillén
15