Archive for the ‘HTML / CSS’ Category

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>

FireCookie – complement de Firefox per a gestionar galetes (Cookies)

dimecres, agost 4th, 2010

FireCookie és un complement per a Firefox, que alhora és un complement del Firebug (necessita d’aquest i n’ exten les funcionalitats), i que permet gestionar les galetes del navegador.

Podeu veure un petit article en que parlo del Firebug.

És realment pràctic perquè ens permet modificar, afegir o esborrar els valors d’aquests arxius que ens envien els servidors web, i que queden guardats dins la memòria del nostre navegador.

Bàsicament les galetes són utilitzades pels llocs web per a recordar les nostres preferències, i qui som.

Per això és molt important tancar la sessió quan hem acabat de treballar en un lloc web (especialment banca electrònica) i tancar el navegador.

Les galetes tenen una data de caducitat en que són esborrades. Pot ser d’un segon, pot ser de centenars d’anys o poden esborrar-se en tancar el navegador.

Les cookies es poden fer servir per a suplantar la vostra identitat en llocs web, així que cal ser curós i no marxar d’ordinadors públics deixant la sessió de facebook, el correu, etc… oberta.

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

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

Zen estil de programació HTML

dilluns, maig 24th, 2010

Zen és un estil de programació que si programeu en HTML us estalviarà de picar moltes línies de codi i temps.

Bàsicament és una manera abreujada d’escriure codi HTML i l’editor ho converteix en la seva expressió llarga.

Per exemple:

Passa a ser:

Per exemple: ul>li*>a>b

En aquest vídeo es veu molt clarament.
Paga la pena de veure’l:

Per exemple l’editor multi plataforma Komodo Edit (de pagament) ho suporta.

Alliberat Firebug 1.5.4 (extensió Firefox)

Dimarts, maig 11th, 2010

El proppassat dilluns 10 s’alliberà el genial complement per a Firefox, Firebug, en la seva versió 1.5.4.

Si no el coneixeu en aquest petit article n’explico ho bàsic.

Aquesta versió soluciona dos petits bugs o errors i afegeixen un menú desplegable a les pestanyes (tabs).

Notepad++ editor per a programadors

Dimarts, maig 4th, 2010

Notepad++ és un editor Programari Lliure, per tant completament gratuït, que té unes qualitats que el fan una eina imprescindible per a qualsevol programador/a.

No només es pot comparar sinó que supera a d’altres eines comercials.

Destaco algunes de les seves qualitats:

– És Programari Lliure

– És disponible en Català

- Té un assistent per a completar les instruccions de diferents llenguatges (auto-completion en anglès): PHP

– Indica molt visualment i agradable, la indentació de les línies

– Ressalta la sintaxi i de manera personalitzable

– Es poden personalitzar els colors i molts aspectes de l’aparença externa

– Permet crear macros

– Crea còpies de seguretat dels arxius amb els que treballem

– Permet cercar i substituir expressions regulars

– Salt de línia (word-wrap, per a quan les línies no hi caben en pantalla)

– Es pot emprar des d’un clauer USB, sense instal·lar-lo (opció no emprar %APPDATA%)

Us en mostro una captura de pantalla de la seva aparença editant un arxiu XML, que és l’arxiu .project que guarda la configuració de l’editor Eclipse:

Adjunto una captura de pantalla de la configuració, on haureu d’afegir les opcions de suggeriments de completar funcions (auto-completion)

Una mostra de com mostra el codi (estructura, espais, colors):

El podeu descarregar de la seva web:

http://notepad-plus.sourceforge.net/ca/site.htm

L’adreça directa de descàrrega és:

http://sourceforge.net/projects/notepad-plus/files/notepad%2B%2B%20releases%20binary/

Truc: Si premeu amb el botó dret i moveu la rodeta del mig del ratolí podeu canviar fàcilment i ràpida d’arxiu entre els que teniu oberts:

Un altre truc:

Si premeu la tecla ALT, podeu seleccionar, amb el ratolí, un quadrat de text, i en escriure se substitueix tot el quadrat:

Chrome developer tools i Firebug

dilluns, març 29th, 2010

Si programeu HTML, CSS, xhtml, o maqueteu, Firebug és un complement imprescindible.

Us permetrà editar, veure i debuguejar les vostres planes.

El podeu descarregar per a Firefox des de:

https://addons.mozilla.org/ca/firefox/addon/1843

També existeix un complement Firebug per a Chrome, Firebug Lite, encara que no tan potent.

Baixar l’extensió Firebug Lite per Chrome.

També podeu fer servir la eina integrada de Chrome, Chrome developer tools, que s’activa prement CTRL + SHIFT + I.

Programació CSS: marcs arrodonits

dilluns, març 8th, 2010

La web border-radius ens permet crear gratuïtament cantons arrodonits per a les nostres webs o taules compatibles amb:

  • CSS3
  • WebKit
  • Gecko

Programació CSS: Fer que surti una fletxeta als camps de text

Dimarts, febrer 2nd, 2010

Us passo un truc per a fer que els formularis HTML de les planes web que programeu tinguin una fletxeta a l’esquerra quan es passi la fletxa del ratolí pel damunt.

Fletxeta vermella a la dreta

Fletxeta vermella a la dreta

A més a més farem que mentre s’escrigui, la fletxa del cursor es converteixi en una mà, i el text aparegui en color blau.

El text és blau mentre escrivim

El text és blau mentre escrivim

Per a això haurem de crear un fitxer de tipus CSS, i col·locar-lo dins la carpeta css/

També crearem la carpeta imatges/ i hi posarem a dins la imatge de la fletxeta

Podeu descarregar-la des d’aquí: fletxa-e.gif

Dins del directori css crearem un fitxer anomenat codic-cat-test-input-fletxa.css amb aquest contingut:

/* www.codic.cat
    Arxiu css per a l'efecte de la fletxeta vermella, color del text, i fletxa del ratolí
    Enllaç curt a aquest article: http://wp.me/pzeab-1as
*/
#codic-cat-test-fletxa input, #codic-cat-test-fletxa textarea {
	color: #010101;	/* Color del text escrit */
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 100%;
	border-right: 1px solid #C5C5C5;
	border-bottom: 1px solid #C5C5C5;
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	margin: 0 0 5px 0;
	padding: 1px 2px;
	cursor: pointer;
}

	#codic-cat-test-fletxa input:hover, #codic-cat-test-fletxa textarea:hover {
		color: #010101;
		background: #FFFFFF url(../imatges/fletxa-e.gif) right no-repeat;
	}

	#codic-cat-test-fletxa input:focus, #codic-cat-test-fletxa textarea:focus, #codic-cat-test-fletxa select:hover, #codic-cat-test-fletxa select:focus {
		color: #0101F1;	/* Color del text mentre escribim */
		background: none;
		background-color: #F7F7F7; /* Color gris de fons mentre escribim */
	}

Un cop fet això, crearem a l’arrel del nostre projecte un arxiu html, el podeu anomenar com volgueu, jo li he dit codic-cat-test-input-fletxa.html.

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/codic-cat-test-input-fletxa.css" />
</head>
<body>
<h1>Codic.cat formulari de demostració</h1>
<div id="codic-cat-test-fletxa">
    <form name="codic-cat-test" id="codic-cat-test" method="post">
        <input type="text" name="nom" id="nom" /><br />
        <input type="text" name="cognom" id="cognom" /><br />
        <textarea name="comentaris" id="comentaris"></textarea><br />
    </form>
</div>
<div id="codic-texte">
    Passa la fletxa del ratolí per sobre dels camps per a veure la imatge.<br />
</div>
</body>
</html>

I executem l’arxiu html amb el navegador.

Aquest codi funciona perfectament en google chrome i en firefox, però no amb internet explorer 8 de microsoft.

microsoft té una terrible voluntat de no seguir els estàndards.

Alliberat NetBeans 6.7.1 en Català

divendres, setembre 25th, 2009

NetBeans671_catLa versió de l’editor per a programació (IDE) Netbeans 6.7.1 fou alliberada el dia 7 de Setembre.

La versió en Català es pot descarregar des d’aquesta plana.

Aquest entorn de programació Open Source és multi plataforma, i funciona en:

Linux
Windows
Mac OS X
Solaris

i presenta suport, en forma d’ajuda als llenguatges de programació:

Ajax
C/C++
Java EE
JavaFX
Java ME
Java SE
JavaScript
PHP
Python
Ruby

I d’altres tecnologies com:
Kenai
Ant, Hudson, Maven
Mobile
SOAP

Via: SomGNU

HTML: Com afegir una icona personalitzada a la nostra plana web o bloc

divendres, agost 21st, 2009

codic_cat_faviconHi ha dues maneres. Una simplement, col·locar un arxiu de tipus icona .ico anomenat favicon.ico a l’arrel de la nostra plana web o bloc i alguns navegadors i cercadors directament reconeixeran la icona.

L’altra, afegir la següent ratlla dins del tag <HEAD>

<link rel="shortcut icon" href="http://www.codic.cat/favicon.ico">

Evidentment on hi diu www.codic.cat/favicon.ico hi ha d’anar l’adreça de la vostra web, i la ruta a l’arxiu .ico, que no té pas perquè ser a l’arrel de la plana web, i els podem tenir personalitzats per a cada plana.

Jo recomano emprar els dos sistemes per a maximitzar la visibilitat de la icona al nostre bloc o plana web.

Això també és pràctic per a webmasters car molts navegadors sol·liciten per defecte aquesta icona, i si no la tenim el servidor web enregistra un error 404, que sempre destorba a les estadístiques.

Inspirat a: webweaver.nu

Aquesta altra plana ens genera un arxiu .ico i un gif animat amb la imatge que li enviem.

Etiquetes HTML per a ressaltar el text i donar-li significat

dissabte, agost 15th, 2009

Avui us vull parlar d’unes etiquetes HTML, el llenguatge per a fer pàgines web, que permeten destacar el nostre text.

<em>Text emfatitzat</em>
<strong>Text en negreta</strong>
<dfn>Definició de terme</dfn>
<code>Text que és un codi (programa)</code>
<samp>Codi d’exemple</samp>
<kbd>Text introduït pel teclat</kbd>
<var>Variable</var>
<cite>Citació, per exemple d’una altra web</cite>

Per defecte, l’etiqueta code formata el text amb un tipus de lletra d’una mesura fixa. Totes les lletres i números tenen la mateixa amplada, per a facilitar la lectura de programes d’ordinador.

L’etiqueta cite habitualment és mostrada en un altre color pels navegadors.

A totes les etiquetes se’ls pot aplicar d’altres estil, així com esdeveniments del ratolí (en passar a sobre, fer click, etc..). La w3schools ho explica molt bé.

Hi ha un altre tag per a citar texts, llargs, que no hem creat nosaltres. Se’n diu <blockquote>text d’una altra web o autor</blockquote>.

És de molt bona educació (educació com a ciutadà-usuari-blocaire d’Internet), emprar-lo quan fem cites llargues (un paràgraf o més), puig els navegadors generaran una vista diferenciada: color, tipus de lletra… i un cert espai des de l’inici de la columna del text en horitzontal, i en vertical respecte al text precedent i posterior, per a indicar que és una cita.

També els cercadors, com google, sabran que aquest text no és nostre. És de bona educació perquè encara que un text molt interessant ens pugui apujar visibilitat a google si el cercador arriba a creure que és nostre (per exemple si la nostra web té un pagerank força superior a la de l’autor genuí del text), la pràctica correcta i educada és donar el crèdit a qui se’l mereix. I si podem, ajudar als cercadors a que tinguin clar les fonts originals de cada contingut. Al cap i a la fi, una base de dades més neta de google, ens beneficia a tots quan fem cerques.

Apropiar-se del contingut d’altris, entraria dins de la categoria de costat fosc (darkside, o revers tenebrós de la força).

Cito un text amb blockquote:

Però resulta que es qui van arribant agafen com a llengua d’integració, si es que n’agafen cap, no sa llengua pròpia de Mallorca sinó sa que s’estat ha anat imposant com a llengua oficial des de l’any 1716, com a conseqüència d’un fet d’armes, i que continua imposant; llengua a sa que es mallorquins més antics he sentit contar que li deien “estranger”, a sa que jo he sentit dir-li tota sa vida “foraster” o “castellà”, i que ara de cada vegada n’hi ha més que li diuen “espanyol”. Clar, ja ho sé; ja sé que aquesta és sa llengua des més gros des grups lingüístics que conviuen amb sa nostra comunitat lingüística però, seria sa llengua d’integració si no hagués estat imposada per la força en es seu moment? i si no ho continuàs essent?. Hi hauria tants de mallorquins que haurien renunciat a sa nostra si no hagués estat dejectada i perseguida?, si n’haguessin conegut s’importància, s’història, es escriptors que l’han usada?, si l’haguessin apresa a llegir i a escriure a s’escola?, si no haguessin tengut mai cap problema per xerrar-la onsevulla?, si no haguessin estat mai insultats pes simple fet de fer-la servir de paraula?. Com conversarien ses famílies en que un des dos membres des matrimoni fos mallorquí? i ses que sense esser mallorquí cap des dos membres des matrimoni, fossin de grups lingüístics diferents? I com ho fan ara ?

Fragment de Mallorquins alçau es cap, primer manifest d’Arnau Puig.

En aquest cas, l’ús correcte de <blockquote> seria:

<blockquote cite="http://webs.racocatala.cat/cat1714/mallorca1.htm">
Però resulta que...
</blockquote>

D’aquesta manera indiquem a google a on pertany la cita, i el navegador que ho indiqui a l’usuari en passar el ratolí per sobre el text li ho mostrarà als visitants, oferint-li una plana experiència de navegació més útil i pràctica, puig podran anar a cercar la font original fàcilment.

Programació CSS: Crear l’efecte de la caixa blava discontínua envoltant el text

Dimarts, agost 4th, 2009

Per a crear l’efecte que envolta el text, a baix, a les vostres planes web, o blocs, heu d’emprar aquest codi CSS.

Codi a emprar:
<pre style=”font-family: monospace; line-height: 1.1em; color: black; background-color: #f9f9f9; font-size: 12px; padding: 1em; margin: 0px; border: 1px dashed #2f6fab;”>Text envoltat</pre>

El codi s’ha d’inserir com HTML i no pas com a text pla.

Per a aconseguir un format que s’ajustés al tamany de la plana, en aquest exemple jo he emprat l’estil al tag TD i no pas a PRE:

<TABLE BORDER=”0″><TR><TD style=”font-family: monospace; line-height: 1.1em; color: black; background-color: #f9f9f9; font-size: 12px; padding: 1em; margin: 0px; border: 1px dashed #2f6fab;”>Text envoltat</TD></TR></TABLE>

Podeu jugar amb el color, l’estil de lletra, espai, tamany, color de fons, color de les vores…

Exemple amb: style=”font-family: monospace; line-height: 2.1em; color: red; background-color: #191919; font-size: 15px; padding: 1em; margin: 0px; border: 5px dashed #2f6fab;”