Maquetació Web | Blog de Albert L.G.

A aquestes alçades aprenc com llançar una Pop-Up

Fri, 03 Mar 2006 00:00:00 +0100

I encara més: no em fa cap vergonya reconèixer-ho. :P
El món del webmaster és un no parar d’aprendre i reaprendre coses... potser per això m’agrada. Fins i tot n’hi ha que se n’enorgulleixen quan m’ensenyen alguna cosa que no sabia (eh Rodrigo?), i d’altres que em demanen que segueixi escrivint més i escoltant menys música (eh Tito Tommy?).

En fi, al que anàvem: llançar finestres Pop-Up amb JavaScript. Resulta que, independentment de les discussions sobre si s’han d’utilitzar o no les pop-ups, hi ha un problema que les corromp sistemàticament, que les fa perverses, que agredeix usuaris avançats i principiants en la navegació, confon els cercadors i genera soroll al codi. Aquest problema és que, tot i existir diverses maneres de llançar una Pop-Up amb codi JavaScript, les més utilitzades són les incorrectes.

La manera correcta de llançar una finestra Pop-Up amb JavaScript

El següent és el codi a utilitzar per llançar una Pop-Up:
<a href="https://albertlg.com/index.htm" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Llançar correctament</a>
Llançar correctament

Només cal canviar a href="https://albertlg.com/index.htm" el nom de l’arxiu .htm que s’obrirà a la nova finestra, i modificar els valors de width i height segons l’amplada i alçada desitjades (en píxels).

Per a més informació: NSU.

Llista de comprovació d’estàndards web

Tue, 10 Aug 2004 00:00:00 +0100

He traduït la “checklist” original de A Web Standards Checklist, de MaxDesign.

Abans de començar, aclarim conceptes:

Què són els estàndards web?

L’expressió “estàndards web” pot significar coses diferents segons per a qui. Per a alguns no és res més que construir llocs web sense taules, per a d’altres es tracta de fer-ho utilitzant codi vàlid. Sigui com sigui, el concepte és molt més ampli que això. Els estàndards web podrien definir-se com:
En altres paraules:

Sobre la llista

No es tracta d’una llista tancada. Probablement hi ha molts punts que es podrien afegir. Simplement és un punt de partida. Entre els seus usos pràctics, inclou:
- Demostrar l’amplitud dels estàndards web.
- Com a eina pràctica per als desenvolupadors durant la fase de producció de llocs web.
- Com a ajuda per als desenvolupadors interessats en la migració cap als estàndards web.
La llista es divideix en 6 categories:
- Qualitat del codi
- Grau de separació entre el contingut i la presentació
- Accessibilitat per a usuaris
- Accessibilitat per a dispositius
- Usabilitat bàsica
- Gestió del lloc

La llista de comprovacions:

Qualitat del codi

1. Utilitza el lloc un doctype correcte?
2. Utilitza el lloc un joc de caràcters (charset)?
3. Utilitza el lloc codi (X)HTML vàlid?
4. Utilitza el lloc codi CSS vàlid?
5. Utilitza el lloc “hacks” en el codi CSS?
6. Utilitza el lloc classes o identificadors innecessaris?
7. El codi està ben estructurat?
8. Conté el lloc enllaços trencats?
9. Com respon el lloc en termes de velocitat i pes de les pàgines?
10. Té el lloc errors de JavaScript?

Grau de separació entre el contingut i la presentació

1. Utilitza el lloc CSS per a tots els aspectes de presentació (tipografia, colors, marges, vores, etc.)?
2. Totes les imatges decoratives es troben dins del codi CSS o apareixen al codi (X)HTML?

Accessibilitat per a usuaris

1. S’utilitzen atributs “alt” per a totes les imatges descriptives?
2. Utilitza el lloc unitats relatives en lloc d’absolutes per a la mida del text?
3. Es trenquen alguns aspectes del disseny si s’augmenta la mida de la font?
4. Utilitza el lloc menús de salt visibles?
5. Utilitza el lloc formularis accessibles?
6. Utilitza el lloc taules accessibles?
7. Hi ha prou contrastos de color?
8. S’utilitza el color només per a informació crítica?
9. Existeix un retard en la resposta dels menús desplegables (per a usuaris amb habilitats motores reduïdes)?
10. Són tots els enllaços descriptius?

Accessibilitat per a dispositius

1. Funciona el lloc acceptablement en navegadors moderns i antics?
2. El contingut és accessible amb el CSS desactivat o no suportat?
3. El contingut és accessible amb les imatges desactivades o no suportades?
4. Funciona el lloc en navegadors de text com Lynx?
5. Funciona correctament el lloc en impressió?
6. Funciona el lloc en dispositius de mà?
7. Inclou el lloc metadades detallades?
8. Funciona el lloc en diferents mides de finestra del navegador?

Usabilitat bàsica

1. Existeix una jerarquia visual clara?
2. Els nivells d’encapçalament són fàcils de distingir?
3. Té el lloc una navegació fàcil d’entendre?
4. Utilitza el lloc una navegació consistent?
5. Estan els enllaços subratllats?
6. Utilitza el lloc un llenguatge coherent i apropiat?
7. Disposa el lloc d’un mapa del lloc i una pàgina de contacte fàcils de trobar?
8. En llocs grans, hi ha una eina de cerca?
9. Hi ha un enllaç a la pàgina principal a totes les pàgines del lloc?
10. Es defineixen clarament els enllaços visitats amb un color únic?

Gestió del lloc

1. Té el lloc una pàgina d’error 404 útil i significativa que funcioni a qualsevol profunditat?
2. Utilitza el lloc URL amigables?
3. Funcionen les URL sense “www”?
4. Disposa el lloc d’un favicon?

MOZiE, l’imprescindible

Tue, 08 Jun 2004 00:00:00 +0100

Aquesta eina ens solucionarà moltes coses als maquetadors:
MOZiE.

Bàsicament, MOZiE és una aplicació gratuïta per a entorns Windows que permet comparar simultàniament la renderització d’una pàgina web a Mozilla i Internet Explorer. A més, ofereix altres funcionalitats no menys útils, com ara l’emulació de resolucions de pantalla.

Test de estàndards i accessibilitat

Wed, 02 Jun 2004 00:00:00 +0100

Joe Clark ens proporciona una llista d’enllaços per al test d’estàndards i accessibilitat.

Ho he trobat llegint webstandards.org.

CSS: Model de caixa 3D

Thu, 20 May 2004 00:00:00 +0100

Avui he trobat aquest diagrama...

Molt aclaridor, no creieu? Ai! Si t’hagués conegut abans...

L’he trobat llegint hicksdesign.co.uk.

[!] 02-05-04:
Per cert, Jon Hicks l’ha actualitzat (ha afegit línies per delimitar millor les zones i ha canviat la imatge de fons per fer-la més evident). I podeu trobar una versió interactiva del model.

Altres recursos CSS:

I el que vindrà:

CSS3 Module: The Box Model