Desarrollo interactivo con Html5

GDG DevFest Juliaca18 de Noviembre, 2012Universidad Peruana Unión

[email protected]://www.gdglima.pe

Comunidad


Hagamos Historia

#devfestjuliaca Modo fiesta


#devfestjuliaca



Preguntas

[email protected]


Organizadores

#devfestlimahttp://devfestlima.gdglima.pe

Html5 Interactivo con Easel.jsDatos de expositor: Eduardo José Medina AlfaroCEO QuickDev - Interactive Game Developer / IGDA - GDG LimaMail:[email protected]+:+eduardo medinaTwitter:@eduardomedina

Desarrollo Interactivo en la Web Eduardo Medina

Ejemplos Eduardo Medina

¿ Que es Easel.js ? Eduardo Medina

WebSite DevFestLima Eduardo Medina

Referencias Eduardo Medina

Eduardo Medina

Agenda


Desarrollo Interactivo en la Web ● Flash● Html5

○ CSS3○ JS

● WebGL


Conocimiento ya adquirido de otras tecnologías

● Three.js● Easel.js● Box2D.js


Flash● http://www.

wechoosethemoon.org/

● http://www.nickelodeon.com.au/

● http://zozole.pl/


http://www.google.com/url?q=http%3A%2F%2Fwww.wechoosethemoon.org%2F&sa=D&sntz=1&usg=AFQjCNGFAoVCnHGZrnMUCiSZoTdhIG1STQ




http://www.google.com/url?q=http%3A%2F%2Fwww.nickelodeon.com.au%2F&sa=D&sntz=1&usg=AFQjCNFEV3dpUuJY_4X09rgKSeCElNTuYg




http://www.google.com/url?q=http%3A%2F%2Fzozole.pl%2F&sa=D&sntz=1&usg=AFQjCNGoQ9Ez0FfSOriubrFhxElPhuc5kA

http://www.google.com/url?q=http%3A%2F%2Fzozole.pl%2F&sa=D&sntz=1&usg=AFQjCNGoQ9Ez0FfSOriubrFhxElPhuc5kA

Ejemplos● Box2D http://www.jangaroo.

net/files/examples/flash/box2d/● Three.JS

http://mrdoob.github.com/three.js/http://carvisualizer.plus360degrees.

com/threejs/● CSS3

http://www.krazytemplates.com/beercamp-an-experiment-with-css-3d/

http://2012.beercamp.com/#devfestlimahttp://devfestlima.gdglima.pe

http://www.google.com/url?q=http%3A%2F%2Fwww.jangaroo.net%2Ffiles%2Fexamples%2Fflash%2Fbox2d%2F&sa=D&sntz=1&usg=AFQjCNGKdDMEv07eEUpd0mQlMOwzsdUFQg



http://www.google.com/url?q=http%3A%2F%2Fmrdoob.github.com%2Fthree.js%2F&sa=D&sntz=1&usg=AFQjCNEXsZAJkNdZarZbXGdvvH3smEqOoA

http://www.google.com/url?q=http%3A%2F%2Fmrdoob.github.com%2Fthree.js%2F&sa=D&sntz=1&usg=AFQjCNEXsZAJkNdZarZbXGdvvH3smEqOoA

http://www.google.com/url?q=http%3A%2F%2Fcarvisualizer.plus360degrees.com%2Fthreejs%2F&sa=D&sntz=1&usg=AFQjCNG9R9AadWTqSOrg086GgWkz-QZxOA



http://www.google.com/url?q=http%3A%2F%2Fwww.krazytemplates.com%2Fbeercamp-an-experiment-with-css-3d%2F&sa=D&sntz=1&usg=AFQjCNHIFxqUnwxwt9rEotHt51F1iBr40Q




http://www.google.com/url?q=http%3A%2F%2F2012.beercamp.com%2F&sa=D&sntz=1&usg=AFQjCNFhObzc1dDwSfcGqcfBLM-TwoV8WA

http://www.google.com/url?q=http%3A%2F%2F2012.beercamp.com%2F&sa=D&sntz=1&usg=AFQjCNFhObzc1dDwSfcGqcfBLM-TwoV8WA

Easel.JS Librería en JS para trabajar con el Canvas de Html5 fácilmente.

● Canvas Display Object● Mouse Interaction Model● Rich HTML5 Content● Object Nesting


Chrome Experiments

● http://www.chromeexperiments.com/


http://www.chromeexperiments.com/




GDG Lima WebGL

● http://www.chromeexperiments.com/






Easel.JS

● CreateJS http://www.createjs.com/#!/CreateJS

● http://www.createjs.com/#!/EaselJS

● Comunidad http://community.createjs.com/discussions/easeljs


http://www.google.com/url?q=http%3A%2F%2Fwww.createjs.com%2F%23!%2FCreateJS&sa=D&sntz=1&usg=AFQjCNEZAYRz1t0M75GxxtzwDWU57DB9VA




http://www.google.com/url?q=http%3A%2F%2Fwww.createjs.com%2F%23!%2FEaselJS&sa=D&sntz=1&usg=AFQjCNH7jzQTwjILvQcAQZACuQnhjhJ2mQ



http://www.google.com/url?q=http%3A%2F%2Fcommunity.createjs.com%2Fdiscussions%2Feaseljs&sa=D&sntz=1&usg=AFQjCNGKpEnY925rXYQVVhdHCY-lBFk59w




Easel.JS

● Ejemploshttp://blogs.msdn.com/b/davrous/archive/2012/03/16/html5-gaming-animating-sprites-in-canvas-with-easeljs.aspxhttp://www.leebrimelow.com/?p=3171


http://www.google.com/url?q=http%3A%2F%2Fblogs.msdn.com%2Fb%2Fdavrous%2Farchive%2F2012%2F03%2F16%2Fhtml5-gaming-animating-sprites-in-canvas-with-easeljs.aspx&sa=D&sntz=1&usg=AFQjCNHjqblmmIYXoYxvh3RLXewTpFvZhA






http://www.google.com/url?q=http%3A%2F%2Fwww.leebrimelow.com%2F%3Fp%3D3171&sa=D&sntz=1&usg=AFQjCNE_ot0xbzc5-9WuKtuT4y0nObpwFQ



WebSite DevFestLima


Referencias● http://www.createjs.com/#!/EaselJS● https://github.

com/CreateJS/EaselJS/● http://gskinner.com/● http://www.createjs.com/#!/TweenJS● https://github.com/mrdoob/three.js/● http://www.pirateslovedaisies.com/




https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2FCreateJS%2FEaselJS%2F&sa=D&sntz=1&usg=AFQjCNEw8FzMHI9Md3V8O0Nsp9BZQfuIfQ



http://www.google.com/url?q=http%3A%2F%2Fgskinner.com%2F&sa=D&sntz=1&usg=AFQjCNGoLUtf2-nGb8YdQ80G9I6MLiOYTA

http://www.google.com/url?q=http%3A%2F%2Fgskinner.com%2F&sa=D&sntz=1&usg=AFQjCNGoLUtf2-nGb8YdQ80G9I6MLiOYTA

http://www.google.com/url?q=http%3A%2F%2Fwww.createjs.com%2F%23!%2FTweenJS&sa=D&sntz=1&usg=AFQjCNGUNjcI6C-WIV5QHxENtbLrCw9e1g

http://www.google.com/url?q=http%3A%2F%2Fwww.createjs.com%2F%23!%2FTweenJS&sa=D&sntz=1&usg=AFQjCNGUNjcI6C-WIV5QHxENtbLrCw9e1g

https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fmrdoob%2Fthree.js%2F&sa=D&sntz=1&usg=AFQjCNFpzeqC04UgSEHUoytZgwOlc-UYOg

https://www.google.com/url?q=https%3A%2F%2Fgithub.com%2Fmrdoob%2Fthree.js%2F&sa=D&sntz=1&usg=AFQjCNFpzeqC04UgSEHUoytZgwOlc-UYOg

http://www.google.com/url?q=http%3A%2F%2Fwww.pirateslovedaisies.com%2F&sa=D&sntz=1&usg=AFQjCNGugGFlfhByyetf6L7gZj9TTEfAGw

http://www.google.com/url?q=http%3A%2F%2Fwww.pirateslovedaisies.com%2F&sa=D&sntz=1&usg=AFQjCNGugGFlfhByyetf6L7gZj9TTEfAGw

<Preguntas?>

devfestlima.gdglima.pe/#moderator

Google DevRel LatAm South Region

¡PARTICIPA DE LA COMUNIDAD EN ESPAÑOL!

https://sites.google.com/site/drlatamsouthregion/

https://www.google.com/url?q=https%3A%2F%2Fsites.google.com%2Fsite%2Fdrlatamsouthregion%2F&sa=D&sntz=1&usg=AFQjCNHdZZW3m3zo5jrZEUer8qKoWxXvPQ



<Gracias por participar!>http://devfestlima.gdglima.pe

[email protected]

@gdglima

Engineering

Desarrollo interactivo con Html5