conoce html5 y css3
DESCRIPTION
Presentación de Javier Usobiaga en el Barcelona Visual Sound 2011.TRANSCRIPT
![Page 1: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/1.jpg)
LA WEB SE MUEVE:CONOCE HTML5 & CSS3
Javier Usobiaga BCNVisualSound 2011
![Page 2: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/2.jpg)
¡HOLA!
![Page 3: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/3.jpg)
@htmlboy
![Page 4: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/4.jpg)
@martuishere
![Page 5: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/5.jpg)
Swwweet.com@savetheusers
![Page 6: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/6.jpg)
LA WEB SE
MUEVE
![Page 7: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/7.jpg)
FUTURO
![Page 8: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/8.jpg)
![Page 9: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/9.jpg)
CSS
3
![Page 10: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/10.jpg)
![Page 11: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/11.jpg)
![Page 12: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/12.jpg)
http://swwweet.com/presentaciones/viajartiempo
![Page 13: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/13.jpg)
5HTML5
![Page 14: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/14.jpg)
¿QUÉ ES HTML5?
✓Nuevos elementos, más semánticos
✓Un conjunto de APIs
✓Retrocompatible
✓Una nueva filosofía
![Page 15: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/15.jpg)
![Page 16: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/16.jpg)
SÍpero...
¿SE PUEDE USAR YA?
![Page 17: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/17.jpg)
✓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?
![Page 18: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/18.jpg)
!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>
![Page 19: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/19.jpg)
CODIFICACIÓN
XHTML 1.1:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5:
<meta charset=utf-8>
![Page 20: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/20.jpg)
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>
![Page 21: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/21.jpg)
NUEVA ESTRUCTURA
<header>
![Page 22: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/22.jpg)
header
header
![Page 23: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/23.jpg)
NUEVA ESTRUCTURA
<nav>
![Page 24: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/24.jpg)
nav
nav
![Page 25: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/25.jpg)
NUEVA ESTRUCTURA
<article>
![Page 26: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/26.jpg)
article article article
![Page 27: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/27.jpg)
NUEVA ESTRUCTURA
<section>
![Page 28: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/28.jpg)
section
section
![Page 29: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/29.jpg)
NUEVA ESTRUCTURA
<aside>
![Page 30: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/30.jpg)
aside
![Page 31: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/31.jpg)
NUEVA ESTRUCTURA
<footer>
![Page 32: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/32.jpg)
footer
![Page 33: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/33.jpg)
NUEVA ESTRUCTURA
<figure>
![Page 34: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/34.jpg)
FIGURE/FIGCAPTION
<figure> <img src=foto.jpg alt=""> <figcaption> Tortugas </figcaption></figure>
![Page 35: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/35.jpg)
figure figure
![Page 36: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/36.jpg)
NUEVOS ELEMENTOS
<video><audio>
![Page 37: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/37.jpg)
video
![Page 38: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/38.jpg)
VIDEO
<video src="video.???" > </video>
![Page 39: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/39.jpg)
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+
![Page 40: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/40.jpg)
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>
![Page 41: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/41.jpg)
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>
![Page 42: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/42.jpg)
SOPORTE HTML5
![Page 43: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/43.jpg)
SOPORTE HTML5
*
* última beta
![Page 44: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/44.jpg)
SOPORTE HTML5
HTML5 SHIV (HTML5 para navegadores antiguos)
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script><![endif]-->
![Page 45: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/45.jpg)
CSS33
![Page 46: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/46.jpg)
¿QUÉ ES CSS3?
✓Nuevas posibilidades de decoración
✓Menos markup
✓Menos dependencia de javascript
✓Mayor control
![Page 47: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/47.jpg)
SÍpero...
¿SE PUEDE USAR YA?
![Page 48: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/48.jpg)
✓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?
![Page 49: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/49.jpg)
¿SE PUEDE USAR YA?
¿LAS PÁGINAS WEB TIENEN QUE EXPERIMENTARSE EXACTAMENTE
IGUAL EN TODOS LOS NAVEGADORES?
![Page 50: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/50.jpg)
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
![Page 51: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/51.jpg)
dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
![Page 52: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/52.jpg)
BACKGROUND
MULTIPLE BACKGROUNDS:
html{ background: url("img/arena.png") no-repeat 70% 20%, url("img/texture.png") repeat left top; }
![Page 53: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/53.jpg)
multiplebackground
multiplebackground
![Page 54: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/54.jpg)
RGBa Y HSLa
RGBa = RGB + alpha#foo{ background: rgba(0, 0, 0, .5); }
#foo{ background: rgba(255, 0, 0, .7); }
![Page 55: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/55.jpg)
RGBa Y HSLa
HSLa = HSL + alpha#foo{ background: hsla(324, 100%, 75%, .7); }
#foo{ background: hsla(324, 100%, 25%, .7); }
![Page 56: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/56.jpg)
RGBa
RGBaRGBa
RGBa
![Page 57: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/57.jpg)
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; }
![Page 58: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/58.jpg)
rgba(241, 238, 203, .7)
![Page 59: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/59.jpg)
rgba(5, 129, 121, .8)
![Page 60: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/60.jpg)
rgba(173, 165, 53, .8)
![Page 61: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/61.jpg)
@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
![Page 62: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/62.jpg)
@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
![Page 63: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/63.jpg)
@font-face
@font-face
![Page 64: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/64.jpg)
@FONT-FACEGoogle Font Directoryhttp://code.google.com/webfonts
Fontsquirrelhttp://www.fontsquirrel.com/
Typekithttp://typekit.com/
MyFontshttp://new.myfonts.com/info/webfonts/
![Page 65: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/65.jpg)
TEXT-SHADOWh1{ text-shadow: 3px 3px 5px black; }
h1{ text-shadow: 5px 5px 0px blue; }
Doc Brown
Marty McFly
![Page 66: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/66.jpg)
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; }
![Page 67: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/67.jpg)
text-shadow
text-shadow
text-shadow
![Page 68: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/68.jpg)
BOX SHADOW
#foo{ box-shadow: 5px 5px 10px black; }
#foo{ box-shadow: inset 3px 3px 10px black; }
![Page 69: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/69.jpg)
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);}
![Page 70: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/70.jpg)
box-shadow
box-shadow
box-shadow
![Page 71: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/71.jpg)
BORDER RADIUS
#foo{ border-radius: 10px; }
#foo{ border-radius: 50px 0 50px 0; }
![Page 72: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/72.jpg)
BORDER RADIUS
#foo{ border-radius: 9999px; }
![Page 73: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/73.jpg)
border-radius
border-radius
border-radius
![Page 74: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/74.jpg)
TRANSFORMS
#foo{ transform: rotate(45deg); }
#foo{ transform: scale(0.5); }
![Page 75: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/75.jpg)
TRANSFORMS
#foo{ transform: skew(45deg); }
#foo{ transform: translate(20px,-20px); }
![Page 76: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/76.jpg)
transform
![Page 77: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/77.jpg)
TRANSITIONS
#foo{ transition: 1.5s opacity ease-in-out; }
![Page 78: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/78.jpg)
![Page 79: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/79.jpg)
TRANSITIONS
nav li{ width: 160px; transition: .3s width linear; }
nav li:hover{ width: 220px;}
![Page 80: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/80.jpg)
![Page 81: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/81.jpg)
TRANSITIONS
nav li span{ transition: .6s transform ease-in-out; }
nav li:hover span{ transform: rotate(360deg); }
![Page 82: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/82.jpg)
![Page 83: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/83.jpg)
SOPORTE CSS3
![Page 84: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/84.jpg)
IE8
![Page 86: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/86.jpg)
RECURSOS
http://swwweet.com/presentaciones/html5hoy
![Page 87: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/87.jpg)
RECURSOS
CURSO CSS3 EN PUNT MULTIMÈDIA
15/2/2011 - 18/2/201119:30 - 21:30
39,50€ / 30,40€
![Page 88: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/88.jpg)
¡GRACIAS!
![Page 89: Conoce HTML5 y CSS3](https://reader034.vdocuments.net/reader034/viewer/2022042504/54b412714a79594a128b464b/html5/thumbnails/89.jpg)
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/