A palestra sobre o theWebMind foi bem divertida e positiva, vários demonstraram interesse e acredito que conseguiremos atingir mais pessoal capacitado e interessado em colaborar, o que é sempre muito importante para o projeto.

Parabéns aos envolvidos e palestrantes. Obrigado a todos e até o ano que vem!

Slides da palestra: http://tinyurl.com/259zbre

What is it?
When running your javascript in Internet Explorer 6, or 7 or 8 in compatible mode, if you create dynamically an iframe, for example, and set it a name attribute, Internet Explorer will reaplace it by an submitName attribute. This attribute cannot be found with .getAttribute(’submitName’), but that is the problem, neither can be with .getAttribute(’name’)!

How to see it happening? Try this:

var ifr= document.createElement('iframe');
ifr.setAttribute('name', 'iFrameOne');
document.body.appendChild(ifr);
alert(ifr.getAttribute('name'));
// you can also see it through the "developer tool" in the IE tools menu

The main problem is that … when you have something like a link or a form targeting this iframe, you loose it! The same happens with inputs with name, which are dynamically created.

How to fix it without ask your users to migrate to a real browser? I did this and it worked:

var ifrDiv= document.createElement('div');
ifrDiv.innerHTML= "<iframe name='iFrameOne' ></iframe>";
document.body.appendChild(ifrDiv);

Now, why does it happen?!
I had the chance to search for this and found in the Microsoft’s webpage something about this old, known bug in Internet Explorer, with names on dynamic elements. Due to “fix” this, instead of fixing, then “provided” this workarounded attribute. When you try to deal with the name attribute, it applies like an alias, redirecting it to the Microsoft’s Internet Explorer imaginary submitName attribute. But with this, you cant access a form that has a name, like this:

document.forms['dynamicFormName'];

because the DOM hasn’t rendered that form with the name you asked for.

I hope it can help you, if you get stuck with this some day.

history.go(0);

This will simply reload the page. Of course you can use it with iframes, using the parent, top, self or name to work with their relation.
Other alternative is using the reload method provided by the location, just like this:

self.location.reload();

Now, a different alternative, and also a way to move from one page to another, is using the href property, also from location.

self.location.href= self.location.href;

This code will reload the same page, but could be any other address to be loaded.

If you have ideas to have it better, or found any bug, or if you can draw a better bird, talk to me

This year, I’ll speak about the revolution of the web development, its new technologies and techniques, beside the way we see the web itself, and also, how the users see it nowadays. I’ll speak about HTML5, CSS3, JS2, the market share, business, among other interesting topics. I think we can all have a great conversation about such subjects and I invite you all to watch my presentation (entitled “Até onde vai essa teia?”, or “where is this web going to?”, during the saturday, at 10 o’clock) and also, to have a nice talking about this revolutionary age we are living, through the corridors and stands in the event.

Links of the event:
http://fisl.org.br/
http://softwarelivre.org/fisl11/
http://fisl.softwarelivre.org/
http://verdi.softwarelivre.org/

About the layout, I’m personaly happy they didn’t take off the status bar, as many people had asked for(if I wanted a browser without a status bar, I’d rather use Chrome). Still, if you use windows vista or Seven, you may have some new advances, like the special button at the top of the window, removing the usual menubar, adding it to the title bar.

I do think there are many things to get better or to be increased in Firefox 4 before its release candidate. It promises a lot and I’m really glad to see the browsers walking toward the same point. The future developers will be happier and faster

First thing, you need a canvas element, and you need to treat it for those that which can’t render the canvas element properly.

    <body>
        <canvas id="theCanvasElement">
            whatever you write in here, will be shown ONLY
            when your canvas cannot be rendered.
            Of course, it accepts HTML tags
        </canvas>
    </body>

Ok, now, using event handlers we will treat it in our javascript

    </body>
    <script>
          // yes, addEventListener does not work on IE
          document.addEventListener('load', canvasHandler, false);
    <script>
</html>

Good. When our page is loaded, it will call our method canvasHandler. Let’s see how we will open the canvas to use with javascript:

// let's create some global variables.
// You can use it better with namespaces
var canvas= null;
var ctx= null;
canvasHandler= function(){
    // first of all, we simply get the canvas element itself
    canvas= document.getElementById('theCanvasElement');
    // now, we need to have the CONTEXT to work with
    ctx= canvas.getContext('2d');
}

Great, we have now in our variable canvas, the HTML canvas element itself. While the variable ctx has got its context. The context is what we will use to draw. It has the mothods and properties to allow us to interact with the canvas in 2D.
No, unfortunately it does not offer any other context besides 2D.
Our canvas still has no properties. It has no with and height, we can set it then.
From now on, all the javascript code must be set inside the canvasHandler function’s body, under those lines shown before.

    canvas.width= 480;
    canvas.height= 340;

You probably know how to load an image from js, right?

    var img= new Image();
    img.src= 'url.png';

Ok, you can use it to insert images inside your canvas. Just like this.

    // instantiate an image
    var img= new Image();
    // we need to use the image when it has finished to load
    img.addEventListener('load', function(){
        // after downloading the image, we can draw it into the canvas
        ctx.drawImage(this);
        // where this= the image just downloaded
    });
    // then, we say the image's url, to it start loading
    img.src= 'url.png';

Ok, now you can see an image inside your canvas. The drawImage method supports some different structures refered by its parameters:

    // draws the image in the position left=30, top=30
    ctx.drawImage(this, 30, 30);
    // draws the image in the 0/0 position, changing its size
    ctx.drawImage(this, 0, 0, 45, 75);
    // more complex, draws the image croping it
    ctx.drawImage(this, 0, 0, 150, 150, 0, 0, 480, 340);

When cropping, you specify the image (this), the position to start showing it (0, 0), then the size you want to crop it (150, 150). After that, you will tell the canvas the size and position the image really is(0, 0, 480, 340).

Soon, I’ll post about how to really draw into your canvas through javascript, adding lines, points and texts.

Thank you all for your feedback, which has helped us a lot increasing its quality.
If you are a PHP Developer and don’t know it yet, you can try it and then offer us your feedback.

https://addons.mozilla.org/pt-BR/firefox/addon/12686/

Pixlr, at http://pixlr.com is a tool very similar to PhotoShop, but running on your browser (an online PhotoShop), and is also for free.
If you are used to the PhotoShop tools you can use it. It opens really faster, then you will not need to open the PhotoShop itself to make some little changes to a simple image. Plus, it has a firefox addon with which you can do a lot of things more.

It is, definitely worth it, to take some time to test it.
Of course, there are many features more in your PhotoShop, even thought, its a great, great option. I use it a lot by myself.