[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5

[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5

[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Introducción

INTRODUCCIÓN
Internet aporta un medio tanto para el desarrollo empresarial como el social. Las tecnologías

asociadas a la web han permitido el auge de todo tipo de sitios como como comercio electrónico o e-

comerce que está constituido en la compra y venta de productos y/o servicios mediante medios

electrónicos. También entre muchos otros tenemos las redes sociales donde se puede compartir

cualquier tipo de experiencia y comunicarse con otras personas.

m
co
e.
in
nl
no
io
ac
rm
fo
ur
es
.c
os
ad
i fic
rt
ce

certificados.cesurformaciononline.com
1 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Objetivos

OBJETIVOS

Introducir al alumnado a los conceptos principales de Javascript, HTML5 y CSS3.

Conocer el uso de cada uno de los lenguajes.

m
co
e.
in
nl
no
io
ac
rm
fo
ur
es
.c
os
ad
i fic
rt
ce

certificados.cesurformaciononline.com
2 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Mapa Conceptual

MAPA CONCEPTUAL [[[Elemento Multimedia]]]

m
co
e.
in
nl
no
io
ac
rm
fo
ur
es
.c
os
ad
i fic
rt
ce

certificados.cesurformaciononline.com
3 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Javascript.

Introducción

Desde que la conexión a Internet en los hogares se volvió algo común, los tipos de servicios y su

número ha aumentado en gran medida, tiendas on-line, foros, redes sociales, blogs, sistemas de

mensajería, servicios de streaming ... .Por tanto, y como respuesta a ello, las tecnologías asociadas a

las páginas web ha mejorado progresivamente, apareciendo nuevas formas de añadir interactividad

m
y de crear aplicaciones.

co
e.
Pero estas aplicaciones van más allá, ya que no solo las encontraremos en Internet sino que cada día

in
son más utilizadas en las denominadas intranets empresariales que utilizan una red de ordenadores

nl
privados para compartir dentro de una organización parte de sus sistemas de información y sistemas

no
operaciones. Esto se debe a que su mantenimiento se centra en el servidor, y el soporte y
io
distribución no esta condicionado por la configuración de cada equipo en la red corporativa.
ac
rm
fo
ur
es
.c
os
ad
i fic
rt
ce

En este curso utilizaremos tecnologías que nos permitirán desarrollar este tipo de aplicaciones.

certificados.cesurformaciononline.com
4 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Entorno Cliente/Servidor

Las páginas webs están sujetas a una interaccion cliente/servidor donde:

El cliente, como respuesta a las acciones del usuario, se encarga de solicitar y mostrar al

usuario las páginas webs

El servidor, realiza operaciones sobre los datos o los ofrece al cliente.

m
co
Programación del lado del cliente

e.
Esquema de modelo Cliente/Servidor:

in
nl
no
io
ac
rm
fo
ur
es
.c
os
ad
fic

La programación del lado del cliente es aquella ejecutada por la aplicación cliente, es decir
i
rt

principalmente por el navegador.

ce

Para conseguir programar en el lado del cliente, los navegadores ofrecen entornos para la ejecución

de código, en este caso es el lenguaje Javascript. Javascript es un lenguaje interpretado, esto

quiere decir que no es compilado y se ejecuta por un intérprete, en el caso de la web está integrado

en el navegador.

Ejemplo de código JavaScript:

certificados.cesurformaciononline.com
5 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

m
co
e.
Los navegadores nos ofrecen una serie de objetos y funciones para poder acceder a información y

in
nl
manipular la estructura de la página. Esta estructura se representa a través de lo que denominamos

no
DOM (Document Object Model) del que hablaremos más adelante, de esta manera es posible

io
conseguir páginas interactivas, superando así las limitaciones de HTML.
ac

Algunos ejemplos de cosas que podemos hacer como JavaScript será:

rm
fo

Presentar un texto móvil en la barra de estado del navegador

ur

Obtener fecha y hora del ordenador del usuario.

es

Obtener información del navegador.

.c

Modificar dinámicamente el tamaño de una imagen en una página web.

os

Validar entradas compradas por internet.

ad

Etc.
i fic
rt

Características del lenguaje

ce

Como hemos comentado Javascript es un lenguaje interpretado y no tipado, esto nos permite una

gran flexibilidad a la hora de desarrollar aunque también puede derivar en errores más frecuentes.

A continuación veremos brevemente algunos conceptos sobre Javascript.

Variables

En Javascript definimos una variable con la palabra var:

var variable = 300;

certificados.cesurformaciononline.com
6 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Arrays y objetos

En Javascript un array lo definimos de la siguiente manera:

var nuestroArray = [4, 'hola', 5, 6, 7];

Al ser un lenguaje no tipado podemos meter cualquier cosa. Accedemos y añadimos valores:

m
nuestroArray.push('prueba');
alert(nuestroArray[2])

co
e.
Y podemos crear un objeto de esta forma:

in
nl
var unObjeto = {};
var otroObjeto = {'propiedad1': 90, 'propiedad2': 'adios'};

no
También podemos añadir propiedades y acceder a ellas de dos formas:
io
ac

unObjeto.propiedad0 = 222;
rm

unObjeto['propiedad1'] = 876;
fo

Podemos usar un objeto como si fuera un array en ciertos aspectos, esto se debe a que los arrays se
ur

consideran objetos, el punto y los corchetes son maneras válidas de acceder a propiedades.
es

Funciones
.c
os

Definimos una función de la siguiente manera

ad

function multiplica(p1, p2) {

fic

return p1 * p2;
}
i
rt
ce

Una función se identifica solo por su nombre, si se escribe otra función multiplica con parámetros

diferentes sobrescribiría a la primera. No hay comprobación de parámetros a la hora de llamar a una

función, podríamos llamar a la anterior función con parámetros de más y solo cogería los dos

primeros, si no se pasa ningún parámetro estos tendrán valor undefined y podrían provocar un error

dentro de la función.

También disponemos de una variable con un array denominada arguments que nos permite iterar

sobre todos los argumentos

certificados.cesurformaciononline.com
7 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Un objeto también puede tener funciones y acceder a sus propiedades con la palabra this, y,

además, podemos pasar funciones como parámetros:

unObjeto = {'propiedad1': 567};

unObjeto.unaFuncion = function(paramF){
paramF(this.propiedad1);
}
unObjeto.unaFuncion(alert);

Ámbito de las variables

m
co
El ámbito de una variable (scope en inglés) es la zona del programa en la que se define la variable.

e.
JavaScript define dos ámbitos para las variables: global y local.

in
nl
//Variables globales
var mensaje1 = "Mensaje de prueba 1";

no
var mensaje2 = "Mensaje de prueba 2";

function muestraMensaje() {
io
ac
//Variable local a la función
var otroMensaje = "Otro mensaje de prueba";
rm

//Si lo definimos una con el mismo nombre con var no accedemos a la global
var mensaje2 = "Este es distinto al global";
fo

mensaje2 += ", adios";//No sera accesible fuera de la función

alert(mensaje1);
ur

alert(otroMensaje);
}
es

muestraMensaje();
.c
os

alert(mensaje1);
alert(mensaje2);
ad

Podemos acceder a variables declaradas en un ámbito superior y declarar nuestras locales aunque
fic

tengan el mismo nombre.

i
rt

Estructuras de control de flujo

ce

Tenemos las mismas estructuras disponibles en otros lenguajes como for, while, do-while, if, else...

Por ejemplo if-else

if(edad < 12 || edad == 12) {//Es equivalente a edad <=12

alert("Niño");
}
else if(edad <= 18) {
alert("Adolescente");
}

certificados.cesurformaciononline.com
8 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

else if(edad < 35) {

alert("Joven");
}
else {
alert("Mayor");
}

Podemos iterar en un array de la siguiente manera con for-in:

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];

for(i in dias) {

m
console.log(dias[i]);

co
}

e.
DOM

in
nl
El Modelo de Objetos del Documento (DOM) es una API para documentos HTML y XML. Este

no
define la estructura lógica de los documentos y el modo en que se accede y manipula un documento.
io
En la especificación del DOM, el término "documento" se utiliza en un sentido amplio. XML se utiliza
ac
cada vez más como un medio para representar muchas clases diferentes de información que puede
rm

ser almacenada en sistemas diversos, y mucha de esta información se vería, en términos

fo

tradicionales, más como datos que como documentos. Sin embargo, XML presenta estos datos como
ur

documentos, y se puede usar el DOM para manipular estos datos.

es
.c

Con el DOM los programadores pueden construir documentos, navegar por su estructura, y añadir,
os

modificar o eliminar elementos y contenido. Se puede acceder a cualquier cosa que se encuentre en
ad

un documento HTML o XML, y se puede modificar, eliminar o añadir usando el DOM, salvo algunas
fic

excepciones. En particular, aún no se han especificado las interfaces DOM para los subconjuntos
i

internos y externos de XML.

rt
ce

Uno de los objetivos más importantes del DOM es aportar una interfaz estándar que se pueda

utilizar en gran variedad de aplicaciones y entornos. El DOM está diseñado para ser utilizado en

cualquier lenguaje de programación. Para proporcionar una especificación de las interfaces DOM

precisa e independiente del lenguaje

Ahora vamos a ver un ejemplo de la representación de una tabla (<table>) en el DOM:

certificados.cesurformaciononline.com
9 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

m
co
e.
in
Su HTML es el siguiente:

nl
no
io
ac
rm
fo
ur
es
.c
os
ad

Como podemos ver, la imagen superior es una representación jerárquica del código mostrado.
i fic
rt
ce

Ejemplo básico- ¿Qué utilizaremos?

Para realizar este curso podremos utilizar varias herramientas, pero sobre todo recomendaremos

dos.

Una más fácil de usar como Notepad++ en el cual podremos probar código simple y hacer los

primeros ejercicios y algún IDE (Entorno de Desarrollo) como por ejemplo NetBeans o Eclipse para

realizar proyectos más grandes y de mayor complejidad.

certificados.cesurformaciononline.com
10 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Ambas son aplicaciones libres y gratuitas.

Para descargar Notepad++:

http://notepad-plus-plus.org/download

Y aquí un manual (en Ingles):

https://github.com/notepad-plus-plus/npp-usermanual

Para descargar NetBeans:

m
http://netbeans.org/downloads/

co
e.
Y aquí su manual:

in
https://netbeans.org/project_downloads/usersguide/UsingNetBeans5.0.pdf

nl
no
Hay que destacar que la programación web por parte del cliente puede resultar un poco más simple,
io
por lo que podemos utilizar el Notepad++, pero por emde, al programar en el lado del servidor
ac
(PHP, ASP .NET, Etc.) es recomendable usar el IDE o el entorno de programación.
rm
fo

¿Qué necesita saber?

ur

Hay que decir que este curso no es un curso de programación ni de diseño de páginas web por lo
es

que vamos a dar algunas recomendaciones para poder seguir el curso con fluidez.
.c
os

Deberá conocer HTML para entender el código básico de las páginas web.
ad
fic

http://profesores.fi-b.unam.mx/cintia/Manualhtml.pdf
i
rt
ce

Deberá tener conocimientos de programación, aunque el curso recuerde los conceptos

fundamentales.

Deberá tener conocimientos de bases de datos. Conceptos como tabla, relación, consulta, SQL,

deberán ser conocidos.

https://desarrolloweb.com/manuales/tutorial-sql.html

certificados.cesurformaciononline.com
11 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Nuestro primer ejemplo

Vamos a realizar un pequeño ejercicio utilizando HTML y Javascript. Este ejercicio consiste en la

creación de una aplicación la cual saludará al usuario cuando este escriba su nombre en una caja de

texto.

Comenzaremos creando un proyecto vacío y después crearemos un fichero .HTML el cual va a ser el

que se mostrará nada más abrir la aplicación.

m
Index.html

co
e.
in
nl
no
io
ac

Este fichero cuenta con una caja de texto en la cual escribiremos un nombre y un botón que será el
rm

que envíe los datos. Además de este también crearemos un fichero .JS el cual guardará el código
fo

javascript.
ur
es

App.js
.c
os
ad
fic

Ambos ficheros los guardaremos en un mismo directorio dentro de la aplicación, ya que más
i
rt

adelante tendremos que especificar la ruta en que se encuentran.

ce

En nuestro fichero activity_main.xml vamos a añadir un objeto “WebView”, el cual nos permitirá

mostrar el contenido de una página web como parte del diseño de una actividad. Es recomendable

que este objeto ocupe la pantalla completa para que se aprecie mejor.

certificados.cesurformaciononline.com
12 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

activity_main.xml

m
co
e.
Y por último, vamos a utilizar en el fichero MainActivity.java las utilidades “findViewById”,

in
“getSettings”, “setWebChromeClient” y “loadUrl”, todas ellas pertenecientes a WebView. Estas

nl
permitirán que busquemos a través de Internet o en local una Url o ruta que definamos.

no
MainActivity.java io
ac
rm
fo
ur
es
.c
os
ad
i fic
rt
ce

Con esto ya podemos arrancar la aplicación y comprobar que se muestra nuestra web al iniciarla.

certificados.cesurformaciononline.com
13 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

m
co
e.
in
nl
no
Si no aparece la web compruebe que ha escrito correctamente la ruta asociada a su directorio en
io
webView.loadUrl dentro del fichero MainActivity.java y vuelva a ejecutarla.
ac
rm

Elige las respuestas correctas. Las páginas webs están sujetas a una interaccion
fo

cliente/servidor donde:
ur

El servidor, como respuesta a las acciones del usuario, se encarga de solicitar y mostrar
es

al usuario las páginas webs

.c
os

El servidor realiza operaciones sobre los datos o los ofrece al cliente.

ad
fic

El cliente, realiza operaciones sobre los datos o los ofrece al servidor.

i
rt

El cliente se encarga de solicitar y mostrar al usuario las páginas webs.

ce

certificados.cesurformaciononline.com
14 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

HTML5

Introducción HTML

HTML siglas de Hyper Text Markup Language, es el lenguaje más utilizado para la creación de

páginas Web. Es un lenguaje bastante sencillo de aprender y de escribir. Los navegadores se

encargan de leer documentos basados en este lenguaje y generar una vista para el usuario.

m
Este lenguaje está reconocido como estándar y sus normas están definidas por el organismo oficial

co
W3C, World Wide Web Consortium. Este organismo lo define “un lenguaje reconocido

e.
universalmente y que permite publicar información de forma global”.

in
nl
Este lenguaje es muy simple y sirve para definir otros lenguajes que tienen que ver con el formato

no
de un documento. El texto en él se crea a partir de etiquetas, también llamadas tags, que permiten

interconectar diversos conceptos y formatos. io

ac

Historia de HTML
rm
fo

El origen de este lenguaje se remonta al año 1980, Tim Beners-Lee, trabajador de la Organización
ur

Europea de la Investigación Nuclear (CERN), definió un sistema de “hipertexto” para compartir

es

ciertos documentos.
.c
os

Este sistema ya se había desarrollado antes, el cual ofrecía que los usuarios accedieran a la
ad

información relacionada con los documentos electrónicos que estaban viendo. Tras desarrollar el

sistema, Tim Beners y el ingeniero Robert Cailliay publicaron la propuesta a la llamada World Wide
fic

Web (W3).
i
rt
ce

En 1991 se presentó el documento oficial bajo el nombre de “HTML Tags”, se hicieron varios

intentos para conseguir que HTML fuera un estándar, en 1993 se presentó ante la IETF ( Internet

Engineering Task Force), el lenguaje HTML reformado con algunas etiquetas nuevas para imágenes,

tablas y formularios.

Lenguaje de etiquetas

Uno de los retos cuando se realizó este lenguaje fue como se iba a almacenar la información. Con los

primeros archivos era fácil porque solo contenían texto sin formato, se codificaban las letras del

certificados.cesurformaciononline.com
15 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

alfabeto y se transformaban en números. De esta forma se utilizaba una tabla de conversión.

El proceso de transformación de caracteres a secuencias se denomina codificación de caracteres y

cada tabla que se define para realizar la transformación se conoce como página de código. Una de

las codificaciones más conocida es la codificación ASCII.

Una vez resuelto el problema de almacenamiento las preguntas eran las siguientes ¿cómo

almacenamos ahora el texto en negrita? ¿Y en color rojo? ¿Y otro texto en azul y cursiva?

m
Ya no se podía aplicar la conversión que se utilizaba para texto sin formato, ya que existen infinitas

co
posibilidades de estilos en un texto. Una solución era almacenar una zona reservada para donde

e.
in
comienza y donde termina cada formato.

nl
La solución que realmente se utiliza para guardar información con formato es guardar los

no
contenidos sobre el formato de estos. Por ejemplo:
io
ac
rm
fo
ur

Este proceso para indicar las partes en las que se compone el documento se denomina marcado,
es

cada palabra que se emplea para marcar inicio y fin se define como etiqueta.
.c
os

Estas etiquetas se abren con el carácter < nombre de la etiqueta sin espacios en blanco y se cierra
ad

con >. Las etiquetas de apertura serían < p > y las de cierre serian igual pero añadiendo el carácter
fic

/, < / p >.
i
rt

A HTML se le denomina lenguaje de etiquetas o lenguaje de marcado. La ventaja de estos lenguajes

ce

es que son sencillos de leer y escribir por parte de personas y de los sistemas electrónicos.

Estructura básica de HTML

Las páginas HTML se dividen en dos partes: la cabecera (head), el cuerpo (body).

certificados.cesurformaciononline.com
16 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

La estructura final quedaría de la siguiente manera:

m
co
e.
in
nl
no
io
ac
rm
fo
ur
es
.c

Etiquetas y atributos
os
ad

HTML define 91 etiquetas que se pueden utilizar para marcar los diferentes componentes de la
fic

página. Algunas etiquetas ya se consideran obsoletas como por ejemplo: applet, basefont, center,
i

dir, font, isindex, menyu, s, strike, u.

rt
ce

A pesar de existir tantas etiquetas, no es suficiente para crear páginas complejas. Algunos elementos

como imágenes y enlaces necesitan más información adicional. A esa información se le llama

atributos.

Un ejemplo de esto sería la etiqueta a, que sirve para indicar los enlaces, si colocamos solo esa

etiqueta no nos llevará a ningún sitio, necesitaremos ponerle una url con el atributo href para que

nos lleve a la dirección que deseemos.

certificados.cesurformaciononline.com
17 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

m
co
e.
in
nl
no
io
No todos los atributos se pueden utilizar en todas las etiquetas, cada etiqueta define su propia lista
ac

de atributos. Los atributos comunes son los siguientes:

rm
fo

Atributos básicos: se utilizan prácticamente en todas las etiquetas HTML

ur

id=”texto”: Establece un identificador único a cada elemento dentro de la página

es

HTML
.c
os

class=”texto”: Establece la clase CSS que se aplica a los estilos del elemento.
ad

style=”texto”: Establece de forma directa los estilos CSS

title=”texto”: Establece un título a un elemento.

i fic
rt
ce

Elementos HTML

Además de etiquetas y atributos, también existe el término elemento para referirse a las partes que

componen los documentos HTML. Aunque en ocasiones se habla indistintamente de “elementos” y

“etiquetas”, en realidad si tenemos dos párrafos en un documento HTML, tendríamos dos elementos

y cuatro etiquetas p.

HTML clasifica todos los elementos en dos grupos: elementos en línea (inline) y elementos de bloque

(block). La diferencia entre estos es que el de bloque siempre empiezan en una nueva línea

certificados.cesurformaciononline.com
18 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

ocupándola hasta el final y los elementos de tipo línea ocupan el espacio necesario.

La mayoría de elementos de bloque pueden contener en su interior elementos en línea y otros

elementos de bloque. Por ejemplo:

m
co
e.
in
nl
no
Elementos de bloque (block) io
ac

Las principales características de los elementos en línea son:

rm
fo

Forman un bloque y ocupan toda la línea colocando al final un salto de línea

ur

Toma la anchura que este definida en la página o en su elemento padre (contenedor).

es

Su altura cambia en relación a su contenido.

.c

Puede contener otros elementos inline y block.

os

Se le puede asignar una anchura (width) y una altura (height) utilizando css.
ad
fic

Estos son los elementos que son por defecto de tipo block:
i
rt
ce

Elementos en línea (inline)

Los elementos en línea tienen las siguientes características:

certificados.cesurformaciononline.com
19 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Se posiciona horizontalmente en línea con el resto de contenido.

Toma la anchura y altura en relación a su contenido

Solo puede contener otros elementos en inline

No se le puede imponer una anchura y altura fijas mediante css.

Los siguientes elementos son de tipo inline o en línea:

m
co
e.
in
nl
no
io
ac
rm

Sintaxis de las etiquetas XHTML

fo

Cuando se creo HTML, el lenguaje era muy permisivo y eso provocaba que el código HTML quedara
ur

muy desordenado, difícil de mantener y poco profesional. La llegada de XHTML ha provocado

es

algunas restricciones que evitan esos problemas:

.c
os

Las etiquetas se deben cerrar de acuerdo a como se abren:

ad
i fic
rt
ce

Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:

El valor de los atributos se encierran entre comillas:

certificados.cesurformaciononline.com
20 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Los atributos se pueden comprimir:

m
co
e.
Todas las etiquetas deben cerrarse siempre: en el caso de etiquetas que no encierren texto se

in
deberá poner < etiqueta />:

nl
no
io
ac
rm

Existen también otras restricciones o cambios que se ha de tener en cuenta:

fo
ur

Antes de acceder al valor de un atributo se deben eliminar todos los espacios en blanco
es

innecesarios, salvo para identificar diferentes palabras (solo un espacio entre palabras).
.c

El código JavaScript debe encerrarse entre caracteres especiales < ! [ CDATA[ ] ] > ( ya
os

hablaremos y más adelante).

ad

Debemos utilizar el atributo id para identificar de forma única los elementos.

i fic

¿Cómo creamos un documento HTML?

rt
ce

Un documento HTML se basa en un fichero de texto plano, para ello necesitamos un editor de texto

plano, como por ejemplo Notepad++, que por defecto nos abre directamente ya una nueva hoja para

insertar código. Lo único que tendremos que hacer es escribir nuestro código.

Una vez escrito nuestro código lo único que tendremos que hacer es irnos al menú principal y hacer

clic sobre Archivo > Guardar Como… y se nos abrirá la siguiente ventana para que elijamos donde

deseamos guardar nuestro documento.

certificados.cesurformaciononline.com
21 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

m
co
e.
in
nl
no
io
ac
rm

Como vemos en la imagen, nos pide el nombre y el tipo de fichero, el nombre recomiendo que no
fo

tenga espacios ya que si después necesitamos hacer referencia a él, no tendremos problemas y
ur

después en el tipo tendremos que seleccionar Hyper Text Marckup Language (.html).
es
.c
os
ad

Podemos ver fácilmente como se muestra el contenido de nuestro fichero, solo con ir a la ruta donde
fic

hemos guardado el archivo y hacer clic con el botón derecho sobre el archivo, abrir con y
i
rt

seleccionar nuestro navegador, podremos verlo en un navegador.

ce

Al ser un fichero estático no hay problema con este método, en cambio hay tecnologías para generar

documentos HTML de manera dinámica desde un servidor web.

certificados.cesurformaciononline.com
22 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Formularios en HTML

Un formulario es un conjunto de controles como pueden ser cajas de texto, casillas de verificación o

botones que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento.

La etiqueta que delimita un formulario es la etiqueta <form>…</form>. Los atributos más

importantes de esta etiqueta son:

m
Action: contiene un nombre del agente que procesará los datos enviados al servidor (como por

co
ejemplo a un script de PHP).

e.
Method: define la manera de enviar los datos al servidor. Los valores posibles son:

in
Get: los valores enviados se añaden a la dirección indicada en el atributo action.

nl
no
Post: los valores se envían de forma separada.

io
ac
Cuando el atributo method no está establecido el formulario se comporta como si el valor fuera get.
rm

Un ejemplo sencillo de formulario para un login es el siguiente:

fo
ur
es
.c
os
ad
i fic
rt

Y en el navegador se vería de la siguiente forma:

ce

Introducción HTML5

HTML5 como su propio nombre indica es la 5ª revisión del estándar HyperText Markup Languaje y

certificados.cesurformaciononline.com
23 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

su versión final se publicó en Octubre de 2014. Esta nueva versión tiene importantes novedades

respecto a las anteriores, ya que incorpora nuevos elementos para adaptarse a las nuevas

necesidades de las webs de hoy en día.

Novedades de HTML5

Ya hemos visto anteriormente como es un documento HTML básico y que en HTML5 no se define un

DTD. Otra de las novedades es como definimos que codificación de caracteres tiene nuestro

m
documento, es tan simple como definirlo con una etiqueta <meta>en el<head>:

co
e.
in
nl
no
También se han añadido nuevos elementos semánticos como:<header> para la cabecera de la
io
ac
página,<footer> para el pie de página,<article> un artículo en el documento y <section>.
rm

Por ejemplo con <article>, seguiríamos con la estructura similar a un artículo:

fo
ur
es
.c
os
ad
i fic
rt

El uso de estos elementos es el siguiente:

ce

certificados.cesurformaciononline.com
24 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

También, los formularios (<form>) disponen de nuevos atributos como number, date, time, calendar

y range. Además, podemos definir elementos gráficos con <svg> y <canvas>, y elementos

multimedia con <audio> y <video>

Además, con su nueva versión, al contrario que con versiones anteriores donde el lenguaje HTML se

ajustaba al comportamiento del navegador, ahora son los navegadores los que en sus nuevas

versiones han tenido que adaptarse al nuevo lenguaje HTML5.

m
En el siguiente enlace se explican todos los elementos que se añaden para esta nueva versión:

co
https://www.w3schools.com/html/html5_new_elements.asp

e.
in
Creación de una aplicación con HTML5

nl
no
Para utilizar una página web con HTML5 en nuestra aplicación debemos realizar el mismo
io
procedimiento que en el tema anterior, crearemos un objeto WebView en nuestro fichero
ac
activity_main.xml que ocupe la pantalla completa y después en MainActivity.java lo definiremos y
rm

agregaremos la ruta en que se encuentra el directorio de nuestra web .html en webView.loadUrl.

fo

Un ejemplo de web sencilla en HTML5 que podemos utilizar es la siguiente:

ur
es
.c
os
ad
i fic
rt
ce

certificados.cesurformaciononline.com
25 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

m
Y al arrancar la aplicación se mostrará de esta forma:

co
e.
in
nl
no
io
ac
rm
fo
ur
es
.c
os
ad
i fic
rt
ce

certificados.cesurformaciononline.com
26 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

CSS3

CSS es el lenguaje usado para definir la presentación de un documento estructurado HTML. CSS3 es

la nueva versión de CSS. Esta versión es totalmente compatible con las anteriores. ¿Y qué

aporta de nuevo CSS3?

Introducción a CSS

m
CSS es el lenguaje de hojas de estilo creado para controlar el aspecto y la presentación de las

co
páginas Web. Es imprescindible para la creación de páginas Web complejas.

e.
Este lenguaje separa la definición de los contenidos y la definición de su aspecto. Esto hace que

in
nl
mejore la validación de los documentos HTML y XHTML ya que mejora la accesibilidad, reduce la

no
complejidad del mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos

diferentes. io
ac
Este lenguaje funciona mediante el uso de un selector (como pueden ser etiquetas o conjuntos de
rm

etiquetas HTML) que nos permiten identificarlos para después darles un valor a sus propiedades de
fo

diseño.
ur
es

Recordamos que una regla de CSS está formada por una parte llamada “selector” y la parte
.c

llamada “declaración”. La declaración indica qué se le va a aplicar y el selector a quién se le va a

os

aplicar ese formato. Los selectores son imprescindibles para aplicar estos estilos.
ad

Una misma regla se puede aplicar a varios selectores y a un mismo selector se le pueden aplicar
fic

varias reglas. El estándar CSS 2.1 incluye una docena de tipos diferentes de selectores, estos
i
rt

seleccionan de forma muy precisa elementos individuales o conjuntos de elementos dentro de la

ce

Web. Aunque la mayoría de las Web se pueden diseñar utilizando solamente cinco tipos de

selectores.

Algunos de estos selectores son:

Selector universal

Selecciona todos los elementos de la página. Este selector se indica a partir de un asterisco (*). Es

muy sencillo, pero raramente se aplica a todos los elementos de una página un estilo determinado.

certificados.cesurformaciononline.com
27 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

m
co
e.
in
nl
Selector de tipo o etiqueta

no
io
Selecciona todos los elementos HTML que su etiqueta coincida con el valor del selector. Solamente
ac
es necesario indicar el nombre de la etiqueta a la que queremos aplicarle ese estilo.
rm
fo
ur
es
.c
os
ad
i fic
rt
ce

Si queremos aplicar los mismos estilos a dos o más etiquetas diferentes, podemos encadenar los

selectores utilizando “,”.

certificados.cesurformaciononline.com
28 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Selectores ID

A veces solo necesitamos cambiar el estilo a un único elemento, aunque podemos utilizar el selector

visto anteriormente (de clase), existe otro selector más eficiente para estos casos.

m
co
ID permite seleccionar un elemento a través de su atributo id. Este tipo solo selecciona un elemento

e.
porque el atributo id no se puede repetir. La sintaxis de este elemento es igual que el de las clases,

in
pero en vez de usar el “.” se usa “#”.

nl
no
io
ac
rm
fo
ur
es
.c
os
ad
fic

Al igual que el selector clase, nosotros podemos restringir el alcance del selector ID, aunque
i
rt

hayamos dicho antes que es único, puede que tengamos varias páginas HTML que tengan etiquetas
ce

con un mismo id, por esa razón si ponemos p#prueba2, también estaría bien escrito.

Es importante no confundir como hemos dicho antes p#prueba2, con p #prueba2 o p, #prueba2.

Colisiones de estilos

Es posible que tengamos a veces varias reglas que apliquen el mismo estilo a un determinado

elemento. CSS tienen un mecanismo de resolución de colisiones muy complejo y que tiene en cuenta

el tipo de hoja de estilo que se trate, la importancia de cada regla y lo específico que sea el selector.

certificados.cesurformaciononline.com
29 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

El método es:

Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.

Ordenar las declaraciones según su origen y su prioridad ( palabra clave !important).

Ordenar las declaraciones según lo específico que sea el selector. Cuanto más genérico, menos

importancia tiene.

Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se

m
aplica la que se indicó en último lugar.

co
e.
Recomendaciones

in
nl
Se recomienda el uso de unidades relativas, mejora la accesibilidad de la página y permite que los

no
documentos se adapten fácilmente a cualquier medio y dispositivo.
io
El documento de recomendaciones sobre técnicas CSS para mejorar la accesibilidad de los
ac

contenidos HTML http://www.w3.org/TR/WCAG10-CSS-TECHS/, del W3C recomienda el uso de la

rm

unidad em para indicar el tamaño del texto y para todas las medidas que sean posibles.
fo
ur

Normalmente se utilizan píxel y porcentajes para definir el layout del documento y em y porcentajes
es

para el tamaño de la letra de los textos.

.c

Colores
os

Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del
ad

sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más habitual es el
fic

de RGB hexadecimal, CSS ofrece las siguientes alternativas.

i
rt
ce

Colores en Hexadecimal: colores especificados a partir de #RRGGBB, R (red), G( green) y

B(blue), “background-color:#ff0000;”

Colores RGB: se definen mediante rgb(red, green,blue) y pueden ser definidos mediante

(0%-100% o 0-255) background-color: rgb (255,0,0);

Colores RGBA: Igual que el anterior, pero al final se le añade un número más, con él indicamos

el nivel de transparencia que deseamos, “0,0” totalmente transparente – “1.0” totalmente

opaco. background-color: rgba (255,0,0,0.5);

Colores HSL: Significa matiz, saturación y luminosidad. El valor puede ser de 0-360 o también

certificados.cesurformaciononline.com
30 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

0%-100%. background-color: hsl (120,65%,75%);

Colores HSLA: Igual que el anterior pero con la diferencia de que tiene un cuarto valor que es

para la transparencia, puede tomar valores que estén entre 0.0 (totalmente transparente) y 1.0

(totalmente opaco). background-color: hsla (120,65%,75%,0.3);

Colores predefinidos. Aquí tenemos una lista con los nombres de los colores en el navegador:

https://www.w3schools.com/colors/colors_names.asp

m
Introducción a CSS3

co
CSS es el lenguaje usado para definir la presentación de un documento estructurado HTML. CSS3 es

e.
la nueva versión de CSS. Esta versión es totalmente compatible con las anteriores. ¿Y qué

in
nl
aporta de nuevo CSS3?

no
- Nuevos selectores.
io
ac
- Técnicas de diseño avanzado: esquinas redondeadas, gradientes, múltiples imágenes de fondo, etc.
rm

- Color HSL y transparencia.

fo
ur

- Incrustación de fuentes y nuevo formato WOFF.

es

- Transiciones, transformaciones y animaciones

.c
os

Diseño responsive
ad

El diseño responsive o diseño adaptativo es todo aquel diseño que tiene la capacidad de adaptarse al
fic

tamaño y formato de la pantalla en la que se visualiza el contenido, respecto a los diseños

i
rt

tradicionales en los que las páginas web estaban diseñadas para un tamaño o formato específico.
ce

De esta manera maximizaremos la experiencia del usuario con todos los dispositivos, logrando así

que el usuario sienta que la aplicación está diseñada para su dispositivo, y no simplemente

adaptada.

Android Studio nos permite crear un diseño responsive de manera gráfica usando la paleta.

Vamos a crear un nuevo proyecto vacío y vamos a eliminar el texto TextView que aparece por

defecto para que quede así:

certificados.cesurformaciononline.com
31 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Después vamos a cambiar nuestro layout de "androidx.constraintlayout.widget.ConstraintLayout" a

"RelativeLayout":

m
co
e.
Con esto ya podemos comenzar a agregar nuevos elementos dentro de nuestro layout para que estos

in
nl
se ajusten a la pantalla cuando la giremos.

no
Vamos a insertar una caja de texto y un botón en la parte superior de la pantalla para que cuando la
io
giremos estos se posicionen de nuevo en la parte superior manteniendo unos márgenes:
ac
rm
fo
ur
es
.c
os
ad
i fic
rt

Después al arrancar la aplicación podemos comprobar como los elementos se encuentran en la parte
ce

superior de la pantalla:

certificados.cesurformaciononline.com
32 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

m
co
e.
in
nl
no
io
ac

Y al girar el dispositivo mantendrán la misma estructura:

rm
fo
ur
es
.c
os
ad
i fic
rt
ce

certificados.cesurformaciononline.com
33 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Recuerda

[[[Elemento Multimedia]]]

m
co
e.
in
nl
no
io
ac
rm
fo
ur
es
.c
os
ad
i fic
rt
ce

certificados.cesurformaciononline.com
34 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Autoevaluación

Indica si el siguiente enunciado es verdadero o falso: HTML es un lenguaje de

programación que nos permite generar páginas web.

Falso

m
Verdadero

co
e.
in
¿El siguiente codigo en Javascript es correcto?

nl
function unaFuncion(msg){

no
alert(msg);
}
io
ac
function ejecuta(func, param){
func(param);
rm

}
fo

ejecuta(unaFuncion, "hola");
ur
es

Si
.c
os

No
ad
fic

Depende de la versión
i
rt
ce

Indica si el siguiente enunciado es verdadero o falso: HTML siglas de Hyper Text

Markup Language, es el lenguaje más utilizado para la creación de páginas Web.
Es un lenguaje bastante sencillo de aprender y de escribir.

Falso

certificados.cesurformaciononline.com
35 / 36
[AFO018339] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[MOD016530] IFCT048PO APLICACIONES CON ANDROID Y HTML 5
[UDI096183] JAVASCRIPT, HTML5 Y CSS3.

Verdadero

... se creó para cubrir la necesidad de definir un mecanismo que permitiera

aplicar diferentes estilos a los documentos.

HTML

m
co
JAVA

e.
in
CSS

nl
no
io
Indica si el siguiente enunciado es verdadero o falso: CSS es el lenguaje de hojas
ac
de estilo creado para controlar el aspecto y la presentación de las páginas Web.
Es imprescindible para la creación de páginas Web complejas.
rm
fo
ur

Falso
es
.c

Verdadero
os
ad
i fic
rt
ce

certificados.cesurformaciononline.com
36 / 36