Posts Tagged ‘HTML / CSS’

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

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

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

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.

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

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.

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

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.

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

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;”
Català-Catalunya English-USA Traduir a l'Anglès. Translate to English Compartir: La TafaneraIndependènciaCatosfera|FacebookTwitterFriend Feed|googleDeliciousDiggTechnoratiredditmixxyahoolivestumbleuponsimpy