Disseny Catalunya

El nostre corresponsal a Amèrica, SGK, ens comenta una situació que potser més d’un pot aprofitar, ara que arriba el temps de les vacances.

Resulta que a alguns aeroports dels Estat Units l’empresa Boingo ha llançat una campanya de promoció que consisteix en donar wifi gratuït durant el mes d’agost per als usuaris de iPhone, tal com comenten a la seva web.

Segons el nostre corresponsal, es tracta de 6 connexions de 15 minuts de durada cadascuna.

La pega inicial és que el nostre corresponsal, SGK, no té iPhone(ja li agradaria, ja). Com aprofitar doncs aquesta promoció?

Doncs aquí està el truc.

Si teniu un portàtil Macintosh, l’únic que heu de fer és obrir el Safari i simular que us connecteu amb un iPhone.

1-Anem a Safari - Preferencias.

2-A la pestanya Avanzado activem la opció Mostrar el menú Desarrollo en la barra de menús.

3-Al menú Desarrollo que ens ha aparegut, despleguem la opció Agente de usuario i només cal triar la opció Mobile Safari 1.1.3 - iPhone.

Llestos. Ara qualsevol xarxa wifi es pensarà que naveguem a traves d’un iPhone. Així podrem utilitzar el wifi de Boingo.

No ho he provat per al Safari sobre Windows. Suposo que deu ser el mateix procés.

Per a aquells que no teniu Safari i navegueu amb Firefox, hi ha un pluguin que permet canviar l’agent: User Agent Switcher.

Per a aquells que utilitzeu Internet Explorer, la veritat es que ja us val!!!

L’objectiu d’aquest article es mostrar a qui no ho conegui o no ho domini, com utilitzar una imatge per tal d’enviar un formulari.

El primer que necessitem és un formulari normal i corrent:

<form id=”dadespersonals” name=”dadespersonals” method=”post” action=”procesform.php”>
<label for=”nom”>Nom</label>
<input type=”text” name=”nom” id=”nom” />
<br />
<label for=”email”>E-mail</label>
<input type=”text” name=”email” id=”email” />
<br />
<input type=”submit” name=”enviar” id=”enviar” value=”Enviar” />
</form>

Exemple

Deixarem el tema de l’aspecte del formulari per a un altre article. Avui ens centrarem en la funcionalitat.El botó d’enviar deixa una mica que desitjar, per la qual cosa el canviarem per una imatge:

<form id=”dadespersonals” name=”dadespersonals” method=”post” action=”procesform.php”>
<label for=”nom”>Nom</label>
<input type=”text” name=”nom” id=”nom” />
<br />
<label for=”email”>E-mail</label>
<input type=”text” name=”email” id=”email” />
<br />
<img id=”enviar” src=”enviar.gif” />
</form>

El podem veure en aquest exemple. La cosa canvia una mica, oi?El següent pas es fer que la imatge funcioni com a botó d’enviar. Per a fer-ho posarem un hipervincle a la imatge. Es podria arribar a fer sense l’hipervincle, però és la manera més ràpida de tenir el preciós cursor de la mà i com veurem més tard és la millor manera de fer el nostre sistema una mica més accessible.Per tant posem un hipervicle a la imatge:

<a href=”#”><img id=”enviar” src=”enviar.gif” border=”0″ /></a>

Sobre el destí de l’hipervincle en parlarem més tard. De moment ens conformarem en fer un hipervincle que “no va enlloc”.Ara farem que envii el formulari.Per a fer-ho, cal programar el vincle amb una mica de JavaScript:

<a href=”#” onmouseup=”Javascript:document.forms[’dadespersonals’].submit()“><img id=”enviar” src=”enviar.gif” border=”0″ /></a>

Amb aquest codi el que fem es que quan l’usuari apreti el “botó” d’enviar es produeixi un submit del formulari corresponent, tal com si hagués apretat un botó submit normal. El fet de programar l’event mouseup, és una qüestió personal. D’aquesta manera es pot apreciar qualsevol efecte d’imatge de substitució que haguéssim posat a la imatge d’enviar. Òbviament es poden utilitzar altres events com onclick o onmousedown.
Podem veure el formulari ja funcionant en aquest exemple.La plana que hauria de processar el formulari només ens mostra el missatge de conformitat, en aquest cas no enviem les dades enlloc.
Queden un parell de qüestions a comentar.
Primer. Que pasa si l’usuari no té JavaScript activat?(la veritat es que es força estrany avui en dia, però per exemple molts cercadors exploren la nostra plana sense executar el JavaScript).El problema és que el destí de l’hipervincle és # la qual cosa ens envia a la pròpia plana on som, o dit d’una altra manera, no fa res. Una possibilitat seria crear una plana amb un missatge per als que no tenen JavaScript, amb un missatge d’avís o fins i tot una versió de formulari mes “simple”. Imaginem que aquest plana es diu sensejavascript.html, llavors el vincle quedaria així:

<a href=“sensejavascript.htm” onmouseup=”Javascript:document.forms[’dadespersonals’].submit()”><img id=”enviar” src=”enviar.gif” border=”0″ /></a>

El problema es que els que si que tenen el Javascript activat, ara van a la plana sensejavascript.htm en lloc d’anar a procesform.php tal com veiem a l’exemple. La solució serà “desactivar” el destí de l’hipervincle mitjançant javascript:

<a href=”sensejavascript.html” onclick=”Javascript:return false;” onmouseup=”Javascript:document.forms[’dadespersonals’].submit();return false;”><img id=”enviar” src=”enviar.gif” border=”0″ /></a>

Ho podem veure en l’últim exemple.Ara si que ja tenim un formulari que s’envia mitjançant la imatge mentre mantenim un mínim d’accessibilitat.

Començo la meva participació a la “blogosfera” amb un tema clàssic però que dona molts mal de caps als que s’inicien en el disseny web.

Suposem que tinc una capa com aquesta:

<div id=”principal”>Aquest seria el contingut de la nostra plana</div>

Ens agradaria que aquesta capa quedés sempre al centre de la pantalla, sigui de la mida que sigui.

Òbviament en cap moment farem servir taules. De debò nois, NO feu servir taules. La llista de motius és tant llarga que no acabaríem mai. Només diré una paraula: ACCESSIBILITAT.
Ja sabeu, doncs, CSS pur i dur, com ha de ser.
El centrat en horitzontal és la part més fàcil. Trobarem milions d’exemples a google. Per si de cas, us poso el codi:

#principal{
width:600px;
height:400px;
margin-left:auto;
margin-right:auto;
background-color:#F00;
}

I voilà! capa centrada. Òbviament el color vermell de fons és totalment opcional i només té el propòsit de veure el centrat. Podem veure el resultat en el següent exemple

De seguida pensarem… el mateix per a la vertical, no? margin-top, margin-bottom, etc…

Per desgracia la cosa no es tan maca i ens hem de “complicar” la vida.

Haurem de passar a posicionar la capa. Si afegim el següent codi:

#principal{
position:absolute;
top:50%;
width:600px;
height:400px;
margin-left:auto;
margin-right:auto;
background-color:#F00;
}

aconseguim posar la capa al centre respecte la vertical, o al menys la seva part superior, tal com veiem en aquest exemple.

Ara el que cal es moure la capa cap amunt per tal d’asegurar-nos que queda centrada. Si la nostra capa té una alçada de 400 píxels, només cal moure la capa la meitat cap amunt, es a dir 200 píxels:

#principal{
position:absolute;
top:50%;
width:600px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:-200px;
background-color:#F00;
}

Ara si la nostra capa queda centrada verticalment, tal com podem veure en el següent exemple.

Peró com ja haureu notat, tota la feina per centrar la capa horitzontalment no ha servit de res, ja que al posicionar de manera absoluta la capa, el sistema que hem vist anteriorment deixa de funcionar.

Òbviament el que haurem de fer es aplicar el mateix mètode a l’horitzontal, de manera que ens queda:

#principal{
position:absolute;
top:50%;
left:50%
width:600px;
height:400px;
margin-left:-300px;
margin-top:-200px;
background-color:#F00;
}

El resultat final es pot veure en el següent exemple.

Doncs bé, espero que a algú li pugui servir d’ajuda i no tingueu por de deixar els vostres comentaris.