APP INVENTOR

 

AppInventor es un entorno de programación web desarrollado por Google y el MIT (Instituto de Tecnología de Massachusetts) basado en bloques muy simple de usar. Te permite desarrollar aplicaciones que se ejecutarán en dispositivos móviles con el sistema operativo Android.

¿Qué necesitas?

• Una cuenta de Google
• Un teléfono o tableta Android ((si no tienes uno, puede usar un emulador)
• Un navegador web. Funciona con Google Chrome , Safari o Firefox, pero Internet Explorer no es compatible con esta aplicación.

Tareas

De cada video debés entregar el archivo XXXXX.aia.

Una vez realizada la práctica debéis ir al desplegable "projets" y pinchar en "Export my select proyect (aia) to my computer"

El archivo descargado lo enviáis en la entrada de classroom que corresponda.

En el classrrom se os indica si del video hay que presenta archivo o no.

Para la práctica 10 donde es necesario utilizar una aplicación de prototipado, utiliza MARVEL (Marvel Prototyping LTD).

Las actividades están previstas para que puedan ser realizadas entre 6 y 8 horas lectivas. Cada semana tendrás que adjuntar los ejercicios que hayas hecho.

Recursos

A continuación dispones de vídeos-tutoriales de CodeMadrid que te ayudarán a registrarte, conectar la aplicación con tu móvil o con el emulador y a realizar aplicaciones.

1. Programación de aplicaciones usando App Inventor. No entregar.

2. Emulador. Entregar.

3. Wifi y USB No entregar

4. Entorno de desarrollo

5. Canvas, Sprite y aplicaciones

6. Aplicaciones simples. Parte I

7. Aplicaciones simples. Parte II

8. Aplicaciones simples. Parte III

9. Aplicaciones simples. Parte IV

10. Entorno de prototipado

11. Diseño de mapas de funcionalidades

12. Diseño de escenarios de uso

13. Publicación de aplicaciones en el market

14. Emprendimiento

15. Práctica. Parte I

16. Práctica. Parte II

17. Práctica. Parte III

18. Práctica. Parte IV  

También puedes consultar el Curso de Programación de Android, cuyo autor es Pedro Felip, donde los primeros capítulos tratan de App Inventor.

Y los Recursos del MIT App Inventor, donde puedes filtrar por tutorial.

Inkscape 5

Inkscape 5

Una vez realizado los trabajos, subís los archivos a vuestra área de trabajo.

Inkscape 4

Inkscape 4

Una vez realizado los trabajos, subís los ejercicios a vuestra área de trabajo.

Inkscape 3

Inkscape 3

Una vez realizado los trabajos, subís los archivos a vuestra área de trabajo.

Inkscape 2

Inkscape 2

Una vez realizado los trabajos, subís los archivos a vuestra área de trabajo.

Inkscape

Inkscape.

Os tenéis que descargar del área de descargas el programa IKNSCAPE, para poder trabajar en casa.

En enlace es:

https://inkscape.org/release/inkscape-0.92.4/

Se trata de una aplicación libre. Una vez realizado los trabajos, subís los archivos a vuestra área de trabajo.

Presentar información en tablas

Presentar información en tablas: <table>, <tr> y <td>

Durante mucho tiempo fue habitual utilizar las tablas de HTML tanto para presentar datos complejos de una forma más sencilla, como también para estructurar por entero el diseño de una página web o para subdividir el texto en varias columnas. Sin embargo, con el aumento de la popularidad de CSS este papel extra de las tablas pasó a un segundo plano, de tal modo que hoy las tablas asumen únicamente la función para lo que fueron pensadas, es decir, la presentación de datos de forma ordenada. Las tablas se componen, por lo menos, de estos tres elementos:

• <table>: esta etiqueta marca el inicio y el cierre de una tabla en HTML, aunque por sí sola no informa al navegador de aspectos necesarios para mostrarse como el número de filas o de columnas.

• <tr>: con el elemento "table row" (fila de la tabla) se añaden tantas filas a la tabla como sea necesario.

• <td>: las columnas completan la estructura básica de una tabla. Para ello necesitamos el tag "table data" (datos de la tabla), que se subordina a una etiqueta <tr>, puesto que, dentro de una fila, se crean varias celdas (una por columna). El contenido de una celda se sitúa entre la etiqueta de inicio <td> y el de cierre </td>.

Creamos a continuación una tabla sencilla para entender la estructura de tabla en HTML. En nuestra prueba se compone únicamente de una línea y dos columnas:

Al mostrar la vista preliminar en el explorador, pronto se detecta que la tabla no se muestra como debería, pues ni se distinguen las dos columnas ni se reconoce siquiera si se trata de una tabla. La explicación es más sencilla de lo que parece y es que, por defecto, las celdas de HTML no tienen borde. Esta característica tan propia de las tablas se marca ampliando la etiqueta <table> con el atributo border y la variable 1, como en nuestro ejemplo:

Abre ahora tu documento HTML en tu navegador y observa la tabla resultante.

Nota: HTML5 ya no soporta el atributo border, una función que ha asumido CSS.

A pesar de su sencillo formato, HTML también permite destacar los títulos de las columnas. Para ello se ha de marcar la fila correspondiente con la etiqueta <thead> (table head) y marcar las celdas como <th>. Con este código de abajo diseñas una tabla con cuatro filas, tres columnas y títulos:

A continuación realiza la tabla siguiente: