Año Nuevo, Herramientas Nuevas
-
Upload
jose-leiva -
Category
Design
-
view
108 -
download
2
description
Transcript of Año Nuevo, Herramientas Nuevas
![Page 1: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/1.jpg)
José Leiva - @leivajd
AÑO NUEVO, HERRAMIENTAS NUEVASDRUPALEADA ENERO 2012
![Page 2: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/2.jpg)
2011, CSS3, HTML5, RWD,WebFonts, y más
![Page 3: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/3.jpg)
![Page 4: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/4.jpg)
![Page 5: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/5.jpg)
CSS3 magic!1!
![Page 6: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/6.jpg)
![Page 7: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/7.jpg)
![Page 8: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/8.jpg)
![Page 9: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/9.jpg)
![Page 10: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/10.jpg)
![Page 11: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/11.jpg)
![Page 12: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/12.jpg)
![Page 13: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/13.jpg)
![Page 14: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/14.jpg)
Flash killer!2!
![Page 15: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/15.jpg)
http://code.google.com/p/html5shim/
![Page 16: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/16.jpg)
![Page 17: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/17.jpg)
![Page 18: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/18.jpg)
![Page 19: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/19.jpg)
![Page 20: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/20.jpg)
![Page 21: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/21.jpg)
Web fonts3!
![Page 22: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/22.jpg)
http://www.webtypography.net/
![Page 23: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/23.jpg)
![Page 24: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/24.jpg)
![Page 25: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/25.jpg)
![Page 26: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/26.jpg)
Salvadoras!4!
![Page 27: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/27.jpg)
![Page 28: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/28.jpg)
![Page 29: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/29.jpg)
![Page 30: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/30.jpg)
![Page 31: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/31.jpg)
![Page 32: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/32.jpg)
![Page 33: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/33.jpg)
![Page 34: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/34.jpg)
![Page 35: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/35.jpg)
RWD5!
![Page 36: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/36.jpg)
![Page 37: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/37.jpg)
![Page 38: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/38.jpg)
1. Fluid Grid2. Media Queries3. Imágenes, videos, fonts, flexibles.
![Page 39: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/39.jpg)
.col1 { width: 6.25%;} /*60 / 960*/
.col2 { width: 14.58333333333333%;} /*140 / 960*/
.col3 { width: 22.91666666666667%; } /*220 / 960*/
![Page 40: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/40.jpg)
@media screen and (max-width: 600px) { .class { background: transparent; }}
*Aplica si es menor a 600px.
![Page 41: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/41.jpg)
@media only screen and (min-width: 768px) {
}
*Aplica si es mayor a 768px.
![Page 42: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/42.jpg)
@media screen and (min-width: 600px) and (max-width: 900px) { .column { float: none; }}*Aplica si es entre 600px - 900px.
![Page 43: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/43.jpg)
![Page 44: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/44.jpg)
img,embed,object,video { max-width: 100%;}
![Page 45: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/45.jpg)
h2 { margin-bottom: .75em; font-size : 2em; /* 36 / 16 = 2 */ line-height : 1.2; }
![Page 46: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/46.jpg)
![Page 47: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/47.jpg)
Mobile First
![Page 48: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/48.jpg)
![Page 49: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/49.jpg)
![Page 50: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/50.jpg)
@media only screen and (min-width: 768px) {
}
*Aplica si es mayor a 768px.
![Page 51: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/51.jpg)
Frameworks6!
![Page 52: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/52.jpg)
![Page 53: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/53.jpg)
![Page 54: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/54.jpg)
![Page 55: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/55.jpg)
![Page 56: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/56.jpg)
![Page 57: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/57.jpg)
![Page 58: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/58.jpg)
Qué tal uno propio?
![Page 59: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/59.jpg)
![Page 60: Año Nuevo, Herramientas Nuevas](https://reader030.fdocuments.mx/reader030/viewer/2022020306/54c749a24a7959723e8b45f8/html5/thumbnails/60.jpg)