Post on 13-Jan-2015
description
LA WEB SE MUEVE:CONOCE HTML5 & CSS3
Javier Usobiaga BCNVisualSound 2011
¡HOLA!
@htmlboy
@martuishere
Swwweet.com@savetheusers
LA WEB SE
MUEVE
FUTURO
CSS
3
http://swwweet.com/presentaciones/viajartiempo
5HTML5
¿QUÉ ES HTML5?
✓Nuevos elementos, más semánticos
✓Un conjunto de APIs
✓Retrocompatible
✓Una nueva filosofía
SÍpero...
¿SE PUEDE USAR YA?
✓Hay que preocuparse de la retrocompatibilidad
✓Algunas tecnologías no están preparadas aún
✓El contenido tiene que ser siempre accesible
✓Se pueden complementar con javascript (polyfills)
¿SE PUEDE USAR YA?
!DOCTYPE
XHTML 1.1:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5:
<!DOCTYPE html>
CODIFICACIÓN
XHTML 1.1:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5:
<meta charset=utf-8>
LINK / SCRIPT
XHTML 1.1:
<link rel="stylesheet" type="text/css" href="style-original.css"/>
<script type="text/javascript" src="jquery.js"></script>
HTML5:
<link rel=stylesheet href=styles.css>
<script src=jquery.js></script>
NUEVA ESTRUCTURA
<header>
header
header
NUEVA ESTRUCTURA
<nav>
nav
nav
NUEVA ESTRUCTURA
<article>
article article article
NUEVA ESTRUCTURA
<section>
section
section
NUEVA ESTRUCTURA
<aside>
aside
NUEVA ESTRUCTURA
<footer>
footer
NUEVA ESTRUCTURA
<figure>
FIGURE/FIGCAPTION
<figure> <img src=foto.jpg alt=""> <figcaption> Tortugas </figcaption></figure>
figure figure
NUEVOS ELEMENTOS
<video><audio>
video
VIDEO
<video src="video.???" > </video>
VIDEO
GUERRA DE FORMATOS
Theora + Ogg 3.5+ 5.0+ 10.5+
H264 + MP4 9.0+ 3.0+ 5.0+ 3.0+ 2.0+
WebM 9.0+ 4.0+ 5.0+ 10.6+
VIDEO
<video controls> <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv" type="video/ogg" > <p> Tu navegador no sorporta vídeo. </p></video>
VIDEO
<video controls> <source src="vid.mp4" type="video/mp4" > <source src="vid.ogv" type="video/ogg" > <object type="application/x-shockwave-flash" data="player.swf?file=vid.mp4"> <param name="vid" value="player.swf?file=vid.mp4"> <a href="vid.mp4">Descargar vídeo</a> </object> </video>
SOPORTE HTML5
SOPORTE HTML5
*
* última beta
SOPORTE HTML5
HTML5 SHIV (HTML5 para navegadores antiguos)
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->
CSS33
¿QUÉ ES CSS3?
✓Nuevas posibilidades de decoración
✓Menos markup
✓Menos dependencia de javascript
✓Mayor control
SÍpero...
¿SE PUEDE USAR YA?
✓No hay que devaluar la experiencia del usuario
✓Cuidado con los elementos críticos: branding, estructura...
✓Pueden ser un premio
✓Hay que utilizar “vendor prefixes”: -moz, -webkit, -ms, -o
¿SE PUEDE USAR YA?
¿SE PUEDE USAR YA?
¿LAS PÁGINAS WEB TIENEN QUE EXPERIMENTARSE EXACTAMENTE
IGUAL EN TODOS LOS NAVEGADORES?
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
BACKGROUND
MULTIPLE BACKGROUNDS:
html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top; }
multiplebackground
multiplebackground
RGBa Y HSLa
RGBa = RGB + alpha#foo{ background: rgba(0, 0, 0, .5); }
#foo{ background: rgba(255, 0, 0, .7); }
RGBa Y HSLa
HSLa = HSL + alpha#foo{ background: hsla(324, 100%, 75%, .7); }
#foo{ background: hsla(324, 100%, 25%, .7); }
RGBa
RGBaRGBa
RGBa
RGBa Y HSLa
body{ background: rgba(241, 238, 203, 0.7);}
html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top; }
rgba(241, 238, 203, .7)
rgba(5, 129, 121, .8)
rgba(173, 165, 53, .8)
@FONT-FACEPERMITE INCORPORAR TIPOGRAFÍAS NO INSTALADAS EN EL SISTEMA OPERATIVO
@font-face { font-family: 'Lobster'; src: url('Lobster.ttf') format('truetype'); font-weight: normal; font-style: normal;}
L!"#$r
@FONT-FACEPERMITE INCORPORAR TIPOGRAFÍAS NO INSTALADAS EN EL SISTEMA OPERATIVO @font-face { font-family: 'Lobster'; src: url('Lobster.eot?') format('eot'), url('Lobster.woff') format('woff'), url('Lobster.ttf') format('truetype'), url('Lobster.svg#webfont1MhCsZSr') format ('svg'); font-weight: normal; font-style: normal;}
L!"#$r
@font-face
@font-face
@FONT-FACEGoogle Font Directoryhttp://code.google.com/webfonts
Fontsquirrelhttp://www.fontsquirrel.com/
Typekithttp://typekit.com/
MyFontshttp://new.myfonts.com/info/webfonts/
TEXT-SHADOWh1{ text-shadow: 3px 3px 5px black; }
h1{ text-shadow: 5px 5px 0px blue; }
Doc Brown
Marty McFly
TEXT-SHADOWh1{ text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -60px 60px #CD4606, 0 -80px 70px #973716, 10px -90px 80px #451B0E; }
text-shadow
text-shadow
text-shadow
BOX SHADOW
#foo{ box-shadow: 5px 5px 10px black; }
#foo{ box-shadow: inset 3px 3px 10px black; }
BOX SHADOW#foo{ box-shadow: : 0 1px 0 #e87754, 0 2px 0 #bd4019, 0 3px 0 #ae3b17, 0 5px 0 #9f3615, 0 7px 0 #903113, 0 8px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);}
box-shadow
box-shadow
box-shadow
BORDER RADIUS
#foo{ border-radius: 10px; }
#foo{ border-radius: 50px 0 50px 0; }
BORDER RADIUS
#foo{ border-radius: 9999px; }
border-radius
border-radius
border-radius
TRANSFORMS
#foo{ transform: rotate(45deg); }
#foo{ transform: scale(0.5); }
TRANSFORMS
#foo{ transform: skew(45deg); }
#foo{ transform: translate(20px,-20px); }
transform
TRANSITIONS
#foo{ transition: 1.5s opacity ease-in-out; }
TRANSITIONS
nav li{ width: 160px; transition: .3s width linear; }
nav li:hover{ width: 220px;}
TRANSITIONS
nav li span{ transition: .6s transform ease-in-out; }
nav li:hover span{ transform: rotate(360deg); }
SOPORTE CSS3
IE8
RECURSOS
http://swwweet.com/presentaciones/html5hoy
RECURSOS
CURSO CSS3 EN PUNT MULTIMÈDIA
15/2/2011 - 18/2/201119:30 - 21:30
39,50€ / 30,40€
¡GRACIAS!
CRÉDITOS
http://www.flickr.com/photos/kingdafy/500260659
http://www.flickr.com/photos/mikeq314/4966121385
http://www.flickr.com/photos/hoyvinmayvin/4310321648
http://www.flickr.com/photos/hoyvinmayvin/4119535890
http://www.flickr.com/photos/hoyvinmayvin/4065429187/