1

Técnico en Informática

Informe de Programación I

Miguel Angel Díaz Barría

2016
 2

INDICE

 Capítulo 1: Antecedentes generales………………………………………pag 3

 1.1 Introducción…………………………………………………………..…..pag 3

 Capítulo 2: Descripción de las labores realizadas …..………………….pag 4

.
 2.1 Descripción de las labores realizadas con el lenguaje HTML…...... pag 4
 2.2 Descripción de las labores realizadas con el lenguaje CSS………..pag 6
 2.3 Hosting web………………………………………………………………pag 7

 Capítulo 3: Proceso de desarrollo en APP inventor 2…………………..pag 9

 3.1 Creación del proyecto ……………….………………………………….pag 9
 3.2 Interfaz gráfica...…………………………………………………….......pag 11
 3.3 Programación en bloques………………………………………………pag 14

 Capítulo 4: Conclusión del informe………………………………………. pag 19

 Conclusión…………………………………………………………………..pag 19
 3

CAPITULO1
ANTECEDENTES GENERALES

1.1 INTRODUCCIÓN

En este informe veremos dos temas importantes basados en el desarrollo web y

aplicación móvil.
En el desarrollo web nos enfocaremos en el proceso de actualización de la página
web (Rock in Peace), la cual está basada en la venta de discos de música. El
objetivo principal es que sea adaptable a los dispositivos móviles como celulares,
Tablet, notebooks y otros. También podremos ver y analizar los códigos utilizados
en el proceso de elaboración y modificación de la página, por ejemplo daré a
conocer códigos de java scripts, HTML 5 y CSS, los cuales son fundamentales para
la adaptación de nuestra web.
En el tema de aplicación móvil nos vamos a dirigir principalmente al desarrollo de
una APP móvil, utilizando como herramienta de diseño y programación a APP
inventor 2, cuya aplicación móvil será ambientada para sistemas operativos android.
Esta aplicación estará basada en la página web creada previamente, llamada “rock
in peace”, la cual está enfocada en el tema de la música rock.
En esta aplicación móvil no solo podremos ver lo que encuentras en el sitio web,
sino que también añadiré una opción donde podremos escuchar los singles de los
discos más vendidos, como también una opción que nos permita abrir nuestra
página web desde el celular, y por último en el sitio web http://rockinpeace.esy.es/,
tendremos la opción de descargar nuestra aplicación.
Finalmente tendremos creada nuestra página web adaptable a dispositivos
informáticos, y también tendremos la APP de dicha web.
 4

CAPITULO 2
DESCRIPCIÓN DE LAS LABORES REALIZADAS

2.1 DESCRIPCIÓN DE LAS LABORES REALIZADAS CON EL CODIGO HTML.

En primer paso para la adaptación de la página web hacia los dispositivos móviles,
también conocido como responsive design, es tener los códigos HTML, que van a
ser modificados como en este caso en particular.
Para hacer esto, primero tenemos que crear un div class, hecho esto crearemos un
contenedor que abarque todo nuestro código, el cual se debe encontrar dentro del
body, y así no tener que modificar en nuestro CSS uno por uno los cambios sino
que tendremos que llamar a nuestro div class para modificar.

Así como se muestra en la siguiente imagen:

 5

Ahora colocaremos la etiqueta llamada <meta = name=viewport> .Esta etiqueta

Viewport es una de las etiquetas más representativas de la web móvil, que nos
permite configurar, y cómo debe interpretar una página el navegador web para
móviles.

Es altamente recomendable que se altere la etiqueta viewport para conseguir que

tu navegador se comporte como tú deseas, especialmente en el caso de las páginas
que estemos diseñando, para así verse correctamente en pantallas pequeñas. Para
ello disponemos de los siguientes parámetros en la etiqueta META.

 Width: anchura virtual (emulada) de la pantalla o anchura del viewport.

 Height: altura virtual de la pantalla o anchura del viewport.

 Initial-scale: la escala inicial del documento.

 Minimum-scale: la escala mínima que se puede poner en el documento.

 Maximum-scale: la escala máxima configurable en el documento.

 User-scalable: si se permite o no al usuario hacer zoom.

A continuación se mostrara la etiqueta meta con viewport.

(Esta etiqueta va inserta dentro del head de nuestro código HTML).

Para que una cabecera cambie de posición y tamaño dependiendo de en qué parte
de la página se encuentre el usuario. Utilizaremos simplemente Javascript con su
librería Jquery, el cual también será adaptable a dispositivos móviles (Responsive
Design).
 6

2.2 DESCRIPCION DE LAS LABORES REALIZADAS CON EL CODIGO CSS.

Como el responsive design se basa en medidas adaptables, en nuestro código CSS

tendremos que modificar algunas de las medidas que tenemos como lo es el width,
aquí en vez de pixeles colocaremos porcentajes a las medidas de tipo width.

Otro código agregado a nuestro CSS es el Display blocks, y lo que hace es que
nuestro código se transforme en elementos de bloque, por lo que siempre empieza
en una nueva línea, y siempre ocupa todo el espacio disponible en la línea, aunque
sus contenidos no ocupen todo el sitio, en otras palabras les da un orden, ya sea un
menú, párrafos o imágenes.
 7

Otra de las partes fundamentales en responsive design es lo se conoce como media

queries, lo que nos permite este código es que al llegar nuestra página web a
resoluciones pequeñas o grandes, este se adapte a la estructura de nuestro
dispositivo móvil.

Con esto nuestros archivos HTML y CSS estarían configurados para la adaptación
de dispositivos móviles como Tablet, Smartphone, netbooks, notebooks y más.

2.3 HOSTING WEB.

Para subir el sitio web ya modificado tenemos que enviar a un servidor web todos
los archivos multimedia referenciados (imágenes, animaciones, audios, etc). A este
proceso se le llama publicación web. Mediante esto ponemos a disposición de
cualquier usuario con acceso a Internet la página web creada. El hosting elegido fue
www.hostinger.es, ya que es gratuito, está en español, además es de fácil manejo
y no tiene publicidad.
 8

La subida de archivos desde este hosting se realiza en modo autentificado, es decir,

introduciendo un nombre de usuario y contraseña, el cual crearemos previo a la
subida de nuestra web.

En consecuencia antes de afrontar la tarea de publicación será necesario obtener

nuestro dominio gratuito, para esto la página nos da la opción de escribir el dominio
que queramos, luego comprobaremos su disponibilidad en la web, en mi caso mi
dominio es rockinpeace.esy.es, al completar este paso tendremos nuestro dominio
creado, después procedemos a subir nuestra página, la cual se almacenara en una
carpeta llamada public_HTML.

Aquí tendrán que alojarse todos los archivos de nuestra web, una vez hecho esto
la página web estará subida a la red de internet, y a disponibilidad de los usuarios
que estén conectados a ella.

En conclusión, gracias a las modificaciones hechas en base a responsive design,

tendremos nuestra web apta para cualquier dispositivo móvil, Tablet, notebook, etc.
 9

CAPITULO3
PROCESO DE DESARROLLO EN APP INVENTOR 2

3.1 CREACIÓN DEL PROYECTO.

Primero deberemos saber que es APP inventor 2.

- App Inventor 2: es la versión mejorada de nuestra herramienta de

programación creada por el MIT (Instituto tecnológico de Massachusetts). Fue
adoptada por Google para sus usuarios, como solución para crear de una
forma sencilla aplicaciones para dispositivos Android.

El proceso de creación de una aplicación consta de 3 pasos:

1. Diseñador: E l cual muestra el display de un móvil y se utiliza para el diseño

de las pantallas de la aplicación donde situaremos los distintos componentes
como: imágenes, audio, botones, textos, etc. En otras palabras crearemos
en esta sección la interfaz gráfica de nuestra APP.
 10

2. Editor de bloques: Permite programar de una forma visual y amigable el

funcionamiento del programa, utilizando bloques que tienen sus códigos
establecidos.

3. Generador de la APP: Una vez terminada nuestra aplicación podremos

descargar el archivo .APK, o por medio de un código QR probar tu aplicación
creada.
 11

Teniendo estos temas claros podemos comenzar creando un proyecto, tendremos

que dirigirnos a la pestaña proyectos y seleccionar la opción comenzar un nuevo
proyecto.

3.2 INTERFAZ GRÁFICA.

Para comenzar con la interfaz gráfica de la APP basada en un sitio web, tuve que
tener el mismo estilo de dicha página, para así mantener una tendencia y no hacer
de la aplicación algo ajeno a la página web, también tuve que pensar en que la
aplicación tenga algo distinto de la página pero no desenfocando el origen de esta.
Así que se me ocurrió colocar música reproducible en la aplicación, donde
podremos escuchar los singles de los discos que están en oferta. Ahora para hacer
esto no fue fácil ya que APP inventor 2 exige que tu aplicación pese menos de 10.5
megabits, por ende en mi aplicación solo los archivos de audio pesaban 20
megabits, sin contar las imágenes y botones, para hacer que mis archivos MP3
pesen menos tuve que descargar un programa que baje el peso total del archivo de
audio, logrando con este poder subir los temas seleccionados.

Luego en una carpeta coloque todas las imágenes y audios que serían usados en
la aplicación móvil, y procedí a crear la pantalla inicial y el resto de pantallas que
 12

serán vinculadas a una de las opciones elegidas en el menú, las cuales están
asignadas por un botón respectivamente.

Para crear nuestra interfaz gráfica tenemos a nuestro lado izquierdo de la pantalla,
una paleta de control, donde están ubicadas todas las opciones para modificar
nuestra interfaz gráfica en la APP.

o Esta paleta podremos seleccionar y arrastrar

hacia nuestra pantalla la opción que necesitemos
para nuestra interfaz de usuario, ya sea un botón,
una imagen, campos de textos, hasta dibujos,
animaciones, vínculos con sitios web y mucho
más.

o En la aplicación que cree lo que utilice en la paleta

de interfaz de usuario fue botones, imágenes,
etiquetas y campos de textos.

En el lado derecho de nuestra pantalla encontraremos el panel de propiedades y

los componentes de nuestra aplicación:

- Panel de Propiedades: Es donde tenemos las propiedades de nuestros

botones, etiquetas imágenes, y todo lo que sacamos de la paleta de interfaz
de usuario nombrada anteriormente, Aquí podremos dar dimensiones,
colores, también modificar el diseño de nuestros botones, etc.
En resumidas cuentas es donde podemos editar nuestra interfaz.
 13

- Componentes: Ubicada al lado izquierdo de nuestro panel de propiedades

esta esta paleta que contiene nuestras pantallas con sus respectivos botones,
etiquetas, en general todo lo que este dentro de la pantalla aparecerá en esta
paleta.

- Imagen de las paletas de panel de propiedades y componentes.

 14

3.3 PROGRAMACIÓN EN BLOQUES.

Par comenzar a programar la acción de nuestros distintos botones u opción que

hallamos elegido tendremos que ir a la opción bloques que se encuentra en la
esquina superior derecha de nuestra pantalla, a un lado del botón diseñador.

Se nos abrirá una pantalla donde el centro estará en blanco, y al lado izquierdo
donde teníamos la paleta de interfaz de usuario, aparecerá las acciones de los
bloques podremos elegir procedimientos, lógica, control, etc.

Más abajo encontraremos los botones y propiedades que insertamos en la pantalla,

tan solo seleccionando en una de ellas podremos darle la acción con su bloque
correspondiente.

Aquí comencé programando los botones que serían vinculados a una pantalla , elegí
el bloque que dice “cuando botón 1 click ejecutar”, con esto doy la orden de que al
presionar el botón me ejecute una acción en mi caso le coloque la acción de abrir
otra pantalla, luego vamos a la opción de texto del bloque en donde coloque una
opción que me deja asignar el nombre de la pantalla, y así estaría listo el botón que
nos llevara a otra pantalla en nuestra APP y nos mostrara el contenido elegido.
 15

En la APP creada, específicamente menú de inicio, ahí una opción que nos dará
la ubicación exacta geográficamente de la tienda de música, tal cual como esta
en el sitio web, llamando directamente a Google Maps.

Para esto tuve que darle una acción a el botón llamado “ubicación” en mi pantalla
de inicio, y también agregar y configurar la opción de conectividad llamada “activity
starter” lo que hace esta opción es que al presionar el botón me dirija a la URL, o
en este caso a las coordenadas escritas en su panel de propiedades.

Primero y muy importante colocar el siguiente código en sus propiedades, casilla:

acción:

 android.intent.action.VIEW

Esto hace que podamos visualizar nuestra dirección establecida en la casilla uri del
dato,

En esta casilla colocaremos las coordenadas del Google Maps. Para crear la
coordenada primero abrimos Google Maps y al hacer click derecho en el mapa
pincharemos la opción ¿Qué hay aquí? Se nos aparecerá una imagen con la calle
que seleccionamos y debajo de la imagen la coordenada que necesitamos
copiamos y pegamos en la casilla uri del dato, (deberemos colocar antes de la
coordenada la palabra geo y después de la coordenada agregar ¿q=luego se repite
la coordenada)

Ejemplo geo:-41.873429, -73.816911?q=-41.873429, -73.816911.

(Cada corrida de número generada en la coordenada deberá finalizar con una coma)
 16

Terminado esto vamos a la opción bloques y programamos el botón con la opción

de que al hacer click en el botón “ubicación” nos active el activity starter previamente
configurado.

- Programando el botón que ejecutara el Activity Starter.

- Propiedades del Activity Starter.

 17

Por ultimo mostrare la labor realizada con el reproductor de música.

Donde tuve que programar cada botón, el cual iba asignado a un disco de música,
tuve que darle la orden al bloque para que mis botones cumplan la orden de play,
pause y stop.

Esto se hace asignando a la pantalla la herramienta de reproductor. En donde al

pinchar en ella podremos ver sus propiedades entre ellas la opción de subir una
canción que pese menos de 4 megabits, una vez subida se programa el botón con
la acción de que al presionar dicho botón este llame al reproductor para que
comience a reproducir la canción previamente subida a nuestra APP.
 18

- Aquí podemos ver los bloques asignados a su función correspondiente.

 19

CAPITULO 4
CONCLUSIÓN DEL INFORME

4.1 CONCLUSIÓN