Transp Are Nci As
Transp Are Nci As
Transp Are Nci As
Graphics
Recursos
n Galeria Wikimedia: http://commons.wikimedia.org/wiki/Category:SVGs_by_subject
n Editor SVG: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
n Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG
n Tutorial: http://www.w3schools.com/svg/
http://commons.wikimedia.org/wiki/File:Compass.svg
http://commons.wikimedia.org/wiki/SVG_examples
2
!
Esta WebApp tiene 2 botones: + y -
!
Cada vez que pulsamos uno de estos botones
n el tamao de la imagen debe aumentar o disminuir un 10%
w segn pulsemos + y -
Juan Quemada, DIT, UPM
Ejemplo SVG
Reloj SVG
!
Las coordenadas x2, y2 de las manecillas de horas,
minutos y segundos se calculan con las funciones
n x2(tiempo, unidades_por_vuelta, x1, radio)
n y2(tiempo, unidades_por_vuelta, y1, radio)
!
n
10
11
Objetos SVG
Los objetos SVG se pueden definir tambin como objetos externos en XML
n Para importarlos con:
w <img>, <object>, <embed>, <iframe>
n Tutorial: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Use.html
12
HTML5 CANVAS
13
Caractersticas
n Tiene resolucin fija y no reescala con calidad
w <canvas id=c1 width=150 height=350> Texto alternativo</canvas>
Tutoriales
n
n
n
http://www.w3schools.com/html/html5_canvas.asp
http://www.w3schools.com/tags/ref_canvas.asp
https://developer.mozilla.org/En/Canvas_tutorial
Juan Quemada, DIT, UPM
14
!
SVG puede animarse con javaScript
n modificando la representacin DOM del reloj
w tal y como se ilustra en el ejemplo siguiente
15
Reloj CANVAS
16
!
Las coordenadas x2, y2 de las manecillas de horas,
minutos y segundos se calculan con las funciones
n x2(tiempo, unidades_por_vuelta, x1, radio)
n y2(tiempo, unidades_por_vuelta, y1, radio)
!
myLine(...) y myCircle(...)
n dibujan lineas y circulos
Juan Quemada, DIT, UPM
17
CANVAS:
Reloj animado
18
WebGL: Web en 3D
http://www.chromeexperiments.com/webgl
19
Aplicaciones FirefoxOS
20
FirefoxOS
FirefoxOS es el nuevo SO
n
!
Sus aplicaciones se programan en
n
!
Recursos y tutoriales
n
n
n
n
https://marketplace.firefox.com/developers/docs/firefox_os
https://marketplace.firefox.com/developers/docs/quick_start
https://developer.mozilla.org/es/docs/Aplicaciones/Comenzando_aplicaciones
https://developer.mozilla.org/en-US/Apps/Reference
Juan Quemada, DIT, UPM
21
Apps FirefoxOS
Aplicaciones para instalar en mviles y tabletas
n
hosted:
alojadas en un servidor
packaged: se descargan empaquetadas
w Hay tres tipos
n
n
n
22
Hosted Apps
Webapps publicadas en modo ejecutable en un servidor Web
n
n
Mas info:
w https://developer.mozilla.org/en-US/Marketplace/Options/Hosted_apps
Caractersticas
n
n
!
Se gestionan a travs del objeto predefinido navigator.mozApps
n
23
Packaged WebApps
Webapps empaquetadas en un fichero ZIP
n
Mas info:
w https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps
24
Firefox Marketplace
Firefox Marketplace permite crear
n
!
Los Marketplace FirefoxOS pueden competir entre si
n
!
Market places con apps de Mozilla
n
https://marketplace.firefox.com
Juan Quemada, DIT, UPM
25
26
hosted App
packaged App
!
!
!
!
Ambas estn publicadas en
n
27
w OJO! La app con el Reloj dada est probada en Firefox 1.4 y 1.3 y pueden no funcionar en otras versiones
28
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/hosted/install.htm
3. clicar en botn de instalar
6. Aplicacin
instalada
4. clicar para
confirmar instalacin
1. clicar para desplegar el navegador
y poder instalar la hosted App
Juan Quemada, DIT, UPM
4. clicar para
volver a escritorio
29
Iconos
w que se mostrarn en el escritorio
Instalador
w de la WebApp en el escritorio
Manifiesto
w con informacin de instalacin
30
manifest.webapp
Fichero en formato JSON (JavaScript Object Notation)
n
iconos escritorio
equipo/empresa desarrolladora
Juan Quemada, DIT, UPM
31
install.html
32
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/hosted/install.htm
3. clicar en botn de instalar
6. Aplicacin
instalada
4. clicar para
confirmar instalacin
1. clicar para desplegar el navegador
y poder instalar la hosted App
Juan Quemada, DIT, UPM
4. clicar para
volver a escritorio
33
Instalador
w de la WebApp en el escritorio
Manifiesto
w con informacin de instalacin del
paquete
n
App empaquetada
w Zip con todos los ficheros de la App
34
package.manifest
Fichero en formato JSON (JavaScript Object Notation)
n
equipo/empresa desarrolladora
(igual al del manifest.webapp)
Juan Quemada, DIT, UPM
35
index.html
36
6. Aplicacin
instalada
4. clicar para
confirmar instalacin
4. clicar para
volver a escritorio
37