mod 10 transparencias3

7/25/2019 Mod 10 Transparencias3

1/47

!"#$%&'( *+,-./#$01+2'3,4$ ('2' &%$%2'3,4$ .%

5(-,3'3,#$%6 ,78

&'92,%- :+%3'6

;< .% %$%2# .% ;=>?


2/47

79@%AB#

/#$01+2'2 !"#$%&'( *+,-. ('2' C+% 1%$%2%+$' '(-,3'3,4$ $'AB' ,78

8#$ D+3"#6 ('6#6E (%2# %6 $%3%6'2,# .,6(#$%2 .%+$ .,6(#6,AB# 5((-% C+% "'92F C+% 2%1,6G2'2


3/47

H$.,3%

I,3"%2#6 $%3%6'2,#6 %$ !"#$%&'( *+,-.

/%2A03'.# .% .%6'22#--'.#2 5((-%

!%20- .% 8+D,$,6G2# /#$01+2'3,4$ .% !"#$%&'( *+,-.


4/47

/#D(,-'3,4$ %$ !"#$%&'( *+,-.

!'2' ,78 $# G%$%D#63%2A03'.#

JK# L%M 6%-%3G%.N

6% D+%6G2' +$ D%$6'@%.% %22#2


5/47

I,3"%2#6 2%C+%2,.#6

5- (+-6'2 %$ O$# L%M6%-%3G%.P .%9%D#6(2#(#23,#$'2Q

+$ AG+-# # ,.%$A03'.#2 (#.%D#6 G%$%2 B'2,'6

3-'B%6

R$ 3%2A03'.# .%.%6'22#--'.#2 .% 5((-%

%$ S#2D'G# (>;

R$ (%20- .% 6+D,$,6G2# (2#B,6,#$,$1 (2#0-%


6/47

!'6#6

>T UV .% 5((-%

;T W,3%$3,' .% V%6'22#--#

XT

/%2A03'.# .% V%6'22#--'.#2YT Z%1,6G2'2 %- V,6(#6,AB# 5((-%

[T !%20- .% 8+D,$,6G2#


7/47

>T\ UV .% 5((-%

8% $%3%6,G' UV .% 5((-%

('2' -#6 C+% M' 6#$ +6+'2,#6 .% 5((-%E (+%.%+6'26% %- D,6D# UV .% ,/-#+. # .% 5((8G#2%

6% (+%.% #9G%$%2 %$"](6Q^^'((-%,.T'((-%T3#D^'33#+$G


8/47

;T\ W,3%$3,' .% V%6'22#--#

!'2' #9G%$%2 +$' W,3%$3,' .% V%6'22#--#

+$,26% '- 5((-% V%B%-#(%2 !2#12'D"](6Q^^.%B%-#(%2T'((-%T3#D^(2#12'D6^

_-%1,2 %$G2% .%6'22#--'.#2 ,$.%(%$.,%$G% #%D(2%6' .% .%6'22#--#

/+%6G' ``a R8 ^ 'b#


9/47

/%2A03'.# .% V%6'22#--'.#2 5((-%

5((-% (2#(#23,#$' .#6 A(#6 .% 3%2A03'.#

.%6'22#--'.#2 M .,6G2,9+,.#2

$%3%6,G'D#6 %- (2,D%2#

W'6 '(-,3'3,#$%6 "'$ .% %6G'2 02D'.'6 (#2 +$3%2A03'.# BF-,.# ('2' (#.%2Q

%@%3+G'2 %$ .,6(#6,AB# 5((-%

(+9-,3'2 %$ 5((8G#2%


10/47

XT\ 79G%$3,4$ .%- /%2A03'.#

533%.%D#6 '-U78 !2#B,6,#$,$1 !#2G'-

"](6Q^^.%B%-#(%2T'((-%T3#D

!+-6'D#6 %$ Jc%D9%2 /%$G%2NE,$G2#.+3,D#6 %- UV .% 5((-%

!+-6'D#6 %$ J/%2A03'G%6E U.%$A0%26 d !2#0-%6N


11/47

V%6(+e6 %$J/%2A03'G%6N

f .%6(-%1'D#6

J/%2A03'G%6NJV%B%-#(D%$GN

f %- -' %6C 6+(T .%2%3"'E

(,$3"'D#6 %- 9#G4$5b'.,2 ghi


12/47

8%-%33,#$'D#6 ,78 5(( V%B%-#(D%$G M J/#$A$+%N

8% $#6 6#-,3,G' +$ '23",B# /8Z g/%2A03'G% 8,1$,$1

Z%C+%6Gi # 8#-,3,G+. .% I,2D' .% /%2A03'.#

B,%$%$ -'6 ,$6G2+33,#$%6 .% 34D# "'3%2-#


13/47

523",B# /8Z

:'M D+3"'6 "%22'D,%$G'6 .% 1%6A4$ .%3%2A03'.#6E

'-1+$'6 ,$3-+,.'6 %$ %- 8T7TE #G2'6 6% (+%.%$

,$6G'-'2

c'3 78 jE .%6.% %- O533%6# ' W-'B%2#P

k,$.#l6E R9+$G+Q "%22'D,%$G'6 %mG%2$'6

#(%$66-E 1%6G#2%6 .% /%2A03'.#6 .% U_E I,2%S#mEn


14/47

&%$%2'2 /8Z %$ c'3 78 j

592,D#6 O533%6# ' W-'B%2#6P _$ J5(-,3'3,#$%6N \o JRA-,.'.%6N _$ %- D%$p (2,$3,('- O533%6# ' W-'B%2#6P

6%-%33,#$'D#6 J56,6G%$G% ('2' /%2A03'.#6N

8%-%33,#$'D#6 J8#-,3,G'2 +$ 3%2A03'.# .% +$''+G#2,.'. .% 3%2A03'3,4$nN


15/47

Z%--%$% %- S#2D+-'2,#

U$G2#.+q3' 6+.,2%33,4$ .% 3#22%#

8+ $#D92%

8%-%33,#$% J1+'2.'2%$ .,63#N

M (+-6% J/#$A$+'2N

79G%$%D#6 %-03"%2# J/8ZN


16/47

8#-,3,G'2 %- 3%2A03'.#

r#-B%D#6 ' -' l%9 .% .%6'22#--'.#2%6 .%5((-% M 6+9,D#6 %- 03"%2# J/8ZN

!+-6'D#6 %- 9#G4$ J&%$%2'G%N

K+%6G2# 3%2A03'.# %6GF -,6G# ('2' ,$6G'-'2

(+-6'D#6 %$ JV#l$-#'.NE 6'-B'D#6 %- 03"%2# T3%2M "'3%D#6 .#9-% 3-,3L ('2' ,$6G'-'2-# %$ J533%6# 'W-'B%2#6N 3#$B,%$% "'3%2 +$' 3#(,' .% 6%1+2,.'. M D'$G%$%2-# '

9+%$ 2%3'+.#

(+-6'D#6 J.#$%N ('2' (2#6%1+,2


17/47

/%2A03'.# -,6G#

_$ J/%2A03'G%6N \o JV%B%-#(D%$GN (#.%D#6B%2 $+%6G2# 3%2A03'.# M -' S%3"' .%%m(,2'3,4$

6, (,$3"'D#6E '('2%3% ,$S#2D'3,4$ '.,3,#$'-


18/47

I#2D'G# (>;

_- 3%2A03'.# %6GF -,6G#E (%2# !"#$%&'( *+,-.%m,1% S#2D'G# (>;

_$ J533%6# ' W-'B%2#6N \o J/%2A03'.#6N

c%$p 3#$G%mG+'- 6#92% J,!"#$% V%B%-#(%2nN 8%33,#$'D#6 -' #(3,4$ J_m(#2G'2 nN

K#6 (%.,2F +$' 3-'B%E "'M C+% 2%3#2.'2-' ('2' (#.%26+9,2-' ' !"#$%&'( *+,-.


19/47

YT\ Z%1,6G2'2 %- .,6(#6,AB#

_$ c%D9%2 /%$G%2Q

>T _$ J/%2A03'G%6E U.%$A0%26 d !2#0-%6NE6%-%33,#$'D#6 JV%B,3%6N

;T

8%-%33,#$'D#6 J5--N

XT !,$3"'D#6 %- 9#G4$ J5b'.,2N ghi %$ -' %6C+,$'6+(%2,#2 .%2%3"'

YT

8%-%33,#$'D#6 JZ%1,6G%2 V%B,3%N[T U$G2#.+3,D#6 %- $#D92% % ,.%$A03'.#2 gRVUVi

.% $+%6G2# .,6(#6,AB#

? !,$3"'D#6 J/#$A$+%N M -+%1# JZ%1,6G%2N


20/47

U.%$A03'.#2 .% V,6(#6,AB#

:'M C+% ,$G2#.+3,2 %- RVUV

$# 3#$S+$.,2 3#$ KpD%2# .% 8%2,%

/#$%3G'D#6 %- .,6(#6,AB# '- #2.%$'.#2

V%6.% ,s+$%6Q

8+%-% D#6G2'2 %- $pD%2# .% 6%2,%E (,$3"'D#6"'6G' C+% (#$1' RVUV

V%6.% j3#.% g6, .,6(#$%D#6 .% +$ c'3iQ

c%$+ Ok,$.#lP \o OV%B,3%6P


21/47

[T\ !%20- .% 8+D,$,6G2#

f' (#.%D#6 #9G%$%2 %- J!2#B,6,#$,$1 !2#0-%N

_$ -' 6%33,4$ J!2#B,6,#$,$1 !2#0-%N (,$3"'D#6%$ 5b'.,2 ghiE 2%--%$'D#6 -#6 .'G#6 M 9'@'D#6%- 03"%2# 1%$%2'.#

%mG%$6,4$Q TD#9,-%(2#B,6,#$,$1


22/47

V%63'21'2 %- !%20- .% 8+D,$,6G2#

V%6(-%1'D#6 %- (%20- M(+-6'D#6 %$ JV#l$-#'.N

f' G%$%D#6 %- 6%1+$.#03"%2#


23/47

/#$01+2'3,4$ !"#$%&'( *+,-.

Z%--%$'D#6 -#6 3'D(#6

AG+-#O&:>P (#2 %@%D(-#

3%2A03'.# (>;O/%2A03'.#6T(>;P

V%9%D#6 2%3#2.'2 -' 3-'B%'6,1$'.' '- 03"%2#

(%20- .% 6+D,$,6G2#6

OTD#9,-%(2#B,6,#$P


24/47

7G2'6 3-'B%6

_$ !"#$%&'( *+,-. \oJ_.,G 533#+$GN (#.%D#6'33%.%2 ' $+%6G2'6

3-'B%6 02D'.'6


25/47

Z%3#D(,-'D#6 G#.#


26/47

t&2'3,'6 (#2 6+ 'G%$3,4$u

&T :+%3'6

sl,]%2Q v1"+%3'6

lllT.,GT+(DT%6^w1'92,%-


27/47

Aplicaciones FirefoxOS

1


28/47

FirefoxOS es el nuevo SO! para mviles y tabletas

" Desarrollado por la Fundacin Mozilla

Sus aplicaciones se programan en! HTML5, CSS y Javascript

Recursos y tutoriales! 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

FirefoxOS

2
https://developer.mozilla.org/en-US/Apps/Referencehttps://developer.mozilla.org/es/docs/Aplicaciones/Comenzando_aplicacioneshttps://marketplace.firefox.com/developers/docs/quick_starthttps://marketplace.firefox.com/developers/docs/firefox_os


29/47

Aplicaciones para instalar en mviles y tabletas! Funcionando con o sin conexin a Internet

" Construidas con tecnologas Web: URLs, HTTP, HTML, CSS, JavaScript, ...

! Tambin pueden instalarse en PCs o navegadores

Tipos de WebApps Firefox OS! hosted: alojadas en un servidor

! packaged: se descargan empaquetadas" Hay tres tipos

!

Plain: aplicaciones Web convencionales! Certified: con acceso a algunos elementos restringidos

! Privileged: con acceso a todos los recursos del mvil

Apps FirefoxOS

3


30/47

Webapps publicadas en modo ejecutable en un servidor Web! Pueden ejecutarse desde un navegador

! Adems de ser publicadas en una tienda a travs de su URL

" para su instalacin en un dispositivo FirefoxOS

! Mas info:

"

https://developer.mozilla.org/en-US/Marketplace/Options/Hosted_apps

Caractersticas! Necesitan conexin a Internet para ser ejecutadas

! Solo puede haber una hosted WebApp por dominio Web

Se gestionan a travs del objeto predefinido navigator.mozApps! con mtodos install(....)o checkInstalled(....)

Hosted Apps

4
https://developer.mozilla.org/en-US/Marketplace/Options/Hosted_apps


31/47

Webapps empaquetadas en un fichero ZIP! Pueden ser publicadas en una tienda

" para su instalacin en dispositivos Firefox OS

! Mas info:" https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps

Se pueden publicar en tiendas o en servidores! Solamente se pueden instalar

" No se pueden ejecutar directamente en un navegador

! Pueden ser autonomas

" Funcionando sin conexin a Internet

Se instalan a travs del objeto predefinido navigator.mozApps! con mtodo installPackage(....)

Packaged WebApps

5
https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps


32/47

Firefox Marketplace permite crear! tiendas de aplicaciones alojadas en servidores

" https://developer.mozilla.org/en-US/Marketplace

Los Marketplace FirefoxOS pueden competir entre si! sern ms o menos populares

" dependiendo de la aceptacin de los usuarios

! sern ms o menos seguras

" dependiendo del control de la seguridad realizado

Market places con apps de Mozilla! https://marketplace.firefox.com

Firefox Marketplace

6
https://marketplace.firefox.com/https://developer.mozilla.org/en-US/Marketplace


33/47

Final del tema

Muchas gracias!

7


34/47

Reloj SVG como App FirefoxOS

8


35/47

Incluimos el reloj SVG como! hosted App

! packaged App

Ambas estn publicadas en! Google Drive de asignatura

" https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/

Reloj SVG como App

9

Arrancar el simulador de FirefoxOS en Firefox
https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/


36/47

Las apps se instalan en el simulador incluido en Firefox! Firefox incluye a partir de Firefox 30.0 un simulador de FirefoxOS

" Se arranca seleccionando Tools -> Web Developer -> App Manager

! Despus se arranca (Start Simulator)y se selecciona la versin 1.4 (Firefox 1.4)

" OJO!La app con el Reloj dada est probada en Firefox 1.4 y 1.3 y pueden no funcionar en otras versiones

Arrancar el simulador de FirefoxOS en Firefox

10

I t l h t d A i l d Fi f OS


37/47

1. clicar para desplegar el navegadory poder instalar la hosted App

6. Aplicacininstalada

Instalar hosted App en simulador FirefoxOS

11

2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)

https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/hosted/install.htm

3. clicar en botn de instalar

4. clicar paraconfirmar instalacin

4. clicar paravolver a escritorio


38/47

Para crear una hosted App conReloj SVG se debe aadir aclock.htm:! Iconos

" que se mostrarn en el escritorio

! Instalador

" de la WebApp en el escritorio

! Manifiesto

" con informacin de instalacin

! El ejemplo suministrado incluye

adems estilos y tipografas

Reloj SVG: hosted App

12

manifest.webapp


39/47

nombre que aparece en el escritorio

descripcin para tienda

URL de WebApp en servidor

iconos escritorio

equipo/empresa desarrolladora

versin

Fichero en formato JSON (JavaScript Object Notation)! Con informacin de instalacin, recursos, diseador,!

! Los URLs son relativos con path absoluto

JSON es un formato muy habitual para manifiestos

13

manifest.webapp

install.html


40/47

14



41/47




15

2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)






42/47

Componentes! Instalador

" de la WebApp en el escritorio

! Manifiesto

" con informacin de instalacin delpaquete

! App empaquetada" Zip con todos los ficheros de la App

! los mismos ficheros de la hosted App

! Salvo manifiesto: URLs relativos" OJO: Los ficheros deben empaquetarse

sin ms, sin estar en ningn directorio

Reloj SVG: packaged App

16


43/47

nombre (igual al del manifest.webapp)URL a paquete en tienda

equipo/empresa desarrolladora(igual al del manifest.webapp)

Fichero en formato JSON (JavaScript Object Notation)! Con informacion sobre la webapp empaquetada

JSON representa datos como literales de objetos JavaScript! Todos los datos estn serializados en el fichero como un string

17

package.manifest

version (igual al del manifest.webapp)

index.html


44/47

18

Instalar packed App en simulador FirefoxOS


45/47



Instalar packed App en simulador FirefoxOS

19

2. Introducir URL del instalador en el navegador y clicar (ejecutar instalador)https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/packed/



https://googledrive.com/host/0B48KCWfVwCIEMjFhUHM4d3FnSTg/packed/


46/47

Final del tema

Muchas gracias!

20


47/47

Ejercicio

Empaquetar como App FirefoxOS, tanto hosted, como packaged, el relojanimado basado en SVG o en CANVAS (solo uno, el que se prefiera)propuestos como ejercicios P2P opcionales en los temas SVG y CANVAS.

Publicar dichas apps en Google Drive para que se puedan instalar porterceros.

21

mod 10 transparencias3

Documents