Desarrollo Web I

8/18/2019 Desarrollo Web I

1/37

CM

Introducción AJAX

Ingeniería 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.


3/37

CM

¿Qué es AJAX?


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.


4/37

CM

¿Qué es AJAX?


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&.


5/37

CM

Formas para indicar el color


Pro lema< title>


6/37

CM



&fondo) . ac",round/color0r, 1+223434567&fondo+ .

ac",round/color0r, 1)44832483248567&fondo- . ac",round/color09fa 67


7/37

CM



&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/37

CM

Definir un cursor para un elemento HTML


Pro lema< title>


9/37

CM

Definir un cursor para un elemento HTML


La hoja de estilo es,

a . cursor0hel'6 7


10/37

CM

Definiendo re las de estilo a una ta!la


Pro lema< title>


11/37

CM



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>


12/37

CM


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



13/37

CM



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


14/37


15/37

CM

"ropiedad float aplicada a una ima en


La hoja de estilo,

img 0 )loat,right1 2


16/37

CM

Aplicación de #o$as de estilo a un formulario


Pro lema< title>


17/37

CM

Aplicación de #o$as de estilo a un formulario


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


18/37

CM

"ropiedad clear


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&


19/37

CM

"ropiedad clear


Pro lema< title>


20/37

CM

"ropiedad clear


< di;>


21/37

CM

"ropiedad clear


< di;>


22/37

CM

"ropiedad clear


< di;> < od%> < html>


23/37

CM

"ropiedad clear


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


24/37

CM

%elector de atri!uto


: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


25/37

CM



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


26/37

CM



1

Pro lema< title> r a%ahoo< a> < li>< ol>< od%>< html>


27/37

CM



+& 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


28/37

CM



-& #odemos tam+i9n controlar si el valor de la propiedadcomien:a; )inali:a o tiene en su interior unadeterminada cadena de caracteres.


29/37

CM



-&

Pro lema< title>


30/37

CM

Transformaciones &D' rotación


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


31/37

CM



#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


32/37

CM



#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


33/37

CM



Prue a< title>


34/37

CM



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


35/37

CM



od% . ac",round0=hite6 mar,in024'(6 7< st%le>

< head>< od%>

Iecuadro )< h->

< di;>

CM


36/37

CM



Iecuadro +< h->

< di;>

< od%>< html>


37/37

CM

Clic" to edit com'an% slo,an &

Uracias

Desarrollo Web I

Documents

Transcript of Desarrollo Web I