Arxiu d'etiquetes: Disseny web

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.

Videoposts

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

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.

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.hrefthis 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ç.