View
220
Download
0
Category
Preview:
Citation preview
8/18/2019 Desarrollo Web I
1/37
CM
Introducción AJAX
Ingeniería Web I
8/18/2019 Desarrollo Web I
2/37
CM
¿Qué es AJAX?
Curso: Ingeniería Web I CAP 1
AJAX son las siglasde A synchronous J avaScript And XML.No es un lenguaje de programación sino unconjunto de tecnologías ( !ML "JavaScript "CSS "DHTML"# #$AS#.N%!$JS#"XML& 'uenos permiten hacer p ginas de internet m sinteractivas.
8/18/2019 Desarrollo Web I
3/37
CM
¿Qué es AJAX?
Curso: Ingeniería Web I CAP 1
La característica )undamental de AJAX es
permitir actualizar parte de una página
con in)ormación 'ue se encuentra en el servidor sin
tener que refrescar completamente lap gina. *e modo similar podemos enviar in)ormación alservidor.
8/18/2019 Desarrollo Web I
4/37
CM
¿Qué es AJAX?
Curso: Ingeniería Web I CAP 1
La complejidad se encuentra en 'ue de+emosdominar varias tecnologías,
!ML-SSJavaScript# # o alg n otro lenguaje 'ue se ejecute en el servidor (AS#.Net $ #ython $ etc&.
8/18/2019 Desarrollo Web I
5/37
CM
Formas para indicar el color
Curso: Ingeniería Web I CAP 1
Pro lema< title>
8/18/2019 Desarrollo Web I
6/37
CM
Formas para indicar el color
Curso: Ingeniería Web I CAP 1
&fondo) . ac",round/color0r, 1+223434567&fondo+ .
ac",round/color0r, 1)44832483248567&fondo- . ac",round/color09fa 67
8/18/2019 Desarrollo Web I
7/37
CM
Formas para indicar el color
Curso: Ingeniería Web I CAP 1
&fondo) . ac",round/color0r, 1+223434567&fondo+ .
ac",round/color0r, 1)44832483248567&fondo- . ac",round/color09fa 67
:hora cam iar el CSS 'ara tonalidades
deri;adas del a ul
8/18/2019 Desarrollo Web I
8/37
CM
Definir un cursor para un elemento HTML
Curso: Ingeniería Web I CAP 1
Pro lema< title>
8/18/2019 Desarrollo Web I
9/37
CM
Definir un cursor para un elemento HTML
Curso: Ingeniería Web I CAP 1
La hoja de estilo es,
a . cursor0hel'6 7
8/18/2019 Desarrollo Web I
10/37
CM
Definiendo re las de estilo a una ta!la
Curso: Ingeniería Web I CAP 1
Pro lema< title>
8/18/2019 Desarrollo Web I
11/37
CM
Definiendo re las de estilo a una ta!la
Curso: Ingeniería Web I CAP 1
Pro;incia< th>Enero< th> e rero< th>Mar o< th>< tr>< thead>
:requi'a< th>+)4< td>)?4< td>)+4< td>< tr>
Puno< th>+24< td>)@4< td>)A4< td>< tr>
Cusco< th>)?2< td>)A4< td>)+4< td>< tr>< t od%>< ta le>< od%>< html>
8/18/2019 Desarrollo Web I
12/37
CM
Curso: Ingeniería Web I CAP 1
ca'tion. font/famil%0arial6 font/si e0)2'(6 te(t/ali,n0 center6 mar,in0 4'(6 font/=ei,ht0 old6
'addin,0)4'(6 7
ta le. order/colla'se0 colla'se6 7
th. order/ri,ht0 )'( solid 9fff6 order/ ottom0 )'( solid 9fff6 'addin,0 4&2em6 ac",round/color09BA@2ed6 7
Definiendo re las de estilo a una ta!la
8/18/2019 Desarrollo Web I
13/37
CM
Definiendo re las de estilo a una ta!la
Curso: Ingeniería Web I CAP 1
thead th. ac",round/color0 9BA@2ed6 color0 9fff6 7
t od% th
. font/famil%0arial6 font/=ei,ht0 normal6 ac",round/color0 9BA@2ed6 color09ff46 7
td .
order0 )'( solid 94446 'addin,0 &2em6 ac",round/color09ed fB-6 =idth0)44'(6 te(t/ali,n0center6 7
8/18/2019 Desarrollo Web I
14/37
8/18/2019 Desarrollo Web I
15/37
CM
"ropiedad float aplicada a una ima en
Curso: Ingeniería Web I CAP 1
La hoja de estilo,
img 0 )loat,right1 2
8/18/2019 Desarrollo Web I
16/37
CM
Aplicación de #o$as de estilo a un formulario
Curso: Ingeniería Web I CAP 1
Pro lema< title>
8/18/2019 Desarrollo Web I
17/37
CM
Aplicación de #o$as de estilo a un formulario
Curso: Ingeniería Web I CAP 1
9contenedorform . =idth0244'(6mar,in/left0+4'(6mar,in/to'0)4'(6
ac",round/color09ffe6 order0)'( solid 9CCC6
'addin,0)4'( 4 )4'( 46 7
9contenedorform form la el . =idth0)+4'(6
float0left6 font/famil%0;erdana6
font/si e0)A'(6 7
& otonsu mit . color09f446 ac",round/color09 6 order0 )'( solid 9fff6 7
8/18/2019 Desarrollo Web I
18/37
CM
"ropiedad clear
Curso: Ingeniería Web I CAP 1
La 'ro'iedad clear se em'lea com in*ndola con
otros elementos que se ha%an definido la 'ro'iedadfloat& La 'ro'iedad clear define que un elemento HTML no
'ermite que flote en el caso que el elemento anterior se ha%a
definido con dicha 'ro'iedad&
Tam iFn se 'uede definir que no flote a i quierda o derecha
Gnicamente&
8/18/2019 Desarrollo Web I
19/37
CM
"ropiedad clear
Curso: Ingeniería Web I CAP 1
Pro lema< title>
8/18/2019 Desarrollo Web I
20/37
CM
"ropiedad clear
Curso: Ingeniería Web I CAP 1
< di;>
8/18/2019 Desarrollo Web I
21/37
CM
"ropiedad clear
Curso: Ingeniería Web I CAP 1
< di;>
8/18/2019 Desarrollo Web I
22/37
CM
"ropiedad clear
Curso: Ingeniería Web I CAP 1
< di;> < od%> < html>
8/18/2019 Desarrollo Web I
23/37
CM
"ropiedad clear
Curso: Ingeniería Web I CAP 1
9ca a) . float0left6 =idth0+24'(6 ac",round/color09ffc6 mar,in0)4'(6 7
9ca a+ . float0left6 =idth0+24'(6 ac",round/color09ffc6 mar,in0)4'(6 7
9ca a- . float0left6 =idth0+24'(6
ac",round/color09ffc6 mar,in0)4'(6 7
9ca aA . float0left6 =idth0+24'(6 ac",round/color09ffc6 mar,in0)4'(6 7
8/18/2019 Desarrollo Web I
24/37
CM
%elector de atri!uto
Curso: Ingeniería Web I CAP 1
:hora ;eremos otra forma de seleccionar elementos HTML mediante elacceso de sus atri utos&
Iecordemos que un elemento HTML est* normalmente constituido 'or
una marca de comien o3 un ;alor3 la marca de cierre % sus atri utos0
8/18/2019 Desarrollo Web I
25/37
CM
%elector de atri!uto
Curso: Ingeniería Web I CAP 1
Ha% una serie de 'osi ilidades de utili ar el selector de atri uto que'asaremos a ;er0
)& Con el selector de atri uto
'odemos ;erificar si un elementoHTML tiene definida un atri utodeterminado 'ara asK 'oder a'licar
un estilo& Por e em'lo a'liquemosestilos distintos a los elementos $a$que tienen definido el atri utotar,et0
estilos.cssa3target40 color,5)661 2
8/18/2019 Desarrollo Web I
26/37
CM
%elector de atri!uto
Curso: Ingeniería Web I CAP 1
1
Pro lema< title> r a%ahoo< a> < li>< ol>< od%>< html>
8/18/2019 Desarrollo Web I
27/37
CM
%elector de atri!uto
Curso: Ingeniería Web I CAP 1
+& na se,unda 'osi ilidad es nosolo ;erificar si un elemento HTMLdefine una determinada 'ro'iedadsino controlar si su contenidoalmacena un determinado ;alor&
Confeccionemos una '*,ina quemuestre todos los enlaces $ a$ de
la '*,ina que ten,an
estilos.cssa3hre)785840 te/t"decoration,line"through1 2
8/18/2019 Desarrollo Web I
28/37
CM
%elector de atri!uto
Curso: Ingeniería Web I CAP 1
-& #odemos tam+i9n controlar si el valor de la propiedadcomien:a; )inali:a o tiene en su interior unadeterminada cadena de caracteres.
8/18/2019 Desarrollo Web I
29/37
CM
%elector de atri!uto
Curso: Ingeniería Web I CAP 1
-&
Pro lema< title>
8/18/2019 Desarrollo Web I
30/37
CM
Transformaciones &D' rotación
Curso: Ingeniería Web I CAP 1
Las transformaciones toda;Ka no est*n definidas como un est*ndar entodos los na;e,adores3 'or lo que es necesario a,re,ar el 'refi o del
na;e,ador que la im'lementa0Elemento ./ms/transform0 funciRn de transformaciRn1;alor1es556 Q nternetE('lorer Q
/=e "it/transform0 funciRn de transformaciRn1;alor1es556 Q e it Q/mo /transform0 funciRn de transformaciRn1;alor1es556 Q irefo( Q/o/transform0 funciRn de transformaciRn1;alor1es556 Q O'era Q7
Ten,amos en cuenta que la 'ro'iedad de transformaciRn+D definiti;a ser*0Elemento. transform0 funciRn de transformaciRn1;alor1es556 7
8/18/2019 Desarrollo Web I
31/37
CM
Transformaciones &D' rotación
Curso: Ingeniería Web I CAP 1
#ara rotar un recuadro => grados en sentidos de las agujasde un reloj y 'ue )uncione en la mayoría de los navegadoresde+eremos implementar el siguiente código,
5recuadro?0"ms"trans)orm, rotate(=>deg&1"@e+ it"trans)orm, rotate(=>deg&1"mo:"trans)orm, rotate(=>deg&1"o"trans)orm, rotate(=>deg&1
trans)orm, rotate(=>deg&1+order"radius, B6p/1+ac ground"color,5ddd1@idth,B66p/1padding,?6p/1 2
8/18/2019 Desarrollo Web I
32/37
CM
Transformaciones &D' rotación
Curso: Ingeniería Web I CAP 1
#ara rotar un recuadro => grados en sentidos de las agujasde un reloj y 'ue )uncione en la mayoría de los navegadoresde+eremos implementar el siguiente código,
5recuadro?0"ms"trans)orm, rotate(=>deg&1"@e+ it"trans)orm, rotate(=>deg&1"mo:"trans)orm, rotate(=>deg&1"o"trans)orm, rotate(=>deg&1
trans)orm, rotate(=>deg&1+order"radius, B6p/1+ac ground"color,5ddd1@idth,B66p/1padding,?6p/1 2
8/18/2019 Desarrollo Web I
33/37
CM
Transformaciones &D' rotación
Curso: Ingeniería Web I CAP 1
Prue a< title>
8/18/2019 Desarrollo Web I
34/37
CM
Transformaciones &D' rotación
Curso: Ingeniería Web I CAP 1
9recuadro+. /ms/transform0 rotate1/A2de,56 /=e "it/transform0 rotate1/A2de,56 /mo /transform0 rotate1/A2de,56 /o/transform0 rotate1/A2de,56 transform0 rotate1/A2de,56 order/radius0 +4'(6
ac",round/color09ddd6 =idth0+44'(6 'addin,0)4'(67
CM
8/18/2019 Desarrollo Web I
35/37
CM
Transformaciones &D' rotación
Curso: Ingeniería Web I CAP 1
od% . ac",round0=hite6 mar,in024'(6 7< st%le>
< head>< od%>
Iecuadro )< h->
< di;>
CM
8/18/2019 Desarrollo Web I
36/37
CM
Transformaciones &D' rotación
Curso: Ingeniería Web I CAP 1
Iecuadro +< h->
< di;>
< od%>< html>
8/18/2019 Desarrollo Web I
37/37
CM
Clic" to edit com'an% slo,an &
Uracias
Recommended