Message in a bottle.... » Disseny web http://junyent.org/blog I'll send an SOS to the world.... Tue, 06 Jul 2010 19:22:01 +0000 en hourly 1 http://wordpress.org/?v=3.0 Presentacions al navegador http://junyent.org/blog/2005/11/15/presentacions-al-navegador http://junyent.org/blog/2005/11/15/presentacions-al-navegador#comments Tue, 15 Nov 2005 12:45:57 +0000 joan http://www.junyent.org/blog/index.php/arxius/2005/11/15/presentacions-al-navegador/

Via Ajaxian.com descobreixo un parell de possibilitats per a realitzar presentacions simplement a través del navegador que es sumen al ja conegut S5 de n’Eric Meyer.

Tant AJAX-S com Presentacular es basen en la idea de combinar XHTML+CSS+Javascript (a l’estil de l’S5). AJAX-S, però incolu el contingut de la presentació en arxius XML separats que després són incorporats via AJAX.

Presentacular per la seva banda incorpora els efectes de les llibreries script.aculo.us a l’S5.

Algú es preguntarà perquè preparar les presentacions d’aquesta manera. Doncs en primer lloc per una qüestió de portabilitat. Gairebé tots els ordinadors (que et puguis trobar quan vas a fer una xerrada/conferència) tenen un navegador i pots oblidar-te de quin Sistema Operatiu i versió fan servir. Però en segon lloc perquè permet presentar informació de diferents maneres i per a diferents mitjans de manera molt senzilla. Per exemple, momés cal canviar l’estil CSS i facilment podem publicar els continguts de la presentació en una pàgina web estàtica.

]]> http://junyent.org/blog/2005/11/15/presentacions-al-navegador/feed 0 Dissenys CSS sugerents http://junyent.org/blog/2005/06/13/dissenys-css-sugerents http://junyent.org/blog/2005/06/13/dissenys-css-sugerents#comments Mon, 13 Jun 2005 14:36:30 +0000 joan http://www.junyent.org/blog/?p=265

Mirant els arxius del CSS Reboot he trobat unes quantes pà gines amb uns disenys molt sugerents a tenir molt en compte per a un futur rediseny.

]]> http://junyent.org/blog/2005/06/13/dissenys-css-sugerents/feed 1 Camina cap al teu estàndar http://junyent.org/blog/2005/06/13/camina-cap-al-teu-estandar http://junyent.org/blog/2005/06/13/camina-cap-al-teu-estandar#comments Mon, 13 Jun 2005 11:00:50 +0000 joan http://www.junyent.org/blog/?p=263

Al blog d’en Mike Davison trobo un artícle molt interessant (March to your own standard) escrit ja fa temps sobre la importància relativa de seguir els estàndars que marca la W3C.

2 detalls que m’han agradat d’aquesta web:

  • Permet especificar el tipus i la mida de la font per a una lectura més còmoda
  • La manera com numera els comentaris
]]> http://junyent.org/blog/2005/06/13/camina-cap-al-teu-estandar/feed 1 Videoposts http://junyent.org/blog/2005/05/29/videoposts http://junyent.org/blog/2005/05/29/videoposts#comments Sun, 29 May 2005 19:46:43 +0000 joan http://junyent.no-ip.org/?p=243

Per tal de postejar el video de Mercury Rev del post anterior he fet servir una intreficie en flash gentilesa de Tintachina i El hombre que comía diccionarios.

Per a poder postejar video cal:

  1. 1. Descarrega el visor (.zip, 28 Ks) d’aquí: videoposts en tintachina
  2. 2. Descomprimir i pujar el visor al servidor.
  3. 3. Convertir els arxius de video a .flv .
  4. 4. Pujar el video al servidor.
  5. 5. Insertar el següent codi per a insertar el videopost:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="345" height="300"><param name="movie"
value="http://ruta_al_visor.swf?video=http://ruta_al_video.flv&buffer=6"><param
name="quality" value="high"><embed
src="http://ruta_al_visor.swf?video=http://ruta_al_video.flv&buffer=6"
quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="345"
height="300"></embed></object>

Per a convertir els arxius de video a .flv pots fer servir els següents programes: Macromedia Flash, Riva FLV Encoder (gratuït), Quicktime Pro (necessita el plguin Macromedia Flash Exporter)… Per a linux es pot utilitzar el ffmpeg (o derivats).

Llicència d’ús:

Licencia de uso
Si usas el módulo flash sería un detalle que mencionaras a Tintachina y El hombre que comía diccionarios y nos enlazaras :-) Si alguien considera que también serían útiles las fuentes no tiene más que decirlo. Y se haces mejoras (añadir control de sonido, botones avance y retroceso, enlaces directos a distintos vídeos o fragmentos) ¡compártelas!

Més informació: videoposts en tintachina

]]> http://junyent.org/blog/2005/05/29/videoposts/feed 1 CSS Reboot http://junyent.org/blog/2005/05/03/css-reboot http://junyent.org/blog/2005/05/03/css-reboot#comments Tue, 03 May 2005 14:01:21 +0000 joan http://junyent.no-ip.org/index.php/arxius/2005/05/03/css-reboot/

El CSS Reboot May First ha estat un projecte col·lectiu per tal que una bona pila de llocs web es posin d’acord i llancin redisenys de les seves pà gines col·lectivament l’1 de maig del 2005.

M’hagués agradat prendre’n part, però ja havia canviat recentment el disseny i la setmana passada va ser una setmana molt intensa i no tenia temps a fer un redisseny.

Recomano passejar-se per la galeria de dissenys perquè la veritat és que hi ha alguns dissenys realment espectaculars i moltes idees interessants.

]]> http://junyent.org/blog/2005/05/03/css-reboot/feed 0 Cheat sheets PHP i CSS http://junyent.org/blog/2005/05/03/cheat-sheets-php-i-css http://junyent.org/blog/2005/05/03/cheat-sheets-php-i-css#comments Tue, 03 May 2005 12:32:51 +0000 joan http://junyent.no-ip.org/index.php/arxius/2005/05/03/cheat-sheets-php-i-css/

Via a.css (al seu torn via Proletarium :p) he descobert un parell de Cheat sheets (altrament dites “xuletes” sobre CSS i PHP la mar d’útils obra de Ilovejackdaniels.com

]]> http://junyent.org/blog/2005/05/03/cheat-sheets-php-i-css/feed 0 Marcs amb CSS http://junyent.org/blog/2005/04/27/marcs-amb-css http://junyent.org/blog/2005/04/27/marcs-amb-css#comments Wed, 27 Apr 2005 21:00:38 +0000 joan http://junyent.no-ip.org/index.php/arxius/2005/04/27/marcs-amb-css/

A partir del tutorial d’Stu Nicholls sobre com crear marcs amb utilitzant estils CSS he creat una plantilla (comentada) per a poder crear pàgines amb marcs d’una manera ràpida i senzilla.

cssframes.htm (renombreu a .htm)

]]> http://junyent.org/blog/2005/04/27/marcs-amb-css/feed 0 Obrir una nova finestra amb XHTML http://junyent.org/blog/2005/04/08/obrir-una-nova-finestra-amb-xhtml http://junyent.org/blog/2005/04/08/obrir-una-nova-finestra-amb-xhtml#comments Fri, 08 Apr 2005 11:30:46 +0000 joan http://junyent.no-ip.org/index.php/arxius/2005/04/08/obrir-una-nova-finestra-amb-xhtml/

A Liquidpulse he trobat un artícle sobre com obrir un enllaç en una finestra nova sense trencar la validesa XHTML.
En comptes d’utilitzar només Javascript per a obrir una finestra nova, podem combinar una mica de Javascript i una mica d’HTML. Per exemple:

< a href= "http://google.com" onclick="window.open(this.href); return false;" > click me! < /a >

Anem a analitzar aquest codi:

  • href – És la pà gina que volem obrir en una finestra nova.
  • onclick – És un esdeveniment. El codi associat
    amb aquest esdeveniment s’executa quan succeeix. En aquest cas, quan
    es clica l’enllaç.
  • window.open() – Aquest és el codi Javascript que obre una
    finestra nova.
  • this.href – this en javascript sempre fa referència
    a l’objecte actual. En aquest cas, el tag < a >. href és
    una propietat de l’objecte < a >. Conté l’objectiu especificat a
    l’atribut href.
  • return false – En Javascript, return retorna un
    valor d’una funció o esdeveniment. Col·locant-ho com a fals
    estem dient al navegador que aturi qualsevol altra acció de la seqüència.

Amb aquesta combinació de Javascript i HTML aconseguim que el document sigui 100% XHTML compatible, sigui molt més accessible per a diferents dispotitius (dispositius mòbils, navegadors en mode text, lectors de pantalla…), que els cercadors puguin seguir l’enllaç i indexar-lo correctament i que els navegadors que no soporten javascript (o s’hi s’ha desactivat) puguin obrir també l’enllaç.

]]> http://junyent.org/blog/2005/04/08/obrir-una-nova-finestra-amb-xhtml/feed 0