Objetivos del curso
1. Objetivos
l
Conocer los fundamentos del protocolo HTTP/S
Conocer los distintos agentes que forman parte del protocolo
HTTP y su funcin
Conocer los fundamentos de Javascript
Saber construir y reutilizar funciones
Conocer los objetos principales de Javascript
Saber utilizar los objetos de JS para funciones definidas en unos
requisitos
Conocer las distintas clases bsicas de JS
Saber modificar el DOM segn unos requisitos propuestos
ndice de contenido
1. Introduccin a la Web
2. La herramienta de Desarrollo
3. Depuracin de cdigo Javascript
4. Introduccin a Javascript
5. Comentarios y Variables
6. Operadores
7. Estructuras de control
8. Objetos bsicos: document, window y forms
9. Clases Bsicas Javascript
[Link] Javascript
[Link] del DOM
[Link] Prcticas
Introduccin a la Web
1. Introduccin a la Web
1. Conceptos bsicos:
HTML
Etiqueta
CSS
Javascript
Pgina Web
Sitio Web
Navegador Web
URL
Mtodo GET o POST
l
1. Introduccin a la Web
1. Introduccin a la Web
Herramientas de Desarrollo
[Link] de desarrollo
[Link]
[Link] Studio
[Link] (debug)
[Link]
[Link]
[Link] para firebug
(debug)
Lenguaje Javascript
[Link] Javascript
[Link] Interpretado
[Link] a objetos
[Link] en el navegador
[Link] a Eventos
[Link] dentro del HTML
[Link] enfocado a
modificar la pgina (DOM)
7.
[Link]: Tipos de Datos
[Link]
[Link] de Caracteres
[Link]
[Link]
[Link]
[Link]
7.
[Link]: Comentarios
1. // comentarios de una linea
2./* comentarios de varias
lineas*/
[Link]: variables
1. Declaracin con var
2. Inicializacin con =
[Link] las sentencias
terminan en ;
[Link] nombres no peuden
empezar con nmeros
[Link] maysculas
[Link]: Palabras reservadas
l
abstract
booleanbreakbyte
casecatchcharclassconstcontinue
debuggerdefaultdeletedodouble
elseenumexportextends
falsefinalfinallyfloatforfunction
goto
ifimplementsimportininstanceofintinterface
long
nativenewnull
packageprivateprotectedpublic
return
shortstaticsuperswitchsynchronized
thisthrowthrowstransienttruetrytypeof
varvolatilevoid
whilewith
[Link]: Sentencias de Control
1. If
[Link]
[Link]
[Link]
[Link]
[Link] in
[Link] Catch
[Link]: Operadores
1. Asignacin
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]: Objetos principales
1. document
2. window
3. forms
[Link]: Eventos
1. Carga
2. Click
3. Ratn
4. Formulario
5. Campos de Formulario
6. Teclado
[Link]: Modificacin del DOM
1. GetElmentByID
2. Injertos
3. Modificacin de
propiedades
4. Modificacin de Contenido
5. Consulta de Atributos CSS
[Link]: Buenas prcticas
1. Comentar el cdigo
2. Indentar el cdigo
3. Usa siempre las llaves
4. Utiliza Json
5. Utiliza el evento onload
6. Haz un uso no intrusivo
7. Disfruta codificando
HTML 5
1.HTML5: Introduccin
1. Estructura inicial
2. Etiquetas semnticas
3. Nuevos campos de formulario
4. Audio y Video
5. Canvas
[Link] and Drop
[Link] local
1.HTML5: Etiquetas semnticas
1. header
2. footer
3. section
4. article
5. nav
6. aside
7. hgroup
8. figure
1.HTML5: nuevos tipos de campos de formulario
1. Color
2. Fechas y horas
3. Meses y semanas
4. Email, nmeros, url y tlf
5. Bsquedas
6. Rangos
7. Datalist
[Link] mltiples
1.HTML5: nuevos atributos de campos de
formulario
1. Required
2. PlaceHolder
3. Autofocus
4. Readonly
5. Disabled
6. Pattern
7. Autocomplete
8. Min max step
9. Option label
1.HTML5: Canvas
1. Entornos 2d y 3d
2. Rectngulos
3. Lneas
4. Textos
5. Gradientes lineares
6. Gradientes radiales
7. Imgenes
1.HTML5: Video y Audio
1. Etiquetas Video y Audio
2. Etiqueta source
3. controls
4. loop
5. volume
6. Muted
[Link]
[Link]() y pause()
1.HTML5: Etiqueta Video
1.HTML5: Codec H264
1.HTML5: Codec Vp8
1.HTML5: Codec OGG Theora
1.HTML5: Audio Element
1.HTML5: Audio Codecs
1.HTML5: Offline Web Apps
[Link] de Manifiesto
[Link] a cache
3. Rutas no cacheadas
4. Fallback Alternativas
5. .htaccess Addtype
1.HTML5: Almacenamiento Local
1. LocalStorage
2. SessionStorage
3. Indexed DB
4. WebSQL
5. Ficheros
1.HTML5: Local y Session Storage
[Link] tiene persistencia entre
sesiones
[Link] slo tiene persistencia
mientas que la pestaa est abierta
[Link](clave,valor)
4. getItem(clave)
1.HTML5: IndexedDB
[Link](database, version)
[Link]: onsuccess,onerror
onupgradeneeded
[Link](nombre,
{keypath:'id',autoIncrement:true})
[Link](nombre)
[Link](objeto)
[Link]: onerror, onsuccess
[Link](id)
1.HTML5: IndexedDB consulta
[Link](database, version)
[Link](nombre)
[Link]()
[Link]: onsuccess, onerror
[Link](cursor)
6. [Link] [Link]
[Link]()
[Link] al onsuccess
1.HTML5: Drag And Drop Eventos
1. Dragstart: origen
2. Dragenter: destino
3. Dragleave: destino
4. Dragover: origen
5. Drop: destino
6. Dragend: origen
Ejemplo: [Link]
Atributo: draggable=true
1.HTML5: Drag And Drop: Data transfer
1. SetData()
2. GetData()
3. EffectAllowed
4. DropEffect
5. setDragImage
CSS 3
[Link] 3: Objetivos
1. Conocer las nuevas propiedades
CSS
2. Saber cmo poner en marcha los
usos sobre botones y textos
3. Saber importar tipos de letra
4. Realizar degradados sobre
elementos
5. Aplicar distintos estilos
dependiendo de la resolucin
[Link] 3: Introduccin
1. Nuevas propiedades
2. Nuevos Selectores
[Link] redondeados
4. Varios Fondos de Imagen
5. Colores con transparencia
6. Sombras
7. Degradados
8. Media Queries
9. Fuentes
[Link] 3: Nuevas propiedades
1. Bordes
2. Fondos
3. Colores
4. Texto
5. Interface
6. Selectores
7. Formatos
Referencia:
[Link]
[Link] 3: Nuevas selectores (I)
1. ele[attr^=valor] el atributo
empieza por ese valor
2. ele[attr$=valor] el atributo
terminado por ese valor
3. ele[attr*=valor] el atributo
contiene ese valor
4. Ele1 + ele2 busca el hermano
consecutivo ele2 al elemento ele1
5. Ele1 ~ ele2 busca todos los
hermanos de ele1 y que son ele2
[Link] 3: Nuevas selectores (II)
1. ::first-line
2. ::first-letter
3. ::before
4. ::after
5. ::selection
6. :first-child
7. :last-child
8. :ntn-child(n)
9. :empty
10.:not(selector)
[Link] 3: Bordes Redondeados
1. Border: px style color
2. Border-radius: radio
3. Border radius: radio1 radio2
4. Top-left, top-right,bottom-left,
bottom-right
[Link] 3: Varias imgenes de Fondo en un
elemento
[Link]
[Link](rutaimagen) propiedades
3.Url1, url2, url3
4. Propiedades: bottom, right,top, left
repeat, no-repeat, center
[Link] 3: Colores con transparencia
1. Cualquier atributo de color
2. rgb(r,g,b)
3. rgba(r,g,b,a)
4. hsl(h,s,l)
5. hsla(h,s,l,a)
[Link] 3: Sombras
1. Box-shadow: longitudes color
2. Text-shadow: longitudes color
3. Parmetro: inset
4. Blur, spread
[Link] 3: Transformaciones
1. Rotacion
2. Traslacin
3. Escalado
4. Girado (Screw)
5. Matriz
6. Perspectiva
7. Rotado3d
8. Escalado3d
9. Matriz3d
[Link] 3: Gradientes
1. Lineares
2. Horizontales
3. Verticales
4. Diagonales
5. Multicolor
6. Radiales
7. Varios Radios
8. Formas
[Link] 3: Media Queries
1. @media
2. Tipo de medio
3. Min-width
4. Max-width
5. Selectores especficos
6. Ejemplo:
7. @media screen and (maxwidth:320px)
Contacto
Muchasgraciasporsuatencin
Nombre
Soporte-olc@[Link]
Javascript, HTML5 y CSS3
Interfaces del lado del Cliente
8. Contacto
Bilbao
Jos Mara Escuza, 1-3, Piso 1
48013 - Bilbao.
Tfno: [Link]
Fax : [Link]
Madrid
Orense, 26, 1 Of.7
28020 Madrid
Tfno: [Link]
Fax: [Link]
Donostia - San Sebastin
Portuetxe, 23A, 4 Dpto. 14
20018 Donostia-San Sebastian
Tfno: [Link]
Fax : [Link]
Santander
Blas Cabrera, 9 bajo
39005 Santander
Tfno: [Link]
Fax: [Link]
Vitoria-Gasteiz
Portal de Gamarra, 1, of. 124
(Edificio Deba)
01013 - Vitoria-Gasteiz
Tfno: [Link]
Fax: [Link]
[Link]
info@[Link]
