nachbelichtet.com's shared items in Google Reader

Meine Gewitterfotos 2011

2011-09-11T20:17:19Z

Auch nach der unangenehmen Erfahrung eines direkten Blitzschlags in unserem Haus 2009, faszinieren mich Gewitter und Blitze noch immer. Auch in diesem Sommer konnte ich zwei Blitze einfangen. Diese beiden Fotos möchte ich dir hier zeigen. Das könnte Dich auch interessieren:

Scuffham Amps S-Gear

2011-07-06T15:37:00Z

Coming straight outta Estonia is newcomer Scuffham Amps. The company is headed up by Mike Scuffham, a former product designer for arguably the biggest guitar amp company of all time - Marshall.

Mike was the brains behind one of the front-runners of the rack-mounted preamp revolution, the Marshall JMP-1; lending his contribution to the plug-in world an air of considerable credibility.

"The simplicity of approach - focusing on quality rather than quantity - gives S-Gear a particular charm."

S-Gear runs standalone or as a VST plug-in. It's Windows-only at the time of writing, but a Mac version is said to be imminent.

Similar to the general design ethos of say, Magix' Vandal and Kansas's Amplifikation One, Scuffham Amps is not claiming accurate emulations of familiar gear. Rather, S-Gear draws inspiration from the best pre/power amp tube models available and channels this into original amp models.

S-Gear contains three amps: The Duke, The Stealer and The Jackal. This might seem stingy compared to, say, AmpliTube, with its extensive lineup of amps - but this would be missing the point of S-Gear entirely, which is streamlined simplicity and quality over quantity.

This concept is reflected in the plug-in's interface, too. Despite having a simple, functional noise gate, S-Gear hasn't got a tuner, doesn't feature any stompboxes (although the Amp Drive switch on the input has a similar impact to a pedal), features delay but not reverb, chorus, and so on, and is missing a bass amp.

However, these omissions means that all elements of the tonal chain - from amp to mic - can be viewed at once, making operation quick and unconvoluted. The delay effect and cabinet simulation section can both be hidden from view if you need to conserve screen space.

From our perspective, this simplicity of approach - focusing on the quality of what it does have, rather than on quantity of features - gives S-Gear a particular charm. It means you focus on playing, rather than tweaking a seemingly infinite variety of options.

Aural pleasure

So, how does it sound? Firstly, it must be said how much of a delight it was to find so many of the factory presets to be entirely usable without the need for serious tweakage.

It makes us question why so many other amp sim developers can't provide the same - after all, it's not uncommon for amp sim presets to be utterly unusable without major surgery.

The Plexmonster preset, for example, is an immediate winner, with an incredibly musical timbre and such a realism of response that we quickly forgot that we were using a plug-in (this is surely the Holy Grail that amp sim developers are striving for!).

This preset uses the Stealer amp and is arguably the most realistic classic Marshall sound that we've encountered in software. For naturally warm-sounding crunch rhythm tones and solos, it's hard to beat.

Duke forever

The Duke is a medium-gain amp more suited to cleaner tones, and it's perfect for crunchy rock 'n' roll and lower-gain blues tones. To be fair, most other amps sims have these tones fairly well covered too.

At the grittier end of the gain spectrum lurks The Jackal, which is akin to modern, high-gain amps such as those made by Soldano. Following a few slightly downtuned Alice in Chains licks and some galloping thrash metal riffage, it became apparent that The Jackal's response and character aren't particularly well suited to these styles.

This was despite numerous tweaks to the presence frequency, high-cut and sag parameters of the power amp, and various cab/speaker and mic combinations. The response and low-end weight and tightness required just weren't quite there.

It's impressive how the characters of all three S-Gear amps respond when you back off the guitar's volume control. With the volume edged back to, say, a quarter, a fairly clean tone with a bit of edge can be had; but those elusive tones from Gary Moore's Still Got The Blues album can be found by cranking it up a little more.

Then, by experimenting with the Push, Boost and amp Drive switches, as well as the gain and tone controls (based on traditional passive designs), you can take it from Texas blues to classic British rock, or from BB King on through to ZZ Top. It's stunningly done, and then some.

The devil is in the detail

Scuffham claims to offer some of the most sophisticated, detailed speaker cabinet sims on the market in the form of S-Gear's convolution-based Pro Convolver.

Some software packages offer seemingly endless options, but there are just seven cab options in the Pro Convolver section (all impulses provided by the excellent RedWirez), as well as the ability to source and load your own. Additionally, there are simple bass and treble parameters in the cab/mic section.

One of the Pro Convolver's more unique features is the ability to manipulate the effect of speaker impedance via its 'Z' control, and very effective it is, too. For mics, there's a dynamic Shure SM57 and ribbon Beyer Dynamic M160 in the virtual swag bag, each with four positions to choose from.

These all tend to provide exactly what's needed rather than giving you hundreds of combinations, often creating option anxiety in the process. From here, you have the option to engage the second convolver channel to layer up two cab/mic setups.

Going for the same cab but with two different mics panned in stereo is an effective approach; alternatively, you could experiment with different cab and mic combinations to create your own unique sounds.

Delays ahead!

As mentioned earlier, S-Gear has but one effects module: the sophisticated and highly effective Delay Thing. Here, the atmospheric tones of analogue delay pedals are emulated to impressive effect.

You can even choose to use tube simulation circuitry, which provides extra harmonics and warmth while still retaining transparency. As Scuffham Amps rightly claim, the Delay Thing is capable of a wide variety of sounds, and any David Gilmour/Floyd aficionado will undoubtedly be well pleased with this aspect of the software.

For those concerned about CPU usage, there's an economy mode that proves very effective at conserving CPU power and doesn't affect sound quality too much either.

To conclude, S-Gear is most suited to blues, rock 'n' roll and classic rock, as opposed to the metal end of the genre spectrum. When played to its strengths, though, S-Gear is a simply stunning success.

Now listen to our audio demos to hear S-Gear in action:

SSH Tunnel Is the Easiest Way to Tunnel on Your Android Device

2011-05-09T19:50:42Z

Telegramm Express: Die Redaktion öffnet ihre Fenster & das Twitter-Kollektiv ist da.

2011-05-04T11:51:50Z

Liebe Leute, hier ein kurzes Telegramm. Wir haben zwei frische Seiten am Start, wovon wir Euch hierdurch unterrichten. ;-)

Auf offenesfenster.tumblr.com soll Euch einen Einblick hinter die Kulissen der KWERFELDEIN-Redaktion geboten werden. Wir wollen hier unsere persönliche Seite herauskehren und auch über Sachen schreiben, die nur indirekt mit der Fotografie zu tun haben.

Schicke Videos, Meinungen zu gesellschaftlichen Themen, Screenshots aus unseren Chats, ich glaube, das erklärt sich fast von selbst. Offenes Fenster ist quasi das Blog der Redaktion. Inspiriert dazu haben uns die Jungs von Elbdudler.

Die zweite neue Seite veranschaulicht die Besetzung unseres Twitter-Kollektivs. Die Damen & Herren sind aus dem engeren und weiteren KWERFELDEIN-Umfeld und twittern fröhlich Links zu allerlei hinreißendem Fotokram. Wo? Hier, unter @kwerfeldein.

Und damit ihr auch wisst, wer genau für den jeweiligen Tweet verantwortlich ist, gibt es diese Unterseite mit Profilen und den passenden Kürzeln.

Achja: Beide Sachen sind noch blutjung, es kann also sein, dass eine Weile gar nix kommt und plötzlich wieder ganz furchtbar viel.

So, das wär’s auch schon wieder.

George Massenburg Demonstrates His Compessor

2011-04-21T04:31:00Z

Here's a great video of audio great George Massenburg demonstrating his GML 8900 compressor. The best thing about this video is that he shows a good way to dial in just about any compressor, not just his. Once again, George hits it out of the park. A great audio engineer and inventor as well.

----------------------------------

Help support this blog. Any purchases made through our Amazon links help support this website with no cost to you.

You should follow me on Twitter for daily news and updates on production and the music business.

Don't forget to check out my Music 3.0 blog for tips and tricks on navigating the music business.

Rawstudio 2 for Linux

2011-04-20T11:10:34Z

Rawstudio 2 is an open-source program that reads and manipulates RAW images.

Alex Lifeson Interview: Gibson Custom Signature Les Paul Axcess Guitar

2011-03-30T21:54:04Z

Shared by nachbelichtet.com
Alex Lifeson von Rush spricht über seine Gibson Signature Les Paul

The Tone Generation – The History Of Electronic Music In A Podcast

2011-03-06T15:32:32Z

The Tone Generation, is a series of audio podcasts that looks at the early history of electronic music.

The Tone Generation is presented by electronic musician and film-maker Ian Helliwell.

Early episodes looked at the history of electronic music by country.

More recent episodes have looked at The RCA Synthesizer, EMS and Buchla, and topics like Women in Electronics and Electronics in Jazz.

You can preview the most recent episode, on Buchla and his synthesizers, below.

Subscribe to the podcast by adding this podcast feed to iTunes or other podcast client:

http://thetonegeneration.blip.tv/rss

Here’s the program guide for The Tone Generation episodes, thus far:

Programme 1: Great Britain
Music by: Desmond Briscoe, Daphne Oram, Desmond Leslie, Tristram Cary, Roberto Gerhard, FC Judd and Malcolm Clarke.
Programme 2: France
Music by: Pierre Schaeffer, Iannis Xenakis, Luc Ferrari, Pierre Henry with Michel Colombier and with Spooky Tooth, Ivo Malec and Bernard Parmegiani.
Programme 3: Germany
Music by: Walter Ruttman, Oskar Sala, Herbert Eimert, Karlheinz Stockhausen, Bernd Alois Zimmermann, Gyorgy Ligeti and Kraftwerk.
Programme 4: Italy
Music by: Luigi Russolo, Luciano Berio, Bruno Maderna, Luigi Nono, Vittorio Gelmetti and John Eaton.
Programme 5: Holland and Belgium
Music by: Henk Badings, Henri Pousseur, Ton Bruynel, Leo Kupper, Tom Dissevelt and Kid Baltan.
Programme 6: Scandanavia
Music by: Rune Lindblad, Karl Birger Blomdahl, Ralph Lundsten, Else Marie Pade, Erkki Kurenniemi and Arne Nordheim.
Programme 7: Eastern Europe
Music by: Edward Artemiev with Yuri Bogdanov, Eugeniusz Rudnik, Bohdan Mazurek, Josef Malovec, Miloslav Istvan, and Ivan Patachich.
Programme 8: USA
Music by: Louis & Bebe Barron, Vladimir Ussachevsky, Milton Babbitt, Morton Subotnick, Haig Mardirosian, Raymond Scott and Gil Melle.
Programme 9: Canada
Music by: Hugh le Caine, Phillip Werren, Barry Truax, Norman McLaren and R. Murray Schafer.
Programme 10: Southern Hemisphere
Music by: Toru Takemitsu, Akira Miyoshi, Bruce Clarke, John Crocker, John Rimmer, Jose Vicente Asuar and Jorge Antunes.
Programme 11: Expo 58
Music by: Edgard Varese, Iannis Xenakis, Henk Badings, Herbert Eimert, Wlodzimierz Kotonski and Henry Jacobs.
Programme 12: The RCA Synthesizer (45 minute edition)
Music by: Otto Leuning, Vladimir Ussachevsky, Milton Babbitt and Charles Wuorinen.
Programme 13: Electronics In Jazz (60 minute edition)
Music by: Tom Dissevelt, Bernard Parmegiani, George Russell, John Baker, John Appleton/Don Cherry, Miles Davis, Paul Bley, Nucleus, Archie Shepp, Freddie Hubbard/Ilhan Mimaroglu, Sun Ra and Herbie Hancock.
Programme 14: Electronics for Dance
Music by: Henk Badings, Remi Gassman, Warner Jepson, Pierre Henry, Ernest Berk and Alwin Nikolais.
Programme 15: Electronic Music Authors
Music by: Karlheinz Stockhausen, John Cage, Lowell Cross, Tristram Cary, Elliott Schwartz and Ernst Krenek.
Programme 16: Electronics for Expos
Music by: Attilio Mineo, Raymond Scott, Otto Joachim, Zbignew Blazje, Marino Zuccheri, Toshi Ichiyanagi, Douglas Lilburn and Arne Nordheim.
Programme 17: EMS
Music by: Tristram Cary, Pink Floyd, Andrzej Dobrowolski, White Noise, Harrison Birtwistle and Priscilla McLean.
Programme 18: Computer Music (60 minute edition)
Music by: Newman Guttman, Max Mathews, John R. Pierce, David Lewin, James Tenney, Jean Claude Risset, Lejaren Hiller, Godfrey Winham, James K. Randall, Vladimir Ussachevsky, Barry Vercoe, Charles Dodge, Bruce Pennycook, Timothy Sullivan and Robert Ceely.
Programme 19: Women In Electronics
Music by: Else Marie Pade, Jean Ichelberger Ivey, Pril Smiley, Daria Semegen, Ludmilla Frajt, Laurie Spiegel and Lily Greenham.
Programme 20: Electronics and Voice
Music by: Richard Maxfield, Luciano Berio, Mel Powell, Herbert Brun, Kenneth Gaburo, Gordon Mumma and Richard Trythall.
Programme 21: Buchla
Music by: Morton Subotnick, Ernst Krenek, Michael Czajkowski, Warner Jepson, Bulent Arel and Arthur Kreiger.
Programme 22: Moog
In preparation…

via musicofsound, Synthtopia,

Responsive Web Design: What It Is and How To Use It

2011-01-12T15:22:27Z

Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.

In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

The Concept Of Responsive Web Design

Ethan Marcotte wrote an introductory article about the approach, “Responsive Web Design,” for A List Apart. It stems from the notion of responsive architectural design, whereby a room or space automatically adjusts to the number and flow of people within it:

“Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”

Transplant this discipline onto Web design, and we have a similar yet whole new idea. Why should we create a custom Web design for each group of users; after all, architects don’t design a building for each group size and type that passes through it? Like responsive architecture, Web design should automatically adjust. It shouldn’t require countless custom-made solutions for each new category of users.

Obviously, we can’t use motion sensors and robotics to accomplish this the way a building would. Responsive Web design requires a more abstract way of thinking. However, some ideas are already being practiced: fluid layouts, media queries and scripts that can reformat Web pages and mark-up effortlessly (or automatically).

But responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design. Let’s talk about all of these features, plus additional ideas in the making.

Adjusting Screen Resolution

With more devices come varying screen resolutions, definitions and orientations. New devices with new screen sizes are being developed every day, and each of these devices may be able to handle variations in size, functionality and even color. Some are in landscape, others in portrait, still others even completely square. As we know from the rising popularity of the iPhone, iPad and advanced smartphones, many new devices are able to switch from portrait to landscape at the user’s whim. How is one to design for these situations?

In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes. Yes, it is possible to group them into major categories, design for each of them, and make each design as flexible as necessary. But that can be overwhelming, and who knows what the usage figures will be in five years? Besides, many users do not maximize their browsers, which itself leaves far too much room for variety among screen sizes.

Morten Hjerde and a few of his colleagues identified statistics on about 400 devices sold between 2005 and 2008. Below are some of the most common:

Since then even more devices have come out. It’s obvious that we can’t keep creating custom solutions for each one. So, how do we deal with the situation?

Part of the Solution: Flexible Everything

A few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.

Now we can make things more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break (although they may become squished and illegible in the process). While it’s not a complete fix, the solution gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad.

In Ethan Marcotte’s article, he created a sample Web design that features this better flexible layout:

The entire design is a lovely mix of fluid grids, fluid images and smart mark-up where needed. Creating fluid grids is fairly common practice, and there are a number of techniques for creating fluid images:

For more information on creating fluid websites, be sure to look at the book “Flexible Web Design: Creating Liquid and Elastic Layouts with CSS” by Zoe Mickley Gillenwater, and download the sample chapter “Creating Flexible Images.” In addition, Zoe provides the following extensive list of tutorials, resources, inspiration and best practices on creating flexible grids and layouts: “Essential Resources for Creating Liquid and Elastic Layouts.”

While from a technical perspective this is all easily possible, it’s not just about plugging these features in and being done. Look at the logo in this design, for example:

If resized too small, the image would appear to be of low quality, but keeping the name of the website visible and not cropping it off was important. So, the image is divided into two: one (of the illustration) set as a background, to be cropped and to maintain its size, and the other (of the name) resized proportionally.

<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>

Above, the h1 element holds the illustration as a background, and the image is aligned according to the container’s background (the heading).

This is just one example of the kind of thinking that makes responsive Web design truly effective. But even with smart fixes like this, a layout can become too narrow or short to look right. In the logo example above (although it works), the ideal situation would be to not crop half of the illustration or to keep the logo from being so small that it becomes illegible and “floats” up.

Flexible Images

One major problem that needs to be solved with responsive Web design is working with images. There are a number of techniques to resize images proportionately, and many are easily done. The most popular option, noted in Ethan Marcotte’s article on fluid images but first experimented with by Richard Rutter, is to use CSS’s max-width for an easy fix.

img { max-width: 100%; }

As long as no other width-based image styles override this rule, every image will load in its original size, unless the viewing area becomes narrower than the image’s original width. The maximum width of the image is set to 100% of the screen or browser width, so when that 100% becomes narrower, so does the image. Essentially, as Jason Grigsby noted, “The idea behind fluid images is that you deliver images at the maximum size they will be used at. You don’t declare the height and width in your code, but instead let the browser resize the images as needed while using CSS to guide their relative size”. It’s a great and simple technique to resize images beautifully.

Note that max-width is not supported in IE, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. There is a JavaScript to fix this issue, though, found in Ethan Marcotte’s article.

While the above is a great quick fix and good start to responsive images, image resolution and download times should be the primary considerations. While resizing an image for mobile devices can be very simple, if the original image size is meant for large devices, it could significantly slow download times and take up space unnecessarily.

Filament Group’s Responsive Images

This technique, presented by the Filament Group, takes this issue into consideration and not only resizes images proportionately, but shrinks image resolution on smaller devices, so very large images don’t waste space unnecessarily on small screens. Check out the demo page here.

This technique requires a few files, all of which are available on Github. First, a JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif). Then, we can use just a bit of HTML to reference both the larger and smaller resolution images: first, the small image, with an .r prefix to clarify that it should be responsive, and then a reference to the bigger image using data-fullsrc.

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

The data-fullsrc is a custom HTML5 attribute, defined in the files linked to above. For any screen that is wider than 480 pixels, the larger-resolution image (largeRes.jpg) will load; smaller screens wouldn’t need to load the bigger image, and so the smaller image (smallRes.jpg) will load.

The JavaScript file inserts a base element that allows the page to separate responsive images from others and redirects them as necessary. When the page loads, all files are rewritten to their original forms, and only the large or small images are loaded as necessary. With other techniques, all higher-resolution images would have had to be downloaded, even if the larger versions would never be used. Particularly for websites with a lot of images, this technique can be a great saver of bandwidth and loading time.

This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.). Older browsers and Firefox degrade nicely and still resize as one would expect of a responsive image, except that both resolutions are downloaded together, so the end benefit of saving space with this technique is void.

Stop iPhone Simulator Image Resizing

One nice thing about the iPhone and iPod Touch is that Web designs automatically rescale to fit the tiny screen. A full-sized design, unless specified otherwise, would just shrink proportionally for the tiny browser, with no need for scrolling or a mobile version. Then, the user could easily zoom in and out as necessary.

There was, however, one issue this simulator created. When responsive Web design took off, many noticed that images were still changing proportionally with the page even if they were specifically made for (or could otherwise fit) the tiny screen. This in turn scaled down text and other elements.

(Image: Think Vitamin | Website referenced: 8 Faces)

Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s <head> section. Thanks to Think Vitamin’s article on image resizing, we have the meta tag below:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Setting the initial-scale to 1 overrides the default to resize images proportionally, while leaving them as is if their width is the same as the device’s width (in either portrait or lanscape mode). Apple’s documentation has a lot more information on the viewport meta tag.

Custom Layout Structure

For extreme size changes, we may want to change the layout altogether, either through a separate style sheet or, more efficiently, through a CSS media query. This does not have to be troublesome; most of the styles can remain the same, while specific style sheets can inherit these styles and move elements around with floats, widths, heights and so on.

For example, we could have one main style sheet (which would also be the default) that would define all of the main structural elements, such as #wrapper, #content, #sidebar, #nav, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined.

If a style sheet made the layout too narrow, short, wide or tall, we could then detect that and switch to a new style sheet. This new child style sheet would adopt everything from the default style sheet and then just redefine the layout’s structure.

Here is the style.css (default) content:

/* Default styles that will carry to the child style sheet */

html,body{
   background...
   font...
   color...
}

h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}

/* Structural elements */
#wrapper{
	width: 80%;
	margin: 0 auto;

	background: #fff;
	padding: 20px;
}

#content{
	width: 54%;
	float: left;
	margin-right: 3%;
}

#sidebar-left{
	width: 20%;
	float: left;
	margin-right: 3%;
}

#sidebar-right{
	width: 20%;
	float: left;
}

Here is the mobile.css (child) content:

#wrapper{
	width: 90%;
}

#content{
	width: 100%;
}

#sidebar-left{
	width: 100%;
	clear: both;

	/* Additional styling for our new layout */
	border-top: 1px solid #ccc;
	margin-top: 20px;
}

#sidebar-right{
	width: 100%;
	clear: both;

	/* Additional styling for our new layout */
	border-top: 1px solid #ccc;
	margin-top: 20px;
}

Media Queries

CSS3 supports all of the same media types as CSS 2.1, such as screen, print and handheld, but has added dozens of new media features, including max-width, device-width, orientation and color. New devices made after the release of CSS3 (such as the iPad and Android devices) will definitely support media features. So, calling a media query using CSS3 features to target these devices would work just fine, and it will be ignored if accessed by an older computer browser that does not support CSS3.

In Ethan Marcotte’s article, we see an example of a media query in action:

<link rel="stylesheet" type="text/css"
	media="screen and (max-device-width: 480px)"
	href="shetland.css" />

This media query is fairly self-explanatory: if the browser displays this page on a screen (rather than print, etc.), and if the width of the screen (not necessarily the viewport) is 480 pixels or less, then load shetland.css.

New CSS3 features also include orientation (portrait vs. landscape), device-width, min-device-width and more. Look at “The Orientation Media Query” for more information on setting and restricting widths based on these media query features.

One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. portrait orientations. Be sure to look at the section of Ethan Marcotte’s article entitled “Meet the media query” for more examples and a more thorough explanation.

Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

The code above is from a free template for multiple media queries between popular devices by Andy Clark. See the differences between this approach and including different style sheet files in the mark-up as shown in the post “Hardboiled CSS3 Media Queries.”

CSS3 Media Queries

Above are a few examples of how media queries, both from CSS 2.1 and CSS3 could work. Let’s now look at some specific how-to’s for using CSS3 media queries to create responsive Web designs. Many of these uses are relevant today, and all will definitely be usable in the near future.

The min-width and max-width properties do exactly what they suggest. The min-width property sets a minimum browser or screen width that a certain set of styles (or separate style sheet) would apply to. If anything is below this limit, the style sheet link or styles will be ignored. The max-width property does just the opposite. Anything above the maximum browser or screen width specified would not apply to the respective media query.

Note in the examples below that we’re using the syntax for media queries that could be used all in one style sheet. As mentioned above, the most efficient way to use media queries is to place them all in one CSS style sheet, with the rest of the styles for the website. This way, multiple requests don’t have to be made for multiple style sheets.

@media screen and (min-width: 600px) {
     .hereIsMyClass {
          width: 30%;
          float: right;
     }
}

The class specified in the media query above (hereIsMyClass) will work only if the browser or screen width is above 600 pixels. In other words, this media query will run only if the minimum width is 600 pixels (therefore, 600 pixels or wider).

@media screen and (max-width: 600px) {
     .aClassforSmallScreens {
          clear: both;
		  font-size: 1.3em;
     }
}

Now, with the use of max-width, this media query will apply only to browser or screen widths with a maximum width of 600 pixels or narrower.

While the above min-width and max-width can apply to either screen size or browser width, sometimes we’d like a media query that is relevant to device width specifically. This means that even if a browser or other viewing area is minimized to something smaller, the media query would still apply to the size of the actual device. The min-device-width and max-device-width media query properties are great for targeting certain devices with set dimensions, without applying the same styles to other screen sizes in a browser that mimics the device’s size.

@media screen and (max-device-width: 480px) {
     .classForiPhoneDisplay {
          font-size: 1.2em;
     }
}

@media screen and (min-device-width: 768px) {
     .minimumiPadWidth {
          clear: both;
		  margin-bottom: 2px solid #ccc;
     }
}

There are also other tricks with media queries to target specific devices. Thomas Maier has written two short snippets and explanations for targeting the iPhone and iPad only:

For the iPad specifically, there is also a media query property called orientation. The value can be either landscape (horizontal orientation) or portrait (vertical orientation).

@media screen and (orientation: landscape) {
     .iPadLandscape {
          width: 30%;
		  float: right;
     }
}

@media screen and (orientation: portrait) {
     .iPadPortrait {
          clear: both;
     }
}

Unfortunately, this property works only on the iPad. When determining the orientation for the iPhone and other devices, the use of max-device-width and min-device-width should do the trick.

There are also many media queries that make sense when combined. For example, the min-width and max-width media queries are combined all the time to set a style specific to a certain range.

@media screen and (min-width: 800px) and (max-width: 1200px) {
     .classForaMediumScreen {
          background: #cc0000;
          width: 30%;
          float: right;
     }
}

The above code in this media query applies only to screen and browser widths between 800 and 1200 pixels. A good use of this technique is to show certain content or entire sidebars in a layout depending on how much horizontal space is available.

Some designers would also prefer to link to a separate style sheet for certain media queries, which is perfectly fine if the organizational benefits outweigh the efficiency lost. For devices that do not switch orientation or for screens whose browser width cannot be changed manually, using a separate style sheet should be fine.

You might want, for example, to place media queries all in one style sheet (as above) for devices like the iPad. Because such a device can switch from portrait to landscape in an instant, if these two media queries were placed in separate style sheets, the website would have to call each style sheet file every time the user switched orientations. Placing a media query for both the horizontal and vertical orientations of the iPad in the same style sheet file would be far more efficient.

Another example is a flexible design meant for a standard computer screen with a resizable browser. If the browser can be manually resized, placing all variable media queries in one style sheet would be best.

Nevertheless, organization can be key, and a designer may wish to define media queries in a standard HTML link tag:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />

JavaScript

Another method that can be used is JavaScript, especially as a back-up to devices that don’t support all of the CSS3 media query options. Fortunately, there is already a pre-made JavaScript library that makes older browsers (IE 5+, Firefox 1+, Safari 2) support CSS3 media queries. If you’re already using these queries, just grab a copy of the library, and include it in the mark-up: css3-mediaqueries.js.

In addition, below is a sample jQuery snippet that detects browser width and changes the style sheet accordingly — if one prefers a more hands-on approach:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$(window).bind("resize", resizeWindow);
		function resizeWindow(e){
			var newWindowWidth = $(window).width();

			// If width width is below 600px, switch to the mobile stylesheet
			if(newWindowWidth < 600){ 				$("link[rel=stylesheet]").attr({href : "mobile.css"});	 			} 			// Else if width is above 600px, switch to the large stylesheet 			else if(newWindowWidth > 600){
				$("link[rel=stylesheet]").attr({href : "style.css"});
			}
		}
	});
</script>

There are many solutions for pairing up JavaScript with CSS media queries. Remember that media queries are not an absolute answer, but rather are fantastic options for responsive Web design when it comes to pure CSS-based solutions. With the addition of JavaScript, we can accomodate far more variations. For detailed information on using JavaScript to mimic or work with media queries, look at “Combining Media Queries and JavaScript.”

Showing or Hiding Content

It is possible to shrink things proportionally and rearrange elements as necessary to make everything fit (reasonably well) as a screen gets smaller. It’s great that that’s possible, but making every piece of content from a large screen available on a smaller screen or mobile device isn’t always the best answer. We have best practices for mobile environments: simpler navigation, more focused content, lists or rows instead of multiple columns.

Responsive Web design shouldn’t be just about how to create a flexible layout on a wide range of platforms and screen sizes. It should also be about the user being able to pick and choose content. Fortunately, CSS has been allowing us to show and hide content with ease for years!

display: none;

Either declare display: none for the HTML block element that needs to be hidden in a specific style sheet or detect the browser width and do it through JavaScript. In addition to hiding content on smaller screens, we can also hide content in our default style sheet (for bigger screens) that should be available only in mobile versions or on smaller devices. For example, as we hide major pieces of content, we could replace them with navigation to that content, or with a different navigation structure altogether.

Note that we haven’t used visibility: hidden here; this just hides the content (although it is still there), whereas the display property gets rid of it altogether. For smaller devices, there is no need to keep the mark-up on the page — it just takes up resources and might even cause unnecessary scrolling or break the layout.

Here is our mark-up:

<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>

<div id="content">
	<h2>Main Content</h2>
</div>

<div id="sidebar-left">
	<h2>A Left Sidebar</h2>

</div>

<div id="sidebar-right">
	<h2>A Right Sidebar</h2>
</div>

In our default style sheet below, we have hidden the links to the sidebar content. Because our screen is large enough, we can display this content on page load.

Here is the style.css (default) content:

#content{
	width: 54%;
	float: left;
	margin-right: 3%;
}

#sidebar-left{
	width: 20%;
	float: left;
	margin-right: 3%;
}

#sidebar-right{
	width: 20%;
	float: left;
}
.sidebar-nav{display: none;}

Now, we hide the two sidebars (below) and show the links to these pieces of content. As an alternative, the links could call to JavaScript to just cancel out the display: none when clicked, and the sidebars could be realigned in the CSS to float below the content (or in another reasonable way).

Here is the mobile.css (simpler) content:

#content{
	width: 100%;
}

#sidebar-left{
	display: none;
}

#sidebar-right{
	display: none;
}
.sidebar-nav{display: inline;}

With the ability to easily show and hide content, rearrange layout elements and automatically resize images, form elements and more, a design can be transformed to fit a huge variety of screen sizes and device types. As the screen gets smaller, rearrange elements to fit mobile guidelines; for example, use a script or alternate style sheet to increase white space or to replace image navigation sources on mobile devices for better usability (icons would be more beneficial on smaller screens).

Below are a couple of relevant resources:

Touchscreens vs. Cursors

Touchscreens are becoming increasingly popular. Assuming that smaller devices are more likely to be given touchscreen functionality is easy, but don’t be so quick. Right now touchscreens are mainly on smaller devices, but many laptops and desktops on the market also have touchscreen capability. For example, the HP Touchsmart tm2t is a basic touchscreen laptop with traditional keyboard and mouse that can transform into a tablet.

Touchscreens obviously come with different design guidelines than purely cursor-based interaction, and the two have different capabilities as well. Fortunately, making a design work for both doesn’t take a lot of effort. Touchscreens have no capability to display CSS hovers because there is no cursor; once the user touches the screen, they click. So, don’t rely on CSS hovers for link definition; they should be considered an additional feature only for cursor-based devices.

Look at the article “Designing for Touchscreen” for more ideas. Many of the design suggestions in it are best for touchscreens, but they would not necessarily impair cursor-based usability either. For example, sub-navigation on the right side of the page would be more user-friendly for touchscreen users, because most people are right-handed; they would therefore not bump or brush the navigation accidentally when holding the device in their left hand. This would make no difference to cursor users, so we might as well follow the touchscreen design guideline in this instance. Many more guidelines of this kind can be drawn from touchscreen-based usability.

A Showcase Of Responsive Web Design

Below we have a few examples of responsive Web design in practice today. For many of these websites, there is more variation in structure and style than is shown in the pairs of screenshots provided. Many have several solutions for a variety of browsers, and some even adjust elements dynamically in size without the need for specific browser dimensions. Visit each of these, and adjust your browser size or change devices to see them in action.

Art Equals Work
Art Equals Work is a simple yet great example of responsive Web design. The first screenshot below is the view from a standard computer screen dimension. The website is flexible with browser widths by traditional standars, but once the browser gets too narrow or is otherwise switched to a device with a smaller screen, then the layout switches to a more readable and user-friendly format. The sidebar disappears, navigation goes to the top, and text is enlarged for easy and simple vertical reading.

Think Vitamin
With Think Vitamin, we see a similar approach. When on a smaller screen or browser, the sidebar and top bar are removed, the navigation simplifies and moves directly above the content, as does the logo. The logo keeps its general look yet is modified for a more vertical orientation, with the tagline below the main icon. The white space around the content on larger screens is also more spacious and interesting, whereas it is simplified for practical purposes on smaller screens.

8 Faces
8 Faces’ website design is flexible, right down to a standard netbook or tablet device, and expands in content quantity and layout width when viewed on wider screens or expanded browsers. When viewed on narrower screens, the featured issue on the right is cut out, and the content below is shortened and rearranged in layout, leaving only the essential information.

Hicksdesign
The Hicksdesign website has three columns when viewed on a conventional computer screen with a maximized browser. When minimized in width, the design takes on a new layout: the third column to the right is rearranged above the second, and the logo moves next to the introductory text. Thus, no content needs to be removed for the smaller size. For even narrower screens and browser widths, the side content is removed completely and a simplified version is moved up top. Finally, the font size changes with the screen and browser width; as the browser gets narrower, the font size throughout gets smaller and remains proportional.

Information Architects
Here is a great example of a flexible image. The image in this design automatically resizes after certain “break” points, but in between those width changes, only the side margins and excess white space are altered. On smaller screens and minimized browsers, the navigation simplifies and the columns of navigation at the top fall off. At the design’s smallest version, the navigation simplifies to just a drop-down menu, perfect for saving space without sacrificing critical navigation links.

Garret Keizer
The website for Garret Keizer is fully flexible in wider browsers and on larger screens: the photo, logo and other images resize proportionally, as do the headings and block areas for text. At a few points, some pieces of text change in font size and get smaller as the screen or browser gets narrower. After a certain break point, the layout transforms into what we see in the second screenshot below, with a simple logo, introductory text and a simple vertical structure for the remaining content.

Simon Collison
With four relatively content-heavy columns, it’s easy to see how the content here could easily be squished when viewed on smaller devices. Because of the easy organized columns, though, we can also collapse them quite simply when needed, and we can stack them vertically when the space doesn’t allow for a reasonable horizontal span. When the browser is minimized or the user is on a smaller device, the columns first collapse into two and then into one. Likewise, the horizontal lines for break points also change in width, without changing the size or style of each line’s title text.

CSS Tricks
On the CSS Tricks website, like many other collapsible Web designs, the sidebars with excess content are the first to fall off when the screen or browser gets too narrow. On this particular website, the middle column or first sidebar to the left was the first to disappear; and the sidebar with the ads and website extras did the same when the browser got even narrower. Eventually, the design leaves the posts, uses less white space around the navigation and logo and moves the search bar to below the navigation. The remaining layout and design is as flexible as can be because of its simplicity.

Tee Gallery
As one can see, the main navigation here is the simple layout of t-shirt designs, spanning both vertically and horizontally across the screen. As the browser or screen gets smaller, the columns collapse and move below. This happens at each break point when the layout is stressed, but in between the break points, the images just change proportionally in size. This maintains balance in the design, while ensuring that any images (which are essential to the website) don’t get so small that they become unusable.

City Crawlers: Berlin
When varied between larger screen sizes and browser widths, this design remains flexible. It also remains flexible after a few layout pieces collapse into a more vertical orientation for small screens and narrow browsers. At first, the introductory image, logo and navigation image links resize proportionally to accommodate variations in screen and browser widths, as do the blocks of content below. The bottom columns of content eventually collapse and rearrange above or below other pieces, until (at the narrowest point) they are all stacked vertically. In the layout for the smallest screen and narrowest browser, the slideshow is left out altogether, the navigation is moved below the logo and other images are also removed.

Ten by Twenty
Ten by Twenty is another design that does not resort to changing layout structure at all after certain break points, but rather simplifies responsive Web design by making everything fully flexible and automatically resizing, no matter what the screen or browser width. After a while, the design does stress a bit and could benefit from some rearrangement of content. But overall, the image resizing and flexible content spaces allow for a fairly simple solution that accommodates a wide range of screen sizes.

Hardboiled Web Design
On wide screens and browsers, all of the content on this simply designed website is well organized into columns, sidebar and simple navigation up top. It’s a fairly standard and efficient layout. On smaller screens, the sidebar is the first to drop off, and its content is moved below the book previews and essential information. Being limited in space, this design preserves its important hierarchy. Whereas on a wider screen we’d look left to right, on a narrower screen we’d tend to look from top to bottom. Content on the right is moved below content that would appear on the left on a wider screen. Eventually, when the horizontal space is fully limited, the navigation is simplified and stacked vertically, and some repeated or inessential elements are removed.

Teixido
This design features a complex layout that looks inspired by a print style. When viewed on a standard wide computer screen, more portfolio pieces are featured and spanned horizontally across the page. As one moves down the page, more graphics and imagery span the space. On a smaller screen, the portfolio piece is cut down to one, and then eventually left out altogether for very small screens and narrow browsers. The visualizations below collapse into fewer columns and more rows, and again, some drop off entirely for very small screens. This design shows a creative and intelligent way to make a not-so-common layout work responsively.

Stephen Caver
This design has three main stages at which the design and layout collapse into a more user-friendly form, depending on how wide the screen or browser is. The main image (featuring type) is scaled proportionally via a flexible image method. Each “layout structure” is fully flexible until it reaches a breaking point, at which point the layout switches to something more usable with less horizontal space. The bottom four columns eventually collapse into two, the logo moves above the navigation, and the columns of navigation below are moved on top or below each other. At the design’s narrowest stage, the navigation is super-simplified, and some inessential content is cut out altogether.

Unstoppable Robot Ninja
This layout does not change at all; no content is dropped or rearranged; and the text size does not change either. Instead, this design keeps its original form, no matter what the change in horizontal and vertical space. Instead, it automatically resizes the header image and the images for the navigation. The white space, margins and padding are also flexible, giving more room as the design expands and shrinks.

Bureau
This is perhaps the simplest example of a responsive Web design in this showcase, but also one of the most versatile. The only piece in the layout that changes with the browser width is the blog post’s date, which moves above the post’s title or to the side, depending on how much horizontal space is available. Beyond this, the only thing that changes is the width of the content area and the margin space on the left and right. Everything is centered, so a sense of balance is maintained whatever the screen or browser width. Because of this design’s simplicity, switching between browser and screen widths is quick and easy.

CSS Wizardry
Harry Roberts shows that responsive design can also have quite humble uses. If the user has a large viewport, the website displays three columns with a navigation menu floating on the left. For users with a viewport between 481px and 800px, a narrow version is displayed: the navigation jumps to the top of the site leaving the area for the content column and the sidebar. Finally, the iPhone view displays the sidebar under the content area. Harry also wrote a detailed article about the CSS styles he added to the stylesheet in his article “Media queries, handier than you think“. A nice example of how a couple of simple CSS adjustments can improve the website’s appearance across various devices.

Bryan James
This last design by Bryan James shows that responsive Web design need not apply only to static HTML and CSS websites. Done in Flash, this one features a full-sized background image and is flexible up to a certain width and height. As a result of the design style, on screens that are too small, the background image gets mostly hidden and the content can become illegible and squished. Instead of just letting it be, though, a message pops up informing the user that the screen is too small to adequately view the website. It then prompts the user to switch to a bigger screen. One can discuss if the design solution is good or bad in terms of usability, but the example shows that Flash websites can respond to user’s viewport, too.

Conclusion

We are indeed entering a new age of Web design and development. Far too many options are available now, and there will be far too many in the future to continue adjusting and creating custom solutions for each screen size, device and advancement in technology. We should rather start a new era today: creating websites that are future-ready right now. Understanding how to make a design responsive to the user doesn’t require too much learning, and it can definitely be a lot less stressful and more productive than learning how to design and code properly for every single device available.

Responsive Web design and the techniques discussed above are not the final answer to the ever-changing mobile world. Responsive Web design is a mere concept that when implemented correctly can improve the user experience, but not completely solve it for every user, device and platform. We will need to constantly work with new devices, resolutions and technologies to continually improve the user experience as technology evolves in the coming years.

Besides saving us from frustration, responsive Web design is also best for the user. Every custom solution makes for a better user experience. With responsive Web design, we can create custom solutions for a wider range of users, on a wider range of devices. A website can be tailored as well for someone on an old laptop or device as it can for the vast majority of people on the trendiest gadgets around, and likewise as much for the few users who own the most advanced gadgets now and in the years to come. Responsive Web design creates a great custom experience for everyone. As Web designers, we all strive for that every day on every project anyway, right?

Further Resources

Responsive Web Design, A List Apart
CSS Media Query for Mobile is Fool’s Gold, Cloud Four
Designing for a Responsive Web with Heuristic Methods, Design Reviver
Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater
The Big Web Show #9: Responsive Web Design, 5by5 Studios
How to Use CSS3 Media Queries to Create a Mobile Version of Your Website, Smashing Magazine
Application: Rapid Prototyping of Adaptive CSS and Responsive Design, ProtoFluid
Handcrafted CSS: More Bulletproof Web Design, Dan Cederholm (printed book)
Flexible Web Book, Zoe Mickley Gillenwater (printed book)

(al) (vf)

Neues Hilfe-Portal für Agenturen

2010-11-09T23:09:34Z

Google ist stets bemüht, Agenturen bei der Nutzung seiner Werbe- und Web-Analyse-Lösungen zu unterstützen, um den Agenturkunden (d.h. den Werbetreibenden) indirekt die bestmögliche Leistung für ihr eingesetztes Werbebudget bieten zu können. In den strategisch wichtigsten Ländern stehen dazu jeweils eigene Teams zur Betreuung der Agenturen bereit. Als Ergänzung und sozusagen für den "Self-Service" wurde nun ein speziell auf diese Bedürfnisse zugeschnittenes Online-Hilfecenter erstellt.

Das Agency Help Center stellt alle für Agenturen relevanten Informationen auf einer zentralen Portalseite zur Verfügung. Hierzu zählen FAQs sowie Links zu Tools, Ressourcen und Zertifizierungen, die Google anbietet. Die Inhalte an sich sind nichts Neues. Sie liegen jedoch weit verteilt auf diversen Seiten und sind oft unter einander nicht verknüpft. Das Agency Help Center bündelt die Informationen nun auf übersichtliche Weise, was natürlich Zeit spart.

Leider wurde das neue Portal bislang nur für Agenturen in den USA und Großbritannien eingerichtet. Weitere Länder und Inhalte sollen im Laufe des 4. Quartals 2010 noch folgen.

kommentieren | Fan werden bei Facebook - Google Buzz - Twitter | Gefällt dir unser Beitrag? Wir flattr'n auch.

(title unknown)

2010-11-09T12:32:34Z

Over 75 Free Rapid E-Learning Resources

2010-11-09T07:21:00Z

The other day this guy asked me how to develop color schemes for his rapid elearning courses. Like a lot of guys, he has some issues with color perception so he wanted an easy way to match colors.

I have the same challenge. In fact, my wife’s probably getting annoyed with me always asking which shirts and pants match when I pack for the conference trips. It’s a good thing I can trust her. Otherwise, I might show up at the conference looking like a doofus in a leisure suit.

I shared some of the tools that I use for color schemes in previous posts like this one on creating your own rapid elearning PowerPoint template. I start by picking a color from the he image using Pixie. And then I take that color information to a site like Color Schemer to create a color scheme. That helps me have a consistent color scheme.

As I was searching previous posts to answer his question, I ran into a lot of the tools and sites that I’ve recommended in previous blog posts. So I thought that it might be a good idea to make a single list of some of the tools and sites like Pixie and Color Schemer that I’ve referenced before. So here’s a list of previously referenced tools and brief explanation of what they do.

Also, here’s a link to the 200 free rapid elearning tutorials I posted a while back.

Audio Resources

Samson Go Mic: I get lots of questions asking about a good mic for about $50. This is the one I use. [original post]
Levelator: automatically adjust the audio levels in your narration. [original post]
Audacity: free open source audio recording and editing software. [original post]
Myna: easy-to-use online audio editor that includes a library of assets. [original post]
Voice123 and Voices.com: find narrators for your elearning courses. [original post]

Creative Commons audio: good sites to get free audio for your courses. [original post]

CCMixter, The Freesound Project, OpSound, Free Music Archive, and Jamendo
Musicshake and TuneAround are free tools that let you easily create your own music and soundtracks.

Video Resources

Screenr: free screencasting tool; great for tutorials and simple software demos. [original post]
Preview Flash content on your computer: SWF Player and FLV Player [original post]
LectureScribe: free tool that lets you create whiteboard style lectures and save as Flash. Here’s a demo. [original post]
Windows Live Movie Maker: free and simple-to-use video editor. [original post]
Format Factory: convert media from one format to another. [original post]
Videomaker Magazine: great resource to learn video production tips. [original post]
HeyWatch: inexpensive, online video encoder. [original post]

Graphics Resources

Kuler: site to create custom color schemes. [original post]
Color Schemer: site to create color schemes. [original post]
Photo Resizer: use this application to quickly resize images to a specific resolution. [original post]
Image Tuner: resize, rename, and convert image formats with this free tool. [original post]
Poladroid: quickly create images that look like they were taken with a Polaroid camera. [original post]
Cartoonster: free tutorials that teach the basics of animation. [original post]

Image editing software:

Paint.net: free image and photo editing software that probably does most of what you need for elearning. [original post]
GIMP: free image editing and authoring software that give you more Photoshop-like power without the price. [original post]
Picnik: web-based image editor. [original post]
Aviary: web-based image editor. [original post]
Artweaver: good for basic graphics editing. [original post]

Font Resources

dafont.com: free and inexpensive fonts. Check the usage agreement. [original post]
Fontcapture: free to create the fonts. [original post]
YourFonts: $9.95 for custom fonts. [original post]

Stock Image Resources

iStockphoto. You can find photos, illustrations, video clips, and some Flash files. [original post]
Fotolio. Large selection and offers some free images if you complete a free registration. [original post]
eLearning Art: free sample character pack of stock images. [original post]
Fotosearch. Searches multiple sites. Also includes video, illustration, and audio clips. [original post]
Stock.xchng: lots of free stock images. [original post]
Flickr: creative commons images that you may be able to use in your courses. [original post]

The following sites were recommended by blog readers. [original post]

Writing & Reading Resources

Copyblogger: the site is focused on writing for blogs but the ideas work for elearning courses, too; especially when it comes to creating learner-centric content. [original post]
Windows Live Writer: this is what I use to write my blog posts. It’s free and works great. [original post]
Making Change: Cathy Moore does a good job providing tips that will improve how you write for your courses and with your instructional design. [original post]

PowerPoint Resources

Free Training Templates: Microsoft offers a number of free training templates that could serve as a starting point for beginning rapid elearning designers. [original post]
Motion Path Tool: add-in to better manage animations in PowerPoint. [original post]
PowerPoint Color Swatch: quickly create custom color themes in PowerPoint 2007 and 2010. [original post]

Community & Social Media Resources

TED: there are a lot of very good videos; some relevant to learning and some just inspiring. [original post]
Common Craft: great way to get an overview on many of the social media basics. They also do a great job presenting information; a good model for some courses. [original post]
Vuvox: create interactive collages that you can insert into your elearning course, such as in this example. [original post]
Feedly: a simple and fast way to browse your favorite sources. [original post]
Netvibes: great way to create a custom home page and load it with the information you want quick access to like blogs that your follow. [original post]
Dipity: create interactive timelines. Insert into your course using the web objects feature. [original post]
ClusterURL: make free webpages using your browser’s tabs. Here’s a tutorial. [original post]
Google Reader: use Google’s web-based feed reader to keep up with blogs and news. [original post]

Miscellaneous Resources

Dropbox: this is my favorite application. It makes it easy for me to sync across multiple computers and collaborate with others. [original post]
Airdropper: easy way to have someone send files to you using your Dropbox account. [original post]
Fences: keep your desktop clean by quickly hiding or displaying your icons and shortcuts. Great for screencasts and presentations. [original post]
OneNote: by far one of my favorite applications to take notes. It integrates with Outlook and I have it synced across all of my computers using Dropbox. [original post]
Evernote: great way to capture and document almost anything. Check out the Articulate Guru entry. [original post]
Zoomerang: create free surveys [original post]
Web2PDF: convert a website or blog to PDF. [original post]
AlacrityPC: shut down unnecessary services and programs before you run a resource intensive application like multimedia authoring applications. [original post]
ZoomIt: screen zoom and annotation tool for presentations that include application demonstrations. [original post]
Survey Monkey: create free surveys and collect feedback. [original post]
MindManager: this isn’t free, but a tool I use to create mindmaps of my scenarios which I can export to PowerPoint. [original post]
7-Zip: free application to zip and unzip files. I use it to unzip .pptx files. [original post]
Karen’s Directory Printer: easy way to create a list of files and folders on your computer. [original post]

Hopefully you can use these applications when working on your courses. If there are some free resources you think should be on the list, feel free to share them in the comments section.

Tidbits:

I’m in Philadelphia and New York City this week. Kineo’s sponsoring a couple of elearning workshops. I’m doing a 30 minute session at each. To learn more, check out Cammy’s blog.
NYC Articulate Jam Session on November 11. I’ve set some time aside to do an informal Articulate jam session. If you’re interested in attending the free session, here are the details.
Jeanette’s presenting at the CIASTD Regional Conference on November 15 in Indianapolis. She’s doing a great session on how to get started in rapid elearning. Check it out if you’re in the area.

Download your free 46-page ebook: The Insider's Guide to Becoming a Rapid E-Learning Pro

Archos 7: Android-Tablet für kleines Geld

2010-03-06T05:19:00Z

Archos stellte auf der CeBIT das neue Multimedia-Tablet mit der Versionsbezeichnung 7 vor. Das flache Gerät basiert auf Android (Video)

Archos stellt gleich zwei neue Tablets vor: Das eher einem Bilderrahmen gleichende Archos 8 und das handliche 7er, das uns auf der CeBIT auch vorgeführt wurde (siehe Video). Beide wurden speziell für den Einsatz zu Hause entwickelt. Sie bieten einen permanenten Zugang zu Internet und Multimedia-Inhalten auf einem großen Bildschirm von 7 bzw. 8 Zoll.

Die Archos-Home-Tablets enthalten einen ARM 9 Prozessor mit 600 MHz. Der Archos 7 hat zudem einen induktiven Bildschirm (nicht kapazitiv wie beim iPad) – ist also nicht Multitouchfähig. Aber was will man für etwa 150 Euro auch verlangen?

Dank der Archos Video-Player-Software können Inhalte von YouTube direkt auf das Home-Tablet in der Küche, dem Garten und im Schlaf- oder Wohnzimmer gestreamed werden, aber auch von dem integrierten Speicher. Der integrierte MP3-Player, der Zugriff auf kostenlose Musik-Streaming-Services wie Deezer bietet, sowie die eingebauten Lautsprecher machen die Home-Tablets zum Ersatz für die HiFi-Anlage oder das Radio.

Beide Archos Home-Tablets sind dafür entwickelt, dem Anwender die Kommunikation so einfach wie möglich zu gestalten und dabei Zugang zu Informationsservices wie Nachrichten, Wetter oder Branchenverzeichnisse zu gewähren. Der Nutzer kann sein Gerät so konfigurieren, dass die Services wie „Live Widgets“ auf dem Desktop oder im Internet Browser angezeigt werden. Die Familienmitglieder können einfach über den Touchscreen auf E-Mail, Facebook, Twitter oder andere Soziale Netzwerke zugreifen. Dank Android-Betriebssystem von Google können Home-Tablets mit den Anwendungen aus dem Archos „AppsLib-Store“ personalisiert werden.

Das schlanke „ARCHOS 7 Home Tablet“ ist nur 12 mm dünn sowie mit einem Gewicht von rund 350 Gramm gut mitzunehmen. WLAN agiert nach dem 802.11g-Standard (54 MBit) – HD-Inhalte dürften sich also besser vom integrierten Speicher anzusehen sein als aus dem Internet. Angeschlossen wird das Gerät alternativ via USB-2.0-Schnittstelle. Das “ARCHOS 7 Home Tablet” hat einen geringen Stromverbrauch und bietet daher eine Akkulaufzeit von 7 Stunden bei Videowiedergabe und 44 Stunden bei Musikwiedergabe. Es ist ab April 2010 in den Speichergrößen 2 GB (ca. 150 Euro) und 8 GB (ca. 180 Euro) erhältlich.

Website der Archos Home Tablets

Verwandte Artikel

	Tablets von Asus, Nvidia, HP, Dell: Es wird serviert Auf der CES stellten gleich mehrere Firmen Ihre Tablet-Computer vor - sowohl völlig neue als auch weiterentwickelte Systeme. (12. Januar 2010)
	Archos 9 Tablet PC: Net-Tablet Der Archos 9 Tablet PC könnte eine interessante Alternative für diejenigen sein, denen ein Netbook zu langweilig ist (13. Juni 2009)
	Microsoft Windows Phone 7: Ihr müsst draussen bleiben Das Konzept des neuen Microsoft Windows Phone 7 sieht spannend aus, allerdings wird man sich wohl ein neues Handys kaufen müssen. (4. März 2010)

5 Reasons To Stay with Lightroom (and not switch to Aperture)

2010-02-16T05:59:52Z

Obviously there’s been a lot of buzz around lately about Apple’s Aperture 3. I read an article yesterday titled “Five Reasons For Switching from Lightroom 2 to Aperture 3″ by a gentleman named Marco. So I figured I’d take a stab at my own rendition of the “5 things” article (no offense to Marco) and write about 5 reasons to stay with Lightroom.

Let me just get one thing out from the start though. Will this article seem Lightroom biased? You betcha! Because I am Lightroom biased (you’re at a blog called Lightroom Killer Tips if you haven’t noticed). I’ve been using it for over 4 years. I know it like the back of my hand. However, as an expert in the industry I can’t just go around saying “my program is better than yours” without testing the other one. I had a copy of Aperture 3 installed the day after it was announced and have been kicking the tires since then. Here’s what I’ve come up with.

Reason #1: Enjoying the Digital Darkroom (this was reason #1 from Marco’s article)
I’ll go head-to-head with this one because I think Lightroom is better here. One big reason is that in Lightroom (the LR3 beta) we have Collections in the Develop module which keeps me from bouncing back and forth (something I found myself doing a lot in Aperture). And when it comes down to it, the only difference is tabs in Aperture compared to modules in LR. Aside from wishing the Develop module had Folders and Collections in it (like I said, LR3 beta has Collections now), I don’t find myself cursing the modules in Lightroom. If its not a module I need to use then I simply just don’t click on it. And the reason why LR has more modules than A3 has tabs, is because Adobe has located two key areas (slideshow and web) there instead of a menu up at the top.

Reason #2: Camera Calibration, Effects, Collections, History panel, tighter Photoshop Integration, Vignettes and other stuff
Remember when Camera Calibration profiles came out for Lightroom? You should because everyone absolutely loved them. It’s one of my favorite panels in Lightroom. But it’s not in Aperture. Lightroom has tighter integration with Photsoshop and the Graduated filter. Lightroom 2/3 beta has better effects when it comes to adding grain and vignetting. The History aspect of Lightroom is way better. And in the article referenced above, he dings Lightroom for not having “Books, Loupe, Light Table and Full Screen Mode”. Books definitely go into the win column for Aperture (see #3 below). But Lightroom does have a Loupe view. Even though its different, it still does the same job. Light Table…. eh, its cool but is it worth switching for? And of course we do have Full Screen mode in Lightroom. Just press the F key.

Reason #3: Printing
This is one of those areas where you can argue either way but I think Lightroom makes a stronger case. Lightroom has custom print templates (in LR 3 beta) and an entire Print module, that you have to admit, is one of the most robust in the industry. Aperture has books but that’s about it. They’re both important. Some portrait and wedding pros swear by Lightroom’s Print module and some folks swear by the great looking books in Aperture. Which is more important? That’s up to you. Personally, I’ll take the Print module in Lightroom. I can still print books elsewhere, but I can’t get Lightroom’s Print module anywhere else. Do I wish Lightroom had both? Yep. But it doesn’t so I have to make a choice.

Reason #4: Noise Reduction
This one definitely goes in the win column for Lightroom. If you look at Aperture 3’s feature list, it doesn’t even mention the word noise and as you know, noise removal is BIG. I ran quite a few images through the noise removal settings in both programs. Aperture doesn’t even come close in my opinion. Two things I noticed when comparing them: 1) The noise removal (luminance and color) is noticeably better and the edges seem more crisp as opposed to blurred in Aperture and, 2) Lightroom photos retained more of their color even after cranking up the Color Noise removal setting pretty high.

Basically, when it comes down to reading the raw data and doing something useful with it (demosaicing, sharpening, and noise removal), my money goes to Adobe. You’ve gotta realize that being the best at raw processing has to rank up pretty high in Adobe’s priority list. I’m not so sure where it would rank with Apple.

Reason #5: This isn’t an “I’m in the mood for…” game
I’m going to directly disagree with #5 from his list (supporting competition) and say ABSOLUTELY, POSITIVELY, NO WAY! As a consumer, your (and my) job is not to support competition. It’s to support the best product out there and to reward that product by opening your wallet. Your job is to pick the best tool for your job regardless of whether there’s 10 companies that do the same thing or none. Here’s something to chew on. This isn’t a game. Your photography workflow shouldn’t be “sure, I’ll use Lightroom today but maybe Aperture tomorrow”. There’s always going to be features in one program that you like better than another. It happens in every aspect of our lives. Ever buy a car one year only to find out the next year’s model (or a competing model you looked at previously) has something really cool you wish you had? Do you go out and trade your car in for a huge loss and get the new model? Some of you do I’m sure. But it’s surely not economical to do so, and it takes a lot of your time, energy, and money to play that game. The rest of us, are happy enough with our existing car and we work with it. Your goal is to pick the program that works best for you at the time you’re looking for one, and then stick with it. Whether you’re a working pro or an avid hobbyist, nobody has the time to play the “switcharoo” every 18 months.

Reason #5.5 (this is just a joke): Did Aperture Really have to copy the Cyanotype preset from Lightroom?
I mean, of all the presets to copy from Lightroom, they picked Cyanotype? Does anyone even use that preset? I can think of no better reason to just stick with Lightroom, because at least they were the first to use that horrible effect as a preset

Final Thoughts
If you’re a current Lightroom user, you’re among the group of the most used photo management/processing software in the world. There’s a reason why when you do a search for buzz, news, tutorials, presets, etc… on Lightroom vs. the same for Aperture, you find much more about Lightroom. It’s an awesome program and like anything out there, will just get better with time. Be happy with it. If your curiosity just has to get the best of you then by all means, download the free trial of Aperture and give it a try yourself. Maybe you’ll switch. If that’s the right thing for you then go for it. Just don’t do it because it’s new and different. As always, leave a comment. I welcome your thoughts on the topic (just be nice)

An introduction to Lightroom Plugins

2009-10-08T02:47:00Z

Plugins in Lightroom
Lightroom has a plugin architecture that allows third parties to add to the functionality of Lightroom. Often these plugins add to Lightroom's core functions, but more often they add entirely new features to the program. Plugins are a very different beast to Presets, and sometimes users can get the two confused. Presets are merely stored sets of instructions for Lightroom tools (and for plugins for that matter). Plugins, on the other hand, are additional programming, added to Lightroom.

Plugins for Lightroom originally came in one of two forms, Export and Web Gallery. But programmers being what they are have made much more of the available SDK to create even more than this, along with changes in the SDK. So we can broaden this view into more sections:

Web Galleries
Export Plugins
Metadata Plugins
Post Process Plugins
External Editors
Import
Utilities

With this in mind, let's take a look at some of the available Lightroom plugins. This is by no means an exhaustive list, and many of the Plugin developers that are linked here have many other Lightroom Plugins that are worth a look.

Web Galleries
Lightroom ships with 2 galleries: Lightroom HTML Gallery and Lightroom Flash Gallery. Using templates you can get many different looks from it, but they all boil down to these two engines. A small group of developers have created gallery addons for Lightroom, myself included. Here's a selection to look at:

LRB Portfolio: This is my own website in a gallery plugin

The Turning Gate: Matthew Campagna has a large set of gallery plugins for Lightroom

Lightroom Galleries: Joe Capra has LRG Complete as a standalone Flash Gallery for Lightroom

SlideShowPro: Todd Dominey has converted his SlideShowPro Flash component into a powerful gallery for Lightroom

Export Plugins
Export Plugins take files from Lightroom and send them to services are required. A prime example of this is Export to Flickr, the flickr.com photo sharing service. Again, I've created some of these, but the absolute king of this is Jeffrey Friedl.

LR2Twitpic: This is my own plugin to allow users to post from Lightroom to Twitter via Twitpic

Jeffrey's Lightroom Goodies: Rather than link to individual plugins, you find all of Jeffrey's plugins there, including Flickr, SmugMug, PicasaWeb and Zenfolio.

LR/Blog: This plugin from Timothy Armes allows you to post directly to your Blog from Lightroom

Metadata Plugins
Metadata Plugins allow Lightroom to have custom metadata fields added to them. They're probably the easiest to code, but unfortunately there is no good way to allow the user to create a random custom field from within a plugin.

Search and Replace: This plugin allows users to search and replace text inside Lightroom metadata.

LRB Releases: This is a plugin that allows a user to enter/track model and property release info in Lightroom

LR/Transporter: This nifty plugin allows you to export metadata to text files among other things.

Nature Data LR: provides species data fields on your photos. It also allows you to create dynamic collections of your photos based on families of species.

Post Process Plugins
Post Process Plugins take the exported image and perform a further process on the files.

LR2/Mogrify: This plugin lets a use interact with the command line program Mogrify, to create watermarks and borders.

External Editors
There are a substantial number of Photoshop Plugins and Standalone programs that can be used with Lightroom. These generally create a rendered version of the files which is then processed by the application and finally stored in the Lightroom Catalog. Sometimes these are accessed with the 'Edit in' menu, or from the 'Plug-in Extras' menu. (Note that the Photoshop Plugins are modified to work as apps for Lightroom and that generally Photoshop Plugins are not useable in Lightroom)

Nik Filters: Nik have a range of tools from Color Efex for filter processing to noise reduction with D-Fine.

onOne Software: onOne have a range of plugins that go from Phototools for photo manipulation to PhotoFrame for creating image frames.

PT Lens: is a great lens correction program that includes a large lens library for automatic distortion correction.

Photomatix Pro: This plugin/app set allow users to export directly from Lightroom into Photomatix Pro to generate HDR images.

Import Plugins
While Import is only a small part of the Lightroom SDK, some plugin makers have successfully created interesting plugins that import into Lightroom.

Lightroom Tether: This plugin from Rich Cooper allows users with PTP based cameras to Tether directly to Lightroom (Note current Canon cameras do not use PTP anymore)

Video Assets: This nifty plugin from Jeffrey Friedl allows a very basic video import into Lightroom, and the ability to play them back via an external program.

Utilities

Config Backup: This plugin allows the user to back up the Lightroom Preferences and Catalog backup files

Preview Extraction: This plugin lets you access the previews used by Lightroom. A lifesaver for those that have accidently deleted photos.

Adding Plugins to Lightroom
Lightroom Plugins are automatically loaded if they are stored inside a folder called 'Modules' in the Lightroom Presets folder. The quickest way to access this folder, is to open Preferences (in the Edit menu on PC, the Lightroom menu on Mac). Next click on 'Presets' and then finally click on the 'Show Lightroom presets folder' button.
Inside this folder is a folder called Modules. Place the plugins there.
However I don't recommend doing it this way. Plugins like this cannot be removed from Lightroom via the Plugin Manager. Instead, create a folder called 'LR Plugins' in (My) Documents. Place all your plugins here (except Web Galleries). Use the Plugin Manager to add and remove plugins as you require them.

Plugin Manager
Open the Plugin Manger via the File menu. There's a four fingered shortcut for it, but generally clicking the menu is as quick as making a claw out of your hand! On the bottom left are 2 buttons (above Plug-in Exchange): Add and Remove. Simply click Add and browse to the LR Plugins folder to select the plugin you want to load. That's it pretty much. You can remove plugins here also. If the plugin writer has added information relating to the plugin, you'll also find it here.

For Web Galleries, open the Lightroom Presets folder as described above, and place the .lrwebengine file inside a folder called 'Web Engines'. Create it if it doesn't exist.

And so ends a quick look a Lightroom plugins. I do intend looking deeper into individual Plugins as time goes by.

Nikon updates Capture NX, Camera Control Pro

2008-02-21T13:30:00Z

Nikon has released Capture NX v1.3.2 and Camera Control Pro v2.1.0 for Mac and Windows.

Mutter Bohlens unglaublicher 10 000-Euro-Gewinn - RTL sagt ... - Hamburger Abendblatt

2008-02-22T05:52:55Z

Chart-King

Mutter Bohlens unglaublicher 10 000-Euro-Gewinn - RTL sagt ...
Hamburger Abendblatt - vor 8 Stunden gefunden
Es ist leichter, fünf Richtige im Lotto vorherzusagen, als im Telefonspiel von "Deutschland sucht den Superstar" (DSDS) zu gewinnen. Die Wahrscheinlichkeit liegt bei eins zu 55 491 - im Lotto. Dennoch versuchten Hunderttausende RTL-Zuschauer, ...
Bohlens Mutter und der 10.000-Euro-Gewinn Quotenmeter
Bohlens Mutter gewinnt 10.000 Euro bei DSDS Spiegel Online
WELT ONLINE - Netzeitung - Handelsblatt - Frankfurter Allgemeine Zeitung
und 46 ähnliche Artikel

Porsche führt Hausbanken vor - Financial Times Deutschland

2008-02-20T22:18:12Z

MotorZeitung.de

Porsche führt Hausbanken vor
Financial Times Deutschland - vor 6 Stunden gefunden
von Oliver Wihofszki (Stuttgart), Yasmin Osman und Rolf Lebert (Frankfurt) Der Autobauer Porsche düpiert die Banken in deren Kerngeschäft. Das Stuttgarter Unternehmen teilte mit, eine Kreditlinie von 10 Mrd. Euro voll auszuschöpfen, um das Geld nun ...
Porsche macht Bankgeschäfte im großen Stil Handelsblatt
Porsche nutzt Kreditlinie über 10 Mrd Euro voll aus manager-magazin.de
People and Deals - Topnews - Geldidee - Die Presse
und 25 ähnliche Artikel

Increasing Asus Eee PC's Screen Resolution

2008-02-12T04:56:00Z

Jaffa of the Eeeuser forum has posted a hack to increase the screen resolution to 960 x 576 and 1280 x 976 under Linux including the default Xandros install.

Screen at 960x576:

...and 1280x976:

It works by spawning a VNC server and then using a VNC client back to localhost. At the moment there are two flaws:

1) Ctrl-Alt-T opens a terminal in the master X session, rather than the one being watched. If launched from a menu, it doesn't render properly.

2)krdc, despite having options to start fullscreen and scaled, seems to ignore the options.

You can read the full thread, including complete instructions, here.

Asus Eee PC

2008-02-07T18:44:26Z

(Hinweis an Eee-Besitzer: Für Anleitungen besuchen Sie bitte main wiki page. Diese Seite enthält Hintergrundinformationen über das Gerät und Weiterentwicklungen.) Einleitung [Eee PC] Der ASUS Eee PC (ausgesprochen „E P C“) ist ein ultraportables Notebook zu Preisen ab $299. Es wurde von Intel and ASUSTeK entwickelt basierend auf Intel's wp>Classmate PC-Projekt, jedoch auf den Endkundenmarkt gerichtet. Anders als viele ähnliche Geräte, insbesondere ultramobile PCs und mehr und mehr …