Weblog

DHTML is fashionable

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.

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.

Free software for daily use

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:

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.

FLACCESS update

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):

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

I want my window, dammit! (or how to destroy target _blank)

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...

Keep reading this entry

Article on unobtrusive DHTML

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.

How to add line numbers to code blocks

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.

Some tags allowed in comments

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.

Bookmarklet to enlarge your ... textareas

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.

Introducing FLACCESS: flash keeping accessibility

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...

Keep reading this entry

Inserting Flash with accessibility in mind

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).

Keep reading this entry

Progress bar in ... PHP

Background information

I have to import a massive amount of data from Excel to MySQL. Everything fine, except for two details: I have to use set_time_limit(600); to exceed maximum execution time allowed on server (no problem) and during all this process the echo's I have inside the looong loop arent showing on screen. This is worrying, because the person that will perform the import might think anything's gone wrong. So I start looking for a solution...

Getting close

Looks like php comes with some functions to manage the output buffering on screen. They're flush() and ob_flush(). I honestly don't get the difference but as said in the manual, it's best used in conjunction to make sure page contents are shown by browser. We tried in each loop step and voila! It works! Then I start thinking if it'd be possible to show a progress bar in PHP... And it is too! Cannt believe it. Of course, only under some circumstances, but it's so cool. Come and see...

Keep reading this entry

Aaron Boodman's dhtml scroller modifications (ypSimpleScroll)

Hi, i'll show you a hack i made for the mtv spain website this past may. We needed a dhtml scroller that would work with arrows, drag/drop handler and was IE/mac compatible. I couldn't find one at that time, so I took Aaron Boodman's ypSimpleScroll and mixed it with his dom drag script.

The script degrades nicely in (nearly) all browsers, though I've noticed Opera breaks it somewhere, leaving the script half way applied. I haven't had time to investigate, so if any of you want to, you can send me an email. I'll give you an example of the script using text from my tools section.

Keep reading this entry

Programming books for free (II)

Just discovered this little wonder: Practical PHP Programming, an online PHP book for free. Don't let the free word scare you, it's simply wonderful and has very nicely explained tricks.

Programming books for free

Just read at pjorge's blog a very good news: at techbooksforfree you can find a lot of free programming books. Yes, free. They look ok. For python lovers we have:

Looks like I have no excuse now (but time) to start learning again. I know someone that might even follow me...

Bookmarklet: Use only user stylesheet

This script disables all stylesheets in a page and opens a window to ask for a user stylesheet. In Mozilla based browsers, if this stylesheet is local it will not be loaded for security reasons, but it does if you provide a web located stylesheet. Explorer does not have this restriction. Try it and if you like it, there's more bookmarklets and scripts in the tools section.

Change preferences

Change preferences

License

Creative Commons 2001-2004. Sergi Meseguer

RSS syndication

rss (1, 2 ), xhtml, css, taw