2008 » Mayo

Alternativa a Iconize

Mayo 10th, 2008

Hace un tiempo publiqué un post sobre Iconize.

Es un código con CSS que sirve para poner un icono automáticamente a tus enlaces hacia archivos. Por ejemplo que al linkar a un pdf el link de este aparezca un icono de pdf y asi con cualquier fichero.
Al parecer este código no servia para IE6 (menuda novedad).
Así pues, a través de Blogandweb he encontrado una solución hecha en jQuery que sí funciona en IE6.

Alternativa a Iconize
Lo primero. Bajar la librería jQuery y enlazarla dentro de las etiquetas <head></head>

PLAIN TEXT

HTML:

<script src="jquery.js" type="text/javascript"></script>

En el mismo después de incluir la librería jQuery incluimos el las siguientes funciones:

La primera función añade un estilo al enlace para cada tipo de extensión (PDF, ZIP, DOC).
La segunda función añade el atributo target="_blank" a todos los enlaces externos de nuestro site para que se ejecuten en una nueva ventana. (Muy útil).

PLAIN TEXT

HTML:

<script type="text/javascript"></script>
$(document).ready(function(){
//Definición de clases para cada tipo de archivo.
$("a[@href$=pdf]").addClass("pdf");
$("a[@href$=zip]").addClass("zip");
$("a[@href$=doc]").addClass("doc");
//Estilos y atributos a los enlaces externos.
$("a:not([@href*=http://blogandweb.com])").not("[href^=#]")
.addClass("externo")
.attr({ target: "_blank" });
});

Código para los estilos en CSS para cada extensión:

PLAIN TEXT

HTML:

.pdf {
padding-left: 20px;
background: transparent url(icono-pdf.png) left top no-repeat;
}
.zip {
padding-left: 20px;
background: transparent url(icono-zip.png) left top no-repeat;
}
.doc {
padding-left: 20px;
background: transparent url(icono-doc.png) left top no-repeat;
}
.externo {
padding-left: 20px;
background: transparent url(icono-ext.png) left top no-repeat;
}

Ahora cada vez que pongamos en nuesta web enlaces a archivos como estos, automáticamente nos aparecerán los iconos de archivo en los enlaces:

PLAIN TEXT

HTML:

<a href="documento.pdf">Archivo PDF</a>
<a href="documento.zip">Archivo ZIP</a>
<a href="documento.doc">Archivo DOC</a>
<a href="http://google.com">Enlace externo</a>
<a href="http://undominio.com">Enlace externo</a>
<a href="http://blogandweb.com">blogandweb</a>
<a href="#enlaces">Enlace local </a>

Escrito en Scripts | 2 Comentarios »

JW FLV Media Player 3.16

Mayo 9th, 2008

JW FLV Media Player 3.16 es la última versión de este famoso reproductor flv Open Source de audio y video hecho con Adobe Flash. Soporta FLV, MP3, H264, SWF, JPG, PNG y GIF. Ideal para reproducir videos y audio en tu blog o web. Se le pueden pasar variables y tiene una extensa javascript API.

JW FLV Media Player 3.16

Variables del reproductor

JW FLV Media Player Plugins (WordPress, Joomla, Drupal, etc...)

Ejemplo de código para incluirlo en tu blog o web:

<script type="text/javascript" src="/embed/swfobject.js"></script>

<div id="container">Esto será reemplazado</div>

<script type="text/javascript">var so = new SWFObject('/embed/mediaplayer.swf',
'jstest','400','220','8');

so.addParam('allowscriptaccess','always');

so.addParam('allowfullscreen','true');so.addVariable('width','400');

so.addVariable('height','220');so.addVariable('file','/upload/dvdmenu.flv');

so.addVariable('javascriptid','jstest');so.addVariable('enablejs','true');

so.write('container');</script>

Descargar JW FLV Media Player 3.16 Vía | jeroenwijering

Escrito en Diseño Web | 13 Comentarios »

Vectores para el verano

Mayo 8th, 2008

Ahora que viene el buen tiempo.. que os parece estos sets vectoriales con motivos veraniegos?

Vectores para el verano

Descargar Summer Sun Vectors Vía | Garcya.us

Escrito en Arte y Diseño | 3 Comentarios »

Detecta el navegador y la versión con Javascript

Mayo 8th, 2008

Os dejo un código muy útil que detecta el tipo de navegador y su versión:

1. // Browser detection

2.3. // Internet Explorer

4. var ie  = document.all != null;  //ie4 and above

5. var ie5 = document.getElementById && document.all;

6. var ie6 = document.getElementById && document.all&&(navigator.appVersion.indexOf("MSIE 6.")>=0);

7.

8. // Netscape

9. var ns4 = document.layers != null;

10. var ns6 = document.getElementById && !document.all;

11. var ns  = ns4 || ns6;

12.

13. // Firefox14. var ff  = !document.layers && !document.all;

15.

16. // Opera17. var op  = navigator.userAgent.indexOf("opera")>0;

18. var op7 = op && operaVersion() <= 7;

19. var op8 = op && operaVersion()>= 8;

20.

21. // Detects the Opera version

22. function operaVersion() {

23. agent = navigator.userAgent;

24. idx = agent.indexOf("opera");

25. if (idx>-1) {

26. return parseInt(agent.subString(idx+6,idx+7));

27.}

28.}

Vía | informatica-practica.net

Escrito en Scripts | 0 Comentarios »

Buscador de recursos

Mayo 6th, 2008

En myopenstudio descubro un buscador de recursos On-line. Es tan sencillo como poner algo en la caja de texto y el buscador se encarga de hacer una busqueda de algun recurso de un listado de páginas especializadas en recursos para diseñadores.

Buscador de recursos