Anda di halaman 1dari 26

Taller 1: conceptos bsicos y entorno

de programacin HTML5, CSS3


y Java Script
Contenido

Presentacin 3

Las aplicaciones mviles web o web apps: 5

El HTML 6

El CSS 9

El Java Script 10

Herramientas para el desarrollo de apps web 10

ACTIVIDAD 1. Personaliza la pgina ndex.html de

Mi primera app 17

ACTIVIDAD 2. Personaliza la interfaz grf ica de la app 20


Presentacin
En este taller comprenders los conceptos bsicos utilizados en la creacin de una
app web, y cmo modificar su aspecto mediante hojas de estilo en CSS, a partir
del cdigo HTML5, CSS3 y Java Script de una app ya establecido, (ver figura 1).

Figura 1: aplicacin mvil: Mi primera app

Duracin:

4 horas

Objetivos:

Familiarizarse con los conceptos bsicos y elementos


principales del lenguaje HTML5, CSS3 y Java Script.

Visualizar la app web desde un navegador web.

Contenidos:

App web

Introduccin a HTML

Introduccin a CSS

Java Script

Herramientas para el desarrollo de apps web: Sublime


Text 3 y PhoneGap

3
Recursos:

Archivo primera_app.zip

PhoneGap instalado en el computador

Sublime Text 3 instalado en el computador

Evaluacin:

Al finalizar el taller debers entregar la app con las


modificaciones realizadas en un archivo .zip o .rar, Este
archivo deber contener los documentos que permiten el
funcionamiento de la app.

4
Las aplicaciones mviles web o web apps:
Una web app es aquella que se puede abrir en todos los dispositivos mviles
independientemente del sistema operativo que utilicen, ya que las apps web
se pueden abrir y visualizar desde el navegador del dispositivo. Este tipo de
aplicaciones mviles se consideran multi-plataforma porque permiten a los usuarios
acceder a ellas a travs de un servidor web o mediante el uso de un navegador.

Cmo funciona una app web:


Una app web funciona a travs del uso del Internet y de la web. El Internet permite
formar una red de computadores que se comunican entre ellas. Y la web permite
abrir la aplicacin web a partir del uso de navegadores como: Internet Explorer,
Firefox y Google Chrome entre otros. Lo cual funciona de la siguiente forma:
cuando digitamos una direccin web en el navegador de nuestro dispositivo mvil,
este realiza un pedido a otro dispositivo que se utiliza como servidor, el servidor
recibe los pedidos de los dispositivos que se denominan clientes que son las
computadores, tabletas o celulares inteligentes de la gente que navega en Internet
y responde enviando un archivo HTML, una pgina web o aplicacin web.

Figura 2: relacin servidor cliente

SERVIDOR SERVIDOR

PEDIDO INTERNET

CLIENTE

CLIENTE

INTERNET RESPUESTA

5
La base de construccin de una app web son los lenguajes HTML, CSS y Java
Script.

Java Script
Interactividad
entre la app
web y el usuario

CSS
Apariencia de la
app web

Html
Estructura de la
app web

El HTML
Corresponde a las siglas HyperText Markup Language (lenguaje de marcas
de hipertexto) y hace referencia a un lenguaje de programacin que sirve para
describir el contenido de una pgina o aplicacin web, es decir, permite indicar
que la pgina o aplicacin web tiene texto, imgenes, vdeos, audios, formularios
o enlaces a otras pginas.

Figura 3: cdigo HTML

6
Etiquetas bsicas de HTML:
El lenguaje HTML usa como cdigos algo denominado etiquetas, stas sirven
para orientar y designar funciones o parmetros. Las etiquetas en HTML estn
encerradas entre los smbolos < y >. Se cierran con el nombre de la etiqueta
procedido con el smbolo /. Las etiquetas afectan el cdigo por la apertura y el
cierre de la etiqueta. A continuacin se exponen las ms comunes de la versin
HTML5:

Estructura de una pgina web

Etiqueta Descripcin
<html></html> Delimita y engloba toda la pgina web, que consta de cabecera y
cuerpo.

<head></head> Delimita y engloba la cabecera de una pgina, que contiene un


conjunto de informaciones que no se muestran en la ventana, entre
ellas el ttulo de la pgina, pero que pueden ayudar a los navegadores
y a los buscadores para interpretar o a encontrar correctamente la
pgina.
<title></title> Dentro de la cabecera (HEAD), lo que se incluye aqu se muestra en la
barra del ttulo de la ventana del navegador.

<body></body> Delimita y engloba el cuerpo de la pgina, que son el conjunto de


informaciones (texto e imgenes) que se muestran en la pgina, as
como las indicaciones de cmo deben mostrarse.

Formatos de prrafo

Etiqueta Descripcin
<H1> ... </H1> o Prrafos que son encabezamientos (con distintos niveles).
<H2> ... </H2>
(hasta 6)
<P>... </P> Prrafos normales.

El atributo align permite alinear el texto del prrafo. Se puede aplicar


igual a las etiquetas <H1>, <H2> y dems.

<BR> Permite partir un prrafo empezando una lnea nueva pero sin dejar
espacio.

7
Listas

Etiqueta Descripcin
<UL> ... </UL> Lista numerada.

<OL> ... </OL> Lista no numerada.

<LI> ... </LI> Elementos de una lista.

Enlaces y multimedia

Etiqueta Descripcin
Enlace absoluto a una pgina.

Enlace relativo a una pgina.

Marcador (enlace interno) dentro de una pgina.

Muestra una imagen que est contenida en una carpeta


llamada img, que normalmente es de formato GIF, PNG
o JPG.

Muestra un audio que est contenido en una carpeta.

Muestra un vdeo que est contenido en una carpeta.

2:12
12:1
2

fr
am
e
#1

fram fr
am
e e
#2 #3

8
El CSS
Corresponde a las siglas Cascading Style Sheets (hoja de estilo en cascada) y sirve
para escribir el formato o apariencia de una pgina o aplicacin. Si bien HTML es
el lenguaje que da estructura a la pgina web y genera una interfaz bsica con la
cual interactuar, CSS describe la presentacin de la pgina o aplicacin web, es
decir, los colores, las capas, las fuentes o tipografas del texto, adems de esto,
permite adecuar la pgina a diferentes estructuras o dispositivos, en otras palabras,
la reproduccin de la pgina en diferentes tamaos de pantalla responsive (ver
figura 1).

Una hoja de estilo CSS externa puede ser enlazada a un documento HTML mediante
el elemento link de HTML, ejemlo: <link href=css/hojaEstilos.css rel=stylesheet>.
La etiqueta <link> se coloca en la cabecera HEAD del documento (ver figura 3,
lnea 29 del cdigo HTML)

A continuacin se exponen algunos de los elementos utilizados en la versin CSS3.

Figura 4: cdigo CSS3

Etiqueta Descripcin
color: #1162ac; Cambia el color del texto. Se puede especificar con el
color: chocolate; cdigo hexadecimal del color (utilizando el prefijo #) o
con el nombre de color.
font-size: 20px; Define el tamao del texto. Se puede definir con un
tamao fijo (expresado en pxeles: px).
background-color: #1162ac Define el color de fondo de una caja (o <div>) Se puede
background-color: #1162ac; indicar un color hexadecimal.
padding: 20px; Define el espacio existente entre el contenido y el borde
padding: 20px 0px 6px de la caja.
40px;

#caja1{ Define el espacio existente entre cajas (<div>) o bien


margin-left:35px; entre cajas y los mrgenes de la pgina.
margin-bottom:20px;
}

9
El Java Script
HTML y CSS dan forma y estructura a la interfaz de la pgina web, javascript se
encarga de gestionar operativamente las acciones usuario-interfaz, es decir, si
el usuario interacta con la pgina web, javascript gestionar y validar dichas
acciones, por ejemplo, si nos encontramos con un formulario donde el usuario
debe ingresar fechas o cajones de seleccin mltiple para validar una informacin,
Javascript se encargar de gestionar este proceso. Javascript funciona muchas
veces como complemento para HTML, ya que algunas funciones no podran
realizarse con este lenguaje, por ello, Javascript tambin nos permite adjuntar
elementos de interaccin como botones, grficos o vdeos.

Herramientas para el desarrollo de apps web


Para el desarrollo de apps web te sugerimos utilizar las siguientes herramientas por
su facilidad de uso:

Sublime Text 3:

PhoneGap:

Sublime Text 3: es un editor de texto pensado para escribir cdigo en la mayora


de lenguajes de programacin y formatos documentales de texto, utilizados en la
actualidad: Java, Python, Perl, HTML, JavaScript, CSS, HTML, XML, PHP, C, C++,
entre otros.

Cmo instalar Sublime Text 3: para instalar en tu computador esta herramienta


realiza las siguientes acciones:

Paso 1:
Ingresa y descarga Sublime Text 3 de acuerdo al sistema
operativo de tu computador.

10
Paso 2:
Haz clic en ejecutar para instalar Sublime Text 3.

Paso 3:
Una vez finalizada la instalacin podrs utilizar la herramienta
Sublime Text 3.

11
PhoneGap: es una aplicacin de cdigo abierto que permite convertir aplicaciones
mviles creadas en HTML5, Javascript y CSS en aplicaciones que pueden
ejecutarse en dispositivos mviles con diferentes sistemas operativos como:
Android, Microsoft y IOS, entre otros.

Figura 5: PhoneGap
Fuente: sitio oficial de PhoneGap

Envuelva la app Ejecute la app en


con PhoneGap dispositivos mviles

Glosario

FLas direcciones IP (IP es un acrnimo para Internet


Protocol) son un nmero nico e irrepetible con el cual se
identifica una computadora conectada a una red que corre
el protocolo IP. Por ejemplo: 192.168. 0. 101:3000

PhoneGap genera una direccin IP que permite conectar los dispositivos mviles
a un computador que funciona como servidor formando una red o enlace que
permite intercambiar informacin y por ende ejecutar la app web a partir del uso
de los navegadores web.

Para saber ms consulta la pgina oficial de PhoneGap:

Cmo instalar PhoneGap: para instalar esta herramienta en tu computador ingresa


sigue las siguientes acciones:

12
Paso 1:
Ingresa y descarga la versin segn tu Sistema Operativo.

Paso 2:
Descomprime el archivo en tu computador.

Descomprime el archivo

Paso 3:
Descomprime el archivo en tu computador.

Haz clic para abrir

13
Una vez tengas instalado en tu computador la herramienta PhoneGap podrs
utilizarla para visualizar en el navegador de los dispositivos mviles tu app. Aprende
cmo hacerlo siguiendo los siguientes pasos:

Paso 1:
Descomprime el archivo: Taller 1. Conceptos bsicos y entorno
de programacin HTML5, CSS3 y Java Script.zip. Luego haz
clic en el + que se ubica en el panel izquierdo de PhoneGap.

Paso 2:
Selecciona crear nuevo proyecto PhoneGap o aadir un
proyecto existente.

En este caso vamos


a aadir un proyecto
existente

14
Paso 3:
Ingresa a la carpeta: Taller 1. Conceptos bsicos y entorno
de programacin HTML5, CSS3 y Java Script y selecciona
la carpeta primera_app contiene el proyecto o app existente.

Carpeta que
contiene la app

Paso 4:
Inicie el servidor, en la parte inferior aparecer una barra
verde con la direccin IP de la app.

Si el servidor no se
ha iniciado, haz clic
en la flecha >

Direccin IP

15
Paso 5:
Escribe la direccin IP generada por PhoneGap en el
navegador de tu computador o dispositivo mvil para
visualizar la tu app. Ten en cuenta que la direccin IP, vara a
la generada por PhoneGap para este taller.

192.168.0.101:3000

Paso 6:
Manos a la obra, ahora podrs visualizar, editar o modificar
tu propia app utilizando la herramienta Sublime Text 3 y tener
inmediatamente una vista previa de tu app en un dispositivo
mvil utilizando PhoneGap. Cmo hacerlo:

Abre un documento index.html en Sublime Text 3

Edita el contenido del documento

Guarda el documento

Visualiza las actualizaciones del documento en el


navegador de tu computador o de un dispositivo mvil

16
1. AI ACTIVIDAD 1 n f

Personaliza la pgina ndex.html de Mi primera app


1. Ingresa a la carpeta: primera_app en ella encontrars la siguiente estructura de
carpetas:

2. Ingresa a la carpeta www y selecciona el archivo index.html para editarlo con la


herramienta Sublime Text 3. Utiliza el PhoneGap para visualizar los cambios en la
app (Ver pgina 14).

17
Figura 6: pgina ndex.html de mi primera app

Antes

Despus

18
Paso 1: Modifica el ttulo

Paso 2: Modifica la imagen

Paso 3: Modifica el texto

19
A ACTIVIDAD 2
Personaliza la interfaz grfica de la app

En el archivo hojaEstilos podrs configurar el color del fondo de la app, de la


fuente/textos, el color de los bloques, el de los enlaces y el tamao de los textos.
Para hacerlo realiza las siguientes acciones:

1. Ingresa a la carpeta www y abre la carpeta css luego selecciona el


archivo hojaEstilos.css para editarlo con la herramienta Sublime Text 3.

Ingresa a la
carpeta CSS

Abre el archivo
hojaEstilo.css con
Sublime Text 3

2. Personaliza el encabezado de la app a partir de los siguientes pasos:

Figura 9: Encabezado de la app

Banner Home

Ttulo
Fondo
Barra

20
Paso 1: Modifica el fondo
Ubcate en la lnea 2 y cambia el fondo de la app,
(../img/fondoazul.png) reemplaza la palabra fondo azul por
fondoverde: (../img/fondoverde.png)

Paso 2: Modifica la barra


Ubcate en la lnea 12 y modifica el color de la barra de la app
border-bottom: #648dc1 5px solid; reemplaza el cdigo del
color #648dc1 por el cdigo #a9c67a

Paso 3: Modifica el banner


Ubcate en la lnea 18 y cambia el banner de la app
(../img/header.png) reemplaza la palabra header por
headerverde (../img/headerverde.png)

Paso 4: Modifica el ttulo


Para cambiar el tamao del ttulo ubcate en la lnea 25:
font-size: 20px; y modifica el tamao 20px por 30px as:
font-size: 30px;

Paso 5: Modifica el color de la home


Modifica el color de home, ubcate en la lnea 33: background:
#648dc1; y reemplaza el cdigo de color #648dc1 por el
cdigo #a9c67a

21
Figura 10: cdigo css del encabezado de la app

Fondo de la app

Cdigo del color de la barra

Banner de la app

Tamao del ttulo de la app

Cdigo del color de home

22
3. Personaliza el cuerpo de la app a partir de los siguiente pasos:

Figura 11: cuerpo de la app

Antes
Subttulo

Bloques

Despus

23
Paso 1: Modifica el color del subttulo
Ubcate en la lnea 58: color: #648dc1; y modifica el cdigo
de color del subttulo, reemplaza el cdigo #648dc1 por el
cdigo #a9c67a

Paso 2: Modifica el color de los bloques


Ubcate en la lnea 75: background: #648dc1; y modifica el
color de los bloques de la app border reemplaza el cdigo de
color #648dc1 por el cdigo #a9c67a

Figura 12: cdigo css del cuerpo de la app

Cdigo del color del


subttulo de la app

Cdigo del color de


los bloques de la app

24
Anexo: la imagen que se muestra a continuacin posee el cdigo de los colores
HTML utilizados en el cdigo CSS para modificar los colores de la app, a cada
cdigo lo debe anteceder siempre el signo #.

Figura 13: cdigos de los colores hexadecimales

Fuente: holaho

25