HTML Tour - Buenas prácticas en el desarrollo web
31
Buenas prácticas en el desarrollo web
-
Upload
plain-concepts -
Category
Technology
-
view
2.925 -
download
0
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 of HTML Tour - Buenas prácticas en el desarrollo web
Buenas prácticas en el desarrollo web
CSS best practices
Usar un reset.css
<link> vs @import
CSS Sprites
CSS best practices
Usar abreviaciones
CSS best practices
Combinar selectores
CSS best practices
Selectores, de derecha a izquierda
CSS best practices
Entendiendo la prioridad de los estilos en CSS: Specificity Inheritance and the Cascade
Specificity
#sidebar ul li a.myclass:hover {}
inline IDs classes elements
& pseudo elements& pseudo classes& attributes
21 30
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
Y ahora?
LESS extends CSS with dynamic behavior
Menos código
Más rápido de escribir
Más fácil de mantener
Más reusable
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.
OOCSS
Separate structure and skin
Identifica los patrones visuales y crea ‘skins’
OOCSS
Separate container and content
Un objeto debe verse igual sin importar dóndeeste colocado
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
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
En javascript también!
Javascript the good parts
JSLint
JSHint
JSHint en Visual Studio
Web essentials
Testing javascript
También se puede
Testing javascript
También se puede
También se debe!
Testing javascript
JasmineJSUnitMocha…
Jasmine en Visual Studio
Chutzpah
Minify and bundle
Asp.net MVC4 Minify’s and bundlesChirpy…
Javascript: the worst part
Nuestra ignorancia
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
