Javascript HTML5 CSS3

8/17/2019 Javascript HTML5 CSS3

1/57

Objetivos del curso


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


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


4/57

(ntroducci n a la )eb


5/57


6/57

1. (ntroducci n a la )eb


7/57

1. (ntroducci n a la )eb


8/57

Herramientas de $esarrollo


9/57

1.Herramientas de desarrollo

1.3clipse*.@ptana Studio-.!S$T AdebugB

. irefoD

. irebug

.Crossfire para firebugAdebugB


10/57

+enguaje !avascript


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.


12/57


13/57

1.!avascript5 Comentarios

1. // comentarios de una linea*./E comentarios de variaslineasE/


14/57


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


16/57

1.!avascript5 Sentencias de Control

1. (f *.S7itc,-.),ile

.$o),ile

. or

. or in2.Try Catc,


17/57

1.!avascript5 Operadores

1. @signaci n*[email protected] n

.=elacionales

.@ritm>ticos

.+ gicos


18/57

1.!avascript5 Objetos principales

1. document*. 7indo7-. forms


19/57

1.!avascript5 3ventos

1. Carga*. Clic-. =at n

. ormulario

. Campos de ormulario

. Teclado


20/57

1.!avascript5 %odificaci n del $O%

1. ?et3lment9y($*. (njertos-. %odificaci n depropiedades. %odificaci n de Contenido. Consulta de @tributos CSS


21/57

1.!avascript5 9uenas pr#cticas

1. Comentar el c digo*. (ndentar el c digo-.


22/57

HT%+


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


24/57

1.HT%+ 5 3tiquetas sem#nticas

1. ,eader *. footer -. section

. article. nav

. aside

2. ,group4. figure


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


26/57

1.HT%+ 5 nuevos atributos de campos deformulario

1. =equired*. PlaceHolder -. @utofocus

. =eadonly. $isabled

. Pattern2. @utocomplete4. %in maD step8. Option label


27/57

1.HT%+ 5 Canvas

1. 3ntornos *d y -d*. =ect#ngulos-. +Ineas

. TeDtos. ?radientes lineares

. ?radientes radiales2. (m#genes


28/57

1.HT%+ 5 0ideo y @udio

1. 3tiquetas 0ideo y @udio*. 3tiqueta source-. controls

. loop. volume

. %uted2.CurrentTime4.PlayAB y pauseAB


29/57

1.HT%+ 5 3tiqueta 0ideo


30/57

1.HT%+ 5 Codec H*


31/57

1.HT%+ 5 Codec 0p4


32/57

1.HT%+ 5 Codec O?? T,eora


33/57

1.HT%+ 5 @udio 3lement


34/57

1.HT%+ 5 @udio Codecs


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


36/57


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


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


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


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


41/57

1.HT%+ 5 $rag @nd $rop5 $ata transfer

1. Set$ataAB*. ?et$ataAB-. 3ffect@llo7ed

. $rop3ffect. set$rag(mage


42/57

CSS -


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


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


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


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*


47/57

1.CSS -5 ;uevas selectores A((B

1. 55firstXline*. 55firstXletter -. 55before

. 55after . 55selection

. 5firstXc,ild2. 5lastXc,ild4. 5ntnXc,ildAnB8. 5empty1:.5notAselectorB


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


49/57

1.CSS -5 0arias im#genes de ondo en unelemento

1.9ac ground*.urlArutaimagenB propiedades-.


50/57

1.CSS -5 Colores con transparencia

1. Cualquier atributo de color *. rgbAr6g6bB-. rgbaAr6g6b6aB

. ,slA,6s6lB. ,slaA,6s6l6aB


51/57

1.CSS -5 Sombras

1. 9oDXs,ado75 longitudes color *. TeDtXs,ado75 longitudes color -. Par#metro5 inset

. 9lur6 spread


52/57

1.CSS -5 Transformaciones

1. =otacion*. Traslaci n-. 3scalado

. ?irado AScre7B. %atri"

. Perspectiva2. =otado-d4. 3scalado-d8. %atri"-d


53/57

1.CSS -5 ?radientes

1. +ineares*. Hori"ontales-. 0erticales

. $iagonales. %ulticolor

. =adiales2. 0arios =adios4. ormas


54/57

1.CSS -5 %edia Jueries

1. Ymedia*. Tipo de medio-. %inX7idt,

. %aDX7idt,. Selectores especIficos

. 3jemplo52. Ymedia screen and AmaDX7idt,5-*:pDB


55/57

Contacto

Muchas gracias por su atención

NombreSoporte-olc@consultec es


56/57

!avascript6 HT%+ y CSS-(nterfaces del lado del Cliente


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

Javascript HTML5 CSS3

Documents

Transcript of Javascript HTML5 CSS3