Diferencia entre revisiones de «Usuario:ManuelRomero/preferencias/moviles/AppInventor/DescripcionEntorno»

De WikiEducator
Saltar a: navegación, buscar
(Block Editor)
(Tipos de comportamiento)
 
(2 revisiones intermedias por el mismo usuario no mostrado)
Línea 66: Línea 66:
 
*en este entorno tengo dos secciones
 
*en este entorno tengo dos secciones
 
[[Imagen:editorBloquesGeneral.png|900px]]
 
[[Imagen:editorBloquesGeneral.png|900px]]
 +
===Seccion 1===
 +
*En ella podemos seleccinar un comportamiento o acción para nuestra aplicación
 +
*Los tenemos en tres grupos
 +
[[imagen:built-in.png]]
 +
;Bluit-in
 +
*Constituyen las instrucciones de nuestro lenguaje de programación
 +
*En un lenguaje de programación podemos:
 +
#Definir variables y procedimientos o funciones
 +
#Realizar asignaciones
 +
#Especificas instrucciones de control
 +
#Hay expresiones,
 +
#Puedo realizar operaciones sobre las variables o valores (matemáticas de cadenas de caracteres,...)
 +
*Todo ello se especificará en mi programa cogiendo bloques de esta sección
 +
===Built-in Definiciones===
 +
[[image:Built_in_definiciones.png]]
 +
*Sirven para definir variables, parametros, funciones y procedimientos
 +
===Built-in Texto===
 +
[[image:Built_in_text.png]]
 +
Trabajar con cadenas de caracteres
 +
===Built-in listas o vectores===
 +
[[image:Built_in_listas.png]]
 +
Permiten trabajar con arrais o vectores o listas de elementos
 +
===Built-in Matemáticas===
 +
[[image:Built_in_matematicas.png]]
 +
Trabajar con valores numéricos
 +
===Built-in Lógicas===
 +
[[image:Built_in_logicas.png]]
 +
*Operaciones lógicas o booleanas y sus  correspondientes valores
 +
===Built-in Estructuras de Control=-==
 +
[[image:Built_in_control.png]]
 +
*Estructuras de control
 +
**selectiva
 +
**Repetitiva
 +
**Secuencial u órdenes
 +
===Built-in Colores===
 +
[[image:Built_in_colores.png]]
 +
==My Block==
 +
*Aquí tendremos un elemento por cada componente que tengamos definido en el diseño
 +
*Al menos siempre habrá uno que es el '''''screen1''''' expuesto anteriormente
 +
*También tendremos un elemento correspondiente a las definiciones (variables / acciones) que definamos
 +
[[imagen:myBlock.png]]
 +
===Tipos de comportamiento===
 +
#Eventos
 +
#Leer propiedades
 +
#Escribir o establecer valor de propiedades
 +
#Llamar a un procedimiento
 +
 +
;Eventos
 +
Los eventos son bloques de tipo when
 +
*Pueden recibir parámetros
 +
**Por ejemplo el evento touched (tocar con el dedo) recibe como parámetro la posición x y donde hemos tocado
 +
*Puede dar o retornar valores que se ven como parámetros
 +
**El mismo evento retorno un booleano que diche si donde hemos tocado había un sprite o muñequito
 +
[[Imagen:EventosAppInventor.png]]
 +
*El componente Screen1 tiene un evento importante que es cuando se inicia la aplicación '''''initial'''''
 +
[[Imagen:EventoScreenInitial.png]]
 +
 +
;Leer propiedades
 +
[[Imagen:PropiedadesBlockApp.png]]
 +
;Escribir o establecer valor de propiedades
 +
[[Imagen:SetPropiedadesBlockApp.png]]
 +
;Llamar a un procedimiento
 +
[[imagen:CallProceduraApp.png]]

Última revisión de 14:19 15 may 2013

Road Works.svg Trabajo en proceso, espera cambios frecuentes. Tu ayuda y retroalimentación son bienvenidos.
Ver página de charlas.
Road Works.svg




Elementos en el entorno

  • Para construir aplicaciones trabajamos tres componentes:
  1. dos ventanas
  2. terminal (bien dispositivo móvil conectado o bien un emulador)
Ventanas de nuestro entorno
  • 'App Inventor Designer' o ventana de diseño de componentes
  • 'App Inventor Block Editor' o descriptor del comportamiento de los componentes

App Inventor Designer

  • Se abre accediento al url de MIT http://beta.appinventor.edu.mit
  • Al abrir debemos estar conectados y se abrirán todas las aplicaciones que hayamos desarrollado
  • Al abrir la ventana vemos 4 secciones según se puede ver en la imagen

Entorno.png RTENOTITLE

App Inventor Designer

  • La Sección de Palette contiene los componentes que a continuación describiremos
  • Con ellos diseñaremos la aplicación
  • Se agrupan por bloques con relación funcional
  • Justo encima de ella aparece el nombre del proyecto en el que estemos trabajando

RTENOTITLE

  • Cada componente tiene
    • Metodos
    • Responder o provocar eventos
    • Propiedades
  • Algunos de ellos son modificables en tiempo de ejecución, otros no (Pero podrían ser leídos sus valores)

RTENOTITLE

  • Analizaremos cada grupo de componentes de forma individual

App Inventor Designer

  • La sección de Viewer o visor gráfico de los componentes de la aplicación que estamos desarrollando
  • Se ve como va a quedar en el teléfono.
  • Si tenemos el teléfono conectado lo iremos viendo también en el móvil
  • En la parte superior tenemos diferentes opciones típicas de un editor (guardar....)

RTENOTITLE

Componentes

  • Aquí aparecerán los componentes que haya seleccionado para mi aplicación
  • Todas las aplicaciones tendrán al menos un componente padre donde se ubicarán el resto
  • Al crear un nuevo proyecto aparece dicho componente Screen1
  • Dicho componente no se puede ni borrar ni cambiar el nombre
  • Tampoco se puede agregar más, y representa la pantalla del dispositivo móvil

ComponenteScreen.png

Propiedades

  • Los objetos tienen propiedades
  • Muchas de ellas son configurables en tiempo de diseño
  • Posteriormente en tiempo de ejecución las puedo leer y algunas modificar
  • Las propiedades que aparecen siempre son del componente seleccionado

PropiedadesComponentesAppInventor.png

Block Editor

  • En esta parte del entorno especificaremos el comportamiento de los componentes
  • Cada vez que añadimos un componente dicho componente me aparecerá en el editor de bloques
  • en este entorno tengo dos secciones

EditorBloquesGeneral.png

Seccion 1

  • En ella podemos seleccinar un comportamiento o acción para nuestra aplicación
  • Los tenemos en tres grupos

Built-in.png

Bluit-in
  • Constituyen las instrucciones de nuestro lenguaje de programación
  • En un lenguaje de programación podemos:
  1. Definir variables y procedimientos o funciones
  2. Realizar asignaciones
  3. Especificas instrucciones de control
  4. Hay expresiones,
  5. Puedo realizar operaciones sobre las variables o valores (matemáticas de cadenas de caracteres,...)
  • Todo ello se especificará en mi programa cogiendo bloques de esta sección

Built-in Definiciones

Built in definiciones.png

  • Sirven para definir variables, parametros, funciones y procedimientos

Built-in Texto

Built in text.png Trabajar con cadenas de caracteres

Built-in listas o vectores

Built in listas.png Permiten trabajar con arrais o vectores o listas de elementos

Built-in Matemáticas

Built in matematicas.png Trabajar con valores numéricos

Built-in Lógicas

Built in logicas.png

  • Operaciones lógicas o booleanas y sus correspondientes valores

=Built-in Estructuras de Control=-

Built in control.png

  • Estructuras de control
    • selectiva
    • Repetitiva
    • Secuencial u órdenes

Built-in Colores

Built in colores.png

My Block

  • Aquí tendremos un elemento por cada componente que tengamos definido en el diseño
  • Al menos siempre habrá uno que es el screen1 expuesto anteriormente
  • También tendremos un elemento correspondiente a las definiciones (variables / acciones) que definamos

Archivo:MyBlock.png

Tipos de comportamiento

  1. Eventos
  2. Leer propiedades
  3. Escribir o establecer valor de propiedades
  4. Llamar a un procedimiento
Eventos

Los eventos son bloques de tipo when

  • Pueden recibir parámetros
    • Por ejemplo el evento touched (tocar con el dedo) recibe como parámetro la posición x y donde hemos tocado
  • Puede dar o retornar valores que se ven como parámetros
    • El mismo evento retorno un booleano que diche si donde hemos tocado había un sprite o muñequito

EventosAppInventor.png

  • El componente Screen1 tiene un evento importante que es cuando se inicia la aplicación initial

EventoScreenInitial.png

Leer propiedades

PropiedadesBlockApp.png

Escribir o establecer valor de propiedades

Archivo:SetPropiedadesBlockApp.png

Llamar a un procedimiento

CallProceduraApp.png