Mostrando entradas con la etiqueta webmaster. Mostrar todas las entradas
Mostrando entradas con la etiqueta webmaster. 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:
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , , | El: , A las: VicioAlex 12:45 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>
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 10:04 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.
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>
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , , | El: , A las: VicioAlex 9:27 p. m.
vicioalex
Agregar Botones sociales y compartir para tu pagina web o blog
Cada vez más son las personas que tienen una cuenta en Facebook, Twitter, google + y estas redes sociales se han convertido en un buen medio de promoción para las webs, blogs, así que podemos aprovechar estas vías y poner un botón que permita compartir una entrada en cualquiera de estas redes.
  • El botón de Facebook es un script que me que permite enviar contenido a Facebook y al mismo tiempo marca cuántas veces se ha compartido ese post.
  • El botón de gogole + hace lo mismo, permite enviar la entrada a esta red social y cuenta las veces que se ha hecho esto. y lo mismo para el boton twitter
  • Podemos combinar ambos servicios para tener en el mismo espacio ambas posibilidades de compartir y promocionar.

Codigo para tu web (Modelo 1)


  • En la linea 3, 4 y 7 busca esta direccion: http://www.direccion-de-tu-web.com y cambialo por la direccion de tu web
<!-- Botones compartir - vicioalex.com -->
<div class="botons">
<div class="bgoogle"><g:plusone href="http://www.direccion-de-tu-web.com" size="tall"/></div> 
<div class="bTwittear "><a class="twitter-share-button" data-count="vertical" data-lang="es" data-related="anywhereTheJavascriptAPI" data-via="your_screen_name" data-url="http://www.direccion-de-tu-web.com" href="https://twitter.com/share">Twittear</a></div> 
<div class="bcompartir "><a class="addthis_counter"></a></div>
<div class="baddthis"><a class="addthis_counter"><img border="0" src="https://lh5.googleusercontent.com/-QtMl_DCwWvI/UBwauoVuyvI/AAAAAAAABQc/V1yYXOpUOG8/s82/compartir.png" style="float: left;margin-top: 1px;" title="vicioalex.com"/></a></div>
<div class="bmegusta"><div class="fb-like" data-layout="box_count" data-send="false" data-show-faces="true" data-width="75" data-href="http://www.direccion-de-tu-web.com"></div></div>
</div>
<!-- Botones compartir - vicioalex.com -->

<script src="http://connect.facebook.net/es_ES/all.js#appId=163102800420578&xfbml=1"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
<style>.botons {width: 342px;height: 63px;background-color: #FFF9D7;padding: 3px;border-radius: 3px;border: 1px solid #E2C822;}.bgoogle {position: absolute;margin-left: 75px;}.bTwittear {position: absolute;margin-left: 130px;}.bcompartir {position: absolute;margin-left: 205px;}.baddthis {position: absolute;margin-left: 260px;margin-top: 42px;}.bmegusta {height:57}
</style>

Codigo para tu web (Modelo 2)


  • En la linea 3, 4 y 5 busca esta direccion: http://www.direccion-de-tu-web.com y cambialo por la direccion de tu web
<!-- Botones compartir - vicioalex.com -->
<div class="botons">
<div class="bmegusta"><div class="fb-like" data-layout="button_count" data-send="false" data-show-faces="true" data-width="75" data-href="http://www.direccion-de-tu-web.com"></div></div>
<div class="bgoogle"><g:plusone href="http://www.direccion-de-tu-web.com" size="Medium"/></div> 
<div class="bTwittear "><a class="twitter-share-button" data-count="horizontal" data-lang="es" data-related="anywhereTheJavascriptAPI" data-via="your_screen_name" data-url="http://www.direccion-de-tu-web.com" href="https://twitter.com/share">Twittear</a></div> 
<div class="baddthis"><div class="addthis_toolbox addthis_default_style"><a class="addthis_counter addthis_pill_style"></a></div></div>
<div class="bcompartir "><a class="addthis_button_preferred_1"><img border="0" src="https://lh5.googleusercontent.com/-QtMl_DCwWvI/UBwauoVuyvI/AAAAAAAABQc/V1yYXOpUOG8/s82/compartir.png" title="compartir"/></a></div>
</div>
<!-- Botones compartir - vicioalex.com -->

<script src="http://connect.facebook.net/es_ES/all.js#appId=163102800420578&xfbml=1"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
<style>.botons {width: 512px;height: 20px;background-color: #FFF9D7;padding: 3px;border-radius: 3px;border: 1px solid #E2C822;}.bgoogle {position: absolute;margin-left: 235px;}.bTwittear {position: absolute;margin-left: 310px;}.bcompartir {height:21}.baddthis {position: absolute;margin-left: 420px;}.bmegusta {position: absolute;margin-left: 120px;}
</style>

Codigo para tu web (Modelo 3)


  • En la linea 3, 4 y 5 busca esta direccion: http://www.direccion-de-tu-web.com y cambialo por la direccion de tu web
<!-- Botones compartir - vicioalex.com -->
<div class="botons"><center>
<div class="bmegusta"><div class="fb-like" data-layout="box_count" data-send="false" data-show-faces="true" data-width="75" data-href="http://www.direccion-de-tu-web.com"></div></div>
<div class="bgoogle"><g:plusone href="http://www.direccion-de-tu-web.com" size="tall"/></div> 
<div class="bTwittear"><a class="twitter-share-button" data-count="vertical" data-lang="es" data-related="anywhereTheJavascriptAPI" data-via="your_screen_name" data-url="http://www.direccion-de-tu-web.com" href="https://twitter.com/share">Twittear</a></div> 
<div class="baddthis"><a class="addthis_counter"></a></div>
<a class="addthis_counter"><img border="0" src="https://lh5.googleusercontent.com/-QtMl_DCwWvI/UBwauoVuyvI/AAAAAAAABQc/V1yYXOpUOG8/s82/compartir.png" title="vicioalex.com"/></a>
</center></div>
<!-- Botones compartir - vicioalex.com -->

<script src="http://connect.facebook.net/es_ES/all.js#appId=163102800420578&xfbml=1"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
<style>.botons {width: 82px;height: 272px;background-color: #FFF9D7;padding: 3px;border-radius: 3px;border: 1px solid #E2C822;}.bgoogle {margin-bottom:2px}.bTwittear {margin-bottom:2px}.baddthis {margin-bottom:2px; margin-left:15px}.bmegusta {margin-bottom:2px}
</style>
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 3:55 p. m.
vicioalex
Descarga las mejores Fuentes gratis para tu pc
A la hora de realizar trabajos en el colegio, universidad, instituto o haciendo diseño de una web, de una publicidad, de una presentación, o de cualquier otra cosa, la fuente que utilizamos puede mejorar mucho la calidad de presentación. Es por eso que es importante tomarnos un tiempo para elegir la fuente que mejor se adecue a nuestra situación.

A continuación les proporcionamos el enlace para observar el ranking de las mejores fuentes.

Link de descarga:


http://www.mediafire.com/?00dlngbui7ak9r7 - Opcion1
http://www.4shared.com/rar/Las-mejores-fuentes - Opcion2

Video de las fuentes:


Instalacion:

  • 1.- Haga clic en Inicio >> Configuración >> Panel de Control.
  • 2.- Una vez dentro del Panel de Control, Abra el icono de la carpeta Fuentes haciendo doble clic sobre él.
  • 3.- En la ventana Fuentes podrá ver cada una de las fuentes que actualmente están instaladas y además allí podrá instalar las nuevas fuentes descargadas.
  • 4.- Abran el archivo de descargado y lo copian dentro de la carpeta Fuentes (solo los archivos, no la carpeta)
  • 5.- Listo ahora tienes una base de las mejores fuentes, para tus trabajos.
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 1:13 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.
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 7:31 p. m.
vicioalex
Dedicale una pagina web a tu amor - script para insertarlo en tu pagina web
Hola amigos aqui les traigo una aplicacion para que puedan enviar una pagina web con el nombre de tu amor, le puse opciones para que pongan video, podran elegir una plantilla, tambien un texto,etc..

  • Lo que hara este generador es crear una direccion de esta forma:
    http://www.vicioalex.com/amor/Yenyzhita
  • Se cambiara a la direccion del nombre de tu amor:
    http://www.vicioalex.com/amor/Nombredetu
    Amor

Si eres webmaster y deseas esta aplicacion en tu web copia el siguiente codigo Clic Aqui

Codigo para ponerlo en tu pagina web:

<iframe width="500" height="650" scrolling="no" name=d1 src="http://www.vicioalex.com/amor/dedica/1/000000" frameborder="0"></iframe>
Lo de color rojo es el ancho de la aplicacion lo puedes editar de acuerdo al tamaño de tu web y lo de azul es el codigo del color de fondo de la aplicacion. clic aqui para ver la paleta de colores

Descargar el script completo de la aplicacion :


Lo subire uno de estos dias
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 6:56 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:



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:
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 8:33 p. m.
vicioalex
Enviar Mensajes de Texto SMS gratis Claro por internet Peru
Envía desde aquí tus mensajes de texto gratis a cualquier celular Claro. Una de las cosas que seguramente tu más haces si tienes un telefono movil (celular) es sin duda mensajear con tus amigos pues es más barato en ocasiones que llamarlo directamente, pues bien yo también lo hago sin embargo existe la posibilidad de poder enviar estos mensajes sin pagar ni un solo centavo tan solo usando el internet tan solo tendrás que darle clik a la imagen que aquí abajo:
Si eres webmaster aqui te dejo el codigo para que pongas este aplicacion en tu pagina web: Clic Aqui
Para poder enviar SMS, usa cualquier navegador menos Internet Explorer

Codigo de la aplicacion

<a href="http://www.vicioalex.com/general/2/ffffff" target="d1">
Enviar otro mensaje nuevo
</a><br>
<iframe name="d1" width="580" height="670" scrolling="no" src="http://www.vicioalex.com/general/2/ffffff" frameborder="0">
</iframe>
En la linea 1 buscan ffffff , eso es el color del fondo. Lo cambian al color que mas se adapte con su pagina web.
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 8:26 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


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)
VicioAlex Publicado por: Unknown | VicioAlex Categoria: , | El: , A las: VicioAlex 6:04 p. m.
vicioalex
Entradas Recientes