Archive for the ‘Web’ Category

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

Google Reader: Dreceres de teclat

dissabte, febrer 27th, 2010

Els que empreu google reader com a lector de fonts RSS trobareu útil de saber que hi ha unes tecles, que ens permeten navegar ràpidament pels articles.

S’anomenen dreceres o accessos directes de teclat i consisteixen a prémer una tecla o una combinació de les mateixes per a realitzar ràpidament una acció.

Algunes les podeu fer servir arreu, altres són per a la vista de notícies.

Us en deixo els que trobo més interessants.

Tecla Efecte
Navegació
Baixar i obrir el següent article.
Pujar i obrir el següent article.
Obre o tanca la visualització de l’article. Enter fa el mateix efecte. L’ús d’enter o de la tecla o fan la mateixa funció.
Baixa sense obrir l’article.
Puja sense obrir l’article.
Espai. Baixa una plana. Es pot fer amb pàgina avall, i pàgina amunt.
Sobre l’article
Marca amb l’estel o desmarca.
Veure l’article original (obre en una altra pestanya/finestra).
Salt
Anar als elements marcats amb l’estel (starred). G i després S.
Aplicació
Refrescar.
Veure en pantalla completa.
Afegir una subscripció.

Si no us responen feu clic sobre el text d’una notícia per a situar el focus i tot seguit premeu la tecla.

Podeu consultar tots els accessos directes a l’ajuda de google reader.

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.

Greasemonkey per a Google Chrome

dimarts, febrer 2nd, 2010

En un moviment d’una potència espectacular google ha contractat el creador de Greasemonkey (Aaron Boodman), un sistema d’scripts que ens permet fer el que vulguem per a Mozilla Firefox, i ha portat nativament GreaseMonkey a chrome 4.

Això fa que que desenes de milers d’scripts (guions o programes interpretats en temps real), uns 40.000,  siguin disponibles per a google Chrome 4 només descarregar-lo i puguem fer tantes coses com permet fer aquest sistema d’scripts:

- treure la publicitat dels webs

- canviar el tipus de lletra

- descarregar totes les imatges en el resultat d’una cerca

….

Es calcula que entre un 15 i un 25% dels scripts de Greasemonkey encara no funcionen en chrome, quelcom que canviarà aviat amb la incorporació del creador del motor d’scripts.

Via: Donwload Squad

Alliberat google Chrome 4

dimarts, gener 26th, 2010

S’acaba d’alliberar la versió final de google Chrome v. 4.

Concretament és la 4.0.249.79.

Aquesta versió presenta alguns avantatges molt interessants:

  • La càrrega de planes és molt més ràpida
  • Es poden instal·lar extensions (complements o plugins)
  • Es pot sincronitzar els favorits (bookmarks) entre tots els nostres ordinadors

La funcionalitat d’actualitzar els favorits (adreces d’interès) amb tots els nostres equips és realment fàcil de fer servir.

Només cal que introduïm el correu electrònic i el mot de pas d’una conta de gmail, i ja està.

Els nostres favorits es guarden dins de la conta de gmail.

La funcionalitat d’extensions és realment fabulosa.

Podem instal·lar tot d’extensions anant a la plana:

https://chrome.google.com/extensions

A més a més segons google, les extensions ens avisaran automàticament quan hi hagi una nova versió.

Podeu veure algunes extensions en aquesta imatge, a l’extrem superior dret, que he capturat del vídeo oficial de google:

Per exemple amazon té una extensió que permet  afegir a la teva llista de productes desitjats (wish list) productes, afegir notes, i accedir quan vulguis.

Una aplicació que seria realment trencadora, kick ass que dirien a Amèrica (coça al cul de la competència), seria una que et notifiqués quan un producte que t’interessa (ebay, amazon…) baixa de preu.

Les extensions s’instal·len des del mateix navegador amb un click.

Els que coneixeu wordpress sabeu que podem instal·lar temes i ginys (extensions) amb un clic. El mateix.

Aquesta és la plana web de les extensions:

Una extensió genial és Flashblock.

Aquesta extensió permet bloquejar el flash de les planes, fins i tot de manera individual.

Per exemple els banners de publicitat.

El que més memòria i temps de CPU menja de les múltiples planes amb les que navego és la publicitat flash amb la que ho envaeixen tot.

Amb aquesta extensió s’ha acabat el broquil!.

Secbrowsing també és molt recomanable ja que periòdicament revisa que tots els nostres complements o plugins estiguin actualitzats.

Via: Official Google Blog

WAMP

dijous, desembre 24th, 2009

WAMP vol dir:

Windows

Apache

MySql

PHP.

És habitual l’expressió LAMP:

Linux

Apache

MySql

PHP.

La gent de wampserver.com van desenvolupar un WAMP:

Apache + MySql +  PHP per a Windows.

Bàsicament han creat un executable que instal·la Apache, Php, i MySql tot llest per a començar a programar i que permet configurar la majoria de coses amb un clic.

Les directives de PHP.INI o d’Apache (httpd.conf) es poden modificar amb una simple pulsació del botó del ratolí, i llavors el programari modifica els fitxers de configuració.

Així per exemple per a activar en PHP que permeti usar <? i no només <?php, enlloc de modificar l’arxiu PHP.INI i acativar la directiva short open tag, fem clic a la opció pertinent, wamp fa que s’actualitzi la configuració, i al cap de 2 segons en el nostre entorn ja permet executar codis PHP com <?=”Hola Catalunya”?>.

Crear àlies al servidor web es fa també des del ratolí i és terriblement fàcil.

Una altra de les gràcies és que permet disposar de diverses versions d’Apache, de PHP o de MySql i de bescanviar quina s’està executant amb un clic.

Nogensmenys per a fer això s’ha d’instal·lar uns complements.

I per a acabar-ho d’adobar incorpora el PHPMyAdmin, que és un administrador web per a MySql, per a poder crear les taules, índexs, afegir usuaris, permisos, etc… des de la mateixa eina.

No podia faltar la opció phpinfo(). ;-)

Jo acostumo a desenvolupar en PHP contra Linux, o bé contra Windows, però en configuracions on tot és instal·lat manualment i els arxius s’han de modificar a mà: el servidor Web, MySql, i el PHP…

I haig de dir que amb wampserver va ser descarregar-lo i començar a programar en qüestió de segons.

El fet de poder parar tots els serveis per a que no consumeixin memòria ni CPU mentre no els fem servir, i poder-los reiniciar en segons amb un clic, també és d’agrair.

Alliberat PHP 5.2.12

divendres, desembre 18th, 2009

phpS’acaba d’alliberar la versió 5.2.12 de PHP.

Aquesta versió soluciona més de 60 problemes i millora l’estabilitat.

També s’ha incorporat la possibilitat de limitar el número de d’arxius que els usuaris poden enviar al servidor via formulari per a evitar atacs de denegació de servei DoS, com ja van fer el 17 de Novembre amb PHP 5.3.1.

Veure l’anunci oficial de PHP (anglès, traduir al Català amb google).

Vídeo: què és google Chrome OS

dijous, novembre 19th, 2009

El sistema operatiu de Google: Google Chrome OS.

Aquest vídeo, en anglès, explica què és.

Us en faig cinc cèntims: és un navegador. Quan inicies l’ordinador súper-ràpidament s’inicia un navegador i tot, tot, ho fas a Internet.

Ben mirat, si la majoria del nostre temps el passem navegant a Internet, consultant el correu de google, editant documents (es pot fer amb google documents i guardar-los a Internet), llegint feeds RSS, veient vídeos, publicant el bloc, interactuant al Facebook… perquè no fer que l’ordinador arrenqui súper-ràpidament i iniciï un navegador per a fer totes aquestes coses a Internet?.

Això és el que han pensat els nois de google i s’explica al vídeo.

En Richard Stallman, i no només ell, hi estaria en contra i ens avisaria dels perills de que totes les nostres dades, la nostra vida, sigui a la xarxa.

De moment google està fent bé les coses i ens permet exportar i fer un backup de tot el que tenim al núvol (es coneix així Internet quan ens referim a que guardem les nostres dades a algun lloc d’Internet, sense conèixer la infraestructura que hi ha al darrere).

Les consideracions d’Stallman anirien en la línia de la privacitat i la seguretat, i és cert que al Facebook, qualsevol dictadura podria exigir (com fan a la xina amb yahoo i google) i saber qui són els nostres amics i demanar accés al nostra bústia de correu. En el cas d’un mail gratuït de hotmail, yahoo, o gmail, qui ens diu que el garzon o el rubalcaba no es podrien dedicar a espiar-nos preventivament?. No seria cap sorpresa.

Bé, un aspecte a tenir en compte és 1) la privacitat i el perill de que les nostres dades estiguin a la xarxa, i l’altre 2) disponibilitat de servei.

Si gmail no funciona i no tenim accès al nostre correu, podem perdre hores de feina. El mateix si falla google documents.

I si un error als servidors comportés que perdéssim tota la nostra informació podria significar una catàstrofe a la nostra vida o la de la nostra empresa.

Tot això són els reptes als que ens hem d’enfrontar amb aquestes noves tecnologies que canvien amb tanta velocitat i que canvien també la nostra manera de viure i de relacionar-nos amb els altres, com per exemple Facebook.

Truc: Saber qui enllaça al nostre bloc

dilluns, novembre 16th, 2009

codic-cat-blogsearchBlogsearch ens permet saber fàcilment qui enllaça al nostre bloc.

Per tal de saber quins enllaços google ha indexat que apunten al nostre bloc simplement direm:

link:elnostrebloc.cat

I ens retornarà els resultats.

Blogsearch està disponible en Català. Si la veieu en una altra aneu a les preferències i indiqueu-li l’idioma en que google mostrarà els missatges.

Moltes persones no se n’han adonat però google va incorporant la nostra llengua a totes les seves eines.

Fins i tot moltes, no totes, són accessibles des del punt cat.

http://blogsearch.google.cat/

http://www.google.cat

http://maps.google.cat

http://translate.google.cat

codic-cat-google-blogsearch-cut

Youtube Full HD

divendres, novembre 13th, 2009

logo-youtubeYoutube ha anunciat al seu bloc que la setmana entrant donarà suport a vídeos 1080p, és a dir Full HD, la màxima resolució disponible en l’actualitat.

Així doncs podrem pujar vídeos al portal que tinguin la màxima qualitat estandarditzada en l’actualitat.

Si vam pujar un vídeo a aquesta resolució (1920×1080) Youtube, que conserva els original enviats, farà el reencoding, és a dir la reconversió al seu format de vídeo, de manera que estarà disponible a Full HD.

Amb els portàtils actuals no té sentit veure un vídeo en Full HD ja que les pantalles amb prou feines suporten HD (1366×768) o HDTV 720p (1280×720), però si connectem el portàtil, l’ordinador o el media center a un televisor Full HD amb un connector HDMI o un DVI sí que en podrem gaudir a màxima qualitat.

Via: Web Upd8 | Youtube blog