WNAS

MarsEdit 2.0

Sep 05, 2007 user interface design, web and wordpress

Trying out mars edit, after reading about it on daring fireball:

Major update to Red Sweater Softwareâ€™s excellent desktop weblog editor. Performance, compatibility, the user interface â€” I donâ€™t think thereâ€™s any aspect of MarsEdit 2 that hasnâ€™t been improved from version 1. Plus there are new features like Flickr integration. Iâ€™ve been using the 2.0 betas to write Daring Fireball for months.

I must say, that the interface, while it takes some getting used to, is better than the wordpress one, that I have been using for a couple of years now. That one has the quality of something that you have been using for a long time, you forget the quirks or have your own workarounds. Meaning, that after a while, you don't notice the bad things anymore, you just get used to them.

But, as some of you may know, I read a great tale about the difference in user interfaces a long time ago and it also applies to blogging.

Picture 1.png

To counter that, MarsEdit's interface is a bit more simple, no toolbar for formating on the top for one. To me this is good, I like to add a strong tag myself when I feel like it and the wp interface would try and screw it up...

Furthermore, I think that this is a far better tool to write with in the train, something that I will be doing more in the future. This is part of my Grand master plan to make WNAS a even better place to go and read up on web dev stuff.

Picture 2.png

As you can see MarsEdit has the interface that I like, simple and unobtrusive. But, it doesn't stop there, there is an image upload utility that rocks. This also has flickr integration, something that will definitely enhance my posts, as adding images is just made easy.

End conclusion, this is one to keep...

"GO FORTH AND FREELANCE"

Aug 31, 2007 user interface design and web development

Today (september 1st 2007) I have taken (once again) a step into the world as a freelance user interface specialist. After more than 3 years of working with lucka, which is a new record for me, I have decided to go at it alone. The years at lucka have been nice, but I think it the time to start my own business again.

Why do you ask, well let me tell you

I woke up one morning and it just came to me, from a big light in the sky:

"GO FORTH AND FREELANCE"

And so I did offcourse, as everybody knows, there is no ignoring big lights in the sky. Bigger men than me (and those have to big, as I am 192cm) have tried and failed. So forth I went, to take the freelance path...

Just kidding folks, in the past 15 years I have been working independently more than I have been employed. After due consideration I decided that it was time to do it again. In the past I have had good and bad times as a freelancer, but the good was more present than the bad. So I have more than enough expierence in working freelance, to see it's advantages en it's disadvantages. In the end it was the freedom to be my own boss that did it, as I always have been an independent fellow.

My experience also has grown that I am confident enough to take on the challenge, after all I do have more than 10 years of expierence in web work. I started out as a graphic designer bitching about developers to finally become the developer that I started out bitching about. During that time I have learned a thing or two about both the technical and user side of web design, worked for a large number of clients and done quite a couple of nice things.

I plan on doing more of less the same work, providing clients with excellent user interface development and design. Further more I am still working on other things to do. I want to teach, I want to write more, launch a product or two, pick up painting again, maybe do some coaching and what more...

But the most important thing that I plan to do is spend more time with my family and have fun and challenging projects to work on.

So if you have some work for me, don't hesitate to contact me...

“GO FORTH AND FREELANCE”

Aug 31, 2007 user interface design and web development

Why do you ask, well let me tell you

I woke up one morning and it just came to me, from a big light in the sky:

"GO FORTH AND FREELANCE"

But the most important thing that I plan to do is spend more time with my family and have fun and challenging projects to work on.

So if you have some work for me, don't hesitate to contact me...

prototype and jQuery

Aug 24, 2007 Javascript, jQuery and tutorials

a small piece that compares the two frameworks, with some nice links to follow..

Javascript popup calendar without tables.

Aug 13, 2007 css, Javascript, tutorials, user interface design, web development and xhtml

The last couple of years I have been using other people's JavaScript popup calendar's, for use in different projects. Almost all of them did the job nicely, but they all had a disadvantage. All of them used tables to layout the popup calendar, something that seems logical if you see the layout. But it isn't, a calendar is not tabular data, it is a simple list...
So I went out and created a different rendering method...

To be honest, that was about everything me and a colleague (eric de vries) did. We based our calendar on the fine work by Matt Kruse that you can find here. A couple of thing were off and those we added and changed.

We for instance were obliged to show three different fields, one for the days, one for the months and the last on for the years. Those had to followed by an icon of a calendar, that should popup a calendar field where our users could visually select a date.

The trouble we had with this set up was that is just wasn't semantically sound. Especially if javascript was turned of for instance... We had to render three input fields, which had the purpose to collect a simple date. We had to render an icon, that could not work without javascript. Our solution, dom-scripting.

We start out with just one input field in our jsf code, simply hooked with a class dateField, like this:

<input type="text" class="dateField" id="someId" />

With that as a starting point we where semantically sound, a user without javascript could see a simple text field where he can input a date and send it back to the server to be processed. But with javascript a whole different interface presents itself...

We take the input field allready present and use its class of dateField to act as a hook for our javascript...

Take a look at the finished result at this page and if you come back I will show you what the (only) interesting bit of the code is...

Welcome back, I hope that you liked what you saw, the real interesting is this one bit...

function CreateCalendar(element) {
	var html = '\
		<input type="text" class="datum dag autoTab" value="DD" maxLength="2" />\
        <input type="text" class="datum maand autoTab" value="MM" maxLength="2" />\
        <input type="text" class="datum jaar" value="JJJJ" maxLenght="4" />\
		<span class="calendarTrigger">Selecteer datum</span>\
		<div class="calendar hidetrue">\
			<div class="header">\
				<ul>\
					<li class="back">></li>\
					<li class="forward"><</li>\
					<li class="month">\
						<span></span>\
						<ol class="month-select">\
							<li>januari</li>\
							<li>februari</li>\
							<li>maart</li>\
							<li>april</li>\
							<li>mei</li>\
							<li>juni</li>\
							<li>juli</li>\
							<li>augustus</li>\
							<li>september</li>\
							<li>oktober</li>\
							<li>november</li>\
							<li>december</li>\
						</ol>\
					</li>\
					<li class="year">\
						<span></span>\
						<ol class="year-select">\
							<li class="previous">-</li>\
							<li class="years">\
								<ol class="scroller">\
									<li></li>\
									<li></li>\
									<li></li>\
									<li></li>\
									<li></li>\
									<li></li>\
									<li></li>\
								</ol>\
							<li class="next">+</li>\
						</ol>\
					</li>\
				</ul>\
				<span class="close">sluit kalender</span>\
			</div>\
			<div class="body">\
				<ol class="weeknumbers"></ol>\
				<ol class="weekdays">\
					<li>ma</li>\
					<li>di</li>\
					<li>wo</li>\
					<li>do</li>\
					<li>vr</li>\
					<li>za</li>\
					<li>zo</li>\
				</ol>\
				<ol class="days"></ol>\
			</div>\
			<div class="footer">\
				Vandaag is het <span class="today-link"></span>\
			</div>\
		</div>';
	element.innerHTML += html;
	return element;
}

All of the enriched content is being generated with javascript with no presentation mixed in. All of that is being done in the css.

.hidetrue {
	display: none;
}
input {
	border: 1px solid #CCC;
}
label, input {
	float: left;
	clear: none;
}
label {
	width: 150px;
}
.dag,
.maand {
	width: 24px;
}
.jaar {
	width: 48px;
}
/*
	trigger voor de calendar
*/
span.calendarTrigger {
	float: left;
	clear: none;
	overflow: hidden!important;
	height: 20px;
	width: 20px;
	text-indent: 20px;
	line-height: 20px;
	background: url(../img/calendar.png) no-repeat 2px 0;
}
/*
	PREFIXED

	.calendar
*/
.calendar {
    border :1px solid #002280;
	font-size: 10px;
	font-family: verdana, arial, sans-serif;
	position: absolute;
	font-size: 10px;
	background-color: #FFF;
}
div.calendar,
div.calendar div,
.persoonsgegevens fieldset div.calendar {
	padding: 0;
	margin: 0;
}
div.calendar,
.persoonsgegevens fieldset div.calendar {
	width: 200px;
}
.persoonsgegevens fieldset div.calendar {
	margin-left: 220px;
}
.persoonsgegevens fieldset div.calendar span {
	float: none;
}
.calendar li {
    list-style: none;
	float: left;
	clear: none;
}
.calendar li,
.calendar ul,
.calendar ol {
	padding: 0;
	margin: 0;
}
.calendar .header,
.calendar .body,
.calendar .footer {
    float: left;
	clear: left;
	width: 100%;
}
/*
	header
*/
.calendar .header {
	background-color: #002280;
}
.calendar .header li {
    float: left;
	clear: none;
	height: 16px;
	color: #FFF;
	font-weight: bold;
}
.calendar .header .month,
.calendar .header .year {
    background: no-repeat top right;
	width: 70px;
}
.calendar .header .month {
    background-image: url(../img/month.png);
}
.calendar .header li ol {
	display: none;
	background-color: #FFF;
	border: 1px solid #d9deec;
	width: 60px;
}
.calendar .header li ol li {
	clear: left;
	padding: 1px 3px;
	color: #000;
}
.calendar .header li.hover ol {
	display: block;
	position: absolute;
}
.calendar .header li li.years {
	height: 112px;
	padding: 0;
	border-width: 1px 0;
}
.calendar .header li li.years li {
	height: 14px;
}
.calendar .header .year {
    background-image: url(../img/year.png);
}
.calendar .header .back,
.calendar .header .forward,
.calendar .header .close {
    background-repeat: no-repeat;
	width: 18px;
	height: 16px;
	text-indent: 25px;
	overflow: hidden;
}
.calendar .header .back {
    background-image: url(../img/back.png);
}
.calendar .header .forward {
    background-image: url(../img/forward.png);
}
.calendar .header .close {
	background-image: url(../img/cancel.png);
	float: right;
}
/*
	/header
*/
/*
	body
*/

.calendar .body .weeknumbers  {
	width: 25px;
	padding-top: 14px;
	float: left;
	clear: none;
}
.calendar .body li {
    width: 20px;
	padding-right: 5px;
	height: 14px;
	text-align: right;
}
.calendar .body .weekdays,
.calendar .body .weeknumbers {
	background-color: #edeff6;
}
.calendar .body .weekdays {
	border-bottom: 1px solid #002280;
	height: 13px;
}
.calendar .body .weekdays li,
.calendar .body .weeknumbers li{
    font-weight: bold;

}
.calendar .body .weekend {
    font-style: italic;
}
.calendar .body .sunday {
    margin-left: 150px;
}
.calendar .body .saturday {
    margin-left: 125px;
}
.calendar .body .friday {
    margin-left: 100px;
}
.calendar .body .thursday {
    margin-left: 75px;
}
.calendar .body .wednesday {
    margin-left: 50px;
}
.calendar .body .tuesday {
    margin-left: 25px;
}


.calendar .body .days li.calendar-today {
	font-weight: bold;
	background-color: #FFC;
}
/*
	/.calendar
*/

There you have it, a semanticly correct javascript popup calendar, which does not mix structure, presentation and behaviour at all.
The may be some that (and rightfully so) could claim that generating to much of the html with javascript is not the way to go. But I find that in my case, it can be excused..

Go ahead, and give it a try in your own pages as all of the code is yours to download and use at your leisure...

If you use it, please let me know as I want to know, or if you run into problems I could be persuaded to help...

No responsibility is taken...Thanks go out to Mark James for his great icons...