Utilización de controles "Canvas", "ImageSprite" y "Clock": App Inventor

Espero que os resulte interesante.

Entorno de diseño Web de aplicaciones móviles: App Inventor

Dejen comentarios.

Requisitos técnicos para poder utilizar App Inventor

Si no entendéis algo, háganlo saber.

Entorno de programación - El Block Editor: App Inventor

Espero que os resulte fácil de seguir. Dejen comentario.

Utilización de controles Textbox, label, Listpicker, Checkbox y Button: App Inventor

Espero que os guste. Dejen comentario.

Diseño mejorado del programa "Hola Ciclo": App Inventor

Espero que os guste. Dejen comentario.

Video tutorial. Diseño de mi primer programa: "Hola Ciclo"

Cualquier duda o problema, dejen comentario. Gracias

App Inventor, mi primera aplicación. Explicación Ifelse

Vamos a crear una aplicación simple para empezar.

Muestro el screen de como tiene que quedar, y vemos los pasos seguidos y como se ha ido desarrollando la aplicación.

Las instrucciones del screen son...

• Un Label con el mensaje "Hola ciclo"
• Un Boton que al pulsarlo:

Si al texto de abajo se le introduce la palabra "admin"

   Entonces mostrará el "Label" visto antes de color rojo.

     Si no el "Label" lo mostrará en azul.

• Textbox (cajetin para introducir texto).

    

Como hemos hecho el diseño?

Para empezar vamos utilizar de la "palette", "Basic".

1. Vamos a pinchar "Label" y lo arrastramos al "screen"
2. Pinchamos y arrastramos "Button" para insertar el botón.
3. Pinchamos de nuevo un "Label" y lo arrastramos al screen.
4. Por último pinchamos y arrastramos "Textbox".

• Lo siguiente que haremos es cambiarle el nombre a los componentes de "components", es el panel que tenemos a la derecha, lo haremos haciendo click derecho en cada uno de ellos y dandole un rename.

El motivo de cambiarle el nombre es simplemente para no confundirnos cuando estemos dentro del editor de bloques.

Los nombres que pondremos son:

1. Para "Label" pondremos "lbl" como prefijo para identificarlo, seguidamente "holaciclo" que es el texto que aparece en el diseño.
2. Para "Button" pondremos "btn", como prefijo para identificarlo, seguidamente "mensajeciclo" para identificar el botón en caso de que tuvieramos varios.
3. Para el siguiente "Label" el prefijo "lbl"(esto nunca cambiará ya..), seguidamente "mensajeciclo", para identificarlo.
4. Por último, para el "Textbox" el prefijo asignado será "txt", seguidamente pondremos por ejemplo, texto.

Como hemos conseguido centrar el diseño? como hemos puesto texto a los componente del screen?

Esta es la barra que esta a la derecha del taller, la barra de formato por así decirlo.

Podemos ir marcando las cajas introducidas en el screen en "components", por ejmplo. Una vez seleccionado un Label por ejemplo podemos entre otras cosas:

• Cambiar la fuente
• Cambiar el tamaño a la fuente
• Centrar la caja
• Ponerle color de fondo predeterminado
• En "text" va el texto que será visible en el screen.

Una vez terminado el diseño básico vamos a proceder al editor de bloques.

Recordamos como se entra en el editor de bloques.

Y descargamos para que se abra el editor.

Una vez abierto el editor, vamos a proceder a "encajar las piezas"

En "My blocks" controlamos los elementos que insertamos en la palette.

Como veis nos aparecen los lbl creados, el boton y el text.

• Veis como hemos clicado en "btnmensajeciclo" y nos aparecen los bloques que nos permiten configurar el botón.

Nosotros arrastraremos "btnmensajeciclo.Click"
Con esto conseguiremos que haga "algo" cuando le demos al botón


Recordamos que al darle al botón queremos que:

Si al texto de abajo se le introduce la palabra "admin"

   Entonces mostrará el "Label" visto antes de color rojo.

     Si no el "Label" lo mostrará en azul.

¿Como conseguimos que.. Si cumple una condición haga algo y Si no que haga otra cosa..?

Esto lo haremos con IF ELSE   

App Inventor Primeros Pasos

Buenas a todos, vamos a explicar que tenemos dentro de la plataforma que ya vimos en la entrada anterior.
Al acceder ala web http://appinventor.mit.edu/ esta es la pantalla inicial que nos aparece.
Debemos acceder a INVENT, como bien marca la imagen.




Una vez accedemos se nos presenta la siguiente página.
Seleccionamos nuevo e introducimos el nombre de nuestro proyecto

Esta es la siguiente página que se nos presenta, vamos a analizar los elementos básicos para poder movernos  por la aplicación, dejaremos algunos de lado, para no meter demasiada información, los restantes se irán viendo a medida que vallan haciendo falta!

1. Aquí podemos seleccionar nuestro proyecto o crear uno nuevo.
2. Nos logeamos/ deslogeamos.
3. Guardamos nuestro proyecto.
4. Abrimos el editor de bloque(vemos más adelante que és.)
5. “Palette”: Muestra la paleta o librería de componentes que vas a poder utilizar para construir las aplicaciones. Dentro de esta sección puedes encontrar diez categorías. Nosotros estaremos un tiempo con la básica.
6. “Viewer”, que es la representación de la pantalla del teléfono, lo que veas aquí, es lo que verás en la pantalla del teléfono. La forma de construir el diseño consiste en ir arrastrando componentes desde “Palette” a “Viewer”.
7. “Components”. En esta sección puedes ver todos los componentes que tienes en la pantalla, aquí es donde puedes cambiar el nombre a los componentes o eliminar los que tengas en “Viewer”.
8. “Properties”. En esta sección puedes configurar las propiedades de los componentes de la pantalla. Por ejemplo, cambiar los parámetros como el color de los textos, el tamaño y la forma de los botones o el fondo de pantalla, entre otras muchas opciones.
9. La opción "básic" dentro de nuestra "Palette" será la que empezemos a utilizar.

Con el número 4, el editor de bloques.Haciendo click en el, aceptamos la descarga y nos abrirá el editor para empezar a programar.

1. Guardamos el proyecto
2. Haciendo click en new emulator a brimos un telefono virtual con el que podemos ir probando nuetra aplicación.
3. Aqui podemos conectar la aplicación en construcción por medio de Wifi, al emulador creado, resetear la conexiones etc.
4. Damos ZOOM o quitamos a nuestra pantalla
5. Menú de bloques con las herramientas necesarias para definir cómo se comporta la aplicación.

1. My Blocks, donde encontrarás todos los elementos que has arrastrado previamente en la Web de AppInventor. Si te fijas en la columna Components, verás que aparecen los mismos elementos que en la columna My Blocks del Editor de Bloques.

Esto es todo para la primera entrada, en la siguiente ponderemos en practica lo que hemos visto para crear y ver como se desarrolla una aplicación sencilla.

Impress! Edita presentaciones de diapositivas gratis.

Impress de la suite de openoffice.org es un programa de lectura y edición de presentaciones de diapositivas. Similar a Power Point, de Microsoft, pero a diferencia de que Impress es completamente gratuito.

Dónde puedo conseguirlo?

Sólo tendremos que descargar rápido y fácil la suite. Descarguen aquí http://www.openoffice.org/es/descargar/

Cómo vamos a aprender a utilizarlo?

Bien, el programa es sorpredentemente entendible, aún así, dejo para que descarguen un .pdf con un manual sencillo y completo sobre el programa.
Descarga aqui manual Impress (6 cap.) http://suministrosrios.es/

Además propondré unos ejercicios guiados desde "0", así no tendrán ningún problema en hacerse pronto con el control. También incluyo la solución de como debe de quedar terminado los pequeños ejercicios.

Bien, voy a poner los ejercicios que propuse, si hay algún problema dejen comentario.

Ejercicio 1. Conceptos Básicos.

Descarga aquí: http://suministrosrios.es/2.html

Ejercicio 2. Manejo de objetos en Impress: Texto y tablas.
Descarga aquí: http://suministrosrios.es/2.html

Ejercicio 3. Manejo de objetos en Impress: Texto y tablas II.
Descarga aquí: http://suministrosrios.es/2.html

Ejercicio 4. Manejo de objetos en Impress II: Objetos gráficos.
Descarga aquí: http://suministrosrios.es/2.html

Ejercicio 5. Manejo de objetos en Impress II: Objetos gráficos II.
Descarga aquí: http://suministrosrios.es/2.html

Ejercicio 6. Expansión multimedia.
Descarga aquí: http://suministrosrios.es/2.html

Ejercicio 7. Expansión multimedia II.
Descarga aquí: http://suministrosrios.es/2.html

Estos son todos los ejercicios a realizar, como dije, son ejercicios guiados con la solución de como debe quedar cada trabajo, así que no tiene sentido dejar aquí unas imágenes de como tienen que quedar.

Las tareas no son redactadas por mí, pero si estoy en proceso de terminarlas, así que contestaré cualquier duda que tengáis por comentarios con mucho gusto. El autor de ellas viene reflejado en los documentos.

Edito: Cualquier link de descarga roto dejenlo en comentarios, en menos de 24 horas seran resubidos. Gracias.

App Inventor, Que es?, dónde?, como?, que necesito?

Que es?

Básicamente es un software para crear aplicaciones.
App inventor es una framework creado inicialmente por el MIT (Instituto tecnológico deMassachusetts) y fué cogido por google para que cualquier persona con interés pueda crearse su propia aplicación movil, ya sea para su empresa, para su casa o por otros interéses.

Dónde, cómo y que necesito para empezar a crear aplicaciones para android

1. accedemos a esta web http://appinventor.mit.edu/

Hacemos click en:

Este es el taller web que vamos a utilizar para la creción de aplicaciones, en breve pongo la primera entrada para App Inventor. Podeis ir "trasteando la web" para iros familiarizando.

Crea fácil un Blog con google!

Antes de empezar con el tutorial,  no esta mal de hacer una pequeña introducción de como hacer este blog con el que voy a ir publicando el manual. Aquí tenéis pasos fáciles para crear un blog, con esto conseguiréis publicar una mejora de mi tutorial, por ejemplo.jeje

-Bien, el primer requisito es tener una cuenta google de gmail. (pincha aqui) si no la tienes aún.

-Después visitataremos la página de Blogger.com, para proceder a la construcción de nuestro espacio.

http://www.blogger.com/home

-Como veis, sale reflejado el mio, y además puedo agregar nuevo nuevo blog.

-Añadimos el título, la plantilla que vamos a seguir y la dirección.

-El siguiente paso es bastante intuitivo, si hay algún problema podéis dejarlo en comentarios, aqui nos toca configurar nuestro blog a nuestro estilo, añadirle gadget, ajustar zona horaria, configurar en definitiva todo el tema visual. Incluso podemos añadir Addsense, esa publicidad de google que nos paga por cada click de los visitantes.