html tour - buenas prácticas en el desarrollo web
DESCRIPTION
El objetivo de esta sesión es mejorarle la vida al desarrollador. Mediante herramientas y buenas prácticas veremos cómo cometer menos errores y como testear javascript, como ser mucho más productivos con nuestras css’s y evitar el caos mediante OOCSS y less. Para finalizar veremos el proceso de subida a producción de nuestra aplicación.TRANSCRIPT
![Page 1: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/1.jpg)
Buenas prácticas en el desarrollo web
![Page 3: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/3.jpg)
![Page 4: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/4.jpg)
CSS best practices
Usar un reset.css
<link> vs @import
CSS Sprites
![Page 5: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/5.jpg)
CSS best practices
Usar abreviaciones
![Page 6: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/6.jpg)
CSS best practices
Combinar selectores
![Page 7: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/7.jpg)
CSS best practices
Selectores, de derecha a izquierda
![Page 8: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/8.jpg)
CSS best practices
Entendiendo la prioridad de los estilos en CSS: Specificity Inheritance and the Cascade
![Page 9: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/9.jpg)
Specificity
#sidebar ul li a.myclass:hover {}
inline IDs classes elements
& pseudo elements& pseudo classes& attributes
21 30
![Page 10: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/10.jpg)
Inheritance
Los elementos heredan de su contenedor padre
No todas las propiedades son heredablesPero se puede declarar explicitamente que una propiedad herede los estilos de su padre
![Page 11: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/11.jpg)
Y ahora?
![Page 12: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/12.jpg)
LESS extends CSS with dynamic behavior
Menos código
Más rápido de escribir
Más fácil de mantener
Más reusable
![Page 13: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/13.jpg)
![Page 14: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/14.jpg)
OOCSS
What’s a CSS Object?
Basically, a CSS “object” is a repeating visual pattern, which can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. Once created, an object can then be reused throughout a site.
![Page 15: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/15.jpg)
OOCSS
Separate structure and skin
Identifica los patrones visuales y crea ‘skins’
![Page 16: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/16.jpg)
OOCSS
Separate container and content
Un objeto debe verse igual sin importar dóndeeste colocado
![Page 17: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/17.jpg)
OOCSS
Evita los selectores de descendencia -> .sidebar h3 {}
Evita los IDs en los selectores
Evita agregar clases a los elementos -> h1.category {}
En la mayoria de casos, evita el uso de !important
Usa CSS Lint para analizar tus estilos
![Page 18: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/18.jpg)
Referencias
http://necolas.github.com/normalize.css/http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/http://csswizardry.com/2011/09/writing-efficient-css-selectors/http://developer.yahoo.com/performance/rules.htmlhttp://lesscss.org/http://lesshat.com/http://lesselements.com/http://clearleft.github.com/clearless/https://github.com/stubbornella/oocss/wiki
![Page 19: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/19.jpg)
En javascript también!
![Page 20: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/20.jpg)
Javascript the good parts
![Page 21: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/21.jpg)
JSLint
![Page 22: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/22.jpg)
JSHint
![Page 23: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/23.jpg)
JSHint en Visual Studio
Web essentials
![Page 24: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/24.jpg)
Testing javascript
También se puede
![Page 25: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/25.jpg)
Testing javascript
También se puede
También se debe!
![Page 26: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/26.jpg)
Testing javascript
JasmineJSUnitMocha…
![Page 27: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/27.jpg)
Jasmine en Visual Studio
Chutzpah
![Page 28: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/28.jpg)
Minify and bundle
Asp.net MVC4 Minify’s and bundlesChirpy…
![Page 29: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/29.jpg)
Javascript: the worst part
Nuestra ignorancia
![Page 30: HTML Tour - Buenas prácticas en el desarrollo web](https://reader035.vdocuments.co/reader035/viewer/2022062220/557b55d0d8b42a90078b49c8/html5/thumbnails/30.jpg)
References
JSHint http://www.jshint.com/Web essentials http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6Chutzpa test runner http://visualstudiogallery.msdn.microsoft.com/71a4e9bd-f660-448f-bd92-f5a65d39b7f0Chutzpa test adapter http://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1feJasmine http://pivotal.github.com/jasmine/Chirpy http://chirpy.codeplex.com/http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification