Dec1 Traspas

Arquitectura Web y Entorno Cliente
Desarrollo en Entorno Cliente

DAW
Tema 1
Sergio de Mingo (IES G.M. Jovellanos)
Desarrollo en Entorno Cliente (DAW)
Tema 1
1 / 28
1 Introduccin
2 Qu es el entorno cliente?
3 Modelo de ejecucin
4 Herramientas de desarrollo
Tema 1
2 / 28
Introduccin
Arquitectura de la Web
Como funciona realmente una aplicacin web?

Modelo distribuido
La ejecucin se reparte entre el servidor y el navegador
El porcentaje de computo de cada uno ha variado con los aos
Tema 1
3 / 28
Introduccin
Tema 1
4 / 28
Introduccin
Inicialmente los servicios web simplemente servan ficheros HTML. El

navegador lee las etiquetas y visualiza el documento.
En 1995 Netscape desarrolla JavaScript y se mezcla con el HTML.
Ahora el navegador ya ejecuta cosas.
A finales de los aos 90 se populariza el uso de CGI. Tecnologa
destinada a servir pginas dinmicas. Los ficheros HTML que recibe el
navegador los generan ahora programas bajo demanda. No son
estticos.
Tema 1
5 / 28
Introduccin
El CGI va perdiendo importancia con la aparicin de otros lenguajes

como PHP o ASP. Cada vez se hacen ms tareas en el servidor. En el
cliente solo se ejecutan algunas cosas con JavaScript o Flash.
Hacia el 2004 Google cambia el escenario con Gmail. Comienza a usar
masivamente AJAX y destroza a sus competidores gracias a su buen
rendimiento.
A partir de ese momento, la ejecucin de computo en el cliente cobra
mucha importancia: reduce ancho de banda y mejora en gran medida
la experiencia del usuario.
Tema 1
6 / 28
Qu es el entorno cliente?
El navegador como plataforma
Internet es un entorno totalmente heterogneo y distribuido

Aplicaciones de diferentes fabricantes, diferentes lenguajes y
ejecutadas en diferentes arquitecturas tienen que interactuar
Los usuarios de las aplicaciones pueden usar diferentes plataformas
para acceder a estas: PC, notebooks, mviles, tablets, etc.
Para el lado del servidor esto no es un problema: Protocolos estndar.
Pero que pasa con el lado del cliente?
Tema 1
7 / 28
El navegador se ha convertido en una autntica plataforma de

desarrollo
Y JavaScript en el principal lenguaje de aplicaciones para el lado del
cliente.
Aporta portabilidad (de verdad?)
Desde hace muchos aos se ha buscado una plataforma de ejecucin
para entornos heterogneos y distribuidos. Y entonces ... ah estaba el
navegador.
Tema 1
8 / 28
Por qu entonces hacer aplicaciones nativas para mviles? Podran

ser sustituidas por aplicaciones web?
A da de hoy podemos tener contrapartidas:
Experiencia del usuario
Acceso a recursos hardware del dispositivo (GPS, tarjeta, batera, etc.)
Comercializacin al margen de los mercados de aplicaciones y difcil
monetizacin
Tema 1
9 / 28
El entorno de cliente
Generalmente en una aplicacin web distinguimos dos partes bien

diferenciadas:
Back-End: Lgica que generalmente se computa en el servidor
Front-End: Lgica computada en el lado del cliente
La tendencia hoy en da es a agrupar gran parte del computo en el

front-end
Tema 1
10 / 28
El back-end debe ser accesible entonces por el front-end pero de que
manera? Protocolo propio, mensajes, librera especfica
Hoy en da, interesa tener un mismo back-end para aplicaciones web y
para aplicaciones mviles de diferentes fabricantes
La solucin a esto es una una interfaz REST en el back-end
Protocolo de mensajes autocontenidos (sin estado)
Cada operacin encapsulada en una URL
Compatible con front-end web y con aplicaciones mviles
Tema 1
11 / 28
Para desarrollar en el entorno cliente hemos de usar lenguajes que sean

interpretados por el navegador
De forma mayoritaria se ha tomado como base el estndar
ECMAScript (actualmente en versin 5) para soportar lenguajes como
JavaScript, JScript de MS o ActionScript de Adobe
En este entorno es comn ayudarse de frameworks o libreras que
agrupan tareas comunes y repetitivas sobre funciones que el
desarrollador usa para simplificar: JQuery, AngulaJS, EmberJS,
Prototype, etc.
Tema 1
12 / 28
Este cdigo es descargado junto con el HTML del documento al que

acompaa
Mientras el navegador rendirse los elementos visuales ejecuta el cdigo
JavaScript
Generalmente, mientras el documento permanece cargado (visualizado
en el navegador) las diferentes funciones de JavaScript enlazadas a ese
documento son invocadas de forma asncrona (bajo demanda o
cuando toque)
Tema 1
13 / 28
El cdigo JavaScript, generalmente, suele encargarse de las siguientes
tareas:
Modificar o alterar el documento (crear, borrar elementos)
Chequear la entrada de datos por los formularios
Realizar peticiones HTTP sin necesidad de recargar otro
documento
Podemos realizar cualquier otra tarea que necesitemos

Las nicas limitaciones que posee JavaScript son las relacionadas con
operaciones sobre el sistema de ficheros o sobre la capa hardware
Tema 1
14 / 28
Modelo de ejecucin
Modelo de Objetos de Documento
JavaScript se creo originariamente para manipular documentos HTML

Aunque hoy en da se usa en otros entornos, esta sigue siendo su
principal funcin
Para manipular fcilmente un documento, este debe estar bien
estructurado. Seguir una estructura bien definida.
Tema 1
15 / 28
Modelo de ejecucin
Si un documento siguiera un modelo sencillo, por ejemplo, un string o

un array de caracteres, sera muy difcil manipularlo. Por ejemplo:
Elimina el tercer prrafo
Inserta una imagen tras la lista con identificador cosas
Transforma cada etiqueta span de clase link en un enlace
El documento se modeliza como un objeto complejo. Un objeto que a

su vez contiene otros que contienen a otros tantos. A esto se le llama
Modelo de Objetos del Documento o DOM
Tema 1
16 / 28
Modelo de ejecucin
Navegar por el DOM y manipularlo (creando, borrando y modificando

objetos) es sencillo
Existen muchas libreras en diferentes lenguajes para manipular un
documento a travs de su DOM (PHP, Python, Perl, Java, etc.)
Nosotros manipularemos el DOM a travs de JavaScript
Tema 1
17 / 28
Modelo de ejecucin
<html>
<head>
<title>
Alchemy for beginners
</title>
<script>...</script>
</head>
<body>
<h1>Chapter1: Equipment</h1>
<p>This is what <em>alchemis bottle</em>
looks like:
<img src=....>
</body>
</html>
Tema 1
18 / 28
Modelo de ejecucin
El motor de JavaScript
JavasScript es ejecutado a travs de un intrprete dentro del propio
navegador
Normalmente usamos la etiqueta <script> de HTML para incrustar
cdigo JavaScript en un documento
Para la ejecucin de todo el cdigo se utiliza un solo hilo de
ejecucin. Nunca habr dos instrucciones JavaScript solapndose en
el tiempo
El cdigo deber englobarse en funciones y estas sern asociadas a
manejadores de eventos y ejecutado de forma asncrona
Tema 1
19 / 28
Modelo de ejecucin
Cada manejador es disparado cuando su evento tenga lugar (click de

ratn, evento de red, etc.)
El interprete de JavaScript, tras ejecutar el cdigo interno dentro del
documento, permanece a la espera de que ocurran eventos
Cada vez que un evento tiene lugar, se acola en una estructura que es
consultada por el interprete
Cada evento en la cola es atendido cuando le toque el turno,
ejecutando el manejador asociado
Tema 1
20 / 28
Modelo de ejecucin
Tema 1
21 / 28
Modelo de ejecucin
Dentro del intrprete hay objetos JavaScript predefinidos:

Objeto Window: Representa al navegador. Es el objeto raz del DOM
Objeto Document: Representa el documento cargado en ese momento
El resto de entidades HTML a su vez sern cargados en el DOM pero

no podremos estar seguro de si estarn cargadas cuando
nuestro cdigo sea ejecutado
Tema 1
22 / 28
Modelo de ejecucin
Como el objeto document est contenido dentro del objeto window

para invocar a un mtodo sobre el documento usaremos la siguiente
frmula:
window.document.write(mensaje de texto)
Esto invoca el mtodo write sobre el documento actualmente cargado
Tema 1
23 / 28
Modelo de ejecucin
Tambin pueden ser tiles los mtodos alert(), prompt() y
confirm() todos ellos del objeto window. Permiten interactuar con el
usuario
window.alert(Este es un mensaje de alerta)
Todas las invocaciones a window pueden omitirse, por defecto, todo

mtodo y propiedad se asume de su propiedad
prompt(Introduce tu nombre)
document.write(Muchas gracias!)
Tema 1
24 / 28
Modelo de ejecucin
Primer script
<html>
<head>
<title>Mi primer script</title>
<script>
document.write(mi primer script)
</script>
</head>
<body>
</body>
</html>
Tema 1
25 / 28
Herramientas de desarrollo
Herramientas
La herramienta fundamental es un editor de texto

Para Windows: Notepad++, UltraEdit, etc.
Para Linux: Gedit, Emacs, Vim, etc.
Mltiples sistemas: Sublime, Atom, etc.
Un navegador web: Usaremos Firefox.

Para depurar nuestros scripts usaremos un plugin o extensin de
Firefox llamada Firebug.
Tema 1
26 / 28
Herramientas de desarrollo
Herramientas
Tema 1
27 / 28
(cc) Sergio de Mingo

Some rights reserved. This work is licensed under a Creative Commons
Attribution-Share Alike 3.0 Spain License, available at
http://creativecommons.org/licenses/by-sa/3.0/
http://apuntes-fp.blogspot.com
sergio.demingogil@educa.madrid.org
Tema 1
28 / 28

Dec1 Traspas

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Dec1 Traspas

Загружено:

Авторское право:

Доступные форматы

Arquitectura Web y Entorno Cliente

Desarrollo en Entorno Cliente

Sergio de Mingo (IES G.M. Jovellanos)

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Como funciona realmente una aplicacin web?

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Inicialmente los servicios web simplemente servan ficheros HTML. El

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

El CGI va perdiendo importancia con la aparicin de otros lenguajes

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

El navegador como plataforma

Internet es un entorno totalmente heterogneo y distribuido

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

El navegador como plataforma

El navegador se ha convertido en una autntica plataforma de

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

El navegador como plataforma

Por qu entonces hacer aplicaciones nativas para mviles? Podran

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Generalmente en una aplicacin web distinguimos dos partes bien

La tendencia hoy en da es a agrupar gran parte del computo en el

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Para desarrollar en el entorno cliente hemos de usar lenguajes que sean

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Este cdigo es descargado junto con el HTML del documento al que

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Podemos realizar cualquier otra tarea que necesitemos

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Modelo de Objetos de Documento

JavaScript se creo originariamente para manipular documentos HTML

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Modelo de Objetos de Documento

Si un documento siguiera un modelo sencillo, por ejemplo, un string o

El documento se modeliza como un objeto complejo. Un objeto que a

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Modelo de Objetos de Documento

Navegar por el DOM y manipularlo (creando, borrando y modificando

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Modelo de Objetos de Documento

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente

Desarrollo en Entorno Cliente (DAW)

Arquitectura Web y Entorno Cliente