PDF de programación - Diseño y creación de páginas web: Tema 8. Revsión de tecnologías para crear páginas dinámicas

Diseño y creación de páginas web: Tema 8. Revsión de tecnologías para crear páginas dinámicas

Publicado el 14 de Enero del 2017

1.087 visualizaciones desde el 14 de Enero del 2017

4,7 MB

36 paginas

Tema 8. Revisión de tecnologías para crear páginas

dinámicas

ETSI ICAI!

Departamento de Sistemas Informáticos!

Rafael Palacios Hielscher!
Cristina Puente Águeda!

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

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

Código en el lado del cliente!

GET

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

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

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

VBScript!

<HTML>

–  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

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

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

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

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.

Ejemplo de Java Applets!
–  Código Applet:

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

public void paint (Graphics g){

}

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

}
–  Llamada al Applet en HTML:

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

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)

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

Flash!

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

AJAX!

Código en el lado del servidor!

GET prueba.php

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

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

Ejemplo CGI!

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.

Servlets!
–  Ejecución de un Servlet:

•  El cliente hace una petición
•  El servidor envía la información de la petición al Servlet
•  El Servlet con está información crea un contenido

dinámico que entrega al servidor

•  Este contenido es devuelto al cliente

Php!
–  Código embebido en HTML
–  El cliente no ve el código PHP, sino el código

HTML puro resultante de la ejecución

–  Existen módulos para acceder fácilmente a bases

de datos

Ejemplo Php !

<html>
<head>

<title>Prueba PHP</title>
</head>

<body>
<p>Hola
<?php
$direccion=getenv("REMOTE_ADDR");
print "$direccion</p>\n";
print "<p>".date('r')."</p>\n"; //RFC-2822 formatted date
?>
</body>
</html>

Ejemplo Php !

<html>
<head>
<title>Prueba PHP</title>
</head>
<?php
function Conectar($username, $password)
{
$conn=mysql_connect(localhost, "$username", "$password");
mysql_select_db(events,$conn);
return $conn;
}
function Desconectar($conn)
{
mysql_close($conn);
}
function EventosHoy($conn,$hoy)
{
$query = "SELECT * from events where dia='$hoy' order by inicio";
$result = mysql_query($query,$conn);
if ($row=mysql_fetch_array($result)) {
while ($row) {
print " <tr><td>".substr($row["inicio"],0,5)."-".substr($row["fin"],0,5)."</td>\n";
print " <td width=\"100%\">".$row["tit"]."</td></tr>\n";
$row=mysql_fetch_row($result);
}
} else {
print " <tr><td></td><td>No hay eventos hoy</td></tr>\n";
}
}
?>
<body>
<table cellpadding="2" cellspacing="2" border="1" width="100%">
<tbody>
<tr>
<td valign="top" rowspan="1" colspan="2" bgcolor="#ccccff"><b> Eventos para hoy</b><br>
</td>
</tr>
<?php
$conn=Conectar("roevents","iit");
$hoy=date("Y-m-d");
EventosHoy($conn,$hoy);
Desconectar($conn);
?>
</tbody>
</table>
</body>
</html>

<html>
<head>
<title>Prueba PHP</title>
</head>

<body>
<table cellpadding="2" cellspacing="2" border="1" width="100%">
<tbody>
<tr>
<td valign="top" rowspan="1" colspan="2" bgcolor="#ccccff"><b> Eventos para hoy</b><br>
</td>
</tr>

<tr><td></td><td>No hay eventos hoy</td></tr>

</tbody>
</table>
</body>
</html>

Código Generado

ASP (Active Server Pages)!
–  Es código ejecutado en el servidor que devuelve HTML, por

lo que queda garantizada su compatibilidad.

–  ASP permite integrar componentes ActiveX (del lado del
servidor), como acceso a base de datos, scripts..., lo que
dota a la lógica de negocios de una potencia y flexibilidad
enorme.

–  ASP se presentó por primera vez con el IIS 3.0 de Microsoft.

Ejemplo de ASP!

<%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<%for i =3 to 7%>
<FONT SIZE= <%=i%>>
!Hola mundo!<BR>
<FONT>
<%Next%>
<P> </P>
</BODY>
</HTML>

El código enviado al cliente es puramente HTML:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
</HEAD>
<BODY>
<FONT SIZE= 3>
!Hola mundo!<BR>
<FONT>
<FONT SIZE= 4>
!Hola mundo!<BR>
<FONT>
<FONT SIZE= 5>
!Hola mundo!<BR>
<FONT>
<FONT SIZE= 6>
!Hola mundo!<BR>
<FONT>
<FONT SIZE= 7>
!Hola mundo!<BR>
<FONT>
<P> </P>
</BODY>

Modelo de objetos ASP!
–  Request: se usa para obtener información del usuario, ya sea

de un formulario, de Cookies...

(datos globales)

del servidor)

–  Response: se usa para enviar información al usuario, como

por ejemplo una cookie o redireccionarlo a otra URL...

–  Session: se usa para almacenar y recuperar información

durante una sesión específica de un usuario (datos locales).

–  Application: Son datos comunes para todos los usuarios

–  Server: Hace de interface con los ASC (componentes activos

Modelo de objetos ASP!
–  Ejemplo Cookies (“Response/Request”):

•  Insertar datos en una cookie: Response.Cookies(“MiCookie”)

(“Nombre”)=“Jesus”

•  Re

Links de descarga

http://lwp-l.com/pdf635

Comentarios de: Diseño y creación de páginas web: Tema 8. Revsión de tecnologías para crear páginas dinámicas (0)

No hay comentarios

Comentar...

Microcontrolador: la solución está en un chip - Capítulo 1

PDF de programación - Diseño y creación de páginas web: Tema 8. Revsión de tecnologías para crear páginas dinámicas

Diseño y creación de páginas web: Tema 8. Revsión de tecnologías para crear páginas dinámicas

Comentarios de: Diseño y creación de páginas web: Tema 8. Revsión de tecnologías para crear páginas dinámicas (0)

Comentar...

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.