Maestría en Interfaces Móviles

Principles of Computer Science (Mobile App)

Docente: Mr. Norman Trujillo

Guía de Autoestudio

Estudiante:

Fecha:

Configuración inicial en CodeHS

Para todos los proyectos de esta unidad, utilizaremos la estructura base que proporciona el emulador de CodeHS. Es fundamental importar siempre AppRegistry para asegurar el correcto registro de la aplicación.

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.paragraph}>
                    Cambia el código en el editor y observa los cambios.
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
    },
    paragraph: {
        margin: 24,
        fontSize: 18,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#34495e',
    },
});

AppRegistry.registerComponent('App', () => App);

1. El componente Image

El componente Image se utiliza para mostrar imágenes estáticas o dinámicas. Para que una imagen se visualice correctamente, se debe definir obligatoriamente su altura y anchura en el objeto de estilos.

Puntos clave:

La propiedad source recibe un objeto con la clave uri.
Sin el atributo height, la imagen tendrá una altura de 0 y no será visible.
Formatos soportados comunes: .png, .jpg y .gif.

Ejemplo 1.1: Imágenes múltiples

<View style={styles.container}>
  <Image
    source={{ uri: 'https://img.freepik.com/free-vector/bird-colorful-gradient-design-vector_343694-2506.jpg' }}
    style={{ height: 150, width: 150 }}
  />
  <Image
    source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/LEGO_logo.svg/768px-LEGO_logo.svg.png' }}
    style={{ height: 150, width: 150 }}
  />
</View>

Espacio para notas sobre el renderizado de imágenes

2. Fondo e Interactividad

ImageBackground

A diferencia del componente de imagen estándar, este permite anidar otros componentes (como Text o View) en su interior, sirviendo como una capa de fondo.

TouchableHighlight

Es un envoltorio que hace que cualquier componente responda a toques. Al presionarlo, el fondo del componente cambia de color según el underlayColor definido.

Ejemplo 2.1: Botón de imagen interactivo

<TouchableHighlight
  onPress={() => alert('¡Karel dice Guau Guau!')}
  underlayColor="#DDDDDD"
  activeOpacity={0.6}
>
  <Image
    source={{ uri: 'https://static.codehs.com/img/courses/introkarel/1.png' }}
    style={{ height: 200, width: 200 }}
  />
</TouchableHighlight>

Actividad: Snapchat Login

Modifica tu proyecto previo para incluir el logo del fantasma. El contenedor principal debe tener un fondo amarillo y los botones deben usar TouchableHighlight para mostrar una alerta al ser presionados.

URI fantasma: https://codehs.com/uploads/c799accde67e1fd3bbd699119b4e1c83

3. Layouts y Diseño Responsivo

Para que nuestras interfaces se adapten a diferentes tamaños de pantalla, combinamos el uso de proporciones Flex con el objeto Dimensions.

El objeto Dimensions

Permite obtener el ancho y alto real de la ventana del dispositivo en píxeles. Se importa desde react-native.

let deviceHeight = Dimensions.get('window').height;
let deviceWidth = Dimensions.get('window').width;

Proporciones Flex

El valor de flex indica cuántas partes del espacio disponible toma un elemento en relación con sus hermanos.

Flex: 1

Flex: 2

En este ejemplo, la segunda caja ocupa 2/3 del espacio total.

4. Desafíos de Integración

Proyecto: Reproductor de Música

Crea una interfaz que incluya la portada del álbum (275x275), el nombre de la canción, el artista y una fila de controles de reproducción.

Rewind: ...de00e9c8530c...

Pause: ...ef5b99b661f0...

Proyecto: Banderas Nacionales

Utiliza contenedores anidados para replicar una bandera compleja (como la de Suecia o Sierra Leona) asegurando que ocupe toda la pantalla del emulador.

Tip: Usa flexDirection: 'row' para elementos alineados horizontalmente.

Proyecto Final: Scorekeeper Pro

Integra imágenes de fondo para el estadio, botones interactivos para sumar puntos y un diseño responsivo que use deviceHeight para escalar las fuentes automáticamente.

Bitácora de Desarrollo

¿Cuál fue el mayor reto al trabajar con Flex y Dimensions?

Dibuja un diagrama simple de cómo anidaste tus contenedores View para la bandera:

Maestría en Interfaces Móviles Guía de Autoestudio

Maestría en Interfaces Móviles Guía de Autoestudio

Similar Materials

Canopy Crusaders Teacher Guide

MaryAnn Mehler

Deforestation Dilemma Activity

MaryAnn Mehler

Carbon Sponge Activity

MaryAnn Mehler

Green Cathedral Activity

MaryAnn Mehler

Solubility Showdown Teacher Guide

Raino Bhatti

Solubility Showdown Stations

Raino Bhatti

Solubility Showdown Slides

Raino Bhatti

Power Surge Teacher Guide

Christin Anderson

Power Surge Worksheet

Christin Anderson

Power Surge Slides

Christin Anderson

Bio Graphing Stations Answer Key

MELANIE.ROBERTS

Bio Graphing Station Activity Cards

MELANIE.ROBERTS

Pocket Mouse Teacher Guide

Carissa Fenner

Pocket Mouse Lab Notebook

Carissa Fenner

Pocket Mouse Station Cards

Carissa Fenner

Bio Graphing Answer Key Guide B

MELANIE.ROBERTS

Bio Graphing Masters Practice Packet B

MELANIE.ROBERTS

Bio Graphing Answer Key Guide

MELANIE.ROBERTS

Bio Graphing Masters Worksheet Packet

MELANIE.ROBERTS

Chemistry Conqueror Teacher Guide

Victoria Bunzick

Chemistry Conqueror Reference Sheet

Victoria Bunzick

Chemistry Conqueror Study Guide

Victoria Bunzick

Canopy Chemistry Teacher Guide

Canopy Chemistry Worksheet

Evaluation Correction Guide

Biologie Végétale Évaluation

Adaptation Végétale Diaporama

Multiplication Horticole Fiche TP

Cycle Vie Diaporama

Moteur Solaire Fiche Activité

Moteur Solaire Diaporama

Architecture Végétale Fiche Activité

Architecture Végétale Diaporama

Syntropie Flash Exercices

Prévost Soazic

Syntropie Flash Fiche

Prévost Soazic

Expedition Teacher Tour Guide

kankelj

Expedition Slides Template

kankelj

Expedition Student Guide Rubric

kankelj

Life Balance Teacher Guide

MELANIE.ROBERTS

Life Balance Quiz

MELANIE.ROBERTS

Life Balance Exit Tickets

MELANIE.ROBERTS

Life Balance Bellringers

MELANIE.ROBERTS

Feedback Loops Teacher Key

MELANIE.ROBERTS

Feedback Loops Practice Worksheet

MELANIE.ROBERTS