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

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

Posted on by Unknown with No comments

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.

sábado, 29 de junio de 2013

En este pequeño tutorial se mostrara como crear y configurar un proyecto con Cocos2d, el cual es un Framework para la creación de juegos. 

Para comenzar nos dirijimos a la pagina de Cocos2d para descargar el instalador
http://www.cocos2d-iphone.org/download/

Click para Zoom
Luego escogemos la version deseada, en este caso la version 2.1 y la descomprimimos al terminar la descarga.

Abrimos una Terminal y buscamos la carpeta que descargamos previamente:

cd Descargas
cd cocos-2d-iphone

Y luego ejecutamos el siguiente comando, el cual instalara como tal los templates de Cocos2d

./install-templates.sh -f -u
Click para Zoom
En caso de que aparezca un error de privilegios ejecutamos el siguiente comando.

sudo ./install-templates.sh -f -u

Al finalizar la instalación, ya tendremos acceso a los templates desde XCode. 

Click para Zoom

Instalar Templates de Cocos2d en XCode

Posted on by Unknown with No comments
En este pequeño tutorial se mostrara como crear y configurar un proyecto con Cocos2d, el cual es un Framework para la creación de juegos. 

Para comenzar nos dirijimos a la pagina de Cocos2d para descargar el instalador
http://www.cocos2d-iphone.org/download/

Click para Zoom
Luego escogemos la version deseada, en este caso la version 2.1 y la descomprimimos al terminar la descarga.

Abrimos una Terminal y buscamos la carpeta que descargamos previamente:

cd Descargas
cd cocos-2d-iphone

Y luego ejecutamos el siguiente comando, el cual instalara como tal los templates de Cocos2d

./install-templates.sh -f -u
Click para Zoom
En caso de que aparezca un error de privilegios ejecutamos el siguiente comando.

sudo ./install-templates.sh -f -u

Al finalizar la instalación, ya tendremos acceso a los templates desde XCode. 

Click para Zoom

domingo, 2 de junio de 2013

Navegar entre vistas en Objective-C - Código


En este tutorial navegaremos entre dos vistas, de la forma más básica, empezaremos creando un proyecto en blanco.
  • Como primer paso crearemos un botón que nos va a llevar a la siguiente vista en el archivo de interfaz gráfica (.xib).
Click para Zoom
  • Crear una clase de Objective-C con subclase UIViewController, ademar generar el archivo XIB

Click para Zoom

  • En esta segunda vista que creamos creamos un botón para volver a la primera vista como en el primer paso.
  • En cada una de nuestras clases creamos un IBAction el cual se encargara de realizar la navegación.

  • En los archivos implementadores de cada una de las vistas  (.m) realizaremos un import de la vista a la cual queremos cambiar.

  • Implementar la función que anteriormente habíamos creado goSecondView y en ella realizamos: 
  1. Inicializar el ViewController que llamaremos.
  2. Escoger un tamaño para la vista que deseamos mostrar, en este caso puede ser: UIModalPresentationPageSheet, UIModalPresentationFormSheet o  UIModalPresentationFullScreen.
  3.  Escoger el estilo de la transicion o animacion. Pueden ser: UIModalTransitionStyleCrossDissolve, UIModalTransitionStyleCoverVertical,  UIModalTransitionStyleFlipHorizontal y UIModalTransitionStylePartialCurl
  4. Presentar la vista.

Click para Zoom
  • Eso es todo, ahora solo implementamos la misma función pero en la segunda vista para poder regresar a la primera vista.

Navegar entre vistas en Objective-C - Código

Posted on by Unknown with No comments
Navegar entre vistas en Objective-C - Código


En este tutorial navegaremos entre dos vistas, de la forma más básica, empezaremos creando un proyecto en blanco.
  • Como primer paso crearemos un botón que nos va a llevar a la siguiente vista en el archivo de interfaz gráfica (.xib).
Click para Zoom
  • Crear una clase de Objective-C con subclase UIViewController, ademar generar el archivo XIB

Click para Zoom

  • En esta segunda vista que creamos creamos un botón para volver a la primera vista como en el primer paso.
  • En cada una de nuestras clases creamos un IBAction el cual se encargara de realizar la navegación.

  • En los archivos implementadores de cada una de las vistas  (.m) realizaremos un import de la vista a la cual queremos cambiar.

  • Implementar la función que anteriormente habíamos creado goSecondView y en ella realizamos: 
  1. Inicializar el ViewController que llamaremos.
  2. Escoger un tamaño para la vista que deseamos mostrar, en este caso puede ser: UIModalPresentationPageSheet, UIModalPresentationFormSheet o  UIModalPresentationFullScreen.
  3.  Escoger el estilo de la transicion o animacion. Pueden ser: UIModalTransitionStyleCrossDissolve, UIModalTransitionStyleCoverVertical,  UIModalTransitionStyleFlipHorizontal y UIModalTransitionStylePartialCurl
  4. Presentar la vista.

Click para Zoom
  • Eso es todo, ahora solo implementamos la misma función pero en la segunda vista para poder regresar a la primera vista.

lunes, 27 de mayo de 2013



En este tutorial insertaremos un sonido a nuestra aplicación para ello necesitaremos la aplicación que creamos en el tutorial anterior, o una aplicación en blanco; ademas necesitamos un archivo de Audio o Video que se encuentre en los siguientes formatos:


AUDIOVIDEO
.3gp, .mp4, .m4a, .aac, .mp3, .mid, .wav.3gp, .mp4, . webm, .mkv

Para más detalles acerca de los formatos de audio entre a: 

  • Después de tener el proyecto en blanco creado procedemos a crear una carpeta llamada raw dentro de la carpeta res, y en ella copiamos nuestro archivo de audio o video.
Click para zoom
  • Lo siguiente que haremos es editar el archivo MainActivity.java  en el cual pondremos toda la lógica de nuestra aplicación por ahora, en próximos tutoriales haremos una inducción a POO (Programación Orientada a Objetos). Como primera medida crearemos tres variables, dos de tipo Button y otra de tipo MediaPlayer.
Click para Zoom

  • Ahora modificamos el método onCreate(Bundle savedInstanceState) e instanciamos nuestras variables anteriormente declaradas. Ademas creamos una variable de tipo LinearLayout para almacenar todos los elementos que vamos a crear en la vista, deshabilitando el Layout que trae por defecto.
Click para Zoom
  • Luego se agregan los elementos al Layout, y este se escoge como Layout de la vista.
Click para Zoom
  • Después de todo lo anterior instanciamos el archivo de audio con MediaPlayer.create(this, R.raw.S1);  R.raw.S1 se refiere a la ruta o path del archivo de audio (R = res o resources, raw = carpeta que creamos en el primer paso de este tutorial, S1 = nombre del archivo en nuestro caso es S1.wav). Por ultimo colocamos la propiedad de Looping, sirve para crear un loop de reproducción o para una reproducción única.
Click para Zoom


  • Al haber instanciado el archivo de audio procedemos a hacer un implements de OnClickListener para poder usar los eventos de Click sobre los botones.
  • Cuando se realiza este implements se exige utilizar los métodos de OnClickListener en este caso el método onClick(View v), dentro de este método vamos colocar toda la lógica que se ejecuta en cada uno de los casos de click a los botones.
  • Por ultimo agregamos los listeners a los botones, y eso es todo.

  • Solo queda probar en el simulador o en nuestro dispositivo.

Click para Zoom

Reproducir archivo de Audio o Video en Android - MediaPlayer

Posted on by Unknown with No comments


En este tutorial insertaremos un sonido a nuestra aplicación para ello necesitaremos la aplicación que creamos en el tutorial anterior, o una aplicación en blanco; ademas necesitamos un archivo de Audio o Video que se encuentre en los siguientes formatos:


AUDIOVIDEO
.3gp, .mp4, .m4a, .aac, .mp3, .mid, .wav.3gp, .mp4, . webm, .mkv

Para más detalles acerca de los formatos de audio entre a: 

  • Después de tener el proyecto en blanco creado procedemos a crear una carpeta llamada raw dentro de la carpeta res, y en ella copiamos nuestro archivo de audio o video.
Click para zoom
  • Lo siguiente que haremos es editar el archivo MainActivity.java  en el cual pondremos toda la lógica de nuestra aplicación por ahora, en próximos tutoriales haremos una inducción a POO (Programación Orientada a Objetos). Como primera medida crearemos tres variables, dos de tipo Button y otra de tipo MediaPlayer.
Click para Zoom

  • Ahora modificamos el método onCreate(Bundle savedInstanceState) e instanciamos nuestras variables anteriormente declaradas. Ademas creamos una variable de tipo LinearLayout para almacenar todos los elementos que vamos a crear en la vista, deshabilitando el Layout que trae por defecto.
Click para Zoom
  • Luego se agregan los elementos al Layout, y este se escoge como Layout de la vista.
Click para Zoom
  • Después de todo lo anterior instanciamos el archivo de audio con MediaPlayer.create(this, R.raw.S1);  R.raw.S1 se refiere a la ruta o path del archivo de audio (R = res o resources, raw = carpeta que creamos en el primer paso de este tutorial, S1 = nombre del archivo en nuestro caso es S1.wav). Por ultimo colocamos la propiedad de Looping, sirve para crear un loop de reproducción o para una reproducción única.
Click para Zoom


  • Al haber instanciado el archivo de audio procedemos a hacer un implements de OnClickListener para poder usar los eventos de Click sobre los botones.
  • Cuando se realiza este implements se exige utilizar los métodos de OnClickListener en este caso el método onClick(View v), dentro de este método vamos colocar toda la lógica que se ejecuta en cada uno de los casos de click a los botones.
  • Por ultimo agregamos los listeners a los botones, y eso es todo.

  • Solo queda probar en el simulador o en nuestro dispositivo.

Click para Zoom

jueves, 23 de mayo de 2013

DESCARGAR EN PDF

Instalar Software de desarrollo

Sitio de desarrolladores de Android

  • Hacer click en el botón de Download en el panel izquierdo de la pantalla.

Developer Tools/ Download
  • Click en Download SDK (ADT Bundle for Mac).


  • Leer los terminos y condiciones luego hacer click en el checkbox para aceptarlos.

  • Después de descargar el archivo (adt-bundle-mac....), descomprimirlo.
  • Copiar la carpeta en una dirección de confianza y fácil recordación Ej: Documentos. Luego abrir la carpeta que descargo y se encontrará con las siguientes dos carpetas. 
  • Abrir la carpeta eclipse y ejecutar la aplicación con el mismo nombre.
  • Crear un Workspace en la carpeta de su preferencia y continuar. Un Workspace es una carpeta donde se van a almacenar todos sus proyectos, se pueden crear varios Workspaces con el fin de organizar y jerarquizar los proyectos.
  • Llenar el formulario de estadísticas para Google.
  • Eso es todo en cuanto a la instalación del Software.

Crear un nuevo Proyecto

  • Hacer Click en New Android Application.

  • Llenar los datos de la aplicación:
  1. Application Name: Nombre que tendrá la aplicación en el dispositivo.
  2. Project Name: Nombre del proyecto - archivo.
  3. Package Name: Nombre del paquete del proyecto, este va en notación de paquetes de Java.
  • En el siguiente paso se escoge si se desea crear un icono personalizado para la aplicación o si se esta creando una librería. Por ultimo se escoge el Workspace donde se guardara el proyecto.
  • Luego se configura el Icono; en esta configuración se presentan tres tipos de iconos (imagen, clipart y text) Y sus respectivas configuraciones de background, resources y colores. Luego click en Next.
  • Después se muestran tres opciones Blank activity, Fullscreen activity y Master/Detail. Blank activity se refiere a una aplicación donde se sigue mostrando la barra de menú de android; Fullscreen oculta el menú de Android pero toca tener cuidado al implementar este tipo de aplicaciones porque  hay que diseñar elementos para poder cerrar la aplicación por ella misma. Y por ultimo Master/Detail es un tipo de aplicación donde se mezclan dos tipos de vistas la primera es un listado de objetos, y la segunda muestra un detalle del objeto seleccionado. En próximos tutoriales mostrare como usar cada uno. 
  • Por ultimo damos un nombre a la vista y escogemos el tipo de navegación.
  • Eso es todo, por defecto al crear un Blank Activity se genera una aplicación  de Hello World.

Instalar software para desarrollar en Android con Mac y primera aplicación (Hello World)

Posted on by Unknown with No comments

DESCARGAR EN PDF

Instalar Software de desarrollo

Sitio de desarrolladores de Android

  • Hacer click en el botón de Download en el panel izquierdo de la pantalla.

Developer Tools/ Download
  • Click en Download SDK (ADT Bundle for Mac).


  • Leer los terminos y condiciones luego hacer click en el checkbox para aceptarlos.

  • Después de descargar el archivo (adt-bundle-mac....), descomprimirlo.
  • Copiar la carpeta en una dirección de confianza y fácil recordación Ej: Documentos. Luego abrir la carpeta que descargo y se encontrará con las siguientes dos carpetas. 
  • Abrir la carpeta eclipse y ejecutar la aplicación con el mismo nombre.
  • Crear un Workspace en la carpeta de su preferencia y continuar. Un Workspace es una carpeta donde se van a almacenar todos sus proyectos, se pueden crear varios Workspaces con el fin de organizar y jerarquizar los proyectos.
  • Llenar el formulario de estadísticas para Google.
  • Eso es todo en cuanto a la instalación del Software.

Crear un nuevo Proyecto

  • Hacer Click en New Android Application.

  • Llenar los datos de la aplicación:
  1. Application Name: Nombre que tendrá la aplicación en el dispositivo.
  2. Project Name: Nombre del proyecto - archivo.
  3. Package Name: Nombre del paquete del proyecto, este va en notación de paquetes de Java.
  • En el siguiente paso se escoge si se desea crear un icono personalizado para la aplicación o si se esta creando una librería. Por ultimo se escoge el Workspace donde se guardara el proyecto.
  • Luego se configura el Icono; en esta configuración se presentan tres tipos de iconos (imagen, clipart y text) Y sus respectivas configuraciones de background, resources y colores. Luego click en Next.
  • Después se muestran tres opciones Blank activity, Fullscreen activity y Master/Detail. Blank activity se refiere a una aplicación donde se sigue mostrando la barra de menú de android; Fullscreen oculta el menú de Android pero toca tener cuidado al implementar este tipo de aplicaciones porque  hay que diseñar elementos para poder cerrar la aplicación por ella misma. Y por ultimo Master/Detail es un tipo de aplicación donde se mezclan dos tipos de vistas la primera es un listado de objetos, y la segunda muestra un detalle del objeto seleccionado. En próximos tutoriales mostrare como usar cada uno. 
  • Por ultimo damos un nombre a la vista y escogemos el tipo de navegación.
  • Eso es todo, por defecto al crear un Blank Activity se genera una aplicación  de Hello World.

Suscribirse a: Entradas ( Atom )