CreaWeb: Códigos y Recursos para Blogs y Sitios Web. Tutoriales y Guías para Páginas Web.

Widget de votos y entradas relacionadas para tu blog

noreply@blogger.com (Ignacio) — Wed, 04 Jan 2012 19:12:00 +0000

Este widget es de gran utilidad para conocer la opinión de tus lectores acerca de tus entradas por medio de un sistema de votación de estrellas (estilo Youtube antiguo).
Además, te agrega un cuadro con las entradas relacionadas a tu post, pudiendo elegir entre texto o en cuadros con información, como muestra la imágen de arriba.

Para instalarlo, entra a Outbrain

Elige el tipo de recomendación: Texto o Miniatura (Thumbnail)
y Tipo de feedback: Estrellas, Manito arriba o nada.

Luego, eliges la plataforma de tu blog e idioma y haces clic en Instalar.
Si lo deseas te puedes registrar, pero es opcional.

Imágen de fondo de fuegos artificiales para tu blog en año nuevo

noreply@blogger.com (Ignacio) — Thu, 29 Dec 2011 03:31:00 +0000

Para decorar tu sitio web o blog acorde a las fechas, una buena idea es adornarlo con un fondo de fuegos artificiales para recibir el año nuevo.

Además, en este blog podrás encontrar todo tipo de recursos en cuanto a diseño gráfico... fondos, íconos, wallpapers, texturas etc

Descarga: Clic aqui

Verificar si una direción de correo electronico es correcta

noreply@blogger.com (Ignacio) — Sun, 23 Oct 2011 11:19:00 +0000

Verify Email Adress es útil y simple, su finalidad es comprobar si un email es correcto y existe, especialmente creado para cuando, por ejemplo, te dicen un correo por teléfono y no estás seguro si lo anotaste bien... o esas veces que te rebota el mail con un mensaje de "no se pudo enviar".

Solo ingresas a la página, ingresas tu mail en el lugar que corresponde y haces clic en Verify!.

Saludos!

Tutorial Photoshop: Crear Texto con efecto de reflejo

noreply@blogger.com (Ignacio) — Wed, 21 Sep 2011 05:50:00 +0000

Este efecto es muy utilizado actualmente para logos de páginas web o de cualquier cosa, es muy llamativo y es fácil de hacer en Photoshop.

Para empezar, crea un nuevo documento (Ctrl+N) o trabaja en una imagen que ya tengas. Procede a escribir el texto que quieras reflejar.

Ve a Layer/Duplicate Layer... Te queda el texto duplicado con el que vas a trabajar.

Para rotar la imagen selecciona Edit/Transform/Flip Vertical. Para poder modificar el texto debes hacer click derecho en la capa copiada y seleccionar: Rasterize Layer.

Crea una selección dejando un espacio libre en la parte de abajo.

Ve a Select/Feather (Alt+Ctrl+D). Usa el radio que gustes (yo usé 20 pixels) y presiona Shft+Ctrl+I (Select/Inverse)

Presiona la tecla Supr del teclado hasta que te guste como queda.

Para darle un efecto más realista bajale la opacidad. Yo la bajé a 50%

Para que se vea mejor dirigete nuevamente a Edit/Transform pero esta vez selecciona Perspective. Arrastra cualquier punto de abajo (el de las esquinas) y luego elije otra herramienta, dandole a Apply de la ventana "Apply the Transformation".

Con esto ya terminas, y puedes agregar todo lo que quieras. En mi texto final dupliqué el reflejo, aplicandole el filtro de desenfoque gausiano (Filter/Blur/Gaussian Blur). Luego le apliqué una sobreexposición en "Soft light" (en layers, al lado de opacity). A la letra central le puse brillo alrededor llendo a Layer/Layer Style/Outer Glow. En blend Mode: normal - En el recuadro de color seleccioné el blanco - Opacity: 100% - Size: 10 - Technique: Softer.

Para hacer que la luz se refleje como si hubiera suelo, se hace de esta forma: vé al texto reflejado y duplicalo (Layer/Duplicate Layer...). Dirigete a Filter/Blur/Motion Blur. Elije la distancia que quieras y luego coloca la capa en modo de Lighten. Con la herramienta de movimiento, o bien con Edit/Transform/Scale... alarga el texto (que ya no es texto, sino una luz). Y listo, queda como un piso alumbrado.

Tutorial: Como hacer una firma animada para Foros con Photoshop Cs2

noreply@blogger.com (Ignacio) — Mon, 01 Aug 2011 04:48:00 +0000

Les enseñaré a crear una firma con un gif animado de este estilo:

Pero cuando aprendan como hacerlo, podrán crear el gif que ustedes quieran
Para esto usarémos el programa Photoshop CS2 de Adobe.

Paso 1: Crear un nuevo documento (Control + N)

Le ponen los tamaños que permiten las firmas del foro, 350x40 pixeles.

Paso 2: Buscan la imágen que quieran (en mi caso la saqué de Google imágenes).

y la pegan (Control + V) en el documento.

Paso 3: Abren la ventana de animación: Windows > Animation (Ventana > animación).

Y en la nueva ventanita que abrió, hacen clic en el boton "Duplicates selected frames", como muestra la siguiente imagen

En el primer Fotograma, mueven la imágen hacia arriba (o donde quieran que parta el gif)
En el fotograma copiado, el segundo... mueven la imágen hacia abajo (hacia donde se moverá).

Ahora que dejaron listas las imagenes donde comenzará y terminará el movimiento...
Vuelven a hacer clic en el Fotograma 1 y hacen clic en el boton "Tweens animation"

En la ventana que abre, no hagan nada más que poner el numero de fotogramas...
Para que la animación no sea tan lenta, con 10 frames está bien (Aunque la sig imágen dice 30 )

Apretan aceptar y verán que se crearon los 10 fotogramas, y en cada uno, la imágen se mueve un poco hasta llegar al final.

Paso 4: Hacer volver la imágen (para que sea una animación ciclica).

Para asegurarnos que al volver el gif, la imágen quede ahi mismo donde comenzó...
Van al Fotograma 2, y vuelven a apretar en "Duplicate selected frames"

El fotograma que se acaba de copiar, lo arrastras hasta el final, despues del último fotograma:

Ahora haces clic en el penúltimo fotograma (El que esta a la izquierda del que acabas de arrastrar, 32 en el ejemplo)

y vuelves a hacer clic en "Tweens animation", pones 10 frames nuevamente y aceptar.

Paso 5: Exportar el gif

Ahora solo haces clic en "File > Save for web" (Ahi puedes cambiar opciones de colores y formatos, pero no es necesario mover nada) y pones aceptar, y la guardas donde quieras

Listo, tenemos el gif terminado, ahora lo suben a una página como imgur.com y lo ponen en su firma.

Email me, la forma más fácil de hacer un forumario de Contacto

noreply@blogger.com (Ignacio) — Mon, 21 Mar 2011 08:07:00 +0000

Hace tiempo recuerdo haber pasado horas buscando un buen formulario de contacto y fácil de hacer, sin tanto código ni cosas raras, ahora recien encontre lo que buscaba: Email me.

Este sitio, te crea un botón que dice simplemente "Email me", y al hacer clic se despliega un formulario de contacto sutílmente para que te envien mails a tu correo.

Como hacerlo? Muy fácil.
Primero ingresas aqui.
Haces clic en "Get your buoton", luego ingresas tu correo y nombre... y Listo!
Ya has creado tu formulario de contacto.

Ahora solo debes pegar el código donde quieras que aparezca el botón y ya pueden contactarte. En blogger puedes agregarlo en Diseño > Agregar nuevo Widget > HTML/Javascript.

Plugins sociales de Facebook: Recomendaciones, comentarios y más

noreply@blogger.com (Ignacio) — Mon, 21 Mar 2011 07:47:00 +0000

Una buena forma de dar a conocer tu web y aumentar visitas es por ejemplo, el botón "Me gusta" de Facebook, donde una sola persona haga clic en Me gusta, la verán muchos más y así más gente conocerá tu sitio.

Pero facebook pone a disposición nuestra muchos más plugins, que te pueden hacer más fáciles algunas cosas, y permite a tus usuarios interactuar con sus amigos de la red social.

Plugin de Comentarios

Con este plugin, no es necesario crear, por ejemplo, un libro de visitas, ya que solo copias el código que te proporcionan y cualquiera puede comenzar a comentar en tu página, y además estos comentarios se publican en el facebook de cada persona si así lo desea.

Solo basta con ingresar acá y poner la dirección de tu web, para luego copiar el código proporcionado.

Feed de actividad de amigos

Esto te muestra la reciente actividad de tus amigos en tu página, solo ingresa aquí e introduce tu dirección.

Hay muchos más, como el famoso botón "Me gusta", que los puedes encontrar acá.

Crea un post-it o sticker online

noreply@blogger.com (Ignacio) — Tue, 01 Mar 2011 17:45:00 +0000

No tiene gran utilidad pero sirve para poner un mensaje corto o una bienvenida con un lindo diseño.

La web es Superstickie y es muy fácil de usar, solo debes escribir el texto y elegir los colores de tu sticker.

Cuando termines, le das clic a "Create" y listo, ahora puedes hacer clic en "Save to imgur" para copiar el enlace directo (direct link) y ponerlo en tu web.

Permitir crear entradas a cualquier usuario sin permisos en Blogger

noreply@blogger.com (Ignacio) — Thu, 02 Sep 2010 06:36:00 +0000

Una utilidad para esta función poco común, es en ese tipo de páginas de "Frases para Facebook" (que está plagado de ellas), en el que cualquier persona que visite el blog pueda crear entradas con un simple formulario, las cuales aparezcan automáticamente en el blog, sin ningún tipo de Permiso o contacto con el dueño del mismo...

Esto lo posteo a causa de una petición en un foro, en el cual se preguntaban como poder hacerlo, ya que blogger no permite esto... Pero aquí explico la forma que descubrí.

Esto es más fácil de lo que parece, el secreto en todo esto es "Mail-to-Blogger".

Que es Mail to Blogger?
Es una característica nueva de Blogger la cual te permite crear una dirección de correo, a la cual puedas enviarle Mail desde cualquier cuenta, que automáticamente publicará como entrada en el blog.

En este mail, el Asunto se transforma en el Título de la entrada y el Mensaje, será el Cuerpo de la entrada.

Paso 1: Crea tu dirección de correo para Mail-to-Blogger.
Esta opción aparece en Configuración > Correo electrónico y móvil.

En esa parte, creas tu correo y guardas los cambios. ej: nombre.example@blogger.com

Ahora, cada vez que alguien envíe un correo a nombre.example@blogger.com, este lo publicará como entrada en tu blog. En blogger recomiendan no darlo a nadie, porque pueden llenarte de spam. Aunque, claro, siempre cuando quieras puedes cambiar la dirección de correo.

Paso 2: Agregar un formulario que envíe mails a tu correo mail-to-blogger.
Y aquí esta el truco, crear un formulario con PHP que envíe un mail directamente al correo creado (ej: nombre.example@blogger.com) y asi cualquiera pueda crear entradas en tu blog.

En mi caso, para hacer el formulario utilicé este hosting gratuito muy bueno.
Para que todo funcione, deberás subir 2 archivos al servidor: El PHP que envíe los correos (enviar.php) y el formulario que pida la entrada al usuario (form.html).

2.1 - Abre un bloc de notas y guarda el siguiente codigo como enviar.php
Solo debes editar la dirección de tu correo mail to blogger.

<?php
$to = "nombre.example@blogger.com";
$subject = stripslashes($_POST['subject']);
$message = stripslashes($_POST["message"]);
$mailsend = mail ($to, $subject, $message);
if ($mailsend) {
echo "La entrada ha sido creada correctamente." ;
} else {
echo "Ha ocurrido un error al enviar, intenta nuevamente...";
}
?>

2.2 - Abre un Bloc de notas y guarda lo siguiente como form.html

<html>
<head><title>Enviar Entrada</title></head>
<body>
<link href="http://inacho.site90.com/style.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" type="text/javascript">

</script>
<form onsubmit="return chkpass()" method="post" name="myform" id="myform" action="/enviar.php">
<script>var tit = 'Escribe el Titulo de la entrada...';</script> <input type="text" name="subject" class="texto2" id="texto" onblur="if(this.value == '') this.value = tit;" onclick="if(this.value == tit) this.value = '';" maxlength="400" autocomplete="off" /> <script>var d = document.getElementById('texto');d.value = tit;function checkfields(){if(d == '' || d == tit) return false; return true;}</script> <br />
<br />
<br />
Escribe el cuerpo de la entrada a continuacion: <br />
<textarea name="message" rows="10" cols="74" style=""></textarea> <br />
<input type="submit" class="boton" style="float: left;" value="Enviar" onclick="if(d.value == tit) return false;" />
</form>
</body></html>

Paso 3: Subir los archivos e Integrarlo a tu Blog.
Luego de tener los 2 archivos, basta con subir al servidor que desees, y luego integrar un marco con el formulario a tu blog.

Para esto, vas a Diseño > Añadir artilugio > HTML/Javascript.
Ahi pegas el siguiente código editando la dirección de tu archivo "form.html"

<iframe src="http://nombre.servidor.com/form.html" frameborder="0" width="600" height="255" scrolling="no"></iframe>

Eso es todo, si sabes un poco de html y php puedes personalizar todo, ya que es muy fácil.

Nota: Si quieres que sólo postee el Titulo de la entrada (Para esas páginas de Frases), elimina el <textarea> ... </textarea> del form.html.

Dudas en los comentarios, Saludos :)

000webhost, un Hosting para guardar archivos rápido y gratis

noreply@blogger.com (Ignacio) — Mon, 30 Aug 2010 11:43:00 +0000

Estaba en busca de Hostings gratuitos para alojar los archivos de unos script (luego del fin de googlepages :( ) e imágenes de una galería, me encontre con varios que eran regulares y otros muy malos, que se caian cada 10 minutos (ripway.com) hasta que al fin pillé uno muy bueno para ser gratis: 000webhost

En este hosting gratuito he guardado multiples archivos php, javascript e imágenes y hasta ahora no se me ha caido ninguna vez, y la carga es bien rápida.

Para registrarte debes hacer clic aqui y poner los pocos datos que piden.
En la primera opción no pongas nada ya que es para dominios pagados. Y en la segunda eliges un subdominio que será la url corta de tu hosting para acceder a los archivos.

Luego de activar tu cuenta ya puedes ingresar a la zona de miembros en donde encontrarás el cpanel con todas las opciones del sitio.

Para comenzar a subir archivos, ve a la sección "Files" y usa uno de los 2 sistemas de manejo de archivos que tienen, yo prefiero el primero "File manager" por el java uploader.

Cuando entres al File manager, deberás introducir tu clave nuevamente pero sin cambiar el nombre de usuario que aparece ahi.
Para comenzar a subir tus archivos, debes entrar en la carpeta "public_html" y hacer clic en el botón de arriba que dice "Java upload", para subir archivos y carpetas fácilmente.

Luego, tu archivo podrás verlos haciendo clic en "open" a la derecha para obtener la url del mismo.

Cualquier duda en los comentarios :)

Como agregar el boton "Me gusta" de Facebook a tu web

noreply@blogger.com (Ignacio) — Sat, 28 Aug 2010 07:04:00 +0000

Este botonsito se hace cada vez mas popular en FaceBook, y por efecto de cadena, cuando una persona clickea en me gusta, empiezan a aparecer más haciendo lo mismo, lo cual genera visitas gratuitas a tu web gracias a la inmensa comunidad de Facecebook.

Para agregar el boton "Me gusta" de Facebook a tu web, solo debes añadir este código y cambiar lo que está en azul por la dirección de la web donde pondrás el boton:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.tupagina.com/pagina.html&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" style="border: medium none; overflow: hidden; width: 450px; height: 35px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

Si quieres agregarlo a blogger, y que aparezca automáticamente en cada entrada de tu blog, debes ir a Diseño > Edicion html > Expandir plantillas de artilugios. y buscar (control + F) esta linea:

<p><data:post.body/></p>

y poner el siguiente código antes (para que aparezca bajo el titulo) o después (aparecerá bajo la entrada, sobre los comentarios) de esa linea:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=450&height=35&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px'/>

Saludos :)

Abrir imágen en la misma página con efecto slide

noreply@blogger.com (Ignacio) — Mon, 03 May 2010 10:39:00 +0000

Highslide es un Script con varios efectos para crear una galeria de imágenes o simplemente abrir una imágen sin salir de la página con un bonito Zoom, puedes ver un ejemplos de su resultado en la página del autor.

Para este post, enseñaré a usar el efecto Gallery White, puedes ver un ejemplo aquí (haciendo clic sobre las cartas). Este efecto, además del "Zoom", permite mover la imágen por toda la página y para minimizar se debe hacer clic sobre la misma.

Parte 1 de 2:
Primero hay que agregar el siguiente código Javascript a tu código html, despues <head> (Busca con control + F).
Nota: Recomiendo guardar los archivos que estan en rojo y subirlos a un servidor propio, porque no aseguro la disponibilidad de estos, ya que es un servidor gratuito donde estan alojados.

Parte 2: Agregar la imágen en tu entrada o página.
Debes tener una imágen en miniatura de la imágen real, o si quieres haces un boton que diga "Abrir imágen aqui" o algo por el estilo, o incluso sin imágen y solo texto.
Para insertar la imágen, debes usar el siguiente código:

<div class="highslide-caption">
Texto opcional para la imágen, aparecerá en la parte inferior.
</div>

</div>

Aquí lo rojo es opcional, pero debes agregar el último </div> purpura al final.
Si quisieras hacer una galería, debes volver a copiar desde <a href... hasta ... /a>, siempre todo entre el <div class='high... inicial, hasta el .../div> final.

Preguntas en los comentarios, saludos.

Insertar una lista de reproducción de Youtube en un solo reproductor

noreply@blogger.com (Ignacio) — Thu, 11 Mar 2010 19:22:00 +0000

He visto varios sitios en los cuales muestran un video muy largo alojado en YouTube en varias partes, es decir, postean 5 o más reproductores en la página para poder visualizar una por una.
Pero hay una forma de unir todos los videos en uno y poder ver todas las partes en el mismo reproductor, y que al terminar una parte continúe de inmediato la siguiente.

Para poder ver varios videos de YouTube en un solo reproductor primero debemos crear una lista de reproducción, debes ingresar en tu cuenta y entrar en el video de la Primera parte de la película o secuencia.

Luego bajo el video, haces clic en "Guardar en" y luego al final de la lista haces clic en "Crear una lista de reproducción nueva" y eliges un nombre para tu lista. La parte 1 quedará guardado automáticamente.

Luego vas a la parte 2 y haces el mismo paso, solo que esta vez luego de Guardar en, eliges el nombre de tu lista ya creada. Así sigues con las siguientes partes, es importante hacerlo en orden, ya que si pones la parte 3 antes de la 2, la reproducción quedará desordenada.

Cuando termines tu lista, vamos a crear el Reproductor. Para eso vamos al siguiente Enlace:
http://www.youtube.com/custom_player

Eliges un nombre y descripción para tu reproductor, el color, y el estilo... yo generalmente elijo el primero para que el reproductor quede mas "limpio" para poder ver mejor la secuencia...

Más abajo en "Contenido" eliges tu lista de reproducción y haces clic en el botón "Seleccionar", cuando este todo listo, clic en Generar código.
(También puedes elegir mostrar tus favoritos o los videos subidos por ti).

Para cambiar el tamaño del reproductor:
Width="416" Este numero representa el Ancho del reproductor, lo cambias en las 2 partes que aparece en el código.

Height="337" Este es el Alto del reproductor, también cambias los 2 height del código.

AutoPlay en un video de Youtube

Para agregar autoplay (reproducción automatica) a un video de Youtube insertado en tu web, debes agregar &autoplay=1 al final del enlace del video (despues del = ) en la etiqueta <embed>, como en el siguiente ejemplo:

<object height="337" width="416"><param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFNLTEnTmbFWLl9DA_cs4LQI2M_RWjhKxNM="><embed src="http://www.youtube.com/cp/vjVQa1PpcFNLTEnTmbFWLl9DA_cs4LQI2M_RWjhKxNM=&autoplay=1" type="application/x-shockwave-flash" height="337" width="416"></embed></object>

Cualquier duda en los comentarios ^^

Fondos para Páginas web - Patterns

noreply@blogger.com (Ignacio) — Mon, 20 Apr 2009 08:21:00 +0000

Una de estas pequeñas imágenes con textura (Patterns), aplicada al fondo (background) de una página web, repetida la cantidad de veces necesarias para llenarla; se convierte en un fondo para tu web muy atractivo.

Estuve buscando en Google y no encontré muchas variedades que me llamaran la atención, hasta que de blog en blog llegue a la web más útil con respecto a este tema:
Ava7 Patterns, aquí encontrarás la mayor variedad de fondos para tu pagina web. Una web muy bien hecha, puedes filtrar los patterns por colores, texturas y popularidad, además de un excelente sistema de vista previa (Preview), que al hacer clic te mostrará en la misma web como se vería en el fondo repetidas veces.

Luego de encontrar el que creas que se verá mejor en tu web, la descargas (download) a tu pc, y la subes a tu hosting o algun sistema de alojamientos como Imageshack.
Cuando ya tengas el link directo a la imágen, tienes 2 formas de agregarlo en el código html de tu sitio:

1.- Buscas el tag <body> y le agregas la etiqueta "background", quedaria: <body background="http://www.hosting.com/fondo.png">

2.- Agregas el siguiente codigo antes de </head">, modificando la dirección de la imágen:

<style type="text/css">
body {
background-image: url(http://www.hosting.com/fondo.png);
background-repeat: repeat;
}
</style>

Sin duda una web para guardar en los Favoritos.
Espero les sea útil, saludos :)

Crear una Encuesta rápida para tu web

noreply@blogger.com (Ignacio) — Tue, 10 Feb 2009 15:51:00 +0000

Muy fácil y rapido, con Free Website Polls ni siquiera necesitas registrarte, basta con entrar en la página y elegir la pregunta que deseas formular, darle clic a "Continue" y poner las posibles respuestas para obtener el codigo HTML necesario para agregarlo a tu blog o web.

Crear mi encuesta rápida ahora

Generador de icono para tu correo (Gmail, Hotmail, Yahoo)

noreply@blogger.com (Ignacio) — Fri, 19 Dec 2008 18:37:00 +0000

"/>

Un bonito icono como estos ejemplos, con tu direccion de correo para poner en tu página como mail de contacto por ejemplo, lo puedes generar fácilmente con E-mail icon generator.

Basta con poner tu correo, elegir tu proveedor y hacer clic en Generate.
Ya puedes guardar la imágen para ponerla en tu blog, web, myspace, etc...
Si quieres que al hacer clic en la imágen, te envien un correo directamente, solo debes enlazarlo a "mailto:correo@correo.com"

ej: <a href="mailto:creandoweb@mail.com"><img src="http://imagen.com/micorreo.jpg"/></a>

Saludos

Servidor de radio streaming Gratis con Listen2myRadio

noreply@blogger.com (Ignacio) — Sat, 20 Sep 2008 06:15:00 +0000

[ACTUALIZADO]: Este post ya está obsoleto, ir al Post nuevo aquí.

Si intentaste crear un servidor con Winamp Shoutcast Server para transmitir tu radio online y no te resultó por algun u otro motivo (Puertos bloqueados, conectado en Red, etc) o simplemente quieres hacerte la vida más fácil con un Servidor online y no estar preocupandote de tener el PC prendido para que tu y tus amigos transmitan...

Para empezar a crear tu Servidor gratis de Radio Streaming, debes registrarte a Listen2Myradio desde aquí.
Luego de poner todos tus datos y darle clic a "SignUp" te reenviará a otra pagina en la cual aparece un enlace para activar tu radio: "you can activate your radio by entering this link:"

Ahora ya puedes comenzar haciendo Login con tu cuenta recien creada.

Paso 1: Haz clic en "Radio Installation"

Aqui es donde le das una contraseña, nombre y dirección url a tu radio.

Paso 2: Prender tu radio [ON]

Ahi mismo en el panel de Listen2Myradio haz clic en el enlace de "Turno on/off".
Al encenderla, te aparecerá la IP y PUERTO que necesitarás para transmitir.

Comenzar a Crear tu Radio Online con Winamp ShoutCast

Paso 3: Configurar el Winamp SHOUTcast Source.

Para transmitir necesitarás del programa Winamp [descargar] y el plugin Winamp Shoutcast Source [Descargar]

Abre el Winamp y Presiona "Control + P". En la lista de la izquierda bajas y haces clic en "DSP/effects" y en la lista de la derecha haz clic en "Nullsoft Shoutcast Source DSP". Ya puedes cerrar esa ventana y verás que apareció la de SHOUTcast Source.

Ahi vas a la pestaña OUTPUT.
En address pones la direccion IP y PUERTO que te entregó L2MRm en el Paso 2, además de la Contraseña que tu creaste en el Paso 1.

Paso 4: Comenzar a Transmitir

Haz clic en CONNECT y ya estarás transmitiendo, ahora solo pon la música que desees en tu Winamp y es lo que escucharán tus oyentes.

Para hablar por micrófono ve a la pestaña INPUT y en "Input devices" elige "SoundCard Input", luego Push to talk (pulsar para hablar).

Recuerda que cuando dejes de hablar debes volver a poner Winamp (recommended) en "Input devices" para que se escuche la música.

Paso 5: Instalar el Reproductor

Haz este paso a menos que quieras usar la dirección url (Ej: http://nacho.listen2myradio.com/) que creaste en el "Paso 1" para que los demás escuchen tu radio (Lo dudo, ya que es bastante fea la página).

Busca el reproductor adecuado para tu web, por ejemplo este Reproductor flash o puedes usar el codigo HTML del reproductor de Windows media que está al final de esta entrada.

Para configurar tu reproductor debes usar la misma IP y Puerto del "paso 2" en un http:// y separado de Dos puntos ( :), de esta forma:
http://IP:Puerto/ Ej: http://78.129.201.xxx:29130/

Tambien puedes acceder a esa dirección para ver el estado de tu radio (cantidad de oyentes, cancion actual, etc) y para copiar la direccion del archivo Listen.pls de tu radio, el cual tus oyentes pueden descargarlo y escuchar tu radio desde su reproductor Winamp sin tener que abrir tu página.

Codigo HTML del reproductor de Windows media:

<object width="326" height="50"
classid="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" standby="Loading
Microsoft® Windows® Media Player components..."
type="application/x-oleobject">
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="#ffffff">
<param name="transparentAtStart" value="True">
<param name="transparentAtStop" value="True">

<param name="AnimationAtStart" value="False">
<param name="AutoStart" value="True">
<param name="AutoRewind" value="true">
<param name="DisplaySize" value="0">
<param name="AutoSize" value="false">
<param name="ShowDisplay" value="False">
<param name="ShowStatusBar" value="true">

<param name="ShowControls" value="true">
<param name="FileName" value="http://IP:PUERTO/">
<embed type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/Me
diaPlayer/" src="http://IP:PUERTO/" width="323" height="49" displaysize="0" showdisplay="0"
showstatusbar="-1" showcontrols="-1" showstatus="-1" autostart="-1"></embed></object>

Actualización:

Si no te funciona la forma que puse en el blog para insertar listen a la web (creo que ya no funciona) puedes agregar el siguiente codigo:

<iframe src="http://www.direccion_de_tu_listen.html" "width="300" height="100" scrolling="no" frameborder="0"></iframe>

Ahí pones la direccion de la pagina de tu listen, donde sale el reproductor, y en width pones el ancho y height el alto, scrolling es para que aparezca o no el scroll o barra deslizante de la ventana, y frameborder el borde del marco.
Aunque no quedara muy bonito pero cumple el objetivo, o puedes ponerlo mas pequeño para que apenas se vea :P

Saludos :)

Generador de menus, banners y botones en flash gratis y facil

noreply@blogger.com (Ignacio) — Wed, 23 Jul 2008 06:44:00 +0000

Un banner en flash como este puedes crear facilmente con FlashVortex en pocos segundos y sin dificultades, además es gratis y no necesitas registrarte para comenzar a crear tus botones, textos, menus y animaciones en flash.

Es muy simple, primero ingresa a la pagina y elige lo que deseas crear en el menú superior:
Flashvortex.com

De los diversos diseños elige el que mas te guste y dale clic a "CLICK HERE TO EDIT THIS" para editar la animación flash.

Al terminar tu animación solo debes hacer clic en el botón "Generate Animation" que aparece al final del editor y copiar el código en tu sitio.

Si no te funciona con ese código, descarga el archivo flash (.swf) a tu computador con el botón Download y luego subelo a un hosting como ImageShack. Dale a examinar y luego clic en "Host it!"

Al terminar de subir tu flash haz clic en "view the uploaded file!" y copia el código HTML para pegarlo en tu web, o bien puedes usar el link directo al archivo (Direct).

Con estos flash tu web quedará mucho mas interesante y llamativa.
Aqui otros ejemplos de flash que puedes crear:

Como crear un Foro de discusion gratis

noreply@blogger.com (Ignacio) — Sun, 08 Jun 2008 14:10:00 +0000

Un foro es un sitio web fácil de usar, que permite dar tu opinión sobre un argumento, intercambiar ideas con otras personas sobre un mismo tema y debatir opiniones.
En internet hay varios servicios de creacion de foros Gratis que solo con registrarte, ya tienes tu foro Listo para comenzar a crear tu comunidad.

El que recomiendo es Foro activo, por sus características más importantes:

Chatbox + portal
Foro ilimitado
Seguridad reforzada
Actualizaciones automáticas
PHPBB2- PHPBB3
Alojamiento de imagen gratis

Para empezar a crearlo, debes comenzar por aqui.

Comienzas eligiendo una plantilla, luego le das el titulo, descripcion y lo más imortante: La direccion del foro.
Puedes elegir entre varios subdominios, como por ejemplo: Miforo.activoforo.com, Miforo.coolbb.net, etc
Recuerda dar un mail valido para confirmarlo, y no olvides la contraseña de administracion que será con la cual controles tu foro.

Puedes ver un ejemplo de foro creado en Foro Activo: http://alumnosici.top-board.com/

Reproductor flash para ShoutCast de Radio

noreply@blogger.com (Ignacio) — Mon, 19 May 2008 14:45:00 +0000

[ACTUALIZADO]: Este post ya está obsoleto, ir al Post nuevo aquí.

Cuando tienes tu propia Radio online Streaming con ShoutCast de Winamp, generalemente el codigo del reproductor que encuentras en Internet es el de Windows media Player, el cual funciona muy bien en Internet Exporer, pero en Firefox da problemas, ya que pide un Plugin que no existe.

Si tienes oyentes usando Firefox u otro navegador que no acepte el reproductor de Windows, puedes instalar un reproductor Flash para que sea compatible con todos y asi nadie se pierda tu radio.

El reproductor flash sería este:
http://inacho.awardspace.com/flash/player.php

Es muy fácil instalarlo.
Primero debes descargar este archivo RAR que contiene una carpeta con 3 archivos: Descargar

Sube el directorio completo con los 3 archivos dentro a algun hosting, por ejemplo, Awardspace.com. Pero antes de subirlo debes editar el player.php.
Haz Clic secundario en el archivo "player.php" y elige Abrir con > Bloc de notas.

Busca la siguiente linea y cambia la IP y el PUERTO por la tuya:
so.addVariable('file', 'http://IP:PUERTO/;stream.nsv');Ahora ya puedes Subirlo.

Como es un archivo PHP, Tienes 2 opciones para agregarlo a tu web:

1. Insertarlo en un Frame dentro de tu Web
Puedes insertarlo mediante un marco o frame a tu web, mediante el siguiente codigo:

<iframe frameborder="0" scrolling="no" src="http://direcciondelarchivo.com/reproductor/player.php" height="30" width="360"></iframe>

Solo debes editar la dirección de tu player.php.
Si al integrarlo en tu pagina se ve el fondo del frame de otro color, puedes cambiarlo editando el player.php en la parde de
<body bgcolor="#000000"> <- color="" en="" hexadecimal="" span="" style="font-weight: bold;">
2. Enlace a una ventana Pop-up
Puedes poner un enlace de texto o imágen en tu web, que al hacer clic abra una nueva ventana Pop-up con el reproductor, asi cuando tus oyentes navegen por tu pagina, no se tendrá que cargar el reproductor nuevamente.

Enlace de Texto:
<a href="http://direcciondelarchivo.com/reproductor/player.php" target="_blank" onClick="window.open(this.href, this.target, 'width=360,height=50'); return false;">Radio Online</a>

Ejemplo: Abrir Radio Online

Enlace de Imágen:
<a href="http://direcciondelarchivo.com/reproductor/player.php" target="_blank" onClick="window.open(this.href, this.target, 'width=360,height=50'); return false;"><img src="http://direcciondelaimagen.com/imagen.gif"/></a>

width y height es el ancho y alto, puedes dejarlo como está o agrandarlo, todo depende de como hallas editado el archivo player
Nota: El "By Creando Web" lo borras editando el player.php

Cancion en reproducción
Si quieres que aparezca el titulo de la canción que esta sonando... en este comentario Shiver nos lo explica =)

Nos escuchamos! Salu2 ^^

Tagboard, un mini chat para tu web

noreply@blogger.com (Ignacio) — Sat, 29 Mar 2008 15:29:00 +0000

Un Tagboard es un chat simple y sencillo para que la gente deje mensajes rapidos y cortos en tu web solo con poner un nick.
Uno de los mejores y más utilizados es Cbox.ws por su simplicidad de uso y por estar libre de publicidad.

Para empezar debes registrarte haciendo clic aqui (sign up).
Luego de registrarte ya puedes logearte con tu Nombre de usuario y contraseña.
De inmediato entras al panel de control en la parte de "Quick Setup" y a la derecha aparece el código que debes pegar en tu sitio.
Ahora solo basta configurar opciones de color, tamaño, Smilies, etc...
El resultado es como el que está aqui mismo a la derecha.

Salu2

Servicio de Alojamiento Web, CyberNETicos.com

noreply@blogger.com (Ignacio) — Wed, 19 Mar 2008 02:47:00 +0000

Este es un Análisis patrocinado por Zync.es

Como dice el título, CyberNETicos.com es una empresa de Alojamiento Web, además de servicios de Registro de Dominios y Streaming para emitir Radio online, entre otros.

Tiene una variedad de 5 planes, desde el Básico al Profesional, los cuales todos incluyen Alojamiento Web multidominio, es decir, Dominios ilimitados en el mismo plan sin tener que pagar más.

A continuación se muestran sus planes de Alojamiento Web con sus características y precios. Ten en cuenta que todos los planes incluyen además del servicio Multidominio, 30 programas gratis y nombre de dominio gratis con su pago anual, el cual se renueva cada año, siempre y cuando renueves el Plan.

Plan Básico: 100 MB de espacio y 5.000 MB de transferencia. Precio: 31,03 € al año.

Plan Personal: 500 MB de espacio y 10.000 MB de transferencia. Precio: 62,07 € al año.

Plan Medio: 1.000 MB de espacio y 20.000 MB de transferencia. Precio: 93,10 € al año o 7,76 € al mes.

Plan Avanzado: 2.000 MB de espacio y 50.000 MB de transferencia. Precio: 124,14 € al año o 10,34 € al mes.

Plan Profesional: 5.000 MB de espacio y 100.000 MB de transferencia. Precio: 186,21 € al año o 15.53 € al mes.

Para administrar y configurar tu Alojamiento, tienes un panel de control con multiples herramientas, entre las más utiles estan:

Gestion Multidominio: Con esta herramienta podras configurar cada uno de tus dominios independiente sin afectar a otros dominios en el mismo plan.

Installatron: Aqui estarán tus 30 programas y scripts GRATIS ya instalados en tu plan de alojamiento web multidominio, los cuales podrás instalarlos con un solo click en la carpeta que desees.

Administrador de emails: Podrás crear todos los buzones de correo, respondedores automaticos sin límite.

Control total sobre DNS (entradas de tipo A (A records), NS (name servers) MX (MX records), CNAME, PTR y TXT).

Control FTP: Puedes crear tantas cuentas como desees, sin límite.

Control MySQL: Podrás crear las bases de datos MySQL que necesites y administrar con phpMyAdmin.

Si quieres saber como funciona el Panel de Administracion, puedes Entrar aqui para probar el Demo.
Usuario: demo_user Contraseña: demo

Sin duda una opción a tener en cuenta si tienes pensado Crear una pagina Web, foro, blog, u otro con un Alojamiento Web que cubra todas tus necesidades.

Enlace de 'Ir arriba' o 'subir' con imágen

noreply@blogger.com (Ignacio) — Mon, 17 Mar 2008 05:58:00 +0000

Este código es muy simple y te servirá si tienes un blog o una pagina muy extensa, por ejemplo en este blog, abajo y a la izquierda, verás esta imagen que te sigue hasta abajo, y que al hacer clic en ella te envia al Top de la página.

Se trata de un enlace a "#", es decir:

Como enlace de Texto:
<a href='#' title='Ir arriba'>Ir arriba</a>

Como imagen con enlace
<a href='#' title='Ir arriba'><img src='http://Urldelaimagen.gif' border='0'/></a>

Como imagen fija abajo y a la izquierda (como en este blog):
<a href='#' title='Ir arriba'><img alt='Ir arriba' border='0' src='http://Urldelaimagen.gif' style='position:fixed; bottom:0; left:0;'/></a>

Como imagen fija abajo y a la derecha:
<a href='#' title='Ir arriba'><img alt='Ir arriba' border='0' src='http://Urldelaimagen.gif' style='position:fixed; bottom:0; right:0;'/></a>

Si quieres puedes usar esta imagen su Url es:

http://inacho07.googlepages.com/2uparrow.png

Google Pages como Hosting de mp3 gratuito

noreply@blogger.com (Ignacio) — Mon, 10 Mar 2008 08:36:00 +0000

En internet hay muchos servicios de hosting y alojamientos gratuitos donde puedes subir archivos como imágenes, videos, mp3 u otros. El problema está en el Enlace directo al archivo, en el caso de los mp3, en la mayoria de los hosting de musica el enlace para compartir tus mp3, es un enlace a un reproductor de su misma pagina. Y como a veces necesitamos el link directo al .mp3 para usarlos en un reproductor de musica o bien para compartirlo y que tus amigos lo puedan descargar con un solo clic.

Aparte de ser exelente un servicio de creacion de paginas web de manera sencilla, especial para novatos, funciona como un exelente Hosting de arhivos (de cualquier tipo, incluido mp3, avi, jpg, png, gif, etc) con un Maximo de 100mb.

El servicio es gratuito y lo único que necesitamos tener es una cuenta Google (Cuenta GMail), algo que ya tienes si eres usuario de Blogger. Si no se dispone de una cuenta de GMail, puede obtenerse una aquí.

Cuando ya tengas la cuenta, puedes ingresar desde la Pagina de Google Pages, www.GooglePages.com. Te dará la bienvenida y debes aceptar los terminos y condiciones, para luego hacer clic en "I'm ready to create my pages".

Eso es todo, ya estas listo para usarlo. Se te abrirá el editor de paginas, para salir haz clic en "Back to site manager" arriba.

Ahora nos encontramos en la página principal, la cual se abrirá de ahora en adelante cada vez que ingresemos a Google Pages.

El Hosting
Lo que nos interesa a nosotros, es lo que está a la derecha, el hosting que usaremos para alojar nuestros mp3 y archivos varios.

Hacemos click en upload, aparecerá la ventana Examinar, buscamos el archivo en nuestro disco duro y aceptamos. Cuando termina la carga, en el mismo sitio, aparecerá el nombre del archivo.
Ahora para saber la ruta o el enlace directo, en este caso, al mp3, debemos hacer clic secundario del raton sobre el nombre del mp3 y darle a "Copiar direccion del enlace" en firefox y "" en Iexplorer.

Ya tienes el Enlace al mp3, Felicidades! ahora puedes usarlo en tu reproductor de musica o Compartirlo con tus amigos con un solo clic!

Salu2

Plugoo: Chat privado entre blogger - webmaster y visitante

noreply@blogger.com (Ignacio) — Thu, 07 Feb 2008 10:22:00 +0000

Tienes un blog o web en el que tus visitas necesitan contactarte mediante mensajeria instantanea online (chat) cuando estes conectado a messenger (tambien Yahoo! Messenger, AIM, GoogleTalk, Jabber o ICQ), sin necesidad de agregarte?

Esta posibilidad de responder consultas de forma rapida en el momento que tu desees es lo que nos brinda plugoo, un chat entre el blogger - webmaster y el visitante.
Incluso funciona con Myspace! Asi tus amigos podran hablarte desde tu myspace cada vez que estes conectado a messenger!

Si! es el mismo que yo tengo a la derecha de este blog, donde mucha gente me pregunta todas sus dudas (Como hago un link? como creo mi reproductor? como como como??), y yo hago lo posible por responderlas. =D

Como funciona?
Si estas en estado online en tu MSN (o tu correspondiente servicio de mensajeria), en tu chat de plugoo aparecerá un texto con tu estado (Lo puedes modificar desde plugoo), asi el visitante al ver tu chat, elige un nick y comienza a mandar mensajes al mismo tiempo que a ti se te abre una ventana en MSN al igual que cuando un amigo te habla, solo que esta vez dira: Plugoo [Chatdemiweb] nick.

Si estas offline, los mensajes igual te llegarán al conectarte.

Quiero uno ahora!
Luego de crearte una cuenta en Plugoo introduciendo un mail válido para confirmar tu solicitud, ingresas con tu cuenta recien creada y comienzas a personalizar tu chat privado desde la pestaña "mis widgets", luego de editar los colores, textos y demases, solo copias el codigo HTML y lo pegas en cualquier lugar de tu web, blog, myspace o lo que sea! (Menos hi5, que no permite nada >=I)

Suerte con su nuevo chat, que si tienen una web de ayuda como la mia, estaran todo el dia respondiendo preguntas xD!

Saludos! =)