Webworks Blog

KFM is an online file manager created by me (Kae Verens, lead developer for Webworks) and is released as open source (demo available here, downloads available here).

There are too many features to mention.

Oh, you twisted my arm. Here are a few of them:

• Multiple uploads, using HTML5 (article).
• Easy integration with CKeditor (docs), TinyMCE (docs), and can be used standalone or attached to your own buttons as well (docs).
• Pretty much the most advanced online file manager (comparisons)
• Image manipulation (resizes, rotates) managed online. can even do HSL stuff if you know the magic words for it
• Translated into twenty one languages.

KFM was started in May 2006 (the 27th – oh wow, it’s 4 years old in two days!) as a response to our frustration at FCKeditor’s (as CKeditor was known at the time) file manager.

Our clients would upload files and images to their websites, but FCKeditor’s file manager wouldn’t let you do more than that – you could see the filenames, select them, download them, and upload more – that was all.

We needed a way to provide thumbnails so people could see what the files were – not just the file names. We also needed a way to delete unwanted files or rename them.

Initially, we hacked this support into FCKeditor’s own file manager, and donated the code back to FCKeditor. Four years later, though, that functionality is still not available in the free file manager that comes with FCKeditor.

Because we didn’t want to hack FCKeditor again every time we upgraded, we instead decided to built an external filemanager that would totally blow every other available online file manager out of the water.

I think we succeeded.

If you’re a web development company looking for a file manager, please consider KFM – we’ve put a lot of work into it over the years, and it is used by every one of our clients in their website administration.

The iPhone is a portable computer which just-so-happens to also have phone capabilities.

I use it myself to read emails, news, and blogs.

Recently, we’ve had a number of people come in and ask for their iPhones to be set up to receive email, so I’ve written this post to explain how it’s done.

Setting Up

You need your email address, password, and the name of your subscription service (O2, or Vodafone).

Turn on the iphone, and tap the Settings icon (looks like gear wheels).

Scroll down to “Mail, Contacts, Calenders” and tap it.

Tap “Add Account”.

Choose “Other” (we’re not quite as big as Google or Yahoo yet ).

Tap “Add Mail Account”.

Enter your details on this page then tap “Save”. The “Description” field is optional.

The phone will take a few seconds to check some details.

IMAP should be highlighted in blue. Leave that as it is.

Change Host Name in Incoming Mail Server to “postfix.webworks.ie”.

Enter your email address in the User Name section.

In Outgoing Mail Server, if you’re using O2, then enter “smtp.o2.ie”. Otherwise if you’re using Vodafone, enter “mail.vodafone.ie”.

Leave the Outgoing’s User Name and Password fields blank.

Tap “Save”.

After a few seconds, a popup will appear complaining that a certificate may not be valid. Click “Cancel”, then click “Save” again, and “Ok” if it appears.

Your email is now set up.

Click the square button on the phone to get back to the main screen. You can use your Mail application now to read email.

Receiving Pushed Mail

If you want the email to be pushed automatically to your phone every few minutes (like SMS), then do this:

Tap “Settings”, then “Mail, Contacts, Calendar”.

Tap “Fetch New Data”.

Make sure “Push” is set to “On”, and choose “Every 15 Minutes” (or which ever you want).

You’re done. hit the square again to get back to the main screen.

Note

Most laptops and office computers are set up by default using the “POP3″ method of receiving email. This is the equivalent of a postman delivering your letters to the house – if you’re on the road, you can’t read the letters unless you go back to the house.

If you want to receive your emails to the iphone while on the road, you need to either turn off the home machine, or change it so it uses the “IMAP” protocol instead (this one is the equivalent of leaving the letters in the post office, so you can read them while out and about).

Our CMS has a number of features which allow its users to create panels (or columns), change templates, etc.

A template is basically a variant of a design. We usually have a number of different templates for each design, so the administrator can have some pages that have columns on the left or right, pages with no columns, and pages with columns on both sides.

Here are some example column layouts. I’ve used tables for these examples. The demos will show how to create these layouts using CSS.

Creating multiple templates for every design can be tiresome; especially if only one or two ever get actually used in the site itself – we really want to just have a single template which can be styled differently depending on whether the HTML has the columns in it or not.

I’ve written up a small demo. In it, there are four pages, one for each layout described above. A thing to note is that the demo uses the same IDs for each layout, and they’re all reading from the same style-sheet.

• no columns
• left column
• right column
• both columns
• the css used for all the demos

If you examine the HTML, you’ll note that the columns are divs, and the only difference between the various demos is that the columns are added to the HTML. You don’t need to change any IDs or classes to trigger the layout change – just add the HTML.

Example: here’s the HTML for the first one, with no columns:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<style>@import "style.css";</style>
	</head>
	<body>
		<div id="container">
			<div id="centre-column">content of page.</div>
			<br />
		</div>
	</body>
</html>

And here’s the final one, with columns on the left and right:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<style>@import "style.css";</style>
	</head>
	<body>
		<div id="container">
			<div id="right-column">right column.</div>
			<div id="left-column">left column.</div>
			<div id="centre-column">content of page.</div>
			<br />
		</div>
	</body>
</html>

Note that the only difference is that the second one has the extra columns added. And yet the #centre-column div knew to re-shape itself to allow room for the columns.

So, how does it work?

In CSS, there is a combinator called the “adjacent combinator”, +. This combinator means “the element next to what we’ve already selected”.

For example, let’s say we have this HTML:

<div class="panel-right">right panel</div>
<div id="content">content</div>

If we want #content to have a margin-right of 150px, we could use this:

#content{
  margin-right:150px;
}

But that will apply whether the .panel-right HTML exists or not.

If we want the #content to normally have a margin of 10px, and 150px only if .panel-right is there, we can use this:

#content{
  margin:10px;
}
.panel-right + #content{
  margin-right:150px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">