lunes, 24 de junio de 2013

Este tutorial esta encaminado en crear y configurar las llaves y los provision profiles para poder probar nuestras aplicaciones directamente en un dispositivo o simplemente subirlo al App Store.

Lo primero que se necesita es crear una cuenta como desarrollador en la pagina de Apple y pagar la cuota correspondiente a la inscripción como desarrollador de Apple equivalente a 99USD individual, 299USD empresas.

Ahora si lo que nos interesa:

1. Entrar a la pagina de desarrolladores de Apple (Member Center). https://developer.apple.com/membercenter/

Click para Zoom
2. Abrir la herramienta Keychain que se encuentra en Applications -> Other. Y hacemos click en la opción "Request a Certificate from a Certificate Authority"

Click para Zoom
3. Se abrira una ventana informativa donde configuraremos el certificado, en nuestro caso escogemos la opción de "Saved to disk", y colocamos nuestro nombre y nuestro correo electrónico para continuar.

Click para Zoom
4. Luego guardamos el archivo generado (.CSR - CertSigningRequest) En nuestra carpeta de preferencia.

Click para Zoom
5. Volvemos al Member Center,  y tenemos la siguiente ventana, hacemos click en el Icono  (Certificates, Identifiers & Profiles).

Click para Zoom

Click Para Zoom
 De esta forma llegamos a este administrador, hacemos click en la parte de certificados para la administración de los mismos.

Click para Zoom

6. Para crear los certificados haremos click en el botón (+) para agregar uno nuevo.
Click para Zoom
Desarrollando  aplicaciones para iOS necesitamos de dos certificados, el primero para desarrollo y el segundo es para distribución. Con el certificado de desarrollo podemos probar las aplicaciones desarrolladas en XCode directamente en nuestros dispositivos para evaluar velocidad de ejecución, desempeño, colores, gestos etc. Por otro lado el certificado de distribución lo utilizamos para exportar la ultima versión de nuestras aplicaciones antes de ser subidas al App Store.
En el caso de Developer escogemos la opción iOS App Developer, y para Distribution escogemos App Store.
Click para Zoom

7. Después de seleccionar seleccionar el tipo de certificado, se sube el archivo que habíamos generado anteriormente (.CSR)
Click para Zoom
8. Cuando subimos el archivo y pulsamos el botón de continuar, nos aparece una ventana para descargar nuestro certificado. (Estos dos pasos los realizamos tanto por Developer como por Distribution)

9. Al haber descargado los dos certificados, les hacemos doble click a cada uno para agregarlos al Keychain Access de nuestra computadora.

Para asegurarnos que fueron instalados, estos aparecerán en la sección de My certificates.


Ya en este paso habremos configurado los certificados, para empezar con la configuración de los dispositivos, y los mobile provision.


Certificados y Mobile Provision- Prueba tus aplicaciones en tu dispositivo - Parte 1

Este tutorial esta encaminado en crear y configurar las llaves y los provision profiles para poder probar nuestras aplicaciones directamente en un dispositivo o simplemente subirlo al App Store.

Lo primero que se necesita es crear una cuenta como desarrollador en la pagina de Apple y pagar la cuota correspondiente a la inscripción como desarrollador de Apple equivalente a 99USD individual, 299USD empresas.

Ahora si lo que nos interesa:

1. Entrar a la pagina de desarrolladores de Apple (Member Center). https://developer.apple.com/membercenter/

Click para Zoom
2. Abrir la herramienta Keychain que se encuentra en Applications -> Other. Y hacemos click en la opción "Request a Certificate from a Certificate Authority"

Click para Zoom
3. Se abrira una ventana informativa donde configuraremos el certificado, en nuestro caso escogemos la opción de "Saved to disk", y colocamos nuestro nombre y nuestro correo electrónico para continuar.

Click para Zoom
4. Luego guardamos el archivo generado (.CSR - CertSigningRequest) En nuestra carpeta de preferencia.

Click para Zoom
5. Volvemos al Member Center,  y tenemos la siguiente ventana, hacemos click en el Icono  (Certificates, Identifiers & Profiles).

Click para Zoom

Click Para Zoom
 De esta forma llegamos a este administrador, hacemos click en la parte de certificados para la administración de los mismos.

Click para Zoom

6. Para crear los certificados haremos click en el botón (+) para agregar uno nuevo.
Click para Zoom
Desarrollando  aplicaciones para iOS necesitamos de dos certificados, el primero para desarrollo y el segundo es para distribución. Con el certificado de desarrollo podemos probar las aplicaciones desarrolladas en XCode directamente en nuestros dispositivos para evaluar velocidad de ejecución, desempeño, colores, gestos etc. Por otro lado el certificado de distribución lo utilizamos para exportar la ultima versión de nuestras aplicaciones antes de ser subidas al App Store.
En el caso de Developer escogemos la opción iOS App Developer, y para Distribution escogemos App Store.
Click para Zoom

7. Después de seleccionar seleccionar el tipo de certificado, se sube el archivo que habíamos generado anteriormente (.CSR)
Click para Zoom
8. Cuando subimos el archivo y pulsamos el botón de continuar, nos aparece una ventana para descargar nuestro certificado. (Estos dos pasos los realizamos tanto por Developer como por Distribution)

9. Al haber descargado los dos certificados, les hacemos doble click a cada uno para agregarlos al Keychain Access de nuestra computadora.

Para asegurarnos que fueron instalados, estos aparecerán en la sección de My certificates.


Ya en este paso habremos configurado los certificados, para empezar con la configuración de los dispositivos, y los mobile provision.


jueves, 20 de junio de 2013

Cuenta de desarrollador para Android.

En este turorial se explicara como crear una cuenta de desarrollador para Android para poder subir aplicaciones al Google Play Store y así ganar dinero con ellas.

Como primer paso tenemos que crear una cuenta con los servicios de Google, que incluye gmail, G+, google Docs, google Drive, etc.

Luego nos dirigimos a la pagina de desarrolladores de Android http://developer.android.com/index.html.

Click para Zoom
Nos logeamos con nuestra cuenta de Google previamente creada y  nos aparecerá un formato como este en el que vamos a hacer nuestra inscripción al Programa de desarrolladores de Android.

Click para Zoom

El paso a seguir es aceptar los términos y condiciones del programa de desarrollo.
Click para Zoom
Luego pulsamos el botón de Continuar para completar el pago, para realizar el pago es necesario enlazar una tarjeta de crédito a Google Wallet, este es un servicio de google que sirve para realizar pagos desde la cuenta de Google sin tener que colocar datos de la tarjeta de crédito que vamos a utilizar cada vez. Este pago será de 25 USD y es vitalicio una ves tengamos la cuenta de desarrolladores lo seremos por siempre, sin necesidad de pagar más dinero.

Click para Zoom
Una vez pagada la cuota de inscripción tendremos acceso al sitio de desarrolladores y todas sus servicios. Ademas de la consola para la creación de nuevas aplicaciones.




Y eso es todo, en próximos tutoriales se mostrara el proceso para la creación de una Aplicación en la Consola para ser vendida en el Google Play Store.

Crear cuenta de desarrollador para Android.

Cuenta de desarrollador para Android.

En este turorial se explicara como crear una cuenta de desarrollador para Android para poder subir aplicaciones al Google Play Store y así ganar dinero con ellas.

Como primer paso tenemos que crear una cuenta con los servicios de Google, que incluye gmail, G+, google Docs, google Drive, etc.

Luego nos dirigimos a la pagina de desarrolladores de Android http://developer.android.com/index.html.

Click para Zoom
Nos logeamos con nuestra cuenta de Google previamente creada y  nos aparecerá un formato como este en el que vamos a hacer nuestra inscripción al Programa de desarrolladores de Android.

Click para Zoom

El paso a seguir es aceptar los términos y condiciones del programa de desarrollo.
Click para Zoom
Luego pulsamos el botón de Continuar para completar el pago, para realizar el pago es necesario enlazar una tarjeta de crédito a Google Wallet, este es un servicio de google que sirve para realizar pagos desde la cuenta de Google sin tener que colocar datos de la tarjeta de crédito que vamos a utilizar cada vez. Este pago será de 25 USD y es vitalicio una ves tengamos la cuenta de desarrolladores lo seremos por siempre, sin necesidad de pagar más dinero.

Click para Zoom
Una vez pagada la cuota de inscripción tendremos acceso al sitio de desarrolladores y todas sus servicios. Ademas de la consola para la creación de nuevas aplicaciones.




Y eso es todo, en próximos tutoriales se mostrara el proceso para la creación de una Aplicación en la Consola para ser vendida en el Google Play Store.

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.

domingo, 2 de junio de 2013




En este tutorial navegaremos entre dos vistas mediante la tecnología de Storyboards, para comenzar crearemos un proyecto en blanco.
  • Después de tener nuestro proyecto nuevo, modificamos la vista por defecto de nuestro Storyboard agregándole un botón como en nuestro tutorial anterior.
Click para Zoom
  • Ahora hacemos Drag-n-Drop de un componente ViewController nuevo a nuestro Storyboard.
Click para Zoom
  • Hacemos Click derecho en el botón de la vista 1 (Ir a Vista 2), arrastramos hacia la vista 2 y soltamos, con lo que nos aparecerá un Pop-Up con tres opciones: Push, Modal y Custom. En este caso escogemos Push para una animación Horizontal, o Modal para escoger alguna de las animación diferente, por ultima opción tenemos custom, para programar una transición diferente.
Click para Zoom
  • Una vez ya hallamos elegido la transición para las vistas, repetimos los pasos anteriores desde la Vista 1 hacia la Vista 2 para obtener un resultado como el de la siguiente imagen. 
Click para Zoom

Navegar entre vistas en Objective-C - Storyboard




En este tutorial navegaremos entre dos vistas mediante la tecnología de Storyboards, para comenzar crearemos un proyecto en blanco.
  • Después de tener nuestro proyecto nuevo, modificamos la vista por defecto de nuestro Storyboard agregándole un botón como en nuestro tutorial anterior.
Click para Zoom
  • Ahora hacemos Drag-n-Drop de un componente ViewController nuevo a nuestro Storyboard.
Click para Zoom
  • Hacemos Click derecho en el botón de la vista 1 (Ir a Vista 2), arrastramos hacia la vista 2 y soltamos, con lo que nos aparecerá un Pop-Up con tres opciones: Push, Modal y Custom. En este caso escogemos Push para una animación Horizontal, o Modal para escoger alguna de las animación diferente, por ultima opción tenemos custom, para programar una transición diferente.
Click para Zoom
  • Una vez ya hallamos elegido la transición para las vistas, repetimos los pasos anteriores desde la Vista 1 hacia la Vista 2 para obtener un resultado como el de la siguiente imagen. 
Click para Zoom

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

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.

sábado, 1 de junio de 2013


Reproducir Archivo de Audio en Objective-C



En este tutorial insertaremos y reproduciremos un archivo de audio en Objective-C, para comenzar crearemos un proyecto en blanco.
  • Depues de haber creado el proyecto lo primero que tenemos que hacer es importar las librerías AudioToolbox.framework y AVFoundation.framework.
Click para Zoom
  • Ahora importamos el archivo de audio que queremos reproducir, este archivo debe tener una de las siguientes extensiones*: AIFF, AIFC, MP3, SND, AU, WAV, QDesign.
              *Para mayor información sobre extensiones y archivos de audio visite Developer Audio Apple

Click para Zoom
  • Crear un método para ejecutar la reproducción del sonido, y asignarselo a un botón en el entorno gráfico.




  • En el archivo implementador de la vista (.m) instanciamos el sonido, con el método CFBundleCopyResourceURL en el cual colocamos el nombre y extensión del archivo y eso es todo.



Reproducir Archivo de Audio en Objective-C


Reproducir Archivo de Audio en Objective-C



En este tutorial insertaremos y reproduciremos un archivo de audio en Objective-C, para comenzar crearemos un proyecto en blanco.
  • Depues de haber creado el proyecto lo primero que tenemos que hacer es importar las librerías AudioToolbox.framework y AVFoundation.framework.
Click para Zoom
  • Ahora importamos el archivo de audio que queremos reproducir, este archivo debe tener una de las siguientes extensiones*: AIFF, AIFC, MP3, SND, AU, WAV, QDesign.
              *Para mayor información sobre extensiones y archivos de audio visite Developer Audio Apple

Click para Zoom
  • Crear un método para ejecutar la reproducción del sonido, y asignarselo a un botón en el entorno gráfico.




  • En el archivo implementador de la vista (.m) instanciamos el sonido, con el método CFBundleCopyResourceURL en el cual colocamos el nombre y extensión del archivo y eso es todo.