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

Luego de largos años de ausencia, quería revivir el blog con uno de los temas más solicitados y que han quedado obsoletos en post anteriores: Radio online por streaming a través de Icecast2 (hermano de shoutcast) con Winamp y Edcast, con un servidor en linea en caster.fm.
En este tutorial aprenderás a crear tu propia radio online, entregándote las herramientas necesarias para transmitir audio desde tu micrófono y música desde tu reproductor Winamp, con una fácil inserción de un reproductor en tu sitio web o blog.

Ingredientes:

• Crear tu cuenta en caster.fm
• Descargar Winamp, edcast y lame_enc.dll, que los puedes encontrar aquí.
• Música en tu pc y un micrófono :)

Preparación:

Servidor caster.fm

• Luego de crear tu cuenta en caster.fm, te llegará un mail de confirmación. Debes ir y confirmarlo, para poder ingresar a tu cuenta. Una vez dentro, vamos al login de las cuentas gratis (Free account) y ingresamos los datos solicitados en "Radio details", donde todos los datos son requeridos. El único detalle aquí es que para llenar "page text" y "page sidebar text" pide bastantes caracteres, yo no tenía nada que escribir por lo que rellené con lorem ipsum (texto de relleno por decirlo así).
• Tu radio ya está lista para transmitir, ahora debes encenderla clickeando en "Start server".

Transmisión con Winamp

• Primero debes instalar Winamp y después Edcast. En la instalación del segundo, sólo presiona siguiente hasta instalarlo, sin marcar ninguna opción. Luego, necesitas instalar el encoder de lame, por lo que vas a la carpeta de Winamp (una ruta similar a C:\Program Files (x86)\Winamp ) y copias el archivo lame_enc.dll ahí.
• Abre Winamp y presiona Control + P simultáneamente. Se abrirá una ventana de opciones. Haz scroll y baja hasta encontrar en el menú izquierdo "DSP/efecto" y selecciona edcast DSP v3 como muestra la imágen:

• Se abrirá el programa en paralelo a Winamp. Debes configurarlo con los datos de tu servidor en caster.fm. Para eso, en edcast clickeamos "Add encoder" y le hacemos doble click para configurarlo.

• Recuerda dejar Icecast2 en "Server type" y MP3 Lame en "Encoder type", además de cambiar el "Mountpoint". Presionas Ok y luego Conectar (es recomendable marcar la opción "Autoconnect". Haz clic en el ícono del micrófono para seleccionarlo. En la sección transfer Rate debería marcar la velocidad de transferencia. Si no te conecta, revisa que los datos de conexión que configuraste sean iguales a los de tu servidor en caster.fm.
• En la sección "website" de caster.fm podrás encontrar el link a tu sitio de radio, con reproductor incluido. Si quieres añadir el reproductor flash a tu sitio web o blog, sólo debes ir a la sección "Widgets" y copiar el código del "Embedded player".

Y eso es todo, que tengas una buena radio y feliz año 2017 :)!

>> Leer Todo

Este efecto se activa al pasar el Mouse sobre la imágen y puede tener diferentes usos. Por ejemplo, puedes mostrar más información de un tema que representa a la imágen o también puede ser útil en un banner de publicidad.

Para agregarlo en Blogger, debes ir al diseño HTML de tu blog y buscar ]]> para insertar este código antes de esa linea: (Control + A para seleccionar todo)

.view { background-color:#FFFFFF; /* fondo borde */ border: 10px solid #FFFFFF; /* color borde */ box-shadow: 2px 3px 5px #696969; /* sombra borde */ cursor: default; float: left; height: 200px; /* alto de la imagen */ margin: 10px; overflow: hidden; position: relative; text-align: center; width: 250px; /* ancho de la imagen */ } .view .mask, .view .content { height: 200px; /* alto del contenido es el mismo que el de la imagen */ left: 0; overflow: hidden; position: absolute; top: 0; width: 250px; /* ancho del contenido es el mismo que de la imagen */ } .view img { display: block; position: relative; } .view h2 { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8); color: #FFFFFF; font-size: 17px; margin: 20px 0 0; padding: 10px; position: relative; text-align: center; text-transform: uppercase; } .view p { color: #FFFFFF; font-family: Georgia,serif; font-size: 12px; font-style: italic; padding: 10px 20px 20px; position: relative; text-align: center; } .view a.info { display: inline-block; padding: 7px 14px; text-decoration: none; text-transform: uppercase; } .view-third img { box-shadow: 0 0 1px #000000; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .view-third .mask { background-color: rgba(0,0,0,0.6); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-transform: translate(460px, -100px) rotate(180deg); -moz-transform: translate(460px, -100px) rotate(180deg); -o-transform: translate(460px, -100px) rotate(180deg); -ms-transform: translate(460px, -100px) rotate(180deg); transform: translate(460px, -100px) rotate(180deg); -webkit-transition: all 0.2s 0.4s ease-in-out; -moz-transition: all 0.2s 0.4s ease-in-out; -o-transition: all 0.2s 0.4s ease-in-out; -ms-transition: all 0.2s 0.4s ease-in-out; transition: all 0.2s 0.4s ease-in-out; } .view-third h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third p { -webkit-transform: translateX(300px) rotate(90deg); -moz-transform: translateX(300px) rotate(90deg); -o-transform: translateX(300px) rotate(90deg); -ms-transform: translateX(300px) rotate(90deg); transform: translateX(300px) rotate(90deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third a.info { -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-third:hover .mask { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -ms-transition-delay: 0s; transition-delay: 0s; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); } .view-third:hover h2 { background: none repeat scroll 0 0 #9C1813; /* Título */ border-top: 1px solid #000; /* color borde top título */ border-bottom: 1px solid #000; /* color borde bottom título */ text-shadow: 0px 1px 1px #111; /* sombra título */ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; -ms-transition-delay: 0.5s; transition-delay: 0.5s; } .view-third:hover p { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -ms-transition-delay: 0.4s; transition-delay: 0.4s; } .view-third:hover a.info { background: none repeat scroll 0 0 #9C1813; /* color de fondo enlace leer más */ border: 1px solid #000; /* color borde enlace leer más */ color:#FFFFFF; /* color enlace leer más */ text-shadow: 0px 1px 1px #111; /* sombra enlace leer más */ -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s; }

Para cada imágen que quieras añadir el efecto, debes usar el siguiente código y reemplazar lo que se indica:

<div class="view view-third"> <img src="http://LINk_DE_LA_IMAGEN" /> <div class="mask"> <h2>Título del Tema</h2> <p>Descripción</p> <a class="info" href="http://LINK_DEL_ENLACE">Más Información</a> </div> </div>

>> Leer Todo

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.

>> Leer Todo

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

>> Leer Todo

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!

>> Leer Todo

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.

>> Leer Todo

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.

>> Leer Todo

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.

>> Leer Todo

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á.

>> Leer Todo

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.

>> Leer Todo