Introducción Caso práctico - suarezdefigueroa.es de... · orientado a objetos y multiplataforma. ... desarrollo (DAW y DAM) ... Desarrollo de Aplicaciones Web Manuel Castaño Guillén

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.


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.


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:


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”


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


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)


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”); }


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);


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.


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


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


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>


</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>


</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.


15

Documents

Introducción Caso práctico - suarezdefigueroa.es de... · orientado a objetos y multiplataforma. ... desarrollo (DAW y DAM) ... Desarrollo de Aplicaciones Web Manuel Castaño Guillén