Desarrollo en HTML, CSS y Javascript de Apps Web, Android, IOS, FirefoxOS, Juan Quemada, DIT, UPM

Transcripción

1 Desarrollo e HTML, CSS y Javascript de Apps Web, Adroid, IOS, FirefoxOS, Jua Quemada, DIT, UPM 1

2 Objetivo del curso Curso de diseño y programació de aplicacioes Web multi-dispositivo (PC, tableta, telefóo,...) para la plataforma Web (HTML5, CSS3 y JavaScript5) y de como empaquetarlas para su publicació e las tiedas de Adroid, ios,. Jua Quemada, DIT, UPM 2

3 Diseño de servicios e la ube, utilizado JavaScript, para acceso movil y multi-dispositivo co HTML5* Programa de especializació co 5 cursos MOOC Desarrollo de Aplicacioes e HTML5, CSS y Javascript, icluyedo Dispositivos Móviles Firefox O.S. Desarrollo avazado de Aplicacioes HTML5 y Firefox O.S.*, icluyedo tecicas de igeería de software Desarrollo de aplicacioes HTML5 multi-termial (Adroid, ios,...)* Desarrollo de servicios e la ube co HTML5, Javascript y ode.js* Desarrollo avazado de servicios e la ube co Javascript y ode.js* *Nota: Los otros 4 cursos empezará e MiriadaX e 2014 y Jua Quemada, DIT, UPM 3

4 Estructura del curso El curso costa de 5 tramos de 2 modulos Diseñado para realizarse e 5 semaas (1 semaa por tramo) w Además se deja ua semaa adicioal por tramo w tiempo máximo de realizació ~12 semaas (2 semaas por tramo +..) Ejercicios P2P de etrega obligatoria Al fial de cada módulo además hay tests obligatorios y mas ejercicios P2P opcioales Apertura y cierre de tramos Tramo 1: comiezo del curso y cierra aprox. fial semaa 4 Tramo 2: comiezo semaa 2 y cierra aprox. fial semaa 6 Tramo 3: comiezo semaa 3 y cierra aprox. fial semaa 8 Tramo 4: comiezo semaa 4 y cierra aprox. fial semaa 10 Tramo 5: comiezo semaa 5 y cierra aprox. fial semaa 12 Jua Quemada, DIT, UPM 4

5 Modulo 1: Itroducció a los elemetos básicos de HTML y CSS, así como al uso de las herramietas del curso. Modulo 2: Estructuració de iterfaces e HTML y CSS adaptados a u etoro multi-patalla adaptado a móviles y tabletas. Modulo 3: Itroducció a JavaScript: programas y setecias, expresioes co úmeros y strigs, variables, fucioes, objetos, propiedades y métodos Modulo 4: Descripció detallada de strigs, úmeros y booleaos. Más sobre objetos DOM (Documet Object Model) y primeros pasos co evetos e iteracció co el usuario. Modulo 5: Bucles y arrays, fucioes como objetos, ámbitos de visibilidad y cierres. Itroducció al uso de la librería jquery para acceder a DOM y para ateder evetos. Modulo 6: jquery UI y patroes de iteracció co el usuario. Itroducció a la librería Bootstrap para diseño adaptado a móviles y tabletas. Modulo 7: Más sobre arrays, objetos, propiedades, métodos, tipos y clases. Repaso de los coceptos más importates basado e u ejemplo de presetació de citas. Modulo 8: LocalStorage, iframes, origi policy y JSON. Modulo 9: Itroducció a los gráficos y aimacioes co SVG (Scalable Vector Graphics) y alguos ejemplos de geolocalizació y google maps. Modulo 10: Empaquetar aplicacioes Web para Adroid, ios o FirefoxOS. Módulos Jua Quemada, DIT, UPM 5

6 Actividades de u Módulo Tarea 0: Descargar trasparecias y ejemplos del módulo Fichero ZIP para descargar co w Trasparecias e formato PDF w Directorio co ejemplos presetados e el módulo para realizar ejercicios modificado los descargados Tareas de Apredizaje (varias): u video o screecast del tema (3 y 15 miutos) w evaluado (o siempre) co u test o u ejercicio P2P opcioal Tarea fial: Ejercicio P2P fial de cada modulo Jua Quemada, DIT, UPM 6

7 Equipos y servicios a utilizar U PC o portatil de trabajo (ecesario) co S.O. Widows de Microsoft co S.O. UNIX (Ubutu,..) de software libre Ordeador MAC co sistema operativo co OS X Móvil o tableta (coveiete para probar, pero o ecesario) Adroid, iphoe, ipad, FirefoxOS,.. pero o es ecesario w Se puede utilizar u simulador de FirefoxOS para probar Apps Cueta e Neocities (es gratis) para publicar Págias y Apps Web e la ube w Jua Quemada, DIT, UPM 7

8 Herramietas a utilizar Simulador/Editor iteractivo Editor y visualizador de HTML5, CSS y JS co ejemplos cargados w Sublime Text 2 Editor de HTML, CCS y JavaScript co ayudas visuales w Creadores (wysiwyg) de págias Web (opcioal) Dreamweaver: Creador de págias Web muy potete e ituitivo. w Bluegriffo: editor wysiwyg gratuito y de código abierto w Navegador (Chrome, Firefox, ) y su etoro de desarrollo Jua Quemada, DIT, UPM 8

9 Seleccioar módulo Seleccioar tema Simulador e ViSH Iicializar Guardar modificacioes e memoria local del avegador Subir código de u fichero al area de edició Descargar ejemplo co modificacioes a u fichero Visualizar modificacioes Seleccioar ejemplo Area de edició del código fuete de los ejemplo Area de visualizació de la aplicació Jua Quemada, DIT, UPM 9

10 Fial del tema Muchas gracias! Jua Quemada, DIT, UPM 10

11 Itroducció a Iteret y a la Web Jua Quemada, DIT, UPM 11

12 Clietes, servidores y la ube Clietes: Da acceso a iformació y servicios e Iteret Servidores: Aloja la iformació y los servicios La ube: cojuto de termiales y servidores itercoectados co aplicacioes y protocolos de Iteret TCP/IP: protocolos de itercoexió de redes de fibra, cable, WIFI,... sobre los que se implemeta las aplicacioes de Iteret y sus protocolos Jua Quemada, DIT, UPM 12

13 Clietes, avegadores y tiedas Clietes de acceso a Iteret más importates PCs, portátiles, tabletas, teléfoos iteligetes Navegador (browser) cliete Web de acceso a servidores Utilizado: URL, HTTP, HTML, CSS y JS w p.e. Chrome, Firefox, Iteret Explorer, Opera, Safari,... Tiedas de aplicacioes Istala aplicacioes e móviles y tabletas w Las aplicacioes usa las ormas de la Web (URL, HTTP,...) Jua Quemada, DIT, UPM 13

14 Máquia servidora (host) Cotiee iformació y servicios Ua máquia servidora tiee ua direcció coocida e Iteret Direcció simbólica (de domiio o DNS): upm.es, google.com, w Cada direcció de domiio tiee ua direcció IP (biaria) asociada Hay 2 tipos de direccioes IP: IPv4 e IPv6 IPv4: versió 4 del protocolo IP co direcció de 32 bits o 4 octetos w ejemplo: , (localhost - mi máquia),... IPv6: versió 6 del protocolo IP (última) co direcció de 128 bits w ejemplo: 2001:db8:85a3::8a2e:370:7334,... Jua Quemada, DIT, UPM 14

15 Servidores y puertos Puerto Direcció de 16 bits detro de la máquia servidora w Es dode se istala el programa servidor El programa servidor es lo que ormalmete deomiamos servidor w Cliete y servidor se comuica a través de u protocolo: HTTP, SMTP,... Utilizado el iterfaz de sockets TCP/IP para comuicar etre ambos Los servicios tiee u protocolo y u puerto por defecto Web: protocolo HTTP (puerto 80), HTTPS (443) protocolo SMTP (puerto 25), POP3 (110), IMAP143) Shell segura: protocolo SSH (puerto 22) Si u servidor o está e el puerto por defecto Servidor (host) puerto 25 direcció IP puerto 80 SMTP Web: HTTP Su direcció debe icluir el puerto, p.e. dit.upm.es:8080, :8080 Jua Quemada, DIT, UPM 15

16 google.com URL URL (Uiform Resource Locator) Direcció de u recurso e u servidor e Iteret Iteret soporta muchos tipos de servicios diferetes Cada tipo de servicio utiliza u URL y protocolo diferetes Alguos ejemplos de tipos de URLs URL Web: utiliza HTTP para acceder a recursos, icluye w Protocolo, servidor y recurso (camio): URL de correo ( ): idetifica el buzo de usuario, icluye w protocolo, buzo de usuario y servidor: mailto:pepe_garcia@gmail.com Jua Quemada, DIT, UPM 16

17 HTTP (HiperText Trasfer Protocol) Protocolo del Web Procesa recursos idetificados por u URL e u servidor remoto Métodos o comados pricipales de HTTP GET: trae al cliete (lee) u recurso idetificado por u URL POST: crea u recurso idetificado por u URL PUT: actualiza u recurso idetificado por u URL DELETE: borra u recurso idetificado `pr u URL... (hay mas comados) Cliete 1 solicita recurso: google.com HTTP GET upm.es apple.es Clietes 2, 3 y 4 solicita recursos: HTTP GET Jua Quemada, DIT, UPM 17

18 Aplicació Web Aplicacioes ejecutables e u avegador creadas co HTML, CSS y JavaScript HTML CSS Leguaje de marcado de págias Web w defie la estructura del coteido de ua págia Web E WebApps defie la iterfaz de la aplicació co el usuario Defie el estilo visual de u ua págia o aplicació Web (HTML) JavaScript Leguaje de programació de aplicacioes de cliete Jua Quemada, DIT, UPM 18

19 Aplicació Web: HTML, CSS y JavaScript HTML CSS Leguaje de marcado Estilo la visualizació JavaScript Leguaje de programació Jua Quemada, DIT, UPM 19

20 WebApps o aplicacioes de cliete Aplicacioes que reside e u servidor pero se ejecuta e u cliete w Se idetifica co u URL: El cliete trae la aplicació del servidor co el protocolo HTTP (GET) Las apps se costruye co las tecologías de la Web URLs, HTTP, HTML, CSS y JavaScript 1) Cliete solicita WebApp idetificada co URL 2) Script se ejecuta al cargar la págia Web e el avegador: Solicitud HTTP GET asociada a u URL Respuesta HTTP: págia Web co script Jua Quemada, DIT, UPM Servidor sirve fichero idetificado por URL 20

21 Fial del tema Muchas gracias! Jua Quemada, DIT, UPM 21