DESARROLLO
DE
APLICACIONES
PARA
DISPOSITIVOS
MOVILES
M.Sc
(c).
Jaime
Caicedo
Guerrero
[email protected]
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML
Lenguaje
de
marcado
predominante
en
la
construccin
de
pginas
Web.
Describe
la
estructura
y
el
contenido
de
la
pgina
Web.
Lenguaje
basado
en
eBquetas.
El
contenido
es
estructurado
en
Elementos
usando
eFquetas
(tags)
con
informacin
extra
proporcionada
por
atributos.
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML:
Evolucin
HTML
4.0.1
HTML
4.0
HTML
3.2
HTML
5.0
HTML
2.0
XHTML
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML
Estructura
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Estructura
bsica
de
un
documento
HTML
<!DOCTYPE
html
PUBLIC
-//W3C//DTD
XHTML
1.0
Strict//EN
h]p://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
1
<html
xmlns=h]p://www.w3.org/1999/xhtml
xml:lang=en>
<head>
<Ftle></Ftle>
2
</head>
<body>
3
1
Declaracin
</body>
2
Encabezado
</html>
3
Cuerpo
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML:
Algunas
reglas
bsicas
Uso
de
letras
minsculas
para
los
tags
<a
href=hVp://www.mipagina.com/>Mi
pagina</a>
Apertura
y
cierre
de
eBquetas
<p>
</p>
Valores
de
atributos
entre
comillas
Elementos
anidados
apropiadamente
<p>Ir
a
mi
pagina
<a
href=hVp://www.mipagina.com/>Mi
pagina</a></p>
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML:
Algunas
eFquetas
comunes
Prrafo:
<p>
</p>
Introduce
una
lnea
en
blanco
entre
bloques
de
datos
Headings
<h1>
hasta
<h6>
EnfaBza
el
texto
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML:
Algunas
eFquetas
comunes
Tablas:
<table></table>
Organizacin
de
informacin
de
forma
tabular
table
width="100%"
height="100%"
border="1
tr
tdPrimera
celda/td
tdSegunda
celda/td
/tr
tr
tdTercera
celda/td
tdCuarta
celda/td
/tr
/table
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML:
Algunas
eFquetas
comunes
One
side
tags
br:
Inserta
lneas
en
blanco
en
el
cdigo
<hr>:
Inserta
una
lnea
horizontal
en
la
pgina
hr
align="right"
color="black"
size="3"
width="50%"
img:
Especica
la
localizacin
de
una
imagen
pimg
src="photograph.jpg"/p
meta:
Informacin
relevante
para
los
motores
de
bsqueda
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML:
Algunas
eFquetas
comunes
Hipervnculos:
<a></a>
Enlaces
a
otros
recursos
dentro
o
fuera
del
documento
actual
<a
href=mipagina.html#PER">Datos
personales</a>
<a
name=PER"></a>
EBqueta
de
desBno
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML:
Algunas
eFquetas
comunes
Comentarios
Pueden
ser
mulFlnea.
El
navegador
no
interpreta
los
comentarios
como
cdigo
ejecutable.
!--
Texto
del
comentario
--
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
HTML:
Caracteres
especiales
Relacionado
con
el
conjunto
de
caracteres
Es
ms
seguro
susBtuir
el
caracter
especial
por
su
cdigo
respecBvo.
Ej:
á
é
í
ó
ú
&nFlde;
ä
¿
"
&
"
&
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Formularios
Proporciona
un
mecanismo
para
que
los
usuarios
puedan
interactuar
con
el
siBo
Web.
Propsito:
Recopilar
informacin
directamente
de
los
usuarios.
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Formularios
Dos
tags
esenciales:
<form>
<input
type=>
<input
type=>
</form>
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Input
types
Tipo
BuVon
Checkbox
File
Hidden
Image
Descripcin
Botn
personalizado
sin
una
funcin
denida
en
HTML.
Puede
ser
usado
para
lanzar
acciones
JavaScript.
Cajas
de
chequeo.
Puede
exisBr
seleccin
simultnea.
Caja
de
texto
especializada
para
ingreso
de
rutas
de
archivos.
Campos
ocultos
para
el
usuario.
Su
informacin
se
transmite
con
el
formulario.
Una
alternaBva
grca
para
los
botones
de
envo
del
formulario.
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Input
types
Tipo
Password
Radio
Reset
Submit
Text
Descripcin
Oculta
los
caracteres
visibles
en
la
caja
de
texto.
No
realiza
funciones
de
cifrado.
Opciones
de
seleccin.
A
diferencia
de
checkbox,
no
puede
exisBr
seleccin
simultnea.
Retorna
la
informacin
del
formulario
a
sus
valores
iniciales.
Botn
para
envo
de
la
informacin
del
formulario.
Caja
de
texto
para
capturar
informacin
de
usuario.
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Nombrado
de
elementos
Es
importante
asignar
un
nombre
a
cada
elemento
del
formulario,
ya
que
ste
se
empareja
con
el
valor
respecBvo
cuando
se
enva
el
formulario.
Ej:
<input
type="text"
name=age>
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Cajas
de
texto
315
Tamao
Valor
por
defecto
<INPUT
type="text"
size=10"
name=tel"
value=315"
maxlength=10>
Nombre
Tamao
mximo
<INPUT
type="text"
size=10"
name=tel"
value=315"
readonly>
disabled>
Parmetros
de
slo
lectura
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Labels
p
First
Name:
input
type="text"
name="rstname"
size="20"
maxlength="50"
/p
p
Last
Name:
input
type="text"
name="lastname"
size="20"
maxlength="50"
/p
p
label
for="rstname"First
Name:
/label
input
type="text"
name="rstname"
size="20"
maxlength="50"
/p
p
label
for="lastname"Last
Name:
/label
input
type="text"
name="lastname"
size="20"
maxlength="50"
/p
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Envo
del
formulario
Mtodo
de
envo
HTTP
get
<form
acFon="acBon.php"
method=post>
<form
acFon="acBon.php"
method=post
enctype="mulFpart/form-data">
Si
se
incluye
un
File
Input
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Capas
Propsito:
Facilitar
el
layout
o
posicionamiento
de
los
elementos
dentro
de
la
pgina
Web.
<div> :
Dene
secciones
de
bloque.
Agrupa
elementos
de
disBnto
Bpo.
denicin
de
esBlo.
<span>:
Agrupa
pequeas
secciones
de
texto
para
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Capas
<div>
<span>
<span>
<div>
<div>
<div>
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
CSS
Brinda
a
los
diseadores
de
pginas
Web
la
posibilidad
de
controlar
la
apariencia
de
los
Websites
Permite
separar
el
contenido
de
la
presentacin
Especicacin
de
esBlos
para
todo
el
Website,
por
pgina
o
tag.
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
CSS
Ventajas
Reduce
el
tamao
de
los
archivos
HTML.
Reduce
el
Bempo
de
descarga
en
la
red.
Separacin
adecuada
de
contenido
y
presentacin.
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
CSS
Porqu
CSS?
EsFlo
CSS
Externa
Prioridad
ms
baja
EsFlo
Pgina
Web
EsFlo
Nivel
Elemento
Prioridad
ms
alta
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
El
atributo
Style
La
forma
ms
simple
de
adicionar
esBlo
a
un
elemento
individual
dentro
del
documento
HTML
es
a
travs
del
atributo
style.
<h1
style="color:
magenta>Bienvenidos</h1>
Sintaxis:
propiedad:valor;
propiedad:valor
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Controles
de
esFlo
embebidos
Control
sobre
la
presentacin
de
la
pgina
y
no
sobre
un
elemento
en
parBcular.
head
style
h1
{
color:
magenta
}
/style
/head
Propiedad
CSS
Selector
Aplica
para
todos
los
tags
<h1>
dentro
de
la
pgina
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Enlace
a
hojas
de
esFlo
externas
Los
esBlos
son
denidos
en
un
archivo
externo
(.css).
pagina.html
site_sheet.css
head
link
rel="stylesheet"
href="site_sheet.css"
type="text/css"
link
rel="stylesheet"
href="site_sheet.css"
type="text/css"
/head
Enlace
a
ms
de
una
hoja
de
esBlo
h1
{
font-size:
1in;
margin-lew:
.5in
}
h2
{
font-size:
.75in;
margin-lew:
.5in
}
h3
{
font-size:
.5in;
margin-lew:
.5in
}
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Establecer
esFlos
a
grupos
de
elementos
Class:
Balance
entre
el
poder
de
asignacin
de
esBlo
a
travs
de
selectores
y
la
asignacin
manual
a
travs
de
HTML.
head
style
.clase1
{font-family:
Arial,
HelveBca,
sans-serif;
font-size:
16px}
.clase2
{color:
#FFCC00}
/style
/head
Declaracin
del
esBlo
de
la
clase
Declaracin
del
atributo
class
dentro
del
Elemento
p
class=clase1"Ejemplo
de
clase
1p
p
class=clase2"Ejemplo
de
clase
2/p
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Establecer
esFlos
a
elementos
especcos
Id:
Control
de
esBlo
a
nivel
de
elemento.
head
style
#personal
{color:
#00FF00}
/style
/head
Asignacin
del
id
al
Elemento
p
id=personal"Ejemplo
de
asignacin
de
id</p
Declaracin
del
esBlo
del
elemento
con
el
id
personal
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Originalmente
conocido
como
LiveScript
(NetScape)
Lenguaje
de
ScripBng
basado
en
objetos
Tradicionalmente
embebido
en
pginas
Web
Creacin
de
aplicaciones
Web
dinmicas
a
travs
del
uso
de
eventos
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Declaracin
de
variables
var
answer
var
answer
=
42
Palabra
clave
no
requerida
textEntry
=
window.document.orderNow.visitorName.value;
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Palabras
reservadas
JavaScript
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Operadores
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Comentarios
//
de
lnea
(hasta
el
nal
de
la
lnea
/*
*/
MulBlnea
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Eventos
Se
generan
a
parFr
de
una
accin
del
usuario
Manejadores
de
eventos
parFculares:
On
+
nombre
del
evento
Ej:
OnClick,
OnUnload
<body
onLoad="alert(Hola!)"
onUnload="alert(Hasta
luego!)>
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Statements
Instrucciones
que
informan
al
navegador
lo
que
debe
hacer.
Ej:
document.write(Este
texto
se
adiciona
a
la
pgina.");
alert(Esta
es
una
ventana
de
alerta.");
Existen
tres
formas
de
introducir
statements:
Como
atributos
de
un
elemento
HTML
Como
instrucciones
en
el
contenido
del
tag
<script>
Como
parte
de
una
funcin
en
el
contenido
del
tag
<script>
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Statements
Uso
del
tag
<script>
<script
language=JavaScript>
document.write(Primera
linea.<br/>);
document.write(Segunda
linea.<br/>);
document.write(El
valor
actual
es"
+
window.document.formOne.rstName.value);
</script>
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Funciones
Conjunto
de
statements
que
se
ejecutan
de
forma
secuencial
<script>
funcFon
func%onName(){
rstStatement;
secondStatement;
thirdStatement;
}
</script>
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
JavaScript
Estructuras
de
control
if
else
switch
case
for
()
.
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
AJAX
Asynchronous
JavaScript
And
XML
JavaScript
y
XML
asncrono
Tcnica
de
desarrollo
Web
para
crear
aplicaciones
interacBvas
Ejecucin
del
lado
del
cliente
Comunicaciones
con
el
servidor
en
segundo
plano
(asncrono)
Aumenta
la
interacBvidad,
velocidad
y
usabilidad
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
AJAX
Combinacin
de
tres
tecnologas
existentes:
XHTML
(HTML)
y
Hojas
de
esBlo
(presentacin)
Document
Object
Model
(DOM):
scripBng
con
lenguajes
como
JavaScript
o
JScript
para
interactuar
con
la
informacin
presentada
XMLHVpRequest:
intercambio
de
datos
asncronos
con
el
Servidor
Web.
XML
como
formato
preferencial
(HTML,
Texto
plano,
JSON,
EBML,
etc.)
No
es
una
tecnologa,
trmino
que
engloba
a
un
grupo
de
tecnologas
que
trabajan
juntas
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
AJAX
Cmo
funciona
la
Web
tradicionalmente?
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
AJAX
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Prctica: HTML+CSS+JavaScript
Prctica Test.html, CSSTest.css
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Jaime
Caicacedo
Guerrero
[email protected]
Of.
405
ext.
2127
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
Gracias!
Jaime
Caicacedo
Guerrero
[email protected]
Of.
405
ext.
2127
Mag.
Francisco
Mar-nez,
Mag(c)
Jaime
Caicedo
