javascript html5 css3
TRANSCRIPT
-
8/17/2019 Javascript HTML5 CSS3
1/57
Objetivos del curso
-
8/17/2019 Javascript HTML5 CSS3
2/57
1. Objetivosl Conocer los fundamentos del protocolo HTTP/Sl
Conocer los distintos agentes que forman parte del protocoloHTTP y su funci nl Conocer los fundamentos de !avascriptl Saber construir y reutili"ar funcionesl Conocer los objetos principales de !avascriptl Saber utili"ar los objetos de !S para funciones definidas en unos
requisitosl Conocer las distintas clases b#sicas de !Sl Saber modificar el $O% seg&n unos requisitos propuestos
-
8/17/2019 Javascript HTML5 CSS3
3/57
'ndice de contenido
1.(ntroducci n a la )eb*.+a ,erramienta de $esarrollo-.$epuraci n de c digo !avascript
.(ntroducci n a !avascript
.Comentarios y 0ariables
.Operadores2.3structuras de control4.Objetos b#sicos5 document6 7indo7 y forms8.Clases 9#sicas !avascript1:.3ventos !avascript11.%anipulaci n del $O%1*.9uenas Pr#cticas
-
8/17/2019 Javascript HTML5 CSS3
4/57
(ntroducci n a la )eb
-
8/17/2019 Javascript HTML5 CSS3
5/57
-
8/17/2019 Javascript HTML5 CSS3
6/57
1. (ntroducci n a la )eb
-
8/17/2019 Javascript HTML5 CSS3
7/57
1. (ntroducci n a la )eb
-
8/17/2019 Javascript HTML5 CSS3
8/57
Herramientas de $esarrollo
-
8/17/2019 Javascript HTML5 CSS3
9/57
1.Herramientas de desarrollo
1.3clipse*.@ptana Studio-.!S$T AdebugB
. irefoD
. irebug
.Crossfire para firebugAdebugB
-
8/17/2019 Javascript HTML5 CSS3
10/57
+enguaje !avascript
-
8/17/2019 Javascript HTML5 CSS3
11/57
1.+enguaje !avascript
1.+enguaje (nterpretado*.Orientado a objetos-.3jecutado en el navegador
.Orientado a 3ventos
.(ntegrado dentro del HT%+
.Principalmente enfocado amodificar la p#gina A$O%B
2.
-
8/17/2019 Javascript HTML5 CSS3
12/57
-
8/17/2019 Javascript HTML5 CSS3
13/57
1.!avascript5 Comentarios
1. // comentarios de una linea*./E comentarios de variaslineasE/
-
8/17/2019 Javascript HTML5 CSS3
14/57
-
8/17/2019 Javascript HTML5 CSS3
15/57
1.!avascript5 Palabras reservadasl abstractl
boolean break bytel case catch char class const continuel debugger default delete do doublel else enum export extendsl false final finally float for functionl gotol
if implements import in instanceof int interfacel longl native new nulll package private protected publicl returnl short static super switch synchronizedl
this throw throws transient true try typeof l var volatile voidl while with
-
8/17/2019 Javascript HTML5 CSS3
16/57
1.!avascript5 Sentencias de Control
1. (f *.S7itc,-.),ile
.$o),ile
. or
. or in2.Try Catc,
-
8/17/2019 Javascript HTML5 CSS3
17/57
1.!avascript5 Operadores
1. @signaci n*[email protected] n
.=elacionales
.@ritm>ticos
.+ gicos
-
8/17/2019 Javascript HTML5 CSS3
18/57
1.!avascript5 Objetos principales
1. document*. 7indo7-. forms
-
8/17/2019 Javascript HTML5 CSS3
19/57
1.!avascript5 3ventos
1. Carga*. Clic-. =at n
. ormulario
. Campos de ormulario
. Teclado
-
8/17/2019 Javascript HTML5 CSS3
20/57
1.!avascript5 %odificaci n del $O%
1. ?et3lment9y($*. (njertos-. %odificaci n depropiedades. %odificaci n de Contenido. Consulta de @tributos CSS
-
8/17/2019 Javascript HTML5 CSS3
21/57
1.!avascript5 9uenas pr#cticas
1. Comentar el c digo*. (ndentar el c digo-.
-
8/17/2019 Javascript HTML5 CSS3
22/57
HT%+
-
8/17/2019 Javascript HTML5 CSS3
23/57
1.HT%+ 5 (ntroducci n
1. 3structura inicial*. 3tiquetas sem#nticas-. ;uevos campos de formulario
. @udio y 0ideo. Canvas
.$rag and $rop
2.@lmacenamiento local
-
8/17/2019 Javascript HTML5 CSS3
24/57
1.HT%+ 5 3tiquetas sem#nticas
1. ,eader *. footer -. section
. article. nav
. aside
2. ,group4. figure
-
8/17/2019 Javascript HTML5 CSS3
25/57
1.HT%+ 5 nuevos tipos de campos de formulario
1. Color *. ec,as y ,oras-. %eses y semanas
. 3mail6 n&meros6 url y tlf . 9&squedas
. =angos2. $atalist4. ic,eros m<iples
-
8/17/2019 Javascript HTML5 CSS3
26/57
1.HT%+ 5 nuevos atributos de campos deformulario
1. =equired*. PlaceHolder -. @utofocus
. =eadonly. $isabled
. Pattern2. @utocomplete4. %in maD step8. Option label
-
8/17/2019 Javascript HTML5 CSS3
27/57
1.HT%+ 5 Canvas
1. 3ntornos *d y -d*. =ect#ngulos-. +Ineas
. TeDtos. ?radientes lineares
. ?radientes radiales2. (m#genes
-
8/17/2019 Javascript HTML5 CSS3
28/57
1.HT%+ 5 0ideo y @udio
1. 3tiquetas 0ideo y @udio*. 3tiqueta source-. controls
. loop. volume
. %uted2.CurrentTime4.PlayAB y pauseAB
-
8/17/2019 Javascript HTML5 CSS3
29/57
1.HT%+ 5 3tiqueta 0ideo
-
8/17/2019 Javascript HTML5 CSS3
30/57
1.HT%+ 5 Codec H*
-
8/17/2019 Javascript HTML5 CSS3
31/57
1.HT%+ 5 Codec 0p4
-
8/17/2019 Javascript HTML5 CSS3
32/57
1.HT%+ 5 Codec O?? T,eora
-
8/17/2019 Javascript HTML5 CSS3
33/57
1.HT%+ 5 @udio 3lement
-
8/17/2019 Javascript HTML5 CSS3
34/57
1.HT%+ 5 @udio Codecs
-
8/17/2019 Javascript HTML5 CSS3
35/57
1.HT%+ 5 Offline )eb @pps
1. ic,ero de %anifiesto*. ic,eros a cac,e-. =utas no cac,eadas
. allbac @lternativas. .,taccess @ddtype
-
8/17/2019 Javascript HTML5 CSS3
36/57
-
8/17/2019 Javascript HTML5 CSS3
37/57
1.HT%+ 5 +ocal y Session Storage
1.+ocal tiene persistencia entresesiones
*.Session s lo tiene persistencia
mientas que la pestaKa est# abierta-.set(temALclaveM6MvalorMB. get(temALclaveMB
-
8/17/2019 Javascript HTML5 CSS3
38/57
1.HT%+ 5 (ndeDed$9
1.openALdatabaseM6 versionB*.3ventos5 onsuccess6onerroronupgradeneeded
-.createObjectStoreALnombreM6N eypat,5 id 6auto(ncrement5true B.objectStoreALnombreMB.Store.putAobjetoB.3ventos5 onerror6 onsuccess
2.Store.deleteAidB
-
8/17/2019 Javascript HTML5 CSS3
39/57
1.HT%+ 5 (ndeDed$9 consulta
1.openALdatabaseM6 versionB*.objectStoreALnombreMB-.OpenCursorAB
.3ventos5 onsuccess6 onerror .ifAcursorB
. Cursor. ey cursor.value.nombre2.Cursor.continueAB4.0uelve al onsuccess
-
8/17/2019 Javascript HTML5 CSS3
40/57
1.HT%+ 5 $rag @nd $rop 3ventos
1. $ragstart5 origen*. $ragenter5 destino-. $ragleave5 destino
. $ragover5 origen. $rop5 destino
. $ragend5 origen3jemplo5 ,ttp5//,tml demos.com/drag@tributo5 draggableFMtrueM
http://html5demos.com/draghttp://html5demos.com/drag
-
8/17/2019 Javascript HTML5 CSS3
41/57
1.HT%+ 5 $rag @nd $rop5 $ata transfer
1. Set$ataAB*. ?et$ataAB-. 3ffect@llo7ed
. $rop3ffect. set$rag(mage
-
8/17/2019 Javascript HTML5 CSS3
42/57
CSS -
-
8/17/2019 Javascript HTML5 CSS3
43/57
1.CSS -5 Objetivos
1. Conocer las nuevas propiedadesCSS*. Saber c mo poner en marc,a los
usos sobre botones y teDtos-. Saber importar tipos de letra. =eali"ar degradados sobreelementos. @plicar distintos estilosdependiendo de la resoluci n
-
8/17/2019 Javascript HTML5 CSS3
44/57
1.CSS -5 (ntroducci n
1. ;uevas propiedades*. ;uevos Selectores-.9otones redondeados
. 0arios ondos de (magen. Colores con transparencia
. Sombras2. $egradados4. %edia Jueries8. uentes
-
8/17/2019 Javascript HTML5 CSS3
45/57
1.CSS -5 ;uevas propiedades
1. 9ordes*. ondos-. Colores
. TeDto. (nterface
. Selectores2. ormatos =eferencia5,ttp5//777.7-sc,ools.com/css/css-Qintro.asp
-
8/17/2019 Javascript HTML5 CSS3
46/57
1.CSS -5 ;uevas selectores A(B
1. eleRattr FMvalorM el atributoempie"a por ese valor *. eleRattrUFMvalorM el atributo
terminado por ese valor -. eleRattrEFMvalorM el atributocontiene ese valor . 3le1 V ele* busca el ,ermanoconsecutivo ele* al elemento ele1. 3le1 W ele* busca todos los,ermanos de ele1 y que son ele*
-
8/17/2019 Javascript HTML5 CSS3
47/57
1.CSS -5 ;uevas selectores A((B
1. 55firstXline*. 55firstXletter -. 55before
. 55after . 55selection
. 5firstXc,ild2. 5lastXc,ild4. 5ntnXc,ildAnB8. 5empty1:.5notAselectorB
-
8/17/2019 Javascript HTML5 CSS3
48/57
1.CSS -5 9ordes =edondeados
1. 9order5 pD style color *. 9orderXradius5 radio-. 9order radius5 radio1 radio*
. TopXleft6 topXrig,t6bottomXleft6bottomXrig,t
1 CSS 5 0arias im#genes de ondo en n
-
8/17/2019 Javascript HTML5 CSS3
49/57
1.CSS -5 0arias im#genes de ondo en unelemento
1.9ac ground*.urlArutaimagenB propiedades-.
-
8/17/2019 Javascript HTML5 CSS3
50/57
1.CSS -5 Colores con transparencia
1. Cualquier atributo de color *. rgbAr6g6bB-. rgbaAr6g6b6aB
. ,slA,6s6lB. ,slaA,6s6l6aB
-
8/17/2019 Javascript HTML5 CSS3
51/57
1.CSS -5 Sombras
1. 9oDXs,ado75 longitudes color *. TeDtXs,ado75 longitudes color -. Par#metro5 inset
. 9lur6 spread
-
8/17/2019 Javascript HTML5 CSS3
52/57
1.CSS -5 Transformaciones
1. =otacion*. Traslaci n-. 3scalado
. ?irado AScre7B. %atri"
. Perspectiva2. =otado-d4. 3scalado-d8. %atri"-d
-
8/17/2019 Javascript HTML5 CSS3
53/57
1.CSS -5 ?radientes
1. +ineares*. Hori"ontales-. 0erticales
. $iagonales. %ulticolor
. =adiales2. 0arios =adios4. ormas
-
8/17/2019 Javascript HTML5 CSS3
54/57
1.CSS -5 %edia Jueries
1. Ymedia*. Tipo de medio-. %inX7idt,
. %aDX7idt,. Selectores especIficos
. 3jemplo52. Ymedia screen and AmaDX7idt,5-*:pDB
-
8/17/2019 Javascript HTML5 CSS3
55/57
Contacto
Muchas gracias por su atención
NombreSoporte-olc@consultec es
-
8/17/2019 Javascript HTML5 CSS3
56/57
!avascript6 HT%+ y CSS-(nterfaces del lado del Cliente
-
8/17/2019 Javascript HTML5 CSS3
57/57
4. Contacto
José María Escuza, 1-3, Piso 1º48013 - Bilbao.Tfno: 94.423.66.66
a! : 94.424.17.04
Bilbao
Por"al #$ %a&arra, 1, of. 1'4(E#ificio )$ba*01013 - +i"oria-%as"$izTfno: 945.28.70.56
a!:945.12.47.55
Vitoria-Gasteiz
Por"u$"!$, '3 , 4º ) "o. 14'0018 )onos"ia- an $bas"ianTfno: 943.44.61.81
a! : 943.44.54.99
Donostia - San Sebastián
/r$ns$, ' , 1º /f.'80'0 Ma#ri#Tfno : 91.458.34.34
a!: 91.458.34.35
a!ri!
Blas 2abr$ra, ba o3 005 an"an#$rTfno: 942.05.28.46
a!: 942.05.28.46
Santan!er
info6consul"$c.$s
902.23.66.66