The power of LESS & CSS Preprocessors

A CSS Preprocessor is something that you should already be using as a part of any website you build.  If not you need to start now.  A preprocessor gives you the ability to do cool things with CSS that in days gone by would have taken a lot of time to develop.

LESS is my chosen preprocessor, but there are others and essentially the do the same thing.

For example in LESS:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

compiles to

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
There is more that you can do with LESS.
Essentially LESS is More.

Features of Multi Site Manager (MSM) and when to use it :: #AEM #ACQ #MSM

Maintaining your company’s website is no easy task — but it gets even more complicated when you have multiple sites, or throw more than one language into the mix. Adobe’s CQ5(now known as Adobe Experience Manager*) Multi Site Manager (MSM) is a more efficient way to manage your sites, saving time while simplifying your administrative process.

The Adobe CQ5 Multi Site Manager turns a tedious, manual process into an automated functionality that ultimately maximizes consistency throughout multiple sites. It fulfills this through the ability to define relations among sites and set the degree to which re-use or control is exerted.

The convenience of the CQ5 MSM is based around a source site, which is used for automatic updating of one or more of your sites.

Benefits

  • Easily find the differences among your sites and focus on what stands out.

  • Avoid duplicate content.

  • Create a consistent, fluid look among sites with a common base structure.

  • Take control of your content down to minor details with ease.

When to Use Adobe’s CQ5 Multi Site Manager (MSM)

  • Multinational Site

  • Multilingual Site

  • Combination Site (Multinational and Multilingual)

  • Multi-departmental Site

  • Any system of interlinked sites that lacks consistency in shared content

Features

  • Language translation manager.

  • Create Live Copy sites based on a Blueprint site. The Blueprint serves as a definitive structural plan for all other sites.

  • Define rollout configurations for comprehensive, painless synchronization.

  • Blueprint Control Center to manage your Blueprint and all of its Live Copies.

  • Jobs Console for scheduling background rollouts during times convenient for you—for example, overnight when your server is less likely to be under heavy load.

Rather than micromanaging several websites at once, your responsibilities as a content manager are simplified into essentially one website’s back end. MSM makes a global Web presence possible for your business without the mess of keeping track of content through a multitude of content management systems. MSM offers one system—and one solution—for as many sites as you need.

Source: Axis41

Additional Resources:

 

Creating a new Blueprint in ACQ 5.6.1 / AEM :: #ACQ #AEM #Blueprint

Using the Multi-Site Manager or MSM can be a great way to manage a large and/or complex website template that needs to be translated or re-used many times.  To create a new blueprint in Adobe CQ or Adobe Experience Manager you need to:

Go to Tools from the ACQ homepage:

Select the “MSM Control Center” folder.  Then select the New > New Page option from the drop down:

This will bring up a dialog for creating your new ACQ Blueprint. Name your new blueprint and click “Create”.  Be sure to not use any spaces in the Name.  The title can have spaces and is what is seen by a user.

You will see now that your new blueprint has been added to the MSM Control Center folder.  This will allow you to reference this Blueprint when creating a new site and/or live copy.

Now to edit the settings of your new ACQ / AEM blueprint.  Double click on your blueprint inside the “MSM Control Center” folder and you will be presented with a new page to edit your settings:

Once here you can click “edit”:

This is where you can edit the Name, Description and source path for your blueprint.  The source path is the basis for your blueprint and needs to be structured in a similar manner to how the Geometrixx example site is setup.    Here is how the Geometrixx Demo site is setup (site folder > language folders > content):

Once you have entered the Name, Description and Source path for your blueprint click the “Thumbnail Image” tab and drag an image that you want to the end users to see for your new blueprint:

Once you drag and drop an image in the window you will have options to zoom in/out, rotate and crop the image you want to use.  Once you have made your changes click “Ok” to continue.  You should see your new image along with the Name, Description and Source path you entered earlier:

Congratulations you have now created your first Blueprint.

The next post in this series will detail how to use your newly created blueprint.

 

#html5 #Canvas the real #Flash killer

It has been spoken about many times how HTML5 will kill Flash. Ultimately that is probably true, but what isn’t known is that it isn’t just HTML5 that will doom Flash. HTML5 Canvas is the real Flash killer and I think that Adobe knows this to be true. You will see many more apps built in Canvas as well as online advertising. Canvas is already being used by AOL and others as their advertising medium of choice. There is even a plugin from Grant Skinner that will allow you to publish HTML5 Canvas from Flash (http://www.createjs.com).

Here is an example of what you can do in Canvas:

http://www.screentoys.com/
http://www.atari.com/arcade
http://www.noiseboard.com.au/
http://pritt2013.eoa.de/Games/PilotSchool/
http://www.doubleduck.co/2013/05/and-theyre-out/