Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas

domingo, 15 de diciembre de 2013

Muchos hemos tenidos problemas con la status bar con iOS 7 trabajando con Phonegap, la solución es sencilla es la siguiente:

- Buscar el archivo MainViewController.m
- Reemplazar el metodo viewWillAppear  con el siguiente código:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
}
[super viewWillAppear:animated]

Phonegap Status Bar iOS 7

Muchos hemos tenidos problemas con la status bar con iOS 7 trabajando con Phonegap, la solución es sencilla es la siguiente:

- Buscar el archivo MainViewController.m
- Reemplazar el metodo viewWillAppear  con el siguiente código:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
}
[super viewWillAppear:animated]

viernes, 20 de septiembre de 2013

En este turorial realizaremos la reproducción de un sonido y adjuntaremos el codigo de una aplicación que esta disponible en el Play Store


Para empezar debemos haber instalado y configurado el Software de Corona tal como en nuestro tutorial anterior; luego abrimos CoronaSDK y creamos un nuevo proyecto.


Click para zoom

Cuando se crea una aplicación con el Template Game, se crean los siguientes archivos:


build.settigs: Archivo donde se incluyen configuraciones de la aplicación como orientación,  permisos para Android y redes sociales, ids de publicidad etc.

config.lua: En este archivo se configura la aplicación en cuanto tamaño y forma de reescalarse en distintos dispositivos, ademas que se maneja el número de fps.

level1.lua: Ejemplo de Physics (No lo usaremos en este tutorial).

menu.lua: Normalmente en este archivo template viene un botón que indica nuevo Juego en nuestro turorial lo utilizaremos para reproducir un archivo de audio.

main.lua: Este es el archivo base de la aplicación y desde donde se llama a la primera vista con el Storyboard.

Lo primero que haremos es copiar el archivo de audio que queremos reproducir en formato (WAV/MP3) en la carpeta base.

Luego abrimos el archivo menu.lua y declaramos nuestro archivo de audio de la siguiente forma:

local s1 = audio.loadSound( "1.wav" )

Ahora modificamos la función onPlayRelease(), la cual normalmente viene de esta forma

local function onPlayBtnRelease()
storyboard.gotoScene( "level1", "fade", 500 )
return true
end 

Y la cambiamos por esta 

local function onPlayBtnRelease()
audio.play( s1 )
return true
end 

Y eso es todo ahora vamos al simulador y abrimos main.lua




Al pulsar Play now reproducirá el archivo de audio.

Soundboard con CoronaSDK

En este turorial realizaremos la reproducción de un sonido y adjuntaremos el codigo de una aplicación que esta disponible en el Play Store


Para empezar debemos haber instalado y configurado el Software de Corona tal como en nuestro tutorial anterior; luego abrimos CoronaSDK y creamos un nuevo proyecto.


Click para zoom

Cuando se crea una aplicación con el Template Game, se crean los siguientes archivos:


build.settigs: Archivo donde se incluyen configuraciones de la aplicación como orientación,  permisos para Android y redes sociales, ids de publicidad etc.

config.lua: En este archivo se configura la aplicación en cuanto tamaño y forma de reescalarse en distintos dispositivos, ademas que se maneja el número de fps.

level1.lua: Ejemplo de Physics (No lo usaremos en este tutorial).

menu.lua: Normalmente en este archivo template viene un botón que indica nuevo Juego en nuestro turorial lo utilizaremos para reproducir un archivo de audio.

main.lua: Este es el archivo base de la aplicación y desde donde se llama a la primera vista con el Storyboard.

Lo primero que haremos es copiar el archivo de audio que queremos reproducir en formato (WAV/MP3) en la carpeta base.

Luego abrimos el archivo menu.lua y declaramos nuestro archivo de audio de la siguiente forma:

local s1 = audio.loadSound( "1.wav" )

Ahora modificamos la función onPlayRelease(), la cual normalmente viene de esta forma

local function onPlayBtnRelease()
storyboard.gotoScene( "level1", "fade", 500 )
return true
end 

Y la cambiamos por esta 

local function onPlayBtnRelease()
audio.play( s1 )
return true
end 

Y eso es todo ahora vamos al simulador y abrimos main.lua




Al pulsar Play now reproducirá el archivo de audio.

jueves, 4 de julio de 2013

Box2D - JavaScript Framework


Box2D es un framework para el desarrollo de juegos, comenzó como un proyecto especialmente para AS3 (ActionScript 3) pero con el paso del tiempo y el surgimiento de HTML5 nació Box2D JavaScript y Box2D para Objective-C. Y no se dejen engañar por ese feo logo, es uno de los mejores Frameworks en cuanto a físicas se refiere.

Si desean conocer más acerca de Box2D Javascript pueden entrar a 

O si quieren saber mas acerca de box2D para AS3 u Objective-C entren a 
o
http://www.cocos2d-iphone.org/wiki/doku.php/  - El proyecto de Box2D para Objective-C fue una alianza con Cocos2D un reconocido framework para el desarrollo de juegos para dispositivos móviles.

En nuestro próximo tutorial realizaremos un Setup del framework y realizaremos una aplicación en HTML5 con PhoneGap para correrla directamente en un dispositivo móvil.

Introducción a Box2D - Desarrollando juegos con HTML5

Box2D - JavaScript Framework


Box2D es un framework para el desarrollo de juegos, comenzó como un proyecto especialmente para AS3 (ActionScript 3) pero con el paso del tiempo y el surgimiento de HTML5 nació Box2D JavaScript y Box2D para Objective-C. Y no se dejen engañar por ese feo logo, es uno de los mejores Frameworks en cuanto a físicas se refiere.

Si desean conocer más acerca de Box2D Javascript pueden entrar a 

O si quieren saber mas acerca de box2D para AS3 u Objective-C entren a 
o
http://www.cocos2d-iphone.org/wiki/doku.php/  - El proyecto de Box2D para Objective-C fue una alianza con Cocos2D un reconocido framework para el desarrollo de juegos para dispositivos móviles.

En nuestro próximo tutorial realizaremos un Setup del framework y realizaremos una aplicación en HTML5 con PhoneGap para correrla directamente en un dispositivo móvil.

martes, 4 de junio de 2013

PhoneGap en Xcode

Para esta ocación, vamos a configurar PhoneGap para usarlo desde Xcode y así poder de desarrollar aplicaciones para dispositivos iOS en HTML5 como se dijo en el tutorial anterior.

El primer paso es tener un sistema Operativo Mac® OS X® Lion (10.7) o superior, y en ella instalar Xcode 4.5 o superior.


Ahora entramos a la página oficial de PhoneGap para realizar la descarga del Software.
http://phonegap.com/download/


Luego copiamos y descomprimimos el archivo descargado a la carpera de nuestra preferencia en mi caso la copie a Documentos. Abrimos una Terminal, en ella colocamos 4 parámetros:
  • Ruta de la carpeta que descargo de PhoneGap, para ejecutar el script create ./Users/jorgerovallez/Documents/phonegap-2.7.0/lib/ios/bin/create
  • Ruta donde se desea crear el nuevo proyecto, debe ser una carpeta vacía.
  • Identificador para el proyecto Ej: co.jomobile.TestPhoneGap
  • Nombre del Proyecto Ej: Test1.
Todo esto quedara mas o menos así:

MacBook-de-Jorge-R-Ovalle-Z:/ jorgerovallez$ sudo ./Users/jorgerovallez/Documents/phonegap-2.7.0/lib/ios/bin/create /Users/jorgerovallez/Documents/Cordova/TestPG co.jomobile.Test1 Test1

Al ejecutar el anterior código se genera un nuevo proyecto de Xcode en la ruta que colocamos, antes de abrir el proyecto se debera modificar los permisos del archivo a Lectura y Escritura.



Una vez modificados los permisos procedemos a abrir el proyecto en Xcode, donde encontraremos una carpeta con el nombre www, en esta carpeta esta todo el código de la aplicación en HTML5.



Para este proyecto de ejemplo lo dejaremos tal cual, pero para próximos tutoriales modificaremos el archivo índex.html y crearemos nuestra primera aplicación.



Empezando con PhoneGap en Xcode

PhoneGap en Xcode

Para esta ocación, vamos a configurar PhoneGap para usarlo desde Xcode y así poder de desarrollar aplicaciones para dispositivos iOS en HTML5 como se dijo en el tutorial anterior.

El primer paso es tener un sistema Operativo Mac® OS X® Lion (10.7) o superior, y en ella instalar Xcode 4.5 o superior.


Ahora entramos a la página oficial de PhoneGap para realizar la descarga del Software.
http://phonegap.com/download/


Luego copiamos y descomprimimos el archivo descargado a la carpera de nuestra preferencia en mi caso la copie a Documentos. Abrimos una Terminal, en ella colocamos 4 parámetros:
  • Ruta de la carpeta que descargo de PhoneGap, para ejecutar el script create ./Users/jorgerovallez/Documents/phonegap-2.7.0/lib/ios/bin/create
  • Ruta donde se desea crear el nuevo proyecto, debe ser una carpeta vacía.
  • Identificador para el proyecto Ej: co.jomobile.TestPhoneGap
  • Nombre del Proyecto Ej: Test1.
Todo esto quedara mas o menos así:

MacBook-de-Jorge-R-Ovalle-Z:/ jorgerovallez$ sudo ./Users/jorgerovallez/Documents/phonegap-2.7.0/lib/ios/bin/create /Users/jorgerovallez/Documents/Cordova/TestPG co.jomobile.Test1 Test1

Al ejecutar el anterior código se genera un nuevo proyecto de Xcode en la ruta que colocamos, antes de abrir el proyecto se debera modificar los permisos del archivo a Lectura y Escritura.



Una vez modificados los permisos procedemos a abrir el proyecto en Xcode, donde encontraremos una carpeta con el nombre www, en esta carpeta esta todo el código de la aplicación en HTML5.



Para este proyecto de ejemplo lo dejaremos tal cual, pero para próximos tutoriales modificaremos el archivo índex.html y crearemos nuestra primera aplicación.



lunes, 3 de junio de 2013

Introducción de Phonegap - HTML5 para dispositivos móviles.

Para contextualizarnos PhoneGap es una tecnología que permite crear aplicaciones móviles en HTML5 y poderlas ejecutar de forma nativa en el dispositivo. Lo anterior sin prestarle importancia al SO como lo pueden ser: iOS, Android, Blackberry, Windows phone, WebOS, etc.




La aplicación que se desarrolla debe ser creada con HTML5, CSS3 y JavaScript aprovechando todas sus nuevas tecnologías y ventajas tales como Tags de multimedia, Gráficos vectoriales, Canvas, Local Data Storage, etc.



PhoneGap ha sido probado con múltiples frameworks de JS, entre ellos:
En los próximos tutoriales se realizaran las instalaciones de PhoneGap para iOS en XCode y para Android en Eclipse.

Introducción de PhoneGap - HTML5 para dispositivos móviles.

Introducción de Phonegap - HTML5 para dispositivos móviles.

Para contextualizarnos PhoneGap es una tecnología que permite crear aplicaciones móviles en HTML5 y poderlas ejecutar de forma nativa en el dispositivo. Lo anterior sin prestarle importancia al SO como lo pueden ser: iOS, Android, Blackberry, Windows phone, WebOS, etc.




La aplicación que se desarrolla debe ser creada con HTML5, CSS3 y JavaScript aprovechando todas sus nuevas tecnologías y ventajas tales como Tags de multimedia, Gráficos vectoriales, Canvas, Local Data Storage, etc.



PhoneGap ha sido probado con múltiples frameworks de JS, entre ellos:
En los próximos tutoriales se realizaran las instalaciones de PhoneGap para iOS en XCode y para Android en Eclipse.