Html5ycss3 110524155935 Phpapp02

HTML5 Y CSS 3
Antonio Valverde Rodrguez Twitter: @valgreens valverde@webmastergranada.es
INTRODUCCIN
HTML 5 ES LA EVOLUCIN DEL HTML 4 Y XHTML 1 AN EN DESARROLLO POR EL W3C HTML5 ~= HTML + CSS + JS
INTRODUCCIN
INTRODUCCIN
5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5
INTRODUCCIN
5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5 1. HTML5 NO ES UN GRAN BLOQUE
INTRODUCCIN
5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5 1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5
INTRODUCCIN
5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5 1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5 3. ES MUY FCIL EMPEZAR
INTRODUCCIN
5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5 1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5 3. ES MUY FCIL EMPEZAR 4. YA FUNCIONA
INTRODUCCIN
5 COSAS QUE DEBES SABER ANTES DE EMPEZAR CON HTML 5 1. HTML5 NO ES UN GRAN BLOQUE 2. NO NECESITAS TIRAR NADA ANTERIOR A HTML 5 3. ES MUY FCIL EMPEZAR 4. YA FUNCIONA 5. HA LLEGADO PARA QUEDARSE
NOVEDADES EN HTML 5
NOVEDADES EN HTML 5
Los tags nicos ya no es obligatorio cerrarlos Nuevos elementos, ms semnticos
NOVEDADES EN HTML 5
Los tags nicos ya no es obligatorio cerrarlos Nuevos elementos, ms semnticos Conjunto de APIs
NOVEDADES EN HTML 5
Los tags nicos ya no es obligatorio cerrarlos Nuevos elementos, ms semnticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device>
NOVEDADES EN HTML 5
Los tags nicos ya no es obligatorio cerrarlos Nuevos elementos, ms semnticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos
NOVEDADES EN HTML 5
Los tags nicos ya no es obligatorio cerrarlos Nuevos elementos, ms semnticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos WebWorkers, WebStorage, WebSockets y Web SQL Database
NOVEDADES EN HTML 5
Los tags nicos ya no es obligatorio cerrarlos Nuevos elementos, ms semnticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos WebWorkers, WebStorage, WebSockets y Web SQL Database Geolocalizacin
NOVEDADES EN HTML 5
Los tags nicos ya no es obligatorio cerrarlos Nuevos elementos, ms semnticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos WebWorkers, WebStorage, WebSockets y Web SQL Database Geolocalizacin Mejoras en los formularios
NOVEDADES EN HTML 5
Los tags nicos ya no es obligatorio cerrarlos Nuevos elementos, ms semnticos Conjunto de APIs Posibilidad de acceder a dispositivos: <device> Canvas y microdatos WebWorkers, WebStorage, WebSockets y Web SQL Database Geolocalizacin Mejoras en los formularios Retrocompatible
SE PUEDE USAR YA?

S pero...
SE PUEDE USAR YA?

S pero...
Hay que preocuparse de la retrocompatibilidad
SE PUEDE USAR YA?

S pero...
Hay que preocuparse de la retrocompatibilidad Algunas tecnologas no estn preparadas an
SE PUEDE USAR YA?

S pero...
Hay que preocuparse de la retrocompatibilidad Algunas tecnologas no estn preparadas an El contenido tiene que ser siempre accesible
SE PUEDE USAR YA?

S pero...
Hay que preocuparse de la retrocompatibilidad Algunas tecnologas no estn preparadas an El contenido tiene que ser siempre accesible Se pueden complementar con javascript
SE PUEDE USAR YA?

S pero...
Hay que preocuparse de la retrocompatibilidad Algunas tecnologas no estn preparadas an El contenido tiene que ser siempre accesible Se pueden complementar con javascript (polylls)
!DOCTYPE
XTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/ xhtml11/DTD/xhtml11.dtd">
HTML5:
<!DOCTYPE html>
CODIFICACIN
XTML 1.1:
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
HTML5:
<meta charset=utf-8>
LINK / SCRIPT
XTML 1.1:
<link rel=stylesheet type=text/css href=ejemplo.css /> <script type=text/javascript src=jquery.js></script>
HTML5:
<link rel=stylesheet href=ejemplo.css> <script src=jquery.js>
VIEJA ESTRUCTURA
<div id=header> <div id=nav> <div id=main> <div class=post> <div class=post> <div id=footer> <div id=sidebar>
NUEVA ESTRUCTURA
<header> <nav> <section> <article> <article> <aside>
<footer>
<HEADER>
Logo
y ttulo
Navegacin Varios
encabezados
<NAV>
Puede Migas
haber ms de uno
de pan
Blogroll
<ARTICLE>
Artculos
de blog y peridico y productos
Comentarios Sindicable
<SECTION>
Agrupa Sirve
contenido semnticamente
tanto para pginas y artculos
<ASIDE>
Sidebar Anuncios
<FOOTER>
Puede
haber varios
Licencia, enlaces, etc
FIGURE/FIGCAPTION
FIGURE/FIGCAPTION
<figure> <img src="imagen.jpg" alt=" "> <figcaption>Wheel</figcaption> </figure>
<HGROUP>
Ha desaparecido de la especicacin de HTML5 recientemente Originariamente se utilizaba para agrupar encabezados con ms de una etiqueta <h1>...<h6>
<TIME>
<time>2011-05-05</time>
<TIME>
<time>2011-05-05</time>
datetime: permite declarar la fecha en un formato legible
por una mquina
<TIME>
<time>2011-05-05</time>
datetime: permite declarar la fecha en un formato legible
por una mquina

pubdate: especica que es una fecha de publicacin
ADIS A...
applet big center font frame blink marquee
3, 2, 1... ACCIN!
<audio> <video>
<AUDIO> Y <VIDEO>
<audio src="cancion.???" > </audio> <video src="video.???" > </video>
ATRIBUTOS
ATRIBUTOS
autoplay: reproduccin automtica.
ATRIBUTOS
autoplay: reproduccin automtica. controls: muestra los controles de vdeo nativos de cada
navegador. No aparecen por defecto.
ATRIBUTOS
navegador. No aparecen por defecto. poster: imagen de previsualizacin. Si no se especica, el navegador coge el primer fotograma.
ATRIBUTOS
navegador. No aparecen por defecto. poster: imagen de previsualizacin. Si no se especica, el navegador coge el primer fotograma. width, height: si no se especican, se toman las del poster; si no, sern 300px por 150px.
ATRIBUTOS
navegador. No aparecen por defecto. poster: imagen de previsualizacin. Si no se especica, el navegador coge el primer fotograma. width, height: si no se especican, se toman las del poster; si no, sern 300px por 150px. loop: reproduce el vdeo en bucle.
ATRIBUTOS
navegador. No aparecen por defecto. poster: imagen de previsualizacin. Si no se especica, el navegador coge el primer fotograma. width, height: si no se especican, se toman las del poster; si no, sern 300px por 150px. loop: reproduce el vdeo en bucle. preload: precarga el vdeo.
ATRIBUTOS
navegador. No aparecen por defecto. poster: imagen de previsualizacin. Si no se especica, el navegador coge el primer fotograma. width, height: si no se especican, se toman las del poster; si no, sern 300px por 150px. loop: reproduce el vdeo en bucle. preload: precarga el vdeo. src: indica la fuente del vdeo.
LA FORMA CORRECTA
<video controls width="360" height="240" poster="caratula.jpg" > <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv" type="video/ogg" > <p> Tu navegador no sorporta vdeo. Puedes descargar este vdeo en formato <a href="vid.mp4">mp4<a> o en formato <a href="vid.ogv">Ogg<a>. </p> </video>
GUERRA DE FORMATOS
Formato Ogg H264 WebM IE NO 9.0+ 9.0+ Firefox 3.4+ NO 4.0+ Safari NO 3.0+ NO Chrome 5.0+ 5.0+ 5.0+ Opera 10.5+ NO 10.6+
SOPORTE HTML5
Chrome Firefox Safari Opera Internet Explorer 9
SOPORTE HTML5
Creamos los elementos nuevos con Javascript:
document.CreateElement('nav'); document.CreateElement('header'); document.CreateElement('footer'); document.CreateElement('article'); document.CreateElement('section');
HTML5 SHIV

FORMULARIOS
<input type=email> <input type=url> <input type=tel>
FORMULARIOS
Ms novedades y tipos de input
FORMULARIOS
<input type=search>
FORMULARIOS
<input type=search> <input type=number>
FORMULARIOS
<input type=search> <input type=number> <input type=range>
FORMULARIOS
<input <input <input <input type=search> type=number> type=range> type=color>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color> <input type=date>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime> <input type=month>
FORMULARIOS
<input type=search> <input type=number> <input type=range> <input type=color> <input type=date> <input type=time> <input type=datetime> <input type=month> <input type=week>
LISTAS DONDE ELEGIR

<input type=text list=payasos> <datalist id=payasos> <option value=Miliki> <option value=Fof> <option value=Gaby> </datalist>
ATRIBUTOS
ATRIBUTOS
autofocus
ATRIBUTOS
autofocus placeholder
ATRIBUTOS
autofocus placeholder pattern
ATRIBUTOS
autofocus placeholder pattern multiple
ATRIBUTOS
autofocus placeholder pattern multiple autocomplete
ATRIBUTOS
autofocus placeholder pattern multiple autocomplete min/max
ATRIBUTOS
autofocus placeholder pattern multiple autocomplete min/max step
ATRIBUTOS
autofocus placeholder pattern multiple autocomplete min/max step required
CSS 3
CSS 3
Nuevas posibilidades de decoracin
CSS 3
Nuevas posibilidades de decoracin Menos markup
CSS 3
Nuevas posibilidades de decoracin Menos markup Menos dependencia de javascript
CSS 3
Nuevas posibilidades de decoracin Menos markup Menos dependencia de javascript Mayor control
BACKGROUND
Multiple backgrounds:
html{ background: url(img/arena.png) no-repeat 70% 20%, url(img/wall.png) repeat left top; }
RGBA Y HSLA
RGBa = RGB + alpha
#foo { Background: rgba(0, 0, 0, .5); } #foo { Background: rgba(255, 0, 0, .7); }
Texto
Texto
RGBA Y HSLA
HSLa = HSL + alpha
#foo { Background: hsla(324, 100%, 75%, .5); } #foo { Background: hsla(324, 100%, 25%, .2); }
RGBA Y HSLA
@FONT-FACE
Permite incorporar tipografas no instaladas
@font-face { font-family: 'lobster'; src: url('lobster.ttf') format('truetype'); font-weight: normal; font-style: normal; }
@FONT-FACE
@FONT-FACE
Google Font Directory http://code.google.com/webfonts Fontsquirrel http://www.fontsquirrel.com/ Typekit http://typekit.com/
TEXT-SHADOW
h1 {text-shadow: 3px 3px 5px black;} h1 {text-shadow: 5px 5px 0px blue;}
TEXT-SHADOW
BOX-SHADOW
#foo { box-shadow: 5px 5px 10px black;} #foo { box-shadow: inset 3px 3px 5px black;}
BOX-SHADOW
BORDER-RADIUS
#foo { border-radius: 10px;} #foo { border-radius: 50px 0 50px 0;}
BORDER-RADIUS
TRANSFORMS
#foo { transform: rotate(45deg);} #foo { transform: scale(0.5);}
TRANSFORMS
#foo { transform: skew(45deg);} #foo { transform: translate (20px,-20px);}
CSS 3 SHAPES
#circle { width: 140px; height: 140px; background: red; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; }
CSS 3 SHAPES
#oval { width: 200px; height: 100px; background: purple; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }
CSS 3 SHAPES
#left-triangle { width: 0; height: 0; border-right: 100px solid orange; border-top: 50px solid transparent; border-bottom: 50px solid transparent; }
Y MUCHAS MS
http://css3shapes.com/
PARA TERMINAR...
Polylls: Modernizr HTML5 shiv Google Chrome Frame Frameworks: HTML5 boilerplate Switch to HTML5
RECURSOS
Online: - HTML5doctor - Dive into HTML5 - HTML5 Rocks - W3C HTML5 spec - Edition for Web Authors - WHATWG HTML5 spec - Edition for Web Developers - HTML5 gurus en Twitter, por Bruce Lawson - Can I Use?
MS RECURSOS
Libros: - HTML5 for web designers, de Jeremy Keith - Introducing HTML5, de Bruce Lawson y Remy Sharp - HTML5: Up and Running, de Mark Pilgrim - Pro HTML5 Programming, de Peter Lubbers, Brian Albers y Frank Salim - Foundation HTML5 Canvas, de Rob Hawkes
PARA OJEAR
Presentaciones (@htmlboy y @martuishere): http://swwweet.com/presentaciones/html5hoy http://www.slideshare.net/Martulina/conocehtml5-y-css3-6893390 Pgina de Javier Casares: http://javiercasares.com/html5/
GRACIAS! :)

Html5ycss3 110524155935 Phpapp02

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Html5ycss3 110524155935 Phpapp02

Hochgeladen von

Copyright:

Verfügbare Formate

HTML5 Y CSS 3

Antonio Valverde Rodrguez Twitter: @valgreens valverde@webmastergranada.es

SE PUEDE USAR YA?

SE PUEDE USAR YA?

SE PUEDE USAR YA?

SE PUEDE USAR YA?

SE PUEDE USAR YA?

SE PUEDE USAR YA?

de blog y peridico y productos

tanto para pginas y artculos

Licencia, enlaces, etc

<figure> <img src="imagen.jpg" alt=" "> <figcaption>Wheel</figcaption> </figure>

datetime: permite declarar la fecha en un formato legible

por una mquina

datetime: permite declarar la fecha en un formato legible

por una mquina

navegador. No aparecen por defecto.

LISTAS DONDE ELEGIR

Das könnte Ihnen auch gefallen