Inventando apps con App Inventor.

Estos días hemos estado aprendiendo como crear nuestras propias apps gracias a una página en la que nos explican con tutoriales los pasos que debemos seguir. La página que utilizamos es la siguiente: http://appinventor.mit.edu/explore/ appinventor Lo primero que debemos hacer será iniciar sesión, en caso de que no tengamos nos registraremos dándole “Create”. Una vez ya iniciado sesión para poder ver las diferentes apps que podríamos hacer nos iremos a la parte de “Tutorials”. ldnklfnNosotros fuimos creando apps como: -Hello Pur. -Magic 8 Ball. -Mole Mash -Paint Pot Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseño. Los componentes son los elementos básicos que se usan para crear las aplicaciones para el teléfono Android. Para utilizar un componente en tu aplicación, tendrás que hacer clic y arrastrarlo hasta dejarlo en la pantalla de la apliccación que vamos a crear. Cuando se añade un componente al este aparece en la lista de componentes al lado derecho dela pantalla o screen.

bol

Esta imagen nos muestra los componentes que aparecen en la parte derecha mostrándonos todos los botones que le vamos añadiendo a nuestra aplicación.

ujv

Este sería la pantalla en donde podremos ver todos los botones que iremos poniendo a nuestra app.

pantallazo1

En esta otra imagen podemos encontrar una captura de toda la pantalla, como podreis ver podremos encontrar el diseñador en la parte izquierda, en el centro la pantalla y a la derecha los componentes.

A continuación,en la parte superior a la derecha podremos ver dos botones:

,fjh,.

Los botones serían: designer y blocks

Si hacemos click al botón de los bloques, los que encontraremos serán una serie de bloques con distintas funciones dependiendo de lo que vayamos a hacer.

pokoñ7

Estas aplicaciones las aprendimos a utilizar con móviles Android y hemos ido comprobando si las íbamos haciendo bien descargando en el móvil una aplicación llamada : MIT AI2 COMPANION

mit-ai2-companion-212-2-s-307x512

Hello Pur.

Una de las primeras aplicaciones que realizamos fue el hello pur,para esta aplicación lo que vamos a necesitar es una imagen y un sonido así al tocar esa imagen suene el sonido seleccionado por nosotros. Por ejemplo,lo que hicimos fue poner una imagen sobre un animal cualquiera y como sonido poner el correspondiente al del animal,en mi caso lo que hice fue poner un perro y como sonido le puse un ladrido.

jvhkk

Este sería otro de los ejemplos del Hello Pur.

app1

Esta siguiente imagen sería la de mi primera aplicación.

Magic 8 Ball.

La segunda aplicación realizada fue la de Magic 8 Ball. Esta aplkicación consiste en que al hacer una pregunta para obtener una respuesta se tendrá que agitar el móvil. Lo que haremos en esta aplicación será insertar una imagen en la que al agitar elmóvil,nos aparecerán las respuestas.

xiukt

En esta imagen se puede observar el texto,y que lleva un sonido no visible al igual que un sensor. Para poder ver como le puse las respuestas,hay que hacer click a la botde los bloques y en la página del app inventor ver los pasos que hay que seguir para esta app.

jhvfjh

Estos bloques son los que utilicé para que al agitar el dispositivo con el que estemos utilizando para esta aplicación, aparezcan las respuestas que hay en los bloques.

Mole Mash.

Se diseñará el juego para que el mole se mueva cada medio segundo. Si es tocado la puntuación subirá un punto y el teléfono vibrará. Pulsando restart pondrás el contador a cero.

ljls

En esta imagen se puede observar el botón de reset, el tema que escogí y el mole.

En la siguiente imagen podréis observar los componentes de esta aplicación.

bdkvg

Los principales componentes de esta app son:

-Un Canvas

-Label

-Y el botón de reset.

En la siguiente captura de pantalla se podrán observar los bloques que hacen que la imagen animada se mueva a cada segundo,cómo subir cada puntuación si el  mole es tocado y los bloque para hacer que cuando el botón de reiniciar sea pulsado,la puntuación vuelva a cero.

hpiñfs´rdesdagj`w´rjg7

Esta ha sido una de las aplicaciones que más me ha costado hacer, ya que tuve algunos problemas al realizar los bloques, sobretodo en como hacer que el mole se mueva y cambie de posición.

Paint Pot.

El Paint Pot introduce el componente Canvas (lienzo) para crear gráficos simples de dos dimensiones. Esta aplicación te permite dibujar en la pantalla del teléfono con diferentes colores. En esta aplicación al arrastrar el dedo por la pantalla se creará una línea dependiendo del color seleccionado. Mientras que al pulsar en la pantalla lo que hará será crear un círculo de color.

En esta aplicación le puse un dot size que sirve para editar el tamaño del círculo.

ujv

En la imagen siguiente podremos ver los componentes que hemos utilizado para esta app. Podremos observar que se añadió una cámara como componente para que al tomar una foto podamos editarla con esta misma aplicación.

aldskngth

En los bloques se podrá ver lo que os he estado explicando antes sobre que al pulsar en la pantalla se creará un círculo y si arrastras el dedo en la pantalla se creará una línea.

nivlorasgfvgubiroraseihjwpldkhusgyrissokladzxjfhguiosk

A continuación podremos ver los bloques de la cámara para poder sacar una foto y poder editarla directamente por esta app.

W23456KDLJJXDVG

 Esta ha sido de todas las aplicaciones la  que más me ha gustado realizar.

¡Y eso es todo,espero que os haya servido de ayuda! 🙂

Cómo crear líneas de neón (Efecto imagen)

Lo primero que haremos será abrir nuestra imagen con Gimp.

gimp-logo

Una vez abierta la imagen,lo siguiente será añadir una nueva capa transparente.

capa-trans

A continuación,lo que haremos será escoger la herramienta de rutas,e iremos haciendo las líneas de la forma que queramos que se vean,modificando las curvas…etc

traza-ruta

Y en mi caso,lo que haré serán letras de neón,trazando cada letra.Una vez hecha la letra y haberla trazado,lo siguiente que haremos será hacerle click a filtros,darle a alfa logotipo y seleccionar la de neón.

letras neon

Al final veremos,que al haber hecho las letras,el fondo se nos quedará negro.

letras

Así que en la ventana de las capas,lo que haremos será eliminar el background. (fondo)

neon lights

Y eso es todo,espero que os haya servido este tutorial.

Cómo hacer uso a la máscara de capas.

Lo primero que haremos,será abrir la imagen con el editor que usaremos,en este caso utilizaremos el Gimp.

gimp-logo

A continuación lo que haremos será abrir las ventanas empotrables: Capas,deshacer y navegación.

PantallazoAl ya tener las ventanas abiertas,lo siguiente que haremos será duplicar la imagen de fondo. Al ya tenerla duplicada lo que haremos será hacerle click al botón de los colores y darle click a desaturar para poder convertir la imagen en blanco y negro.

desatirar

A continuación lo que haremos será añadirle a la capa superior una nueva máscara de capa en la que marcaremos la opción blanco.

capa

Y por último,lo que vamos a hacer será seleccionar la herramienta de pincel usando el color negro y comenzar a pintar sobre la zona a la que queremos darle color.

Beauty-Flower-Philippines-2

Esta imagen es otro ejemplo de una de las imágenes que he editado con la máscara de capas:

Skyline-s2-escalado

¡Y eso es todo! ¡Muchas Gracias!

Botón de Twitter – Tutorial.

Cómo insertar el botón de twitter en tu blog.

En primer lugar lo que debes hacer es iniciar sesión en tu cuenta de twitter.

Después de haber iniciado sesión,nos vamos al centro de recursos de twitter.

Una vez ahí le damos al al botón de seguir twitter y vamos añadiendo los siguientes datos:
-Nombre del usuario.
-Idioma.

Después de haber rellenado eso copiamos el HTML.
Nos situamos en el blog,y editamos el diseño añadiendo un nuevo gadget en el que pegaremos el código HTML.

Como título le daremos “seguir en twitter” después de eso,guardamos en blog y lo volvemos a abrir para revisar si lo hemos hecho bien.

Y así es como se debe de poner el botón de twitter en tu blog. Después, guardamos,actualizamos el blog y miramos si lo hemos hecho bien.