Le télétravail : un vrai "plus" pour les entreprises

Le télétravail : un vrai "plus" pour les entreprises: Greenworking a réalisé une vaste étude sur le télétravail et l'a remise à Eric Besson, jusqu'à présent Ministre chargé de l'Industrie, de l'Industrie et de l'Economie...

jQuery Vector Maps: Des cartes vectorielles responsives avec jquery

jQuery Vector Maps: Des cartes vectorielles responsives avec jquery: jQuery Vector Maps est un plugin jQuery permettant de créer des cartes vectorielles responsives.

Mastering CSS Gradients in Under an Hour

Mastering CSS Gradients in Under an Hour:
If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!
Have you refrained from using CSS Gradients because either you didn’t understand them, or thought the browser support for them wasn’t good enough to consider using them in your projects?
Well, it’s time to kill those 1px wide images, my friend.
If you’re just curious about how to use CSS Gradients, this is the place for you. We’ll start with the basics of syntax to very advanced effects with lots of tips and examples.
Remember, learning about CSS gradients is really important since browsers are getting better and better every day. Mobile browsers have good CSS3 support by default.
So, let’s rock!

Basic syntax

The first thing you must be aware of is browser support. For now you must keep the browser vendor prefixes AND use a custom filter for IE. So, we have at least 5 possible prefixes, each one with its own subtle variation and even multiple differences between browsers versions: Opera (presto), Firefox (gecko), Safari / Chrome (Webkit), Konqueror (KHTML), and IE (Trident), which has 2 different ways to do it (IE… go figure!).
We’ll focus on “standard” browser rules here (e.g. we won’t talk about old from() to() rules), and we’ll have a chapter on IE compatibility at the end (since its filters don’t allow all the effects we’ll see here).
This is the basic syntax:

#wd {
background: vendor-type-gradient( start / position , shape size, color 1, color2 [position] [, other colors / positions] );
/*** real example **/

background: -moz-linear-gradient( top left, red, #c10000, #ae0000 );

background: -webkit-linear-gradient( top left, red, #c10000, #ae0000 );

background: -o-linear-gradient( top left, red, #c10000, #ae0000 );

background: -khtml-linear-gradient( top left, red, #c10000, #ae0000 );

background: -ms-linear-gradient( top left, red, #c10000, #ae0000 );

background: linear-gradient( top left, red, #c10000, #ae0000 );
}

This CSS will get this result:

So, here are the items explained:

• Background: Just like you set background image or colors you’ll set gradients as a separate item
• vendor -: We can use “-o” for opera, “-moz” for Firefox, “-webkit” for safari and chrome, “-khtml” for Konqueror and “-ms” for IE
• type: Here we can use “linear” or “radial”
• start / position: This is a X/Y coordinate which tells the browser either the direction (top means that it’ll be top to bottom, and left that it’ll be left to right) or the exact start point (like 600px 300px will invert the example above because the start point will be the bottom right)
• shape: If you use radial gradient you can set it as “circle” or leave it blank so the gradient will be ellipsis-shaped
• size: If you are using radial gradients you can set where the gradient extends to. You can use: closest-side,  closest-corner, farthest-side, farthest-corner, contain, cover to set the gradient position.
• Color1: This is the first color. It’ll be the color in the start point you set above
• Colors 2,3,4..: You can add as many colors as you want and they’ll be evenly distributed in the element’s background unless you declare a position.
• Position (for colors): If you don’t want an even distribution you can add your own rules for positioning colors.

Here is an example making use of color positions:

#wd {

background: -moz-linear-gradient( top left, white, black 25% );

background: -webkit-linear-gradient( top left, white, black 25% );

background: -o-linear-gradient( top left, white, black 25% );

background: -khtml-linear-gradient( top left, white, black 25% );

background: -ms-linear-gradient( top left, white, black 25% );

background: linear-gradient( top left, white, black 25% );
}

You can see the result and an outlined area, about those 25% / 75% portions so you can have a better idea on how the browser calculates those values:

Multiple gradients

Let’s dig a little deeper and see more cool stuff you can do. You can start doing advanced stuff and playing with shape combinations to create new effects.
The syntax is pretty simple, all you’ve got to do is separate multiple declarations with commas. Notice that the “z-index” of the gradients will be reversed and the first item will be at the top.
If you set the color to transparent, you can use a background color if you want. Otherwise the color of the top element will hide all the others.
Ok, let’s play with some code now:

#wd {

background:

-moz-linear-gradient( top left, white, transparent 25% ),

-moz-linear-gradient( bottom right, white, transparent 25% ),

-moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-webkit-linear-gradient( top left, white, transparent 25% ),

-webkit-linear-gradient( bottom right, white, transparent 25% ),

-webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-o-linear-gradient( top left, white, transparent 25% ),

-o-linear-gradient( bottom right, white, transparent 25% ),

-o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-khtml-linear-gradient( top left, white, transparent 25% ),

-khtml-linear-gradient( bottom right, white, transparent 25% ),

-khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

-ms-linear-gradient( top left, white, transparent 25% ),

-ms-linear-gradient( bottom right, white, transparent 25% ),

-ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

-ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;

background:

linear-gradient( top left, white, transparent 25% ),

linear-gradient( bottom right, white, transparent 25% ),

radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),

radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )

black;            }

And this will be your final result:

Cool Effects

As you can see, gradients combinations can lead to awesome results. Here we’ll see a few practical (ok, some of them quite experimental) examples that you can use and even make them better.

Subtle lighting effect

This effect is pretty easy to use, especially for featured images. It gives a subtle elliptical shadow for your elements without additional markup, you can just include it in your images. Oh, and it works pretty well for hovers also.
Here is the CSS to achieve the effect (and also correct positioning for elements):

img {

margin: 0 -60px;

padding: 25px 60px 40px;

background: -moz-radial-gradient( center center, contain, black, white 90% );

background: -webkit-radial-gradient( center center, contain, black, white 90% );

background: -o-radial-gradient( center center, contain, black, white 90% );

background: -khtml-radial-gradient( center center, contain, black, white 90% );

background: -ms-radial-gradient( center center, contain, black, white 90% );

background: radial-gradient( center center, contain, black, white 90% );
}

And this is the effect applied to one o four images:

CSS Background Patterns

There are quite a few highly experimental CSS patterns out there, but there are a few that you can actually use, especially the ones which rely on gradients that end smoothly.
Here is an example on how to apply a subtle background pattern that you can easily integrate in your site:

body {

background:

-moz-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-webkit-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-o-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-khtml-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

-ms-radial-gradient( center center, contain, #757575, transparent ),

black;

background:

radial-gradient( center center, contain, #757575, transparent ),

black;
}

And this will be the rendered result:

It’ll Blow your mind – CSS Painting

If there’s one thing that impressed me since I started with this web stuff is CSS painting. It used to be so hard that you could need several lines of code (like hundreds or thousands) to get the simple ones.
Now with barely 10 lines and a single element you can do simple paintings. This is especially useful if you want to do CSS animations because CSS generated elements are much likely to apply CSS standard animations.
Here is the code I used to do a simple scared face to show to your IE users:

#wd {

position: relative;

width: 450px;

height: 400px;

margin: 20px auto;

background:

-moz-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-moz-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-moz-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-webkit-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-webkit-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-webkit-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-o-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-o-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-o-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-khtml-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-khtml-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-khtml-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

-ms-radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

-ms-radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

-ms-radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

background:

radial-gradient( 25% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 75% 30%, contain, black, black 4%, white 5%, white 24%, transparent 25% ),

radial-gradient( 50% 50%, contain, #e19b92, #e19b92 9%, transparent 10% ),

radial-gradient( 50% 75%, contain, black, black 24%, transparent 25% )

#f3c2bb;

border-radius: 50%;

}

#wd:after {

content: "Are you using IE??";

position: absolute;

top: 225px;

left: 315px;

padding: 5px 10px;

width: 150px;

font-family: "comic Sans MS",arial,verdana; /* I just couldn't help using comics! */

background: white;

border: 2px solid #E19B92;

border-radius: 4px 4px 4px 4px;

}

And this is the rendered result:

Compatibility notes

There are 2 important final notes on this. First is on old Webkit rules (which still in use for many old versions including mobile). They are slightly different than the ones presented here:

#wd {

background-image: -webkit-gradient(type, position, radius, xpos ypos, outer radius, from(startColor), to(endColor) [, color-stop(25%, middleColor)] );

/* example */

background-image: -webkit-gradient(radial, center center, 0, center center, 120, from(red), to(white), color-stop(10%, blue) );
}

And we have also Microsoft filters for IE. They are better explained in this Microsoft’s guide.

So, what do you think about it?

Can you think of new uses for those CSS gradients? Let us know using the comments section!

Empresas: 3 claves para ser un buen jefe productivo

Empresas: 3 claves para ser un buen jefe productivo:
Por lo general, las características básicas de un buen jefe son saber delegar trabajo, ser accesible, es conocedor de su campo de trabajo, sabe dar reconocimiento cuando el empleado los merece y puede impulsar la moral de su equipo de trabajo.

Knob - Plugin JQuery pour faire des jauges en cercles

Knob - Plugin JQuery pour faire des jauges en cercles: Knob est un plugin JQuery pour faire des jauges / chargements en forme de cercles simples et efficaces.

esoTalk - Une solution de forum alternatif en PHP/MySQL open source

esoTalk - Une solution de forum alternatif en PHP/MySQL open source: esoTalk est une plateforme de forum open source en PHP / MySQL se focalisant sur la performance et la simplicité.

How Colors Help Make Websites Successful

How Colors Help Make Websites Successful:
If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!
You might not realize how important colours are in web design. If a website is green, it might as well be blue; it doesn’t matter. And while I thought this myself for a long time, I recently came to the conclusion that the color is actually going to make a huge difference and express something different to your audience. There are psychological effects behind each color and tone, therefore I decided to tell you more about them today.

Human senses get excited about lots of stuff. One of the most effective ways to excite somebody is to project a red hue color onto the walls of their room. It’s been done before by scientists and they came with a clear conclusion. A person who lives in a red room has a higher heart rate and blood pressure than a person living in a blue room. This is because red symbolizes excitement, we all know this. There is a reason why fast food companies choose red as their main or secondary color. Good examples are Coca-Cola, McDonald’s, Burger King or Pepsi (although blue is their main color).

Colors Stimulate Senses

Colors can stimulate and excite people, increase their appetite, make them feel warm or make them feel tranquil. Red simply makes you excited according to those who study chromodynamics. Coke’s website is red – it gives you a feel of a lazy, hot summer day – just when you feel the need to drink Coke.

Image Source: StockLogos
There’s more to colors in web design than just the emotional factor. People tend to gamble more under red light conditions than under blue light. This is the main reason behind cities like Las Vegas using a lot of red lights. Colors have impact on performance. Red lights make people act quicker and feel more powerful, which is not always beneficial, while blue makes people think more before acting. There is a reason STOP signs are red – you need to act right away and stop the vehicle you drive, otherwise you are in danger.

Mixing Colors

Mixing colors is beneficial if done the right way. Mixing very complementary colors is also something people do, but it should only be done occasionally. It shouldn’t be overdone because it has a bad effect on people’s eyes. You can think of a black website with pink text. Now that’s an image I would like to get out of my head as soon as possible :).
There is a very good trick behind using complementary colors together. Drawing a thin neutral white, gray or black line around the two colored shapes will make the eyes see both colors separately. Just look at the Pepsi logo below: red and blue are separated by not only a thin layer of white, but by a quite big one. This white shape blends red and blue better then if they would be placed right on top of each other.

Image source: Pepsi

Colors and Cultures

Moreover, colors mean something else in different parts of the world. While red means luck in China, it means a lack of it in Germany. Huge corporations with lots of financial resources will use large amounts of money to study the effects different colors have on different cultures, before entering a new market. Many think it is impossible, but clients can be lost because of using the wrong colors.
And while huge corporations usually hire experts to do this research for them, the results are not always good. Every designer (and every person in general) has a tendency to like colors or combinations of colors and to use them in different situations because it’s what they personally like. I myself love red and black together, pretty obviously because I’ve been supporting Italian outfit A.C. Milan for almost ten years now. This is not such a good asset when working with colors is your way of earning a salary. It is crucially important for designers to tear all their personal favorites apart and only focus on the clients and their needs.

Colors for a Website

Picking a color for a website means much more then picking your favorite color and turning it into a layout. It means picking the right color in order to get the desired response from your audience. If you know your audience well and figured out which color works best for them, you are already halfway there in the creation process. It is also quite unlikely to pick a color that will fit every visitor of your website, therefore it is even more important to be able to determine which color and tone works best for most users you target.

Image source: 123RF Stock Photos
According to different sources, half of the people visiting a website don’t come back because of the color of the design. The first thing people need to recognize when they see your site are the brand colors. If you have multiple colors and they can’t see the most dominant, it means you should consider a redesign.

• If you have a blue color scheme, people will likely give you a better response when in a good mood. If you want a clean, white design, it’s fine too. But if you want to make it exciting, use bright red or orange here and there. White and green work great together, and if you want to be stylish and modern without using intense colors, go for white and gray. Such a combination illustrates something glamorous, sleek, fresh and clean. Just look at the classy example below.

• If you like darker shades, pretty much everything works well with black as long as black is not the dominant color. A website with a black background can be fancy and look good, but is not easy to read. The two simplest combinations you can go for are black and white or black and a bright gray. Although a very powerful contrast, black and orange work really well together, but might require white for balance.
• If you want to combine both black and white with a color, then they work really well with blue; make sure white is dominant, otherwise you need a very bright blue to dominate. Don’t give black a lot of emphasis in this combination. You can see a good example below. The second example is quite poor and shows how this combination can be put into practice. Not only is the design outdated, but the colors make it even more difficult to bear.

• Black and white work very well with red too, but make sure red is not dominant, as then it gets too powerful and creates an unbearable contrast with black. You can see two good examples below.

• A third combination I would recommend is black, white and green, and you can see down below why.

Image source: Website Templates Online

Conclusion

Using the right color in your designs is crucial and I am sure you can see why. Although it might sound wrong, by using the right color in accordance to your audience will increase the likelihood of them doing what you want them to do. But wrong or right, this is what all designers work for, sending a message to an audience and then hoping to get a response from them. If you understand how color psychology works and which color fits your audience, you are a step closer to launching a successful website.

DocNow est la Start-Up française du mois d’Avril

DocNow est la Start-Up française du mois d’Avril: Après la présentation d’une start-up française chaque jeudi du mois d'avril, les grandes divinités du vote (c’est à dire les lecteurs de Presse-Citron) ont encore frappé : DocNow est sacrée start-up française du mois d'Avril.



Par conséquent, l'application gagne sa place de finaliste pour le grand vote final qui aura lieu en Juin prochain pour désigner la Start-Up Presse-Citron 2012.

Pour rappel, DocNow est une application iPhone médicale (et bientôt Android) vous permettant d’entrer la liste de vos symptômes pour savoir si une pathologie semble correspondre..

En attendant la désignation du grand vainqueur de l'année, vous pouvez relire l’article sur DocNow ou aller directement sur leur site web.

Articles sur le même sujet :

• Votez pour la start-up française du mois d’Avril
  C’est maintenant l’heure du vote pour les 4 start-ups présentées durant le mois d’Avril. Qui de Sharypic, DocNow, Potati ou(...)
• [La Start-Up française de la Semaine] : DocNow
  DocNow est une application iPhone qui va analyser vos symptômes pour vous informer sur la maladie qui semble y correspondre(...)
• Cityzencar est la Start-Up française du mois de Novembre
  Après la présentation d’une start-up française chaque jeudi de ce mois de novembre, les grandes divinités du vote (c’est à dire(...)
• PlugnSurf est la Start-Up française du mois de Mars, catégorie Hardware
  La start-up PlugnSurf a remporté le vote du mois de Mars (catégorie Hardware) & se retrouve donc propulsée au rang(...)
• Votez pour la start-up française du mois de Janvier : catégorie Jeux
  A vous de voter pour choisir qui entre ePawn, OneFeat, Xilabs ou Babble Planet doit gagner le titre de Start-up(...)

Sami - Un générateur de documentation PHP fraichement open sourcé

Sami - Un générateur de documentation PHP fraichement open sourcé: Sami est un générateur de documentation PHP fraîchement rendu open source, utilisé et développé par Sensio avec Symfony2.

Mastering CSS Gradients in Under an Hour

Mastering CSS Gradients in Under an Hour

SASS vs. LESS

SASS vs. LESS:
"Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing.
Really short answer: SASS
Slightly longer answer: SASS is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing.
Much longer answer: Read on.

The Much Longer Answer

The Learning Curve with Ruby and Command Line and Whatever

The only learning curve is the syntax. You should use an app like CodeKit to watch and compile your authored files. You need to know jack squat about Ruby or the Command Line or whatever else. Maybe you should, but you don't have to, so it's not a factor here.
Winner: Nobody

Helping with CSS3

With either language, you can write your own mixins to help with vendor prefixes. No winner there. But you know how you don't go back and update the prefixes you use on all your projects? (You don't.) You also won't update your handcrafted mixins file. (Probably.) In SASS you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. Yes you'll have to keep your local preprocessor software updated and compile/push once in a while, but that's trivial and thinking-free.
So what this comes down to is: SASS has Compass and LESS does not. But it goes deeper than that. The attempts at creating a real robust project like Compass for LESS haven't succeeded because the LESS language isn't robust enough to do it properly. More on that next.
Winner: SASS

Language Ability: Logic / Loops

LESS has an ability to do "guarded mixins." These are mixins that only take affect when a certain condition is true. Perhaps you want to set a background color based on the current text color in a module. If the text color is "pretty light" you'll probably want a dark background. If it's "pretty dark" you'll want a light background. So you have a single mixin broke into two parts with these guards that ensure that only one of them takes effect.

.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
  background: black;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
  background: #ccc;
}

So then when you use it, you'll get the correct background:

.box-1 {
  color: #BADA55;
  .set-bg-color(#BADA55);
}

That is overly simplified, but you likely get the idea. You can do some fancy stuff with it. LESS can also do self-referencing recursion where a mixin can call itself with an updated value creating a loop.

.loop (@index) when (@index > 0) {
  .myclass {
    z-index: @index;
  }
  // Call itself
  .loopingClass(@index - 1);
}
// Stop loop
.loopingClass (0) {}

// Outputs stuff
.loopingClass (10);

But thats where the logic/looping abilities of LESS end. SASS has actual logical and looping operators in the language. if/then/else statements, for loops, while loops, and each loops. No tricks, just proper programming. While guarded mixins are a pretty cool, natural concept, language robustness goes to SASS. This language robustness is what makes Compass possible.
For example, Compass has a mixin called background. It's so robust, that you can pass just about whatever you want to that thing that it will output what you need. Images, gradients, and any combination of them comma-separated, and you'll get what you need (vendor prefixes and all).
This succinct and intelligible code:

.bam {
  @include background(
    image-url("foo.png"),
    linear-gradient(top left, #333, #0c0),
    radial-gradient(#c00, #fff 100px)
  );
}

Turns into this monster (which is unfortunately what we need for it to work with as good of browser support as we can get):

.bam {
  background: url('/foo.png'), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
  background: url('/foo.png'), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
  background: url('/foo.png'), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}

Winner: SASS

Website Niceitude

LESS has a nicer, more usable website. The SASS documentation isn't awful. It's complete and you can find what you need. But when competing for attention from front end people, LESS has the edge. I don't doubt this plays a large role in LESS currently winning the popularity race. Things may be changing though.
Winner: LESS

The @extend Concept

Say you declare a class which has a bit of styling. Then you want another class which you want to do just about the same thing, only a few additional things. In LESS you'd likely:

.module-b {
   .module-a(); /* Copies everything from .module-a down here */
   border: 1px solid red;
}

That's an "include" essentially. A mixin, in both languages. You could use an include to do that SASS as well, but you're better off using @extend. With @extend, the styles from .module-a aren't just duplicated down in .mobule-b (what could be considered bloat), the selector for .module-a is altered to .module-a, .module-b in the compiled CSS (which is more efficient).

.module-a {
   /* A bunch of stuff */
}
.module-b {
   /* Some unique styling */
   @extend .module-a;
}

Compiles into

.module-a, .module-b {
  /* A bunch of stuff */
}
.module-b {
  /* Some unique styling */
}

See that? It rewrites selectors, which is way more efficient.
Winner: SASS

Variable Handling

LESS uses @, SASS uses $. The dollar sign has no inherit meaning in CSS, while the @ sign does. It's for things like declaring @keyframes or blocks of @media queries. You could chalk this one up to personal preference and not a big deal, but I think the edge here is for SASS which doesn't confuse standing concepts.
SASS has some weirdness with scope in variables though. If you overwrite a "global" variable "locally", the global variable takes on the local value. This just feels kind of weird.

$color: black;
.scoped {
  $color: white;
  color: $color;
}
.unscoped {
  // LESS = black (global)
  // SASS = white (overwritten by local)
  color: $color;
}

I've heard it can be useful but it's not intuitive, especially if you write JavaScript.
Winner: Tossup

Working with Media Queries

The way most of us started working with @media queries was adding blocks of them at the bottom of your main stylesheet. That works, but it leads to mental disconnect between the original styling and the responsive styles. Like:

.some-class {
   /* Default styling */
}

/* Hundreds of lines of CSS */

@media (max-width: 800px) {
  .some-class {
    /* Responsive styles */
  }
}

With SASS or LESS, we can bring those styles together through nesting.

.some-class {
  /* Default styling */
  @media (max-width: 800px) {
    /* Responsive styles */
  }
}

You can get even sexier with SASS. There is a really cool "respond-to" technique (see code by Chris Eppstein, Ben Schwarz, and Jeff Croft) for naming/using breakpoints.

=respond-to($name)

  @if $name == small-screen
    @media only screen and (min-width: 320px)
      @content

  @if $name == large-screen
    @media only screen and (min-width: 800px)
      @content

The you can use them succinctly and semantically:

.column
    width: 25%
    +respond-to(small-screen)
      width: 100%

Note: requires SASS 3.2, which is in alpha, which you can install with gem install sass --pre. I don't think there is any doubt this is a very nice way to work.
Winner: SASS

Math

For the most part, the math is similar, but there are some weirdnesses with how units are handled. For instance, LESS will assume the first unit you use is what you want out, ignoring further units.

div {
   width: 100px + 2em; // == 102px (weird)
}

In SASS, you get a clear error: Incompatible units: 'em' and 'px'. I guess it's debatable if it's better to error or be wrong, but I'd personally rather have the error. Especially if you're dealing with variables rather than straight units and it's harder to track down.
SASS will also let you perform math on "unknown" units, making it a bit more futureproof should some new unit come along before they are able to update. LESS does not. There is some more weird differences like how SASS handles multiplying values that both have units, but it's esoteric enough to not be worth mentioning.
Winner: Narrowly SASS

Active Development

At the time of this writing...
Number of open issues on LESS: 392

Number of open issues on SASS: 84
Pending pull requests on LESS: 86

Pending pull requests on SASS: 3
Number of commits in the last month in LESS: 11

Number of commits in the last month in SASS: 35
None of that stuff is any definitive proof that one project is more active than the other, but the numbers do seem to always leans toward SASS. As I understand it, both of the leads work on the languages in whatever little free time they have, as they both have other major new projects they are working on.
Winner: Probably SASS

More Reading

• Chris Eppstein: SASS/LESS Comparison
• Jeremy Hixon: An Introduction To LESS, And Comparison To Sass
• Ken Collins: Too LESS? Should You Be Using Sass?
• Johnathan Croom: Sass vs. LESS vs. Stylus: Preprocessor Shootout

SASS vs. LESS is a post from CSS-Tricks

Shopcade, la nouvelle plateforme de commerce social

Shopcade, la nouvelle plateforme de commerce social

Css Gradients

Mastering CSS Gradients in Under an Hour

Eligir su plataforma de crowFunding

¿Cuál es la mejor plataforma de CrowdFunding para mi Proyecto?

Los Beneficios del Coaching: el Ser Humano es Extraordinario, por @Esther_Roche

Los Beneficios del Coaching: el Ser Humano es Extraordinario, por @Esther_Roche:
Como el Coaching es una experiencia muy personal, a veces es extremadamente complicado para el Coachee (“coacheado”) explicar qué beneficios ha obtenido del proceso, aunque existen innumerables testimonios de personas que lo han experimentado, siendo en su mayoría muy positivos.
Lamentablemente el Coaching es aún una técnica muy desconocida en nuestro país, pese a los esfuerzos y entusiasmo de las numerosas organizaciones relativas a esta disciplina, así como de los profesionales que nos dedicamos a ello. El tipo de Coaching más difundido en la actualidad en España es el Coaching Ejecutivo y el Empresarial, aunque poco a poco se empieza a conocer el Coaching Personal y en otros campos, como el Coaching para Emprendedores.
Hasta hace bastante poco, el Coaching era sólo conocido en las “altas esferas”, tanto de ejecutivos como de atletas y otros deportistas. Pese a que la mayor parte de las compañías de Fortune 500 llevan años contratando coaches para sus ejecutivos sénior, y pese a que hay más de 50.000 coaches profesionales en el mundo, se puede decir que todavía no se entiende muy bien lo que es el Coaching.
Existen dos razones primordiales por las que esto sucede. Una es que el Coaching es una discusión privada y confidencial entre coach y cliente (coachee) y por tanto la información que se pueda compartir fuera de esa relación será muy escasa o incluso nula. La confidencialidad es una de las bases del proceso de Coaching. No sólo eso, también es esencial para el proceso de desarrollo.
La otra razón es que no se hace marketing masivo del Coaching. Al contrario, se “vende” por lo general mediante el boca a boca. Algunos coaches de renombre han hecho esfuerzos personales para difundir algo más el conocimiento del Coaching entre la población y sin embargo, sigue siendo un completo desconocido para la mayoría de la gente.
Sin embargo, y pese al desconocimiento que existe en torno a esta técnica, el Coaching tiene numerosos beneficios. Sir John Whitmore, uno de los padres del Coaching, lo define como “la habilidad de liberar el potencial de una personas para maximizar su propio rendimiento. Es más ayudarles a aprender, que enseñarles”.
El Coaching, según la International Coaching Federation, ofrece a los individuos la oportunidad de “experimentar perspectivas diferentes para sus retos personales, así como mayor efectividad y confianza”.
Tales avances tendrán como consecuencia “resultados positivos considerables en las áreas de productividad, satisfacción personal tanto en la vida laboral como en la profesional, y también el logro de metas relevantes al individuo”, según la ICF.
Entonces, ¿cuáles son los beneficios más tangibles del Coaching? A continuación enumero 10 áreas en las que puedes obtener beneficios mediante un buen proceso de Coaching:
1. El Coaching es un tipo de conversación diferente: un debate o conversación de Coaching se centra en ti y todo el potencial que podría aflorar del proceso. Un coach está formado para construir confianza desde el principio del proceso, de forma que el cliente o coachee se sienta cómodo abriéndose para, él mismo, poder evaluar las acciones necesarias que le llevarán a conseguir sus metas. Hay una escena en la película El indomable Will Hunting, donde Robin Williams, en su papel de psicólogo de Matt Damon, conecta profundamente con él al compartir detalles de su propia vida en forma de historias. Éste es un ejemplo del tipo de conexión que el coach debe establecer con su cliente desde las fases iniciales de su relación.

2. La gente a tu alrededor puede no estar diciéndote toda la verdad. Todos tenemos puntos ciegos mentales de los que no somos conscientes, pero los demás sí. En Coaching, definimos punto ciego como cierta información que es evidente para los demás acerca de ti, pero a la que tú mismo eres totalmente ajeno.
La mayoría de las veces, las personas que tenemos a nuestro alrededor no nos hacen tomar conciencia de esa información, sea vista como positiva o como negativa por ellos. Este feedback que se puede solicitar a esas personas durante un proceso de Coaching puede ser altamente beneficioso a la hora de identificar conductas e incluso los objetivos del individuo. El coach sólo puede trabajar con personas que están dispuestas a examinar su comportamiento y abiertas al cambio.
3. El coach te ayuda a ver tu verdadero potencial con claridad. Si eres como la mayor parte de las personas, probablemente en lo más profundo de tu ser, piensas que eres capaz de conseguir mucho más de lo que estás consiguiendo en la actualidad. El coach te ayuda a examinar tus pensamientos y creencias con la finalidad de observar desde otra perspectiva dónde los mismos son defectuosos y dónde existen oportunidades que te sean útiles en el avance hacia tus metas.
A veces, lo único necesario es que el coach haga la pregunta correcta para hacerte tomar conciencia. De hecho, el Coaching en realidad se trata de hacer las preguntas adecuadas y necesarias para un individuo concreto. Preguntas que perpetuarán el aprendizaje y la exploración del potencial de ese individuo en concreto.
4. La vida no es solamente una historia que nos contamos a nosotros mismos. Las personas observamos nuestras vidas a través de una lente subjetiva que distorsiona la realidad. Las circunstancias que nos bloquean en nuestra vida cotidiana están basadas en una estructura de presuposiciones que arrastramos con nosotros.
Si somos capaces de dibujar una estructura diferente alrededor de las mismas circunstancias, veremos cómo aparecen nuevas trayectorias. Encuentra el esquema apropiado para ti y observarás cómo logros extraordinarios comienzan a formar parte de tu vida cotidiana. El coach te ayuda a examinar tu propia historia y reescribirla.
5. Tu conducta puede ser dañina. Uno de los trastornos de la locura es hacer la misma cosa una y otra vez esperando resultados diferentes. Los fisiólogos han observado que el 90 por ciento de los pensamientos que tienes hoy son exactamente los mismos que tuviste ayer. La vida son hábitos y los coaches pueden ayudarte a examinar qué acciones podrías hacer mañana para reportarte diferentes resultados a los de hoy.
Cuando un coach te pregunta al principio de la sesión “¿Qué esperas de la sesión de hoy?”, te das cuenta inmediatamente de que vas a salir de allí con un plan de acción y conductas resultantes que son diferentes a las que habrías conseguido por ti mismo.
6. El éxito en la vida depende en gran parte de tus relaciones. La gente de éxito entiende que, trabajes para otros o para ti mismo, tú alcanzarás tanto éxito como el que tengas en las relaciones que vayas construyendo en tu camino. Muchos de nosotros no nos damos cuenta de lo importante que es identificar a las personas clave que pueden ayudar, entorpecer o incluso sabotear nuestro éxito (sea consciente o inconscientemente).
Cuando existen relaciones clave que te hacen sentir frustración, un coach puede ayudarte a buscar diferentes formas de abordar esos retos. Por ejemplo, el coach puede ayudarte a mejorar tus relaciones mediante el examen de conversaciones pasadas que han sido decisivas, usando herramientas especificas para este punto concreto, como La Escalera de Inferencia.
El coach, al utilizar estas herramientas, te ayuda a identificar falsas presuposiciones basadas en tus esquemas mentales o creencias, a la vez que puede observar la situación desde un punto de vista más objetivo que tú.
7. Una leve variación en tu perspectiva puede significar una gran diferencia. Tampoco es nuevo para nadie que, como dice Wayne Dyer, “Si cambias el modo en que observas las cosas, las cosas que observas cambiarán”. A veces, la forma en que abordamos una discusión, o una situación, con nuestras intenciones y opiniones preestablecidas, determinará el resultado.
Sin embargo, si olvidamos por un momento todas esas ideas predeterminadas para abordar la reunión con la mente abierta, es posible que el resultado sea diferente y/o más positivo.
8. Quizá tengas alguna creencia limitante que te está frenando. La mayoría de la gente pone un límite en lo que es posible para ellos, que está basada en experiencias anteriores y en creencias desarrolladas en el pasado, la mayoría durante la niñez. Este fenómeno se muestra a través de toda nuestra vida.
Puesto de otra forma: tu programación mental personal (experiencias y creencias) conduce a tus pensamientos, que conducen a tus emociones, que conducen a tus acciones, que conducen a tus resultados. Si eres capaz de modificar o sustituir tu programación interna, ésta te llevará a pensamientos diferentes, emociones diferentes… resultados diferentes.
9.Quizá tienes gancho para la basura! La Ley de la Atracción, de la que tanto se ha hablado en los últimos años por libros como El Secreto, describe esta noción. Básicamente afirma que lo similar se atrae. Aquella famosa frase de “El dinero llama al dinero”, a eso me refiero. Si centras tu atención en algo, seguirás obteniendo más de lo mismo, tanto si es positivo como si es negativo.
Es decir la famosa profecía auto-cumplida. Aquí voy a poner un ejemplo personal: cuando voy al supermercado y compro huevos suelo colocarlos cuidadosamente en la parte superior del carrito para subirlos a casa. No es que vayan muy seguros, pero siempre llegan enteros, no les presto atención alguna. Hace un par de semanas, ignoro la razón, me fijé en los dichosos huevos y un pensamiento cruzó mi mente por un segundo: “Como se me caigan los huevos…!”. Adivinad adónde fueron a parar los huevos dos minutos más tarde. No sé si es la Ley de la Atracción, la Ley de Murphy, o qué, pero seguro que todos tenemos mil ejemplos como el anterior. De hecho hay infinidad de frases hechas que observan esto mismo: levantarse con el pie izquierdo, tener la suerte de cara, … ¿No tenéis un amigo, familiar o conocido que “es que tengo tan mala suerte, ¡todo lo malo me pasa a mí!”? ¿Cuestión de actitud? Simplemente, pruébalo.
Mañana cuando te levantes, ponte una música marchosa o feliz, comienza el día con una actitud positiva, sonríe por la calle, da un abrazo a quien no se lo espera, explícate a ti mismo por qué eres extraordinario hoy, por qué vas a encontrar aparcamiento o por qué vas a esperar sólo dos minutos al autobús. Al final del día, me cuentas la diferencia. “Hoy puede ser un gran día, plantéatelo así…”.
10. Los coaches pueden proporcionarte una mejor comprensión de ti mismo y tus circunstancias. Un coach ve cosas que tú no ves, porque estás en ti mismo y la perspectiva es totalmente diferente. Además, están formados y tienen herramientas precisamente para esta finalidad. Cuando por fin observamos a nuestra persona desde otro punto de vista, tomamos conciencia de infinidad de cosas sobre nosotros mismos que ni siquiera se nos habían pasado por la cabeza.
Recientemente, durante una sesión de Coaching, mi coachee me explicaba que últimamente se había dado cuenta de que tenía un problema con las críticas y que deseaba dos cosas: dejar de juzgar a los demás y también deseaba dejar de sentirse mal cuando pensaba que los demás estaban emitiendo juicios de valor acerca de sus acciones. Le pregunté: ¿Qué relación ves entre estos dos deseos? Después de darle un par de vueltas tomó conciencia de que eran dos caras de la misma moneda y que quizá él se sentía juzgado precisamente porque también juzgaba. Parece simple, pero a veces podemos tener la respuesta en nuestras narices y no verla por no hacernos la pregunta correcta.
Y para eso está el coach, para hacernos las preguntas apropiadas en el momento idóneo. Esas preguntas nos dan una comprensión de nosotros mismos que nos sería muy complicado adquirir por nosotros mismos, al menos en tan poco tiempo. Preguntas que van enfocadas a revelarnos todo el potencial que tenemos, nuestros recursos y nuestros valores más profundos.
Al ser capaces de hacer aflorar todas estas herramientas y características desconocidas a nivel consciente, surge una nueva versión avanzada de nosotros mismos que ya estaba ahí, latente, y que nos hace tomar conciencia de que, en verdad, el ser humano es extraordinario.
Un proceso de Coaching es idóneo para aquellas personas que desean identificar y/o alcanzar sus objetivos de un modo más rápido y duradero.

Pretty and Lightweight jQuery Countdown Plugin

Pretty and Lightweight jQuery Countdown Plugin:

Advertise here via BSA
Countdowns can be a great way to build up anticipation when launching a new website or web application, it gives users a clear indication of how long they need to wait before they can get access to your site.
jQuery Countdown is a handy and pretty jquery countdown plugin for you. You can easily customize the format, images, width and height. And it’s only 1.7 KB. Best of all, it’s released under Apache License 2.0 which is free for download.

Requirements: jQuery Framework
Demo: http://jquery-countdown.googlecode.com/svn/trunk/index.html
License: Apache License 2.0

Css2Less - Convertissez vos CSS en LESS

Css2Less - Convertissez vos CSS en LESS: Css2Less permet de convertir les feuilles de styles CSS en fichiers LESS d'un simple copier/coller.