PDF de programación - Desarrollo de aplicaciones web - Capitulo 1. Introducción a programas en el lado del cliente

Imágen de pdf Desarrollo de aplicaciones web - Capitulo 1. Introducción a programas en el lado del cliente

Desarrollo de aplicaciones web - Capitulo 1. Introducción a programas en el lado del clientegráfica de visualizaciones

Publicado el 14 de Enero del 2017
527 visualizaciones desde el 14 de Enero del 2017
3,2 MB
24 paginas
Tema 1. Introducción a programas en el lado del cliente

ETSI ICAI!

Departamento de Sistemas Informáticos!

Rafael Palacios Hielscher!
Cristina Puente Águeda!

Introducción

•  Las aplicaciones web tiene varias ventajas sobre

las aplicaciones tradicionales:
–  Compatibilidad

•  Las aplicaciones web utilizan el navegador del cliente como

intarfaz de usuario

•  El lenguaje HTML garantiza la compatibilidad en distingas

plataformas
–  Accesibilidad

•  Acceso remote es un prerequisito de diseño
•  Los dispositivos móviles están generalmente soportados
•  Hay muchas soluciones a nivel de navegador para personas

con discapacidad:

–  Lectores automáticos de texto
–  Gran variedad de dispositivos de entrada (teclados,

ratones…)

–  Tamaños y colores de texto ajustables

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

Programas en el lado del cliente

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">
<!-- Hide code if JavaScript is not supported

...JavaScript...

//End of hidden code -->
</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">
<!--
Sub Button1_OnClick
MsgBox “Hola Mundo"
End Sub
-->
</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!

Programa sencillo JavaScript

1.  El código JavaScript se escribe en la sección

<head> de la página HTML

2.  Las funciones JavaScript responden a eventos de

objetos de la página web. Ejemplos de eventos:
–  OnChange
–  OnSubmit

3.  Las funciones JavaScript pueden modificar las

propiedades de cualquier objeto. Ejemplos:
–  Text color
–  Background color
–  Text content (the text itself)

•  Un sitio web puede comportarse como una
aplicación si asociamos estilos a objetos de
formularios mediante funciones JavaScript.

Cambio de estilo

OnChange

•  Objeto div llamado “id_cuadro1” y con estilo de tipo

“cuadro”

<DIV class="cuadro" id="id_cuadro1">
<p>Párrafoprinero…</P>
<p>Segundo párrafo…</p>
</DIV>

mis_estilos.css

div.cuadro {
font-family:arial,helvetica,sans-
serif;
color:black;
background: white;
text-align:center;
border-style:solid;
}

http://www.w3schools.com/tags/tag_textarea.asp

•  Objeto <select> donde se define la llamada

asociada al evento de tipo “OnChange”

<SELECT NAME="colores" OnChange="CambiarColor(this.value,'id_cuadro1');">
<OPTION VALUE="">--Elegir color--</OPTION>
<OPTION VALUE="r">Rojo</OPTION>
<OPTION VALUE="g">Verde</OPTION>
<OPTION VALUE="b">Azul</OPTION>
</SELECT>

http://www.w3schools.com/tags/tag_textarea.asp

•  Código del formulario (>FORM>)

•  Función JavaScript definida en <HEAD>
  • Links de descarga
http://lwp-l.com/pdf482

Comentarios de: Desarrollo de aplicaciones web - Capitulo 1. Introducción a programas en el lado del cliente (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad