Programación

en Java
GUÍA DE APRENDIZAJE
MÓDULO IV: APLICACIONES WEB Y MÓVILES

DATOS DEL ALUMNO

Nombre:

Plantel:

Grupo: Turno: Teléfono:

Sexto Semestre FEBRERO DE 2023

Marina del Pilar Ávila Olmeda
GOBERNADORA DEL ESTADO DE BAJA CALIFORNIA
Gerardo Arturo Solís Benavides
SECRETARIO DE EDUCACIÓN DEL ESTADO DE BAJA CALIFORNIA
Álvaro Mayoral Miranda
SUBSECRETARIO DE EDUCACIÓN MEDIA SUPERIOR, SUPERIOR E INVESTIGACIÓN
Juan Eugenio Carpio Ascencio
DIRECTOR GENERAL DEL CBBC
Omar Mayoral Sarmiento
DIRECTOR DE PLANEACIÓN ACADÉMICA DEL CBBC

PROGRAMACIÓN EN JAVA (MEPEO)

Módulo IV: Aplicaciones web y móviles
Edición, febrero de 2020

Diseñado por:
José Gumercindo Velázquez Mejía
América Galindo García
Cristel Escalante Gutiérrez

Reimpresión, febrero de 2022

Revisado por:
Elsa Miriam Orduño Rodríguez

Reimpresión, febrero de 2023

En la revisión del presente material, participaron:

JEFE DEL DEPARTAMENTO DE ACTIVIDADES EDUCATIVAS

Javier Humberto Yescas Parra

PROGRAMA DE DESARROLLO EDUCATIVO

Diana Castillo Ceceña
Gabriela Valdez Anaya
Alma Rosalía López Valdez

La presente edición es propiedad del

Colegio de Bachilleres del Estado de Baja California
Prohibida la reproducción total o parcial de esta obra

Este material fue elaborado bajo la coordinación y supervisión de la

Dirección de Planeación Académica del Colegio de Bachilleres del Estado de Baja California
Blvd. Anáhuac #936, Centro Cívico, Mexicali, B.C., México
www.cobachbc.edu.mx
Índice

Presentación

Competencias Genéricas

Competencias Profesionales Básicas

Enfoque de la Capacitación

Propósito del Módulo

Ubicación de la Capacitación

Mapa de la Capacitación

SUBMÓDULO 1 INTRODUCCIÓN A APLICACIONES WEB 12

SUBMÓDULO 2 ELABORA APLICACIONES MÓVILES 40

REFERENCIAS 71
Presentación
Con la puesta en marcha del Modelo Educativo para la Educación Obligatoria (MEPEO) (SEP,
2017), se realizó una reestructuración de los programas de estudio de primero a sexto
semestre por lo que fue necesario realizar una adecuación de los materiales didácticos de
apoyo para los estudiantes y docentes.

Es importante mencionar que el MEPEO, no significa un cambio total de los manifiestos y

preceptos educativos que caracterizaron la Reforma Integral de la Educación Media Superior
(RIEMS); sino que significa: fortalecimiento, articulación, organización y concreción de
aspectos educativos y pedagógicos, tal como se manifiesta en los siguientes párrafos:

“El Modelo educativo 2016 reorganiza los principales componentes del sistema
educativo nacional para que los estudiantes logren los aprendizajes que el siglo XXI
exige y puedan formarse integralmente... En este sentido, el planteamiento pedagógico
-es decir, la organización y los procesos que tienen lugar en la escuela, las prácticas
pedagógicas en el aula y el currículum- constituyen el corazón del modelo”.

“...El cambio que se plantea está orientado a fortalecer el sentido y el significado

de lo que se aprende. Se propone ensanchar y hacer más sólidos el entendimiento
y la comprensión de los principios fundamentales, así como de las relaciones que los
contenidos generan entre sí. La memorización de hechos, conceptos o procedimientos
es insuficiente y hoy ocupa demasiado espacio en la enseñanza. El desarrollo de las
capacidades de pensamiento crítico, análisis, razonamiento lógico y argumentación
son indispensables para un aprendizaje profundo que permita trasladarlo a diversas
situaciones para resolver nuevos problemas. Los aprendizajes adquieren sentido
cuando verdaderamente contribuyen al pleno desarrollo personal y de los individuos”.
(SEP, 2016: 15-18).

En este sentido, todas las Guías de Actividades del Alumno para el Desarrollo de
Competencias de las diferentes asignaturas de los Componentes de Formación
Básica y Propedéutica así como de las Guías de Aprendizaje de los distintos módulos
del Componente de Formación para el Trabajo, fueron adecuadas a los lineamientos
pedagógicos antes citados y a los nuevos programas de estudio emanados del MEPEO.

Conscientes de la dificultad para que el alumnado tenga acceso a una bibliografía adecuada
pertinente y eficaz con el entorno socioeconómico actual, el CBBC brinda la oportunidad a los
estudiantes de contar con materiales didácticos para el óptimo desarrollo de los programas de
estudio de las asignaturas que comprende el Plan de Estudios Vigente. Cabe subrayar que,
dichos materiales son producto de la participación de docentes de la Institución, en los cuales
han manifestado su experiencia, conocimientos y compromiso en pro de la formación de los
jóvenes bachilleres.

Es necesario, hacer énfasis que la guía no debe ser tomada como la única herramienta de
trabajo y fuente de investigación, ya que es imprescindible que los estudiantes lleven a cabo
un trabajo de consulta e investigación en otras fuentes bibliográficas impresas y electrónicas,
material audiovisual, páginas Web, bases de datos, entre otros recursos didácticos que
apoyen su formación y aprendizaje.
COMPETENCIAS GENÉRICAS
SE AUTODETERMINA Y CUIDA DE SÍ
1. Se conoce y valora a sí mismo y aborda problemas y retos teniendo en cuenta los objetivos que persigue.

CG1.1 Enfrenta las dificultades que se le presentan y es consciente de sus valores, fortalezas y debilidades.
CG1.2 Identifica sus emociones, las maneja de manera constructiva y reconoce la necesidad de solicitar apoyo ante
una situación que lo rebase.
CG1.3 Elige alternativas y cursos de acción con base en criterios sustentados y en el marco de un proyecto de vida.
CG1.4 Analiza críticamente los factores que influyen en su toma de decisiones.
CG1.5 Asume las consecuencias de sus comportamientos y decisiones.
CG1.6 Administra los recursos disponibles teniendo en cuenta las restricciones para el logro de sus metas.

2. Es sensible al arte y participa en la apreciación e interpretación de sus expresiones en distintos géneros.

CG2.1 Valora el arte como manifestación de la belleza y expresión de ideas, sensaciones y emociones.
CG2.2 Experimenta el arte como un hecho histórico compartido que permite la comunicación entre individuos y cultu-
ras en el tiempo y el espacio, a la vez que desarrolla un sentido de identidad.
CG2.3 Participa en prácticas relacionadas con el arte.

3. Elige y practica estilos de vida saludables.

CG3.1 Reconoce la actividad física como un medio para su desarrollo físico, mental y social.
CG3.2 Toma decisiones a partir de la valoración de las consecuencias de distintos hábitos de consumo y conductas
de riesgo.
CG3.3 Cultiva relaciones interpersonales que contribuyen a su desarrollo humano y el de quienes lo rodean.

SE EXPRESA Y COMUNICA
4. Escucha, interpreta y emite mensajes pertinentes en distintos contextos mediante la utilización de medios,
códigos y herramientas apropiados.

CG4.1 Expresa ideas y conceptos mediante representaciones lingüísticas, matemáticas o gráficas.

CG4.2 Aplica distintas estrategias comunicativas según quienes sean sus interlocutores, el contexto en el que se
encuentra y los objetivos que persigue.
CG4.3 Identifica las ideas clave en un texto o discurso oral e infiere conclusiones a partir de ellas.
CG4.4 Se comunica en una segunda lengua en situaciones cotidianas.
CG4.5 Maneja las tecnologías de la información y la comunicación para obtener información y expresar ideas.

PIENSA CRÍTICA Y REFLEXIVAMENTE

5. Desarrolla innovaciones y propone soluciones a problemas a partir de métodos establecidos.

CG5.1 Sigue instrucciones y procedimientos de manera reflexiva, comprendiendo como cada uno de sus pasos con-
tribuye al alcance de un objetivo.
CG5.2 Ordena información de acuerdo a categorías, jerarquías y relaciones.
CG5.3 Identifica los sistemas y reglas o principios medulares que subyacen a una serie de fenómenos.
CG5.4 Construye hipótesis y diseña y aplica modelos para probar su validez.
CG5.5 Sintetiza evidencias obtenidas mediante la experimentación para producir conclusiones y formular nuevas
preguntas.
CG5.6 Utiliza las tecnologías de la información y comunicación para procesar e interpretar información.
6. Sustenta una postura personal sobre temas de interés y relevancia general, considerando otros puntos de vista
de manera crítica y reflexiva.

CG6.1 Elige las fuentes de información más relevantes para un propósito específico y discrimina entre ellas de
acuerdo a su relevancia y confiabilidad.
CG6.2 Evalúa argumentos y opiniones e identifica prejuicios y falacias.
CG6.3 Reconoce los propios prejuicios, modifica sus puntos de vista al conocer nuevas evidencias, e integra
nuevos conocimientos y perspectivas al acervo con el que cuenta.
CG6.4 Estructura ideas y argumentos de manera clara, coherente y sintética.

APRENDE DE FORMA AUTÓNOMA

7. Aprende por iniciativa e interés propio a lo largo de la vida.

CG7.1 Define metas y da seguimiento a sus procesos de construcción de conocimiento.

CG7.2 Identifica las actividades que le resultan de menor y mayor interés y dificultad, reconociendo y controlando sus
reacciones frente a retos y obstáculos.
CG7.3 Articula saberes de diversos campos y establece relaciones entre ellos y su vida cotidiana.

TRABAJA EN FORMA COLABORATIVA

8. Participa y colabora de manera efectiva en equipos diversos.

CG8.1 Propone maneras de solucionar un problema o desarrollar un proyecto en equipo, definiendo un curso de
acción con pasos específicos.
CG8.2 Aporta puntos de vista con apertura y considera los de otras personas de manera reflexiva.
CG8.3 Asume una actitud constructiva, congruente con los conocimientos y habilidades con los que cuenta dentro
de distintos equipos de trabajo.

PARTICIPA CON RESPONSABILIDAD EN LA SOCIEDAD

9. Participa con una conciencia cívica y Ética en la vida de su comunidad, región, México y el mundo.

CG9.1 Privilegia el diálogo como mecanismo para la solución de conflictos.

CG9.2 Toma decisiones a fin de contribuir a la equidad, bienestar y desarrollo democrático de la sociedad.
CG9.3 Conoce sus derechos y obligaciones como mexicano y miembro de distintas comunidades e instituciones, y
reconoce el valor de la participación como herramienta para ejercerlos.
CG9.4 Contribuye a alcanzar un equilibrio entre el interés y bienestar individual y el interés general de la sociedad.
CG9.5 Actúa de manera propositiva frente a fenómenos de la sociedad y se mantiene informado.
Advierte que los fenómenos que se desarrollan en los ámbitos local, nacional e internacional ocurren dentro
CG9.6
de un contexto global interdependiente.

10. Mantiene una actitud respetuosa hacia la interculturalidad y la diversidad de creencias, valores, ideas y
prácticas sociales.

CG10.1 Reconoce que la diversidad tiene lugar en un espacio democrático de igualdad de dignidad y derechos de
todas las personas, y rechaza toda forma de discriminación.
CG10.2 Dialoga y aprende de personas con distintos puntos de vista y tradiciones culturales mediante la ubicación
de sus propias circunstancias en un contexto más amplio.
CG10.3 Asume que el respeto de las diferencias es el principio de integración y convivencia en los contextos local,
nacional e internacional.

11. Contribuye al desarrollo sustentable de manera crítica, con acciones responsables.

CG11.1 Asume una actitud que favorece la solución de problemas ambientales en los ámbitos local, nacional e
internacional.
CG11.2 Reconoce y comprende las implicaciones biológicas, económicas, políticas y sociales del daño ambiental en
un contexto global interdependiente.
CG11.3 Contribuye al alcance de un equilibrio entre los intereses de corto y largo plazo con relación al ambiente.
COMPETENCIAS PROFESIONALES BÁSICAS

Construye los conceptos básicos de la programación con una actitud investigadora,

CPBP1. de acuerdo a las necesidades del entorno, con una postura ética y responsable
como ciudadano digital.
Implementa sistemas básicos de programación de forma creativa y emprendedora,
CPBP2.
de manera ética y responsable.
Analiza, diseña y construye base de datos, con una actitud colaborativa, de acuerdo
CPBP3. a las necesidades tecnológicas y de calidad para contribuir con el logro de los
objetivos estratégicos.
Desarrolla aplicaciones web para difundir información con un sentido crítico,
CPBP4.
autocrítico y ético.
Integra estructuras de programación, para la implementación de proyectos
CPBP5.
asegurando eficiencia para contribuir en el logro de los objetivos.
 ENFOQUE DE LA CAPACITACIÓN
La capacitación de Programación en Java, pertenece al campo disciplinar de Comunicación, tiene
la finalidad de desarrollar en el estudiantado las habilidades comunicativas verbales y no verbales
para expresarse a través de diversos códigos y herramientas de lenguaje a través de las diferentes
tecnologías de la información. Por otra parte, la programación se vincula de manera interdisciplinar
con los campos de Matemáticas y Comunicación, ya que aportan los elementos para la resolución de
problemas mediante los algoritmos y la programación.

El propósito general de la capacitación de programación en Java, es que el estudiantado desarrolle la

capacidad para proponer soluciones a problemas, mediante el diseño y el desarrollo de proyectos en
programación, en conjunto con las Tecnologías de la Información y la Comunicación, de forma creativa
e innovadora, con una postura ética y responsable como ciudadano digital.

El uso de las Tecnologías de la Información y Comunicación, desde la capacitación de Programación

en Java, destaca el manejo avanzado de las aplicaciones de software y hardware, para la resolución
de problemas de los diferentes ámbitos de la vida cotidiana, desarrollando los aspectos metodológicos,
creativos y comunicativos, mostrando un comportamiento propositivo en beneficio del personal y de la
sociedad.

La capacitación de Programación en Java busca desarrollar en el alumnado las competencias

profesionales en las áreas de aplicaciones, las comunicaciones mediante redes informáticas, el
desarrollo de sistemas y el software de diseño, sin olvidar la promoción de las competencias genéricas,
la interdisciplinariedad y los ejes transversales de vinculación laboral, emprendimiento y la continuación
de sus estudios a nivel superior.

En el contexto curricular de la capacitación de programación en Java, el contenido se divide en cuatro

módulos que se imparten a partir de tercer semestre con una carga de 7 horas semanales, cada módulo
se integra por dos submódulos, en los que se busca desarrollar la lógica y el lenguaje de programación,
la programación utilizando un lenguaje de alto nivel, introducirle a la programación orientada a objetos,
elaborar aplicaciones en consola, obtener fundamentos de bases de datos, elaborar interfaces de
usuarios con conexión a bases de datos, así como el desarrollo de aplicaciones web y móviles.

Todas estas competencias posibilitan al egresado en su incorporación al mundo laboral o bien para
desarrollar procesos productivos independientes de acuerdo a sus intereses profesionales o a las
necesidades de sus entorno social como asistente en las siguientes áreas: Áreas administrativas,
contables o comerciales, centros de cómputo, cibercafés, instituciones educativas, instituciones
financieras, bancos, oficinas públicas y privadas, hoteles, supermercados, cines, restaurantes, talleres
de servicio y reparación de equipo electrónico, sector industrial y de servicios.

La enseñanza de la capacitación de Programación en Java en la formación de trabajo de jóvenes, basada

en las Normas Técnicas de Competencia Laboral (NTCL) del Consejo Nacional de Normalización
y Certificación de Competencias Laborales (CONOCER) se convierte en una necesidad de primer
orden para cumplir con las exigencias de los sectores productivos, de contar con personal calificado
que permita desarrollar las potencialidades de sus organizaciones al promover productos y servicios
tanto en el mercado nacional como en el internacional, además de proporcionar las herramientas
técnicas básicas a los jóvenes egresados del nivel medio superior, que les permite vencer las fronteras
e internarse en el mundo global a través de las Tecnologías de la Información y de la Comunicación
(TIC), además de la utilización de las Tecnologías del Aprendizaje y del Conocimiento (TAC).
 Ubicación de la capacitación

PROPÓSITO DEL MÓDULO

Evalúa las tendencias actuales en el ámbito de programación y reconoce los elementos básicos
para el desarrollo de aplicaciones web y móviles, de forma creativa y con una actitud ética y
responsable.

UBICACIÓN DE LA CAPACITACIÓN

1er. semestre 2do. semestre 3er. semestre 4to. semestre 5to. semestre 6to. semestre

Matemáticas Matemáticas
Matemáticas I Matemáticas II Matemáticas V Filosofía
III IV
Ecología y Medio
Química I Química II Biología I Biología II Geografía
Ambiente
Estructura
Historia Universal
Ética I Ética II Física I Física II Socioeconómica
Contemporánea
de México
Introducción Todas las Todas las
Metodología de Historia de Historia de
a las Ciencias asignaturas que se asignaturas que se
la Investigación México I México II
Sociales imparten en cada imparten en cada
Taller de Taller de plantel de 5to. plantel de 6to.
Lectura y Lectura y Literatura I Literatura II semestre de los semestre de los
Redacción I Redacción II Componentes de Componentes de
Formación Básica Formación Básica
Inglés I Inglés II Inglés III Inglés IV y Propedéutica y Propedéutica

Informática I Informática II CAPACITACIÓN PARA EL TRABAJO EN PROGRAMACIÓN EN JAVA

TUTORÍAS
 MAPA DE LA CAPACITACIÓN
MÓDULO I MÓDULO II MÓDULO III MÓDULO IV
Programación
Introducción a la Aplicaciones Web
Orientada a Bases de Datos
Programación y Móviles
Objetos
SUBMÓDULO

Introducción a Fundamentos de Introducción a

Programación I Programación Bases de Datos Aplicaciones Web
Orientada a Objetos
1

48 horas 64 horas 56 horas

48 horas
SUBMÓDULO

Elabora Interfaces Elabora

Clases y Objetos
Programación II de usuario con Aplicaciones
Conexión a Bases Móviles
2

64 horas
64 horas de Datos
48 horas 56 horas
SUBMÓDULO 1
INTRODUCCIÓN A
APLICACIONES WEB

Competencias Genéricas Competencias Profesionales Básicas

4. Escucha, interpreta y emite mensajes per-
tinentes en distintos contextos mediante la CPBP2. Implementa sistemas básicos de
utilización de medios, códigos y herramientas programación de forma creativa y empren-
apropiados. dedora, de manera ética y responsable.
CG4.1 Expresa ideas y conceptos mediante
representaciones lingüísticas, matemáticas o CPBP4. Desarrolla aplicaciones web para
gráficas. difundir información con un sentido crítico,
CG4.5 Maneja las tecnologías de la autocritico y ético.
información y la comunicación para obtener
información y expresar ideas. CPBP5. Integra estructuras de
programación, para la implementación
5. Desarrolla innovaciones y propone de proyectos asegurando eficiencia para
soluciones a problemas a partir de métodos contribuir en el logro de los objetivos.
establecidos.
CG5.6 Utiliza las Tecnologías de la
Información y Comunicación para procesar e
interpretar información.
 Formación para el Trabajo - Sexto Semestre

SUBMÓDULO
INTRODUCCIÓN A
1 Interdisciplinariedad
APLICACIONES WEB
Ejes Transversales
¾ Emprendimiento.
¾ Álgebra Intermedia II. ¾ Vinculación laboral.
¾ Cálculo Integral. ¾ Iniciar, continuar y concluir sus estudios de
nivel superior.

Aprendizajes esperados
y Comprueba cuándo se necesita desarrollar un sitio web o una aplicación web y las capas que
serán necesarias implementar para cubrir las necesidades del proyecto a realizar, mostrando
un comportamiento propositivo y creativo.

y Aplica distintos lenguajes de programación y entornos de desarrollo, teniendo elementos para

decidir cuándo utilizarlos, favoreciendo su proceso creativo, desempeñándose de una manera
ética y responsable en el ámbito en el que se encuentre.

Conocimientos
Habilidades Actitudes
Básicos
Conceptos básicos. Distingue entre páginas web y Escucha y participa
• HTTP. aplicaciones web. activamente.
• Cliente-Servidor.
• Contenido dinámico y estático. Reconoce los elementos de una Favorece su desarrollo
aplicación web y medidas de creativo.
Capas o arquitectura de una app Web. seguridad básicas.
• BD. Muestra un
• Servidor de aplicaciones. Distingue códigos de distintos comportamiento propositivo
• Cliente. lenguajes utilizados en en beneficio de la
• Aplicación. programación de aplicaciones sociedad/del entorno.
o Acceso a datos. web.
o Lógica de negocio.
o Interfaz de usuario. Utiliza un entorno de desarrollo
o WebServices. para abrir y modificar còdigo
fuente.
Entornos de desarrollo de aplicaciones
Web.

Lenguajes.
• HTML
o CSS.
• JS
• JAVA, PHP, .NET.

Seguridad.
• Autenticación
• HTTPS.

12 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

Actividad Diagnóstica:
Antes de comenzar las actividades de la materia de este semestre, nos gustaría reactivar y ver el
alcance de tu conocimiento sobre algunos temas, por favor ayúdanos respondiendo lo siguiente:

1. ¿Para qué sirve una página web?

__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

2. ¿Cuál es la diferencia entre página web y aplicación web?

__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

3. ¿Qué lenguajes conoces para crear una página web?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

4. ¿Cómo se llama el programa donde se visualiza una aplicación web?

__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

5. Con tus propias palabras y conocimiento, ¿cuáles crees que sean las partes que conforman
una aplicación web?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

SUBMÓDULO 1 13
 Formación para el Trabajo - Sexto Semestre

1. Conceptos básicos

1.1. HTTP

El HTTP (del inglés Hyper Text Transfer Protocol ) es

el protocolo de transmisión de información de la WWW
(World Wide Web), es decir, el código que se establece
para que el computador solicitante y el que contiene la
información solicitada puedan “hablar” un mismo idioma
a la hora de transmitir información por la red. Este
protocolo fue creado en 1999 por la W3C (World Wide
Web Consortium) en colaboración con la IETF (Internet
Engineering TaskForce).

1.2. Modelo Cliente-Servidor (client-server)

El modelo cliente-servidor describe el proceso de interacción entre la computadora local

(el cliente) y la remota (el servidor). El cliente le hace peticiones (requests, solicitudes,
requerimientos) al servidor, este último procesa dicho requerimiento y retorna los resultados
al cliente apropiado. Probablemente si alguna vez buscaste crear una página web,
escuchaste la expresión cliente servidor, la cual se utiliza en el ámbito de la informática.

Con esta arquitectura, las tareas se distribuyen entre el/los servidores (que proveen los
servicios) y los clientes (que demandan dichos servicios). Dicho de otro modo: el cliente le pide
un recurso al servidor, que brinda una respuesta. Este tipo de modelos permite repartir de la
capacidad de procesamiento. El servidor puede ejecutarse sobre más de un equipo y ser más
de un programa.

14 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

ACTIVIDAD 1

Mediante una búsqueda en Internet, responde lo siguiente.

1. Menciona y define los componentes del modelo cliente-servidor.

__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
_________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

2. Enumera y explica brevemente los tipos de arquitecturas de cliente-servidor.

__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
_________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

3. Ventajas y desventajas del modelo cliente-servidor.

__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
_________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

SUBMÓDULO 1 15
 Formación para el Trabajo - Sexto Semestre

1.3. Página web

Se conoce como página web al documento que

forma parte de un sitio web y que suele contar con
enlaces (hipervínculos), imágenes, texto, sonido,
video, etc.

1.3.1. Tipos de contenido

Todas las páginas o aplicaciones web llevan cierto contenido que

se debe mostrar al usuario, este puede definirse en dos tipos,
contenido estático o contenido dinámico.

1.3.1.1. Contenido estático

Es aquel que no varía en nuestra página web. Dicho de otro modo.

Piensa en tu página inicio, o en aquellas páginas que no han
sufrido ninguna modificación desde su creación.

1.3.1.2. Contenido dinámico

Es aquel que se va refrescando con el tiempo. Dicho

de otro modo, piensa en las páginas de un blog, o un
catálogo on-line de un e-commerce. Este es contenido
que vamos actualizando a medida que vamos
incorporando nuevos productos, o nuevas entradas en
nuestra bitácora.

Páginas Estáticas Páginas Dinámicas

9 Puede tener cambios frecuentes en la

9 Contenido que no cambia frecuentemente.
información.
9 Información en archivos HTML (y otras
9 Los contenidos se almacenan en una
tecnologías como FLASH).
base de datos.
9 Se actualiza manualmente.
9 Se actualiza a través de un gestor de
9 Se utiliza algún tipo de programa editor.
contenidos (CMS).

16 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

ACTIVIDAD 2

De acuerdo a la lectura página web, menciona 2 ejemplos de página con contenido dinámico y
explica por qué consideras que son de ese tipo.

1.4. Aplicación web

1.4.1 Definición

Las aplicaciones web son un tipo de software que se codifica en un lenguaje soportado por los
navegadores web y cuya ejecución es llevada a cabo por el navegador en Internet o de una
intranet (de ahí que reciban el nombre de App web).
La Web de hoy es un universo de aplicaciones y páginas web interconectadas lleno de vídeos,
fotos y contenido interactivo. Lo que no ve el usuario es cómo interactúan los navegadores y las
tecnologías web para hacer que esto sea posible.

1.4.2. ¿Cómo funcionan las Apps web?

Que las aplicaciones web sean ejecutadas por medio de un navegador web en una red significa
que los datos o los archivos en los que trabajas son procesados y almacenados dentro de la red
a través de un navegador. Por este motivo, este tipo de aplicaciones por lo general, no necesitan
ser instaladas en el ordenador o el móvil.

Una página web puede contener elementos que permiten una comunicación activa entre el usuario
y la información, haciendo que éste acceda a los datos de forma interactiva, ya que el sitio web
se encargará de responder a cada una de las acciones que éste ejecute (por ejemplo acceder a
gestores de bases de datos de todo tipo, publicar e interactuar con los contenidos, rellenar y enviar
formularios, participar en juegos, etc.

Las aplicaciones web están íntimamente relacionadas con el almacenamiento de datos en la

nube, ya que toda la información se guarda de forma permanente en servidores web, los cuales
además de alojar dicha información, nos la envían a nuestros dispositivos móviles o equipos
informáticos en cada momento que sea requerida, realizando copias temporales de estos envíos
dentro de los equipos y dispositivos que utilicemos.

Las empresas que alquilan estos espacios en los servidores web son conocidas como empresas
o servicios de Hosting.

SUBMÓDULO 1 17
 Formación para el Trabajo - Sexto Semestre

1.4.3. Tipos de Apps web que se pueden desarrollar

Existen miles de páginas y aplicaciones web asociadas. A continuación te presentamos algunos
ejemplos de aplicaciones web que se pueden llegar a desarrollar:

¾ Web mail: Sistemas de acceso al correo electrónico que permiten acceder a tus correos
mediante un navegador web, sin tener que descargar los propios correos en el ordenador.
Para ello utilizan clientes del tipo Gmail, Outlook, etc.

¾ Wikis: Sitios y aplicaciones web cuyas páginas y contenidos pueden ser editados
directamente desde el navegador, donde los usuarios crean, modifican o eliminan contenidos
que, generalmente comparten.

¾ Weblogs: Sitios y aplicaciones web cuyas páginas y contenidos son de fácil actualización, de
tal forma que permite a sus autores publicar contenidos (textos, imágenes y otros archivos)
con apretar un solo botón, ya que suelen contar con un editor y herramientas para tal efecto
en la propia web.

¾ Tiendas online: Tipos de comercio que usan como medio principal para realizar sus
transacciones desde un sitio web o una aplicación conectada a internet desde la que los
usuarios y clientes pueden realizar sus compras.
1.4.4. Ventajas de las aplicaciones web
Las ventajas más importantes que tiene el desarrollo de una App web son las siguientes:

9 Ahorro de tiempo: Son Apps sencillas de gestionar, por lo que permiten realizar tareas de
forma fácil sin necesidad de descargar ni instalar ningún programa o plugin adicional.

9 Completa compatibilidad: Son totalmente compatibles con navegadores para poder

utilizarlas. Sólo se suele requerir que el navegador web esté debidamente actualizado para
poder usar este tipo de Apps.

9 Actualización continua e inmediata: Debido a que es el propio desarrollador App el que

gestiona y controla el software, la versión que descarguen, instalen y utilicen los usuarios,
siempre será la última que haya lanzado dicho desarrollador App. Para ello es imprescindible
estar al tanto de lo que ocurre con la App.

9 Recuperación de datos: Una de las mayores ventajas de una App Web es que, en la mayoría
de las ocasiones el usuario puede recuperar su información desde cualquier dispositivo y
lugar con su nombre de usuario y contraseña.

9 Ahorro de recursos en equipos y dispositivos: Las Apps Web, generalmente tiene un

bajo consumo de recursos dado que toda (o gran parte) de la aplicación se encuentra en un
servidor web y no en nuestro ordenador. Gran parte de las tareas que realiza el software no
consumen recursos propios de tu equipo o dispositivo, ya que se realizan desde el servidor
o servidores que contratemos.

9 Compatibilidad con múltiples plataformas: se pueden usar desde cualquier dispositivo

móvil u equipo informático, ya que son válidas para cualquier sistema operativo ya que sólo
es necesario que cuente con un navegador web.

18 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

9 Portabilidad: Como hemos indicado, las App Web son compatibles con todas las plataformas
(independiente del ordenador, equipo informático o dispositivo móvil donde se utilice) ya que
con tener acceso a internet se puede acceder a las mismas (como si de una página web se
tratase). Para que los usuarios con dispositivos móviles puedan acceder a la App Web de
forma sencilla, se requiere de un diseño específico (ficheros CSS) para facilitarlo.

9 Virus inexistentes: Los virus no afectan a los datos guardados en el servidor de la aplicación,
ya que cuentan con potentes sistemas de seguridad informáticos y garantías ante este tipo
de situaciones.

9 Mayor funcionalidad: El hecho de que el acceso a la App se realice desde una única
ubicación (un servidor web de una Intranet en las oficinas de una empresa), permite realizar
de forma sencilla acciones colaborativas entre los usuarios como por ejemplo la compartición
de datos entre ellos.

9 Mayor funcionalidad: Cada vez es más sencillo crear, desarrollar y utilizar navegadores
web, ya que actualmente ofrecen cada vez más y mejores funcionalidades para crear
“aplicaciones web enriquecidas” (RIA o Rich Internet Application).

ACTIVIDAD 3

Realiza un mapa conceptual en tu cuaderno del tema 1.4., explicando el uso y ventajas de
una aplicación web.

1.5 Capas o arquitectura de una app web

Las aplicaciones web están basadas en el modelo Cliente/Servidor que gestionan servidores
web, y que utilizan como interfaz páginas web.

Las páginas web son el componente principal de una aplicación o sitio web. Los browsers piden
páginas (almacenadas o creadas dinámicamente) con información a los servidores web. En
algunos ambientes de desarrollo de aplicaciones web, las páginas contienen código HTML y scripts
dinámicos, que son ejecutados por el servidor antes de entregar la página.

Una vez que se entrega una página, la conexión entre el browser y el servidor web se rompe, es
decir que la lógica del negocio en el servidor solamente se activa por la ejecución de los scripts
de las páginas solicitadas por el browser (en el servidor, no en el cliente). Cuando el browser
ejecuta un script en el cliente, éste no tiene acceso directo a los recursos del servidor. Hay otros
componentes que no son scripts, como los applets (una aplicación especial que se ejecuta dentro
de un navegador) o los componentes ActiveX. Los scripts del cliente son por lo general código
JavaScript o VBSscript, mezclados con código HTML.

Las aplicaciones web se modelan mediante lo que se conoce como modelo de capas, una capa
representa un elemento que procesa o trata información.

SUBMÓDULO 1 19
 Formación para el Trabajo - Sexto Semestre

Los tipos son:

¾ Modelo de dos capas: La información atraviesa dos capas entre la interfaz y la
administración de los datos.

¾ Modelo de n-capas: La información atraviesa varias capas, el más habitual es el modelo de

tres capas.

1.5.1.Modelo de dos capas:

Presentación

Gran parte de la aplicación corre en el lado del cliente (fat Cliente Lógica de
client). negocio

¾ Cliente (fat client): La lógica de negocio está

inmersa dentro de la aplicación que realiza la
interfaz de usuario, en el lado del cliente.
Servidor Datos

¾ Servidor: Administra los datos.

1.5.2. Modelo de tres capas:

Una aplicación de tres capas es una aplicación cuya

funcionalidad puede ser segmentada en tres niveles
lógicos (capas):

y Los servicios de presentación es responsable

de:
○ Obtener información del usuario.
○ Enviar la información del usuario a los
servicios de negocios para su procesamiento.
○ Recibir los resultados del procesamiento de
los servicios de negocios.
○ Presentar.

y Los servicios de negocios (Lógica de Negocios), es responsable de:

○ Recibir la entrada del nivel de presentación.

○ Interactuar con los servicios de datos para ejecutar las operaciones de negocios para los
que la aplicación fue diseñada a automatizar (por ejemplo, la preparación de impuestos por
ingresos, el procesamiento de órdenes y así sucesivamente).
○ Enviar el resultado procesado al nivel de presentación.

y El nivel de servicios de datos es responsable de:

○ Almacenar los datos.

○ Recuperar los datos.
○ Mantener los datos.
○ La integridad de los datos.

20 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

ACTIVIDAD 4

Realiza una nube de palabras con los términos más importantes del tema 1.5.

1.6. Entorno de desarrollo de aplicaciones web

El código para la programación web puede ser generado con cualquier editor de texto,
es muy recomendable no utilizar editores de texto avanzados (Microsoft Word, OpenOffice
Writer, etc.) ya que añaden al texto caracteres especiales que no serían “comprensibles”
por el navegador. Por lo tanto, si vamos a utilizar editores de texto no específicos sería
recomendable utilizar el Bloc de Notas de Windows o el Gnome Editor o Kde Editor de Linux.
Existen también herramientas creadas expresamente para diseñar código, hay algunas que
son gratuitas y otras de pago, que se van a presentar a continuación de manera breve para
que el desarrollador decida la que se adapte a su gusto y pueda profundizar en el manejo
de dicha herramienta.

Notepad++: Es un editor de texto y de código fuente libre con

soporte para varios lenguajes de programación. Solo funciona
en Microsoft Windows. Se parece al Bloc de notas en cuanto al
hecho de que puede editar texto sin formato y de forma simple. No
obstante, incluye opciones más avanzadas que pueden ser útiles
para usuarios avanzados como desarrolladores y programadores.

Se distribuye bajo los términos de la Licencia Pública General de

GNU. Tiene multitud de lenguajes de programación soportados,
incluidos todos los que hemos visto hasta ahora [sic]. Además,
permite al usuario definir su propio lenguaje: no solo las palabras
clave para la sintaxis coloreada, sino también las palabras clave
para la envoltura de sintaxis, los comentarios clave y los operadores.

Vse. https://notepad-plus-plus.org/

SUBMÓDULO 1 21
 Formación para el Trabajo - Sexto Semestre

Sublime text: Es un editor de código multiplataforma, ligero y con

pocas concesiones a las florituras. Es una herramienta concebida para
programar sin distracciones. Su interfaz de color oscuro y la riqueza
de coloreado de la sintaxis, centra nuestra atención completamente.
Permite tener varios documentos abiertos mediante pestañas, e
incluso emplear varios paneles para aquellos que utilicen más de un
monitor. Dispone de modo de pantalla completa, para aprovechar al
máximo el espacio visual disponible de la pantalla.

El sistema de resaltado de sintaxis de Sublime Text soporta un gran número de lenguajes ( C,

C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua,
Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML).

Sublime Text es un programa de pago, aunque se puede descargar una versión de prueba,
plenamente funcional y sin limitación de tiempo. La licencia individual cuesta 59 dólares. La
aplicación está disponible para OS X, Linux y Windows.

Sublime Text 3: Es la versión más reciente de este editor de código que trae muchas ventajas
respecto a las versiones anteriores.
Vse: https://www.sublimetext.com/3

Visual Studio Code: Es un editor de código fuente desarrollado por Microsoft para Windows,
Linux y macOS. Incluye soporte para la depuración, control integrado de Git, resaltado de sintaxis,
finalización inteligente de código, fragmentos y refactorización de código.

También es personalizable, por lo que los usuarios pueden

cambiar el tema del editor, los atajos de teclado y las
preferencias. Es gratuito y de código abierto, aunque la
descarga oficial está bajo software propietario requiriendo
tus datos de uso del programa legalmente. Es compatible
con varios lenguajes de programación y un conjunto de
características que pueden o no estar disponibles para un
idioma dado, está disponible para los sistemas operativos
Windows x64, MacOs y Linux x64.

Vse: https://code.visualstudio.com/

22 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

ACTIVIDAD 5

En tu cuaderno mediante una investigación en Internet, escribe 5 editores de código más

usados en la actualidad. (Definición, año de creación, características, ventajas y desventajas
de cada uno).

1.7. Lenguajes para desarrollar aplicaciones web

En el mundo de la programación existen dos tipos de lenguajes, uno de ellos es de marcas de

hipertexto y el otro de programación.

LENGUAJES DE MARCAS. Un “lenguaje de marcado” o “lenguaje de marcas” se puede definir

como una forma de codificar un documento donde, junto con el texto, se incorporan etiquetas,
marcas o anotaciones con información adicional relativa a la estructura del texto, su presentación.

El lenguaje de marcas más conocido en la actualidad es el HTML, que se utiliza en las páginas
web. Las marcas también están formadas de texto, pero que es interpretado cuando se muestra
el documento, y suelen llamarse también etiquetas. Existen tres clases de lenguajes de marcas y
pueden presentarse todas en un mismo documento.

y Marcas de presentación: Estas marcas indican el formato-marco del texto. Su uso comienza
a reducirse dado que es poco flexible, especialmente en grandes proyectos.

y Marcas de procedimientos: Estas marcas se utilizan para la presentación del texto,

interpretándose cada una en el orden en que aparecen. Por ejemplo, la marca que se agrega
inmediatamente antes de un texto para que se vea en negrita. Luego debe existir la marca
correspondiente que termine o cierre la negrita. Otras marcas de procedimientos pueden ser
centrar texto, cambio de tamaño de fuente, cambios de estilos, etc. Algunos lenguajes de
marcas de procedimiento son nroff, troff, TeX, PostScript, HTML, etc.

y Marcas descriptivas: También llamadas marcado descriptivo o semántico. Aquí se utilizan

las marcas para describir fragmentos de texto sin especificar cómo deben representarse.
Algunos lenguajes diseñados para esto son el SGML y el XML.

1.7.1. HTML

HTML son las siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el
lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir
la estructura y el contenido en forma de texto, así como para complementar el texto con objetos
tales como imágenes. HTML se escribe en forma de “etiquetas” o “marcas”, rodeadas por corchetes
angulares (< >).

HTML fue desarrollado originalmente por Tim Berners-Lee mientras estaba en el CERN, y
popularizado por el navegador Mosaic desarrollado en NCSA. Durante el transcurso de la década
de 1990 proliferó con el crecimiento explosivo de la Web. Durante este tiempo, se añadieron
etiquetas al lenguaje HTML. La Web depende de los autores de páginas web y de que las

SUBMÓDULO 1 23
 Formación para el Trabajo - Sexto Semestre

compañías compartan las mismas convenciones de HTML. Esto ha motivado el trabajo conjunto
sobre las especificaciones de HTML. A las instrucciones que forman el lenguaje HTML se les llama
elementos o etiquetas y siempre van encerrados entre < y >.

Existen múltiples versiones de html, la más actual es html5 y es necesario especificar al navegador
que debe trabajar con esta versión, para ello es importante agregar al principio de cada página el
código: <!DOCTYPE html>.

<meta charset="UTF-8"/> El español es un lenguaje que por suerte o por desgracia posee
caracteres especiales tales como tildes, ñ, diéresis (ü). Esto en HTML es un problema, pues no
todo hay forma de mostrarlo más que con entidades HTML (códigos especiales que muestran
estos caracteres).

Una forma de «estandarizar» la visualización de este tipo de caracteres sin tener que escribir
constantemente las entidades HTML que las definen es utilizar una codificación de caracteres.
<meta charset="UTF-8"/> y se debe colocar dentro de las etiquetas <head></head>.

Estructura de un documento HTML

Toda página HTML debe incluir las etiqueta , estas etiquetas nos están indicando que
el código contenido entre ellas va a ser HTML.

Los documentos escritos en HTML están estructurados en dos partes diferenciadas: La HEAD
(cabecera) y el BODY (cuerpo).

Head. Es la primera de las dos partes en que se estructura un documento HTML. En la zona del <head>
y </head> reside información acerca del documento, y generalmente no se ve cuando se navega por él.
En esta misma zona se pone el elemento <title> y </title> que es una breve descripción que identifica
el documento. Es lo que veremos como título de la ventana en los navegadores que lo permitan. Es
como se conocerá nuestra página en algunos buscadores y en la agenda de direcciones (bookmarks)
de los usuarios. Por tanto, parece importante pensarnos bien cómo llamarla. Este título aparecerá en la
barra superior del navegador junto con el nombre de dicho navegador.

Ejemplo:

Body. Es la etiqueta que indica el contenido de la página. Esta parte al contrario de <HEAD> es
obligatoria, ya que es aquí donde reside el verdadero contenido de la página. A continuación se presenta
la primera página web en HTML.

24 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

La etiqueta h1 contiene un encabezado de nivel 1. Los encabezados, que sirven como títulos para
porciones de contenido, ayudan a organizar la información de un documento para lograr una mejor
comprensión del contenido. Los mismos, deben actuar como una corta pero concisa descripción del
contenido tratado debajo de ellos.
Por último la etiqueta <p> nos indica que el texto que viene a continuación es un párrafo normal y
corriente, el típico texto que nos vamos a encontrar en cualquier página web.
Existen seis niveles de encabezados (h1 a h6) que permiten a los autores establecer títulos y subtítulos
jerarquizando la información en el documento. Gracias a esto, los encabezados de un documento
pueden ser interpretados como su tabla de contenidos.

SALTO DE LÍNEA: Para realizar cambios de párrafo (Intro) debemos utilizar <br>. Hay que tener
en cuenta que cuando se cambia de un estilo a otro, se produce un salto de línea de manera
automática, sin tener que especificar </br>.

Si queremos introducir líneas para separar unos contenidos de otros debemos utilizar <hr>, el
funcionamiento de <hr> es similar al de <br> (Intro) y funciona de manera parecida, ya que <br>
introduce un salto de línea y <hr> lo que hace es dar un salto de línea pero además incluyendo una
línea de separación, al igual que en el caso de <br>, tampoco existe </hr>.

En el ejemplo siguiente se puede apreciar claramente las diferencias existentes entre <br> y <hr>.

SUBMÓDULO 1 25
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 6

Desarrolla una página como se muestra en la siguiente imagen.

IMÁGENES: Para insertar una imagen es necesario insertar la etiqueta <img src=”foto.png”>.
Dicha etiqueta no necesita etiqueta de cierre. Los tipos de imágenes pueden ser de mapa de bits
(PNG, JPEG, GIF, ETC.) o vectoriales (SVG).

Para trabajar de una forma más sencilla y ordenada, es recomendable que todas las imágenes se
encuentren en un mismo directorio; width=”00”; especifica el ancho de la imagen.

ENLACES, VÍNCULOS O LINKS: Un enlace es una zona de texto o gráficos que si son cliqueados
nos trasladan a otra página o a otra posición dentro de la página actual.

Para incorporar un enlace hay que utilizar la etiqueta <a href=”pagina_de_destino”>. Todo
lo que encerremos entre <a href”enlace_de_destino”> y </a>, ya sea texto o imágenes, será
considerado como enlace y se visualizará de manera distinta en el navegador. El texto aparecerá
subrayado de un color distinto al habitual, las imágenes estarán rodeadas por un borde del mismo
color que el del texto del enlace. Al pulsar sobre el enlace, seremos enviados a la página que
apuntaba el enlace (página de destino). Para que el enlace sirva para algo debemos especificarle
una dirección. Lo haremos de la siguiente manera:
<a href=”dirección”>púlsame </a>

26 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

Podemos referenciar a páginas que están dentro de mi sitio web o páginas que son externas a mi
sitio web.

TABLAS: Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación
en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de
una manera que puede representarse rápida y fácilmente. Cuando hablamos de filas nos referimos
a las casillas que están en horizontal y las columnas son las que están de manera vertical.

Una tabla va siempre delimitada por las etiquetas <table> y </table>. Dentro de una tabla vamos
a distinguir filas y dentro de filas celdas, del mismo modo que se puede identificar encabezados de
cada columna que regularmente se coloca en la primera fila.

Filas: se identifican mediante las etiquetas <tr> y </tr>.

Celdas: se identifican mediante las etiquetas <td> y </td>.
Encabezados: se identifican mediante las etiquetas <th> y </th>.

FORMATO DE TEXTO: El formateo del texto, o sea, el formato del texto, son una serie de etiquetas
que escribimos en html rodeando la palabra o el texto y que transforman ese texto en el formato
que nosotros le hemos querido dar.
Texto en negrita: Para el texto en negrita, use las etiquetas <strong> o <b>:

<strong>Texto en negrita</strong>
o
<b>Texto en negrita</b>

SUBMÓDULO 1 27
 Formación para el Trabajo - Sexto Semestre

¿Cuál es la diferencia? Semántica. <strong> se utiliza para indicar que el texto es fundamental o
semánticamente importante para el texto circundante, mientras que <b> no indica tal importancia
y simplemente representa el texto que debe estar en negrita.
Texto en cursiva: Para poner el texto en cursiva, use las etiquetas <em> o <i>:

<em>Texto en cursiva</em>
o
<i>Texto en cursiva</i>
¿Cuál es la diferencia? Semántica. <em> se utiliza para indicar que el texto debe tener un
énfasis adicional que se debe resaltar, mientras que <i> simplemente representa el texto que se
debe diferenciar del texto normal que lo rodea.

Texto subrayado: Se utiliza la etiqueta <u>. Puede usar dicha representación para indicar el texto
mal escrito en la página, o para una marca con el nombre propio chino.

<p>Esto es un texto con <u>esta palabra subrayada</u> </p>

LISTAS: El lenguaje HTML define dos tipos diferentes de listas para agrupar los elementos: listas
no ordenadas (se trata de una colección simple de elementos en la que no importa su orden),
listas ordenadas (similar a la anterior, pero los elementos están numerados y por tanto, importa su
orden).

Listas no ordenadas: Es un conjunto de elementos relacionados entre sí pero para los que no se
indica un orden o secuencia determinados. La etiqueta <ul>…</ul> encierra todos los elementos
de la lista y la etiqueta <li> </li> cada uno de sus elementos.

Listas ordenadas: Son casi idénticas a las listas no ordenadas, salvo que en este caso los
elementos relacionados se muestran siguiendo un orden determinado, que se define mediante la
etiqueta <ol></ol>. Los elementos de la lista se definen mediante la etiqueta <li>…</li>, la misma
que se utiliza en las listas no ordenadas.

28 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

ACTIVIDAD 7

Con base en lo visto hasta este momento sobre HTML, realiza la codificación de las siguientes
páginas enlazadas entre sí.

Tres páginas
1.- acerca.html
2.- historia.html
3.- valores.html

1.7.2. Lenguaje Script

Un lenguaje de script es un pequeño lenguaje de programación cuyo código se inserta dentro del
documento HTML.

Este código se ejecuta en el navegador del usuario al cargar la página, o cuando sucede algo
especial como puede ser el pulsar sobre un enlace.

Estos lenguajes permiten variar dinámicamente el contenido del documento, modificar el

comportamiento normal del navegador, validar formularios, realizar pequeños trucos visuales, etc.

Sin embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la máquina
donde estén alojados, por lo que no podrán realizar cosas como manejar bases de datos. El
lenguaje de script más conocido es JavaScript.

SUBMÓDULO 1 29
 Formación para el Trabajo - Sexto Semestre

JAVASCRIPT

El primer lenguaje de script que vio la luz fue el JavaScript de Netscape. Nacido con la versión 2.0
de este navegador en el año 1995 y basado en la sintaxis de Java, su utilidad y el casi absoluto
monopolio que entonces ejercía Netscape en el mercado de navegadores permitieron que se
popularizara y extendiera su uso.

¿Por qué el JavaScript y no otro lenguaje de programación?

Porque:
y Es moderno (tiene pocos años).
y Es sencillo (su hermano mayor, el Java, es bastante más complejo).
y Es útil (el desarrollo de Internet ha sido muy rápido en los últimos años).
y Es potente: permite la POO (Programación Orientada a Objetos).
y Es barato: solo necesitamos un editor de textos y un navegador. Permite la “programación
visual” (ventanas, botones, colores, formularios, etc.).

HTML dispone de unas etiquetas para incluir código de script en una página. Esas etiquetas
pueden situarse en la sección HEAD o en el BODY de la página (eso depende de lo que vaya a
hacer el script). Las sentencias escritas en JavaScript se encapsulan entre las etiquetas.

<SCRIPT LANGUAGE=”JavaScript” TYPE=”text/JavaScript”> y

</script> o simplemente entre <script> y </script>.

A continuación un ejemplo representado de la primera forma:

Un segundo ejemplo representado de la manera “corta”:

30 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

ACTIVIDAD 8

Hacer una página web que muestre varios mensajes por pantalla en JavaScript, el primero
será “nombre y apellidos del alumno/a”, el segundo “estás en mi práctica 3” y, el tercero,
“Gracias por tu visita”.
1.7.3. Hojas de estilo
El lenguaje HTML está limitado a la hora de aplicarle formato a un documento. Esto es así porque fue
concebido para otros usos (científicos sobre todo), distintos a los actuales, mucho más amplios. Para
solucionar estos problemas los diseñadores han utilizado técnicas tales como el manejo de tablas con
imágenes transparentes para ajustarlas, utilización de etiquetas que no son estándares del HTML y
otras. Estas “trampas” han causado a menudo problemas en las páginas a la hora de su visualización
en distintas plataformas.
Además, los diseñadores se han visto frustrados por la dificultad con la que, aun utilizando estos
trucos, se encontraban a la hora de maquetar las páginas, ya que muchos de ellos venían maquetando
páginas sobre el papel, donde el control sobre la forma del documento es absoluto. Para subsanar
estas carencias, aparecen las hojas de estilo en cascada CSS.
CSS
Para dar valor a una etiqueta con CSS utilizaremos el nombre de la etiqueta separada de “:” (dos pun-
tos), a continuación vendrá el valor de dicha etiqueta. Podemos aplicar estilos CSS a:
y Un sitio web, de modo que se puede definir la forma de todo el sitio de una sola vez. Para ello
utilizaremos un fichero externo con extensión .css.
y Una página individual, podemos dar formato a toda la página. Para ello introduciremos el código
CSS entre las etiquetas <style type=”text/css”> y </style> en la zona <head> de nuestra web.
y Una porción del documento, aplicando estilos visibles en un trozo de la página, con las etiquetas
<span> y <div>.
y Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola
etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación.

Algunas etiquetas CSS

Antes de ver dónde podemos aplicar CSS, vamos a ver algunas etiquetas CSS sencillas, que nos
servirán para dar un formato más espectacular a nuestras webs. Si queremos utilizar varias etiquetas,
separaremos unas de otras con “;” (punto y coma):

y Color: podemos indicar el color del texto, el color vendrá en inglés (white, black, blue, etc.) o
utilizar # junto con el valor RGB (#009900).
y Background: Se utiliza para el color de fondo, el color vendrá en inglés (white, black, blue, etc.)
o utilizar # junto con el valor RGB (#009900).
y Font-size: aquí indicamos el tamaño de la letra. Su valor puede expresarse en puntos (pt) como lo
haríamos en un editor de texto o mediante unos valores predefinidos (small, medium, large, etc.).
y Font-family: en este caso establecemos el tipo de fuente que se representará por pantalla. No
utilizar tipos raros ya que si el cliente no tiene esa fuente en su sistema, la página podría no
mostrarse bien. Algunos ejemplos: Arial, Times, Courier, etc.
y Font-weight: grosor de los caracteres. Podemos expresarlo con números del 100, 200, ..., 900 o
valores predefinidos (normal, bold, bolder, light, etc.).

SUBMÓDULO 1 31
 Formación para el Trabajo - Sexto Semestre

y Font-style: curvado de los caracteres. Hay 3 valores predefinidos para este estilo: normal, italic
y oblique.
y Text-align: alineación del texto con respecto a la página. Puede ser izquierda (left), derecha
(right), centrado (center) o justificado (justify).

Ejemplo con una hoja de estilo CSS

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <span style=”…..”>…..</
span>. Con su atributo style indicamos en sintaxis CSS las características de estilos.

ACTIVIDAD 9

Hacer una página que muestre lo siguiente: En la primera línea vendrá el nombre completo del
alumno/a en color verde (green), grosor del texto bolder, la fuente utilizada será Arial y el tipo de
texto oblique. En la segunda línea aparecerá el semestre y la capacitación a la que perteneces,
en este caso el texto será de color azul (blue), la fuente tendrá un tamaño de 18 puntos, el tipo
de letra será Courier y el texto quedará alineado a la parte izquierda de la página.

Estilo definido para toda una página

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página.
Esta definición se hace dentro de las etiquetas <head>…</head> utilizando las etiquetas <style
type=”text/css”> y </style>. Es una manera muy cómoda de darle forma al documento y muy
potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas
etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la
página lo haremos de una sola vez. Como puede observarse, cada definición de etiquetas de estilo
va encerrada entre { } y si hubiese más de un parámetro, separados por ; .

32 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

Estilo definido para todo un sitio web

Sería algo parecido al caso anterior, solo que ahora en lugar de tener el estilo contenido en la
propia página, lo tenemos en un archivo externo .css así podemos tener varias páginas con el
mismo estilo sin tener que copiar en todas ellas la definición. Por lo tanto, si queremos variar algún
parámetro en la definición de estilos solo tendremos que cambiarla en el fichero .css y todas las
páginas quedarán automáticamente actualizadas.

Como ya hemos indicado tendremos por un lado el fichero de definiciones de estilos y, por otro, nuestra
página web. Para hacer referencia a ese fichero de estilo desde la cabecera de nuestra web <head>
utilizaremos la etiqueta:
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
Donde estilos.css es el nombre del fichero que tiene definidos los estilos. Vamos a ver un ejemplo
donde mediante un archivo .css independiente del archivo .html se le creará una página con estilos.

SUBMÓDULO 1 33
 Formación para el Trabajo - Sexto Semestre

Actividad Integradora

Desarrollar un sitio que contenga 4 páginas sobre un tema especificado por el docente, el sitio
debe contener todos los elementos de html vistos en el submódulo, del mismo modo, deben
ser aplicados estilos con un archivo independiente. (El docente puede integrar temas no vistos
como formularios, etiquetas semánticas de html5, etc.).

El sitio puede tener el diseño siguiente:

1.8 Lenguajes de script de servidor

Los lenguajes de lado servidor son aquellos lenguajes que son reconocidos, ejecutados e
interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él
(HTML).

34 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

Características:

Existe una multitud de lenguajes. Cada uno de ellos explota más a fondo ciertas características que
los hacen más o menos útiles para desarrollar distintas aplicaciones. La versatilidad de un lenguaje
está íntimamente relacionada con su complejidad. Un lenguaje complicado en su aprendizaje
permite en general realizar un espectro de tareas más amplio y más profundamente. Es por ello
que a la hora de elegir el lenguaje que queremos utilizar tenemos que saber claramente qué es lo
que queremos hacer y si el lenguaje en cuestión nos lo permite o no.

TIPOS:

A continuación se presentan los principales lenguajes de script de servidor, junto con sus ventajas
y desventajas.
PHP: Es un lenguaje de programación utilizado para la creación de sitios web. PHP es un acrónimo
recursivo que significa PHP Hypertext Pre-Processor (inicialmente se llamó Personal Home Page).
Surgió en 1995, desarrollado por PHP Group. PHP es un lenguaje de script interpretado en el lado
del servidor utilizado para la generación de páginas web dinámicas, embebidas en páginas HTML y
ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento
necesita tener instalado Apache o IIS con las librerías de PHP. La mayor parte de su sintaxis ha
sido tomada de C, Java y Perl con algunas características específicas. Los archivos cuentan con
la extensión .php.
Ventajas:

y Muy fácil de aprender.

y Se caracteriza por ser un lenguaje muy rápido.
y Soporta en cierta medida la orientación a objetos. Clases y herencia.
y Es un lenguaje multiplataforma: Linux, Windows, entre otros.
y Capacidad de conexión con la mayoría de los manejadores de base de datos: MySQL, PostgreSQL,
Oracle, MS SQL Server, entre otros.
y Capacidad de expandir su potencial utilizando módulos.
y Posee documentación en su página oficial, la cual incluye descripción y ejemplos de cada una
de sus funciones.
y Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
y Incluye gran cantidad de funciones.
y No requiere definición de tipos de variables ni manejo detallado del bajo nivel.
Desventajas:

y Se necesita instalar un servidor web.

y Todo el trabajo lo realiza el servidor y no delega al cliente, por tanto, puede ser más ineficiente a
medida que las solicitudes aumenten de número.
y La legibilidad del código puede verse afectada al mezclar sentencias HTML y PHP.
y La programación orientada a objetos es aún muy deficiente para aplicaciones grandes.
y Dificulta la modularización.
y Dificulta la organización por capas de la aplicación.

SUBMÓDULO 1 35
 Formación para el Trabajo - Sexto Semestre

ASP.NET: Este es un lenguaje comercializado por Microsoft y usado por programadores para
desarrollar entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnología ASP y
fue lanzado al mercado mediante una estrategia de mercado denominada .NET. ASP.NET fue
desarrollado para resolver las limitaciones que brindaba su antecesor ASP. Creado para desarrollar
web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET
o J#. Los archivos cuentan con la extensión (aspx). Para el funcionamiento de las páginas se
necesita tener instalado IIS con el Framework .Net. Microsoft Windows 2003 incluye este framework,
solo se necesitará instalarlo en versiones anteriores.

Ventajas:

y Completamente orientado a objetos.

y Controles de usuario y personalizados.
y División entre la capa de aplicación o diseño y el código.
y Facilita el mantenimiento de grandes aplicaciones.
y Incremento de velocidad de respuesta del servidor.
y Mayor velocidad.
y Mayor seguridad.

Desventajas:

y Mayor consumo de recursos.

JSP: es un lenguaje para la creación de sitios web dinámicos, acrónimo de Java Server Pages.
Está orientado a desarrollar páginas web en Java. JSP es un lenguaje multiplataforma. Creado para
ejecutarse del lado del servidor. JSP fue desarrollado por Sun Microsystems. Comparte ventajas
similares a las de ASP.NET. Fue desarrollado para la creación de aplicaciones web potentes.
Posee un motor de páginas basado en los servlets de Java. Para su funcionamiento se necesita
tener instalado un servidor Tomcat.

Ventajas:

y Ejecución rápida del servlets.

y Crear páginas del lado del servidor.
y Multiplataforma.
y Código bien estructurado.
y Integridad con los módulos de Java.
y La parte dinámica está escrita en Java.
y Permite la utilización de servlets.

Desventajas

y Complejidad de aprendizaje.

36 INTRODUCCIÓN A APLICACIONES WEB

PROGRAMACIÓN EN JAVA

PYTHON: es un lenguaje de programación creado en el año 1990 por Guido van Rossum y es el
sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Los
usuarios lo consideran como un lenguaje más limpio para programar. Permite la creación de todo
tipo de programas incluyendo los sitios web. Su código no necesita ser compilado, por lo que se
dice que el código es interpretado. Es un lenguaje de programación multiparadigma, lo cual fuerza
a que los programadores adopten un estilo de programación particular: programación orientada a
objetos, programación estructurada, programación funcional y programación orientada a aspectos.

Ventajas:

y Libre y de código abierto.

y Lenguaje de propósito general.
y Gran cantidad de funciones y librerías.
y Sencillo y rápido de programar.
y Multiplataforma.
y Orientado a objetos.
y Portable.

Desventajas:

y Lentitud por ser un lenguaje interpretado.

ACTIVIDAD 10

Realiza un cuadro comparativo con la información de los lenguajes orientados a servidor

mencionados anteriormente.

1.9. Seguridad en las aplicaciones web

Autenticación

La autenticación permite verificar la identidad de un miembro y determinar qué nivel de acceso

tiene en el sitio, como por ejemplo si es un miembro o un administrador. Hay diferentes tipos de
autenticación web disponibles. El elegido depende en gran medida de qué tan confidencial es
la información en el sitio web y cuánto control se desea ejercer sobre los miembros que pueden
acceder a ella.

Autenticación básica HTTP

HTTP básica es el tipo más simple de autenticación web disponible. Esta forma de autenticación
solicita al usuario que inicie sesión con su nombre de usuario y contraseña. Sin embargo, la
información se transmite utilizando codificación Base64. Esto significa que la información enviada
no es cifrada ni segura. En teoría, la información podría ser interceptada por un tercero.

SUBMÓDULO 1 37
 Formación para el Trabajo - Sexto Semestre

Autenticación Digest HTTP

Los protocolos de autenticación Digest funcionan de manera similar a la autenticación básica. El

servidor solicita la información de identificación, que es suministrada por el usuario en la forma de
un nombre de usuario y una contraseña.

El servidor, a continuación, compara las credenciales con lo que está en archivo, siempre y cuando
coincidan, concederá el acceso. Es un escenario de inicio de sesión sencillo.

La diferencia primaria con la autenticación de HTTP con protocolo Digest es que la conexión se
realiza de una manera segura. Esto es debido a que las contraseñas son "digeridas" y almacenadas
en la base de datos de usuario en un formulario cifrado. Nadie, ni siquiera el administrador, puede
abrir la base de datos y saber la contraseña al mirar la secuencia cifrada. De esta manera, la
integridad de la contraseña es mucho más segura, ya que sólo puede ser leída por el servidor web.

Autenticación de cliente HTTPS

HTTPS se logra cuando el HTTP estándar es combinado con un Socket Layer Secure (SSL).
Todo lo contenido dentro del SSL opera en un circuito cerrado, sin ninguna interferencia exterior.
Esto permite que el navegador web verifique la legitimidad de cada página que se encuentra en el
sitio web mediante la lectura del Certificado de Clave Pública (PKC o Criptografía asimétrica) del
secure socket, y comparándolo con el archivo guardado del certificado de seguridad del sitio.

HTTPS es ampliamente utilizado en sitios web de e-commerce o en cualquier lugar en el que se

accede a información confidencial. Esta forma de autenticación proporciona un alto estándar de
seguridad, porque cada operación de intercambio de información entre el servidor y el navegador
está cifrada y se envía a través de un canal seguro.

ACTIVIDAD 11

Realizar una investigación sobre el servicio de dominio y hosting, para posteriormente con
la ayuda del docente poder registrarse en uno de los servicios gratuitos y subir su sitio
creado anteriormente.

38 INTRODUCCIÓN A APLICACIONES WEB

SUBMÓDULO 2
ELABORA APLICACIONES
MÓVILES

Competencias Genéricas Competencias Profesionales Básicas

4. Escucha, interpreta y emite mensajes CPBP2. Implementa sistemas básicos

pertinentes en distintos contextos mediante la de programación de forma creativa y
utilización de medios, códigos y herramientas emprendedora, de manera ética y responsable.
apropiados.
CG4.1 Expresa ideas y conceptos mediante CPBP4. Desarrolla aplicaciones web para
representaciones lingüísticas, matemáticas o difundir información con un sentido crítico,
gráficas. autocritico y ético.
CG4.5 Maneja las tecnologías de la información
y la comunicación para obtener información y CPBP5. Integra estructuras de programación,
expresar ideas. para la implementación de proyectos
asegurando eficiencia para contribuir en el
5. Desarrolla innovaciones y propone logro de los objetivos.
soluciones a problemas a partir de métodos
establecidos.
CG5.6 Utiliza las Tecnologías de la Información
y Comunicación para procesar e interpretar
información.
 Formación para el Trabajo - Sexto Semestre

SUBMÓDULO
ELABORA APLICACIONES

2 Interdisciplinariedad
MÓVILES

Ejes Transversales
¾ Emprendimiento.
¾ Álgebra Intermedia II. ¾ Vinculación Laboral.
¾ Cálculo Integral. ¾ Iniciar, continuar y concluir sus estudios de
nivel superior.

Aprendizajes esperados
• Opera la arquitectura Android y la forma en que una app hace uso de las distintas capas que la
conforman, para reconocer los elementos disponibles que le permitan desarrollar aplicaciones
elementales que se ejecuten en un emulador o celular Android, el cual será implementado en
un dispositivo telefónico, relacionándose de forma colaborativa, promoviendo su creatividad.

Conocimientos
Habilidades Actitudes
Básicos
Conceptos Básicos: Distingue entre tipos de Escucha y participa
y iOS o Android. aplicaciones móviles y los efectivamente.
y Tipos de apps. principales ecosistemas
actuales. Aporta ideas en la solución
Capas o arquitectura de la de problemas promoviendo
plataforma Android. Reconoce las capas de su creatividad.
la plataforma Android y
y Kernel. sus responsabilidades e Se relaciona con sus
y Abstracción Hardware. interacciones. semejantes de forma
y Runtime y librerías colaborativa mostrando
nativas. Utiliza un entorno de disposición al trabajo
y Android API. desarrollo para la elaboración metódico y organizado.
y Aplicaciones. de apps Android.

Entornos de desarrollo de
aplicaciones móviles y sus
emuladores.

Elementos fundamentales
en la elaboración de apps
Android nativas.

40 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

DIAGNÓSTICO: De forma individual responde las siguientes preguntas, posteriormente el

docente conducirá en plenaria la participación del grupo para comentar las respuestas.

1.- ¿Cuáles son los sistemas operativos para dispositivos móviles más conocidos?
____________________________________________________________________________
____________________________________________________________________________
2.- ¿Cuáles son los dispositivos móviles más usados?
____________________________________________________________________________
____________________________________________________________________________
3.- ¿Cuáles son los componentes más usados en una interfaz de usuario para una aplicación móvil?
____________________________________________________________________________
____________________________________________________________________________
4.- ¿Qué es una aplicación móvil?
____________________________________________________________________________
____________________________________________________________________________
5.- ¿Qué es una plataforma abierta?
____________________________________________________________________________
____________________________________________________________________________
6.- ¿Qué es un emulador?
____________________________________________________________________________
____________________________________________________________________________
7 ¿Qué es Android?
____________________________________________________________________________
____________________________________________________________________________

1.- CONCEPTOS BÁSICOS

1.1.- SISTEMAS OPERATIVOS MÓVILES

1.1.1.- ¿Qué es un sistema operativo?

Un Sistema Operativo: Es un Programa (software) que se inicia al encender el ordenador o el
teléfono móvil y se encarga de gestionar todos los recursos del sistema informático, tanto de
hardware (partes físicas, disco duro, almacenamiento, pantalla, teclado, etc.) como el software
(programas e instrucciones) permitiendo así la comunicación entre el usuario y el ordenador. En
definitiva controlan el ordenador, el teléfono móvil o
la tableta y nos permite comunicarnos con ellos de
forma sencilla.

1.1.2.- Sistemas operativos para móviles

Los sistemas operativos usados para los teléfonos
móviles, celulares o smartphone son muchos, pero
hay 2 que son los principales y que ocupan casi
todo el mercado de la telefonía móvil: Android e
iOS. Seguidos pero con mucha diferencia estarían
Symbian, Blackberry OS y Windows Phone.

SUBMÓDULO 2 41
 Formación para el Trabajo - Sexto Semestre

En el gráfico siguiente se representa el porcentaje

de cada uno de los sistemas operativos utilizados
en los teléfonos móviles:

1.1.3.- Plataformas de software móvil

Actualmente existen dos plataformas en los

sistemas operativos ya sea para computadora o
dispositivos móviles: las de fuente cerrada y las de
código abierto.

y Software móvil de código abierto

Las plataformas de código abierto son aquellas que pueden ser usadas por cualquier usuario sin
restricciones ni pagos, existen miles de sistemas operativos móviles de código abierto, actualmente
el sistema operativo más grande y más popular en dispositivos móviles es Android desarrollado por
Google Inc. y puede ser usado en cualquier dispositivo móvil.

y Software móvil de código cerrado

Las plataformas de fuente cerrada son conocidas con ese nombre por ser privadas y normalmente
de pago, como en el caso de los sistemas de Microsoft, estas plataformas son totalmente
inmodificables y los usuarios se deben adaptar a las actualizaciones que son lanzadas por las
marcas que son dueñas del sistema, para dispositivos móviles el sistema operativo de fuente
cerrada más usado es iOS desarrollado por Apple Inc., es de uso exclusivo para dispositivos
Apple.

1.1.4.- Android OS – Google Inc.

Es el sistema operativo líder en la actualidad en el mercado de los sistemas operativos de teléfonos

inteligentes para dispositivos móviles. Se lanzó en septiembre de
2008 con el nombre de ‘Astro’, luego apareció Bender & Cupcake.
Pero más tarde, Google adoptó “Android” como título para su
actualización regular de nuevas versiones que salen.

Versiones de Android: Jelly-Bean, KitKat, Lollipop, Marshmallow,

Nougat, Oreo y su última versión Android Pie-. Estas son versiones
que ha modificado y mejorado año con año el sistema operativo
Android. Está programado en C, C ++, Java y funciona con kernel
de Linux y fabricado por Google Inc.

Es un sistema operativo de código abierto que permite a los desarrolladores modificarlo de la

forma que quieran. Android es el sistema operativo que soporta la mayor cantidad de aplicaciones
gracias a la tienda Google Play Store, es por eso que hay millones de aplicaciones para Android
que se inventan día a día y se almacenan públicamente.

Debido a la adaptabilidad de las aplicaciones y la productividad del sistema operativo, incluida la

disponibilidad de aplicaciones gratuitas el sistema operativo Android es el sistema líder y dominante
con un gran número de usuarios, lo que lo convierte en el número uno de la lista del mejor sistema
operativo para teléfonos móviles.

42 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

1.1.5.- iOS – Apple Inc.

Es uno de los sistemas operativos para dispositivos móviles
especialmente diseñados y desarrollados por Apple como iPhone, iPad
y iPod, etc. Está programado en C, C ++, Objective-C, Swift & se lanzó
en julio de 2007.

La compañía no licencia el iOS para hardware de terceros, por lo que este

sistema operativo está disponible solo en sus dispositivos fabricados, ya
que su base principal es proporcionada por el sistema operativo Apple
Mac OS X. Esto hace que miles de desarrolladores no puedan publicar
sus aplicaciones en la App Store (Tienda oficial de Apple).

1.1.6.- Windows Phone – Microsoft Corporation

Este sistema es desarrollado por Microsoft, Nokia había detenido el desarrollo del sistema operativo
Symbian que era usado anteriormente en teléfonos Nokia, Microsoft adquirió el sistema y saco una
versión mejorada enfocada para móviles llamada Windows Phone.
Este sistema operativo Windows tiene su propia interfaz gráfica
de usuario (GUI) única, llamada interfaz de usuario basada en
mosaicos, que los hace más elegantes en comparación con sus
competidores. Incluso tiene un diseño y funcionalidad pulidos,
la mayoría de los usuarios lo encuentran un poco complicado y
más compacto para operarlo.
Este sistema operativo proporciona el mejor soporte para ver,
editar y crear documentos de oficina. Además, herramientas
como Microsoft Word, PowerPoint, Excel están ahí directamente
en tu teléfono con Windows.

ACTIVIDAD 1

Realiza una investigación de las últimas cuatro versiones de cada sistema operativo móvil,
redacta sus principales características y cambios que se han implementado. Puedes realizar
el trabajo en tu cuaderno.

ANDROID:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
iOS:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Windows Phone:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
SUBMÓDULO 2 43
 Formación para el Trabajo - Sexto Semestre

ACTIVIDAD 2

Realiza una lectura del tema 1.2. Aplicaciones móviles, subraya los puntos más importantes
y al finalizar elabora un resumen con tus propias palabras respecto a lo entendido del tema.

1.2.- APLICACIONES MÓVILES

1.2.1.- Tipos de aplicaciones

Los tipos de aplicaciones son:

1. Móvil
2. Web
3. De escritorio.
La anterior es una forma básica de clasificarlas. Ya sea que existen otras maneras, pero lo más
importante de entender es lo siguiente: Que una aplicación móvil se refiere a aquellas que son
diseñadas para los smartphones o las tabletas, las más comunes son la cámara, las de redes
sociales (Whatsapp, Facebook, Instagram, etc.) o incluso la aplicación donde ponemos nuestra
alarma cada día.
Las aplicaciones diseñadas para las computadoras de escritorio o las laptops se conocen como
aplicaciones de escritorio. Las más comunes son: Word (que a pesar de que es para la tarea
específica de edición de textos, viene con muchas funciones) o la calculadora.

Finalmente, una aplicación web es aquella que se almacena en un servidor remoto (es decir, no
en nuestra computadora personal o smartphones, como lo son las aplicaciones de escritorio o
móviles), se entrega a través de Internet por medio de un navegador, no necesitan ser instaladas
lo que trabajamos es procesado en la Web, algunos ejemplos son servicios de correo electrónico
(Gmail, Yahoo, etc.), programas ofimáticos (Google Docs, Microsoft Office Online), servicios de
televisión online (Netflix), etc.

1.2.2.- ¿Qué es una aplicación móvil?

Una aplicación móvil es un programa que se puede descargar y al que se puede

acceder directamente desde un teléfono o desde algún otro aparato móvil como
por ejemplo una tableta o un reproductor MP3.

¿Qué se necesita para descargar y usar una aplicación?

y Un smartphone con acceso a Internet. No todas las aplicaciones funcionan en todos los
aparatos móviles.
y Cuando se compra uno de estos aparatos debe usar el sistema operativo y el tipo de
aplicaciones que corresponde a ese aparato.
y Los sistemas operativos móviles Android, Apple, Microsoft y BlackBerry tienen tiendas de
aplicaciones que operan en línea en las cuales usted puede buscar, descargar e instalar las
aplicaciones.

44 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

¿Por qué hay algunas aplicaciones gratis?

Algunas aplicaciones son distribuidas gratuitamente por tiendas de aplicaciones. Los creadores de
estas aplicaciones pueden ganar dinero de las siguientes maneras:
y Algunos proveedores venden un espacio publicitario dentro de la aplicación.
y Algunas aplicaciones ofrecen versiones básicas gratuitas.
y Algunas aplicaciones le permiten comprar más funciones de la misma aplicación (“in-app
purchases” en inglés).

¿A qué tipo de datos pueden acceder las aplicaciones?

Cuando se registra en una tienda de aplicaciones, es posible que le pidan su autorización para
que permita que se acceda a la información de su aparato. Desde algunas aplicaciones se puede
acceder a:
y Su lista de contactos de teléfono y de email.
y Al registro de llamadas.
y A los datos transmitidos por internet.
y A la información de su calendario.
y A los datos de localización del aparato.
y Al código de identificación exclusivo de su aparato.
y A información que indica la manera en que usted usa la aplicación propiamente dicha.
Mientras se usa un aparato móvil se está suministrando información, alguien puede recolectarla. Y
si recolectan los datos, es posible que los compartan con otras compañías.

¿Puede una aplicación infectar un teléfono con un programa malicioso?

Algunos piratas informáticos han creado aplicaciones que pueden infectar teléfonos y aparatos
móviles con programas maliciosos.

Si piensa que su aparato está infectado con un programa malicioso, se tiene algunas opciones.

y Puede comunicarse con el servicio al cliente de la compañía que fabricó su aparato.

y Puede establecer contacto con su proveedor de telefonía móvil para pedir asistencia; o puede
instalar una aplicación de seguridad para escanear y eliminar las aplicaciones en caso de
que detecte un programa malicioso.
y Las aplicaciones de seguridad para teléfonos móviles son relativamente nuevas; sólo hay
algunas pocas en el mercado incluyendo algunas versiones gratuitas.

RESUMEN:
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________
_____________________________________________________________________________

SUBMÓDULO 2 45
 Formación para el Trabajo - Sexto Semestre

2.- ANDROID

Android es un sistema operativo basado en el núcleo Linux. Fue diseñado principalmente para
dispositivos móviles con pantalla táctil, como teléfonos inteligentes, tabletas o tabléfonos; así como
para relojes inteligentes, televisores y automóviles.

ACTIVIDAD 3 Mediante una investigación en Internet, define los siguientes conceptos.

IDE:____________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

Framework:____________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________

APK:____________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

SDK:___________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

Karnelnel: ________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

API:_____________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

46 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

ACTIVIDAD 4

Lee y elabora en tu cuaderno un mapa conceptual sobre el tema 2.1.

2.1.- Arquitectura de la plata-forma

Android

Android es una pila de software de código

abierto basado en Linux creada para una
variedad amplia de dispositivos y factores
de forma. En el siguiente diagrama se
muestran los componentes principales de la
plataforma Android.

Kernel de Linux
La base de la plataforma Android es el kernel
de Linux. Por ejemplo, el tiempo de ejecución
de Android (ART) se basa en el kernel de
Linux para funcionalidades subyacentes,
como la generación de subprocesos y la
administración de memoria de bajo nivel.

El uso del kernel de Linux permite que Android

aproveche funciones de seguridad claves y,
al mismo tiempo, permite a los fabricantes
de dispositivos desarrollar controladores de
hardware para un kernel conocido.

Esta capa del modelo actúa como capa de

abstracción entre el hardware y el resto de
la pila.

Por lo tanto, es la única que es dependiente del hardware.

Capa de abstracción de hardware (HAL)

La capa de abstracción de hardware (HAL) brinda interfaces estándares que exponen las
capacidades de hardware del dispositivo al framework de la Java API de nivel más alto. La HAL
consiste en varios módulos de biblioteca y cada uno de estos implementa una interfaz para un tipo
específico de componente de hardware, como el módulo de la cámara o de bluetooth. Cuando el
framework de una API realiza una llamada para acceder a hardware del dispositivo, el sistema
Android carga el módulo de biblioteca para el componente de hardware en cuestión.

SUBMÓDULO 2 47
 Formación para el Trabajo - Sexto Semestre

Android Runtime
Para los dispositivos con Android 5.0 (nivel de API 21) o versiones posteriores, cada app ejecuta
sus propios procesos con sus propias instancias del tiempo de ejecución de Android (ART). El ART
está escrito para ejecutar varias máquinas virtuales en dispositivos de memoria baja ejecutando
archivos DEX, un formato de código de bytes diseñado especialmente para Android y optimizado
para ocupar un espacio de memoria mínimo. Crea cadenas de herramientas, como Jack, y compila
fuentes de Java en código de bytes DEX que se pueden ejecutar en la plataforma Android.
Estas son algunas de las funciones principales del ART:
y Compilación ahead-of-time (AOT) y just-in-time (JIT);
y Recolección de elementos no usados (GC) optimizada;
y Mejor compatibilidad con la depuración, como un generador de perfiles de muestras dedicado,
excepciones de diagnóstico detalladas e informes de fallos, y la capacidad de establecer
puntos de control para controlar campos específicos.
Antes de Android 50 (nivel de API 21), Dalvik era el tiempo de ejecución del sistema operativo. Si
tu app se ejecuta bien en el ART, también debe funcionar en Dalvik, pero es posible que no suceda
lo contrario.
En Android también se incluye un conjunto de bibliotecas de tiempo de ejecución centrales que
proporcionan la mayor parte de la funcionalidad del lenguaje de programación Java; se incluyen
algunas funciones del lenguaje Java 8, que el framework de la Java API usa.

Librerías nativas C/C++

Estas han sido escritas utilizando C/C++ y proporcionan a Android la mayor parte de sus
capacidades más características. Junto al núcleo basado en Linux, estas librerías constituyen el
corazón de Android.

Entre las librerías más importantes ubicadas aquí, se pueden encontrar las siguientes:

9 Librería libc: Incluye todas las cabeceras y funciones según el estándar del lenguaje C.
Todas las demás librerías se definen en este lenguaje.
9 Librería Surface Manager: Es la encargada de componer los diferentes elementos de
navegación de pantalla. Gestiona también las ventanas pertenecientes a las distintas
aplicaciones activas en cada momento.
9 OpenGL/SL y SGL: Representan las librerías gráficas y, por tanto, sustentan la capacidad
gráfica de Android. OpenGL/SL maneja gráficos en 3D y permite utilizar, en caso de que esté
disponible en el propio dispositivo móvil, el hardware encargado de proporcionar gráficos 3D.
Por otro lado, SGL proporciona gráficos en 2D, por lo que será la librería más habitualmente
utilizada por la mayoría de las aplicaciones. Una característica importante de la capacidad
gráfica de Android es que es posible desarrollar aplicaciones que combinen gráficos en 3D
y 2D.
9 Librería Media Libraries: Proporciona todos los códecs necesarios para el contenido
multimedia soportado en Android (vídeo, audio, imágenes estáticas y animadas, etc.)
9 FreeType: Permite trabajar de forma rápida y sencilla con distintos tipos de fuentes.

48 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

9 Librería SSL: Posibilita la utilización de dicho protocolo para establecer comunicaciones

seguras.
9 Librería SQLite: Creación y gestión de bases de datos relacionales.
9 Librería WebKit: Proporciona un motor para las aplicaciones de tipo navegador y forma el
núcleo del actual navegador incluido por defecto en la plataforma Android.

Java API Framework

Representa fundamentalmente el conjunto de herramientas de desarrollo de cualquier aplicación.

Toda aplicación que se desarrolle para Android, ya sean las propias del dispositivo, las desarrolladas
por Google o terceras compañías, o incluso las que el propio usuario cree, utilizan el mismo conjunto
de API y el mismo "framework", representado por este nivel.

Entre las API más importantes ubicadas aquí, se pueden encontrar las siguientes:
9 Activity Manager: Conjunto de API que gestiona el ciclo de vida de las aplicaciones en
Android.
9 Window Manager: Gestiona las ventanas de las aplicaciones y utiliza la librería Surface
Manager.
9 Telephone Manager: Incluye todas las API vinculadas a las funcionalidades propias del
teléfono (llamadas, mensajes, etc.).
9 Content Provider: Permite a cualquier aplicación compartir sus datos con las demás
aplicaciones de Android. Por ejemplo, gracias a esta API la información de contactos, agenda,
mensajes, etc. será accesible para otras aplicaciones.
9 View System: Proporciona un gran número de elementos para poder construir interfaces de
usuario (GUI), como listas, mosaicos, botones, "check-boxes", tamaño de ventanas, control
de las interfaces mediante teclado, etc. Incluye también algunas vistas estándar para las
funcionalidades más frecuentes.
9 Location Manager: Posibilita a las aplicaciones la obtención de información de localización
y posicionamiento.
9 Notification Manager: Mediante el cual las aplicaciones, usando un mismo formato,
comunican al usuario eventos que ocurran durante su ejecución: una llamada entrante, un
mensaje recibido, conexión Wi-Fi disponible, ubicación en un punto determinado, etc. Si
llevan asociada alguna acción, en Android denominada Intent, (por ejemplo, atender una
llamada recibida) ésta se activa mediante un simple clic.
9 XMPP Service: Colección de API para utilizar este protocolo de intercambio de mensajes
basado en XML.

Apps del sistema

En Android se incluye un conjunto de apps centrales para correo electrónico, mensajería SMS,
calendarios, navegación en Internet y contactos, entre otros elementos. Las apps incluidas en la
plataforma no tienen un estado especial entre las apps que el usuario elije instalar; por ello, una
app externa se puede convertir en el navegador web, el sistema de mensajería SMS o, incluso,
el teclado predeterminado del usuario (existen algunas excepciones, como la app Settings del
sistema).

SUBMÓDULO 2 49
 Formación para el Trabajo - Sexto Semestre

Las apps del sistema funcionan como apps para los usuarios y brindan capacidades claves a las
cuales los desarrolladores pueden acceder desde sus propias apps. Por ejemplo, si en tu app
se intenta entregar un mensaje SMS, no es necesario que compiles esa funcionalidad tú mismo;
como alternativa, puedes invocar la app de SMS que ya está instalada para entregar un mensaje
al receptor que especifiques.

ACTIVIDAD 5

Lee y elabora en tu cuaderno un cuadro sinóptico sobre el tema 2.2.

2.2.- Aplicaciones en Android

Una aplicación Android corre dentro de su propio proceso Linux, por tanto, una característica
fundamental de Android es que el tiempo y ciclo de vida de una aplicación no está controlado por
la misma aplicación sino que lo determina el sistema a partir de una combinación de estados como
pueden ser qué aplicaciones están funcionando, qué prioridad tienen para el usuario y cuánta
memoria queda disponible en el sistema.

Una aplicación en Android debe declarar todas sus actividades, los puntos de entrada, la
comunicación, las capas, los permisos, y las intenciones a través de AndroidManifest.xml
(ver punto 3.2 Interfaces de Usuario). Es muy importante tener en consideración cómo estos
componentes impactan en el tiempo de vida del proceso asociado con una aplicación, porque si no
son empleados de manera apropiada, el sistema detendrá el proceso de la aplicación aun cuando
se esté haciendo algo importante.

Componentes de una aplicación android

9 Activity: Sin duda es el componente más habitual de las aplicaciones para Android. Un
componente Activity refleja una determinada actividad llevada a cabo por una aplicación, y que
lleva asociada típicamente una ventana o interfaz de usuario; es importante señalar que no
contempla únicamente el aspecto gráfico, sino que éste forma parte del componente Activity
a través de vistas representadas por clases como View y sus derivadas. Este componente
se implementa mediante la clase de mismo nombre Activity. La mayoría de las aplicaciones
permiten la ejecución de varias acciones a través de la existencia de una o más pantallas.
Por ejemplo, piénsese en una aplicación de mensajes de texto. En ella, la lista de contactos
se muestra en una ventana. Mediante el despliegue de una segunda ventana, el usuario
puede escribir el mensaje al contacto elegido, y en otra tercera puede repasar su historial de
mensajes enviados o recibidos. Cada una de estas ventanas debería estar representada a
través de un componente Activity, de forma que navegar de una ventana a otra implica lanzar
una actividad o dormir otra. Android permite controlar por completo el ciclo de vida de los
componentes Activity.

50 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

Las actividades tienen cuatro posibles estados: Activa, pausada, parada y reiniciada.

9 Intent: Un Intent consiste básicamente en la voluntad de realizar alguna acción, generalmente

asociada a unos datos. Lanzando un Intent, una aplicación puede delegar el trabajo en
otra, de forma que el sistema se encarga de buscar qué aplicación de entre las instaladas,
es la que puede llevar a cabo la acción solicitada. Por ejemplo, abrir una URL en algún
navegador web, o escribir un correo electrónico desde algún cliente de correo. Los Intents
están incluidos en el AndroidManifest porque describen dónde y cuándo puede comenzar
una actividad. Cuando una actividad crea un Intent, éste puede tener descriptores de lo que
se quiere hacer. Una vez se está ejecutando la aplicación, Android compara esta información
del Intent con los Intents de cada aplicación, eligiendo el más adecuado para realizar la
operación especificada por el llamante.

9 Broadcast Intent Receiver: Un componente Broadcast Intent Receiver se utiliza para lanzar
alguna ejecución dentro de la aplicación actual cuando un determinado evento se produzca
(generalmente, abrir un componente Activity). Por ejemplo, una llamada entrante o un SMS
recibido. Este componente no tiene interfaz de usuario asociada, pero puede utilizar el API
Notification Manager para avisar al usuario del evento producido a través de la barra de
estado del dispositivo móvil. Este componente se implementa a través de una clase de
nombre BroadcastReceiver. Para que Broadcast Intent Receiver funcione, no es necesario
que la aplicación en cuestión sea la aplicación activa en el momento de producirse el evento.
El sistema lanzará la aplicación si es necesario cuando el evento monitorizado tenga lugar.

9 Service: Un componente Service representa una aplicación ejecutada sin interfaz de usuario,
y que generalmente tiene lugar en segundo plano mientras otras aplicaciones (éstas con
interfaz) son las que están activas en la pantalla del dispositivo. Un ejemplo típico de este
componente es un reproductor de música. La interfaz del reproductor muestra al usuario
las distintas canciones disponibles, así como los típicos botones de reproducción, pausa,
volumen, etc. En el momento en el que el usuario reproduce una canción, ésta se escucha
mientras se siguen visualizando todas las acciones anteriores, e incluso puede ejecutar una
aplicación distinta sin que la música deje de sonar. La interfaz de usuario del reproductor
sería un componente Activity, pero la música en reproducción sería un componente Service,
porque se ejecuta en background. Este elemento está implementado por la clase de mismo
nombre Service.

9 Content Provider: Con el componente Content Provider, cualquier aplicación en Android

puede almacenar datos en un fichero, en una base de datos SQLite o en cualquier otro formato
que considere. Además, estos datos pueden ser compartidos entre distintas aplicaciones.
Una clase que implemente el componente Content Provider contendrá una serie de métodos
que permiten almacenar, recuperar, actualizar y compartir los datos de una aplicación. Existe
una colección de clases para distintos tipos de gestión de datos en el paquete android.
provider.

SUBMÓDULO 2 51
 Formación para el Trabajo - Sexto Semestre

2.3.- Android Studio

2.3.1.- ¿Qué es Android Studio?

Android Studio es un entorno de desarrollo integrado para la plataforma Android. Fue anunciado el
16 de mayo de 2013 en la conferencia Google I/O, y reemplazó a Eclipse como el IDE oficial para
el desarrollo de aplicaciones para Android.

2.3.2 Instalación de Android Studio

¾ Requisitos del Sistema

Un prerrequisito para instalar Android Studio, es que primero se debe descargar e instalar Java SE
Development Kit.
En la página oficial de JAVA en la opción Java SE Development Kit (versión), marcamos el radio
button para aceptar los términos de licencia y descargamos el Java SE Development Kit que se
adecue a nuestros requerimientos.

Una vez descargado se debe

ejecutar el archivo con extensión
.exe y seguir las instrucciones
habituales de cualquier aplicación
Windows. Para otro sistema
operativo son los mismos pasos
lo que cambia es la extensión del
archivo descargado.

52 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

¾ Descarga para Windows

PASO 1: Buscar en Google Android

studio e ingresar al primer enlace.

PASO 2: Clic en el botón verde

Descargar.

PASO 3: Activar la casilla para

aceptar términos y condiciones y
clic en el botón azul de descarga.

PASO 4: Por último presionar en la

opción Guardar archivo.

SUBMÓDULO 2 53
 Formación para el Trabajo - Sexto Semestre

¾ Instalación en Windows

PASO 1: Identificar el archivo descargado, regularmente

se guarda en la carpeta Descargas y dar doble clic.

PASO 2: Clic en ejecutar y en la siguiente ventana en

permitir.

PASO 3: Clic en siguiente,

para continuar dejar todo
igual y otra vez siguiente.

PASO 4: Es importante co-

nocer el directorio o carpe-
ta de instalación, una vez
identificado dar en siguien-
te, y por último en Instalar.

PASO 5. Esperar a que termine

la instalación y dar en siguiente,
en la última ventana con la casilla
elegimos si queremos iniciar
Android Studio y presionar en
finalizar.

54 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

2.3.3.- Primeros pasos con el IDE

Cuando se abre por primera vez Android Studio, el programa realizará una serie de configuraciones
que es importante leerlas y dar siguiente a todas las ventanas que se van abriendo.

Al término de las configuraciones la primera ventana que se muestra para comenzar a trabajar es
la siguiente.

Ventana de bienvenida

ACTIVIDAD 6

Atendiendo la explicación del profesor. Coloca el número que corresponda a la opción

señalada en la imagen anterior con la acción que realiza.

____ Permite generar perfiles y depurar APK sin tener que compilarlos desde un proyecto.
____ Abrir un proyecto existente.
____ Importar proyectos desde otros IDE.
____ Verificar e integrar un proyecto desde un control de versiones.
____ Permite acceder al sistema de ayuda del IDE.
____ Indica la versión del IDE.
____ Crea un proyecto de Android Studio.
____ Configurar el IDE.
____Importar un código de ejemplo.

SUBMÓDULO 2 55
 Formación para el Trabajo - Sexto Semestre

Crear un proyecto nuevo

Para crear un nuevo proyecto ejecutaremos

Android Studio y desde la pantalla de bienvenida
pulsaremos la opción “Start a new Android Studio
project” para iniciar el asistente de creación de un
nuevo proyecto.

Si ya habíamos abierto anteriormente Android

Studio es posible que se abra directamente la
aplicación principal en vez de la pantalla de
bienvenida. En ese caso accederemos al menú
“File / New project” para crear el nuevo proyecto.

En la siguiente ventana se debe seleccionar las

opciones “Phone and Tablet” y ”Empty Activity”
seguidamente presionar el botón Siguiente.

Esta es la ventana de configuración de nuestro

primer proyecto.
1.- Nombre de la aplicación
2.- Nombre del paquete que nos permitirá
mantener organizada las clases.
3.- Directorio donde se almacenan los archivos
de nuestra aplicación.
4.- Opciones para seleccionar el lenguaje de
programación con el que se va programar.
5.- Versión de Android para el cual va ser
programada nuestra app, se recomienda API
15 para que sea compatible con cualquier
dispositivo Android.

Con el fin de seguir la explicación se dejará todo

como se muestra en la imagen, posteriormente
se tendrá la oportunidad de crear nuevos
proyectos modificando los parámetros. (Clic en
Finalizar).

Nota: Si estás utilizando otra versión de Android Studio el orden de configuración puede variar
pero los campos son los mismos.

56 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

Interfaz de usuario

ACTIVIDAD 7

Observa la siguiente imagen y coloca el número que corresponde al nombre y función de

cada elemento de la interfaz de usuario.

____La barra de navegación te ayuda a explorar tu proyecto y abrir archivos para editar.
Proporciona una vista más compacta de la estructura visible en la ventana Project.

____La ventana del editor es el área donde puedes crear y modificar código. Según el tipo de
archivo actual, el editor puede cambiar. Por ejemplo, cuando se visualiza un archivo de diseño, el
editor muestra el editor de diseño.

____La barra de la ventana de herramientas se extiende alrededor de la parte externa de

la ventana del IDE y contiene los botones que te permiten expandir o contraer ventanas de
herramientas individuales.

____La barra de herramientas te permite realizar una gran variedad de acciones, como la
ejecución de tu app y el inicio de herramientas de Android.

____Las ventanas de herramientas te permiten acceder a tareas específicas, como la

administración de proyectos, las búsquedas, los controles de versión, etc. Puedes expandirlas y
contraerlas.

____En la barra de estado, se muestra el estado de tu proyecto y del IDE en sí, como también
cualquier advertencia o mensaje.

SUBMÓDULO 2 57
 Formación para el Trabajo - Sexto Semestre

MI PRIMERA APP

Ejercicio para mostrar texto, imagen y botón en pantalla

Desarrollar un proyecto con el código para mostrar una pantalla que contenga la frase “Bienvenidos
a Sexto Semestre”, mediante la utilización del elemento Text. Como se muestra en la siguiente
imagen.

Proceso de desarrollo:

1. Una vez creado el proyecto entrar

a la actividad principal.

2. Ruta de acceso res/layout/

activity_main.xml

3. Seleccionar la opcion Desing

(donde se visualizan la pantalla).

4. Entramos a los atributos

( a t t r i b u t e s ) / Te x t V i e w / Te x t /
Cambiar el texto a visualizar.

5. El código de programación se
encuentra dando clic en la parte
inferior del menu, lo encuentras
en la pestaña de Text.

58 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

Para desarrollar el código para agregar dos líneas de texto o más, deberá estar anclado como
mínimo a 2 extremos de la pantalla y al elemento superior, aunque es recomendable anclarla en
los cuatro puntos. Como se muestra en la siguiente imagen.

Proceso de desarrollo:

1. Con el proyecto ya creado se

modificará entrando a content_
main.xml.

2. Ruta de acceso res/layout/contet_

main.xml

3. Seleccionar la opcion Desing

(donde se visualiza la pantalla).

4. Entramos a los atributos (attributes)/

TextView/Text/ Cambiar el texto a
visualizar.

5. Se va Text (código) para agregar String.

6. Se selecciona el texto capturado y debe

aparecer el foco.

7. Seleccionar Extract string resource.

8. Aparece la pantalla donde informa

como aparecerá el String.

9. Ya cuando tiene String aparecen

como la pantalla siguiente.

SUBMÓDULO 2 59
 Formación para el Trabajo - Sexto Semestre

10. Para anclar las pantallas debes seleccionar el objeto y aparece la

siguiente pantalla:

11. Debes dar clic en las flechas:

12. Enseguida quedará anclado a los extremos que hayas

seleccionado, como la siguiente pantalla:

Insertar imágenes que incluye Android Studio

Vamos a seleccionar en Pallet Widgets

ImageView y dejamos presionado el
mouse, arrastramos hasta el lugar que se
requiera.

Enseguida aparecerá
una pantalla como ésta:

En la cual podrás elegir si quieres agregar un avatar,

alguna imagen, entre otras cosas más.

60 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

En nuestro caso seleccionamos

un avatar.

Insertar una imagen externa

Se debe de agregar un recurso por cada imagen que queramos

agregar. Por ejemplo para poder agregar un recurso:

Ir primero al fólder app res drawable, presionar botón derecho.

Aparecerá el menú contextual. Debemos de seleccionar Show in

Explorer.

Ahora tendremos que copiar las imágenes

que se quieran agregar al proyecto (imagen1.jpg):

Ir al Pallete Common ImageView o Pallete

Widgets ImageView dejar el botón derecho
presionado en ImageView y arrastrar hasta el
lugar deseado.

Aparecerá una pantalla de la siguiente forma:

SUBMÓDULO 2 61
 Formación para el Trabajo - Sexto Semestre

Buscar en Project imagen1 en este caso.

Acomodar la imagen según se desee.

Agregar un botón para Salir de la aplicación

Ir a Palette Buttons Button arrastrar

el botón y colocarlo en el lugar que se
requiera.

Podemos cambiar el texto que aparece en

el botón en los atributos o propiedades del
mismo, todo como ya se había indicado
anteriormente.

Para darle funcionalidad al botón: Ir al código java. Podría ser MainActivity.java o como lo hayas
nombrado.

En los atributos del botón que se puso para “Salir”, seleccionar la función onSalir.

ACTIVIDAD 8

Tomando como ejemplo la guía anterior

deberás desarrollar como actividad, el
código que te genere la siguiente pantalla
y la aplicación nombrada “Mi segunda
aplicación”, donde el único botón funcional
será el de Salir.

62 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

Suma de dos números

Confeccionar un programa que permita la carga de dos números enteros en controles de tipo
EditText (Number). Mostrar dentro de los mismos controles EditText mensajes que soliciten la carga
de los valores. Disponer un Button para sumar los dos valores ingresados. Mostrar el resultado en
un control de tipo TextView.

La interfaz visual debe quedar algo

semejante a esto:

DESARROLLO

Crear un proyecto llamado: Proyecto002.

Veamos paso a paso como creamos

la interfaz visual de nuestro programa.
Primero borramos el TextView que
aparece por defecto cuando se crea
un proyecto con el Android Studio.
Ahora desde la ventana "Palette"
seleccionamos de la pestaña "Text
Fields (EditText)" el control "Number" (es
de la clase EditText) lo arrastramos a la
ventana de diseño de nuestra interfaz a
la parte superior izquierda:

SUBMÓDULO 2 63
 Formación para el Trabajo - Sexto Semestre

Ahora lo seleccionamos y en la ventana de

propiedades (Properties) especificamos
la propiedad hint, disponemos el texto
"Ingrese el primer valor":

También vamos a especificar la

propiedad "id", y le asignaremos el
valor et1.

Hemos entonces asignado como nombre a este objeto: et1 (recordemos que se trata de un objeto
de la clase EditText), este nombre haremos referencia posteriormente desde el programa en Java.

Efectuamos los mismos pasos para crear el segundo EditText de tipo "Number" (iniciamos las
propiedades respectivas). Definimos el id con el nombre et2 y la propiedad hint con el mensaje
"Ingrese el segundo valor", el resultado visual debe ser algo semejante a esto:

64 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

De la pestaña "Widgets" arrastramos un

control de tipo "Button":

Iniciamos la propiedad text con el texto "Sumar" y

la propiedad id la dejamos con el valor ya creado
llamado "button":

Para terminar con nuestra interfaz

visual arrastramos un componente
de tipo "TextView" de la pestaña
"Widgets". Definimos la propiedad id
con el valor "tv1" y la propiedad text
con el texto "Resultado":

La interfaz final debe ser semejante a esta:

SUBMÓDULO 2 65
 Formación para el Trabajo - Sexto Semestre

Si en este momento ejecutamos la aplicación aparece la interfaz visual correctamente pero cuando
presionemos el botón no mostrará la suma.
Hasta ahora hemos trabajado solo con
el archivo xml (activity_main.xml) donde
se definen los controles visuales de la
ventana que estamos creando.

Abrimos seguidamente el archivo Main-

Activity.java que lo podemos ubicar en la
carpeta.
app\java\com\tutorialesprogramacionya\
proyecto002\MainActivity:

La clase MainActivity hereda de la clase AppCompatActivity. La clase AppCompatActivity representa

una ventana de Android que contiene todos los métodos necesarios para crear y mostrar los objetos
que hemos dispuesto en el archivo xml.
El código fuente de la clase MainActivity.java es:

package com.tutorialesprogramacionya.proyecto002;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Como mínimo se debe sobrescribir el método onCreate heredado de la clase AppCompatActivity

donde procedemos a llamar al método setContentView pasando como referencia un valor
almacenado en una constante llamada activity_main contenida en una clase llamada layout que a
su vez la contiene una clase llamada R (veremos más adelante que el Android Studio se encarga
de crear la clase R en forma automática y sirve como puente entre el archivo xml y nuestra clase
MainActivity).
Captura de eventos
Ahora viene la parte donde definimos variables en Java donde almacenamos las referencias a los
objetos definidos en el archivo XML.
Definimos tres variables, dos de tipo EditText y finalmente una de tipo TextView (estas dos clases
se declaran en el paquete android.widget, es necesario importar dichas clases para poder definir
las variables de dichas clases, la forma más fácil de importar las clases es una vez que definimos
el objeto por ejemplo private EditText et1; veremos que aparece en rojo el nombre de la clase y nos
invita el Android Studio a presionar las teclas "Alt" e "Intro" en forma simultánea. Luego el Android
Studio codifica automáticamente la línea que importa la clase: import android.widget.EditText;):

66 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

package com.tutorialesprogramacionya.proyecto002;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private EditText et1;
private EditText et2;
private TextView tv1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
Recordar que la forma más fácil de importar las clases EditText y TextView es escribir las tres
líneas:
private EditText et1;
private EditText et2;
private TextView tv1;
y luego presionar las teclas "Alt" y "Enter" en cada nombre de clase que se debe importar.
Esto hace que se escriban automáticamente los import:
import android.widget.EditText;
import android.widget.TextView;
Los nombres que le asignes a los a los objetos en este caso coinciden con la propiedad id (no es
obligatorio):
private EditText et1;
private EditText et2;
private TextView tv1;
Para la clase Button no es necesario definir un atributo.
En el método onCreate debemos enlazar estas variables con los objetos definidos en el archivo
XML, esto se hace llamando al método findViewById:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv1=(TextView)findViewById(R.id.tv1);
}

SUBMÓDULO 2 67
 Formación para el Trabajo - Sexto Semestre

Al método findViewById debemos pasar la constante creada en la clase R (recordemos que se

crea automáticamente esta clase) el nombre de la constante si debe ser igual con el nombre de la
propiedad del objeto creado en el archivo XML. Como el método findViewById retorna un objeto
de tipo View luego debemos utilizar el operador cast (es decir le antecedemos entre paréntesis el
nombre de la clase).

Ya tenemos almacenados en las variables las referencias a los tres objetos que se crean al llamar
al método:setContentView(R.layout.main);.

Ahora planteamos el método que se ejecutará cuando se presione el botón (el método debe recibir
como parámetro un objeto de la clase View). En nuestro ejemplo se llama sumar:
package com.tutorialesprogramacionya.proyecto002;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private EditText et1;

private EditText et2;
private TextView tv1;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv1=(TextView)findViewById(R.id.tv1);
}

//Este método se ejecutará cuando se presione el botón

public void sumar(View view) {

}
}

Debemos importar la clase View (presionamos las teclas "Alt" y luego "Enter" en forma simultánea)

Ahora debemos ir al archivo XML (vista de diseño)

e inicializar la propiedad onClick del objeto button
con el nombre del método que acabamos de crear
(este paso es fundamental para que el objeto de
la clase Button pueda llamar al método sumar que
acabamos de crear):

68 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

Finalmente implementaremos la lógica para sumar los dos valores ingresados en los controles
EditText:
public void sumar(View view) {
String valor1=et1.getText().toString();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv1.setText(resu);
}
Extraemos el texto de los dos controles de tipo EditText y los almacenamos en dos variables
locales de tipo String. Convertimos los String a tipo entero, los sumamos y el resultado lo enviamos
al TextView donde se muestra la suma (previo a convertir la suma a String).
La clase completa queda entonces como:
package com.tutorialesprogramacionya.proyecto002;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private EditText et1;
private EditText et2;
private TextView tv1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
et1=(EditText)findViewById(R.id.et1);
et2=(EditText)findViewById(R.id.et2);
tv1=(TextView)findViewById(R.id.tv1);
}
//Este método se ejecutará cuando se presione el botón
public void sumar(View view) {
String valor1=et1.getText().toString();
String valor2=et2.getText().toString();
int nro1=Integer.parseInt(valor1);
int nro2=Integer.parseInt(valor2);
int suma=nro1+nro2;
String resu=String.valueOf(suma);
tv1.setText(resu);
}
}

SUBMÓDULO 2 69
 Formación para el Trabajo - Sexto Semestre

Si ejecutamos nuestro programa podemos ver ahora que los

controles EditText muestran los mensajes "Ingrese primer valor"
e "Ingrese segundo valor" (la propiedad hint de los EditText
muestran un mensaje que se borra automáticamente cuando el
operador carga los enteros):

Luego de cargar dos valores al presionar el botón aparece en el

TextView el resultado de la suma de los dos EditText :

ACTIVIDAD 9

Realiza una APP que calcule el área de un triángulo.

ACTIVIDAD INTEGRADORA: Realiza una APP que determine el promedio de un alumno con
base en la calificación de tres materias.
Nota: integrar el botón “Salir” y una imagen que represente la foto del alumno.

70 ELABORA APLICACIONES MÓVILES

PROGRAMACIÓN EN JAVA

REFERENCIAS

SUBMÓDULO 1

Concepto(s/f) HTTP Recuperado de: https://concepto.de/http/

Julián Pérez Porto y Ana Gardey.(2016)Cliente-Servidor Recuperado de:https://definicion.de/

cliente-servidor/

Damián Pérez Valdés (2007) Base de datos Recuperado de: http://www.maestrosdelweb.com/

que-son-las-bases-de-datos/ Redacción de sitio web (s/f),

Servidor de Aplicaciones. Recuperado de: http://www.informaticamoderna.com/ServerApl.htm

Laura Molina(s/f), Aplicación. Recuperadohttps://laurmolina7821.wordpress.com/1-1-2-

aplicaciones-cliente-servidor/

Eswikipedia (s/f). Cliente Recuperado de: https://es.wikipedia.org/wiki/Cliente_

(inform%C3%A1tica)

Imágenes:

https://es.wikipedia.org/wiki/Cliente_(inform%C3%A1tica)#/media/Archivo:ClientronU700.jpg
https://code.visualstudio.com/
https://conceptodefinicion.de/http/
https://es.wikipedia.org/wiki/Modelo_de_base_de_datos
https://www.monografias.com/trabajos105/tecnologias-web/tecnologias-web.shtml
https://laurmolina7821.wordpress.com/1-1-2-aplicaciones-cliente-servidor/

71
 Formación para el Trabajo - Sexto Semestre

SUBMÓDULO 2

Areatecnología, (s/f). Sistemas Operativos Móviles Recuperado de: https://www.

areatecnologia.com/informatica/sistemas-operativos-moviles.html

Universidad politécnica de valencia (s/f). Las versiones de Android y niveles de API

Recuperado de: http://www.androidcurso.com/index.php/recursos/31-unidad-1-vision-general-
y-entorno-de-desarrollo/146-las-versiones-de-android-y-niveles-de-api

Developer (s/f). Android Studio. Recuperado de:

https://developer.android.com/studio/index.html?hl=es-419

Software de comunicaciones (s/f). Aplicaciones de Android, Recuperado de:

https://sites.google.com/site/swcuc3m/home/android/generalidades/aplicacionesandroid

Tutoriales programación ya (s/f). Controles RadioGroup y RadioButton Recuperado

de:https://tutorialesprogramacionya.com/javaya/androidya/androidstudioya/detalleconcepto.
php?codigo=4&inicio=0

Techlandia (s/f). Tipos de autenticación web Recuperado de: https://techlandia.com/tipos-

autenticacion-web-lista_314874/

Imágenes:

https://slideplayer.es/slide/5504359/17/images/23/Sistemas+operativos+para+dispositivos+m%
C3%B3viles.jpg

http://img3.wikia.nocookie.net/__cb20140102013128/telefono/es/images/4/47/Sistemas_
Operativos.png

72 REFERENCIAS