PDF de programación - Diseño y creación de páginas web: Tema 8. Technologies for creating dynamic web page

Diseño y creación de páginas web: Tema 8. Technologies for creating dynamic web page

Publicado el 14 de Enero del 2017

1.068 visualizaciones desde el 14 de Enero del 2017

2,2 MB

37 paginas

ESCUELA TÉCNICA SUPERIOR DE INGENIERÍA – ICAI

Departamento de Sistemas Informáticos

Chapter 8. Technologies for creating dynamic

Creating web pages

web pages

Cristina Puente, Rafael Palacios

2009-2010

Introducción

Inconvenientes de HTML"

Las arquitecturas y técnicas en programación Web
buscan lo siguiente:
– Máxima compatibilidad con los navegadores (clientes
potenciales)
– Eficiencia del lado del servidor (soportar el máximo número
de conexiones concurrentes)
– Creación de contenidos llamativos y dinámicos sin sacrificar
las dos anteriores.

HTML falla en este último punto!!

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

2

Introducción

Inconvenientes de HTML"

–  Se necesitan lenguajes de programación más potentes que

permitan “mini” aplicaciones dentro de una web, como pueden
ser:
•  Carro de la compra y comercio electrónico
•  Contador de visitas

•  Web Mail

•  Registro y entrada a un sistema
•  Transferencias y operaciones bancarias
•  Etc..

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

3

Scripts

Código en el lado del cliente"

GET

JavaScript

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

4

Scripts: Javascript

Javascript"

–  Es un subconjunto de Java, bastante restringido pero muy

integrado con el navegador

–  El código va embebido en HTML
–  El código es público, no se puede ocultar
–  JavaScript tiene acceso directo a las propiedades de los

objetos definidos en HTML

–  Se asocian funciones a eventos
(Ejemplos: onSubmit, onChange, onMouseOver, onMouseOut...)

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

5

Scripts: Javascript

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>JavaScript Example</title>
<script language="JavaScript">

</script>
</head>
<body>
...HTML...
</body>
</html>

•  Más ejemplos: http://www.iit.upco.es/palacios/javascript/

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

6

Scripts: Javascript

Utilidades de Javascript"

–  Se suele programar en javascript

•  Contadores de página
•  Validación de formularios
•  Cálculos sencillos
•  Eventos sencillos (por ejemplo al pasar el ratón sobre una imagen)
•  Calendarios

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

7

Scripts: VBSscript

VBScript"

–  Similar a JavaScript pero proveniente de Visual Basic
–  Tiene un soporte menor entre los diferentes navegadores por

lo que se recomienda el uso de JavaScript

<HTML>

<HEAD><TITLE>Prueba de VBScript</TITLE>
<SCRIPT LANGUAGE="VBScript">

</SCRIPT>
</HEAD>
<BODY>
<FORM><INPUT NAME="Button1" TYPE="BUTTON"
VALUE="Pulsame"></FORM>
</BODY>
</HTML>

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

8

Java Applets

Java Applets"
–  Trozo de código Java que sólo tiene sentido en el contexto de

una WEB.

–  Es tan potente como lo puede ser JAVA con ciertas limitaciones

–  Está ampliamente extendido y soportado por los principales

de seguridad.

navegadores.

–  Son multiplataforma al igual que JAVA
–  Son muy seguros

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

9

Java Applets

Integración de Java Applets"
–  Un cliente solicita una página HTML a un servidor
–  El servidor envía la página HTML sin el Applet
–  El navegador descubre dentro del HTML la etiqueta <APPLET>

y solicita al servidor que le envíe dicho APPLET

–  El servidor envía el APPLET en forma de Código de bytes, que
han de ser interpretados por el JVM (Java Virtual Machine) del
cliente.

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

10

Java Applets

Ejemplo de Java Applets"
–  Código Applet:

import java.awt.*;
import java.applet.*;
public class SimpleApplet extends Applet {

g.drawString(“Hola mundo”,20,20);

public void paint (Graphics g){

}
}
–  Llamada al Applet en HTML:

<Applet code=“SimpleApplet” width=200 height=60>
</applet>

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

11

Active X

Active X"
–  Se pueden usar controles ActiveX en los documentos para
dotarlos de una gran potencia y flexibilidad (al igual que se
usan en aplicaciones locales).

–  La etiqueta <OBJECT> define la inserción de un control

ActiveX.

–  Problemas de compatibilidad: Actualmente sólo se puede

ejecutar en máquinas Windows.

–  Adolece de grandes problemas de seguridad (al imponer

limitaciones al código)

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

12

Flash

Flash"
–  Permite animar visualmente una página web
–  Creación de animaciones, presentaciones, formularios, e

incluso juegos

–  En las últimas versiones se ha incorporado la posibilidad de

acceso a base de datos para extraer información

–  Se puede insertar dentro de una web (como banner o

película en flash)

–  Permite la interacción con otras tecnologías

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

13

Flash

Flash"

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

14

AJAX

AJAX (Asynchronous JavaScript And XML )"
–  Es un conjunto de tecnologías, una técnica de

desarrollo web que une JavaScript y XML o HTML
de manera asíncrona

–  Es posible realizar cambios sobre la misma

página sin necesidad de recargarla

–  AJAX utiliza procesos en background, que gastan

menos ancho de banda, es más rápido y más
eficiente

–  Google Maps, Gmail, Outlook Web Access utilizan

Ajax

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

15

AJAX

AJAX"

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

16

Tecnologías que se ejecutan en el lado del servidor

Código en el lado del servidor"

GET prueba.php

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

17

CGI

CGI (Common Gateway Interface)"
–  Creado inicialmente para gestionar formularios
–  No es un lenguaje de programación.
–  Es un mecanismo para que el servidor web

pueda llamar a un programa externo.
–  El programa CGI tiene acceso a cierta

información sobre la conexión y a los valores del
formulario (ver ejemplo de formularios)

–  El programa CGI puede estar desarrollado en

cualquier lenguaje: C, perl, sh...

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

18

CGI

Ejemplo CGI"
http://www.iit.upco.es/palacios/hola.cgi

#!/bin/sh
HORA=`date`
echo "Content-type: text/html"
echo ""
echo "<HTML>"
echo "<head>"
echo " <title>Prueba CGI</title>"
echo "</head>"
echo "<body>"
echo "<p>Hola $REMOTE_ADDR</p>"
echo "<p>$HORA</p>"
echo "</body>"
echo "</html>"

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

19

CGI

Ejemplo CGI"

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universidad Pontificia Comillas

Creating web pages
Chapter 8. Technologies for creating dynamic web pages

20

Servlets

Servlets"
–  Son programas escritos en Java que corren en

un servidor de aplicaciones con JVM

–  Al ejecutarse en el servidor son aplicaciones sin

GUI.

–  Similar al CGI, pero con los beneficios de Java.
–  Capaces de mantener la conexión abierta y por

lo tanto actualizar el contenido del navegador del
cliente.

Departamento de Sistemas Informáticos
Escuela Técnica Superior de Ingeniería – ICAI
Universi