MixInformatico.com » Html http://www.mixinformatico.com Reforzando tus ideas Sat, 31 Jul 2010 00:47:31 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Query Multimedia Portfolio – Galería con contenido múltiple http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/ http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/#comments Sun, 04 Apr 2010 19:16:51 +0000 javier http://www.mixinformatico.com/?p=9221

jQuery Multimedia Portfolio un interesante plugin para jQuery que nos permitirá crear un porfolio utilizando una especia de carrusel con contenido múltiple. Para ser claros, en el no solo podremos introducir imágenes, sino que jQuery Multimedia Portfolio nos permitirá también optar por agregar videos en formato “ flv” o audio en formato “ mp3 ”. Esto es sin duda algo que hace a jQuery Multimedia Portfolio realmente interesante. Este plugin detectara automáticamente la extensión del archivo y le inserta el contenido o la funcionalidad correspondiente a cada uno de ellos. Por ejemplo, en el caso de videos, la opción de reproducción.

Ver Demo

Descargas:

Podremos bajar los archivos desde infectedfx o de la web oficial de openstudio

USO :

Como de costumbre lo primero que haremos será realizar las llamadas correspondientes al script y hoja de estilos utilizadas. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head > .

JavaScript:

1
2
3
4
5
6
7
8
9
10
11

<link rel=“stylesheet” href=“css/multimedia-portfolio.css” type=“text/css” media=“screen” />
<script type=“text/javascript” src=“js/jquery.js”></script>
<script type=“text/javascript” src=“js/jquery.dimensions.js”></script>
<script type=“text/javascript” src=“js/ui.mouse.js”></script>
<script type=“text/javascript” src=“js/ui.slider.js”></script>
<script type=“text/javascript” src=“js/jquery.multimedia-portfolio.js”></script>
<script type=“text/javascript”>
  $(document).ready(function(){
  $(“ul.multimedia-portfolio”).multimedia_portfolio({width: 500, baseDir: ‘.'});
  });
</script>

y para insertar el contenido, la siguiente estructura

HTML:

1
2
3
4
5

<ul class=”multimedia-portfolio”>
<li>
………………CONTENIDO………………….
</li>
</ul>

Ejemplo: agregar imagenes de contenido

HTML:

1
2
3

<li>
<a href=”imagen.jpg” alt=”agrandir”> <img src=”thumbnail.jpg” title=”imagen” /> </a>
</li>

HTML:

1
2
3

 <li>
<a href=”video.flv” alt=”video”> <img src=”imagen.jpg” width=”320? height=”240? title=”video” /> </a>
</li>

Ejemplo: agregar audio record (mp3 format) de contenido

HTML: 

1
2
3

<li>
<a href=”audio.mp3? alt=”Audio”> <img src=”imagen.jpg” title=”Audio” /> </a>
</li>

HTML:

1
2
3
4
5

<ul class=”multimedia-portfolio”>
<li>
………………CONTENIDO………………….
</li>
</ul>

Ejemplo: agregar imagenes de contenido

HTML:

1
2
3

<li>
<a href=”imagen.jpg” alt=”agrandir”> <img src=”thumbnail.jpg” title=”imagen” /> </a>
</li>

Ejemplo: agregar video (flv format) de contenido

HTML: 

1
2
3

<li>
<a href=”video.flv” alt=”video”> <img src=”imagen.jpg” width=”320? height=”240? title=”video” /> </a>
</li>

Ejemplo: agregar audio record (mp3 format) de contenido

HTML:

1
2
3

<li>
<a href=”audio.mp3? alt=”Audio”> <img src=”imagen.jpg” title=”Audio” /> </a>
</li>
]]> http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/feed/ 0 Script para ampliar la funcionalidad de desvanecer cualquier tipo de elemento HTML http://www.mixinformatico.com/2010/04/04/script-para-ampliar-la-funcionalidad-de-desvanecer-cualquier-tipo-de-elemento-html/ http://www.mixinformatico.com/2010/04/04/script-para-ampliar-la-funcionalidad-de-desvanecer-cualquier-tipo-de-elemento-html/#comments Sun, 04 Apr 2010 08:02:41 +0000 javier http://www.mixinformatico.com/?p=9213

Elem Fader es un script que amplía la funcionalidad para desvanecer cualquier tipo de elemento HTML. Dando un efecto bastante agradable al realizar los mouseover sobre cada uno de ellos. Es muy simple de aplicarlo a listas, botones de formularios, inclusive adaptarlo a nuestro Menú con Imágenes.
Ver demos – Descarga demo

Uso.

Lo primero será descargar el script (usar botón derecho y guardar “enlace como”). Lo alojaremos en nuestra carpeta o servidor. Posteriormente llamaremos a esa librería incluyendo el siguiente código entre las etiquetas < Head > …..< /Head > de nuestra Web.

PLAIN TEXT JavaScript: <script language=“JavaScript” src=“JSFX_ElemFader.js” type=“text/javascript”></script>

Ejecutaremos la acción mediante el evento “onload“.

PLAIN TEXT HTML: <body onload=”JSFX.fadeElemAuto()”> Podemos observar que en la etiqueta < body > tenemos el evento onload=” JSFX.fadeElemAuto()” Es decir, que cuando se han terminado de cargar todos los elementos de la página se llamará a una función llamada “JSFX.fadeElemAuto()” que hemos definido en el script.

Aplicado a un menu con imagenes
Creamos nuestro menú como habitualmente lo hacemos con su correspondiente CSS.
PLAIN TEXT
CSS:

1
2
3
4
5
6
7
8

 
#menu { height:100px;}
#menu ul { list-style:none; margin:0; padding:0 10px;margin:0  0 0 100px; }
#menu li { float:left; }
#menu li a { display:block; height:40px; width:113px;  background-position:center top; cursor:pointer  }
#menu li#home a { background-image:url(home.gif);  }
#menu li#about a{ background-image:url(about.gif);  }
#menu li#links a { background-image:url(links.gif);  }</div>

Y en nuestra estructura, agregaremos una nueva clase denominada elemFader, la cual nos generara el efecto desvanecido al realizarse el Mouseover entre cada uno de los enlaces.
PLAIN TEXT
HTML:

1
2
3
4
5
6
7

<div  id=”menu”>
<ul>
<li id=”home”><a class=”elemFader” href=”#”></a></li>
<li id=”about”><a class=”elemFader” href=”#”></a></li>
<li id=”links”><a class=”elemFader” href=”#”></a></li>
</ul>
</div></div>


Aplicado a los botones de nuestro formulario
También lo haremos utilizando la clase elemFader
Aplicado a enlaces con css
PLAIN TEXT
CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.elemFaderCeleste
{
position:relative;filter:alpha(opacity=20);  -moz-opacity:0.2;
display:  block;
border-top     : 1px solid #77CFFB;
border-left    : 1px solid #77CFFB;
border-right   : 1px solid #7BD0FB;
border-bottom  : 1px solid #7BD0FB;</div>
background-color:#7FD4FF;
 
font-family:  Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
text-decoration:none;
 
color:  #FFFFFF;
width:100%;
text-align:left;
}

La estructura, llamando en cada enlace a la clase “elemFaderCeleste”
PLAIN TEXT
HTML:

1
2
3
4
5

<div  style=”width: 80px”>
<a class=”elemFaderCeleste”  href=”#”>Home</a>
<a class=”elemFaderCeleste”  href=”#”>Contacto</a>
<a class=”elemFaderCeleste”  href=”#”>About</a>
</div>

Mas Info javascript-fx
PLAIN TEXT
HTML:

1
2
3
4
5
6

<form>
<input value=”Aceptar”  class=”elemFader” type=”button”>
<input  value=”cancelar”  class=”elemFader” type=”button”>
<input  value=”enviar”  class=”elemFader” type=”button”>
<input  value=”borrar”  class=”elemFader” type=”button”>
</form>
]]> http://www.mixinformatico.com/2010/04/04/script-para-ampliar-la-funcionalidad-de-desvanecer-cualquier-tipo-de-elemento-html/feed/ 0 Codigo malicioso en sitio web iframe http://www.mixinformatico.com/2010/04/04/codigo-malicioso-en-sitio-web-iframe/ http://www.mixinformatico.com/2010/04/04/codigo-malicioso-en-sitio-web-iframe/#comments Sun, 04 Apr 2010 07:54:05 +0000 javier http://www.mixinformatico.com/?p=9211 Virus Iframe el virus que se propaga en tu sitio web

¿Virus Iframe? ¿Conocías este virus?, seguramente si eres una internauta promedio utilizando un hosting -como casi todos- nunca habías oído hablar de este virus, pero no te preocupes, te vamos a explicar de qué se trata; En si es un troyano/virus que se instala en nuestro computador y cada vez que nosotros nos conectamos al FTP de nuestra página automáticamente inserta un código en todas nuestras páginas, si, así como lees! como si no fuera suficiente con los virus que podemos llegar a tener en nuestra PC ahora también debemos cuidar nuestras páginas webs.

Los virus iframes se caracterizan por incluir código en las páginas web, este código es en la forma de una iframe invisible que re direcciona al usuario a una web maligna en donde le infecta, a diferencia de otros tipos de malware, este virus requiere de webmasters para propagarse, básicamente lo que hace el virus es esperar por conexiones FTP al servidor, una vez que el webmaster o dueño de un sitio web ha accedido a su sitio vía FTP el virus pasa al sitio web en donde modifica algunas páginas html e inserta un código similar a:

1

<iframe src=”http://sitio_malicionso.xxx” width=109 height=147 style=”visibility: hidden”/>

No importa cuántas veces borremos el código de la web, el virus volverá aparecer, la razón es sencilla:

El PC del webmaster o persona con acceso FTP está infectado y cada vez que se conecta FTP el virus pasa a las páginas web.

A menudo los usuarios de hosting piensan que el servidor donde está su página tiene el virus, pero no es así, el virus está en el propio PC de los usuarios y esto está comprobado por todas los fabricantes de antivirus y en internet podrás observar a través de los buscadores que este es un virus netamente de usuario no de servidor.

Consejos para eliminar este virus:

1-    Limpiar el PC infectado (casi 90% de los usuarios dice por costumbre: NO…PERO TENGO ANTIVIRUS…IMPOSIBLE QUE MI PC ESTE INFECTADO…El afirmar esto es un error muy grave…ya que los antivirus en su mayoría no son capaces de detectar este virus , ya que es solo un código y no algo ejecutable, por lo tanto deja de pensar que tu PC es blindado, NO existe PC blindado!

2-    Asegúrate  de que dispones de un buen antivirus y el mismo se encuentra actualizado y además tengas instalado en tu PC anti-malwares.  ( SOLO ANTIVIRUS NO FUNCIONA)

3-    Usar la herramienta hijackthis para detectar la presencia del virus local.

4-    Ingresa a tu Cpanel, cambia las contraseñas.

5-    Elimina el código malicioso en las páginas web

6-    Si utilizas el FTP FILEZILLA, elimínalo inmediatamente de tu PC, el filezilla es fuente de infecciones. Utiliza otro software ftp pero NO filezilla.

ATENCION:

Este código malicioso también se inyecta en los CMS que no están actualizados!

Joomla es fuente de infecciones graves… POR LO TANTO MANTEN TU CMS SIEMPRE ACTUALIZADO y asegurate siempre de cambiar las contraseñas de administrador de JOOMLA.

Nombre del virus : GUMBLAR

Fuentes: http://en.wikipedia.org/wiki/Gumblar

]]> http://www.mixinformatico.com/2010/04/04/codigo-malicioso-en-sitio-web-iframe/feed/ 1