1
Download Taller 1: conceptos básicos y entorno de programación HTML5
Document related concepts
no text concepts found
Transcript
Taller 1: conceptos básicos y entorno
de programación HTML5, CSS3
y Java Script
Contenido
Presentación
3
Las aplicaciones móviles 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 página índex.html de
Mi primera app
17
ACTIVIDAD 2. Personaliza la interfaz gráf ica de la app 20
Presentación
En este taller comprenderás los conceptos básicos utilizados en la creación de una
app web, y cómo modificar su aspecto mediante hojas de estilo en CSS, a partir
del código HTML5, CSS3 y Java Script de una app ya establecido, (ver figura 1).
Figura 1: aplicación móvil: Mi primera app
Duración:
4 horas
Objetivos:
• Familiarizarse con los conceptos básicos y elementos
principales del lenguaje HTML5, CSS3 y Java Script.
• Visualizar la app web desde un navegador web.
Contenidos:
• App web
• Introducción a HTML
• Introducción 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
Evaluación:
Al finalizar el taller deberás 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 móviles web o web apps:
Una web app es aquella que se puede abrir en todos los dispositivos móviles
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 móviles se consideran multi-plataforma porque permiten a los usuarios
acceder a ellas a través de un servidor web o mediante el uso de un navegador.
Cómo funciona una app web:
Una app web funciona a través 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 aplicación 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 dirección web en el navegador de nuestro dispositivo móvil,
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 página web o aplicación web.
Figura 2: relación servidor – cliente
SERVIDOR
SERVIDOR
INTERNET
PEDIDO
CLIENTE
CLIENTE
RESPUESTA
INTERNET
5
La base de construcción 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 programación que sirve para
describir el contenido de una página o aplicación web, es decir, permite indicar
que la página o aplicación web tiene texto, imágenes, vídeos, audios, formularios
o enlaces a otras páginas.
Figura 3: código HTML
6
Etiquetas básicas de HTML:
El lenguaje HTML usa como códigos algo denominado etiquetas, éstas sirven
para orientar y designar funciones o parámetros. Las etiquetas en HTML están
encerradas entre los símbolos “<” y “>”. Se cierran con el nombre de la etiqueta
procedido con el símbolo “/”. Las etiquetas afectan el código por la apertura y el
cierre de la etiqueta. A continuación se exponen las más comunes de la versión
HTML5:
Estructura de una página web
Etiqueta
Descripción
<html>…</html>
Delimita y engloba toda la página web, que consta de cabecera y
cuerpo.
<head>…</head>
Delimita y engloba la cabecera de una página, que contiene un
conjunto de informaciones que no se muestran en la ventana, entre
ellas el título de la página, pero que pueden ayudar a los navegadores
y a los buscadores para interpretar o a encontrar correctamente la
página.
<title>…</title>
Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la
barra del título de la ventana del navegador.
<body>…</body>
Delimita y engloba el cuerpo de la página, que son el conjunto de
informaciones (texto e imágenes) que se muestran en la página, así
como las indicaciones de cómo deben mostrarse.
Formatos de párrafo
Etiqueta
<H1> ... </H1> o
<H2> ... </H2>
(hasta 6)
<P>... </P>
Descripción
Párrafos que son encabezamientos (con distintos niveles).
Párrafos normales.
El atributo align permite alinear el texto del párrafo. Se puede aplicar
igual a las etiquetas <H1>, <H2> y demás.
<BR>
Permite partir un párrafo empezando una línea nueva pero sin dejar
espacio.
7
Listas
Etiqueta
Descripción
<UL> ... </UL>
Lista numerada.
<OL> ... </OL>
Lista no numerada.
<LI> ... </LI>
Elementos de una lista.
Enlaces y multimedia
Etiqueta
Descripción
Enlace absoluto a una página.
Enlace relativo a una página.
Marcador (enlace interno) dentro de una página.
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 vídeo que está contenido en una carpeta.
2:12
12:1
2
fr
am
e
#1
fram
e
#2
fr
am
e
#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 página o aplicación. Si bien HTML es
el lenguaje que da estructura a la página web y genera una interfaz básica con la
cual interactuar, CSS describe la presentación de la página o aplicación web, es
decir, los colores, las capas, las fuentes o tipografías del texto, además de esto,
permite adecuar la página a diferentes estructuras o dispositivos, en otras palabras,
la reproducción de la página en diferentes tamaños 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,
línea 29 del código HTML)
A continuación se exponen algunos de los elementos utilizados en la versión CSS3.
Figura 4: código CSS3
Etiqueta
Descripción
color: #1162ac;
color: chocolate;
font-size: 20px;
background-color: #1162ac
background-color: #1162ac;
padding: 20px;
padding: 20px 0px 6px
40px;
#caja1{
margin-left:35px;
margin-bottom:20px;
Cambia el color del texto. Se puede especificar con el
código hexadecimal del color (utilizando el prefijo #) o
con el nombre de color.
Define el tamaño del texto. Se puede definir con un
tamaño fijo (expresado en píxeles: px).
Define el color de fondo de una caja (o <div>) Se puede
indicar un color hexadecimal.
Define el espacio existente entre el contenido y el borde
de la caja.
Define el espacio existente entre cajas (<div>) o bien
entre cajas y los márgenes de la página.
}
9
El Java Script
HTML y CSS dan forma y estructura a la interfaz de la página web, javascript se
encarga de gestionar operativamente las acciones usuario-interfaz, es decir, si
el usuario interactúa con la página web, javascript gestionará y validará dichas
acciones, por ejemplo, si nos encontramos con un formulario donde el usuario
debe ingresar fechas o cajones de selección múltiple para validar una información,
Javascript se encargará de gestionar este proceso. Javascript funciona muchas
veces como complemento para HTML, ya que algunas funciones no podrían
realizarse con este lenguaje, por ello, Javascript también nos permite adjuntar
elementos de interacción como botones, gráficos o vídeos.
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 código en la mayoría
de lenguajes de programación y formatos documentales de texto, utilizados en la
actualidad: Java, Python, Perl, HTML, JavaScript, CSS, HTML, XML, PHP, C, C++,
entre otros.
Cómo 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 instalación podrás utilizar la herramienta
Sublime Text 3.
11
PhoneGap: es una aplicación de código abierto que permite convertir aplicaciones
móviles creadas en HTML5, Javascript y CSS en aplicaciones que pueden
ejecutarse en dispositivos móviles con diferentes sistemas operativos como:
Android, Microsoft y IOS, entre otros.
Figura 5: PhoneGap
Fuente: sitio oficial de PhoneGap
Envuelva la app
con PhoneGap
Ejecute la app en
dispositivos móviles
Glosario
FLas direcciones IP (IP es un acrónimo para Internet
Protocol) son un número ú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 dirección IP que permite conectar los dispositivos móviles
a un computador que funciona como servidor formando una red o enlace que
permite intercambiar información y por ende ejecutar la app web a partir del uso
de los navegadores web.
Para saber más consulta la página oficial de PhoneGap:
Cómo instalar PhoneGap: para instalar esta herramienta en tu computador ingresa
sigue las siguientes acciones:
12
Paso 1:
Ingresa
y descarga la versión según 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 podrás
utilizarla para visualizar en el navegador de los dispositivos móviles tu app. Aprende
cómo hacerlo siguiendo los siguientes pasos:
Paso 1:
Descomprime el archivo: Taller 1. Conceptos básicos y entorno
de programación 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 añadir un
proyecto existente.
En este caso vamos
a añadir un proyecto
existente
14
Paso 3:
Ingresa a la carpeta: Taller 1. Conceptos básicos y entorno
de programación 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 dirección IP de la app.
Si el servidor no se
ha iniciado, haz clic
en la flecha >
Dirección IP
15
Paso 5:
Escribe la dirección IP generada por PhoneGap en el
navegador de tu computador o dispositivo móvil para
visualizar la tu app. Ten en cuenta que la dirección IP, varía a
la generada por PhoneGap para este taller.
192.168.0.101:3000
Paso 6:
Manos a la obra, ahora podrás 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
móvil utilizando PhoneGap. Cómo 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 móvil
16
1. AI
ACTIVIDAD 1 n
f
Personaliza la página índex.html de Mi primera app
1. Ingresa a la carpeta: primera_app en ella encontrarás 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 página 14).
17
Figura 6: página índex.html de mi primera app
Antes
Después
18
Paso 1: Modifica el título
Paso 2: Modifica la imagen
Paso 3: Modifica el texto
19
A
ACTIVIDAD 2
Personaliza la interfaz gráfica de la app
En el archivo hojaEstilos podrás configurar el color del fondo de la app, de la
fuente/textos, el color de los bloques, el de los enlaces y el tamaño 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
Home
Banner
Fondo
Título
Barra
20
Paso 1: Modifica el fondo
Ubícate en la línea 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
Ubícate en la línea 12 y modifica el color de la barra de la app
border-bottom: #648dc1 5px solid; reemplaza el código del
color #648dc1 por el código #a9c67a
Paso 3: Modifica el banner
Ubícate en la línea 18 y cambia el banner de la app
(‘../img/header.png’) reemplaza la palabra header por
headerverde (‘../img/headerverde.png’)
Paso 4: Modifica el título
Para cambiar el tamaño del título ubícate en la línea 25:
font-size: 20px; y modifica el tamaño 20px por 30px así:
font-size: 30px;
Paso 5: Modifica el color de la home
Modifica el color de home, ubícate en la línea 33: background:
#648dc1; y reemplaza el código de color #648dc1 por el
código #a9c67a
21
Figura 10: código css del encabezado de la app
Fondo de la app
Código del color de la barra
Banner de la app
Tamaño del título de la app
Código 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
Subtítulo
Bloques
Después
23
Paso 1: Modifica el color del subtítulo
Ubícate en la línea 58: color: #648dc1; y modifica el código
de color del subtítulo, reemplaza el código #648dc1 por el
código #a9c67a
Paso 2: Modifica el color de los bloques
Ubícate en la línea 75: background: #648dc1; y modifica el
color de los bloques de la app border reemplaza el código de
color #648dc1 por el código #a9c67a
Figura 12: código css del cuerpo de la app
Código del color del
subtítulo de la app
Código del color de
los bloques de la app
24
Anexo: la imagen que se muestra a continuación posee el código de los colores
HTML utilizados en el código CSS para modificar los colores de la app, a cada
código lo debe anteceder siempre el signo #.
Figura 13: códigos de los colores hexadecimales
Fuente: holaho
25
