Posts Tagged ‘XHTML’

Solució problema Internet Explorer 7 i getAttribute setAttribute

dijous, agost 5th, 2010

Detallo aquí com solucionar un problema molt incòmode, que és la capacitat d’accedir a la propietat ACTION d’un formulari amb Internet Explorer 7, ja sigui mitjançant qualsevol d’aquests mètodes:

var s_adreca = document.formulari.getAttribute('action');
var form = document.getElementById('formulari');
document.getElemenyById('formulari').setAttribute('action') = 'http://www.codic.cat';
document.formulari.action = 'http://www.codic.cat';
document.forms[0].action='http://www.codic.cat';

Mentre que funciona amb qualsevol altre navegador: Chrome, Firefox, Opera o fins i tot internet explorer 8.

Encara que trobareu moltes webs que parlen d’un bug a Internet Explorer 7 no és ben bé així.

Segur que dins els vostre codi teniu una variable de tipus INPUT , probablement HIDDEN que duu el nom (name) d’ ACTION.

<form id="form" action="penca.php">
  <input name="action" type="submit" value="afegir" />
</form>

Aquesta és una paraula reservada que fa conflicte en el cas d’internet explorer 7, i la solució és tan simple com dir-li ACCIÓ o de qualsevol altra manera enlloc d’ACTION.

Enlloc de:

// Enlloc de:
<input type='hidden' name='action' value='afegir'>
// Emprar accio i no acció (millor sense accents per a evitar problemes UTF-8 i altres joc de caracters):
<input type="hidden" name="accio" value="afegir" />

Els apòstrofs dobles i tancar el tag simple amb / formen part de la especificació xhtml.

Aquí cobreixo alguns aspectes sobre xhtml que, si programes, necessites saber.

A la web WebDev he trobat un truc per recuperar el valor del form tot i aquesta desafortunada coincidència:

var form = document.getElementById('form');
var action = form.getAttributeNode('action').value;

Al fòrum de siteexperts.com hi ha diverses aproximacions:

<script type="text/javascript">

    alert(document.forms[0].action); // és un objecte

    alert(document.forms[0].action.value); // mostra "Hola", no l'action del formulari com "penca.php"

    alert(document.getElementsByTagName("FORM")[0].getAttribute("action")); // és l' INPUT, no el FORM 

</script>
Català-Catalunya English-USA Traduir a l'Anglès. Translate to English Compartir: La TafaneraIndependènciaCatosfera|FacebookTwitterFriend Feed|googleDeliciousDiggTechnoratiredditmixxyahoolivestumbleuponsimpy

Javascript Debugger per a Firefox (complement)

dissabte, juny 26th, 2010

Si programeu en web, segur que tindreu el complement per a Firefox Firebug, però hi ha un parell d’eines que us vindran molt bé.

Una el complement Javascript Debugger.

Una altra utilitat que us resultarà magnífica és l’eina per a programadors integrada a l’Opera, butterfly (papallona).

Català-Catalunya English-USA Traduir a l'Anglès. Translate to English Compartir: La TafaneraIndependènciaCatosfera|FacebookTwitterFriend Feed|googleDeliciousDiggTechnoratiredditmixxyahoolivestumbleuponsimpy

Actualitza el teu estil de programació web XHTML

Dimarts, maig 25th, 2010

He observat a molts professionals que no saben algunes de les normes actuals que ara us comentaré, i per tant cometen errors en les seves planes webs.

Això és així bàsicament perquè ningú no ens forma i ens recicla, i romandre al dia representa un exercici de bona voluntat auto-didacta.

El consorci W3C recomana fer servir XHTML que bàsicament és HTML 4.01 amb la sintaxi estricta de l’XML.

1) HTML en minúscules

Temps ençà l’html es podia programar en minúscules o en majúscules.

Molts ho fèiem en majúscules per a distingir el contingut del continent.

Ara el codi HTML ha d’anar en minúscules si volem complir els estàndards.

(Google també valora el compliment dels estàndards)

2) Tots els TAGS han d’anar tancats, els que van sols com <br> també.

Per tant serà correcte:

<p>Un paràgraf ha d'anar tancat</p>
<img src="http://www.codic.cat/wp-content/uploads/2010/05/130-Ginebra-Nacions-Unides-cut.png" />
<!--
    Fixeu-vos com la imatge es tanca amb />
//-->
<br />
<hr />

Quan tanquem amb /> hem de deixar un espai per a que sigui totalment compatible.

Llavors <br/> no seria correcte i <br /> sí.

3) Tots els atributs han d’anar entre cometre, i amb les dobles ” no les simples ‘

4) Els atributs no es poden minimitzar, és a dir, que han de portar la correspondència de nom d’atribut i valor

Són correctes:

<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />

HTML i correspondència en XHTML:

HTML XHTML
compact compact=”compact”
checked checked=”checked”
declare declare=”declare”
readonly readonly=”readonly”
disabled disabled=”disabled”
selected selected=”selected”
defer defer=”defer”
ismap ismap=”ismap”
nohref nohref=”nohref”
noshade noshade=”noshade”
nowrap nowrap=”nowrap”
multiple multiple=”multiple”
noresize noresize=”noresize”

5) Les planes HTML han de començar amb DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hi ha 3 tipus:

Transitional per a quan barregem HTML i elements d’imatge.

Strict per a quan emprem CSS per a tractat tots els aspectes gràfics.

Frameset quan volem emprar frames.

6) Empreu TITLE

Abans s’emprava ALT per a mostrar una descripció de les imatges en passar el ratolí per sobre.

Ara empreu title.

És aplicable a hipervincles, taules, etc… no només a les imatges com temps ençà.

Un cop tingueu acabada la vostra plana podeu validar-ne la correcció mitjançant la eina gratuïta de W3C Markup Validation Service.

Us pot interessar: W3schools XHTML

Català-Catalunya English-USA Traduir a l'Anglès. Translate to English Compartir: La TafaneraIndependènciaCatosfera|FacebookTwitterFriend Feed|googleDeliciousDiggTechnoratiredditmixxyahoolivestumbleuponsimpy