HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios...
-
Upload
pancho-quesada -
Category
Documents
-
view
218 -
download
0
Transcript of HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios...
![Page 1: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/1.jpg)
HTML5 & CSS3
Presentado Por:Fernando Ayala
Pontificia Universidad Javeriana Desarrollo y Servicios Web
Agosto de 2014
![Page 2: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/2.jpg)
Objetivos
Conocer y saber para que sirve HTML5.
Conocer y saber para que sirve CSS3.
Trabajar un ejemplo de HTML5 y CSS3.
![Page 3: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/3.jpg)
HTML5 y CSS3
![Page 4: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/4.jpg)
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.
![Page 5: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/5.jpg)
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.
![Page 6: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/6.jpg)
Como es HTML5
HTML5 se escribe en forma de “etiquetas” bordeadas por ‘<‘ y ’>’.
Tomado de :http://www.w3schools.com/html/html5_intro.asp
![Page 7: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/7.jpg)
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
![Page 8: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/8.jpg)
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.
![Page 9: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/9.jpg)
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.
![Page 10: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/10.jpg)
Nuevo en HTML5
Elimina los siguientes elementos:
<acronym> <font>
<frame> <frameset>
<noframes> <strike>
<tt> <applet>
<basefont> <big>
<center> <dir>
![Page 11: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/11.jpg)
Nuevo de HTML5
Tomado de:http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all
![Page 12: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/12.jpg)
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
![Page 13: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/13.jpg)
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.
![Page 14: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/14.jpg)
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
![Page 15: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/15.jpg)
CSS3
Tomado de: http://www.w3schools.com/css/tryit.asp?filename=trycss_color
![Page 16: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/16.jpg)
CSS3
Tomado de: http://www.w3schools.com/css/tryit.asp?filename=trycss_color
![Page 17: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/17.jpg)
Biografía
http://www.w3schools.com/css3
http://www.w3schools.com/html5
https://developer.mozilla.org/es/docs/Web/HTML
![Page 18: HTML5 & CSS3 Presentado Por: Fernando Ayala Pontificia Universidad Javeriana Desarrollo y Servicios Web Agosto de 2014.](https://reader035.fdocuments.es/reader035/viewer/2022081514/5665b4691a28abb57c914dc1/html5/thumbnails/18.jpg)
Muchas Gracias