HTML Tour - Buenas prácticas en el desarrollo web
Upcoming SlideShare
Loading in...5
×
 

HTML Tour - Buenas prácticas en el desarrollo web

on

  • 3,222 views

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 ...

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.

Statistics

Views

Total Views
3,222
Views on SlideShare
1,028
Embed Views
2,194

Actions

Likes
2
Downloads
44
Comments
0

7 Embeds 2,194

http://www.plainconcepts.com 1916
http://plainconcepts.com 100
http://html5spain.wordpress.com 80
http://alicialas3.blogspot.com.es 74
http://localhost 20
http://alicialas3.blogspot.com 3
http://alicialas3.blogspot.com.ar 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Los CSS también son importantes,- usaunanomenclaturadefinida- estructuratusficheros- manténlascosasorganizadas
  • Put Scripts at the BottomThe problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specificationsuggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.In some situations it's not easy to move scripts to the bottom. If, for example, the script usesdocument.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
  • Abreviaturas
  • Keeping CSS selectors short helps with a lot of things:Increases selector efficiencyReduces location dependencyIncreases portabilityReduces chances of selector breakageDecreases specificityCan make code more forgiving
  • Element, Pseudo Element: d = 1 Class, Pseudo class, Attribute: c = 1Id: b = 1 –> (0,1,0,0)Inline Style: a = 1
  • Element, Pseudo Element: d = 1 Class, Pseudo class, Attribute: c = 1Id: b = 1 –> (0,1,0,0)Inline Style: a = 1
  • Origin refers to the source of the declaration (author styles, user styles, browser defaults) and weight refers to the importance of the declaration. (author has more weight than user which has more weight than default. !importance has more weight than normal declarations)
  • Herramienta de pre-procesado.LESS ElementsLESS HatClearlessTwitterBootstrap
  • Herramienta de pre-procesado
  • Most every design is going to have repeatable visual elements. It may be consistent background colors or border styles that elements share or it may be something else, but the patterns will be present.
  • Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific  with .myObject h2 {...}, create and apply a class that describes the  in question, like.This gives you the assurance that: (1) all unclassed s will look the same; (2) all elements with the category class (called a mixin) will look the same; and 3) you won’t need to create an override style for the case when you actually do want .myObject h2 to look like the normal 

HTML Tour - Buenas prácticas en el desarrollo web HTML Tour - Buenas prácticas en el desarrollo web Presentation Transcript

  • Buenas prácticas en el desarrollo web
  • Speakers Alfredo Fernández David Garcia afernandez@plainconcepts.c dgarcia@plainconcepts.com om @jotadeg @afernandez_l
  • CSS best practices Usar un reset.css <link> vs @import CSS Sprites
  • CSS best practices
  • CSS best practices
  • CSS best practices
  • CSS best practices Entendiendo la prioridad de los estilos en CSS:  Specificity  Inheritance  and the Cascade
  • Specificity #sidebar ul li a.myclass:hover {} 0 1 2 3
  • Inheritance Los elementos heredan de su contenedor padre No todas las propiedades son heredables Pero se puede declarar explicitamente que una propiedad herede los estilos de su padre
  • Y ahora?
  • LESS extends CSS with dynamic behavior
  • OOCSS What’s a CSS Object?Basically, a CSS “object” is a repeating visual pattern,which can be abstracted into an independent snippetof HTML, CSS, and possibly JavaScript.Once created, an object can then be reusedthroughout a site.
  • OOCSS
  • OOCSSUn objeto debe verse igual sin importar dóndeeste colocado
  • OOCSS
  • 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.html http://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
  • Testing javascript
  • Testing javascript
  • Testing javascript
  • Jasmine en Visual Studio
  • Minify and bundle
  • Javascript: the worst part
  • References JSHint http://www.jshint.com/ Web essentials http://visualstudiogallery.msdn.microsoft.co Chutzpa test runner http://visualstudiogallery.msdn.microso Chutzpa test adapter http://visualstudiogallery.msdn.micros http://pivotal.github.com/jasmine/ Chirpy http://chirpy.codeplex.com/ http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-min
  • Gracias! Alfredo Fernández Gerard López afernandez@plainconcepts.c glopez@plainconcepts.com om @gerard_lopz @afernandez_l