Ejercicio guiado: helloWorld Part I-Ex 20191029

Descripción del programa: un botón que inserta las palabras Hello world o Goodbye en un campo de
texto y cambia el color de fondo de los campos
Objetivos del ejercicio:
Practicar y ganar control en el entorno de desarrollo
Conocer y usar la ventana Inspector
Importar objetos e imágenes desde fuera en LiveCode

Paso uno: creación de un archivo nuevo

Creación de un archivo nuevo y definición de sus propiedades

Crear un archivo nuevo

En el menú File>New Stack, crea un archivo
nuevo de programa
Selecciona la opción iPhone 5

Abrir la ventana de propiedades del archivo

Desde el menú Object>Stack Inspector, abre
la ventana de propiedades, Inspector, del
archivo que acabas de crear
Asegúrate de no confundirte y seleccionar la
opción Card Inspector que está justo encima

Cambiar la visualización de la ventana de

propiedades, Inspector
En la ventana de propiedades, Inspector, del
archivo que creaste, haz clic en el icono del
engranaje para cambiar los ajustes de
visualización de la ventana de propiedades

Continúa en la siguiente página

Página 1 de 8

‫ כל הזכויות שמורות למרכז לפיתוח מנהיגות טכנולוגית מבית‬eTeacher 2016 ©

©2017 tekkieuni.com por eTeacher Ltd. Todos los derechos reservados
Página 1 de 8
 En la ventana que se abre, selecciona la
opción Tab Display Style>Labels

Nombrar al archivo
Desde la ventana de propiedades del archivo,
Inspector, cambia el nombre del archivo a
helloWorld, como en el ejemplo de la derecha
Presiona la tecla Enter en el teclado para
completar el cambio de nombre

Bloquear el tamaño del archivo para evitar

futuras modificaciones
Ayudándote de las flechas en el menú de la
ventana de propiedades, selecciona el menú
Position
8.1. Desmarca la opción Resizable
Asegúrate de que el tamaño del archivo que
definiste es el siguiente:
9.1. Width: 320
9.2. Height: 568
El resultado debe parecerse al ejemplo de la
derecha

Continúa en la siguiente página

Página 2 de 8

‫ כל הזכויות שמורות למרכז לפיתוח מנהיגות טכנולוגית מבית‬eTeacher 2016 ©

©2017 tekkieuni.com por eTeacher Ltd. Todos los derechos reservados
Página 2 de 8
 Guardar el archivo por primera vez
Desde el menú File>Save, abre la ventana de
guardado
En la ventana de guardado que se abre, busca la
carpeta en la que deseas guardar el archivo
Haz clic en Guardar para completar el guardado
del archivo
Importante: guarda el archivo en algún lugar donde
puedas encontrarlo más tarde

Paso dos: adición de objetos al mundo y definición de sus propiedades

Añadir un objeto de tipo Field
Desde la caja de herramientas (Tools), arrastra un
objeto de tipo Field a la ventana del programa
El resultado debe parecerse al ejemplo de la derecha

Definir un nombre para el objeto de campo de

texto
Selecciona el nuevo campo de texto (haz clic
sobre él con el ratón)
Desde el menú Object>Object Inspector abre la
ventana de propiedades, Inspector, del campo de
texto nuevo
El resultado debe parecerse al ejemplo de la derecha

Desde el Inspector del campo de texto, cambia el

nombre del campo a myTextField
El resultado debe parecerse al ejemplo de la derecha

¡Excelente momento para guardar el proyecto!

Continúa en la siguiente página

Página 3 de 8

‫ כל הזכויות שמורות למרכז לפיתוח מנהיגות טכנולוגית מבית‬eTeacher 2016 ©

©2017 tekkieuni.com por eTeacher Ltd. Todos los derechos reservados
Página 3 de 8
 Definir las propiedades del campo de texto
field "myTextField"
Ayudándote de las flechas en el menú de la
ventana de propiedades, selecciona el menú Text
Define las siguientes propiedades de
field "myTextField":
18.1. Text size: 24
18.2. Text style: B
18.3. Text align: center
18.4. Margins: 25
El resultado debe parecerse al ejemplo de la derecha

Definir las propiedades de tamaño y ubicación del

campo de texto field "myTextField"
Ayudándote de las flechas en el menú de la
ventana de propiedades, selecciona el menú
Position
Define las siguientes propiedades de
field "myTextField":
20.1. Width: 190
20.2. Height: 80
Coloca el objeto field "myTextField" como aparece
en el ejemplo de la derecha
El resultado debe parecerse al ejemplo de la derecha

¡Excelente momento para guardar el proyecto!

Continúa en la siguiente página

Página 4 de 8

‫ כל הזכויות שמורות למרכז לפיתוח מנהיגות טכנולוגית מבית‬eTeacher 2016 ©

©2017 tekkieuni.com por eTeacher Ltd. Todos los derechos reservados
Página 4 de 8
 Añadir un objeto Standard Button
Desde la caja de herramientas, Tools, arrastra un
botón de tipo Standard Button a la ventana del
programa
El resultado debe parecerse al ejemplo de la derecha

Nombrar el botón nuevo

Selecciona el botón nuevo (haz clic con el ratón
sobre él)
Desde el menú Object>Object Inspector abre la
ventana de propiedades, Inspector, del botón
nuevo
Desde el Inspector del botón, cambia el nombre
del botón a myButton
Fíjate en el título del Inspector y asegúrate de que
cambias el nombre del objeto correspondiente
El resultado debe parecerse al ejemplo de la derecha

¡Excelente momento para guardar el proyecto!

Continúa en la siguiente página

Página 5 de 8

‫ כל הזכויות שמורות למרכז לפיתוח מנהיגות טכנולוגית מבית‬eTeacher 2016 ©

©2017 tekkieuni.com por eTeacher Ltd. Todos los derechos reservados
Página 5 de 8
 Descarga de la carpeta de imágenes

Haz clic sobre el enlace de descarga de la carpeta

Images en tu computadora
En la ventana del buscador que se abre, haz clic sobre la
opción Download
Selecciona la opción Direct download

Busca la carpeta que se descargó en la computadora en

la opción que aparece en la parte inferior de la pantalla (a
la derecha o a la izquierda, depende de tu computadora)
Atención: la carpeta que se descargó en la computadora es
un archivo comprimido, así que tienes que extraerlo

Apple: extraer la carpeta de imágenes

Haz un clic doble en la carpeta que se descargó en tu
computadora
Al hacer un clic doble, se extraerá automáticamente la
carpeta
Ve a la sección 37 para seguir trabajando en el ejercicio

Windows: extraer la carpeta de imágenes

Haz clic en la pequeña flecha que aparece al lado de la
carpeta que se descargó en tu computadora

En la ventana que se abre, selecciona la opción

Mostrar en carpeta o Show in folder
Comprueba el nombre de la carpeta. Es probable que la
carpeta de imágenes esté en la carpeta Descargas o
Downloads

En la carpeta que se abre, coloca el cursor del ratón

sobre la carpeta Images y haz un clic derecho encima
En el menú que se abre, selecciona la opción Extaer todo
o Extract All

Continúa en la siguiente página

Página 6 de 8

‫ כל הזכויות שמורות למרכז לפיתוח מנהיגות טכנולוגית מבית‬eTeacher 2016 ©

©2017 tekkieuni.com por eTeacher Ltd. Todos los derechos reservados
Página 6 de 8
 En la ventana que se abre, selecciona la opción
Extraer o Extract

Atención: la carpeta que descomprimiste se

encuentra en el mismo lugar que la carpeta que
descargaste del ámbito de enseñanza

Continúa en la siguiente página

Página 7 de 8

‫ כל הזכויות שמורות למרכז לפיתוח מנהיגות טכנולוגית מבית‬eTeacher 2016 ©

©2017 tekkieuni.com por eTeacher Ltd. Todos los derechos reservados
Página 7 de 8
 Adición de una imagen de fondo

Añadir una imagen de fondo al programa

Desde el menú
File>Import As Control>Image File, abre la
ventana de selección de imágenes
Desde esta ventana, busca la carpeta Images
que acabas de extraer
Selecciona una de las imágenes de la carpeta
Images e impórtala dentro del archivo (para
ello, haz doble clic sobre la imagen que
selecciones)

Definir el tamaño y la posición de la imagen de

fondo
Haz un clic derecho en la imagen y seleccione
la opción Property Inspector
Ayudándote de las flechas en el menú de la
ventana de propiedades, selecciona el menú
Position
Define las siguientes propiedades para la
imagen que elegiste:
42.1. Bloquear el tamaño y posición de la foto
marcando la opción Lock size and position
42.2. Width: 320
42.3. Height: 568
42.4. x coordinate: 160
42.5. y coordinate: 284
42.6. Layer: 1
El resultado debe parecerse al ejemplo de la
derecha

¡Excelente momento para guardar el proyecto!

Avanzado
Explora el Inspector del botón button "myButton" y trata de cambiar el diseño de su formato
Explora el Inspector de la zona de texto field “myTextField” y trata de cambiar el diseño de texto

Página 8 de 8

‫ כל הזכויות שמורות למרכז לפיתוח מנהיגות טכנולוגית מבית‬eTeacher 2016 ©

©2017 tekkieuni.com por eTeacher Ltd. Todos los derechos reservados
Página 8 de 8