vicioalex
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta Tutoriales. Mostrar todas las entradas
vicioalex
Script php imagenes de artistas sacadas de google
Este script lo use en el reproductor de mi pagina web para mostrar la foto del artista cada vez que cambie de canción, lo dejo por si a alguien le es de utilidad.

para este código mostrara solo la primera imagen del buscador google, pero si desean se puede configurar para mostrar las 2 o 5 primeras imágenes, tambien le agregue la opcion para configurar diferentes tamaños de imagenes: small, medium, large
Eso lo configuran en imgsz=medium

Para mas configuracion aqui les dejo la pagina oficial del Api de google:
https://developers.google.com/image-search/v1/jsondevguide

Este es la API principal de google de donde jalaremos la imagen:
http://ajax.googleapis.com/ajax/services/search/images?v=1.0&imgsz=medium&q=tu_artista

Primero creamos el archivo "img.php"

En la linea 5 donde esta la api de google buscan donde dice large y lo puden cambiar por medium o small si lo que quieren son imagenes mas pequeñas. 
<?php
function imagenes($q) {
    $q = strtolower($q);
    $q = str_replace(" ", "+", $q);
    $jsrc = "http://ajax.googleapis.com/ajax/services/search/images?v=1.0&imgsz=large&q=" . $q;
    $json = file_get_contents($jsrc);
    $jset = json_decode($json, true);
    return $jset["responseData"]["results"][0]["url"];
}
header('Content-type: image/jpeg');
readfile(imagenes($_GET['q']));
?>

abrimos el archivo con la siguiente direccion:

http://www.TU_WEB.COM/img.php?q=NOMBRE_DE_ARTISTA

Demo del ejemplo funcionando:

http://www.vicioalex.com/musica/img.php?q=Adele:
Seguir Leyendo 5
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , , | El: , A las: VicioAlex 12:45 p. m.
vicioalex
Como bloquear una página web sin necesidad de usar un programa
Hoy les mostrare una forma muy sencilla y sin necesidad de descargar ningún programa, a bloquear paginas web en su pc (Es algo así como un filtro), de esta manera ustedes podrán bloquear una o mas paginas para evitar que la persona ingrese a determinada pagina.

Y si es que son padres y están hartos de que sus hijos pasen horas en facebook con este pequeño tutorial podrán bloquear dicha pagina y también podrán desbloquearlo las veces que quieran.
solo necesitas editar un archivo que esta dentro del registro de windows. El truco es conocido por muchos y no es complicado de hacerlo, pero quizás si tienen niños pequeños o personas que saben poco de tecnología (y que no visitan este blog) podrán usar este truco.

1. Buscamos el archivo "hosts".

  • Lo que hay que hacer es buscar un archivo específico en nuestra computadora, en Windows es el Hosts que se encuentra en C:\WINDOWS\system32\drivers\etc
  • Si no encuentras la ruta, usa el buscador de windows:
    Para xp: Has clic derecho en el disco C:\ y luego clic en buscar... en la ventana siguiente escribe la palabra "hosts" y listo, ahora solo espera unos segundos mientras el buscador hace su trabajo.
    Para Windows 7: Solo entra al disco C:\ y en la parte derecha de arriba donde hay una cajita de buscador escribes la palabra "hosts" y listo.
    • Así llegarán a un archivo llamado "hosts" el cual no tiene extensión alguna pero lo podemos editar usando el Bloc de Notas.

2. Editando el archivo "hosts"

  • Copiamos el archivo "hosts" al escritorio por ejemplo y ahí lo editaremos, luego lo chancaremos al original.
  • Primero tienen que abrir un bloc de notas, haciendo clic derecho en el escritorio >> Nuevo >> Documento de texto.
  • Una vez abierto el bloc de notas, hacen clic en archivo >> Abrir. Luego seleccionan el archivo "hosts", y se abrirá para poder editarlo
  • No olviden de cambiar en la parte de abajo el tipo por todos los archivos asi como esta en la imagen de abajo.

3. Bloqueando las paginas deseadas

  • Para bloquear una web específica debemos agregar la URL que deseamos bloquear sin tocar nada más en el archivo (si tocas algo se podrían mover configuraciones de tu computadora) antes que eso debes agregar la IP asociada al localhost (usualmente es 127.0.0.1)
  • Por ejemplo si queremos bloquear Facebook, Twitter y Youtube haremos lo siguiente:
    127.0.0.1 www.facebook.com
    127.0.0.1 www.twitter.com
    127.0.0.1 www.youtube.com
  • Luego guardas el archivo, y lo chancas encima del archivo original. Y listo
Es recomendable antes de hacer cambios al archivo hosts, hacerle una copia de seguridad, por si algo sale mal, solo chancan el que editaron y todo quedará normal. El truco también funciona en Mac, solo deben buscar el archivo hosts en /private/etc
Es así como van a poder bloquear las páginas de manera sencilla y sin necesidad de usar un programa adicional.
Seguir Leyendo 0
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 10:59 p. m.
vicioalex
Script buscador de videos para tu pagina web
Por fin me di un tiempo para publicar este script de buscador de videos, es el mismo que tengo en mi sitio web www.vicioalex.com/video este script da la posibilidad a tus usuarios de buscar videos en youtube, la búsqueda Integra vídeo play, da vista previa de los vídeos con reproducción automática, tambien le puse videos relacionados para mantener conectados los videos y mucho más.
Este script esta hecho en PHP, es gratuito al 100% que no requiere base de datos ya que actúa a través de sitios terceros. Se encuentra totalmente en lenguaje español y es totalmente personalizable.

Es muy fácil de instalar y de poco tamaño, el script cuenta con un complemento que agarra la palabra por defecto en la búsqueda realizada por el usuario y muestra los vídeos relacionados en el índice (por ejemplo, utilizando la palabra cómico muestra videos divertidos relacionados!)

Enlase de descarga:


http://www.mediafire.com/?da0s1o8xt42ous5

Demo del buscador de video:

Aqui esta un ejemplo del script funcionando, ustedes solo se encargan de agregarle los css, para que quede mas profesional.

http://www.vicioalex.com/ejemplos/buscador-de-videos/index.php?q=vicioalex

Instrucciones:

  • En el archivo busqueda.php cambian la cantidad de videos que desean que se muestre por pagina, justo en la linea 2 y 4
<?php $a= $_GET['i'];if($a == ''){
$cant=8; //Cantidad de videos. 
} else {
$cant=4; //Cantidad de videos en Relacionados.
}require "functions.php";?>
  • Hacen los mismo en el archivo index.php cambian la cantidad de videos que desean que se muestre por pagina, justo en la linea 1
<?php $cant=8; //Cantidad de videos. 
require "functions.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php echo ucwords($q);?> - vicioalex.com</title>
</head>
Seguir Leyendo 0
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 10:04 p. m.
vicioalex
Como subir o cambiar una Plantilla a Blogger
Blogger a cambiado de apariencia, y para algunos puede resultar un poco confuso la interfaz. A continuación les explicaré la manera en que pueden cambiar la plantilla de sus blogs.

 Para realizar el cambio de plantilla creada por otros usuarios o webs, como por ejemplo las que puedes encontrar en Plantillas para Blogger, BTemplates o las de Blog and Web, entre otros muchos, personalmente les recomiendo esta, lo que hay que hacer en primer lugar es descargar el fichero con extensión .xml que nos proporcionarán.
 Luego accedemos al escritorio y una vez allí, abrimos el desplegable de opciones del blog que quieres modificar. Pinchando en Plantilla vamos al sitio que nos interesa.

1. Entrar en su cuenta de blogger

Se dirigen al blog en el cuál quieren editar la plantilla, deben dar click en el título.

2. Buscan PLANTILLA

Ahora en el blog donde queremos editar ó cambiar la plantilla, nos dirigimos precisamente a ese apartado que se ubica en la parte derecha "Plantilla"

3. Buscan Crear copia de seguridad/Restablecer

Si queremos cambiar por completo la plantilla, tendremos que dar click en "Crear copia de seguridad/Restablecer"

4. Seleccionan su archivo

Aparecerá la ventana que nos da la opción de guardar un copia de seguridad (Descargar plantilla completa), y también nos permite subir la plantilla nueva (Examinar ó seleccionar archivo).

5. Buscan el archivo .xml

Una vez descargada su plantilla, descomprimen el archivo si es que se encuentra comprimida y extraen el archivo .xml (seguramente en algunas pc no se vera esta extencion xml pero lo reconoceran con solo el nombre de la plantilla)

6. Finalmente seleccionan subir

Una vez que hayamos cargado la plantilla nuestro blog ya tendrá la nueva apariencia que seleccionamos. Para verlo solo damos click en "Ver blog" ubicado en la parte superior izquierda

Seguir Leyendo 0
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 12:13 p. m.
vicioalex
Crea tu propio contador de visitas para tu blogger o pagina web, totalmente personalizable desde cualquier URL
Este tutorial que haré a continuación es para usuarios mas avanzados, comparto esto porque a mi me fue de mucha utilidad para mi web de Frases; http://fraseebook.blogspot.com

Creando esta web me surgió la necesidad de ponerle un contador de visitas a cada Post, buscando por la red algun contador que me sea util me encontre con esta publicación pero tiene limitaciones ya que solo se podía ver las visitas dentro de la entrada, pero si querías verlo en la portada principal de blogger no se podía y no funcionaba.
Asi que me las ingenie para programar un codigo que me permita visualizar las visitas de cada post en todos los lugares de mi blogger, ya sea en la portada, dentro del post, en relacionadas o en donde sea.

Ejemplo demostrativo



  • Lo primero que tienen que hacer es crear 2 archivos con extencion .php
  • Me pondré el caso que quiero saber la cantidad de visitas de esta URL: http://vicioalex.blogspot.com/2012/08/crea-tu-propio-contador-de-visitas-para.html

El primer archivo lo llamaremos "contador.php"

  • Lo que hara este archivo es generar automaticamente un archivo de texto .txt con este nombre: http://vicioalex.blogspot.com/2012/08/crea-tu-propio-contador-de-visitas-para.html.txt
  • Resulta muy largo y engorroso el nombre de ese archivo, es por eso que uso la funcion replace en PHP para desaparecer algunas cosas de la url y al final obtener un archivo con este nombre: 2012-08-crea-tu-propio-contador-de-visitas-para.txt
  • En la linea 5, 6, 7 use la funcion replace
  • Otro punto importante es con que cantidad de visitas desean que empiece el contador, por ejemplo si desean que empiece con 100 visitas como punto de inicio, solo tendrán que cambiar en la linea 9 y 24 el numero "1" por "100". De esta manera el contador mostrara 100 visitas para esa URL
<style>body {margin:0}.contador {font-size: 11px;font-weight: bold;font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;background-color: #fff;}</style>
<!-- Contador de Visitas personalizado - vicioalex.com -->
<div class="contador">
<? $conta=$_GET['v'];
$conta  = str_replace("http://vicioalex.blogspot.com/","",$conta); 
$conta  = str_replace(".html","",$conta); 
$conta  = str_replace("/","_",$conta); 
$archivo = "$conta.txt";
$contador = 1;
if (file_exists($archivo)) {
$fp = fopen($archivo,"r");
$contador = fgets($fp, 26);
fclose($fp);
$contador++;
$fp = fopen($archivo,"w+");
fwrite($fp, $contador, 26);
fclose($fp);
echo "$contador Visitas";
return;
}
else {
$fp = fopen($archivo,"w");
fwrite($fp, $contador);
echo "1 Visitas";
fclose($fp);
} ?>
</div>
<!-- Contador de Visitas personalizado - vicioalex.com -->

El segundo archivo lo llamaremos "contador2.php"

  • Aqui no hay nada que modificar, excepto si cambiastes la cantidad de visitas de inicio, si pusistes que empiece con 100 visitas, entonces deveras cambiar en la linea 11 el "1" por el "100"
<style>body {margin:0}.contador {font-size: 11px;font-weight: bold;font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;background-color: #fff;}</style>
<!-- Contador de Visitas personalizado - vicioalex.com -->
<div class="contador">
<? $conta=$_GET['v'];
$conta  = str_replace("http://vicioalex.blogspot.com/","",$conta); 
$conta  = str_replace(".html","",$conta); 
$conta  = str_replace("/","_",$conta);
if (file_exists("$conta.txt")){ 
include("$conta.txt");
}else{ 
echo "1"; 
} ?> 
Visitas</div>
<!-- Contador de Visitas personalizado - vicioalex.com -->

Este es el codigo que pondremos en la pagina donde queremos que empiece a contar (contador.php)

  • En la linea 2 esta el IFRAME que hara el conteo de las visitas usando esta url: http://tu-pagina-web/contador.php?v=http://vicioalex.blogspot.com/2012/08/crea-tu-propio-contador-de-visitas-para.html
<div class="contador">
<iframe frameborder="0" height="11" scrolling="no" src="http://tu-pagina-web/contador.php?v=http://vicioalex.blogspot.com/2012/08/crea-tu-propio-contador-de-visitas-para.html" width="70"></iframe>
</div>
<img src="https://lh5.googleusercontent.com/-5gS0H8kHpUI/UByrL-pZqmI/AAAAAAAABSc/mMWQYaCu7Q0/s30/estadisticas-frases.png" border="0"/>
<style>.contador {margin-left: 30px;position: absolute;margin-top: 10px;}</style>

Este codigo es solo para visualizar la cantidad de visitas, pero no hara el conteo de visitas (contador2.php)

  • En la linea 2 esta el IFRAME que hara visualizar la cantidad de visitas, mas no hara el conteo: http://tu-pagina-web/contador2.php?v=http://vicioalex.blogspot.com/2012/08/crea-tu-propio-contador-de-visitas-para.html
<div class="contador">
<iframe frameborder="0" height="11" scrolling="no" src="http://tu-pagina-web/contador2.php?v=http://vicioalex.blogspot.com/2012/08/crea-tu-propio-contador-de-visitas-para.html" width="70"></iframe>
</div>
<img src="https://lh5.googleusercontent.com/-5gS0H8kHpUI/UByrL-pZqmI/AAAAAAAABSc/mMWQYaCu7Q0/s30/estadisticas-frases.png" border="0"/>
<style>.contador {margin-left: 30px;position: absolute;margin-top: 10px;}</style>

Trate de ser lo mas resumido posible, cualquier duda me escribes aqui.
Seguir Leyendo 8
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 6:59 p. m.
vicioalex
Cómo crear un menú de pestañas elegante usando jQuery y Css - Tabs
En este tutorial usaremos JQuery y Css, así que hoy voy a explicarles como se puede animar unas tabs (pestañas) con JQuery con unas pocas lineas de código y un poco de CSS, el famoso tabs con JQuery y CSS que nos resulta muy útil para estructurar la información de una web de forma ordenada o crear menús de navegación, los tabs son una forma efectiva de navegación que nos permite mostrar distintas areas de la web, mediante la seleccion de cada pestaña

Usar la librería jQuery al estructurar el cuerpo de nuestra programación web, le brinda un bonito acabado haciéndolo lucir más profesional a comparación de mostrarla sin ella, poniendo un ejemplo común, no sé si habrás visto la estructura de las páginas de películas para ver online, seguramente que si. Cuando reproduces alguna película, esta aparece en partes o bien en diferentes servidores para poder observar la película, pero si te fijas bien se encuentra organizada en pestañas; opción 1, opción 2, etc. Esas pestañas no son más que las famosas jQuery Tabs acompañados de CSS para obtener un mejor acabado.




Voy a crear un menú con pestañas que nos permita acceder a diferentes contenidos sin refrescar la página. Esto lo vamos a conseguir gracias a jQuery. Al hacer click sobre una pestaña aparece el contenido relacionado eliminando el anterior y marcándose la pestaña seleccionada.

Aqui el ejemplo demostrativo

Escribe aqui tu contenido 001

Este es el codigo completo de la aplicacion:

  • En las lineas 8, 10 y 12 del codigo, reemplazan lo que dice Escribe aqui tu contenido por lo que ustedes quieran que aparesca en esa pestaña.
    Pueden agregar el numero de pertañas que ustedes quieran.
<!-- Pestañas elegantes - vicioalex.com -->
<ul class="tabs">
<li class="active"><a href="#tab1">Pestaña 1</a></li>
<li><a href="#tab2">Pestaña 2</a></li>
<li><a href="#tab3">Pestaña 3</a></li>
</ul>
<div class="tab_container"><div id="tab1" class="tab_content">
Escribe aqui tu contenido 001
</div><div id="tab2" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 002
</div><div id="tab3" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 003
</div></div>
<!-- Pestañas elegantes - vicioalex.com -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script><script>
$(document).ready(function()
{var hash = window.location.hash.substr(1);
var href = $('ul.tabs li a').each(function(){
var href = $(this).attr('href');
href=href.substr(1);
if(hash==href){
$(".tab_content").hide();
$("ul.tabs li").removeClass("active");
$(this).parent('li').addClass("active");
$('#'+hash).fadeIn();} })
$("ul.tabs li").click(function()
{$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var content = $(this).find("a").attr("href");
$(content).fadeIn();
return false;});});
</script><style>ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #999;border-left: 1px solid #999;width: 100%;}ul.tabs li {float: left;margin: 0;padding: 0;height: 31px;line-height: 31px;border: 1px solid #999;border-left: none;margin-bottom: -1px;overflow: hidden;position: relative;background: #e0e0e0;}ul.tabs li a {text-decoration: none;color: #000;display: block;font-size: 1.2em;padding: 0 20px;border: 1px solid #fff;outline: none;}ul.tabs li a:hover {background: #ccc;}html ul.tabs li.active, html ul.tabs li.active a:hover  {background: #fff;border-bottom: 1px solid #fff;}.tab_container {border: 1px solid #999;border-top: none;overflow: hidden;clear: both;float: left; width: 100%;background: #fff;}.tab_content {padding: 20px;font-size: 1.2em;}
</style>

Aqui les dejo una breve explicacion del codigo presentado anteriormente

  • Componemos el codigo html, creamos el contenido de la tab, así que si has creado 3 pestañas en tu menú, crearás también 3 contenidos distintos.
<ul class="tabs">
<li class="active"><a href="#tab1">Pestaña 1</a></li>
<li><a href="#tab2">Pestaña 2</a></li>
<li><a href="#tab3">Pestaña 3</a></li>
</ul>
<div class="tab_container"><div id="tab1" class="tab_content">
Escribe aqui tu contenido 001
</div><div id="tab2" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 002
</div><div id="tab3" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 003
</div></div>
  • El siguiente paso será la hoja de estilos (el mismo al que uso para esta plantilla) para poder asignarle un diseño al recuadro que contiene la pestañas, es decir le ponemos guapo con un poco de CSS
<style>
ul.tabs {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #999;border-left: 1px solid #999;width: 100%;}
ul.tabs li {float: left;margin: 0;padding: 0;height: 31px;line-height: 31px;border: 1px solid #999;border-left: none;margin-bottom: -1px;overflow: hidden;position: relative;background: #e0e0e0;}
ul.tabs li a {text-decoration: none;color: #000;display: block;font-size: 1.2em;padding: 0 20px;border: 1px solid #fff;outline: none;}
ul.tabs li a:hover {background: #ccc;}
html ul.tabs li.active, html ul.tabs li.active a:hover  {background: #fff;border-bottom: 1px solid #fff;}
.tab_container {border: 1px solid #999;border-top: none;overflow: hidden;clear: both;float: left; width: 100%;background: #fff;}
.tab_content {padding: 20px;font-size: 1.2em;}
</style>
  • Bien, para realizar estas tabs utilizamos JQuery, por lo tanto, o bien tienes en la misma carpeta un archivo .js con la librería o bien enlazas directamente con alguna página que tenga en su servidor tal archivo, en mi caso he llamado a esa página dentro de http://jquery.com
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script><script>
$(document).ready(function()
{var hash = window.location.hash.substr(1);
var href = $('ul.tabs li a').each(function(){
var href = $(this).attr('href');
href=href.substr(1);
if(hash==href){
$(".tab_content").hide();
$("ul.tabs li").removeClass("active");
$(this).parent('li').addClass("active");
$('#'+hash).fadeIn();} })
$("ul.tabs li").click(function()
{$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var content = $(this).find("a").attr("href");
$(content).fadeIn();
return false;});});
</script>

Artificio para mostrar otra pestaña al entrar a la pagina

Para mostrar otra pestaña que no sea la primera, por ejemplo quieren que al cargar la pagina muestre la pestaña numero 3 entonces hariamos lo siguiente:
en nuestra direccion URL colocamos al final "#tab3" y se mostrara la pestaña numero 3. 
http://www.tu-paginas-web.com/prueba.html#tab3

Crear mas de una pestaña

Podemas crear la cantitad de pestañas que queramos, solo debemos agregar de la siguiente manera:
<ul class="tabs">
<li class="active"><a href="#tab1">Pestaña 1</a></li>
<li><a href="#tab2">Pestaña 2</a></li>
<li><a href="#tab3">Pestaña 3</a></li>
<li><a href="#tab4">Pestaña 4</a></li>
<li><a href="#tab5">Pestaña 5</a></li>
<li><a href="#tab6">Pestaña 6</a></li>
</ul>
<div class="tab_container"><div id="tab1" class="tab_content">
Escribe aqui tu contenido 001
</div><div id="tab2" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 002
</div><div id="tab3" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 003
</div><div id="tab4" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 004
</div><div id="tab5" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 005
</div><div id="tab6" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 006
</div></div>
Seguir Leyendo 0
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , , | El: , A las: VicioAlex 9:27 p. m.
vicioalex
Agrega un reproductor flash de musica mp3 a tu blogger o web
Una de las cosas que siempre quisieramos tener en nuestro sitio web es tener un reproductor de musica personalizable, tengo tantos reproductores editados pero ninguno funciona para colocarle las musicas de goear. buscando por la red me encontre con este curioso y bonito reproductor de musica mp3 que es muy compatible con cualquier sitio web, blog, etc ya que funciona con un solo archivo flash.

Este reproductor es muy util ya que nos permite agregar musica de fondo a nuestro blog o pagina web.
Para usarlo debes tener tu música en formato mp3 subida en Internet, ya que es muy complicado conseguir un hosting de musica que nos vote una direccion que termine en .mp3, yo les recomiendo que suban su musica a goear previamente comprimida para que no demore en reproducirles la musica.
Luego que ya esta subida su musica copian la ID y lo pegan aqui:
http://www.goear.com/plimiter.php?f=ID
Una vez listo si usas blogger, entras a Diseño > Elementos de la página > Añadir un gadget, selecciona HTML/Javascript y ahí pega el código del reproductor que te guste:
<<--- Quieres este reproductor de la imagen xD, aqui abajo te dejo el codigo completo (creado por vicioalex)

1. Modelo Versión Normal:


<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="200" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf"><param name="FlashVars" value="mp3=http://www.goear.com/plimiter.php?f=39da74f&amp;bgcolor1=189ca8&amp;bgcolor2=085c68"></object>
  • Lo que esta de color azul es la url de su musica o mp3 (tengan cuidado al momento de cambiarlo, porque si borrar alguna parte del codigo el repro no funcionara) . Lo de color rojo es el color de fondo del reproductor, en otras palabras el repro nos da la opcion de colocar un color de fondo degradado, jueguen con los colores deacuerdo a la plantilla de su pagina, si quieres una paleta de colores has clic aqui.
  • Si deseas que se autoreprodusca solo, coloca este codigo al final de la direccion: "&autoplay=1" te quedaria algo asi: 085c68&amp;autoplay=1"></object> Si cambias el 1 por el 0 no se reproducira.

2. Modelo Versión Maxi:

En esta version maxi tenemos 2 modelos uno con colores degradados y otra con imagen en el fondo del reproductor:
2.1.  
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="200" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf"><param name="FlashVars" value="mp3=http://www.goear.com/plimiter.php?f=39da74f&amp;showstop=1&amp;showvolume=1&amp;bgcolor1=ffa50b&amp;bgcolor2=d07600"></object>
  • Lo que esta de color azul es la url de su musica o mp3 (tengan cuidado al momento de cambiarlo, porque si borrar alguna parte del codigo el repro no funcionara) . Lo de color rojo es el color de fondo del reproductor, en otras palabras el repro nos da la opcion de colocar un color de fondo degradado, jueguen con los colores deacuerdo a la plantilla de su pagina, si quieres una paleta de colores has clic aqui.
  • Si deseas que se autoreprodusca solo, coloca este codigo al final de la direccion: "&autoplay=1" te quedaria algo asi: d07600&amp;autoplay=1"></object> Si cambias el 1 por el 0 no se reproducira.
2.2.  
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="200" height="20"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf"><param name="FlashVars" value="mp3=http://www.goear.com/plimiter.php?f=39da74f&amp;showstop=1&amp;showvolume=1&amp;showinfo=1&amp;skin=http://flash-mp3-player.net/medias/skin001.jpg"></object>
  • Lo que esta de color azul es la url de su musica o mp3 (tengan cuidado al momento de cambiarlo, porque si borrar alguna parte del codigo el repro no funcionara) . Lo de color rojo es la imagen de fondo del reproductor clic aqui podran cambiarlo a su gusto.
  • Si deseas que se autoreprodusca solo, coloca este codigo al final de la direccion: "&autoplay=1" te quedaria algo asi: /skin001.jpg"&amp;autoplay=1"></object>. Si cambias el 1 por el 0 no se reproducira.

3. Modelo Versión Multi:


<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_multi.swf" width="200" height="100"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_multi.swf"><param name="FlashVars" value="mp3=http://www.goear.com/plimiter.php?f=39da74f|http://www.goear.com/plimiter.php?f=ab29cb4&amp;title=Titanium - David Guetta|Starships - Nicki Minaj&amp;bgcolor1=3b5998&amp;bgcolor2=8c9fc8"></object>
  • En este modelo de repro hay que tener mucho cuidado al momento de agregar las canciones. Recuerda que despues de cada cancion va el signo " | " , igual despues de cada nombre del artista va " | ", asi como esta en el codigo. Lo que esta de color azul y verde es la url de su musica o mp3 (tengan cuidado al momento de cambiarlo, porque si borrar alguna parte del codigo el repro no funcionara) . Lo de color rojo es el color de fondo del reproductor, en otras palabras el repro nos da la opcion de colocar un color de fondo degradado, jueguen con los colores deacuerdo a la plantilla de su pagina, si quieres una paleta de colores has clic aqui.
  • Si deseas que se autoreprodusca solo, coloca este codigo al final de la direccion: "&autoplay=1" te quedaria algo asi: 8c9fc8&amp;autoplay=1"></object> Si cambias el 1 por el 0 no se reproducira.
Seguir Leyendo 2
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 7:31 p. m.
vicioalex
Truco para averiguar cuantos visitantes estan online en tu web con Who's Amung Us
Who's Amung Us es un servicio muy popular que nos muestra, en teoría, el número de visitantes en nuestro sitio en tiempo real, utilizado en la actualidad por miles de webmasters como un criterio de estadísticas alternativo a Google Analytics.

permite conocer la cantidad de usuarios conectados al mismo tiempo en un sitio web y así conocer que parte de nuestro contenido es el más visitado y es aqui donde les enseñare un truco para poder ver que paginas estan siendo visitadas en ese momento. El servicio es totalmente gratuito y sin necesidad de registros .

mediante la insercción del código que nos facilitan dentro de nuestro sitio web, aparecerán en el lugar que deseemos un pequeño widget con el número de visitantes que tenemos, supongo que contando con nosotros.

1. Insertando el codigo en nuestra web:

El codigo lo sacaran de esta pagina http://whos.amung.us que justo se encuentra en la parte de abajo de la pagina, aqui una imagen.
Solo tienes que copiar ese codigo dentro de su pagina web o blog y listo, si usas blog tienes que Añadir un gadget de HTML/Javascript y ahi dentro pegas el codigo.

2. Sacando la ID del codigo:

Bien supongamos que este sea el codigo:
<script id="_waugkc">var _wau = _wau || []; _wau.push(["classic", "j8nqe2w4eysq", "gkc"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
Lo que esta de color rojo seria nuestra ID : j8nqe2w4eysq con el cual haremos el trukito xD.

3. Codigo para nuestro truco:

Primero recuerda que tiene que estar insertado la ID dentro de tu web, una vez que has hecho eso, copias este codigo: 
<iframe height="200" frameborder="0" width="565" scrolling="auto" style="border: 0px none; padding: 5px;" src="http://www.vicioalex.com/general/1/j8nqe2w4eysq" marginwidth="0" marginheight="0"></iframe>
Ahora este codigo lo puedes pegar en cualquier parte de tu web donde quieres visualizar lo que estan viendo en tu pagina web en estos momentos en tiempo real. Pueden editar lo que esta de color azul para modificar el ancho y el largo del Iframe.

4. Ejemplo demostrativo:

Aqui les dejo un ejemplo de como se veria una vez insertado el codigo.
De paso les dejo varias paginas web que usan este sistema de visitas a modo de ejemplo:
fulltono
Intercambios Virtuales
piratamundo
Sonicomusica
Remusica
Compunet
Juergeando
Vicioalex



Fin del Tutorial




Si eres Webmaster sigue estos pasos para crear el codigo:

1. Creas un archivo php, ejemplo: linea.php

Dentro escribes el siguiente codigo: 
<?php $id=$_GET['v']; ?><br><div style="position:absolute; top:-20px; left:0px"><iframe height="1000" frameborder="0" scrolling="no" width="855" style="margin: -343px 0 0 -312px;" src="http://whos.amung.us/stats/readers/<?php echo $id;?>/" marginwidth="0" marginheight="0"></iframe></div>
Ahora llamaremos a la variable "v" de la siguiente manera: www.tusitio.com/linea.php?v=XXXXXXX

Las XXXXXXX indican la ID del Who's Amung Us. Bien eso es todo ahora solo tienes que crear el otro codigo.

2. Codigo final

<iframe height="200" frameborder="0" width="565" scrolling="auto" style="border: 0px none; padding: 5px;" src="www.tusitio.com/linea.php?v=XXXXXXX" marginwidth="0" marginheight="0"></iframe>
Y listo eso seria todo, hasta la proxima.
Aqui les dejo otro truco con Who's Amung Us y el navegador Google Chrome:
Esto es una extencion del Google Chrome que hara aparecer en nuestro navegador un pequeño icono que nos dira la cantidad de personas que estan en linea en nuestra pagina web, asi en todo momento sabras la cantidad de usuarios en tu web en todo momento.

1. Instalando la extencion de Google Chrome

Aqui les dejo la direccion de la extencion: https://chrome.google.com/webstore/detail/hdoepbohdpbblemkcceibbopjamkbcad Una vez dentro hacen clic en el boton verde que dice añadir a crome y listo la aplicacion se instalara automaticamente y te aparecera algo asi:
Seguir Leyendo 1
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 8:33 p. m.
vicioalex
Descargar videos de cualquier pagina web usando FIREBUG de Firefox
Aqui les dejo un video tutorial que les enseñara a descargar videos de cualquier pagina web usando el navegador Firefox y su complemento FIREBUG, con esta herramienta no solo podran descargar videos sino tambien mp3, imagenes, y todo lo que carge dentro de una pagina web.

Aqui les dejo el link del complemento de firebug: https://addons.mozilla.org/es-es/firefox/addon/firebug/

Video Tutorial


Seguir Leyendo 0
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 8:25 p. m.
vicioalex
Efecto Lightwindow para tu pagina web o blog
Durante el desarrollo de mi pagina www.vicioalex.com he tenido la suerte de conocer un fantástico efecto. Se trata de un efecto Lightbox que permite mostrar en una ventana flotante sin necesidad de abandonar la página que estamos navegando con imágenes y galeria de imágenes, flash, videos youtube, pdf, iframes, etc. Tuve que hacerle algunas modificaciones y Espero que les sea de tanta utilidad como a mi. Haz clic aqui

Este bonito efecto emergente que, sin salir de la página, te oscurece el fondo y te muestra la imagen a tamaño completo y en todo su explendor. Además, si queremos crear grupos, aparecen al pasar el ratón por determinadas zonas de la imagen, unos botones de “Anterior” y “Siguiente” que nos permite movernos por todo el grupo. Y por supuesto, el botón de cerrar, para volver a la página con las miniaturas. Este fantastico efecto es posible que hayáis visto en alguna web, y que podemos añadir a nuestras páginas de un modo muy sencillo, con resultados bastante aparentes.
El efecto Lightbox, Amplia las imágenes de un modo animado, ya que el cuadro se redimensiona ampliándose o reduciéndose según las dimensiones de la imagen y con un modo de transición suave hace un efecto muy bonito.El efecto permite trabajar con imágenes de distintos tamaños sin tener que parametrizar para cada uno de ellos distinto código, ya que se adapta a cualquier tamaño.

Instalacion:


1.- Coloca el siguiente codigo antes del </head> dentro de tu pagina web, cambia lo que esta de color rojo por la direccion de tu pagina web: 
<script src="URL_DE_/javascript/prototype.js" type="text/javascript">
</script>
<script src="URL_DE_/javascript/effects.js" type="text/javascript">
</script>
<script src="URL_DE_/lightwindow/javascript/lightwindow.js" type="text/javascript">
</script>
<link href="URL_DE_/css/lightwindow.css" rel="stylesheet" type="text/css"></link>
<style>p {margin: 0 0 20px 0;color: #cccccc;line-height: 140%;}
</style>

2.- Copia cualquiera de estos codigos despues del <body> de tu pagina web (Haz clic en cualquiera de los enlases para ver como quedara en tu web):
    Media: Movies, Flash, PDF, videos de youtube.
  • Ejemplo de SWF
  • SWF Galería - varios swf
  • SWF desde una url externa
  • Abrir archivos PDF!
  • YouTube: Abrir videos con solo la URL

    • Fuentes Externas: Es como una ventana emergente!
  • Ejemplo web - Vista previa de cualquier sitio web desde la tuya!
  • Esta página es local a tu dominio, pero se coloca en un iframe.

    • Iframe: Llame a un LightWindow desde un Iframe

    Imágenes: Individuales o conjuntos galería!
  • Imagen - Sólo una imagen
  • Imagen externa - Una Imagen desde una url externa.
  • Galería de Imágenes - Muestra varias imagenes.
  • Galería de imágenes / Múltiples imágenes

    • Para formularios:
  • Formulario de ejemplo - formulario en un LightWindow!
  • Formulario con posición personalizada - formulario en un LightWindow!

    • Paginas: De ancho fijo y Fluidos.
  • Esta página no tiene un ancho, el contenido es flexible.
  • Esta página tiene una cantidad definida de espacio que necesita
  • Esta página es simplemente demasiado grande para la ventana del navegador.
  • Dimensiones del equipo - Establecer las dimensiones de la ventana.

    • Contenido en línea: un pequeño contenido en la misma pagina.
  • Contenido en línea - El texto esta en la misma pagina.

Oh yeah, this content was pulled from within the page!

In order to get the LightWindow to fit the content, you have to define the height and width of a div in the inline div or send values for lightwindow_width and lightwindow_height in the url string. Personally I prefer the inner div method, this way you can gracefully degrade the link as I did into an anchor if javascript isn't available.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum hendrerit nibh at libero. Donec lectus enim, condimentum ac, scelerisque non, malesuada id, diam. Sed porta magna. Ut luctus bibendum nulla. Ut sit amet tellus. Aliquam ut justo. Duis sapien magna, sagittis et, molestie at, interdum a, mi. Nunc nisi arcu, tincidunt quis, adipiscing ac, faucibus convallis, ligula. Aenean lacinia laoreet nisi. Integer dictum. Maecenas porttitor dictum felis.

3.- Eso seria todo al final el codigo les tendria que quedar asi (Lo que esta de color rojo es un regalito para ustedes, no necesitaran instalar nada solo copienlo en su web) - (Y lo de azul es lo tendran que cambiarlo de acuerdo a lo que desean poner como por ejemplo galeria de imagenes, flash, videos youtube, etc.): 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nombre de tu pagina </title>
<script src="http://vicioalex.99h.com.ar/ejemplos/lightwindow/javascript/prototype.js" type="text/javascript">
</script>
<script src="http://vicioalex.99h.com.ar/ejemplos/lightwindow/javascript/effects.js" type="text/javascript">
</script>
<script src="http://vicioalex.99h.com.ar/ejemplos/lightwindow/javascript/lightwindow.js" type="text/javascript">
</script>
<link href="http://vicioalex.99h.com.ar/ejemplos/lightwindow/css/lightwindow.css" rel="stylesheet" type="text/css"></link>
<style>
p {margin: 0 0 20px 0;color: #cccccc;line-height: 140%;}
</style>
</head>
<body>
<a author="Aqui tu Nombre" caption="Escribe tu titulo deseado" class="lightwindow page-options" href="http://farm1.static.flickr.com/180/439443686_bc797081ea.jpg" title="Aqui un titulo para google">Imagen externa - Una Imagen desde una url externa.</a> 
</body>
</html>

Descargas


http://www.box.com/s/813cb5cd2e367719a98b (Lightwindow Modificado)
http://www.p51labs.com/lightwindow/lightwindow.zip (Lightwindow Original)
Seguir Leyendo 4
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 6:04 p. m.
vicioalex
Entradas Recientes
 
Plantilla hecha por vicioalex - Todos los derechos reservados