6 Web HTML WYSIWYG Editors

Over the last couple of months I’ve become very passionate about WYSIWYG HTML editors. Mostly because I was forced to use a really bad HTML WYSIWYG editor called Sharepoint Out-of-the-box editor. I actually ended up just editing most of the stuff in plain HTML, which is though not the point of having a HTML WYSIWYG editor. A good WYSIWYG editor will produce clean HTML markup and will make the writer much faster in producing nicely formatted output.

WYSIWYG – A short introduction – For all newbies. What is WYSIWYG.

WYSIWYG Editors Are Evil – Advantages Of Clean Content Markup – Why would you care about the editor?

Let’s have a look at 6 HTML WYSIWYG editors for the web:

CKEditor

CKEditor is an open source HTML WYSIWYG editor that is also available with a commercial licence. It’s very popular and provides an integration for Microsoft Sharepoint 2010 & 2007. A lot of open source CMS’ like Drupal, WordPress, Typo3 provide modules or plugins to integrate the CKEditor. CKEditor is an opensource project. It’s free.

NicEdit

NicEdit is a Lightweight, Cross Platform, HTML Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.

TinyMCE

Very similar to CKeditor. WordPress uses it out of the box. Nice and powerful yet fast editor and also freely available.

RealObject edit-on NG

This editor is Java based. It looks very powerful. Since is Java based it though takes some time loading everything. Can’t compare to CKEditor for example. edit-on NG is not open source. Licenses are pretty expensive (3000 $).

openwysiwyg

From the look and feel just like the CKEditor, but no support for Chrome! So this is a no go!

Xinha

Never heard of that one before. Here’s what the website says: “Xinha is a powerful WYSIWYG HTML editor component that works in all current browsers. Its configurabilty and extensibility make it easy to build just the right editor for multiple purposes, from a restricted mini-editor for one database field to a full-fledged website editor.” It seems though dead: Last update was in May 2010

Webilea #4

Yesterday I attended the Webilea again. Great meeting with some really nice input. The evening was all about data (besides the soccer game ;) . I actually have never heard about those different open data projects and just btw: they that all end up in Google.

Everybody was impressed by @hofrat and the project he is doing with http://www.datamaps.eu/. This is an amazing project and I’m looking forward to the integration of Europe and Switzerland. I’m sure cool graphics can be made using this tool:

erwerbstätigenquote 2009

Just played very quickly with google open data. Here’s what I came up with. Driving on the left side of the road is safer than driving on the right side:

hofrat at webilea

soccer game in basel

Instagram

I have to admit, I’m an iPhone user. I just discovered Instagram. I have actually heard of that service a couple of times but have never paid any attention to it. I actually gave it a try today. It’s a lot of fun and I’m actually curious to see what kinds of pictures will appear in my feed. It’s kinda Twitter with pictures. Take a picture, add some cool filters and upload. That’s it.

We got now Blogging for the authors, Twitter for the lacy, Facebook for the social, Youtube for the video makers and now also Instagram for amateur photographers.

Instagram tools

  • Instagrid. A Clean Web Gallery For Your Instagram Photos
  • Stagir.am. Fun and useful metrics for your Instagram account.
  • Gramfeed. gramfeed is web interface for Instagram Mobile Photo sharing service to view popular photos on Instagram, view your Instagram photo timeline, view your follower’s photo stream, post comments, like photos, follow new users and more

Check out my first instagram image:

Instagram toilet paper

5 preparation tips for a successfull presentation

Presenting a project to the top management can bring a lot of benefits (yes you want them on board) but also some pitfalls when done wrongly. Five simple tips that will help you be 110% prepared for the presentation.

1. Have a backup plan for everything

What if your projector fails? Do you have a backup projector or maybe a flip chart to do your presentation? What if you are planning on a live demo of a website project and the server is down? Would be very embarrassing. There are two backup strategies:
  1. Create some screenshots and show them in a powerpoint presentation. This has as disadvantage that it’s not very interactive, but it’s better than nothing.
  2. Create an offline version of the website. There are several free tools available that are easy to use. If you are a linux geek you can also use wget (btw. 1.11 is having some windows authentication problems):

wget-1.10.2.exe -p -m -k -K -E http://www.mynewsite.com –http-user=”username” –http-password=”MyPassword”

Sit down and think what could go wrong and how likely it is that it will go wrong (don’t forget about murphey’s law -> “Anything that can go wrong will go wrong”). Then it’s up to you if you are willing to take the risk or plan for backup. Very easy risk management.

2. Know where you are presenting

I just recently had to prepare for a congress where I was standing next to a table and had a live demonstration. While in preparation I was planning on using a projector so that more people could see the demonstration. I was under a wrong impression. Using a projector wasn’t really possible, because there wasn’t enough room. Fortunately I realized that the day before while setting up. We could then switch to big displays that were better suited for the task.

3. Know what you are presenting

Needless to say. You should know what you are talking about. There are many methods on how to get to know the content of your presentation (maybe you need to present slides you haven’t prepared):

  • Dry run the presentation and record it on video.
  • Have some background information
  • Be prepared for some questions
  • Have little cards with keypoints

4. Know who you are presenting to

Is it the top management, project stakeholders or co-workers. This might have an impact on how you will dress and what your slides will look like. Obviously you are probably not going to hold a presentation in jeans and t-shirt when presenting to the top management. Likewise it might look strange if you are all dressed up and are presenting something to co-workers.

You’re audience will also influence the content. The top management doesn’t like small details but rather a bird’s eye view on things. Project stakeholders on the other side are might be very interested in details as they might impact their interests.

5. Plan enough time

Don’t schedule an other meeting to close to the presentation (neither before nor after). Rather use the time before the presentation to be on sight and get a feeling for your audience. Maybe you can chat with some people of the audience. On the other hand there might be delays in your presentation, maybe you are waiting for an important person, you don’t want to be in a rush and stressed because you have to attend another appointment.

Facelift for Google Analytics – Statistic tool

Google Analytics got a facelift. I love it. At the first glance it looks basically the same, but have a closer look. I think it is

  • Better and clearer structured. Even as a Google Analytics casual user you find the functions
  • Smoother to use

I haven’t really used Google Analytics a lot. I think it was just too powerful and I wouldn’t even know where to start looking, but the new version makes it a lot easier to start.

Here some screenshots:

You can have a look at the new Google Analytics. You have to just switch on the top of the page “new version”. What do you think about the new Google Analytics version?

Who cares about integration testing

A couple days ago I was booking the ferry for our summer vacation. There is a bunch of shipping companies out there, for example “Corsica Ferries”, “Adria Ferries”, “Condor Ferries” and so on. I was though booking via directferries, which is an intermediate platform, like a middleware. There are other platforms like that in the airline industry, for example ebookers.

I was finishing the transaction and at the end I got the following error message, which says something like: “We have received the booking request, but haven’t received the confirmation by the shipping company. Please contact us by phone to confirm the booking. You credit cart WAS charged.”

Not very comforting, and my car can definitely not swim, so I need that ferry. Well, the next day somebody from directyferries called me and we walked through it. We figured out that the problem was fairly simple: My last name is “Schär” (see the two dots over the a). Well, directferries would accept them, but it would screw up the booking system of the shipping company.

Conclusion

Teasting is not an easy thing. Probably they did test the platform, but probably only with names like “Peter Muster”. The testers have not been creative enough. Maybe the testers were located somewhere in India and don’t even have the “funny” letters like äöü on their keyboards.

When you test: Make sure you have enough time and try to think what the users might possibly do. Who are your users, where do they come from, what could they try to do to the system in order to achieve their goal. Be creative!