Berliner Stadtzeitung – Scheinschlag

Heute habe ich mal wieder eine Ausgabe (3/06) des “Scheinschlags”:http://www.scheinschlag.de aus einem der “Aufsteller”:http://www.scheinschlag.de/aufsteller/index.html gefischt. Ich bin jedes mal aufs neue von der Gestaltung dieser Stadtzeitung beeindruckt. Positiv! Ich finde es wirklich gelungen, aufgeräumt, akzentuiert, gut lesbar. Den Fotos wird Platz gelassen und die verwendeten Schriften gefallen ebenso. Vom Stil am ehesten der Taz entsprechend allerdings überwiegend in schwarz-weiß. Das alles auch noch gratis. Die anderen Stadtzeitungen die sonst ungefragt in meinem Briefkasten landen, treten meist den direkten Weg in die Papiertonne an sobald ich den Briefkasten geöffnet habe denn visuell machen sie meist all das falsch was ich beim Scheinschlag komplimentiere.

Inhaltlich geht es beim Scheinschlag natürlich um Berlin und im speziellen auch um Mitte denn dort sitzt auch die Redaktion. Ich mag vor allem den Kulturteil da sich dort hin und wieder wirklich interessante Dinge finden.

Also – mal mitnehmen und reinschauen ist meine Empfehlung.

Mac OS X on Intel

Yeah I know, this is a little late but I just browsed through the arstechnica website and found a very old article which reviewed the second »Developer Release of Mac OS X (DP2)«. The Review itself is really interesting but what struck me was the Epilogue which says on Tuesday, December 14, 1999: »The OpenStep APIs are cross platform. Mach is cross-platform. WebObjets is cross-platform. x86 builds of Rhapsody, Mac OS X Server, and Mac OS X inside Apple have been all but confirmed. Rumor has it that Apple routinely synchronizes all changes to Mac OS X across both PowerPC and x86 builds of the OS. Clearly, Apple’s choice of where to deploy its new operating system is not limited by the technology. If they decided to try releasing a version Mac OS X for x86 processors, it would be technologically within their means. But will they do it? I seriously doubt it. Still, it’s fun to look for cross-platform clues within Mac OS X DP2.« On the page they give some examples for several hints in the OS for its multi platform existance. So it shouldn’t have shocked anyone when Steve came up the stage to announce that Mac OS X had an existance on x86 eversince. I mean just the fact that NextStep ran on both could’ve given you that clue but still it was something like abortion being allowed by the pope himself to many of the mac-thusiasts. And by the way – I love arstechnica ! Also recommended:

Leseempfehlung

Ich dachte mir, wenn ich schon nichts eigenes Poste könnte ich zumindest mal eine Leseempfehlung aussprechen. Ich bin gerade noch zu sehr mit anderen Dingen beschäftigt als das ich gehaltvollen eigenen Inhalt produzieren könnte. Schnupfen hab ich auch grad.

Anlass für diesen Post ist die kürzlich vorgestellte Modifikation des Urheberrechts. Die Privatkopie oder den Bagatellfall gibt es nicht mehr. Einmal eine CD Raubkopiert kann mehrere Jahre Haft bedeuten. Ich habe zwar ernsthafte Zweifel an der Durchsetzbarkeit aber man sollte sich nicht mehr wundern wenn die ersten derartigen Strafen verhängt werden. Im chaosnahen Umfeld haben sich natürlich schon diverse Leute deutlich qualifizierter zu diesem Thema geäußert als ich weswegen ich einfach mal die entsprechenden Links nenne und eine uneingeschränkte Leseempfehlung verteile:

Preparing Photos for the Web

This post is about the weird problems that can occur when you try to publish your photos on a website. Everything looks fine in your Photoshop but when you look at the pictures with your web-browser it looks almost completely different. Of course it is still the same picture with the same objects on it but the colors look dull, to dark or even have different tones. People asked me a lot about this because they knew that I was kind of experienced with color-management which is why I decided to write something about it.

It is really not that hard to prepare your pictures for the web. In fact most of the »consumer« cameras already produce pictures which are ready for the web. This is because they are using the sRGB color space which was made for the uncomplicated use of digital images. It is a very small color space but because of that most of the displays and monitors out there are able to produce sRGBs colors. The cameras deliver sRGB pictures which can be viewed on uncalibrated displays and monitors. Consumer printers are also able to reproduce the sRGB color space so you can even print your pictures properly without the need of adjusting any color options and settings. Needless to say that sRGB makes a lot of sense for the world wide web as well since the vast majority of the displays and monitors that are used for looking at websites are not calibrated as well. I recommend reading a more detailed explanation of sRGB here.

Of course a small color space is not suitable for professional or semi-professional use. Most of the more expensive cameras and I think all of the SLR cameras more than just the sRGB color space in which the pictures can be taken. Two of the most common ones are Adobe RGB and ECI-RGB. Compared to the sRGB color space these two are pretty huge. If your camera only does 8 BIT Pictures you can use sRGB with no trouble at all. It will make your life easier but if you take pictures in 16 BIT it is really recommended to use a larger color space because otherwise you would throw away a lot of color information just in the moment you are taking the picture.

I don’t want to get lost in details here so it is important to know that there are smaller and larger color spaces. sRGB is a pretty small color space but is very useful for the uncomplicated exchange and use of images and because of that it is being used in the web as well. It has been endorsed by the W3C, Exif, Intel, Pantone, Corel, and many other industry players. It is also well accepted by Open Source software such as the GIMP, and is used in proprietary and open graphics file formats such as SVG.

Alright then. If you are saving a picture for the web, make sure you converted it to sRGB before saving it. I will show you what happens if you don’t do that. I suggest you open each of those sample pictures in an extra tab of your browser because you can’t really see the differences at that size.


This is what the picture is supposed to look like. I converted it to sRGB before saving it and I tested it on different machines, with different browsers. There is no sRGB profile attached to it. You can attach it if you like but most of the software out there will assume that a picture without an attached profile is in the sRGB color space anyway. This is the big advantage of sRGB.

Image converted to sRGB, no profile attached

with eci

The second version of my sample picture was converted to ECI-RGB when I opened it in Photoshop. I always use a large working space profile for manipulating and editing pictures. I saved the picture without converting it to sRGB and without attaching the ECI-RGB profile. The colors look dull and a lot of the saturation is gone too.

Image converted to ECI RGB, no profile attached

Picture converted to ECI RGB but no profile attached

The third version is also in the ECI-RGB color space but this time with the ECI-RGB profile attached to it. Your browser might not be able to understand the profile but if you save the picture on your computer and open it with a program which is able to understand color profiles you can see the colors like they were supposed to be. With a profile attached software like Photoshop knows how the colors should be displayed. It is kind of a translation help.

Image converted to ECI RGB with the ECI RGB Profile attached to it

Picture converted to ECI RGB - profile attached

The last version was converted to my displays profile. During my research for this I found some websites claiming that this would be the best way to get your pictures look the same in photoshop and on the web. This nonsense of course because there will be just a few people at best who have the same display with the same profile as you do. But see for yourself.

Image converted to my displays profile, no profile attached

with eci

It is a little tricky if you have a calibrated display because if you are converting your pictures to sRGB it is likely to happen that they will look different compared to the original. Many people get confused by this and even I was questioning my senses when I tried to get my pictures to look the same in Photoshop and on the web. I set up these pictures and tried them on different machines and I came to realize that the sRGB version looked best in all the cases even-though it didn’t look exactly like the original on my machine. You really shouldn’t worry about that.

It is even more trickier when you are working on a mac. This is because Mac OS X and most of its programs like Safari, Mail and Preview are color management aware. This means Mac OS X is capable of understanding color profiles and it is one of the many reasons why I love it. For new users this is confusing though. When you’re looking at webpages using Safari it will interpret the profiles which are attached to pictures. If you look at the ECI-RGB version of my sample picture which has the ECI-RGB profile attached to it you will see what I mean. If you looked at the pictures using Safari, NetNewsWire, Vienna, Newsfire etc. look at it again using Firefox and you will see what the rest of the web is seeing. This is because Firefox is not capable of interpreting color profiles.

If you have further questions I’d be pleased to answer them. Just leave a comment.

Annotations:

RGB Working Space Information

Technorati Tags:
, ,

Website Editing on OS X

I started building and designing websites in the mid nineties when I got my first computer. Back than there were only very basic WYSIWYG editors available and you were better off knowing how to actually write HTML in an text-editor of your choice. When Dreamweaver came out I walked away from writing HTML because the results were satisfying enough. Then I lost interest in websites and was more happy doing some print stuff. After a couple of years I got interested in websites again when the browser were finally supporting CSS and other webstandards properly. In fact it was Tim who got me hooked to the web again by showing me what was possible nowadays. Recently some people asked me how I would actually build websites. Usually the people who were asking me are mac users so they wanted to know the best tool. The first thing I tell them is that I don’t use any WYSIWYG editors like GoLive or Dreamweaver because the produce horrible and mostly inefficient code. Instead I use a combination of tools which I’m about to list right here:

Transmit
I use Transmit a lot. It is the major interface to all the webservers. It allows me to edit html and css documents right on the server. With a doubleclick on the file transmit opens the document in my default editor. When I save the file after editing it, transmit automatically uploads the modified file back to the server. This works pretty good. You can’t get confused with links or locations of files because you work right on the server – in the right environment. You can do the same with images, if they are not too heavy for your connection. In Transmit you can open .jpg files with your favorite pixel manipulation software, when saving it Transmit puts it back on the server. It also has tabs for multiple connections at the same time and you can even drag and drop files between theses tabs / servers. Look on panic.com to see the other cool features of Transmit.
TextMate
Textmate became my favorite editor in seconds. I didn’t even wait to let the trial version expire before I bought it. This piece of software behaves so well with xhtml, css and many many other languages. Tons of useful snippets, macros and autocompletions make Textmate my favorite. It also features a project view and tabs and really a lot of other great features.
Firefox
The browser of choice is Firefox. It isn’t the fastest browser on the mac but still the most accurate one in terms of rendering. Safari came pretty close but Firefox is still a little ahead. Firefox also is a lot better in debugging javascript. Another great feature of Firefox is its extensibility. URL: http://www.mozilla.com/
Firefox Extension: Webdeveloper
This extension is a must-have for every web developer. You can live edit the css of the website you are currently looking at to instantly see the effects of your modifications. You can let it outline all block level elements or display all the id and classnames of the elements. But it can do so much more. It is truly one of the most helpful tools to debug html and css errors and glitches. URL: http://chrispederick.com/
FirefoxExtension: Firebug
Firebug is a small toolbar that show up on the bottom of the Firefox window. It shows javascript and css errors and with a click on the bar it expands to a window with detailed information on the errors. With Firebug you can also see the »Ajax« data that is being loaded in the background or you can inspect elements of a webpage clicking on them. It is really the perfect partner for the webdeveloper extension giving you all the debug tools you need. URL: http://www.joehewitt.com/
The W3C Markup Validation Service
I know this one is pretty obvious but it also helps debugging unexpected behavior of you webpages so go there and check your websites. URL: http://validator.w3.org/

With these tools building webpages became a lot of fun and its fast too. I know different people use different tools but thats really not the point here. I just wanted to have a URL that I could people point to when they ask me: “So what are you using for building webpages?”

Technorati Tags:
, ,