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
10.Eventos Javascript
11.Manipulacin del DOM
12.Buenas 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

1.Herramientas de desarrollo

1.Eclipse
2.Aptana Studio
3.JSDT (debug)
4.Firefox
5.Firebug
6.Crossfire para firebug
(debug)

Lenguaje Javascript

1.Lenguaje Javascript

1.Lenguaje Interpretado
2.Orientado a objetos
3.Ejecutado en el navegador
4.Orientado a Eventos
5.Integrado dentro del HTML
6.Principalmente enfocado a
modificar la pgina (DOM)
7.

1.Javascript: Tipos de Datos

1.Nmeros
2.Cadenas de Caracteres
3.Arrays
4.Booleanos
5.Null
6.Undefined
7.

1.Javascript: Comentarios

1. // comentarios de una linea

2./* comentarios de varias
lineas*/

1.Javascript: variables

1. Declaracin con var

2. Inicializacin con =
3.Todas las sentencias
terminan en ;
4.Los nombres no peuden
empezar con nmeros
5.Distinguen maysculas

1.Javascript: Palabras reservadas

l

abstract
booleanbreakbyte
casecatchcharclassconstcontinue
debuggerdefaultdeletedodouble
elseenumexportextends
falsefinalfinallyfloatforfunction
goto
ifimplementsimportininstanceofintinterface
long
nativenewnull
packageprivateprotectedpublic
return
shortstaticsuperswitchsynchronized
thisthrowthrowstransienttruetrytypeof
varvolatilevoid
whilewith

1.Javascript: Sentencias de Control

1. If
2.Switch
3.While
4.DoWhile
5.For
6.For in
7.Try Catch

1.Javascript: Operadores

1. Asignacin
2.Abreviados
3.Concatenacin
4.Relacionales
5.Aritmticos
6.Lgicos

1.Javascript: Objetos principales

1. document
2. window
3. forms

1.Javascript: Eventos

1. Carga
2. Click
3. Ratn
4. Formulario
5. Campos de Formulario
6. Teclado

1.Javascript: Modificacin del DOM

1. GetElmentByID
2. Injertos
3. Modificacin de
propiedades
4. Modificacin de Contenido
5. Consulta de Atributos CSS

1.Javascript: 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
6.Drag and Drop
7.Almacenamiento 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
8.Ficheros 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
7.CurrentTime
8.Play() 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

1.Fichero de Manifiesto
2.Ficheros 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

1.Local tiene persistencia entre

sesiones
2.Session slo tiene persistencia
mientas que la pestaa est abierta
3.setItem(clave,valor)
4. getItem(clave)

1.HTML5: IndexedDB

1.open(database, version)
2.Eventos: onsuccess,onerror
onupgradeneeded
3.createObjectStore(nombre,
{keypath:'id',autoIncrement:true})
4.objectStore(nombre)
5.Store.put(objeto)
6.Eventos: onerror, onsuccess
7.Store.delete(id)

1.HTML5: IndexedDB consulta

1.open(database, version)
2.objectStore(nombre)
3.OpenCursor()
4.Eventos: onsuccess, onerror
5.if(cursor)
6. Cursor.key cursor.value.nombre
7.Cursor.continue()
8.Vuelve 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: http://html5demos.com/drag
Atributo: draggable=true

1.HTML5: Drag And Drop: Data transfer

1. SetData()
2. GetData()
3. EffectAllowed
4. DropEffect
5. setDragImage

CSS 3

1.CSS 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

1.CSS 3: Introduccin

1. Nuevas propiedades
2. Nuevos Selectores
3.Botones redondeados
4. Varios Fondos de Imagen
5. Colores con transparencia
6. Sombras
7. Degradados
8. Media Queries
9. Fuentes

1.CSS 3: Nuevas propiedades

1. Bordes
2. Fondos
3. Colores
4. Texto
5. Interface
6. Selectores
7. Formatos
Referencia:
http://www.w3schools.com/css/css3_intro.asp

1.CSS 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

1.CSS 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)

1.CSS 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

1.CSS 3: Varias imgenes de Fondo en un

elemento

1.Background
2.url(rutaimagen) propiedades
3.Url1, url2, url3
4. Propiedades: bottom, right,top, left
repeat, no-repeat, center

1.CSS 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)

1.CSS 3: Sombras

1. Box-shadow: longitudes color

2. Text-shadow: longitudes color
3. Parmetro: inset
4. Blur, spread

1.CSS 3: Transformaciones

1. Rotacion
2. Traslacin
3. Escalado
4. Girado (Screw)
5. Matriz
6. Perspectiva
7. Rotado3d
8. Escalado3d
9. Matriz3d

1.CSS 3: Gradientes

1. Lineares
2. Horizontales
3. Verticales
4. Diagonales
5. Multicolor
6. Radiales
7. Varios Radios
8. Formas

1.CSS 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@consultec.es

Javascript, HTML5 y CSS3

Interfaces del lado del Cliente

8. Contacto

Bilbao
Jos Mara Escuza, 1-3, Piso 1
48013 - Bilbao.
Tfno: 94.423.66.66
Fax : 94.424.17.04

Madrid
Orense, 26, 1 Of.7
28020 Madrid
Tfno: 91.458.34.34
Fax: 91.458.34.35

Donostia - San Sebastin

Portuetxe, 23A, 4 Dpto. 14
20018 Donostia-San Sebastian
Tfno: 943.44.61.81
Fax : 943.44.54.99

Santander
Blas Cabrera, 9 bajo
39005 Santander
Tfno: 942.05.28.46
Fax: 942.05.28.46

Vitoria-Gasteiz
Portal de Gamarra, 1, of. 124
(Edificio Deba)
01013 - Vitoria-Gasteiz
Tfno: 945.28.70.56
Fax: 945.12.47.55

902.23.66.66
info@consultec.es