Alexander Sperl http://www.alexandersperl.de Fri, 03 Sep 2010 11:27:34 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Logo Panne http://www.alexandersperl.de/2010/09/logo-panne/ http://www.alexandersperl.de/2010/09/logo-panne/#comments Fri, 03 Sep 2010 07:22:56 +0000 Alexander Sperl http://www.alexandersperl.de/?p=662 Ich lese gerade einen Artikel in der Frankfurter Rundschau über die Tatsache, dass der hessische Energieversorger HSE ein neues Logo bekommen hat, das es schon gab. Auch der Slogan „Das Ganze sehen“ war bereits vergeben. Interessant, dass es auch einer so renommierten Agentur wie Jung von Matt passieren kann, eben nicht „Das Ganze“ zu sehen…

Auf jeden Fall ist es interessant die beiden Logos mal nebeneinander zu sehen:

HSE Logos

Die Logos für den Energieversorger HSE (links) und für die Henningsdorfer Stahl Engineering GmbH

Sicherlich gibt es Unterschiede, aber der sehr ähnliche Charakter der beiden Entwürfe ist unverkennbar. Interessant ist auch, dass die beiden Abkürzungen identisch sind. Ich lasse die Interpretation des letzten Satzes einfach mal offen.

Aber was bedeutet das jetzt eigentlich? Wenn es einfach ein Versehen sein sollte, wovon ich stark ausgehe, dann ist es ein äußerst peinliches. Der Artikel in der FR weißt sehr süffisant darauf hin, dass man vor allem den Slogan „Das Ganze sehen“ leicht ergooglen kann. Offensichtlich ist also die Recherche-Arbeit bei diesem 400.000,- € Projekt etwas zu kurz gekommen, möchte man süffisant ergänzen. Ich will nicht wissen, wie da die Stimmung bei den Verantwortlichen ist.

]]> http://www.alexandersperl.de/2010/09/logo-panne/feed/ 0 Double Feature: What I love about Weebly – What I hate about Weebly http://www.alexandersperl.de/2010/07/double-feature-what-i-love-about-weebly-what-i-hate-about-weebly/ http://www.alexandersperl.de/2010/07/double-feature-what-i-love-about-weebly-what-i-hate-about-weebly/#comments Wed, 14 Jul 2010 08:00:54 +0000 Alexander Sperl http://www.alexandersperl.de/?p=635 When I confronted my course Presenting Content this semester with the basics of HTML and CSS, they and I had a couple of frustrating sessions. I’m doing this for some semesters now and never had quite such an experience. I was thinking: Am I this bad a teacher to not get the stuff across (it’s not that hard, after all) or did I hint at Weebly.com too early and most of the classes just switched off as early as this?

It also made me think about Weebly.com itself, I mean, from the perspective of a web designer. So here are two lists: “What I love about Weebly” and “What I hate about Weebly”.

What I love about Weebly

  • quick results that look nice
  • you can concentrate on the content more
  • no need to have a deep insight into HTML and CSS (which was the killer reason for most in my courses this semester to use it)
  • no need to deal with HTML and CSS at all if you don’t want to
  • it doesn’t need to be tweaked to get a ‘normal’ website, like you would tweak WordPress (you know, get rid of the calendar, the comments on each page and so on)
  • you have a couple of options that would require some work to include it in an HTML document of your own (Google maps, YouTube videos, etc.)
  • it’s free (and in most cases you don’t need the pro features)

What I hate about Weebly

  • invalid HTML (try validating a Weebly page… I mean, <font> in an XHTML 1.1 document? <style> within the <body>? Come on!)
  • invalid CSS
  • you can still do everything wrong concerning a clearly structured layout
  • no need to deal with HTML and CSS at all if you don’t want to
  • the fact that you can include so many different (multimedia) elements leads to the fact that they are often used in abundance, i.e. too often
  • using Weebly is not a guarantee to create a usable and well designed website

It might seem a bit harsh to only pick up Weebly and thrash it like this, however, I will do the same with other website generators with a focus on websites and not so much on blogs or wikis (like webs.com, which also has a free option, or squarespace.com, which doesn’t have a free option) in some of the next courses. If you have any suggestion which generators I should have a look at, please feel free to write a comment.

]]> http://www.alexandersperl.de/2010/07/double-feature-what-i-love-about-weebly-what-i-hate-about-weebly/feed/ 0 T-Shirt Shop http://www.alexandersperl.de/2010/06/t-shirt-shop/ http://www.alexandersperl.de/2010/06/t-shirt-shop/#comments Tue, 08 Jun 2010 20:56:06 +0000 Alexander Sperl http://www.alexandersperl.de/?p=624 Do you still need a t-shirt for the summer? Did you see the new item in the main menu up above? Yes, indeed, I finally did it. I created my own Spreadshirt shop and although there is are only one two designs available so far (two some more will follow) you might be interested in having a look.

So far the shop offers three products and nine colors altogether. The shop offers a couple of designs already and some more will follow from time to time.

The Winner Takes It All - Men ColorThe Winner Takes It All - Men Color

Verschwurbelt - Men ColorVerschwurbelt - Men Color

Ah, yes… The designs is are open to interpretation, of course, and they are available for women and men in various colors.

]]> http://www.alexandersperl.de/2010/06/t-shirt-shop/feed/ 0 5 Videos That Will Put A Smile On Your Face http://www.alexandersperl.de/2010/06/5-videos-that-will-put-a-smile-on-your-face/ http://www.alexandersperl.de/2010/06/5-videos-that-will-put-a-smile-on-your-face/#comments Tue, 01 Jun 2010 19:17:09 +0000 Alexander Sperl http://www.alexandersperl.de/?p=616 This is plagiarism in two ways: The 5 items of something idea was sneaked from Carsonified’s blog and all the videos were first published on Computerlove. So, sue me…

Here are 5 videos now that will probably put a smile on your face:

Time to waste some minutes on this…

]]> http://www.alexandersperl.de/2010/06/5-videos-that-will-put-a-smile-on-your-face/feed/ 0 Zuse 2.0 Kongress http://www.alexandersperl.de/2010/05/zuse-2-0-kongress/ http://www.alexandersperl.de/2010/05/zuse-2-0-kongress/#comments Thu, 27 May 2010 07:59:30 +0000 Alexander Sperl http://www.alexandersperl.de/?p=613 Ein erfolgreicher Kongress hat gestern in Wiesbaden stattgefunden. Zwar war die allgemeine Berichterstattung eher auf Volker Bouffier ausgerichtet (interessanterweise nicht so sehr auf Roland Koch, der auch da war…), aber wir haben viele interessante Gespräche geführt und spannende Vorträge gehört.

Hier gibt es ein paar Bilder vom Kongress und von unserem Stand, auf dem wir den VLC und das VZL präsentiert haben. Leider ist der MP an uns vorbei manövriert  – vielleicht weil wir aus Marburg kommen ;-) – aber Wissenschaftsministerin Eva Kühne-Hörmann hat sich uns angeschaut.

Friedrich-von-Thiersch-Saal
Friedrich-von-Thiersch-Saal

Das Team am Stand
Das Team am Stand

Marktplatz IT
Marktplatz IT

Marktplatz IT
Marktplatz IT

Prof. Horst Zuse am Stand des VLC und VZL
Prof. Horst Zuse am Stand des VLC und VZL

Georg Schnurer
Georg Schnurer

MP Koch beim Eröffnungsvortrag
MP Koch beim Eröffnungsvortrag

Grußwort von Prof. Horst Zuse
Grußwort von Prof. Horst Zuse

Ministerin Kühne-Hörmann am Stand
Ministerin Kühne-Hörmann am Stand

]]> http://www.alexandersperl.de/2010/05/zuse-2-0-kongress/feed/ 0 Styling the VCT’s Microprojects Feed Box http://www.alexandersperl.de/2010/04/styling-the-vcts-microprojects-feed-box/ http://www.alexandersperl.de/2010/04/styling-the-vcts-microprojects-feed-box/#comments Sat, 03 Apr 2010 19:44:57 +0000 Alexander Sperl http://www.alexandersperl.de/?p=534 Welcome to the first episode of a series of HTML/CSS tutorials that deal with the application of CSS techniques in a real life setting. The series is supposed to be used in an upcoming course at the University of Marburg, students will be able to try to figure out how to do this.

And this is what we are going to do in this episode: The Virtual Center for Teacher Training has introduced a so called Microprojects Feed, which in return got a box on its own on the left of the portal. We will design this box.

And here’s how the result will look like:

Microprojects Feed Box result

The German version of the Microprojects Feed Box

You will find the images that are required for this tutorial later in this post. I am quire aware of the fact that you could do it in CSS3 without the images but I will write that tutorial in a year or so. Let’s do something that will look the same in all the current browsers.

1. The XHTML structure

In the following we will have a quick look at the XHTML structure. It’s quite simple, we have a div for the box, some paragraphs and headlines and only few classes, since the enclosing div gets an id. Here’s how it looks like (only the specific code, I left out the document details for a better overview):

<div id="mpfeed">
  <h1>Mikroprojekte Feed<img src="rssfeed_box.gif" alt="RSS Feed Icon" /></h1>
  <div class="feedentry">
    <div class="feedpubdate">10. Mär 2010</div>
    <h2><a href="#">Mind Maps mit Bubbl.us gestalten</a></h2>
    <p>Das kleine Web-Tool Bubbl.us hilft dabei Mind Maps schnell und einfach zu erstellen.... <span><a href="#">mehr</a></span></p>
  </div>
  <div class="feedentry">
    <div class="feedpubdate">01. Mär 2010</div>
    <h2><a href="#">Texte mit Wordle visualisieren</a></h2>
    <p>Erstellen Sie in kurzer Zeit ansprechende Visualisierungen von beliebigen Texten. Der... <span><a href="#">mehr</a></span></p>
  </div>
  <p><a href="#">Feed abonnieren</a><img src="feed-icon-14x14.png" alt="Feed Icon" /></p>
  <p><a href="#">Hilfe zum Mikroprojekte Feed</a></p>
</div>

That was easy enough, wasn’t it? We need the nested elements to define specific styles for them. You could leave out the classes and still get the same result, but I would like to use the classes to make it a bit clearer.

2. The images we need for the deed

Here are the images we need for backgrounds, I will explain why they look like how they look like in a minute. Right click and download the images.

The box around the whole thing gets two images. The bottom image will be the background for the div that has the id mpfeed. The top image will be the background of the h1 in the box and will thus cover the div’s background image. That’s a derivation of the ever so nifty sliding doors technique, which means that the box can be adjustable in height. That’s why the bottom image is rather high, just in case that you have a rather high box.

The feed entry div gets a separate background image. You can see that it is larger as the box as well and it also misses the gray lines at the left side and the top. We’ll do that with CSS.

3. Setting the box

Here’s the CSS bit that we need to make the box look like the box in the image above.

#mpfeed {
    background: url(boxes_back_bottom.gif) left bottom no-repeat;
}
#mpfeed h1 {
    background: url(boxes_back_top.gif) left top no-repeat;
    font-size: 12pt;
    line-height: 30px;
    margin: 0 0 10px;
    padding: 0 10px;
}

As I wrote, this is just for the surrounding box. It also defines the h1, h2 and p tags that we have in the box. The following definitions will make everything else look good.

#mpfeed .feedentry {
    background: url(feedentry_bg.gif) right bottom no-repeat;
    margin: 0 8px 10px;
    padding: 0 0 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    position: relative;
}
#mpfeed .feedentry h2 {
    margin: 3px 0 5px;
    padding: 0 3px;
    white-space: normal;
    font-size: 10pt;
}
#mpfeed .feedentry p {
    margin: 0 0 5px;
    padding: 0 3px;
    font-size: 8pt;
}
#mpfeed .feedentry .feedpubdate {
    text-align: center;
    width: 30px;
    float: right;
    margin: 3px;
    font-size: 8pt;
    border: 1px dotted #ccc;
}
#mpfeed .feedentry p span {
    float: right;
    margin-right: 2px;
}

Now, let’s explain this a bit. Each feed entry gets a background which makes it look like a flipping page. It also get a date box and aligns the more to the right. That’s fairly easy to do and if you will be in the Presenting Content or the Web Technologies courses in summer semester, I will explain to you in details, what it is all about.

]]> http://www.alexandersperl.de/2010/04/styling-the-vcts-microprojects-feed-box/feed/ 0 Personas and Usability http://www.alexandersperl.de/2010/03/personas-and-usability/ http://www.alexandersperl.de/2010/03/personas-and-usability/#comments Fri, 19 Mar 2010 08:01:15 +0000 Alexander Sperl http://www.alexandersperl.de/2010/03/personas-and-usability/ If you are a Firefox user, or more so, a Firefox aficionado like I am, using Firefox since it’s first betas, you might have realized the interesting new Personas addon, which gives you thousands of different skins for your browser windows.

Why is it, I ask myself, that almost all of them are designed in such a way that it is almost impossible to read the toolbar?

Have a look at some screen-shots and you will know what I mean.

Example for Personas 1

Example for Personas 2

Example for Personas 3

Example for Personas 4

Example for Personas 5

Example for Personas 6

Example for Personas 7

Example for Personas 8

Example for Personas 9

This can only lead to one of two (or both) conclusions:

Either designers are not aware whatsoever that there might be writing on their images (which I doubt) or they assume that no one reads what is written in the toolbar anyway (which I doubt also). What is more is that the browser viewport gets a competitor because the use of flashy colors leads to a massive distraction. Don’t you learn that frames should be unobtrusive? I think that it’s a nice idea but once again, it leads to a number of results that you wouldn’t wish for.

I know what you want to say. “Stop being a troll, stop being grumpy about it, you don’t need to use it.” And yeah, you are absolutely right.

]]> http://www.alexandersperl.de/2010/03/personas-and-usability/feed/ 0 VZL Shop, Globalzugang und Mikroprojekte http://www.alexandersperl.de/2010/03/vzl-shop-globalzugang-und-mikroprojekte/ http://www.alexandersperl.de/2010/03/vzl-shop-globalzugang-und-mikroprojekte/#comments Fri, 12 Mar 2010 22:22:12 +0000 Alexander Sperl http://www.alexandersperl.de/?p=559 Das VZL hat in dieser Woche ein paar Neuerungen erhalten, an denen wir in den letzten Wochen fieberhaft gearbeitet haben (wäre schneller gegangen, wenn immer alles gleich geklappt hätte).

  • Der VZL Shop auf Prestashop-Basis bietet die Möglichkeit Arbeitsheft zu den Weiterbildungskursen zu bestellen und außerdem den Globalzugang (s.u.) zu buchen.
  • Der Globalzugang bietet Zugang zu allen Virtuellen Sitzungen, aus denen die Kurse de VZL bestehen. Diese Option gibt es für hessische Lehrerinnen und Lehrer schon länger und ist jetzt für alle verfügbar.
  • Und außerdem gibt es noch die sogenannten Mikroprojekte als RSS-Feed, kleinere Unterrichtsideen, die die Neuen Medien benutzen, natürlich gleich mit Beispielen.
]]> http://www.alexandersperl.de/2010/03/vzl-shop-globalzugang-und-mikroprojekte/feed/ 0 Padding is a Strange Creature http://www.alexandersperl.de/2010/02/padding-is-a-strange-creature/ http://www.alexandersperl.de/2010/02/padding-is-a-strange-creature/#comments Thu, 25 Feb 2010 20:20:22 +0000 Alexander Sperl http://localhost/?p=146 While redesigning my pages, I came across an odd behaviour when trying to manage a white box and the padding within it. This tells you a lot about browser defaults and how they can be a pain.

Have a look at the following piece of code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Margin Padding Test</title>
<style type="text/css">
<!--
body {
 background: #e5e5e5;
}

#content {
 padding: 0;
 background-color: #fff;
}
h2 {
 margin: 0;
 padding: 0;
}
-->
</style>
</head>

<body>
<div id="header">
 <h1>Hello!</h1>
 <p>Blabla</p>
</div>
<div id="content">
 <h2>First Heading</h2>
 <p>blabla</p>
 <h2>Second Heading</h2>
 <p>blablabla</p>
</div>
</body>
</html>

Keep your eye on where it says content { padding: 0; }. This is how the page now looks like in Firefox (3.6):

strange padding before

CSS Details: content { padding: 0; }

And now, let’s change the padding in the content div to 0 0 1px 0. And here’s the result, again in Firefox (3.6):

strange padding after

CSS Details: content { padding: 0 0 1px 0; }

Man, how can you take anything for granted after you see the bottom padding here… ;-) Maybe those browser reset stylesheets are not such a bad idea after all… At least it looks the same in FF and IE.

The person who can come up with the best explanation will get a pat on the back with this machine.

]]> http://www.alexandersperl.de/2010/02/padding-is-a-strange-creature/feed/ 0 Relaunch http://www.alexandersperl.de/2010/02/relaunch/ http://www.alexandersperl.de/2010/02/relaunch/#comments Thu, 18 Feb 2010 10:44:59 +0000 Alexander Sperl http://www.alexandersperl.de/?p=477 Hey, a couple of things happened here. Yes, it’s the all new layout and design of my website. Plus: Dorky Design is somewhat dead and I will be working as a freelance designer in my own name.

Comments (especially nice ones) are very much appreciated.

(Oh my, now I know a lot more about WordPress than I did before ;) )

]]> http://www.alexandersperl.de/2010/02/relaunch/feed/ 0