You are on page 1of 12

Video 1 Presentacin

24 de enero de 2014
Comenzamos un nuevo curso de HTML5. En este vdeo de presentacin
vemos los contenidos que se impartirn durante el curso.
Temario
Que es HTML5
- HTML5 como estndar que une varias tecnologas
Componentes bsicos de documentos HTML5
Estructura de documento HTML
- Etiquetas bsicas de estructura
- Estructura de cabecera
- Estructura del cuerpo
Dentro del cuerpo
Nuevos y viejos elementos
CSS y HTML
- Tipos de estilo y estructura
Componentes principales de CSS
Tipos de selectores
- Aplicar CSS a documento HTML
- CSS3
Las nuevas reglas
Transformaciones
Transiciones
JavaScript y HTML
- Que es JavaScript y su importancia en la web
- Sintaxis
- Selectores
- Eventos
- APIs
- Libreras externas
Audio y video
- Video en HTML5
Programacin de reproductor
Formatos
Atributos
- Audio en HTML5
Programando reproductor
Atributos
Formularios y su API
- Formularios web
Elementos
Tipos de datos
Atributos
Nuevos elementos de formulario
Api Canvas
- El lienzo
Dibujos bsicos
Imgenes en el lienzo
Animaciones en el lienzo
Video en el lienzo
API Drag and Drop (Arrastrar y soltar)
- Eventos nuevos
- Mtodos
- Propiedades
Geolocalizacin
- Mtodos para detectar localizacin de visitantes
- Trabajo con google maps
- Mtodos y objetos
Almacenamiento web (Web Storage)
- Crear, leer y eliminar datos
- Tipos de almacenamientos
- Mtodos
- Propiedades
API Bases de datos(IndexedDB)
- BBDD, ndices y transacciones
- Abrir BBDD, agregar y eliminar objetos
- Bsquedas de datos
API manejo de archivos (API File)
- Sistemas de archivos
- Propiedades de archivos
- El disco duro
Creacin de archivos
Eliminacin de archivos
Copiar, cortar y pegar
API Comunicacin (API Comunication)
- Ajax
- Cross document
- Web sockets
API Web Worker
- Los trabajadores web
- Deteccin de errores
API History (Historial)
- Nuevos mtodos de navegacin en la web
- Urls errneas o falsas
API Offline
- Trabajo con cache
- Manifiesto
- Categoras
- Comentarios

Video 2 Conceptos bsicos


25 de enero de 2014
Comenzamos a ver algunos de los conceptos bsicos de HTML 5. En qu
consiste exactamente esta tecnologa o estndar. Creamos ya nuestra primera
pgina web en HTML 5.
1. HTML5 es un estndar que une a 3 tecnologas, por un lado, el lenguaje
de programacin html que normalmente no se llama LP sino lenguaje de
etiquetas porque no llega a reunir las caractersticas que tienen hoy en
dia los LP moderno. Otra tecnologa es CSS que no se considera LP, y
tambin JavaScript el cual si es un LP. Esas 3 tecnologas forman lo
que es el estndar HTML
2. HTML da la estructura de las pginas web
3. CSS da la apariencia de las pginas web
4. JavaScript da la interactivas y animacin que pueden tener las pginas
web
5. Trabajar con el bloc de notas
6. Una etiqueta es un codigo que est dentro del smbolo <> un ejemplo
<html>
7. La mayora de las etiquetas en html suelen ir por pares <html> sera la
de apertura </html> sera la de cierre
8. Estas etiquetas van en estructura de rbol lo que quiere decir que hay
etiquetas anidadas es decir etiquetas dentro de otras
9. El codigo html comenzara siempre por la etiqueta <html> de apertura y
</html> de cierre todo el codigo de la pgina web ira dentro de esas 2
etiquetas
10. Antes de la etiqueta html cuando se sigue el estndar HTML5 hay que
especificar en qu versin de html se va a programar para eso se inserta
una etiqueta doctype asi:
- Smbolo menor que <, exclamacin!, palabra DOCTYPE que se
coloca en mayuscula y a continuacin html en minuscula smbolo
de mayor que > esta nomenclatura es nueva para html5 y es la
manera de especificar que la pgina web va a ser programada
siguiendo el estndar html5.
11. Las etiquetas html pueden ir en maysculas o minsculas, pero es ms
correcto para html5 utilizarlas en minsculas
12. Dentro de la etiqueta<html> ira etiqueta <head> que lleva su
correspondiente etiqueta de cierre </head>
13. La informacin que va dentro de head normalmente no se ve en la
pgina web(la mayora de las cosas). Este sirve para incluir informacin
importante de diverso tipo como por ejemplo hojas de estilo, archivos
JavaScript externos e internos, iconos que aparecen en el ttulo, el ttulo
de la pgina web (Este si se ve).
14. Otra cosa que va dentro del head son las etiquetas meta que an son
fundamentales pero cada vez menos para que el buscador categorice la
pgina y la pueda posicionar adecuadamente en los resultados de las
bsquedas.
15. Algunas de las etiquetas meta que van dentro del head
- <meta charset=iso-8559-1/> la cual especifica cmo ser
presentado el texto de la pgina web en pantalla, lo que hace es
determinar si la pgina tiene caracteres Unicode, rabes chinos o
cual tipo de caracteres tiene. Esta como se puede ver no tiene su
correspondiente par de cierre. Para estas etiquetas lo que se hace es
incluir la barra de cierre o barra invertida en una nica etiqueta al
final.
- <meta name=description content= pgina de enseanza
html5/> Esta etiqueta se puede dar una descripcion acerca de la
temtica de la pgina web fundamental para los buscadores ya que
utilizan esa etiqueta para categorizar pgina web y asi saber en qu
categora va
- <meta name=keywords content= html5, css3, javascript,
diseo web/> Esta tiene que ver con palabras claves, antes era
muy importante para los buscadores
16. Html es un lenguaje muy flexible lo que quiere decir que si se olvida
alguna etiqueta de cierre se puede dar el caso segn el navegador de
que la pgina web se presente o no bien por eso es recomendado seguir
reglas de sintaxis
17. Con respecto a etiquetas meta antes mencionadas name y content es lo
que se denomina atributos. Etiquetas como html y head no llevan ningn
atributo obligatorio y hay algunas que llevan atributos, pero son
opcionales como es el caso de html con el atributo lang=es que se
incluye en la etiqueta de apertura.
18. Dentro de la etiqueta head pueden ir adems de las etiquetas meta
muchsimas ms.
19. Despus que se cierra la etiqueta </head> va la etiqueta <body> con su
correspondiente etiqueta de cierre </body> corresponde a la informacin
visible dentro de la pgina web
20. Hasta este momento se completan las etiquetas principales
21. Para guardar si se est utilizando bloc de notas nombre archivo.html

Video 3 Nuevos elementos de estructura en HTML5


27 de enero de 2014
Vemos en este vdeo el uso de la etiqueta title, la estructura de la etiqueta link y
comenzamos a ver las nuevas estructuras de etiqueta de HTML5, como por
ejemplo la etiqueta header y la etiqueta nav.
1. La etiqueta <title></title> va dentro de head puede ir despus de la
head de apertura o despus de las etiquetas meta
2. Tiene su etiqueta de cierre
3. Tiene varios propsitos
- Cambiar el texto que aparece en la pestaa del navegador que se va
a utilizar
- La informacin que se ingresa dentro de las etiquetas title los
buscadores la van a tomar como frase o palabras para que la pgina
se categorice adecuadamente, ya que los buscadores le dan ms
importancia a la informacin dentro de estas etiquetas que a la que
est dentro de las etiquetas meta.
4. La etiqueta link tambin va dentro del head, puede ir al inicio o despus
de la etiqueta title(es lo ms habitual) su estructura es
<link rel = Stylesheet href=nombreHojaEstilo.css/>
5. No tiene etiqueta de cierre aparte. Sirve para enlazar o incluir
documentos adicionales a la pgina web como hojas de estilos,
documentos javaScript
6. rel quiere decir relativo o relacionado es un atributo de la etiqueta link el
cual informa de que tipo de archivo se trata el que se est adicionando
de forma adicional a la pgina web
7. href hace referencia a la ruta donde se encuentra el archivo que se va a
incluir

8. antes de html5 se organizaba el body o contenido de la pgina web con


<table></table> organizar el contenido en una tabla en cada celda
colocar el contenido correspondiente
9. Despus se comienza a utilizar la etiqueta <div></div> construye lo que
se denomina un modelo de caja contenedor esto queda obsoleto con la
aparicin de los nuevos dispositivos por los diferentes tamaos de
pantalla, por eso html5 incluye etiquetas que organizan el sitio de otra
forma.
10. Las pginas suelen tener una cabecera <header></header> donde se
incluye el logotipo de la empresa, direccin. No confundir con el head ya
que este tiene informacin no visible
11. Tienen una barra de navegacin <nav></nav> donde aparecen los
diferentes mens desplegables, pestaas
12. Tienen una parte donde est el contenido principal <section></section>
donde est la informacin ms relevante
13. Tienen una barra lateral <aside></aside> donde aparecen los enlaces
para ir navegando por el sitio web.
14. Tienen una zona inferior <footer></footer> donde aparece informacin
institucional, copyright
15. Otra etiqueta es <h1></h1> se utiliza para ttulos se podra ubicar dentro
del header, El 1 es una especie de atributo la etiqueta en si es la h ya
que esta etiqueta puede ir desde h1 hasta h6, todas sirven para destacar
texto lo nico que cambia es el tamao del texto h1 el tamao ms
grande y h6 el ms pequeo, pero en cualquiera de los casos siempre lo
pondr en negrita. Adems tambin muestran jerarqua de importancia
de los textos, por ejemplo le dan menos importancia a h2 que h1
16. Las etiquetas h los buscadores las miran bastante, el texto que se
incluya dentro de estas etiquetas se considera importante, conteniendo
informacin relevante para la pgina web los buscadores con esta
informacin tambin posicionan la pgina en los resultados de
bsqueda.
17. No utilizar header da lo mismo cuando se utiliza un navegador de pc,
adquiere importancia si el navegador es de un dispositivo con resolucin
diferente
18. Etiqueta que se puede usar dentro del nav son <ul> </ul> estas se
utilizan para crear listas desordenadas, es decir que para numerar los
elementos en vez de nmeros o letras se sustituye por puntos. Dentro
de estas irn las etiquetas <li></li> las cuales se repiten tantas veces
como elementos tenga la barra de navegacin. Si se sustituye ul por
<ol></ol> esta es una lista ordenada.
19. Para el nav es lo mismo si no se coloca, el resultado visual en un
navegador de pc es el mismo, pero cambiara si es otro dispositivo que
maneja diferente resolucin.

Video 4 Estructura del cuerpo y nuevos elementos organizativos


29 de enero de 2014
1. Continuando con la estructura de la pgina web se tiene la etiqueta
<blockquote></blockquote> utilizada para citas, se puede utilizar
dentro de la etiqueta aside
2. El contenido principal se construye con la etiquetaa section. Dentro de
esta se puede aadir un prrafo <p></p> etiquetas h
3. La otra parte es el footer donde se coloca informacin adicional
4. Dentro de section se suele utilizar <article></article> para agrupar
contenidos similares no tiene que ser un articulo
5. Las etiquetas header y footer son flexibles es decir no sirven nicamente
para construir cabecera y pie de documento principal, sino que tambin
se utilizan en html para definir cabecera y pie de otras partes de la
pgina web como un bloque como article(despus de apertura de esta).
Puede ir algo dentro de un header un encabezado para el articulo o
contenido y antes del cierre de </aticle> informacin representada como
pie de ese artculo o informacin
6. Cuando se tienen varias h indicando nivel de jerarqua de diferentes
textos valido nicamente por ejemplo para ttulos y subttulos que tengan
que ir juntos lo que se hace es agruparlas con <hgroup></hgroup> si
solo hay una etiqueta h no es necesario agrupar asi el navegador puede
saber que ttulos y subttulos van juntos

Video 5 figure figcaption y nuevos elementos


31 de enero de 2014
1. La etiqueta <figure></figure> se utiliza para insertar elementos que
tienen algo que ver con el contenido, pero a la vez son elementos
independientes, las imgenes cumplen esa condicion, elementos de
video, de flash tambin pueden ir dentro de esta etiqueta
2. Para insertar imgenes se utiliza la etiqueta <img/> y el atributo
src=rutaImagen, esta es una de las pocas etiquetas que no lleva llave
de cierre
3. La ruta de la imagen puede ser absoluta o relativa, es relativa si la
carpeta de la imagen se encuentra en el mismo sitio que la pgina web
consiste solo colocar la carpeta y el nombre de la imagen, la absoluta es
la ruta completa
4. Los formatos de imgenes admitidos por los navegadores web son
.jpg(no admite transparencia), .gif(pesa muy poco, solo admite 256
colores diferentes por lo que es apto para representar botones e
imgenes pequeas y bsicas, admite transparencia), .png(hay de 8 bits
y de 16 bits se refiere a la cantidad de color, admite transparencia
permitiendo ver lo que hay detrs de la imagen), que son los ms
recomendados y utilizados son formatos de imagen comprimidos, lo que
acelera la descarga
5. Para colocar un pie de imagen se hace con la etiqueta
<figcaption></figcaption> , la cual debe estar dentro de figure
6. Etiqueta <mark></mark> se utiliza para marcar texto sin importancia ni
nfasis (de acuerdo a las circunstancias del momento) tpico efecto de
resaltador. por ejemplo, resaltar un texto por la accion que realizo un
usuario como una bsqueda
7. Etiqueta <em></em> el sentido semntico que se le da en html5 es para
indicar nfasis en algn termino. Sustituye a la etiqueta <i></i> que lo
que haca era colocar el texto en cursiva.
8. La etiqueta <strong></strong> sirve para marcar texto importante, el
mismo uso lo tena la etiqueta <b></b> que en este momento est en
desuso paulatinamente, el texto dentro de strong los navegadores lo
consideran importantes para posicionar la pgina en una bsqueda
9. La etiqueta <small></small> es una antigua etiqueta que an se utiliza
para presentar textos legales, su sentido semntico ha cambiado era
utilizado si se quera colocar un texto en letra mas pequea, ahora
mismo es solo para presentar textos legales como copyright, todos los
derechos reservados
10. La etiqueta <cite></cite> nueva en html5 sirve para resaltar ttulos de
pelculas, libros, canciones, trabajos propios
11. La etiqueta <address></address> tambin es antigua se utiliza para
informacin de contacto como direccin, telfono, correo electrnico y
debe ir dentro del <footer> es una etiqueta blocklevel por lo que se
inserta automticamente un salto de linea
12. La etiqueta <time></time> nueva en html5 representa fechas y horas
puede llevar atributos como datetime hace referencia a la fecha o a la
hora y segn estndar debe ser yyyy-mm-dd y pubdate informa de que
el atributo datetime pertenece a una fecha o a una hora

Video 6 CSS 1
4 de febrero de 2014
Evolucin
HTML con atributos etiqueta
Separacin estructura y apariencia
Estructura = HTML Apariencia = CSS
Estructura = HTML Apariencia = css3
Donde colocar el codigo css
En archivo independiente
Con extensin .CSS Modificacin de forma fcil y rpida de
todas las pginas web con las que se est trabajando y que
formen parte del sitio.
En cabecera de documento HTML
Dentro de la etiqueta head Modificar apariencia de toda la
pgina web
Dentro de etiqueta
Estilo inline. Casos muy concretos en los que se modifica una
etiqueta muy concreta para diferenciarlas de todas las dems
Modelo caja contenedor
Dos tipos de etiquetas HTML
- Etiquetas block: Generan un salto de linea por arriba y por abajo de
la etiqueta, ocupan el 100% del ancho del documento
- Etiquetas inline: No general salto de linea
La mayora de etiquetas de estructura son etiquetas block, eso indica
que cada vez que se crea aunque no se ve se est creando una caja
que ocupa el 100% del ancho de la pantalla y que tiene un ancho de
linea, tambin ocasiona que todas las etiquetas se coloquen una debajo
de la otra
Selector id #nombreSelector Se utiliza cuando se quiere aplicar
apariencia a un nico elemento dentro de la pagina web

Video 7 CSS Modelo caja- contenedor Float Margin y Padding


5 de febrero de 2014
1. Con la propiedad display y el valor inline utilizados en la lista esta se
muestra cada elemento uno a continuacin del otro
2. La etiqueta aside es block, para convertirla en una barra lateral se hace
con la propiedad float, si se desea por ejemplo que aparezca a la
izquierda del documento seria propiedad float y el valor left.
3. La propiedad float lo que hace es romper el flujo de cmo se colocan por
defecto los elementos de una pgina web, ya no se ocupara el 100% del
ancho de la pantalla, sino que solo ocupara el ancho del elemento y los
elementos que estn por debajo se sitan rodeando al elemento al que
se le coloca esta propiedad.
4. Las cajas tienen una propiedad que es margin que hace referencia al
espacio en blanco o separacin que existe desde el borde de la caja o
contenedor hacia lo que puede haber alrededor en cualquiera de los 4
lados
5. El padding es la separacin desde el contenido de la caja hasta el borde
del contenedor

Video 8 CSS3 I Nuevas reglas


7 de febrero de 2014
- Selectores de etiqueta p{}
- Selectores de id #nombreIdentificativo{} Para aplicar a un nico
elemento de la pagina web
- Selectores de clase .nombreIdentificador{---} Se puede aplicar a
todos los elementos que se desee
1. Estilos css se aplican en la misma etiqueta, cabecera del documento,
hoja de estilo externo y enlazarla al html
2. Entre los nuevos selectores cuando existe la posibilidad de identificar
uno o varios elementos html de la pagina web con el atributo name=
nombre para una etiqueta en concreto quedara
p[name^=nombreIdentificativo]{propiedad:valor;}
p[name$=nombreIdentificativo]{propiedad:valor;}
p[name*=nombreIdentificativo]{propiedad:valor;}
Tiene 3 smbolos
^ permite aplicar el estilo a lo que tenga atributo name que empiece por
lo indicado entre las comillas
$ aplica el estilo a lo que tenga atributo name que termine por lo
indicado entre comillas
* aplica el estilo a lo que tenga atributo name donde se encuentre lo
indicado entre comillas en cualquier parte de la palabra
Pseudoclases
- Yo quiero aplicar un estilo al 4to elemento p queda asi
P:nth-child(4){}
- En vez de un numero la palabra odd que aplica estilo para el caso
a todos los p impares o even a todos los p pares
p:nth-child(odd){}
p:nth-child(even){}
- Otra forma
P_first-child{} para el primer hijo de
P_last-child{} para el ultimo hijo de
P_only-child{} para aquellas etiquetas que sean hijas nicas

3. Etiqueta <span></span> no aade ningn tipo de formato al texto


dentro de ella
4. Nueva regla css border-radius para darle esquinas redendeadas
5. Con la propiedad box-shadow se establece un sombreado y se puede
dar aspecto de relieve a la caja
6. Tambin existe propiedad text-shadow

Video 9 CSS3 II Degradados y transiciones


11 de febrero de 2014
Vemos en este vdeo como aplicar degradados y efectos de transicin con las nuevas reglas
CSS3.

1. Otra regla es lo referente a la fuente para que todo el mundo vea la


pagina web con el mismo tipo de letra
2. Subir fuente al servidor
3. Propiedad font-face { font-family: nombreIdentificativoLetra;
src:url(nombreFuenteComoEstaCarpOServidor);}
4. Para que funcione adecuadamente la fuente debe estar en la raiz
5. Otra nueva regla es dar degradado a una caja
6. Toca especificar en cual navegador se va a ver ese degradado quedara
asi para el caso de mozila, webkit para el caso de Chrome, ms para el
caso de internet explorer, o para opera luego el tipo de degradado que
tiene una serie de parmetros el cual el primero seria la direccin del
degradado(top, buttom, left, right) luego el 1er color del degradado, 2do
color del degradado);
Background: -moz-linear-gradient(direccionDegradado, color1, color2)
7. Degradado con puntos de terminacion (un color ocupe mas espacio que
el otro) agregando al lado de cada el color el % que ocuparia
Background: -webkit-linear-gradient(direccionDegradado, color1 %,
color2 %)
8. Para degradado circular cambiar de lineal-gradient a radial.gradient con
paremetros diferentes (center para especificar que se empieza desde el
centro, luego se le dice si el degradado va en circulu(circle) o elipse y
por ultimo los dos colores que tambin admiten %
9. Control de la transparencia del texto con el valor rgba de la propiedad
color que tiene 4 parmetros los 3 primeros nmeros entre o y 255 que
hacen referencia a la cantidad de color rojo, verde y azul y el ultimo
parametro hace referencia a la transparencia el cual es un valor decimal
que esta entre 0 y 1
10. Un contenedor agregarle borde exterior con la propiedad outline que
tiene el color 1er valor el grosor en px del borde, tipo de borde y el color
para el borde
11. Distanciar el borde con la propiedad outline-offset especificando como
valor tamao en px
12. Tambin se puede escalar el elemento lo primero especificar el
navegador luego la propiedad transform y el valor scale(tamao sin
medida donde 1 es el tamao original como si no se hiciese nada)
-webkittransform: scale(0.5) si se agrega un 2do atributo despus del
0.5 el -1 se le da a vuelta al elemento
13. Para rotar un elemento la mismo propiedad anterior de scale pero como
valor rotate con el atributo en numero que hace referencia a los grados
adicionando el deg
14. Cambiar perpectiva la misma propiedad transform pero con el valor skew
cuyo parametro tambin es en grados
15. Propiedad transition

Video 10 Ejercicio 1 guiado


14 de febrero de 2014
Realizamos un ejercicio guiado con gran parte de lo aprendido hasta ahora.
Utilizamos algunas de las nuevas etiquetas de la especificacin HTML5 y
algunas de las nuevas reglas CCS3.
1. Utilizar etiqueta header para la cabecera que tiene etiqueta h1 y h2
2. Como tiene etiquetas h1 y h2 utilizar etiqueta hgroup
3. Utilizar etiqueta section para el contenido principal
4. Utilizar etiqueta figure para cada figura con su respectivo pie de pagina
el cual ira dentro de etiqueta figcaption
5. El pie de pagina entre etiquetas footer
6. Crear hoja de estilo externa y resetear las etiquetas
7. Selector de etiqueta body establecer tamao de texto
8. Selector de etiqueta h1 tendra las propiedades font. Background, width,
border-radius, margin, text-align, padding, color, box-shadow y text-
shadow

Video 11 Ejercicio 2 guiado


14 de febrero de 2014
Finalizamos en este vdeo el ejercicio guiado. Recuerdo que en la descripcin
del vdeo anterior tenis el link para descargar los archivos del vdeo.
1. Selector de etiqueta h2 con propiedad font, margin, paddin y color
2. Ahora el contenido principal que esta dentro de section crear selector de
etiqueta para section witdth y border-top
Minuto 5:46

Video 12 JavaScript introduccin


19 de febrero de 2014
En este vdeo nos introducimos en JavaScript. Vemos dnde puede ir situado el
cdigo JavaScript dentro de un documento HTML y cmo crear un documento
JavaScript externo.

Video 13 JavaScript identificacin de elementos


19 de febrero de 2014
Vemos en este vdeo como identificar elementos de HTML desde cdigo JavaScript.
Vemos el uso del nuevo mtodo del objeto document, getElementsByClassName.

Video 14 JavaScript identificacin de elementos 2


20 de febrero de 2014
En este vdeo vemos los nuevos mtodos querySelector y querySelectoorAll
que nos permiten identificar elementos HTML desde JavaScript utilizado
selectores CSS y CSS3.

Video 15 Eventos en HTML con JavaScript 1


25 de febrero de 2014
En este vdeo vemos el nuevo mtodo addEventListener de la especificacin HTML5 para crear
manejadores de eventos. Comparamos este nuevo mtodo respecto a tcnicas anteriores y
casi obsoletas a la hora de construir manejadores de eventos.

Video 16 Eventos en HTML con JavaScript 2


26 de febrero de 2014
Vemos en este vdeo algunos ejemplos ms (sencillos) del uso y sintaxis del mtodo
addEventListener.

You might also like