Desarrollo web Front End

DESARROLLO WEB
1. Introducción
2. HTML
3. CSS
4. JavaScript
5. jQuery
6. AngularJS
7. Apache Cordova(Phonegap)
8. Otras herramientas

INTRODUCCIÓN
FRONTEND + +
Comunicación HTTP
BACKEND
+ +
+ +

HTML
Es laestructurade lapáginaWeb.
<
!
D
O
C
T
Y
P
Eh
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
T
i
t
u
l
od
el
ap
á
g
i
n
a
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>

<
!
-
-U
nc
o
m
e
n
t
a
r
i
o-
-
>
<
d
i
v
>

U
np
á
r
r
a
f
o
.

<
/
d
i
v
>

<
/
h
t
m
l
>
DEMO

CSS
Se utilizaparadescribir elaspecto yelformato de lapáginaweb.
#
r
e
s
u
l
t
a
d
o
s{
b
o
r
d
e
r
:2
p
xs
o
l
i
db
l
a
c
k
;
}
#
r
e
s
u
l
t
a
d
o
st
h{
c
o
l
o
r
:r
e
d
;
}
.
h
i
g
h
l
i
g
h
t{
f
o
n
t
-
s
i
z
e
:3
0
p
x
;
}
b
u
t
t
o
n{
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
:#
6
6
F
F
4
4
;
}
DEMO

CSS
Existen librerías yframeworks que yatienen un CSS
facilitandonos eltener que crear uno de cero.
http://getbootstrap.com/
DEMO

JAVASCRIPT
Es un lenguaje de programación interpretado mayormente
utilizado parahacer las páginas web dinámicas.
Es débilmente tipado.
Es tipado dinámico.
Basado en prototipos.
Evaluación en tiempo de ejecución.
Funciones de primeraclase.

JAVASCRIPT
Se utilizaparadescribir elaspecto yelformato de lapáginaweb.
v
a
rr
e
s
u
l
t
a
d
o
;
f
u
n
c
t
i
o
nf
a
c
t
o
r
i
a
l
(
n
){
i
f(
n=
=
=0
){
r
e
t
u
r
n1
;
}
r
e
t
u
r
nn*f
a
c
t
o
r
i
a
l
(
n-1
)
;
}
r
e
s
u
l
t
a
d
o=f
a
c
t
o
r
i
a
l
(
5
)
;
DEMO

JQUERY
Se utilizaparasimplificar lasintaxis yparaevitar problemas de
compatibilidad entre navegadores.
$
(
"
b
u
t
t
o
n
.
c
o
n
t
i
n
u
e
"
)
.
h
t
m
l
("
N
e
x
tS
t
e
p
.
.
.
"
)
;
v
a
rh
i
d
d
e
n
B
o
x=$
("
#
b
a
n
n
e
r
-
m
e
s
s
a
g
e
")
;
$
("
#
b
u
t
t
o
n
-
c
o
n
t
a
i
n
e
rb
u
t
t
o
n
")
.
o
n
("
c
l
i
c
k
"
,f
u
n
c
t
i
o
n
(e
v
e
n
t){
h
i
d
d
e
n
B
o
x
.
s
h
o
w
(
)
;
}
)
;
DEMO

ANGULAR JS
Es un framework JavaScriptque ayudaacrear "Single Page
App"(SPA).
Ayudaaestructurar elcódigo separándolo en Módulos que
continen Controladores, Directivas, Filtros yServicios.

ANGULAR JS
<
!
D
O
C
T
Y
P
Eh
t
m
l
>
<
h
t
m
ln
g
-
a
p
p
>
<
h
e
a
d
>
<
s
c
r
i
p
ts
r
c
=
"
j
s
/
a
n
g
u
l
a
r
.
m
i
n
.
j
s
"
>
<
/
s
c
r
i
p
t
>
<
/
h
e
a
d
>

<
l
a
b
e
l
>
N
a
m
e
:
<
/
l
a
b
e
l
>

<
h
1
>
H
e
l
l
o{
{
y
o
u
r
N
a
m
e
}
}
!
<
/
h
1
>

<
/
h
t
m
l
>
DEMO

APACHE CORDOVA
Es unaplataformaparaconstruir aplicaciones móviles nativas
utilizando HTML, CSS yJavaScript.
-CREARDEMO -

GIT
GITHUB
Elrepositorio open source más popular.
Fácilde utilizar.
De formagratuitasólo permite proyectos open source.
https://github.com/

GIT
BITBUCKET
Fácilde utilizar.
Permite repositorios privados paraun equipo de máximo 10
personas.
https://bitbucket.org/

Estapresentación fué hechacon HTML + CSS + JS utilizando la
libreríaReveal.js

Los ejemplos ylapresentación se encuentran subidos en:
https://github.com/ferc/presentacion_web
MUCHAS GRACIAS.

Desarrollo web Front End

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Desarrollo web Front End

Similaire à Desarrollo web Front End (20)

Dernier

Dernier (13)

Desarrollo web Front End