AplicEnriqInter 201708 U1

Aplicaciones Enriquecidas de
Internet (RIAs)
Unidad 1
Principios de Aplicaciones
Enriquecidas de Internet
RIAs - u1 MCE Beatriz A. Olivares Zepahua 1

Contenido
Introduccin CSS
Colores, formatos
Conceptos bsicos
Distribucin
Definiciones Caractersticas
Objetivos avanzadas
Caractersticas JS
Ventajas Estatutos de control
Desventajas Funciones
JSON
Elementos de Soporte
Manipulacin DOM
HTML 5
Caractersticas Clasificaciones
Elementos semnticos Diseo
Soporte multimedia

Evidencias
Enviar a bolivares@ito-depi.edu.mx o
subirlo a GoogleDrive o Dropbox (y enviar
correo de aviso)

Competencias Previas
Analiza, disea y desarrolla soluciones de problemas reales utilizando
algoritmos computacionales para implementarlos en un lenguaje de
programacin orientada a objetos.
Conoce la arquitectura general de aplicaciones Web identificando sus
elementos de forma independiente al lenguaje de programacin.
Programa aplicaciones Web bsicas con lenguajes del lado del
servidor y del lado del cliente.
Modela, disea y crea bases de datos relacionales con base en los
estndares establecidos, as como los nuevos paradigmas de tratamiento
de datos.
Crea y manipula bases de datos utilizando distintos Gestores de Bases de
Datos considerando elementos de integridad y seguridad para el
tratamiento de la informacin en distintas plataformas.
Implementa mecanismos de seguridad y disponibilidad de la base de datos.
Disea e implementa objetos de programacin que permiten resolver
situaciones reales y de ingeniera.
Construye aplicaciones con interfaz grfica amigable enfocadas en
problemas reales.

Diagnstico de Conocimientos
Previos
POO
Diagrama de clases
Cdigo Java
Arquitectura de aplicaciones Web
Planteamiento de solucin
Programacin de aplicaciones Web
Pseudocdigo
VERIFICACIN: martes 29 de agosto

Introduccin
En su momento la Web se pens sobre contenido
ms o menos esttico
La capacidad de acceso fcil y de bajo costo gener
el nacimiento de aplicaciones (contenido dinmico)
Ineficientes considerando los viajes al servidor
Lentas debido a la red
GUI y eventos pobres (comparados con aplicaciones de
escritorio)
Abaratamiento del hw
Capacidades cada vez mayores en las PCs
Surgimiento de dispositivos mviles con capacidad de
procesamiento

Introduccin (cont.)
Aplicaciones Enriquecidas de Internet (Rich Internet
Applications, RIAs)
Aplicaciones que buscan emular la capacidad de
procesamiento que se tiene en las aplicaciones de
escritorio
Evitar/disminuir recarga de la pgina
Llamadas asncronas para disminuir el tiempo de espera
Alternativas
Applets
Flash/Flex
JavaFx, MS Silverlight
AJAX

Conceptos bsicos
Definiciones
Aplicaciones basadas en Web que tienen
algunas caractersticas de las aplicaciones
grficas de escritorio (Russell Kay, 2009)
Aplicaciones Web que agregan mejor interaccin,
presentacin y capacidades computacionales de
aplicaciones de escritorio del lado del cliente a
las aplicaciones tradicionales (Toffetti et al, 2011)
Aplicaciones que combinan lo mejor de las
aplicaciones Web y las aplicaciones de escritorio
para mejorar la experiencia del usuario (Alor et
al, 2014)

Conceptos bsicos (cont.)
Objetivos RIAs
Incrementar/mejorar la experiencia del
usuario
Aumentar las capacidades de las
aplicaciones Web (multimedia, procesamiento
del lado del cliente, trabajo colaborativo,
comunicacin flexible)
Disminuir tiempos (menos llamadas con
menor contenido, menor consumo de ancho
de banda)

Conceptos bsicos (cont.)
Caractersticas RIAs
De acuerdo con Fraternali, citado por Toffetti, las RIAs tienen
4 caractersticas principales
Interfaz (presentacin) rica en elementos visuales y manejo de
eventos semejante a una aplicacin de escritorio, soporta
recarga parcial de pginas y contenido multimedia
Almacenamiento de informacin del lado del cliente, con
diferentes niveles de persistencia durante la ejecucin de la
aplicacin
Lgica de negocio distribuida incluso en el cliente
(validaciones, decisiones sobre navegacin/
filtrado/ordenamiento)
Comunicacin (a)sncrona entre el cliente y el servidor (con la
posibilidad de iniciarla incluso desde el servidor)

Tipos de RIAs
De acuerdo con Toffetti, basado en un reporte de Gartner Group
(clasificacin de aplicaciones de acuerdo a su soporte a AJAX)
Aplicacin Web tradicional con soporte RIAs: la aplicacin se
"maquilla" para soportar algunas caractersticas como la carga parcial
de pginas; por ejemplo Facebook.
Interfaz de usuario enriquecida: aplicaciones Web que utilizan
interfaces grficas basadas en widgets que trabajan coordinados y que
extienden el comportamiento normal del visualizador (control de
eventos, manejo de estados), por ejemplo YouTube.
Aplicaciones independientes (stand alone): aplicaciones que se
ejecutan dentro o fuera del visualizador tanto de forma conectada como
desconectada, por ejemplo SlideRocket (aplicacin para
presentaciones en lnea y fuera de lnea).
RIAs distribuidas: aplicaciones cuyos datos y/o lgica se distribuye (a
veces de forma dinmica) entre el cliente y el servidor, soporta
colaboracin en lnea y comunicacin cliente-servidor en ambos
sentidos; por ejemplo Google Docs.

Categoras de RIAs
De acuerdo con Toffetti, segn la tecnologa en el cliente se dividen
en tres categoras
Basadas en JS: la lgica lado del cliente se hace mediante AJAX
(Asynchronous JavaScript and XML), la parte de interfaz grfica se
realiza con HTML y CSS. Pueden o no usar marcos de trabajo
Ventajas: uso de estndares "simples"
Desventajas: visualizadores con diferentes niveles de soporte y mnimos
permisos de almacenamiento (persistencia)
Basadas en plug-ins: la reproduccin (render) y el control de eventos
se realiza mediante plug-ins que ejecutan algn lenguaje, como es el
caso de Flash, JavaFx y Silverlight.
Ventajas: soporte nativo a multimedia, mayor soporte a persistencia, mejor
rendimiento que JS
Desventajas: dependencia de soporte/instalacin/permisos en cliente
Basadas en ambientes de ejecucin: la aplicacin se descarga de
Web pero se ejecuta en un ambiente de ejecucin que no es el
visualizador, por ejemplo Adobe AIR.
Ventajas: acceso a los servicios que provee el SO
Desventajas: instalacin en el cliente

Ventajas de RIAs
De acuerdo con Veit, citado por Alor, las ventajas de las RIAs sobre
las aplicaciones Web tradicionales son:
Acceso inmediato: gracias a las cargas parciales, la navegacin es
ms clara y consume menos tiempo.
Caractersticas grficas avanzadas: se soportan caractersticas
"naturales" a los ambientes grficos en escritorio como "arrastrar-y-
soltar" (drag and drop).
Sensibilidad e interactividad: ya que parte de la lgica queda en el
cliente, se disminuye el trfico en la red y los tiempos de respuesta son
menores. Con la carga parcial y la mayor velocidad, el usuario puede
interactuar ms fcilmente con la aplicacin.
Comunicacin en tiempo real: permite a los usuarios colaborar y
compartir informacin en la Web directamente bajo esquemas como
mensajera instantnea, video bajo demanda y conferencias entre
otras.
Facilidad de mantenimiento: en el sentido de que se pueden
modificar elementos sin necesidad de refrescar la pgina completa.

Desventajas de RIAs
Existe poca informacin formal sobre las desventajas
de las RIAs, de acuerdo con algunos blogs y
experiencia personal:
Son aplicaciones ms complejas de disear y construir.
La combinacin de tecnologas requiere mayor
conocimiento
Las facilidad y velocidad de actualizacin de la pgina
puede generar que el usuario no sepa que sucedi (al
agregar un producto al carrito, el cono superior aumenta
el total pero pocos lo notan)
Regresa el problema relacionado con cdigo asociado a la
prdida de foco
Sobrecarga de trabajo al cliente para cosas simples (SAT)

Tarea
Realizar mapa mental sobre los conceptos
relacionados con Web y RIAs
FECHA DE ENTREGA: 11 de septiembre
Realizar reporte de investigacin sobre
clasificaciones de marcos de trabajo para
RIAs (lo pueden encontrar en las tesis
indicadas en las referencias bibliogrficas)
FECHA DE ENTREGA: 8 de septiembre

Elementos de Soporte
Con excepcin de los casos de las aplicaciones independientes, los
otros tres pueden apoyarse en estndares del W3C como son
HTML 5
Ventajas: estndar que incluye muchas nuevas caractersticas como
validaciones del lado del cliente
Desventajas: en realidad no es estndar, puesto que slo Google Chrome tiene
el soporte completo de las nuevas caractersticas
CSS3
Ventajas: estndar que incluye nuevas formas de escribir reglas aplicando cosas
semejantes a las expresiones regulares, por ejemplo, es posible crear reglas
para todos los atributos que empiecen con ciertas letras
Desventajas: soporte en visualizadores
JavaScript
Ventajas: lenguaje fcil de aprender
Desventajas: soporte en visualizadores, particular soporte a objetos (aunque con
JSON esto es menos problema), limitaciones de acceso a memoria/disco

HTML 5
Es recomendacin del W3C a partir del 28 de
octubre de 2014
Incluye nuevas etiquetas para soporte multimedia
canvas (dibujos 2D), video y audio
Desaparece etiquetas
applet, font, dir, frame, frameset, noframe entre otras
Busca disminuir el uso de plugins
Enriquece etiquetas para disminuir uso de script
Busca enriquecer semntica
Genera nuevos tipos de controles
Su implementacin (al ser un estndar relativamente
nuevo) vara entre los distintos visualizadores

HTML5 - Controles
La etiqueta input no ha variado desde las primeras versiones de
HTML, aunque en HTML5 se crearon nuevos tipos (si el
visualizador no lo soporta, se muestra como tipo TEXT normal)
color (no Explorer ni Safari)
date (no Explorer ni Firefox), datetime (slo Opera), datetime-local (no
Explorer ni Firefox), time (no Explorer ni Firefox), month (no Explorer ni
Firefox), week (no Explorer ni Firefox)
email (no Explorer 9 ni Safari)
file
image (imagen como botn o como mapa)
number (no Explorer 9)
range (no Explorer 9)
search (slo Safari)
tel (todava no es soportado en la mayora de los visualizadores)
url

HTML5 - Validaciones
Los controles especiales cuentan con
validacin del lado del cliente y mensajes
en el idioma de la mquina (no del
visualizador, no a seleccin del usuario)
Ventaja: no es necesario programar
Desventaja: es posible que el usuario
necesite mensajes especficos y/o en un
idioma especfico y no hay forma de
implementarlo
HTML 5 - Algunos nuevos
atributos
autocomplete (formulario y campo, en funcin del historial de
captura)
novalidate (formulario)
autofocus
formaction (slo submit o image, sobrescribe el atributo action
del formulario)
min, max (valores mnimos y mximos en el caso de
controles de captura de fechas y nmeros)
pattern (aplica a password, email, search, tel, text, url; no
soportado en Safari)
required
list
Se asocia con el elemento datalist para campos que se auto
completan (el tipo del control no se indica, slo la lista)

Ejemplo
Ejemplo de controles (ejctrls)

Ejercicio
Realizar la prctica 1 sobre caractersticas
generales de HTML 5

Elementos "semnticos"
Definen el uso de reas en una pgina
Los visualizadores realizan algunas afectaciones visuales a las
reas definidas; para que se soporten en sus versiones
antiguas, todas se deben incluir como bloque en una hoja de
estilos (excepto figcaption)
header
Encabezado de una seccin o rea, una especie de ttulo
nav
Identifica una seccin para ligas de navegacin
section
Identifica una seccin o rea, para hacer separacin de temas
article
Identifica contenido con informacin propia, que es posible distribuir de
manera independiente al resto del sitio (publicaciones en foros, blogs,
noticias, comentarios) o que proviene de otros sitios

Elementos "semnticos" (cont.)
aside
Identifica un rea sobre informacin externa relacionada
(publicidad, sitio de la referencia, etc.), puede relacionarse
con <article>, de momento no tiene una representacin
grfica
figure
Identifica una seccin relacionada con contenido grfico, si la
imagen no se encuentra se muestra al menos el ttulo (no X
roja como en HTML tradicional)
figcaption
Ttulo de un contenido grfico, anidado dentro de <figure>
footer
Pie de la seccin o rea, generalmente para datos del autor,
derechos, aviso legal, etc.

Elementos "semnticos" (cont.)
details
rea de informacin adicional que puede mostrarse o no
(atributo open), no tiene soporte ni en Explorer ni en Firefox
summary
Ttulo del rea de informacin adicional, anidado dentro de
<details>
mark
Resalta un texto
time
Indica que el texto en medio de las etiquetas corresponde a
informacin de horas en formato legible para los humanos,
no afecta la visualizacin; el atributo datetime se usa para
indicar la fecha-hora equivalente en un formato para las
mquinas que permita a los buscadores optimizar la
informacin que encuentran

Ejemplo
Ejemplo de uso de etiquetas semnticas
(semantica.html)

Ejercicio
semnticas de HTML 5

HTML 5 - Multimedia
Grficos
<canvas/>
Un rea para contener grficos que se generan a tiempo de
ejecucin mediante JavaScript
Atributos
id: para referenciar desde JavaScript
width: ancho en pixeles
height: alto en pixeles
style: estilo bajo CSS
Mtodos (desde JS)
getContext("2d")
moveTo(x,y)
lineTo(x1, y1)
stroke()


HTML 5 Multimedia (cont.)
Audio
<audio controls> <source src="url"
type="tipo_MIME"/> </audio>
Etiqueta para reproducir archivos de audio
Si se coloca texto entre las etiquetas <audio> se mostrar en
los casos donde el visualizador no soporta HTML 5
El atributo controls muestra los controles de Reproducir,
Pausa, Volumen
La etiqueta interna source permite indicar el origen del
archivo de audio; si se indica ms de una se reproducir la
primera que reconozca el visualizador dependiendo del tipo
MIME
Formatos soportados: MP3 (audio/mpeg; todos los
visualizadores), WAV (audio/wav; todos menos IE), OGG
(audio/ogg; no IE ni Safari)

HTML 5 Multimedia (cont.)
Video
<video controls width="num"
height="num"> <source src="url"
type="tipo_MIME"/> </video>
Etiqueta para reproducir archivos de video; es la
alternativa a Flash (que los nuevos visualizadores ya
no soportan)
Comportamiento equivalente a audio en cuanto al
atributo controls y la etiqueta source
Formatos soportados: MP4 (video/mp4; todos), WebM
(video/webm; no IE ni Safari), OGG (video/ogg; no IE ni
Safari)

Ejemplo
Ejemplo de uso de grficos (dibujos)
Ejemplo de uso de archivos de audio
(sonido)
Ejemplo de uso de archivos de video
(videos)

Ejercicio
multimedia de HTML 5

CSS
Sintaxis
Nombre_etiqueta {propiedad: valor}
A diferencia de HTML, el valor no va entre comillas, a menos

que se trate de varias palabras; si es ms de una propiedad
a modificar, se separan con punto y coma
Inclusin en la pgina
En un archivo separado, con extensin .css (ms
recomendable)
<head> <link rel =stylesheet type=text/css
href=url_del_archivo_css> </head>
De forma explcita en cada pgina
<style type="text/css">
Nombre_etiqueta {propiedad: valor}
</style>
En el atributo style de la etiqueta en HTML
CSS (cont.)
Algunas propiedades
color
Nombre, valor hexadecimal, RGB, RGBA (RGB + canal alfa para opacidad donde
0 es transparente y 1 es opaco), HSL (color en grados considerando un crculo
de color -, saturacin y luminosidad), HSLA (lo mismo pero con saturacin)
background-color
float: ordenar la informacin, por omisin el flujo es de izquierda a
derecha y de arriba abajo (none, left, right)
font-family: Arial, Helvetica, Tahoma, Verdana, "Times New Roman"
font-size
Absoluta: fija, se indica en pixeles o em (aproximadamente la altura de la M
mayscula en tamao estndar 16 pixeles aprox.), no permite que el
visualizador lo adapte
Relativa: puede adaptarlo el visualizador; se indica en porcentaje o texto (small,
smalller, large, larger)
font-style (normal, italic, oblique)
font-weight (normal, bold, bolder, lighter)
display: inline, block, flex, table

CSS (cont.)
text-decoration (none, underline, overline, blink)
text-align (center, left, rigth, justify)
text-transform (uppercase, lowercase, capitalize)
text-indentation (valor numrico en pixeles)
list-style-image url(url_especifica)
position
static: valor por omisin, corresponde al flujo de la pgina, no
se afecta por atributos top, bottom, left, right
fixed: relativo a la ventana del visualizador, no se mueve
aunque exista barra de desplazamiento
relative: desplazamiento respecto a la posicin por omisin
absolute: desplazamiento respecto a la posicin del padre
inmediato no esttico (hasta llegar a <html>)
Afectado por top, bottom, left, right, z-index (forma una pila,
hace que aparezca atrs negativos o adelante positivos
de otros elementos)

Ejemplo
Ejemplo de estilos (folder secciones)

Ejercicio
de colores y formatos con CSS

CSS - Distribucin
Manejo de mltiples columnas
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
CSS Distribucin (cont.)
Diseo responsivo
"Autoajuste" para distintos dispositivos que tienen
diversas medidas
Se basa en tres grandes componentes
Distribucin (layout) flexible
Se consideran 12 columnas idealmente
Uso de unidades relativas (em o %)
Uso de viewport (espacio disponible de pintado)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
* {
box-sizing: border-box;
}
En HTML5 se crearon varias unidades relativas ms relacionadas
con el espacio de pintado (no implementados en todos los
navegadores):
Vw: ancho del espacio
Vh: alto del espacio
Vmin: mnimo ancho y alto del espacio
Vmax: mximo ancho y alto del espacio

Media query
Permiten decidir, desde CSS, qu estilo aplicar o no aplicar en
funcin del dispositivo de visualizacin
Aunque es posible su uso dentro de HTML, se prefiere incluirlas
en el archivo CSS
Se conocen tambin como reglas
@media not|only mediatype and (media feature) {
CSS-Code;
}
Mediatype (tipo de medio)
all (cualquier dispositivo), print (para impresora), screen (para
pantallas de pc, laptop, tablet, celular), speech (para casos de
lector)
Existen otros pero estn en desuso.
Media feature (caractersticas del medio)
Aspect-radio (proporcin entre ancho y alto del espacio), color
(nmero de bits para el color), width, height, orientation, entre
otros
Preferentemente incluir primero los casos para mviles y
despus el cambio para casos de mayor tamao

Multimedia flexible
Indicar ancho mximo de 100% de manera que el
elemento se adapte
Colocar contenedores con ancho del 100% para que se
adapte al contenido real en casos de elementos
embebidos como <iframe>

Diseo responsivo
"Autoajuste" para distintos dispositivos que tienen diversas medidas
Se consideran 12 columnas idealmente
<meta name="viewport" content="width=device-width, initial-scale=1.0">

*{
box-sizing: border-box;
}
[class*="col-"] {
/*Para dispositivo mvil*/
width: 100%;
}
@media only screen and (min-width: 768px) {

/* Para laptop o desktop: */
.col-1 {width: 8.33%;}

.col-12 {width: 100%;}
}

Ejemplo
Ejemplo de diseo responsivo
(responsivo)

Ejercicio
de distribucin con CSS

CSS Caractersticas
avanzadas
Transformaciones
2D
translate(), rotate(), scale(), skewX(), skewY(), matrix()
Dependen del visualizador (diferentes instrucciones)
Por ejemplo
canvas {
-ms-transform: translate(50px, 50px); /* IE 9 */
-webkit-transform: translate(50px,50px); /* Safari */
transform: translate(50px,50px);
}
3D
rotateX(), rotateY(), rotateZ()
CSS Caractersticas
avanzadas (cont.)
Transiciones
Permite modificar el valor de una propiedad, de forma
suave, en un tiempo.
Requiere indicar la propiedad afectada y el tiempo que
tardar el cambio.
Por ejemplo, el color de un elemento, cambia de color al
pasar el mouse por encima y el cambio se ver
lentamente a lo largo de 2 segundos
button{
background: blue;
-webkit-transition: background 2s; /* Safari */
transition: background 2s;
}
button:hover {
background : red;
}

CSS Caractersticas
avanzadas (cont.)
Animaciones
Cambio de un estilo a otro, a lo largo de un
tiempo
Utiliza @keyframes, una "regla" que define el
estilo inicial y el estilo final (ligera variacin
para Chrome, Safari y Opera); puede
indicarse como inicio(start) y fin (end) o con
porcentajes (0% es el inicio y 100% es el fin,
con los valores intermedios posibles)
El elemento que tendr la animacin requiere
las entradas animation-name (asociada a la
regla anterior) y animation-duration
Ejemplo
Ejemplo de transformacin
(transformaciones)
Ejemplo de transicin (transiciones)
Ejemplo de animacin (animaciones)

Ejercicio
avanzadas con CSS

JavaScript
Lenguaje bsico de programacin en el cliente
Web (visualizador)
Es interpretado
Maneja objetos, aunque no es OO
Cuenta con funciones para manipular el DOM
No define tipos de forma explcita
NO ES Java, slo toma el nombre por
mercadotecnia (ECMAScript)
Coincide con parte de la sintaxis de Java (punto
y coma, llaves; s existe == para cadenas)

Variables y funciones generales
Definicin de variables
var nombre=valor;
Mtodos bsicos
parseInt(valor, base)
Valida que el valor sea un nmero entero convertible segn la base
indicada
parseFloat(valor)
Valida que el valor sea un nmero de punto flotante
isNaN(valor)
Regresa verdadero si el valor no es un nmero (is Not a Number)
confirm(mensaje)
Presenta mensaje con botones Ok y Cancel, regresa verdadero si
oprimi Ok
alert(mensaje)
Presenta mensaje, slo tiene el botn Ok

Estatutos de Control
Estatutos de control
Condicionales simples Ciclos
if (expresin 1) for (valor inicial; condicin; incremento)
instrucc1; instruccin
else if (expresin 2) for (variable in object)
else while (expresin)
Condicionales mltiples
switch (expresin){
case op1:
instrucc 1;
break;
case op2:
instrucc 1;
break;
default: instrucc 3;
}
Operador ternario
x=(condicin)? si_verdadero :
si_falso

Funciones
Definicin de funciones
function nombre(lista_parametros){
instrucciones
}
Como no hay tipos explcitos, la lista de parmetros
slo tiene los nombres.
Puede o no regresar valores (return true;)
Pueden invocarse desde eventos
Ejemplo
function saluda(x){
alert(Hola +x);
}

Funciones para cadenas en JS
indexOf(cadena1)
obtiene la primera posicin de la cadena1 dentro del objeto
cadena o -1 si no lo encuentra
lastIndexOf(cadena1)
obtiene la ltima posicin de la cadena1 dentro del objeto
cadena o -1 si no lo encuentra
substring(inicio, fin)
obtiene una cadena parcial del objeto, de la posicin inicio a la
posicin fin
length
propiedad (no funcin), longitud del objeto cadena

Funciones para cadenas en JS
match(expresin regular)
Permite revisar el objeto cadena respecto a un patrn
/^\d+$/ asegura que slo haya dgitos entre el principio (^ ) y el final ($) del
string
^ inicio de patrn
$ fin de patrn
\d un dgito
\D una letra (mayscula o minscula)
\w letra o dgito
[ ] conjunto de caracteres, en cualquier orden
[a-z] cualquier letra minscula
\ / una diagonal (puesto que la diagonal sola implica el inicio de la expresin
regular)
. cualquier caracter menos el salto de lnea

Funciones para fechas en JS
X = new Date()
Crea un objeto de tipo fecha con la fecha-hora actual del equipo
X.getDate()
Obtiene el da del mes (1-31) correspondiente a la fecha
X.getDay()
Obtiene el da de la semana (0-6) correspondiente a la fecha
X.getMonth()
Obtiene el mes (0-11) correspondiente a la fecha
X.getFullYear()
Obtiene el ao a cuatro posiciones correspondiente a la fecha
X = parse (cadena)
Convierte la cadena en fecha (como nmero de milisegundos a
partir del 1 de enero de 1970)

JavaScript + HTML
Interno, como parte de la propia pgina
<script language="javascript">
function saluda(x){
alert("hola "+x);
}
</script>
Externo, como archivo .js
<script language="javascript" src="funciones.js"
/>

Orden de validacin
Campo con informacin
Patrn de informacin
Tipo de dato
isNaN(valor)
parseInt(valor, base)
var x = new Date() //objeto con fecha-hora actual
x.setFullYear(ao, mes, da) //para comparar o
realizar operaciones
Rango de valores
Validaciones cruzadas (si tal campo tiene x
valor, el campo 2 debe tener valor y)

Ejemplo
Ejemplo de funciones (funciones)
Ejemplo de validaciones (valida)

Ejercicio
Realizar la prctica 7 sobre funciones con
JS

JSON
Java Script Object Notation (Notacin de Objetos de Java Script)
De acuerdo con sus creadores, es un formato ligero de intercambio de
datos.
Se considera ligero porque es mnima la sobrecarga de elementos
(comparado con las etiquetas de XML) y es fcil de interpretar por humanos
y por mquinas
Es parte del estndar ECMA
Es texto independiente del lenguaje, por lo que es posible utilizarlo no slo
en JS sino en Java, PHP, C, entre otros
Est formado por dos grandes estructuras
Coleccin de pares llave-valor, no ordenados, interpretable como un objeto
Lista ordenada de valores, interpretable como un arreglo
Existen validadores como en https://jsonformatter.curiousconcept.com/

JSON (cont.)
Coleccin de pares llave-valor
Cada coleccin (u objeto) se limita entre llaves ({ } )
Los pares se separan por comas
Cada par llave-valor se escribe como "llave":valor
Valor acepta: cadenas, nmeros (enteros, fraccionales, notacin
cientfica), objetos, arreglos, true, false, null
Las cadenas van entrecomilladas, utilizan caracteres UNICODE
Lista ordenada de valores
Cada lista se limita entre corchetes
Los valores se separan por comas
JS cuenta con un objeto JSON que permite convertir texto en
objetos

JSON (cont.)
Ejemplos
var sPersona = '{"nombre":"Juan",
"apellidoPat": "Torres", "edad": 20}';
var objPersona = JSON.parse(sPersona);
for (datos in objPersona){

alert(datos); //presenta los nombres de los
atributos
}
alert ("El nombre " + objPersona.nombre + ", la

edad " + objPersona.edad);
JSON (cont.)
Dado que JSON sirve para intercambio de datos, la idea es que la
informacin provenga de algn otro lado, por ejemplo el servidor y
se procese en el cliente.
Para ello se auxilia de un objeto de clase XMLHttpRequest, permite
hacer llamadas parciales al servidor y recibir respuestas parciales
open (mtodo HTTP, url de la llamada, sncrono o no)
Abre la conexin HTTP hacia la URL indicada
send()
Enva la llamada al servidor
Para procesar la respuesta, es necesario asignar una funcin al evento
onreadystatechange del objeto utilizando los atributos readyState
(4 si todo bien), status (200 si ok), responseText (texto de la
respuesta, idealmente JSON)

Ejemplo
Ejemplos de JSON (jsonsimple,
jsonexterno)

Ejercicio
Realizar la prctica 8 sobre JSON y JS

DOM
Document Object Model
Toda la informacin del documento jerarquizada
Objetos y colecciones
Las colecciones inician en la posicin 0
window
document
history
navigator
location
screen

DOM (cont.)
document
all
anchors
body
embeds
forms
images
links
plugins
scripts
styleSheets

window
Mtodos
blur()
focus()
open(url, nombre, opciones)
Regresa un objeto window (puedo descartarlo)
height se iguala con un nmero (pixeles de altura)
location se incluye si debe aparecer la barra de navegacin *
menubar se incluye si debe aparecer la barra de men *
resizable se iguala con verdadero o falso si puede o no cambiar de
tamao *
scrollbars se incluye si deben aparecer las barras de desplazamiento
*
status se incluye si debe aparecer la barra de estado *
toolbar se incluye si debe aparecer la barra de herramientas *
width se iguala con un nmero (pixeles de ancho)
window.open(http://www.google.com, , width=800px,
height=600px, resizable);
* Si no se incluye ninguna, asume que van todas

window
print()
resizeTo(ancho, alto)
moveTo(x,y)
close()
Eventos (corresponden a atributos en el body)
onblur
onerror
onfocus
onload
onunload

form
Mtodos
reset() se invoca automticamente con un botn
tipo reset
submit() se invoca automticamente con un control
tipo submit
Si se asocia un valor de retorno false, no cambia de pgina
(un retorno nulo o vaco lo considera como verdadero)
Eventos
onReset
onSubmit

JS y Controles
Button, reset, submit
Propiedades
disabled
value
name
Mtodos
blur()
click()
focus()
Eventos
onclick

JS y Controles (cont)
Text, password, textarea
Propiedades
disabled
value
name
Mtodos
blur()
select()
focus()
Eventos
onchange
onblur
onfocus
onselect

select
Propiedades
disabled
length
options[]
Name
selectedindex
Mtodos
blur()
focus()
Eventos
onchange
onblur
onfocus

option
Propiedades
defaultSelected
index
selected
text
value
Radio y checkbox
Propiedades
checked
disabled
Value
Mismos mtodos y eventos que los botones

Formas de obtener los controles
document.getElementById(id_elemento)
Obtiene un objeto que representa el elemento si existe o null en otro
caso
document.getElementsByTagName(etiqueta)
Obtiene un arreglo de elementos que corresponden a la etiqueta si
existe dentro del DOM
elemento.getElementsByTagName(etiqueta)
Obtiene un arreglo de elementos que corresponden a etiquetas
anidadas al elemento (tr dentro de table, td dentro de tr por ejemplo)
NOTA: los arreglos se generan siempre que haya ms de un
elemento del tipo/nombre, de lo contrario slo existe el elemento
directamente
document.forms[0].action //atributo action del primer formulario
document.form.action //atributo action del nico formulario

Tipo de elemento
element.type
checkbox
radio
text
button
submit
reset


Agregar/eliminar elementos al
DOM
r = tabla.insertRow(ndice)
Agrega un nuevo rengln a la tabla al inicio (ndice =0) o al final (ndice = -1), obtiene el elemento
si as se requiere.
tabla.deleteRow(ndice)
Elimina el rengln indicado por el ndice o el ltimo en caso de indicar -1
c = linea.insertCell(ndice)
Agrega una nueva celda al inicio del rengln (ndice = 0) o al final (ndice = -1), obtiene el elemento
si as se requiere.
linea.deleteCell(ndice)
Elimina la celda indicada por el ndice o la ltima en caso de -1
x = document.createElement("etiqueta")
Crea un nuevo nodo de acuerdo a la etiqueta indicada; en el caso de controles de captura (input)
despus es necesario indicar el tipo especfico como atributo del elemento
Document.createTextNode("texto")
Crea un nodo de texto en el documento, posteriormente debe asociarse a algn elemento; en el
caso de celdas tambin existe el atributo innerHTML que permite incluir texto directamente.
elemento.appendChild(x)
Agrega un nodo hijo al elemento indicado; por ejemplo, un campo de captura dentro de una celda

APIs HTML5 + JS
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE

Ejemplo
Pintar tabla de informacin proveniente de
PHP (jsonphpbd)

Ejercicio
Realizar la prctica 9 sobre afectaciones
al DOM

Soporte HTML5 mediante CSS
y JS
Cualquier visualizador identifica etiquetas, si no sabe que hacer con
ellas (por ejemplo si no tiene soporte a HTML 5), las maneja como
elementos anidados al nivel superior (inline elements).
Mediante CSS es posible indicar una forma de mostrar esos nuevos
elementos
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Mediante JS es posible crear nuevos tipos de etiquetas para que las
reconozcan versiones anteriores de los visualizadores, as como
darles un comportamiento especfico
<script>document.createElement("otro")</script>

<otro>Elemento reconocido</otro>

Diseo de RIAs (Neil)
4 niveles para el diseo
Estructura de la aplicacin
La estructura deja de ser jerrquica y la navegacin se altera
Deseable una pantalla por objetivo (informacin, procesamiento,
creacin), una aplicacin puede tener una mezcla de estructuras
Distribucin (layout) de pantallas
La autora propone 15 distribuciones estndar
Controles de interfaz grfica
La autora propone 33 controles de uso especfico
Interacciones (6)
Directa
Ligera
Mantenerse en la misma pgina tanto como sea posible
Ofrecer invitaciones
Hacer transiciones
Reacciones inmediatas

Patrn de aplicacin: informacin
Casos donde la mayor parte del tiempo del
usuario se emplea en "curiosear", comparar o
analizar informacin de algn tipo
Mapas, noticias, tiendas en lnea, sitios multimedia,
tableros
Enfatizan la comunicacin visual, hay una zona
eje y "rayos" que parten de ella para obtener ms
informacin/datos (ligas, botones, mens)
La pgina principal muestra el contenido primario
y la posibilidad de obtener mltiples vistas, filtros,
etc.

Patrn de aplicacin: procesamiento
Casos donde el usuario provee informacin
de forma estructurada.
Configuracin, instalacin, proceso de compra,
registro.
Visualizar pasos y objetivo de forma clara
sobre todo si el proceso es complejo y/o poco
frecuente su uso.
Se debe permitir que el usuario salga del
proceso en (casi) cualquier momento.

Patrn de aplicacin: creacin
Casos donde el usuario crea o modifica
contenido.
Edicin de fotos, codificacin/diagramacin, blogs.
La pgina debe incluir rea de trabajo,
herramientas contextuales (slo se muestra lo
que s se puede hacer) y posibilidad de
deshacer y rehacer.
Se debe permitir que el usuario tenga control
de los cambios en todo momento.

Distribuciones estndar
Maestro-detalle.
Permite visualizar "resumen" (maestro) y obtener el
detalle de dicho resumen
Puede ser de arriba hacia abajo, de izquierda a
derecha, mostrando una ventana sobrepuesta, etc.
Paleta-lienzo
Permite visualizar una serie de elementos a usar y un
rea donde utilizarlos
Navegacin por columna
Cada columna funciona como una especie de ndice
que va brindando cada vez mayor informacin (las dos
primeras columnas de Hotmail por ejemplo)

Tablero.
Permite visualizar mucha informacin resumida en diferentes
reas de la misma pgina (algunos sitios del clima muestran
el clima actual, el clima semanal, una grfica de
temperaturas, otra de humedad, etc.).
Pregunta-respuesta
Permite visualizar una serie de elementos de captura para
obtener informacin (arriba hacia abajo, izquierda a derecha,
pantallas sobrepuestas)
Hoja de clculo
La informacin se muestra a travs de tablas que pueden
tener filtros, ordenamientos, paginacin, edicin

Secciones paralelas.
Permite visualizar informacin en secciones verticales
u horizontales generalmente para compararla entre s o
facilitar la lectura.
Wizard
Permite guiar al usuario a lo largo de varios pasos
ordenados (compras, configuracin)
Modelo interactivo
Maneja muchos elementos interactivos asociados a un
objetivo central (agendas, mapas con instrucciones)
Pestaas.
Permite visualizar informacin separada sin
cambiar de pgina.
Formularios
Permite capturar informacin de forma ordenada
Bsqueda-resultados
Permite al usuario indicar criterios de seleccin de
informacin; puede combinar formularios y hojas
de clculo

Datos refinados
Permite refinar (filtrar) un conjunto de resultados
conocido; generalmente los filtros son bajo marca en
lugar de capturables.
Portal
Semejante a los tableros con la particularidad que
permiten la personalizacin por parte del usuario
(quitar elementos, reordenar elementos)
Vistazo
Permite mostrar gran cantidad de informacin en un
solo espacio, para casos donde el usuario requiere
explorar rpidamente las opciones y luego navegar

Controles
Autocompletar
Carrusel
Grficas
Paneles expandibles
Combos anidados, combos editables, de seleccin mltiple
Calendario
Dilogo
Filtro dinmico
Retroalimentacin / estatus
Avance o progreso
Manejo de drag and drop
Fijar un rea
Faro buscador
Ayudas (tips)
Teclas especiales
Acciones al pasar el mouse encima

Controles
Informacin al pasar el mouse encima
Edicin en lnea (sobre lo que normalmente es de lectura)
Puesto o clasificacin (rating)
Paginacin
Captura por elemento deslizable
Bsqueda segn el mbito
Sparkline (minigrfica sin barras o valores estadsticos para mostrar
tendencias)
Tablas con caractersticas de paginado, filtrado, ordenamiento, edicin,
etc.
Barra de herramientas
Mens
Botones mutuamente excluyentes (toggle buttons)
Editor de textos
Acercamiento

Algunas Referencias
Adobe. Rich Internet Applications. Disponible en:
https://www.adobe.com/resources/business/rich_internet_apps/
Alor-Hernndez, G., Rosales-Morales, V., Colombo-Mendoza, O. (2014) Frameworks,
Methodologies, and Tools for Developing Rich Internet Applications (Advances in Web
Technologies and Engineering (Awte)). IGI Global. ISBN-13: 978-1466664371
Deitel et al. WWW How to Program. 5th edition
Microsoft Developer Network (MSDN). Microsoft Application Architecture Guide, 2nd
edition. Disponible en: https://msdn.microsoft.com/en-us/library/ee658083.aspx
Kay, Russell (2009). Rich Internet Applications. Computer World. Disponible en:
http://www.computerworld.com/article/2551058/networking/rich-internet-applications.html
Neil, Theresa (2009). Designing Rich Applications. Disponible en:
http://www.slideshare.net/theresaneil/designing-rich-applications
Neil, Theresa (2010). RIA Screen Layout. Disponible en:
http://www.slideshare.net/theresaneil/ria-screen-layouts
Neil, Theresa (2010). Rich Internet Application Screen Design. Disponible en:
http://uxmag.com/articles/rich-internet-application-screen-design
Toffetti et al. (2011). State-of-the-art and Treds in the Systematic Development of Rich
Internet Applications. Journal of Web Engineering, Vol. 10, No.1, 070-086
Tutorial CSS de W3Schools http://www.w3schools.com/css/default.asp
Tutorial JS de W3Schools http://www.w3schools.com/js/default.asp

AplicEnriqInter 201708 U1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

AplicEnriqInter 201708 U1

Cargado por

Copyright:

Formatos disponibles

Aplicaciones Enriquecidas de

RIAs - u1 MCE Beatriz A. Olivares Zepahua 1

RIAs - u1 MCE Beatriz A. Olivares Zepahua 2

RIAs - u1 MCE Beatriz A. Olivares Zepahua 3

RIAs - u1 MCE Beatriz A. Olivares Zepahua 4

VERIFICACIN: martes 29 de agosto

RIAs - u1 MCE Beatriz A. Olivares Zepahua 6

RIAs - u1 MCE Beatriz A. Olivares Zepahua 7

RIAs - u1 MCE Beatriz A. Olivares Zepahua 8

RIAs - u1 MCE Beatriz A. Olivares Zepahua 9

RIAs - u1 MCE Beatriz A. Olivares Zepahua 10

RIAs - u1 MCE Beatriz A. Olivares Zepahua 11

RIAs - u1 MCE Beatriz A. Olivares Zepahua 12

RIAs - u1 MCE Beatriz A. Olivares Zepahua 13

RIAs - u1 MCE Beatriz A. Olivares Zepahua 14

RIAs - u1 MCE Beatriz A. Olivares Zepahua 15

RIAs - u1 MCE Beatriz A. Olivares Zepahua 16

RIAs - u1 MCE Beatriz A. Olivares Zepahua 17

RIAs - u1 MCE Beatriz A. Olivares Zepahua 18

RIAs - u1 MCE Beatriz A. Olivares Zepahua 20

RIAs - u1 MCE Beatriz A. Olivares Zepahua 21

RIAs - u1 MCE Beatriz A. Olivares Zepahua 22

RIAs - u1 MCE Beatriz A. Olivares Zepahua 23

RIAs - u1 MCE Beatriz A. Olivares Zepahua 24

RIAs - u1 MCE Beatriz A. Olivares Zepahua 25

RIAs - u1 MCE Beatriz A. Olivares Zepahua 26

RIAs - u1 MCE Beatriz A. Olivares Zepahua 27

RIAs - u1 MCE Beatriz A. Olivares Zepahua 28

RIAs - u1 MCE Beatriz A. Olivares Zepahua 29

RIAs - u1 MCE Beatriz A. Olivares Zepahua 30

RIAs - u1 MCE Beatriz A. Olivares Zepahua 31

RIAs - u1 MCE Beatriz A. Olivares Zepahua 32

A diferencia de HTML, el valor no va entre comillas, a menos

RIAs - u1 MCE Beatriz A. Olivares Zepahua 34

RIAs - u1 MCE Beatriz A. Olivares Zepahua 35

RIAs - u1 MCE Beatriz A. Olivares Zepahua 36

RIAs - u1 MCE Beatriz A. Olivares Zepahua 37

RIAs - u1 MCE Beatriz A. Olivares Zepahua 39

RIAs - u1 MCE Beatriz A. Olivares Zepahua 40

RIAs - u1 MCE Beatriz A. Olivares Zepahua 41

<meta name="viewport" content="width=device-width, initial-scale=1.0">

@media only screen and (min-width: 768px) {

RIAs - u1 MCE Beatriz A. Olivares Zepahua 42

RIAs - u1 MCE Beatriz A. Olivares Zepahua 43

RIAs - u1 MCE Beatriz A. Olivares Zepahua 44

RIAs - u1 MCE Beatriz A. Olivares Zepahua 46

RIAs - u1 MCE Beatriz A. Olivares Zepahua 48

RIAs - u1 MCE Beatriz A. Olivares Zepahua 49

RIAs - u1 MCE Beatriz A. Olivares Zepahua 50

RIAs - u1 MCE Beatriz A. Olivares Zepahua 51

RIAs - u1 MCE Beatriz A. Olivares Zepahua 52

RIAs - u1 MCE Beatriz A. Olivares Zepahua 53

RIAs - u1 MCE Beatriz A. Olivares Zepahua 54

RIAs - u1 MCE Beatriz A. Olivares Zepahua 55

RIAs - u1 MCE Beatriz A. Olivares Zepahua 56

RIAs - u1 MCE Beatriz A. Olivares Zepahua 57

RIAs - u1 MCE Beatriz A. Olivares Zepahua 58

RIAs - u1 MCE Beatriz A. Olivares Zepahua 59

RIAs - u1 MCE Beatriz A. Olivares Zepahua 60

RIAs - u1 MCE Beatriz A. Olivares Zepahua 61

RIAs - u1 MCE Beatriz A. Olivares Zepahua 62

for (datos in objPersona){

alert ("El nombre " + objPersona.nombre + ", la