Construcción de Interfaces de Usuario
Introducción a la Programación Web
Arquitectura Web
Cliente "Liviano"
Aplicación Distribuida
Múltiples clientes distintos
El cliente tiene la iniciativa
¿Stateless o stateful?
Comunicación asincrónica
¡Muchas tecnologias!
Lo básico:
y todavía hay mucho más
Estructura básica de una URL
Protocolo
Servidor
Puerto
Recurso
Parámetros
Y lo que no se ve:
Estructura Básica de una página HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Un tutorial de HTML básico: http://www.w3schools.com/html/html_intro.asp
CSS Básico
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Un tutorial de CSS básico:
Bootstrap
Bootstrap
Arquitecturas Web
AngularJS
Introducción a Angular
Data Binding en AngularJS
HTML: Controles y Formularios
Los controles son las herramientas que tiene el usuario para ingresar datos:
Un formulario es una colección de controles que trabajan en conjunto.
AngularJS: Conceptos Básicos
Millas: <input type="number" ng-model="kilometros">
<button ng-click="convertir()">Convertir</button>
Kilometros: <span>{{kilometros}}</span>
Muchas tecnologías para construir interfaces web utilzan templates.
AngularJS Controllers
var app = angular.module('conversorApp', [])��app.controller('ConversorController', function ($scope) {�
$scope.millas = 0;� $scope.kilometros = ' <ingrese millas> '
� $scope.convertir = function() {� $scope.kilometros = $scope.millas * 1.60934� }�});
El scope también puede contener comportamiento
Crear una aplicación
Cada formulario tiene un controller
El estado del scope se bindea con controles de un formulario
Web Services
RESTful Services
app.service('Libros', function($http) {
this.query = function(callback, errorHandler) {
$http.get('/libros').success(callback).error(errorHandler);
}
this.save = function(libro, callback, errorHandler) {
$http.post('/libros', libro).success(callback).error(errorHandler);
}
this.update = function(libro, callback, errorHandler) {
$http.put('/libros/' + libro.id, libro).success(callback).error(errorHandler);
}
this.remove = function(libro, callback, errorHandler) {
$http.delete('/libros/' + libro.id).success(callback).error(errorHandler);
}
});
RESTful Services con $resource
app.factory('Libros', function($resource) {
return $resource('/libros/:id', {'id': '@id'}, {
'update': { method:'PUT' }
});
});
Opcional
{ 'get': {method:'GET'},� 'save': {method:'POST'},� 'query': {method:'GET', isArray:true},� 'remove': {method:'DELETE'},� 'delete': {method:'DELETE'}};
Creación
Estructura de un $resource
¿Cómo se usan?
$scope.actualizarLista = function() {
Libros.query(function(data) { $scope.libros = data; }, errorHandler);
}
$scope.agregarLibro = function() {
Libros.save($scope.nuevoLibro, function(data) {
$scope.notificarMensaje('Libro agregado con id:' + data.id);
$scope.actualizarLista();
$scope.nuevoLibro = null;
}, errorHandler);
};
Callback para recibir el resultado asincrónicamente
El objeto libro se convierte a JSon automáticamente
var errorHandler = function(data, status) {
if (data.error)
$scope.notificarError("Error: " + data.error);
else
$scope.notificarError(status + ": " + data);
};
$scope.errors = [];
$scope.notificarError = function(mensaje) {
$scope.errors.push(mensaje);
$timeout(function(){
while($scope.errors.length > 0) $scope.errors.pop();
}, 3000);
}