SlideShare una empresa de Scribd logo
HTML5 y el Futuro de la Web
MTA – ARIMAX – TP-LINK : Diego J. Coronel Y.
diegocoronel12@gmail.com
Qué es HTML5?
 Estándar abierto y accesible
 Elementos nuevos
 Web Semántica
 API’s de desarrollo
 Retrocompatible
 Nueva filosofía de trabajo
 Impulsado por los grandes y pequeños
Qué es API´s?
Explicar a un cliente qué es y para qué sirve un API, luego de advertir
que su necesidad o requerimiento se soluciona con un servicio web,
a través de esta tecnología.
API(Interfaz de Programación de Aplicaciones), su definición formal
le da poca información útil a alguien que no entiende mucho de
informática. Una API es una "llave de acceso" a funciones que nos
permiten hacer uso de un servicio web provisto por un tercero, dentro
de una aplicación web propia, de manera segura.
Ejemplo:
Facebook Connect cede a través del API ciertos datos para registrar
automáticamente usuarios en otros sitios web, dándoles la
posibilidad de registrarse y loguearse con sus propias cuentas de
Facebook
Qué es HTML5?
Que es CSS ?
En esta lección aprenderás más cosas sobre
CSS y qué puede hacer por ti.
CSS es el acrónimo de Cascading Style
Sheets es decir: hojas de estilo en cascada.
¿Qué diferencia hay entre CSS y HTML?
HTML se usa para estructurar el contenido; CSS se usa para
formatear el contenido previamente estructurado.
¿Qué beneficios me ofrece CSS?
CSS fue toda una revolución en el mundo del diseño web.
Entre los beneficios concretos de CSS encontramos:
control de la presentación de muchos documentos desde una
única hoja de estilo;
control más preciso de la presentación;
aplicación de diferentes presentaciones a diferentes tipos de
medios (pantalla, impresión, etc.);
numerosas técnicas avanzadas y sofisticadas.
Trabaja sobre…
 Firefox 3.5+
 Chrome 3.0+
 Safari 3.1+
 Opera 10.5+
 IE 9.0+ dicen…
 iPhone
 iPod Touch
 iPad
 Android OS
Pero siempre es importante hacer
pruebas de validación
http://html5test.com/
Tipo de Documento
 Tipo de Documento
<!DOCTYPE html>
 Lenguaje del Documento
<html lang="ES">
 Codificación del Documento
<meta charset="UTF-8">
 Enlaces a CSS, Favicon y RSS
<link rel="stylesheet" href="estilos.css">
<script src=jquery.js></script>
Estructura Mínima de un Documento
<!DOCTYPE html>
<html lang="ES">
<head>
<title>Este es un ejemplo de HTML5</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
Este es el cuerpo de la página, donde irá todo el
contenido.
</body>
</html>
Estructura Semántica
Antes
Ahora
Elementos Semánticos
<header> El elemento header debe utilizarse para marcar la cabecera
de una página (contiene el logotipo del sitio, una imagen, un cuadro de
búsqueda etc).
El elemento header puede estar anidado en otras secciones de la página
(es decir que no solo se utiliza para la cabecera de la página).
<nav> El elemento nav representa una parte de una página que enlaza
a otras páginas o partes dentro de la página. Es una sección con enlaces
de navegación.
No todos los grupos de enlaces en una página deben ser agrupados en
un elemento nav. únicamente las secciones que consisten en bloques de
navegación más importantes son adecuados para el elemento de
navegación.
Elementos Semánticos
<section> El elemento section representa un documento genérico o de
la sección de aplicación. Una sección, en este contexto, es una
agrupación temática de los contenidos. Puede ser un capítulo, una
sección de un capítulo o básicamente cualquier cosa que incluya su
propio encabezado.
Una página de inicio de un sitio Web puede ser dividida en secciones para
una introducción, noticias, información de contacto etc.
<footer> El elemento footer se utiliza para indicar el pié de la página o
de una sección. Un pie de página contiene información general acerca de
su sección el autor, enlaces a documentos relacionados, datos de
derechos de autor etc.
Elementos Semánticos
<aside> El elemento aside representa una nota, un consejo, una
explicación. Esta área son representados a menudo como barras laterales
en la revistas impresa.
El elemento puede ser utilizado para efectos de atracción, como las
comillas tipográficas o barras laterales, para la publicidad, por grupos de
elementos de navegación, y por otro contenido que se considera por
separado del contenido principal de la página.
<article> El elemento article representa una entrada independiente en
un blog, revista, periódico etc.
Cuando se anidan los elementos article, los artículos internos están
relacionados con el contenido del artículo exterior. Por ejemplo, una
entrada de blog en un sitio que acepta comentarios, el elemento article
principal agrupa el artículo propiamente dicho y otro bloque article
anidado con los comentarios de los usuario.
Distribución Semántica
HEADER
HEADER
NAV
NAV ARTICLE ARTICLE VIDEO
SECTION
SECTIONASIDE
FOOTER
FIGURE FIGURE
Controles de Formularios
Nuevos Controles de Formularios - Input
 Telephone
 Url
 Email
 Password
 Datetime
 Date
 Month
 Week
 Number
 Range
 Color
Nuevos Controles de Formularios
Puedes ver una relación oficial del borrador del
estándar en:
http://dev.w3.org/html5/spec/
www.whatwg.org/specs/web-apps/current-
work/multipage/
Nuevos Controles de Formularios
Controles Editables
Atributos de Controles Editables
 contenteditable Hace elementos HTML editable. Puede tener 3
valores: true, false é inherit.
 designmode Hace editable un documento completo elemento.
Puede tomar 2 valores: ON ú OFF.
 designmode Habilita la corrección ortográfica. Funciona en Firefox
y hay que descargar los diccionarios. Puede tomar 2 valores: True o
False.
Audio y Video
Atributos de <video>
 autoplay Para que el video se reproduzca automáticamente. Puede
tener valor TRUE o FALSE.
 controls Para que se muestre barra de control debajo del video.
 height Altura del video.
 widthAncho del video.
 loop El video se reproduce de manera repetitiva.
 poster Imagen si el video no está disponible.
 preload Controla si el video es precargado. Puede tener 3 valores:
none, metadata ó auto.
 src Indica la url del video.
Formato de <video>
 IMPORTANTE A la fecha los navegadores comerciales sólo
soportan el formato de video Vorbis OGG y MP4.
Formato de <video> - Antes
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425"
height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c
ab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param
name="allowscriptaccess" value="always" /> <param name="src"
value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param
name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-
flash" width="425" height="344"
src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&"
allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Formato de <video> - Ahora
CON HTML5
<video width="640" height="360"
src="http://www.youtube.com/demo/google_main.mp4"
controls autobuffer>
</video>
Frameworks para Video
http://www.html5video.org/kaltura-html5/
http://sublimevideo.net/
Que más puedes hacer con HTML5
http://www.thewildernessdowntown.com/
http://www.jolicloud.com/product
http://wordmark.it/
http://www.phoboslab.org/ztype/
http://www.nikebetterworld.com/
http://www.klowdz.com/
http://www.effectgames.com/demos/canvascycle/
Y muchas cosas más…..te animas???
Algunos editores HTML5
ALOHA
DREAMWEAVER CS5
MAQETTA
MACFLUX
BLUEGRIFFON
ZEN
….y otros más…
HTML5 y el Futuro de la Web

Más contenido relacionado

La actualidad más candente

Html
HtmlHtml
AnáLisis De Fbml
AnáLisis De FbmlAnáLisis De Fbml
AnáLisis De Fbml
luisafer92
 
Curso de Desarrollo Web: Etiquetas HTML
Curso de Desarrollo Web: Etiquetas HTMLCurso de Desarrollo Web: Etiquetas HTML
Curso de Desarrollo Web: Etiquetas HTML
Jorge Llanten
 
Qué es una etiqueta html
Qué es una etiqueta htmlQué es una etiqueta html
Qué es una etiqueta html
miriam marin
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
josecabrera987
 
Html
HtmlHtml
Ruiz guerra HTML
Ruiz guerra HTMLRuiz guerra HTML
Ruiz guerra HTML
ReneRuizGuerra
 
Hipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta aHipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta a
noelia alarcon
 
DREAMWEAVER.docx
DREAMWEAVER.docxDREAMWEAVER.docx
DREAMWEAVER.docx
DanteGonzaloSacravil
 
Tema02 html
Tema02 htmlTema02 html
Tema02 html
Erick Cruz
 
Meta etiquetas
Meta etiquetasMeta etiquetas
Sematicas cabecera
Sematicas cabeceraSematicas cabecera
Sematicas cabecera
Duglas Oswaldo Moreno Mendoza
 
Programación básica de html5
Programación básica de html5Programación básica de html5
Programación básica de html5
Coka Medel
 
Clase 1
Clase 1Clase 1
Clase 1
sinaibucio
 
Curso htm profe. andres l
Curso htm profe.  andres lCurso htm profe.  andres l
Curso htm profe. andres l
Andres Domínguez Sánchez
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
Anchelho Shanghashy
 
Modulo paginas
Modulo paginasModulo paginas
Modulo paginas
María C. Plata
 
FRONTPAGE PARTE II
FRONTPAGE PARTE IIFRONTPAGE PARTE II
FRONTPAGE PARTE II
Yulismar Quevedo
 
Ht ml
Ht mlHt ml
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
Herberto Ramirez
 

La actualidad más candente (20)

Html
HtmlHtml
Html
 
AnáLisis De Fbml
AnáLisis De FbmlAnáLisis De Fbml
AnáLisis De Fbml
 
Curso de Desarrollo Web: Etiquetas HTML
Curso de Desarrollo Web: Etiquetas HTMLCurso de Desarrollo Web: Etiquetas HTML
Curso de Desarrollo Web: Etiquetas HTML
 
Qué es una etiqueta html
Qué es una etiqueta htmlQué es una etiqueta html
Qué es una etiqueta html
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Html
HtmlHtml
Html
 
Ruiz guerra HTML
Ruiz guerra HTMLRuiz guerra HTML
Ruiz guerra HTML
 
Hipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta aHipervinculos links anclas html href target title etiqueta a
Hipervinculos links anclas html href target title etiqueta a
 
DREAMWEAVER.docx
DREAMWEAVER.docxDREAMWEAVER.docx
DREAMWEAVER.docx
 
Tema02 html
Tema02 htmlTema02 html
Tema02 html
 
Meta etiquetas
Meta etiquetasMeta etiquetas
Meta etiquetas
 
Sematicas cabecera
Sematicas cabeceraSematicas cabecera
Sematicas cabecera
 
Programación básica de html5
Programación básica de html5Programación básica de html5
Programación básica de html5
 
Clase 1
Clase 1Clase 1
Clase 1
 
Curso htm profe. andres l
Curso htm profe.  andres lCurso htm profe.  andres l
Curso htm profe. andres l
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Modulo paginas
Modulo paginasModulo paginas
Modulo paginas
 
FRONTPAGE PARTE II
FRONTPAGE PARTE IIFRONTPAGE PARTE II
FRONTPAGE PARTE II
 
Ht ml
Ht mlHt ml
Ht ml
 
Acerca de html
Acerca de htmlAcerca de html
Acerca de html
 

Destacado

Suíza
SuízaSuíza
Presentation Jesper Bank
Presentation Jesper BankPresentation Jesper Bank
Presentation Jesper Bank
Jesper Bank
 
Las tics en la educacion por anderson soto
Las tics en la educacion por anderson sotoLas tics en la educacion por anderson soto
Las tics en la educacion por anderson soto
jhon-9605
 
香港六合彩
香港六合彩香港六合彩
Ktz tv channel
Ktz tv channelKtz tv channel
Ktz tv channel
Yuta Kassy
 
Baeder
BaederBaeder
Baeder
ecquadrat
 
Dioste Dice L E E L A B I B L I A
Dioste Dice  L E E L A B I B L I ADioste Dice  L E E L A B I B L I A
Dioste Dice L E E L A B I B L I A
pmizuo
 
Bondia.cat 06/09/2013
Bondia.cat 06/09/2013Bondia.cat 06/09/2013
Bondia.cat 06/09/2013
Bondia Lleida Sl
 
Ingenia Perú Formación y Desarrollo
Ingenia Perú Formación y DesarrolloIngenia Perú Formación y Desarrollo
Ingenia Perú Formación y Desarrollo
Ingenia Perú
 
Tabletas1 Lenguajes de Convivencia
Tabletas1 Lenguajes de ConvivenciaTabletas1 Lenguajes de Convivencia
Tabletas1 Lenguajes de Convivencia
Red de Investigación Educativa - ieRed
 
Jobsøgning og personlig branding gennem sociale medier
Jobsøgning og personlig branding gennem sociale medierJobsøgning og personlig branding gennem sociale medier
Jobsøgning og personlig branding gennem sociale medier
Eva Jonassen
 
Catalogue des produits du poitou charente
Catalogue des produits du poitou charenteCatalogue des produits du poitou charente
Catalogue des produits du poitou charenteproyecto_comenius
 
Estudio sobre el pedo
Estudio sobre el pedoEstudio sobre el pedo
Estudio sobre el pedo
Victorino Redondo Fidalgo
 
Global Commision on Internet Governance
Global Commision on Internet GovernanceGlobal Commision on Internet Governance
Global Commision on Internet Governance
Dominic A Ienco
 
Dpk
DpkDpk
Caso studio Brevetti CEA per l'adozione del gestionale ERP Metodo Evolus
Caso studio Brevetti CEA per l'adozione del gestionale ERP Metodo EvolusCaso studio Brevetti CEA per l'adozione del gestionale ERP Metodo Evolus
Caso studio Brevetti CEA per l'adozione del gestionale ERP Metodo Evolus
Metodo spa
 
High Volume, Rapid Turn Around Localization: Lessons Learned
High Volume, Rapid Turn Around Localization: Lessons LearnedHigh Volume, Rapid Turn Around Localization: Lessons Learned
High Volume, Rapid Turn Around Localization: Lessons Learned
SDL
 
So You Want to be an Email Marketer - Heather Galloway
So You Want to be an Email Marketer - Heather GallowaySo You Want to be an Email Marketer - Heather Galloway
So You Want to be an Email Marketer - Heather Galloway
Insurance Technologies Corporation (ITC)
 
3)Lady Madonna 2 Pages
3)Lady Madonna   2 Pages3)Lady Madonna   2 Pages
3)Lady Madonna 2 Pages
J. Gregory (Greg) Twain
 

Destacado (20)

Suíza
SuízaSuíza
Suíza
 
Presentation Jesper Bank
Presentation Jesper BankPresentation Jesper Bank
Presentation Jesper Bank
 
Las tics en la educacion por anderson soto
Las tics en la educacion por anderson sotoLas tics en la educacion por anderson soto
Las tics en la educacion por anderson soto
 
TOP TEL
TOP TELTOP TEL
TOP TEL
 
香港六合彩
香港六合彩香港六合彩
香港六合彩
 
Ktz tv channel
Ktz tv channelKtz tv channel
Ktz tv channel
 
Baeder
BaederBaeder
Baeder
 
Dioste Dice L E E L A B I B L I A
Dioste Dice  L E E L A B I B L I ADioste Dice  L E E L A B I B L I A
Dioste Dice L E E L A B I B L I A
 
Bondia.cat 06/09/2013
Bondia.cat 06/09/2013Bondia.cat 06/09/2013
Bondia.cat 06/09/2013
 
Ingenia Perú Formación y Desarrollo
Ingenia Perú Formación y DesarrolloIngenia Perú Formación y Desarrollo
Ingenia Perú Formación y Desarrollo
 
Tabletas1 Lenguajes de Convivencia
Tabletas1 Lenguajes de ConvivenciaTabletas1 Lenguajes de Convivencia
Tabletas1 Lenguajes de Convivencia
 
Jobsøgning og personlig branding gennem sociale medier
Jobsøgning og personlig branding gennem sociale medierJobsøgning og personlig branding gennem sociale medier
Jobsøgning og personlig branding gennem sociale medier
 
Catalogue des produits du poitou charente
Catalogue des produits du poitou charenteCatalogue des produits du poitou charente
Catalogue des produits du poitou charente
 
Estudio sobre el pedo
Estudio sobre el pedoEstudio sobre el pedo
Estudio sobre el pedo
 
Global Commision on Internet Governance
Global Commision on Internet GovernanceGlobal Commision on Internet Governance
Global Commision on Internet Governance
 
Dpk
DpkDpk
Dpk
 
Caso studio Brevetti CEA per l'adozione del gestionale ERP Metodo Evolus
Caso studio Brevetti CEA per l'adozione del gestionale ERP Metodo EvolusCaso studio Brevetti CEA per l'adozione del gestionale ERP Metodo Evolus
Caso studio Brevetti CEA per l'adozione del gestionale ERP Metodo Evolus
 
High Volume, Rapid Turn Around Localization: Lessons Learned
High Volume, Rapid Turn Around Localization: Lessons LearnedHigh Volume, Rapid Turn Around Localization: Lessons Learned
High Volume, Rapid Turn Around Localization: Lessons Learned
 
So You Want to be an Email Marketer - Heather Galloway
So You Want to be an Email Marketer - Heather GallowaySo You Want to be an Email Marketer - Heather Galloway
So You Want to be an Email Marketer - Heather Galloway
 
3)Lady Madonna 2 Pages
3)Lady Madonna   2 Pages3)Lady Madonna   2 Pages
3)Lady Madonna 2 Pages
 

Similar a Html5

Html5
Html5Html5
Html5
Html5Html5
Html5
Html5Html5
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuroPresentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
CLEFormación
 
Nuevo Html5 ..
Nuevo Html5 ..Nuevo Html5 ..
Nuevo Html5 ..
icreativasoft
 
Articulo
ArticuloArticulo
Articulo
yosmarievegart
 
Html5
Html5Html5
Html5
victorgm7
 
DIAPOSITIVA.pptx
DIAPOSITIVA.pptxDIAPOSITIVA.pptx
DIAPOSITIVA.pptx
deysisudarioprudenci
 
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdfGUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
SERGIOLUSARRIETAGONZ
 
Orellana morales html
Orellana morales htmlOrellana morales html
Orellana morales html
CelesteOrellana98
 
Html dulce mata (1)
Html dulce mata (1)Html dulce mata (1)
Html dulce mata (1)
DulceeMaria
 
Html5
Html5Html5
Diseño web
Diseño webDiseño web
Diseño web
valenciaredsocial
 
Diseño web
Diseño webDiseño web
Diseño web
valenciaredsocial
 
Html daniela vargas
Html daniela vargasHtml daniela vargas
Html daniela vargas
VargasJor
 
trabajo de informatica
trabajo de informaticatrabajo de informatica
trabajo de informatica
sebastianconde246
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
geralyfernandacabreraaldana
 
Itecnor evelin oliva
Itecnor evelin olivaItecnor evelin oliva
Itecnor evelin oliva
evelinnnmarielaaa
 
Itecnor evelin oliva
Itecnor evelin olivaItecnor evelin oliva
Itecnor evelin oliva
evelinnnmarielaaa
 
Php curso02
Php   curso02Php   curso02
Php curso02
viruscraquer
 

Similar a Html5 (20)

Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuroPresentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
 
Nuevo Html5 ..
Nuevo Html5 ..Nuevo Html5 ..
Nuevo Html5 ..
 
Articulo
ArticuloArticulo
Articulo
 
Html5
Html5Html5
Html5
 
DIAPOSITIVA.pptx
DIAPOSITIVA.pptxDIAPOSITIVA.pptx
DIAPOSITIVA.pptx
 
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdfGUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
GUIA DE FORMULARIOS HTML - PARA LA ACTIVIDAD 1.pdf
 
Orellana morales html
Orellana morales htmlOrellana morales html
Orellana morales html
 
Html dulce mata (1)
Html dulce mata (1)Html dulce mata (1)
Html dulce mata (1)
 
Html5
Html5Html5
Html5
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Html daniela vargas
Html daniela vargasHtml daniela vargas
Html daniela vargas
 
trabajo de informatica
trabajo de informaticatrabajo de informatica
trabajo de informatica
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Itecnor evelin oliva
Itecnor evelin olivaItecnor evelin oliva
Itecnor evelin oliva
 
Itecnor evelin oliva
Itecnor evelin olivaItecnor evelin oliva
Itecnor evelin oliva
 
Php curso02
Php   curso02Php   curso02
Php curso02
 

Html5

  • 1. HTML5 y el Futuro de la Web MTA – ARIMAX – TP-LINK : Diego J. Coronel Y. diegocoronel12@gmail.com
  • 2. Qué es HTML5?  Estándar abierto y accesible  Elementos nuevos  Web Semántica  API’s de desarrollo  Retrocompatible  Nueva filosofía de trabajo  Impulsado por los grandes y pequeños
  • 3. Qué es API´s? Explicar a un cliente qué es y para qué sirve un API, luego de advertir que su necesidad o requerimiento se soluciona con un servicio web, a través de esta tecnología. API(Interfaz de Programación de Aplicaciones), su definición formal le da poca información útil a alguien que no entiende mucho de informática. Una API es una "llave de acceso" a funciones que nos permiten hacer uso de un servicio web provisto por un tercero, dentro de una aplicación web propia, de manera segura. Ejemplo: Facebook Connect cede a través del API ciertos datos para registrar automáticamente usuarios en otros sitios web, dándoles la posibilidad de registrarse y loguearse con sus propias cuentas de Facebook
  • 5. Que es CSS ? En esta lección aprenderás más cosas sobre CSS y qué puede hacer por ti. CSS es el acrónimo de Cascading Style Sheets es decir: hojas de estilo en cascada.
  • 6. ¿Qué diferencia hay entre CSS y HTML? HTML se usa para estructurar el contenido; CSS se usa para formatear el contenido previamente estructurado.
  • 7. ¿Qué beneficios me ofrece CSS? CSS fue toda una revolución en el mundo del diseño web. Entre los beneficios concretos de CSS encontramos: control de la presentación de muchos documentos desde una única hoja de estilo; control más preciso de la presentación; aplicación de diferentes presentaciones a diferentes tipos de medios (pantalla, impresión, etc.); numerosas técnicas avanzadas y sofisticadas.
  • 8. Trabaja sobre…  Firefox 3.5+  Chrome 3.0+  Safari 3.1+  Opera 10.5+  IE 9.0+ dicen…  iPhone  iPod Touch  iPad  Android OS Pero siempre es importante hacer pruebas de validación http://html5test.com/
  • 9. Tipo de Documento  Tipo de Documento <!DOCTYPE html>  Lenguaje del Documento <html lang="ES">  Codificación del Documento <meta charset="UTF-8">  Enlaces a CSS, Favicon y RSS <link rel="stylesheet" href="estilos.css"> <script src=jquery.js></script>
  • 10. Estructura Mínima de un Documento <!DOCTYPE html> <html lang="ES"> <head> <title>Este es un ejemplo de HTML5</title> <meta charset="UTF-8"> <link rel="stylesheet" href="estilo.css"> </head> <body> Este es el cuerpo de la página, donde irá todo el contenido. </body> </html>
  • 12. Antes
  • 13. Ahora
  • 14. Elementos Semánticos <header> El elemento header debe utilizarse para marcar la cabecera de una página (contiene el logotipo del sitio, una imagen, un cuadro de búsqueda etc). El elemento header puede estar anidado en otras secciones de la página (es decir que no solo se utiliza para la cabecera de la página). <nav> El elemento nav representa una parte de una página que enlaza a otras páginas o partes dentro de la página. Es una sección con enlaces de navegación. No todos los grupos de enlaces en una página deben ser agrupados en un elemento nav. únicamente las secciones que consisten en bloques de navegación más importantes son adecuados para el elemento de navegación.
  • 15. Elementos Semánticos <section> El elemento section representa un documento genérico o de la sección de aplicación. Una sección, en este contexto, es una agrupación temática de los contenidos. Puede ser un capítulo, una sección de un capítulo o básicamente cualquier cosa que incluya su propio encabezado. Una página de inicio de un sitio Web puede ser dividida en secciones para una introducción, noticias, información de contacto etc. <footer> El elemento footer se utiliza para indicar el pié de la página o de una sección. Un pie de página contiene información general acerca de su sección el autor, enlaces a documentos relacionados, datos de derechos de autor etc.
  • 16. Elementos Semánticos <aside> El elemento aside representa una nota, un consejo, una explicación. Esta área son representados a menudo como barras laterales en la revistas impresa. El elemento puede ser utilizado para efectos de atracción, como las comillas tipográficas o barras laterales, para la publicidad, por grupos de elementos de navegación, y por otro contenido que se considera por separado del contenido principal de la página. <article> El elemento article representa una entrada independiente en un blog, revista, periódico etc. Cuando se anidan los elementos article, los artículos internos están relacionados con el contenido del artículo exterior. Por ejemplo, una entrada de blog en un sitio que acepta comentarios, el elemento article principal agrupa el artículo propiamente dicho y otro bloque article anidado con los comentarios de los usuario.
  • 17. Distribución Semántica HEADER HEADER NAV NAV ARTICLE ARTICLE VIDEO SECTION SECTIONASIDE FOOTER FIGURE FIGURE
  • 19. Nuevos Controles de Formularios - Input  Telephone  Url  Email  Password  Datetime  Date  Month  Week  Number  Range  Color
  • 20. Nuevos Controles de Formularios Puedes ver una relación oficial del borrador del estándar en: http://dev.w3.org/html5/spec/ www.whatwg.org/specs/web-apps/current- work/multipage/
  • 21. Nuevos Controles de Formularios
  • 23. Atributos de Controles Editables  contenteditable Hace elementos HTML editable. Puede tener 3 valores: true, false é inherit.  designmode Hace editable un documento completo elemento. Puede tomar 2 valores: ON ú OFF.  designmode Habilita la corrección ortográfica. Funciona en Firefox y hay que descargar los diccionarios. Puede tomar 2 valores: True o False.
  • 25. Atributos de <video>  autoplay Para que el video se reproduzca automáticamente. Puede tener valor TRUE o FALSE.  controls Para que se muestre barra de control debajo del video.  height Altura del video.  widthAncho del video.  loop El video se reproduce de manera repetitiva.  poster Imagen si el video no está disponible.  preload Controla si el video es precargado. Puede tener 3 valores: none, metadata ó auto.  src Indica la url del video.
  • 26. Formato de <video>  IMPORTANTE A la fecha los navegadores comerciales sólo soportan el formato de video Vorbis OGG y MP4.
  • 27. Formato de <video> - Antes <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c ab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave- flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
  • 28. Formato de <video> - Ahora CON HTML5 <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer> </video>
  • 30. Que más puedes hacer con HTML5 http://www.thewildernessdowntown.com/ http://www.jolicloud.com/product http://wordmark.it/ http://www.phoboslab.org/ztype/ http://www.nikebetterworld.com/ http://www.klowdz.com/ http://www.effectgames.com/demos/canvascycle/ Y muchas cosas más…..te animas???
  • 31. Algunos editores HTML5 ALOHA DREAMWEAVER CS5 MAQETTA MACFLUX BLUEGRIFFON ZEN ….y otros más…
  • 32. HTML5 y el Futuro de la Web