
Archivos de la Categoria ‘Diseño Web’


Alternativa a Iconize
Mayo 10th, 2008Hace 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.
![]()
Lo primero. Bajar la librería jQuery y enlazarla dentro de las etiquetas <head></head>
-
<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).
-
<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:
-
.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:
-
<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>

JW FLV Media Player 3.16
Mayo 9th, 2008JW 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 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>

Detecta el navegador y la versión con Javascript
Mayo 8th, 2008Os 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








