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