New year, new life. New year, new trend. So we're so happy to welcome 2005 with such kind of news. Apparently, a lot of people is betting for DHTML to solve navigation and usability problems or just developing dynamic applications using this technology instead of Flash. Lets see some examples.

• this amazing application to navigate Switzerland maps, includes zoom effects. No, seriously, no Flash.
• Google has recently developped two interesting projects. Gmail allows us to check the number of incoming emails without reloading the page (among many other features), while Google Suggest shows in real time (while you're writting you're own terms to search) the most likely matches and their number of found documents, so you dont have to type the whole sentence. These two use the XMLHttpRequest object, that allows to make server calls without reloading the page. Here you can see how suggest works exactly. We can expect more brilliant stuff by Google soon, since Mr. Boodman has moved there, so far just to improve Blogger.
• Remote scripting is not new. So far there were other techniques such as the iframe working as buffer, getting data from a page and writting to a layer, or the trick of using an image to add scripts, or the less known yet elegant method of Dan Pupius (I dont remember the link), that was an improvement on the pioneer. Even the now trendy XMLHttpRequest is something quite old (just that now is more widely supported). We already had the WebFX scripts and the Sarissa API. So to stop boring with technical words, lets just see a small summary with definitions and examples in this sourceforge wiki.
• also interesting this Javascript Shell, that allows us to make DOM tests using a commandline tool.
• it will also become trendy the concept of unobtrusive DHTML, by which script is a simple improvement on usability and never a requisite not the mechanism to add content. There are several examples, like the excellent fancy menu, a flash-like menu based on html lists, just like my last modification of an Aaron's script (this time was Accelimation) to make the menu for pixilate, or any other good unobtrusive scripts

OK, before closing, only to add that this year will be full of projects DHTML related. Either local (we have something going on with Pedro and other close bloggers) or international (13thparallel changes format, Dojo Toolkit, etc). More soon.

There's been a lot of excitement lately about the new release of the difinitive version of Mozilla Firefox. No doubt it's a great piece of software and an excellent alternative to Internet Explorer. Besides its security, tabbed navigation and speed, what I really like (more than Opera, the other big alternative) is the huge amount of extensions that not only allow us to configure the look but behaviour. I use the following extensions:

• Tabbrowser Preferences 1.1.1 to enhace tabbed navigation
• Web Developer 0.8 (based in the previous PNH Toolbar, which is much improved here) to anything web related, like disabling styles, outline tables, edit the CSS of a page on the fly, etc.
• greasemonkey allows us to add scripts to pages to modify their behaviour. For instance to make all url linkable, or destroy the famous target _blank
• Adblock blocks unwanted elements (for instance, banners) using regular expressions (to block specific sites, folders, etc.)
• Page Rank Status adds a little icon in your status bar that shows the page rank of that visited site
• ieview opens that page in Internet Explorer through the contextual menu (so we don't even have to copy and paste)
• Gmail Notifier to be aware of our Gmail box
• Bloglines Toolkit to be aware of changes in our list of sindicated news
• ForecastFox shows us the weather outside, and a forecast for next days

Another big news has been the release of the difinitive version of Mozilla Thunderbird, an excellent email manager. It also has several extensions, but in this case I use it as is.

And finally, I'd recommend the use of a good antivirus software like Grisoft AVG, which also happens to be free. In this new version (AVG 7.0 Free) there's a tool to associate the antivirus to your email manager, but htis time it works with Thunderbird too. Perfect.

Just releasing version 1.3, that includes some changes respect the original explaination to understand how to use the script, parameters, etc (changes have been updated there too):

• There is a "lite" version too, that works with DOM browsers only and will insert the flash on the fly (no delay option in this lite version)
• Flash object id now has to be passed in the path string (i.e.: "fl1,in,out"). Since lite version will only work in DOM browsers, it will only need a flash id and the parent id, not the complete path (that we needed for ns4 to work).
• The id will be appended to the object and embed elements. To avoid duplication between them, embed will use the id in the name and "name"+id in its id.
• The path string will also be automatically passed as a flashvar, so we can retrieve it from javascript.
• Parent element will get same size as flash object when it's inserted (to adjust page flow)

Get the last compressed file with examples to see it working.

I've always thought user should be able to choose where to load new documents from links. I say you as developer can use a cookie and provide that option if user wants to, but only if user wants to (see my preferences form at the end of page). A lot of other people think the best option is not letting them think and open everything in a new window. I hate those situations. What if i want to stay in my window? Hey, if i like your site i'll be back... Anyway, they insist in using target _blank. Well, all that's finished. Bye bye target _blank. Wanna know how? Keep reading...

diseņorama has just released an article on DHTML and how to program web pages keeping accessibility in mind, which is lately called unobtrusive DHTML. Ah well, written by me, ok, if you can read spanish (translation will come eventually if I have the time) and want to leave any comment I'll appreciate. I'll be posting examples here anyway, also as time permits.

I've just discovered how to add line numbers to code blocks inside preformatted text. I've used a javascript function that loops through all pre elements, and calls a regular expression that returns the number of lines in that block. Then, using innerHTML i just add a div containing the line numbers and style it using CSS. The javascript, that is part of a namespace (an object literal to provide encapsulation) is something like this:

// adds line numbers to code sections:
numberCodeTags : function(){
	var PRE = document.getElementsByTagName('pre'); 
	var nl = /\n+/mg;
	for (var i = 0; i < PRE.length; i++) {
		var t = PRE[i].innerHTML;
//mozilla/ff cannot select all lines of a code element 
//that is inside a pre element:
		if(document.addEventListener && !window.opera) {
			Extras.getCodeText(PRE[i]);
		}
			
//will only work in mozilla+op (IE replaces \n by a space so its useless):
		var NL = Extras.getMatchArray(t,nl);
		if(NL) {
		var numeros = "";
		for (var lineas = 1; lineas < NL; lineas++) 
		numeros += lineas +"\n";
		PRE[i].innerHTML += "<div class='lines'>"+numeros+"</div>";
		}
	}
},
	
// matches a regexp to a string, returns array
getMatchArray : function(myString,myRegExp){
	return myString.match(myRegExp).length;
},

// FF  hack to make easier select all lines of a 
//code element that is inside a pre element:
getCodeText : function(obj){
	var color = CSS.getStyle(obj.firstChild,"color");
	var bgcolor = CSS.getStyle(obj.firstChild,"backgroundColor");
	if(bgcolor=="transparent") bgcolor="white";
	obj.onmouseover = function(){
		obj.firstChild.style.color = bgcolor;
		obj.firstChild.style.backgroundColor = color;
	}
	obj.onmouseout = function(){
		obj.firstChild.style.color = color;
		obj.firstChild.style.backgroundColor = bgcolor;
	}
},

CSS could be something similar to the following lines:

pre	{
	position:		relative;
	color: 			#913117;
	padding: 		0px 1em 0px 1em;
	margin: 		0px;
	font-family:		Courier, monospace; 
	font-size:		1em;
	}
code	{
	font-variant: 		normal;
	color: #913117;
	}
pre code	{
	position:		relative;
	top:			0px;
	left:			1.2em;
	font-variant: 		normal;
	color: 			#913117;
	padding: 		0px;
	margin: 		0px;
		}
pre .lines	{
	position:		absolute;
	top:			1em;
	left:			0px;
	width:			1.2em;
	padding: 		0px;
	margin: 		0px 1.2em 0px 0px;
  	background: 		#913117;
	color: 			white;
	}

This technique seems to work in Mozilla and Opera only. IE replaces line feeds with spaces, so I simply ignored it. All other browsers degrade.

As stated in forst comment, Mozilla has a bug that doesnt let you select a block of code that is inside a preformated text. I tried to add a background color (only in Mozilla) onmouseover, this way block size is better seen. Apparently, if we start selection inside the free space outside the code block (the white space between numbers and code) you can select the code easily.

Yesterday I finished a modification in my content management system, thanx to a lot of help from Dan to solve a regular expression problem. Now users can add the following tags to their comments: p, a, em, strong, pre, code.

I recommend using the paragraph tag to open and close text blocks, text will show up nicely. If you want to add code inline (inside a paragraph) simply use the code tag, the script will handle the entities. If you want the code block to respect line breaks you will need to use <pre><code>your code</ code></pre> outside the paragraph (pre acts as block). Any other code or tag not inside code tags will be destroyed.

Just made a little bookmarklet that increases the size of all textarea in a page (or inner pages if insidee a frameset) to 450px x 250px. You can store it in your favorites and call it in your content management systems or that site that only gives you 100px to write some message. To run it, just follow this link. I'll use it a lot in my phpMyAdmin copy. As alwys, if you like it, there's more bookmarklets and scripts in the tools section.

Detecting flash: previous methods

I have been trying to find a method of detecting, on the server, the presence of the flash plugin version installed in the browser. Even though it would be very easy for macromedia to add the version variable to to the HTTP_ACCEPT, they force us to use clientside languages to do so. Having that option would allow us to do content negotiation in server or simply add the flash satay method safely. The main problem with that method is that browsers with old plugins will load the object (thus not the alternate content) but will not understand the flash, and it cannot do streaming, although we can use a launcher for that, as in my previous attempt. Besides, some users have told me that the launcher method is not flexible enough (you cannot pass variables to flash) and it crashes in some browsers (like my Opera 7.23). These are the reasons that moved me to follow a different path.

Concept

The basic idea is similar to the sIFR concept: we have the alternate content somewhere in our html, then a script detects the plugin's version and if its ok it replaces the alternate content with the flash object. The advantge of this method is that unlike 99% of the other methods, if the browser doesn't have javascript or cannot load the flash object the alternate content remains in the html, so accessibility is high. In other methods, javascript writes both the flash object and the alternate content to the document, but if javascript is disabled neither are accessible. So lets get started...

Outdated method, replaced by the newer one. Just keep it here for archive purposes.

Why

I've been doing a website lately that has to be accessible, but also has a menu based in flash. As I never used flash before I started to look for accessibility issues with flash and discovered nearly no one gives a shit about alternate contents, but worst, they insert their movies using javascript to detect flash version. This represents an accessibility problem since users that dont have javascript enabled wont be able to insert the object nor read the alternate content (if any).