html5 css3 090924042836 Phpapp01

FRONTDAYS
HTML5 y CSS3:
cmo sacarles partido hoy
Jose Florido
Madrid Martes 22 Septiembre 2009
www.frontdays.com
HTML5 y CSS3: cmo sacarles partido hoy
FRONTDAYS
Mostrar el potencial de los nuevos estndares, as como de los
navegadores web de nueva generacin y su uso hoy en da,
logrando mantener nuestras pginas web compatibles con
navegadores menos avanzados.
Objetivo del curso
FRONTDAYS
HTML 5
FRONTDAYS
FRONTDAYS
!
Historia
!
Caractersticas
!
Novedades
!
APIs
!
Ejercicio prctico: creacin de una pgina con HTML5
Primera parte: HTML5
FRONTDAYS
HTML 5
Historia de HTML 5
FRONTDAYS
FRONTDAYS
Historia de HTML5
HTML4
1998
FRONTDAYS
Historia de HTML5
XHTML1
2000
FRONTDAYS
Historia de HTML5
XHTML2
2002
FRONTDAYS
Historia de HTML5
XForms
2003
FRONTDAYS
Historia de HTML5
WHATG
2004
FRONTDAYS
Historia de HTML5
HTML5
2007
FRONTDAYS
Historia de HTML5
Hoy da, las aplicacione web necesitan:
!
Reproducir video y audio
!
Acceso a recursos: webcam, micrfono, etc
!
Trabajar ofine
!
3D
!
Geolocalizacin
!
Mejores subidas de cheros
!
Drag and drop
!
Complejos elementos de interaccin con formularios
FRONTDAYS
Historia de HTML5
2022?
!
Final Draft en Octubre 2009
!
Nuevos navegadores: Chrome 3, FireFox 3.5.3, Opera 10, Safari 4
!
Google Wave
!
iPhone
FRONTDAYS
HTML 5
Principales caractersticas
FRONTDAYS
FRONTDAYS
HTML5: Principales caractersticas
Compatibilidad
Evolucin, no revolucin
FRONTDAYS
Utilidad
Resolver problemas reales
FRONTDAYS
Interoperabilidad
Denir el comportamiento de los UA
Gestin de errores
FRONTDAYS
Acceso universal
Independencia del medio, i18n, accesible
FRONTDAYS
HTML 5
Novedades
FRONTDAYS
FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
FRONTDAYS
HTML5: Novedades
Doctype
<!DOCTYPE html> :-
)
FRONTDAYS
HTML5: Novedades
Tipos de contenido
!
Metadata content
!
Flow content
!
Sectioning content
!
Heading content
!
Phrasing content
!
Embedded content
!
Interactive content
FRONTDAYS
HTML5: Novedades
Metadata content
dene la presentacin o el comportamiento del resto del
documento, o relaciones del documento con otros documentos.
base, command, link, meta, noscript, script, style, title
FRONTDAYS
HTML5: Novedades
Flow content
la mayora de los elementos usados en el cuerpo de un documento
son de tipo ow.
a, abbr address, article aside, audio, dialog, div, eldset, gure,
footer, form, h1, h2, img, nav, p, script, section, select, small, span,
strong, table, textarea, time, video,...
FRONTDAYS
HTML5: Novedades
Sectioning content
elementos que crean nuevas secciones en el documento
article, aside, nav, section
FRONTDAYS
HTML5: Novedades
Heading content
elementos que denen la cabecera de una seccin
h1, h2, h3, h4, h5, h6, hgroup
FRONTDAYS
HTML5: Novedades
Phrasing content
texto del documento junto con elementos que marcan el texto,
dentro de un prrafo
a, b, string, span, small, time, em,...
FRONTDAYS
HTML5: Novedades
Embedded content
elementos que importan otro recurso o contenido de otro
vocabulario dentro del documento
audio, canvas, embed, iframe, img, math, object, svg, video
FRONTDAYS
HTML5: Novedades
Interactive content
elementos destinados a interaccin con el usuario
a, audio, button, details, embed, iframe, img, input, keygen,
label,menu, object, select, textarea, video
FRONTDAYS
HTML5: Novedades
Nuevos elementos
!
Elementos estructurales
!
Canvas
!
Video
!
Audio
FRONTDAYS
HTML5: Novedades
Elementos estructurales I
section representa una seccin del documento. Junto con h1, h2,...,
h6 indica la estructura del documento.
article representa una pieza de contenido independiente dentro de
un documento.
aside representa una pieza de contenido que esta menos
relacionada con el resto de la pgina.
FRONTDAYS
HTML5: Novedades
Elementos estructurales II
hgroup representa el encabezado de una seccin. Agrupa varios
elementos h1 - h6.
header representa la cabecera de un documento o seccin.
footer representa el pie de una seccin y puede contener
informacin sobre el autor, copyright, etc.
FRONTDAYS
HTML5: Novedades
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
</article>
FRONTDAYS
HTML5: Novedades
Elementos estructurales III
nav representa una seccin del documento que contiene
navegacin
dialog usado para marcar una conversacin
gure usado para asociar una description textual o subttulos a
algn elemento embedido, como vdeos o imgenes.
FRONTDAYS
HTML5: Novedades
<body>
<header>
<h1>Web page</h1>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Articles</a></li>
<li><a href="today.html">Today</a></li>
<li><a href="successes.html">Successes</a></li>
</ul>
</nav>
</header>

<article>
<p>...page content would be here...</p>
</article>

<footer>
<p>Copyright 2006 The Example Company</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>
FRONTDAYS
HTML5: Novedades
Nuevos elementos
canvas crea un lienzo donde es posible crear grcos u otras
imgenes visuales al vuelo, mediante scripting.
FRONTDAYS
HTML5: Novedades
Canvas - accesibilidad
Contenido alternativo
<canvas id="a_canvas" width="400" height="300">
<p>Ops! No canvas support, bad browser!</p>
</canvas>
Problemas de accesibilidad
FRONTDAYS
HTML5: Novedades
Canvas - soporte
Soporte extenso por parte de navegadores
* IE utilizando la librera excanvas.js
FRONTDAYS
HTML5: Novedades
Canvas - aplicaciones
Efectos y transformaciones (Demo)
Animaciones (Demo)
Tipografas (Cufn)
FRONTDAYS
HTML5: Novedades
Nuevos elementos
video un mtodo nico para insertar video en la web.
FRONTDAYS
HTML5: Novedades
Video - atributos
<video src="http://www.test.com/video.wmv">
your browser does not support the video tag
</video>
Atributos
! poster
! autobufer
! autoplay
! loop
! controls
FRONTDAYS
HTML5: Novedades
Video - formato / codecs
! Ogg Theora (Chrome, Firefox, Opera)
! H.264 (Chrome, Safari)
FRONTDAYS
HTML5: Novedades
Video - soporte
Soportado por las ltimas versiones de casi todos los
navegadores, excepto IE
FRONTDAYS
HTML5: Novedades
Video - degradacin grcil
<video controls>
<source src="zombie.ogg" type="video/ogg"/>
<source src="zombie.mp4" type="video/mp4"/>
<embed src="http://blip.tv/play/AYGLzBmU8hw"
type="application/x-shockwave-flash"
width="500" height="396"
allowscriptaccess="always"
allowfullscreen="true"/>
</video>
FRONTDAYS
HTML5: Novedades
Nuevos elementos
audio un mtodo nico para insertar audio en la web.
FRONTDAYS
HTML5: Novedades
Audio - atributos
<audio src="http://www.test.com/video.wmv" controls></audio>
Atributos
! autobufer
! autoplay
! loop
! controls
FRONTDAYS
HTML5: Novedades
Audio - demo
HTML5 Audio player
FRONTDAYS
HTML5: Novedades
Audio - soporte
Soportado por las ltimas versiones de casi todos los
navegadores, excepto IE
FRONTDAYS
HTML5: Novedades
Nuevos reglas para el cdigo
En HTML4 / XHTML1:
<li>
<p><a href="http://www.google.com">Ir a google.com</a></p>
<a href="http://www.google.com"><img src="" alt="logo de
Google" /></a>
</li>
FRONTDAYS
HTML5: Novedades
Nuevos reglas para el cdigo
En HTML5:
<li>
<a href="http://www.google.com">
<p>Ir a google.com</p>
<img src="" alt="logo de Google" />
</a>
</li>
FRONTDAYS
HTML5: Novedades
Elementos que desaparecen
basefont
big
center
font
s
strike
tt
u
frame
frameset
noframes
acronym
applet
isindex
dir
FRONTDAYS
HTML5: Novedades
Forms
Opera 10 demo
FRONTDAYS
HTML 5
APIs
FRONTDAYS
FRONTDAYS
HTML5: APIs
APIs en navegadores
!
getElementsByClassName
!
querySelector
!
Almacenamiento de datos en el cliente, por sesin y persistente
!
Mensajes entre documentos
!
Drag-and-drop
FRONTDAYS
HTML5: APIs
getElementsByClassName(abrir)
<li id="uno">
<p>Link 1</p>
<a href="#" class="abrir">Abrir link 1</a>
</li>
<li id="dos">
<p>Link 2</p>
</li>
<li id="tres">
<p>Link 3</p>
</li>
FRONTDAYS
HTML5: APIs
querySelector(#dos .abrir)
<li id="uno">
<p>Link 1</p>
</li>
<li id="dos">
<p>Link 2</p>
</li>
<li id="tres">
<p>Link 3</p>
</li>
FRONTDAYS
HTML5: APIs
Almacenamiento de datos en el cliente, por sesin y persistente
! Aplicaciones web ofine
! Menor latencia
! Mejor rendimiento
! Mayor privacidad
! Safari Notes demo
FRONTDAYS
HTML5: APIs
Mensajes entre documentos
! Cross-domain
! Sin necesidad de conguracin
! postMessage()
! John Resigs messaging demo
FRONTDAYS
HTML5: APIs
Drag-and-drop
! Drag and drop nativo del sistema
! Arrastrar objetos al navegador y entre ventanas del navegador
! Drag-and-drop demo
! 280 slides video demo
FRONTDAYS
HTML5: Ejercicio
Estructura
FRONTDAYS
HTML5: Ejercicio
HTML4
FRONTDAYS
HTML5: Ejercicio
HTML5
FRONTDAYS
CSS 3
FRONTDAYS
FRONTDAYS
!
Historia
!
Selectores
!
Mdulos y nuevas propiedades
!
Ejercicio prctico: aplicacin de CSS3 a una pgina
Segunda parte: CSS3
FRONTDAYS
CSS 3
Historia de CSS 3
FRONTDAYS
FRONTDAYS
Historia de CSS3
CSS1
1996
FRONTDAYS
Historia de CSS3
CSS2
1998
FRONTDAYS
Historia de CSS3
CSS3
2000 (WD)
FRONTDAYS
Historia de CSS3
CSS2.1
2002 (WD)
FRONTDAYS
CSS3: Principios
Compatibilidad
Hacia delante y hacia atrs
FRONTDAYS
CSS3: Principios
Complementariedad
Cambiar CSS si cambiar HTML
FRONTDAYS
CSS3: Principios
Independencia
De plataforma y de dispositivo
FRONTDAYS
CSS3: Principios
Simplicidad, exibilidad, riqueza
Sencillo y potente
FRONTDAYS
CSS3: Principios
Accesibilidad
Posibilitar acceso universal
FRONTDAYS
CSS 3
Selectores
FRONTDAYS
FRONTDAYS
CSS3: Selectores
Selectores en CSS1
!
de elemento: h1 { color: red; }
!
de clase: h1.alert { color: red; }
!
de ID: #alert { color: red; }
!
descendientes y contextuales: h1 em { color: red; }
!
pseudo-clases: a:link, a:visited, a:active, :rst-line, :rst-letter
!
comodn: div * p
FRONTDAYS
CSS3: Selectores
Selectores en CSS2
!
selector universal (*): blockquote * { ... }
!
de atributo: a[href="http://www.google.com/"] { ... }
!
ms pseudo-clases: :rst-child, :hover, :focus, :active, :lang,
:before, :after
!
de hijos: div > p { ... }
!
de hermanos: h1 + h2 { ... }
FRONTDAYS
CSS3: Selectores
Selectores en CSS1 y CSS2
!
body > ol > li p
FRONTDAYS
CSS3: Selectores
!
body > ol > li p - Selecciona cualquier elemento p que es
descendiente de un elemento li que es hijo de un elemento ol que es
hijo de un elemento body.
FRONTDAYS
CSS3: Selectores
!
p > * > em
FRONTDAYS
CSS3: Selectores
!
p > * > em - Selecciona cualquier elemento em que es hijo de
cualquier elemento que es hijo de un elemento p.
FRONTDAYS
CSS3: Selectores
!
a[title~="Mail"]
FRONTDAYS
CSS3: Selectores
!
a[title~="Mail"] - Selecciona cualquier elemento a con un atributo
title que contiene la palabra Mail.
FRONTDAYS
CSS3: Selectores
Selectores en CSS3 I
!
nuevos selectores de atributo:
comienzo del atributo
a[href^="ftp:"] { ... }
nal del atributo
a[href$=".edu"] { ... }
cualquier cadena contenido
img[src*="photos"] { ... }
FRONTDAYS
CSS3: Selectores
Selectores en CSS3 II
!
nuevas pseudo-clases:
:enabled, :disabled, :checked
Permiten cambiar la apariencia de los inputs de formulario,
segn su estado. No soportadas en IE7 ni en IE8
FRONTDAYS
CSS 3
Mdulos
FRONTDAYS
FRONTDAYS
CSS3: Mdulos
Algunos otros mdulos de CSS3
!
Colores
!
Modelo de caja
!
Fondos y bordes
!
Tipografa y efectos de texto
!
Layout multicolumna
!
Animaciones y transiciones
FRONTDAYS
CSS3: Colores
Colores en CSS2
!
Hexadecimal - #RRGGBB
!
Hexadecimal, shorthand - #RGB
!
RGB- rgb(red, green, blue)
!
Nombres de colores - white, red, black, etc.
FRONTDAYS
CSS3: Colores
Nuevos formatos de colores en CSS3
!
HLS - hsl(hue, saturation, lightness)
!
CMYK - cmyk(cyan, magenta, yellow, black)
!
HLSA - hlsa(hue, saturation, lightness, alpha)
!
RGBA - rgba(red, green, blue, alpha)
FRONTDAYS
CSS3: Colores
Formato HLS
!
Intensidad, luz y saturacin
!
Sencillo de manipular
!
Existente en programas de edicin de imgenes, como Adobe
Photoshop
!
Adecuado para crear paletas de colores: slo tienes que elegir el
color bsico y no sus variantes claras/oscuras
FRONTDAYS
CSS3: Colores
Formato CMYK
!
Cyan, magenta, amarillo y negro
!
Formato muy bien conocido por los diseadores
!
Nos permite denir cmo nuestros colores sern impresos
FRONTDAYS
CSS3: Colores
Formatos RGBA y HSLA
!
Aaden un cuarto parmetro: alpha
!
El canal alpha dene la transparencia del color, va de 0
(totalmente transparente) a 1 (totalmente opaco)
!
La adicin del canal alpha ofrece muchas nuevas posibilidades a
los diseadores visuales.
FRONTDAYS
CSS3: Colores
Si no hay soporte RGBA
background-color: rgb(0%, 0%, 100%);
background-color: rgba(0%, 0%, 100%, 0.5);
FRONTDAYS
CSS3: Colores
RGBA y HSLA vs OPACITY
!
Opacity es una propiedad de CSS3 que modica la transparencia
de todo el elemento. Por ejemplo un prrafo con opacity: 0.5
tendra su fondo semitrans, pero tambin su contenido (texto)
!
El canal alpha nos permite modicar la transparencia del color de
fondo del elemento, con lo que el contenido del elemento no se
vera afectado.
FRONTDAYS
CSS3: Colores
Soporte en navegadores
!
Las ltimas versiones de Safari, Opera, Firefox y Chrome
soportan HSL, HSLA y RGBA
!
IE no soporta ninguno de los nuevos formatos
!
Ningn navegador soporta an CMYK
FRONTDAYS
CSS3: Modelo de caja
Modelo de caja
!
IE box model
!
W3C box model
!
Nueva propiedad: box-sizing: content-box / border-box
Soportado en FF 1.1, Safari 3, IE 8, Opera 9.5
FRONTDAYS
CSS3: Fondos y bordes
Fondos y bordes
!
Degradados
!
Bordes redondeados
!
Sombras
!
Imgenes de borde
!
Imgenes de fondo
FRONTDAYS
Degradados
background: -webkit-gradient(linear, 0 0, 100% 100%,
from(#d0d0d0), to(#ffffff));
background: -moz-linear-gradient(20% center, 30% center,
from(blue), to (yellow)) no-repeat;
Soportado por Safari y firefox.
FRONTDAYS
Bordes redondeados
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
FRONTDAYS
Sombras (de caja)
box-shadow: 10px 10px 5px #888;
FRONTDAYS
Imgenes de borde
border-image:
border-corner-image:
FRONTDAYS
Imgenes de fondo
Tamao
-o-background-size, -webkit-background-size, -khtml-background-size,
-moz-background-size
Mltiples imgenes de fondo
background: url(img1.gif) top left no-repeat, url(img2.gif) bottom
left no-repeat;
Soportado por Safari
FRONTDAYS
CSS3: Layout multicolumna
Layout multicolumna
!
Nmero de columnas
!
Separacn entre columnas
!
Bordes separadores
-moz-column-count
-moz-column-width
-moz-column-gap
-webkit-column-count
-webkit-column-width
-webkit-column-gap
FRONTDAYS
CSS3: Tipografa y efectos de texto
Tipografa y efectos de texto
!
Sombras en texto
!
Uso de tipografas (@font-face)
Muchas gracias por venir!
FRONTDAYS
www.frontdays.com
Los mejores cursos en desarrollo frontend
impartidos por los mejores profesionales

html5 css3 090924042836 Phpapp01

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

html5 css3 090924042836 Phpapp01

Cargado por

Copyright:

Formatos disponibles

FRONTDAYS

También podría gustarte