martes, 11 de febrero de 2014

Como crear una aplicación de Fondos de Pantalla

A continuación os enseñaré a crear una aplicación de Fondos de pantalla o Wallpapers paso a paso,para novatos que no sepan por donde empezar a crear sus aplicaciones.

Paso 1: Preparar las imágenes:

Lo primero que tenemos que hacer para crear nuestra aplicación de Fondos de pantalla es buscar un tema y las imágenes,yo para esta demostración he elegido unas imágenes rústicas,del campo,que yo mismo hice un dia de setas.Cogemos nuestras imágenes y las ponemos en una carpeta con el nombre de nuestro proyecto,por ejemplo:Fondos Rústicos.
Ahora nos tendremos que poner nuestras imágenes en la red,yo recomiendo ponerlas en un album de nuestro Facebook o una fanpage que creemos a propósito
para ir guardando imágenes,en la imagen podeis ver un ejemplo.Es facil,en Facebook dale a fotos,elige la pestaña Albums y dale a crar nuevo album,se abrirá una carpeta de tu ordenador,busca las imágenes,las seleccionas todas y le das a Abrir,las imágenes tardaran un poquito en subir,recomiendo que marqueis la casilla abajo del todo que dice:Alta Resolución.Una vez que se hayan subido,pinchamos en publicar y las dejamos ahí de momento.

Paso 2:Crea tu cuenta desarrollador con Zigurapps y empezamos a crear la aplicación.

Entra en Zigurapps.com y registrate para acceder a tu cuenta desarrollador,es totalmente gratuito.
Una vez que hayas accedido a tu cuenta,verás un cuadrado gris con el símbolo + al pasar el puntero por encima te aparecerá un recuadro donde dice "Nombre de la app" escribe el nombre que le quieras dar,en este caso "Fondos Rústicos" y pincha en crear App.
En la siguiente pantalla nos muestran varios modelos de plantillas para guiarnos un poquito,según la aplicación que lleves en mente,pero para una aplicación de Fondos de pantalla,usaremos la primera opción "app en blanco" y le damos donde pone empezar.Se nos abrirá una pagina donde vemos la información de la aplicación,esto lo dejaremos para mas tarde por lo que pinchamos arriba en la pestaña edición.

Ahora tendremos la pagina donde seleccionamos que tipo de pantalla queremos para esta pagina de la aplicación,ya que se trata de la primera pantalla al abrir la aplicación,crearemos un texto corto donde explicar por encima la app y un botón de entrar,para lo que elegiremos la opción "Imagen interactiva".
De momento dejamos esta pestaña a un lado y nos ponemos a preparar una imagen con el programa que mas os guste,podeis usar Paint que lo lleva windows instalado,o cualquier otro,yo recomiendo Photoscape, por su facilidad de uso y ademas es gratuito,lo podeis descargar de Softonic mismo.


Con Photoscape abierto,pinchamos abajo a la derecha en "Nueva imagen", nos aparecera una ventanita para determinar el tamaño de la imagen,yo suelo usar 800 de ancho por 1280 de alto,elegimos el color que queramos y nos ponemos a trabajar sobre ella,en las pestañas de abajo pinchamos en Complementos y el dibujito de una T mayúscula,es la opción para escribir nuestros textos con el tipo de fuente,color y tamaño que queramos,haremos una imagen que mas o menos se parezca a esta de la izquierda.
Usando Photoscape,también podemos abrir una de las imágenes que vamos a usar como fondo,recortarla a un tamaño adecuado y ponerle los textos encima,pero para esta ocasión vamos a utilizar un fondo liso y de un solo color,porque en un fondo con arboles,cielo,etc es mas dificil de distinguir las letras,la palabra ENTRAR bien grande y en el centro de la imagen,no pongais botones en la parte mas inferior de la imagen porque Google no permite tener botones muy cerca de donde aparece la publicidad y en nuestras aplicaciones apareceran abajo.

Volvemos a nuestra la pestaña donde tenemos nuestra aplicación a medio empezar,si has tenido que loguearte de nuevo para acceder,entra en la aplicación,edicion y de los botones negros de la derecha,escoger el primero y veremos nuestro listado o arbol de pantallas,según lo queramos ver,elegimos la unica que debe haber y que lleva el nombre por defecto de Pantalla principal ,para entrar,pinchamos dos veces seguidas sobre la página o le damos a la tuerca que tiene a su derecha y en la primera opción,la de la flecha.
Ya estamos de vuelta en la pantalla de imagen interactiva,pulsamos en adjuntar imagen,se nos abrira un cuadro que dice Suelta las imágenes aquí ,lo deja bien claro,abrete la carpeta donde tienes la imagen que hemos preparado con Photoscape,arrastrala y sueltala dentro de este cuadro,una cosilla,a mi siempre me da este error al principio que se sube la imagen y no ,me deja usarla,no pasa nada,cierra el cuadro,vuelve a darle a adjuntar imagen y esta vez si,en la misma imagen que subiste,aparece un V de visto bueno,marcala y la imagen se pondrá en su sitio,ya puedes cerrar este cuadro de subir imágenes.
Ahora,justo debajo de la imagen hay un porcentaje que marca 160% por defecto,cámbialo al 100% para que la imagen aparezca entera en una pantalla de teléfono móvil.
Ahora tenemos que marcar que parte de la imagen hará la funcion de botón,en este caso sería la palabra entrar,pinchamos en una esquina y sin soltar el botón,hacemos un area donde enmarcamos la palabra ENTRAR como podeís ver en la anterior imagen.

Pulsamos con el botón derecho del raton sobre la palabra enmarcada,nos saldrá un pequeño y menú y elegimos Editar ,nos aparecerá una nueva ventana con la pestaña Contenido del área abierta,aquí no cambiamos nada y abrimos la pestaña Propiedades del área donde cambiaremos varias cosas,en ¿centrar el mapa en este area? No tocamos nada,lo dejamos en No,en Estilo de area seleccionamos Area Oculta y en comportamiento cambiamos Acción y ponemos Abrir pantalla,nos aparecera un nuevo renglón donde pondremos nueva pantalla y nos saldrá un cuadro preguntandonos como se va a llamar esa nueva página,a la que le pondremos el nombre de Imágenes y ya podemos cerrar esa ventana.

Ya tenemos una nueva página,otra vez en los iconos negros de la derecha pulsa el primero de arriba y verás la pantalla nueva Imágenes con una interrogación,pinchale dos veces y nos preguntará de nuevo que elijamos la clase de pantalla que queremos,esta vez elegiremos la opción detalle.
En esta nueva pantalla tenemos muchas posibilidades de añadirle opciones a la aplicación,nos centraremos en una normalita para fondos de pantalla.
Pinchamos sobre el icono Tabla y lo arrastramos hacia la pantalla del móvil de nuestra izquierda,nos aparecerán dos celdas,pulsamos en añadir celdas y ponemos un total de 4 celdas (nuestra app quedará mejor con solo dos celdas),en el dibujo de debajo si pinchamos sobre las lineas que separan las celdas y lo mantenemos,podemos cambiarles el tamaño a nuestro antojo,las ponemos todas a 50% para conseguir llenar el 100% .
Arrastramos el icono Imagen hacia una de las celdas,da igual si lo arrastras a las celdas de la pantalla del móvil o las que has modificado de tamaño.En la imagen grisacea que tenemos a la derecha,pulsamos en Select y nos volverá a parecer la ventana de Suelta aquí las imágenes pero esta vez con la primera imagen que añadimos,abrimos nuestra carpeta con las imágenes y esta vez arrastramos todas las que vayamos a usar para Fondos de pantalla,el proceso de subir las imágenes tardará un poquito pero merece la pena esperar para luego tenerlas todas a mano.
Elegimos la imagen por la cual queramos empezar,lo mejor es siguiendo el mismo orden que llevan para no olvidarte de poner alguna,la marcamos como en el caso anterior,marcando la V que tienen en la esquina inferior derecha y cerramos la ventana de imágenes.Ahora viene el proceso mas pesado,el de ir enlazando imágenes.La  imagen que hemos seleccionado aparecera en el recuadro derecho,le cambiaremos la Acción a Abrir URL,dejamos esta página abierta y nos dirijimos a nuestro Facebook,al Album donde metimos nuestras imágenes,buscamos la imagen que pusimos en la pagina anterior y la abrimos,que se vea en grande,pulsamos botón derecho del ratón y elegimos la opción copiar url de imágen ,volvemos a nuestra aplicación y en el hueco que ha aparecido al seleccionar  Abrir URL ponemos el puntero,pulsamos botón derecho y elegimos la opción Pegar.



Ya tenemos nuestro primer fondo de pantalla enlazado y listo para usarse,ahora deberemos de hacer lo mismo con cada imagen,una a una y añadiendo mas celdas como hemos visto antes segun nos vayan haciendo falta,te tendría que quedar algo parecido a la imagen que tenemos a la izquierda.
En los últimos huecos dejaros un espacio reservado para poner un botón de Salir O bien arrastramos a esa celda el icono de texto,ponemos salir y en acción elegimos Salir también,o también podéis crear otra imagen con Photoscape como he hecho yo,poneis la imagen igual que hemos hecho con las de los fondos pero en acción,en lugar de elegir abrir URL,seleccionamos la opción Salir.Otra recomendación es poner al final del todo unos tres separadores sin linea,eso se consigue arrastrando el icono separador a continuación de la última tabla que añadimos al proyecto y en las opciones cambiarle el estilo de linea a Sin linea ,esto es recomendable para que Google Play no nos borre nuestra aplicación por poner un botón demasiado cerca de la publicidad..

Ahora vamos a crear una imagen de cabecera para dar un aspecto mas profesional a la aplicación y para evitar cualquier hueco de la pantalla que quede sin rellenar al final de la app,para ello volvemos a Photoscape,pinchamos en Menú y en Nueva foto,le damos el color que queramos de Fondo y le damos un tamaño aproximado de 800 de ancho por 156 de alto,la altura puede variar según como lo querais de grande,ahora pinchamos en la pestaña complementos,en la T mayúscula de texto y ponemos el nombre de la app con el tipo de letra y colores que mas nos guste,lo encuadramos en nuestro fondo del color que hayamos elegido y le damos a guardar.
Volvemos a nuestro proyecto de app y pinchamos en el icono negro de la derecha,el que lleva las tuercas,Propiedades de la aplicación y después,en los nuevos iconos que nos aparecen,vamos al de arriba del todo,imagen de cabecera y le pinchamos,ahora pinchamos en adjuntar imagen y como ya sabeis hacer,arrastrais la imagen que hemos preparado,esperamos que se suba y la marcamos con la V,ya tenemos nuestra app terminada,antes de nada,en las opciones de arriba del todo,darle a previsualización y os dirá si contiene errores y donde están esos errores,los errores que suele dar es que te has dejado alguna imagen sin ponerle la URL,así que si te da algun error así,tendrás que comprobar las imágenes una a una y ver que les has puesto el enlace.

Paso 3:Crear el icono y la info

Nos toca crear el icono y para ello recomiendo la herramienta web Pixlr ya que ademas de ser gratuita y no necesita instalación,consigue unos acabados muy profesionales,asi que nos vamos a la dirección que os he dicho y lo primero que nos saldrá sera un menu para empezar,en nuestro caso elegimos Abrir una imagen desde el ordenador,elegimos la imagen que mas nos guste de nuestra carpeta con los fondos utilizados en la app,ya tenemos la imagen que saldrá en una ventanita,para trabajar bien con ella le damos al botón de maximizar en esa ventanita.
Ahora de las herramientas de la izquierda,elegimos la primera,recortar y en las opciones que nos han salido arriba,las de restricción,ponemos tamaño de salida y ponemos el ancho y el alto a 512,como muestra la imagen,pinchamos en la imagen y sin soltar hacemos el cuadrado lo mas grande posible cogiendo la parte de la imagen que mas nos guste,centramos el cuadrado sobre la parte de la imagen que nos interese y volvemos a pinchar en el icono de recorte,nos preguntara si deseamos aplicar los cambios y marcaremos que si,yo no he podido,pero para una imagen como la mia,intentar seleccionar la cesta pero que le sobre fondo a los lados,ya que ahora lo recortaremos para darle forma redondeada en los picos,que queda muchísimo mejor.

Puede que el resultado se os quede en una imagen muy pequeña,con la ruleta del ratón la acercamos para poder trabajarla bien,ahora seleccionamos el icono que hay debajo del de recortar,es un cuadrado con lineas discontinuas y se llama Marco,esta vez en las restricciones solo tocamos el apartado borde y le ponemos un valor de 30.
Volvemos a pinchar en una esquina de la imagen y relizamos otro cuadrado de esquina a esquina,pero esta vez dejando un pequeño margen,como en la imagen.
Bien,seguidamente pinchamos en la sección de arriba Editar y Invertir selección ,nos quedará un marco como el de la imagen,en la ventanita Capas de nuestra derecha,pinchamos dos veces sobre el candado de nuestra imagen,seleccionamos la goma de borrar de las herramientas de la izquierda y manteniendo el botón del ratón vamos borrando el sobrante de la imagen,todo lo de alrededor de la imagen.

Cuando ya tengamos el contorno borrado ,pinchamos en Archivo (junto a Editar) y le damos a guardar,Muy importante cambiar el formato y ponerlo en png para que el contorno sea transparente,en el nombre podemos ponerle Icono para reconocerlo entre todas las imágenes,le damos a OK,elegimos en que carpeta lo queremos guardar y ya tenemos nuestro icono creado,lo podeis dejar así o ponerle un texto encima con Photoscape,yo este lo voy a dejar así.

Volvemos a nuestro proyecto de aplicación y pinchamos en Info ,pinchamos en editar icono,buscamos el nuestro y lo ponemos,cuando aparezca el icono ya puesto,vamos a  Modificar Datos en descripción escribimos un texto para explicar nuestra aplicación,cuidado aqui con usar palabras clave muy repetitivas,eso te posicionaría bien pero Google acabaria castigando el posicionamiento de tu App o incluso borrarla,así que poner un texto claro y legible ,que sepamos en que consiste tu aplicación,después elije una categoría para tu aplicación y el idioma,para fondos de pantalla,la categoria es Personalización,cuando acabes,no te olvides de darle a guardar,donde antes ponía Modificar Datos,o todo lo que has escrito se perderá.

Ahora si que tenemos nuestra app terminada,solo nos queda publicarla y necesitamos una cuenta Admob para que podamos recibir nuestros ingresos de publicidad,está prohibido poner capturas,así que os guiaré paso a paso.
Entrais en Admob y os registrais,poner todos vuestro datos correctos porque estos son los que te pagan y comprueban que tus datos son reales mandándote unos codigos a tu buzón y al número de cuenta que pongais para recibir los ingresos,podeis estar tranquilos,admob pertenece a Google y tiene mucha seguridad,de todas maneras,la cuenta es para cobrar tu,no se van a cobrar nada de ahí y en principio no hace falta todo eso de los codigos,eso te lo pedirá cuando llegues al minimo de ingresos y vayas a cobrar tu primer ingreso.
Una vez registrados en Admob,buscamos un botón rojo que dice Monetizar una aplicación nueva pinchais en ese recuadro.En el punto uno nos pide seleccionar la aplicación a monetizar,pinchamos en añadir manualmente,escribimos el nombre de nuestra app y seleccionamos la plataforma Android,elegimos Android porque es la plataforma menos exigente y mas barata para empezar a publicar apps,además que es la que mas usuarios tiene y eso es lo que buscamos.
Damos en continuar y pasamos a seleccionar el formato del bloque de anuncios,elegimos banner y le ponemos un nombre cualquiera,no cambiamos nada mas de esa pantalla,damos en continuar y nos dará una informacion donde ahi un código muy largo que empieza algo asi como ca-app-pub y un montón de numeros,seleccionamos este codigo sin soltar el puntero,que se ponga todo el codigo azul,con botón derecho sobre el,damos a copiar y volvemos a nuestro proyecto de app.

De vuelta en nuestro proyecto pinchamos en finalizar,bajamos hacia abajo y marcamos la opción Ganar dinero y le damos a publicar,os volverá a salir la misma pantalla,volveis a bajar y pinchamos de nuevo en Publicar.
Ahora os saldra otra pantalla donde nos pide un código,ahí es donde tenemos que poner nuestro código admob,pinchamos con el segundo botón del ratón y damos a pegar,aparecerá el código que antes copiamos.Ni se os ocurra marcar la casilla que tiene debajo,la de no ganar dinero o no mostrar anuncios en esta aplicación,no recuerdo como lo ponía. Damos a continuar y nos saldrá una ventanita donde nos pedirá marcar que la aplicación cumple con las condiciones de Mobincube,aceptamos y nuestra aplicación comenzará a publicarse,tarda un ratito.
Cuando termine nos aparecerá una dirección URL y un código QR,cualquiera de los dos nos sirve para compartir nuestra aplicación donde nosotros queramos,Facebook,Twitter,Wathsapp,etc....
De esta manera tu aplicación solo llegará a la gente a la que tu se la mandes,para darle vidilla y que genere buenos ingresos,hay que publicarla en Play Store de Google,pero de eso ya hablaremos mas adelante,ya que ahí si que tenemos que pagar,no es mucho y se recupera enseguida pero antes de meternos en gastos,vamos a aprender a crear nuestras propias apps y tener algunas preparadas.




8 comentarios:

  1. Si en el paso donde ponemos 4 celdas para poner fotos, dejamos solo dos celdas, la aplicación queda mucho mejor visualmente.

    ResponderEliminar
  2. como hago para que la aplicacion sea paga?

    ResponderEliminar
    Respuestas
    1. Cuando rellenas los datos necesarios de cada app en Play Store o cualquier otro Market,llega un momento que te pregunta si quieres que tu app sea gratuita o de pago,yo personalmente prefiero gratuita y monetizarla con admob,muy poquita gente compra aplicaciones.

      Eliminar
  3. Gracias por la info. Lo hice asi como me dicen, lo que no entiendo es como tiene que hacer el usuario luego que hace clic en la imagen y que le abre en el navegador en grande para definirla como fondo de pantalla. Yo por ejemplo tengo un Samsung S3 y al abrir la imagen la veo en el Chrome del celu pero no puedo defirla como fondo de pantalla del celu. Gracias

    ResponderEliminar
  4. que tamaño tiene que tener la imagen interactiva para que ocupe toda la pantalla del smartphone?

    ResponderEliminar
  5. De momento esta es la unica opcion que tenemos para crear aplicaciones de pantalla,esperamos actualizaciones con mejoras en ese aspecto.
    Cuando se muestra la imagen,tan solo tienen que tener la imagen pulsada y esperar a que salga el menu de opciones donde elegimos "Establecer imagen como fondo de pantalla".

    ResponderEliminar
  6. A mi me funciona muy bien el tamaño 720x1280 que deja un pequeño hueco abajo del todo el cual se rellena con el bloque de publicidad.

    ResponderEliminar
  7. Hola,
    Me gustaria saber si en vez de subir las imagenes desde Facebook u otra página se pueden subir directamente desde el ordenador?.
    Y otra pregunta... se puede hacer wallpapers animados?...Yo tengo un video en mp4... Cómo hacer para añadir el video e introducirlo y definirlo como fondo animado?... Y tambien los iconos de diseño?. Si alguien me puede aclarar éstas dudas le estaría agradecida. amathissa@hotmail.com

    ResponderEliminar

Comparte tus dudas u opiniones