HTML5 & CSS3 

Presentado Por:Fernando Ayala

Pontificia Universidad Javeriana Desarrollo y Servicios Web

Agosto de 2014

Objetivos

Conocer y saber para que sirve HTML5.

Conocer y saber para que sirve CSS3.

Trabajar un ejemplo de HTML5 y CSS3.

HTML5 y CSS3

Que es HTML5

HTML5 significa HyperText Markup Language v5.

Extensiones: HTML: .html, .htm.

El propósito es ser un lenguaje y estándar para hacer paginas web.

Es un estándar bajo supervisión de la W3C.

Soporta diferentes navegadores en distintos dispositivos móviles.

Datos de HTML5

Nació de la alianza entre la WHATWG y W3C.

Reemplaza a HTML4 y XHTML.

Diseñada para mostrar mas contenido multimedia si la necesidad de usar ‘plug-ins’ en el navegador.

Diseño multiplataforma.

Ultimo estándar oficial para HTML.

Como es HTML5

HTML5 se escribe en forma de “etiquetas” bordeadas por ‘<‘ y ’>’.

Tomado de :http://www.w3schools.com/html/html5_intro.asp

Nuevo en HTML5

Nuevas etiquetas y atributos.

Manejo de gráficos en 2D y 3D.

WebGL extiende JavaScript que permite el acceso al hardware de gráficos 3D

Manipulación de manera local de base de datos SQL.

Las etiquetas multimedia para audio y video

Nuevo en HTML5

El elemento <canvas> es usado para dibujar gráficas (Hizo a un lado a Flash).

El <section> define las secciones de un documento, como capítulos, encabezados, etc.

El elemento <menu> se puede utilizar para el menú principal.

El elemento <audio> la reproducción de formatos de audio.

El elemento <video> la reproducción de formatos de video.

Nuevo en HTML5

El elemento <embed> define un contenedor para una aplicación externa o contenido interactivo (un plug-in).

El <source> se utiliza para especificar múltiples recursos de los medios de elementos multimedia.

El elemento  <output> representa resultados calculados.

Nuevo en HTML5

Elimina los siguientes elementos:

<acronym> <font>

<frame> <frameset>

<noframes> <strike>

<tt> <applet>

<basefont> <big>

<center> <dir>

Nuevo de HTML5

Tomado de:http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

Arquitectura HTML5

Tomado de:http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

Cliente Servidor

Funciones en JS

Archivo CSS3

Pagina en HTML

Archivos XML

Archivos de

video

Gestor de

usuarios

Gestor de

archivos

CSS3

CSS3 (Cascading Style Sheets) ofrece la posibilidad de definir las reglas y estilos de representación en diferentes dispositivos, se ha dividido en “módulos”.

Se puede animar, redondear bordes, mas personalización.

CSS3

Módulos mas importantes:

SelectoresModelo de cajaFondos y BordesLos valores de imagen y contenido reemplazadoEfectos de textoTransformaciones 2D y 3DAnimacionesDiseño de columna múltipleInterfaz de usuario

CSS3

Tomado de: http://www.w3schools.com/css/tryit.asp?filename=trycss_color

CSS3

Tomado de: http://www.w3schools.com/css/tryit.asp?filename=trycss_color

Biografía

http://www.w3schools.com/css3

http://www.w3schools.com/html5

https://developer.mozilla.org/es/docs/Web/HTML

Muchas Gracias