Beruflich Dokumente
Kultur Dokumente
Presentacin 3
El HTML 6
El CSS 9
El Java Script 10
Mi primera app 17
Duracin:
4 horas
Objetivos:
Contenidos:
App web
Introduccin a HTML
Introduccin a CSS
Java Script
3
Recursos:
Archivo primera_app.zip
Evaluacin:
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.
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.
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:
Etiqueta Descripcin
<html></html> Delimita y engloba toda la pgina web, que consta de cabecera y
cuerpo.
Formatos de prrafo
Etiqueta Descripcin
<H1> ... </H1> o Prrafos que son encabezamientos (con distintos niveles).
<H2> ... </H2>
(hasta 6)
<P>... </P> Prrafos normales.
<BR> Permite partir un prrafo empezando una lnea nueva pero sin dejar
espacio.
7
Listas
Etiqueta Descripcin
<UL> ... </UL> Lista numerada.
Enlaces y multimedia
Etiqueta Descripcin
Enlace absoluto a una pgina.
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)
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;
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.
Sublime Text 3:
PhoneGap:
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
Glosario
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.
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.
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.
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:
Guarda el documento
16
1. AI ACTIVIDAD 1 n f
17
Figura 6: pgina ndex.html de mi primera app
Antes
Despus
18
Paso 1: Modifica el ttulo
19
A ACTIVIDAD 2
Personaliza la interfaz grfica de la app
Ingresa a la
carpeta CSS
Abre el archivo
hojaEstilo.css con
Sublime Text 3
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)
21
Figura 10: cdigo css del encabezado de la app
Fondo de la app
Banner de la app
22
3. Personaliza el cuerpo de la app a partir de los siguiente pasos:
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
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 #.
Fuente: holaho
25