Categories
Dewebloping

WORdER, cercador de paraules

Només ressuscito perquè ha nascut un cercador de paraules pels jocs tipus Scrabble que estan tant de moda darrerament (Apalabrados, Words With Friends…). En català no n’hi havia cap. I ja posats, s’ha fet en diversos idiomes. Espero que us agradi! 🙂

En català:
ca.worder.cat/buscarparaules

En castellà:
es.worder.cat/buscarpalabras

En anglès:
en.worder.cat/wordsfinder

En italià:
it.worder.cat/ricercaparole

En francès:
fr.worder.cat/recherchemots

En alemany:
de.worder.cat/wortsucher

En rus:
ru.worder.cat/slovopoiska

Comparteix a:
Categories
Dewebloping

Analogia immobiliària per a explicar el concepte web

Per coses de la vida he hagut de preparar un curs accelerat de web des de zero, des del significat de domini, passant per l’allotjament i fins al resultat final que veiem als nostres navegadors. Una analogia per fer-ho tot més entenedor, i que ha anat sortint de forma recurrent durant tot el curs, és el símil amb el món immobiliari, on cada casa seria un lloc web.

Web Símil immobiliari
Protocols d’Internet
(tcp/ip, http, ftp, jabber)
La realitat.
Servidors web
(hosting o allotjament)
Solars.
Adreces IP dels servidors webs Ubicacions dels solars.
Dominis Adreces postals.
Llocs web [websites]
(Veure també Aplicació web)
Cases.
Pàgines web Habitacions de dins de les cases.
URLs [adreces] Instruccions per accedir a les habitacions.
Links [enllaços o vincles entre URLs] Carrers que connecten les cases i passadissos que connecten les habitacions (si connecten cases es diuen enllaços externs, i si connecten habitacions es diuen interns).
Disseny Pintura i quadres.
Maquetació
[Programació amb llenguatge de marques i fulls d’estil] (HTML, XHTML, XML, CSS)
Embans (parets secundàries), trespols i guix.
Programació clientside
[executada al navegador d’Internet] (JavaScript (jQuery, prototype), Ajax, Flash)
El mobiliari (armaris, lavabos, llits…). Dónen petites funcionalitats a la casa.
Programació serverside
[executada al servidor web, necessària per crear aplicacions web] (PHP, ASP, perl, Ruby on Rails i el sistema de BBDD, normalment mySQL)
Estructura i parets mestres.
Buscadors
(Google, Yahoo)
Robots que analitzen el contingut de les cases de tothom i el publiquen conjuntament amb les adreces on es pot trobar.
Indexabilitat
(facilitat de les pàgines per ser indexades)
Facilitat de visita de la casa per part de màquines (cyborgs, robots).
Posicionament
(posició que ocupen les pàgines als buscadors)
Coneixement que es té de la casa (o les habitacions de la casa) al barri. Si no la poden visitar els robots o no té res d’interessant, difícilment serà coneguda.
Usabilitat Facilitat de visita de la casa per part de les persones.
Accessibilitat Facilitat de visita de la casa per part de persones amb discapacitats.
Directoris Guies, llistats telefònics, que relacionen les adreces i les cases per categories.
Sistemes de gestió de continguts (CMS)
(WordPress, OSCommerce, MediaWiki, phpPP…)
Cases prefabricades (barracons, comissaries dels mossos, algunes escoles..).

Els que acaben triomfant i generant volums de negoci més grans i més dispersos acostumen a ser software lliure.

Navegadors
(Mozilla Firefox, Internet Explorer, Safari, Opera, Netscape…)
Els nostres ulls, orelles, mans… amb el que ho veiem, escoltem i toquem tot.

El més segur, fiable, pràctic i estable és el Firefox, que és software lliure.

Plugins dels navegadors
(Flash Player, Java VM, Visors 3D, Adobe Reader…)
Tele, ràdio, llibres.
Cookies Calaixos.
Fils RSS Inventaris de les novetats que contenen les cases i/o les habitacions. + info.
Usuari Visitant regular d’una casa.
Visita Accés puntual d’algú a la casa.
Pàgina vista Accés puntual d’algú a alguna de les habitacions.
Banner Cartell publicitari
Pàgina inicial / Pàgina home / Home page Façana
Web 2.0
També anomenada web social
Tendència a fer les cases cada vegada més a mida i a gust dels visitants, tenint-los en compte i fent-los prendre un paper actiu a l’hora d’aportar, compartir i/o valorar el contingut del lloc. Exemples: YouTube, Flickr, twitter, latafanera.net
Blocs
Els orígens de la web 2.0. Típicament inclouen Fils RSS
Cases prefabricades –i normalment unipersonals– fàcil de mantenir i amb petites habitacions (dosis d’informació anomenades entrades o posts) ordenades cronològicament (la més nova més propera). De temes variats o no.
Wikis
Webs col·laboratius. Paradigma de la web 2.0
Grans casals que els mateixos visitants poden redistribuir, millorar, empitjorar o recuperar. On poden afegir, complementar, crear i fins i tot eliminar continguts. Exemple: la Wikipedia.
Web service
Intercomunicació entre webs que ofereixen APIs
Sistema d’intercomunicació entre diverses cases (podria ser el telèfon, fax, internet…).
Mashups
Conseqüència dels web services
Noves cases creades a partir d’informació específica extreta automàticament d’altres cases (utilitzant web services).

L’analogia només és útil per explicar el servei web. Els altres serveis que ofereix Internet, com el correu electrònic, la missatgeria instantània, l’FTP, l’eMule… són més fàcils d’explicar: la bombolla immobiliària almenys ha servit d’alguna cosa. Si se us acudeix algun símil millor o creieu que estaria bé afegir-ne algun altre, no ho dubteu, comenteu!

Per cert, creieu que tot això d’Internet, els negocis que es monten sobre la web, el fenòmen Web 2.0, etc… també són una bombolla? Si fos així, el símil ja seria rodó.

Comparteix a:
Categories
Dewebloping Projectes

iconDock: plugin per la llibreria jQuery

Fa temps que estic programant -a estones- un plugin per emular l’efecte dock del menú del sistema operatiu Mac OS X en web. Encara li falta molt per millorar, però ja l’he publicat.

Exemple pràctic:
icon.cat/software/iconDock/0.8b/dock.html

Enllaç a la pàgina del projecte (amb més informació, descàrrega i instal·lació del plugin):
icon.cat/software/iconDock

Comparteix a:
Categories
Dewebloping Projectes

Contingut distribuït i nou bloc Web ϕ.0

A part del contingut de siknus.com, que també està disponible en rss i atom, hi ha:

Nou bloc Web ϕ.0: compartint enllaços. Recull d’enllaços útils o interessants per fer pàgines web, que és un linkbloc mantingut per mi i d’altres dissenyadors i programadors web en actiu.

Lectures destacades relacionades amb les noves tecnologies, internet, i el disseny i la programació web. Compartides del Bloglines, i, a part del corresponent fil, també estan accessibles en aquest Bloglines-Blog.

Feix de fils (o Blogroll) a Bloglines que segueixo i utilitzo per destacar les lectures anteriors. Exportable OPML.

Lectures interessants o curioses trobades per la bloquesfera, compartides del Google Reader amb aquest fil.

Tots aquests enllaços també estan disponibles més esquemàticament a la secció de fils de siknus.com i/o a la columna de la dreta.

Comparteix a:
Categories
Dewebloping siknus.cat

Canvis a les adreces de siknus.com (RewriteCond-RewriteRule powered)

Us heu adonat dels canvis a les URLs adreces de siknus.com?

1) Com que siknus.com m’agrada més que www.siknus.com, he tret les www.

2) Les adreces dels posts passen a ser de http//www.siknus.com/?p=01-01-07-codi-post a http//siknus.com/codi-post. Molt més elegants, no?

3) http://www.siknus.com/?sec=fotos http://siknus.com/fotos, http://www.siknus.com/?sec=perfil http://siknus.com/perfil, …

4) http://www.siknus.com/?cat=propostes http://siknus.com/categoria/propostes, …

5) http://www.siknus.com/?arxiu=01-2007 http://siknus.com/arxiu/01-2007,…

6) Nous fils (aka feeds): http://siknus.com/rss, http://siknus.com/atom, http://siknus.com/comentaris/rss, http://siknus.com/categoria/codi-categoria/rss, http://siknus.com/codi-post/comentaris/rss…

No us preocupeu ni d’actualitzar els enllaços ni de tornar-vos a subscriure als nous fils. Es fa automàticament.

Si voleu saber com, aquí teniu el .htaccess que ho fa:

Options +FollowSymLinks

RewriteEngine On
RewriteBase /

############ REDIRECTS 301 NOTIFICANT ALS SPIDERS ############

# Elimina el subdomini www i els secta, etc… mal indexats,
# deixant la resta de la URL igual.

RewriteCond %{HTTP_HOST} ^www\.siknus\.com.* [NC,OR]
RewriteCond %{HTTP_HOST} ^secta\.siknus\.com.* [NC,OR]
RewriteCond %{HTTP_HOST} ^bloc\.siknus\.com.* [NC,OR]
RewriteCond %{HTTP_HOST} ^matrix\.siknus\.com.* [NC,OR]
RewriteCond %{HTTP_HOST} ^blog\.siknus\.com.* [NC]
RewriteRule ^(.*)$ http://siknus.com/$1 [R=301,L]

# Si el subdomini que hi ha no és un dels anteriors, envia’l
# com a directori després de la barra. Exemple:
# (De http://parellaperfectometre.siknus.com/
# a http://siknus.com/parellaperfectometre)

RewriteCond %{HTTP_HOST} ^([a-zA-Z_0-9\-]*)\.siknus\.com.* [NC]
RewriteRule ^.*$ http://siknus.com/%1 [R=301,L]

########## ADAPTACIÓ DE LES URLS ANTIGUES A LES NOVES ##########

# Si la URL té un codi de data en el format dd-mm-aa-
# (aproximadament ;)), l’elimina per adapatar els codis antics
# de posts tipus ?p=dd-mm-aa-nom-del-codi als nous
# ?p=nom-del-codi.

RewriteRule ^[0-9]+\-[0-9]+\-[0-9]+\-(.*)$ /$1? [R=301,L]

# /?sec=rss es converteix en /feeds (excepció de la redirecció
# següent, ja que sec=rss passa a ser sec=feeds)
# Possibilitat d’eliminar aquesta regla al cap d’un temps.

RewriteCond %{QUERY_STRING} ^sec=rss.*$
RewriteRule ^$ /feeds? [R=301,L]

# /?sec=* es converteix en /* on * = qualsevol cosa
# Possibilitat d’eliminar aquesta regla al cap d’un temps.

RewriteCond %{QUERY_STRING} ^sec=([a-zA-Z_0-9\-]*)$
RewriteRule ^$ /%1? [R=301,L]

# /?arxiu=* es converteix en /arxiu/*

RewriteCond %{QUERY_STRING} ^arxiu=([a-zA-Z_0-9\-]*)$
RewriteRule ^$ /arxiu/%1? [R=301,L]

# /?e=* es converteix en /forum/entrada/*
# Possibilitat d’eliminar aquesta regla al cap d’un temps.

RewriteCond %{QUERY_STRING} ^e=([a-zA-Z_0-9\-]*)$
RewriteRule ^$ /forum/entrada/%1? [R=301,L]

# /?alb=* es converteix en /fotos/album/*
# Possibilitat d’eliminar aquesta regla al cap d’un temps (poc)

RewriteCond %{QUERY_STRING} ^alb=([a-zA-Z_0-9\-]*)$
RewriteRule ^$ /fotos/album/%1? [R=301,L]

# Si no hi ha QueryString, /feed/rss2 es converteix en /rss

RewriteCond %{QUERY_STRING} ^$
RewriteRule ^feed/rss2/?$ /rss? [R=301,L]

# Si no hi ha QueryString, /feed/atom1 es converteix en /atom

RewriteCond %{QUERY_STRING} ^$
RewriteRule ^feed/atom1/?$ /atom? [R=301,L]

# Si no hi ha QueryString, /feed/comentaris es converteix en
# /comentaris/rss

RewriteCond %{QUERY_STRING} ^$
RewriteRule ^feed/comentaris/?$ /comentaris/rss? [R=301,L]

# Si hi ha el paràmetre cat=*,i és un feed tipus feed/*2 (rss)
# o feed/*1 (atom), /feed/*numero/?cat=nomcat es converteix en
# /categoria/nomcat/*

RewriteCond %{QUERY_STRING} ^cat=([a-zA-Z_0-9\-]*)$
RewriteRule ^.*feed/([a-zA-Z_\-]*).*$ /categoria/%1/$1? [R=301,L]

# Si hi ha el paràmetre cat=*, i no és un feed, /?cat=* es
# converteix en /categoria/*

RewriteCond %{REQUEST_URI} !^.*feed.*$
RewriteCond %{QUERY_STRING} ^cat=([a-zA-Z_0-9\-]*)$
RewriteRule ^$ /categoria/%1? [R=301,L]

# Si hi ha el paràmetre p=*, i és un feed, ha de ser de
# comentaris  i rss, per tant /feed/comentaris/?p=* es converteix
# en /*/comentaris/rss

RewriteCond %{QUERY_STRING} ^p=([a-zA-Z_0-9\-]*)$
RewriteRule ^.*feed/([a-zA-Z_\-]*).*$ /%1/comentaris/rss? [R=301,L]

# Si hi ha només el paràmetre p=*, i no és un feed, /?p=*
# es converteix en /*

RewriteCond %{REQUEST_URI} !^.*feed.*$
RewriteCond %{QUERY_STRING} ^p=([a-zA-Z_0-9\-]*)$
RewriteRule ^$ /%1? [R=301,L]

# Si hi ha el paràmetre p=* i el paràmetre rec=*, /?p=*1&rec=*2
# es converteix en /*1/rec/*2 (sistema d’obrir recomanar per
# e-mail incrustat als feeds).

RewriteCond %{QUERY_STRING} ^p=([^&]*)&rec=([^&]*)$
RewriteRule ^$ /%1/rec/%2 [R=301,L]

################################################################
# (Si es demana un arxiu o un directori que existeix, es deix
# passar la url tal qual)

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)$ – [L]

####################### REDIRECTS OCULTS #######################
## (no es mostren públicament, mantenint la URL al navegador) ##

RewriteRule ^bloc/?$ / [R=301,L,NC]
RewriteRule ^perfil/?$ index.php?sec=perfil [L,NC]
RewriteRule ^fotos/?$ index.php?sec=fotos [L,NC]
RewriteRule ^forum/?$ index.php?sec=forum [L,NC]
RewriteRule ^feeds/?$ index.php?sec=feeds [L,NC]

RewriteRule ^rss/?$ rss2.php [L,NC]
RewriteRule ^atom/?$ atom1.php [L,NC]
RewriteRule ^comentaris/rss/?$ rss2comentaris.php [L,NC]

RewriteRule ^categoria/([a-zA-Z_0-9\-]+)/rss/?$ rss2.php?cat=$1 [L,NC]

RewriteRule ^categoria/([a-zA-Z_0-9\-]+)/atom/?$ atom1.php?cat=$1 [L,NC]

RewriteRule ^categoria/([a-zA-Z_0-9\-]+)/?$ index.php?cat=$1 [L,NC]

RewriteRule ^arxiu/([a-zA-Z_0-9\-]+)/?$ index.php?arxiu=$1 [L,NC]

RewriteRule ^forum/entrada/([a-zA-Z_0-9\-]+)/?$ index.php?e=$1 [L,NC]

RewriteRule ^fotos/album/([a-zA-Z_0-9\-]+)/?$ index.php?alb=$1 [L,NC]

RewriteRule ^([a-zA-Z_0-9\-]+)/comentaris/rss/?$ rss2comentaris.php?p=$1 [L,NC]

RewriteRule ^([a-zA-Z_0-9\-]+)/rec/([0-9]+)/?$ index.php?p=$1&rec=$2 [L,NC]

RewriteRule ^([a-zA-Z_0-9\-]+)/?$ index.php?p=$1 [L,NC]

# Uff…

Mai abans havia fet cap .htaccess, no havia fet gairebé res de Regular Expressions i no sabia ni que el mod_rewrite de l’Apache existia, per tant si veieu que hi ha algun error o que es pot millorar o optimitzar el codi, feu-m’ho saber.

Ara a esperar que els Redirects 301 (mogut permanentment) facin el seu efecte i els cercadors actualitzin les noves URLs. 😉

Una altra curiositat en forma de codi guarro:

if(isset($_REQUEST["p"])) {
    $prex=mysql_query("SELECT id_post FROM skb_bposts WHERE (filtre=’1′ OR filtre=’2′) AND id_post=’".$_REQUEST["p"]."’");
    if (!mysql_num_rows($prex)) {
        $pr=mysql_query("SELECT id_post FROM skb_bposts WHERE (filtre=’1′ OR filtre=’2′) AND id_post LIKE ‘%".$_REQUEST["p"]."%’ ORDER BY datahora DESC LIMIT 1");
        if (mysql_num_rows($pr)) { //anar al post
            $pa=mysql_fetch_array($pr);
            header("HTTP/1.1 301 Moved Permanently");
            header("Status: 301 Moved Permanently");
            header("Location: /".$pa["id_post"]);
            exit(0);
        }
    }
}

Això vol dir que si per exemple aneu a papallona.siknus.com, automàticament us porta a siknus.com/efecte-papallona. I qui diu papallona diu qualsevol part del codi del post al que voleu accedir: manu.siknus.com, mejide.siknus.com ….

Comparteix a: