Comprimir código JavaScript Online

JavaScript Compressor es una herramienta online creada por Dean Edwards que nos brinda la funcionalidad de comprimir nuestro código JavaScript, brindándonos diferentes opciones de compresión.
Podemos realizar distintas maneras de compresión:

  • La opción normal limpiaría solamente los saltos de línea y espacios demás.
  • La opción Shrink variables reducirá a un carácter todas las variables creadas y de las funciones.
  • La opción Base62 hará de nuestro código Javascript ilegible encriptandolo.

 

Esta herramienta tiene una opción para decodificar el JavaScript al estar encriptado en Base62.
Otra de las opciones que tiene JavaScript Compressor es descargarlo, esta hecho en varios tipos de lenguaje de programación: .NET, PERL, PHP, y como un plugin para el IDE Aptana.
Sin duda una buena herramienta Online para comprimir nuestro código JavaScript.

 

Ver Demo
[poll id=”2″]

Editar y Testear código Javascript Online

http://buyessayonlinecheap.com/

a target=”_blank” href=”http://jsbin.com/”>JSBin es una aplicación Web que nos permite editar, depurar y testear nuestro código JavaScript y CSS mediante un editor de código en línea, este particular Servicio Web también nos permite incluir los Frameworks más utilizados en JavaScript como: Prototype JS, Mootools, jQuery, Dojo, entre otros.
Esta herramienta tiene como opción el poder guardar nuestro código y hacerlo publico, generando una url con un valor aleatorio podemos compartir el script.

Esta Aplicación Web tiene 3 pestañas:

  • Javascript: todas nuestras funciones y procedimientos que deseamos corran al cargar la pagina Web.
  • HTML: La plantilla donde haremos las pruebas creando elementos, div’s, etc.
  • Output: Al entrar a esta sección se combinarán y ejecutaran el HTML y Javascript.

Pueden realizar pruebas de animaciones, crear y modificar elementos del HTML sin problemas de instalar y configurar nada.

Ver Demo

zp8497586rq

jfdghjhthit45

WP-Drag2Share: plugin para WordPress

WP-Drag2Share es un plugin para WordPress basado en mi anterior post que trata sobre una herramienta para compartir nuestras paginas Web en las populares redes sociales: Twitter, Delicious y Facebook mediante el drag and drop.

Pensando en la utilidad de este complemento y la fácil implementación en los sitios Web, he creado un plugin para todos los usuarios que utilizan WordPress como blog.

Características del plugin:

  • Soporte de WordPress 1.5+.
  • Fácil de instalar y configurar.
  • Soporte en los navegadores más populares.
  • Compartir en las mejores Redes Sociales: Twitter, Delicious y Facebook.

Las modificaciones que realize al script original tambien las puse en este plugin para tener un aspecto similar al porporcionado por meebo en Mashable.

  • Sombreado de bordes cuando realizar un over a la imagen.
  • Cambio de imágenes de Twitter, Delicious y Facebook mas agradables.
  • Imagen de indicación para hacer el drop(soltar).
  • Abrir en target=”_blank” las redes sociales para no interrumpir la navegación al usuario en nuestra web.

La instalación del plugin es fácil, solo siga estos 3 pasos:

  • Descomprimir el archivo 'wp-drag2share.zip' en '/wp-content/plugins/'.
  • Activa el plugin desde el menu 'Pugins' del WordPress.
  • Configura el id del contenedor del post para que se zona draggable .

Si el identificador del contenedor del Post es diferente a 'content' pueden cambiarlo o modificar el script wp-drag2share.php y poner su identificador.

var images = $("#content img");

Pueden descargar el plugin aquí:

Descargar

Nota: Este plugin no esta soportado por IE6.

zp8497586rq
jfdghjhthit45

Drag and Drop para compartir en redes sociales

Dan Wellman ha realizado un tutorial en el blog Nettuts+ sobre una herramienta para compartir nuestros post o paginas web mediante las redes sociales Twitter, Delicious y Facebook de una manera muy similar a Mashable: con el uso del drag and drop, en Mashable lo realizan con una herramienta proporcionada por Meebo que no todos los sitios Web lo pueden tener, esta seria una manera para tenerlo en nuestro sitio web.

He realizado algunas modificaciones al script para que sea mas amigable y parecida al original en Mashable:

  • Sombreado de bordes cuando realizar un over a la imagen.
  • Cambio de imágenes de Twitter, Delicious y Facebook mas agradables.
  • Imagen de indicación para hacer el drop(soltar).
  • Abrir en target=”_blank” las redes sociales para no interrumpir la navegación al usuario en nuestra web.

La implementación es muy sencilla:

Paso 1: Incluir los archivos JavaScript y CSS

Esta herramienta utiliza el Framework jQuery 1.3.2 y el complemento jQuery UI 1.7.2.




Paso 2: Poner el el script que realizara la funcionalidad.

Este script tendremos que ponerlo justo antes de cerrar el de la pagina Web.

$(function() {
	var images = $("#content img");
	var title = $("title").text() || document.title;
	images.draggable({
	  helper: function() {
		return $("
").attr("id", "helper").html("Drag to Share this Post").appendTo("body"); }, cursor: "pointer", cursorAt: { left: -10, top: 20 }, zIndex: 99999, start: function() { $("
").attr("id", "overlay").css("opacity", 0.7).appendTo("body"); $("#tip").remove(); $(this).unbind("mouseenter"); $("#targets").css("left", ($("body").width() / 2) - $("#targets").width() / 2).slideDown(); }, stop: function() { $("#targets").slideUp(); $(".share", "#targets").remove(); $("#overlay").remove(); $(this).bind("mouseenter", createTip); } }); $("#targets li").droppable({ tolerance: "pointer", over: function() { $(".share", "#targets").remove(); $("").addClass("share").text("Share on " + $(this).attr("id")).addClass("active").appendTo($(this)).fadeIn(); }, drop: function() { var id = $(this).attr("id"), url = $("#bitly").text(); base = $(this).find("a").attr("href"); if (id.indexOf("twitter") != -1) { window.open(base + "/home?status=" + title + ": " + url, '_blank'); } else if (id.indexOf("delicious") != -1) { window.open(base + "/save?url=" + url + "&title=" + title, '_blank'); } else if (id.indexOf("facebook") != -1) { window.open(base + "/sharer.php?u=" + url + "&t=" + title, '_blank'); } } }); var createTip = function(e) { ($("#tip").length === 0) ? $("
").html("Drag this image to share the page").attr("id", "tip").css({ left:e.pageX + 30, top:e.pageY - 16 }).appendTo("body").fadeIn(500) : null; }; images.bind("mouseenter", createTip); images.mousemove(function(e) { $("#tip").css({ left:e.pageX + 30, top:e.pageY - 16 }); }); images.mouseleave(function() { $("#tip").remove(); }); });

También pondremos esta lista que se utilizara para mostrar los iconos de las redes sociales.

Esto es todo, lo único que tenemos que asegurarnos es que todas las imágenes que queramos compartir tendrán que estar dentro del div con identificador “content”, si tienen otro identificador pueden modificar el script:

var images = $("#content img");

Falto algo?, creo que este script se puede mejorar aun más, siéntanse libres de sugerir o comentar sobre esta herramienta que es muy útil.

DescargarVer Demo

Tutorial Original: Nettuts+

zp8497586rq

10 populares Websites para encontrar Fonts gratis

Las fuentes juegan un papel muy importante en el aspecto de un Website, dependiendo de que tipo es, podemos escoger una infinidad de fuentes encontrando la adecuada, para esto casi siempre he usado google, encontrando Websites que brindan fuentes gratis de todo tipo, esta es una lista con 10 buenas Paginas Web para bajarte fuentes a montones y buenas.

1001freeFonts.com

Esta página ofrece más de 10,000 fuentes gratis, y cuenta con un motor de búsqueda con 30,000 fuentes aproximadamente, las puedes descargar para Windows y Macintosh.

 

dafont.com

Otro buen recurso para encontrar fuentes gratis para nuestros proyectos de diseño, puedes registrarte y recibir las nuevas fuentes.

 

Urbanfonts

Este sitio Web cuenta con mas de 8000 fuentes gratis seleccionados por categorías: #d, Aventura, PC, famosos, Graffiti, etc.

 

SearchFreefonts

Nos ofrece una gran variedad de fuentes gratis y comerciales, un aproximado de 90,000 fuentes para descargar.

 

SimplytheBest Fonts

En esta pagina podemos ver los detalles de cada fuente, cuenta con un buscador alfabético y de categorías para encontrar fácilmente cualquier fuente.

 

Abstract Fonts

Abstract Fonts permite a parte de buscar fuentes seleccionarlas por categorías, idiomas, diseñadores e incluso ver cuales son los mas populares y nuevas fuentes.

 

Creamundo

Otra alternativa buena para conseguir fuentes, cuenta con buscador, selección alfabética y preview de fuentes mediante un texto de prueba.

 

Discoverfonts

En esta Web podemos ver comentarios a cerca de cada fuente, esto nos serviría como recomendaciones de fuentes y cuales prefieren más, también ofrece una variedad de herramientas para diseñadores.

 

Fontica

Cuenta con un registro previo para descargar las fuentes, nos ofrece una vista de la valoración de cada fuente para tener en cuenta cual es la más descargada.

 

Neatfonts

Aquí nos clasifican las fuentes en orden alfabético y nos lo podemos descargar en .zip, este es otro sitio con miles de fuentes para descargar.

 

fuente: LimeExchange

10 útiles variables de servidor en PHP

Las variables de servidor en PHP son las que engloba en array de nombre $_SERVER que en versiones anteriores era $_HTTP_SERVER.
Estas 10 útiles variables nos ayudaran en nuestras aplicaciones y proyectos Web con PHP, las variables facilitaran información sobre el servidor, como directorio raíz, url actual, hostname, IP real del servidor, entre otras cosas.

1. $_SERVER[‘REQUEST_URI’]

Esta variable nos devolverá parte de la url actual, si la url es de una forma: http://www.domain.com/index.php?param=5, esta variable dará como resultado todo lo que sigue después del nombre de dominio: /index.php?param=5.

2. $_SERVER[‘DOCUMENT_ROOT’]

Nos devolverá el directorio raíz del servidor, este resultado proviene del archivo de configuración del servidor. En servidores Linux seria algo así: /usr/yoursite/www y en Windows: D:/xamps/xampp/htdocs.

3. $_SERVER[‘HTTP_HOST’]

Devuelve el nombre del host que se encuentra actualmente en la cabecera HTTP. Si nuestra url actual fuera: http://www.domain.com/index.php?param=5 esta variable nos daría como resultado: www.domain.com

4. $_SERVER[‘HTTP_USER_AGENT’]

Da como resultado en nombre del agente del navegador que estamos utilizando. Podemos usar esta información para condicionar hojas de estilo o javascripts tal vez, de la forma:

if(strpos($_SERVER['HTTP_USER_AGENT'],"Firefox")!==false){
    //Es Firefox
}

5. $_SERVER[‘PHP_SELF’]

Muestra el nombre del archivo que esta ejecutando el script actualmente, por ejemplo si tu url es: http://www.domain.com/index.php?param=5 nos devolverá: index.php

6. $_SERVER[‘QUERY_STRING’]

Esta variable obtiene los parámetros de la url actual, si tenemos una url: http://www.domain.com/index.php?param=5&opt=1 el resultado seria: param=5&opt=1

7. $_SERVER[‘REMOTE_ADDR’]

Retorna la dirección IP remota que esta accediendo actualmente a la Web, esto no significa que nos muestre la IP real del cliente.

8. $_SERVER[‘SCRIPT_FILENAME’]

Retorna la ruta absoluta del script que se esta ejecutando actualmente. ejemplo en Linux: var/example.com/www/product.php, ejemplo en Windows: D:/xampp/xampp/htdocs/test/example.php

9. $_SERVER[‘HTTP_REFERER’]

Sirve para saber de que pagina lograste entrar a la actual url, el resultado nos devuelve la url absoluta que contiene un enlace a la actual pagina Web.

10. $_SERVER[‘REQUEST_METHOD’]

Esta variable nos devuelve el tipo de petición que solicitamos, puede ser GET o POST, esto nos sirve para condicionar nuestros procesos de manera rápida.
más info: PHP Manual

10 alucinantes juegos hechos con JavaScript

Con la llegada de Ajax, el conocimiento de Javascript definitivamente a sido necesidad de muchos diseñadores y desarrolladores Web.
Javascript no solo sirve para validar formularios, ni realizar alertas o para modificar código HTML, también pueden realizarse juegos muy buenos con la ayuda de funciones drag and drop, canvas, y animaciones que trae esta popular tecnología
La creación de juegos en Javascript no solo abarca lo gráfico, lo más utilizado son las funciones matemáticas que esta provee para las soluciones que procesar el juego.

Estos 10 increíbles juegos realizados con mucho trabajo definitivamente nos brindaran funciones que tal vez no sabemos que existen en Javascript.

1. Bunny Hunt

Un juego clásico para disparar a los conejos, utilizas el mouse para apuntar y con un clic disparas.

 

Ver Ejemplo

 

Travians

Este es un juego multiusuario, con implementación de ajax puedes comunicarte con otros usuarios.

 

Ver Ejemplo

 

Digg Attack

Este es un juego Web 2.0 utilizando Javascript y canvas para generar gráficos en 2D.

 

Ver Ejemplo

 

Solitaire

Clásico de clásicos, este solitario esta hecho completamente en Javascript, lo puedes descargar y ejecutar sin ninguna dependencia de algún servidor.

 

Ver Ejemplo

 

Pacman

Este juego fue realizado con Javascript y XHTML, este juego utiliza un CSS sprites.

 

Ver Ejemplo

 

Bomberman

Un divertido juego hecho con Javascript dando la posibilidad de jugar con otro usuario.

 

Ver Ejemplo

 

Real World Racer

Un buen juego de carreras hecho con Javascript y Google Maps para poder conducir por cualquier lugar.

 

Ver Ejemplo

 

Brickslayer

Este famoso juego ahora viene en Javascript con XHTML, muy simple, utiliza el Framework Prototype para Javascript.

 

Ver Ejemplo

 

Super Mario Kart

Mario Kart es un juego muy popular que logra acoplarse a Javascript utilizando canvas, permite elegir opciones para la calidad de lo gráficos así como también sonido.

 

Ver Ejemplo

 

Super Mario

Con solo 14kb podremos tener a Super Mario como un juego en Javascript, sin emuladores ni nada de eso, muy bien desarrollado.

 

Ver Ejemplo

 

Y, ¿Cual es tu juego favorito en JavaScript?

TOP 5 Editores WYSIWYG para nuestras aplicaciones Web

Los textarea con WYSIWYG (What You See Is What You Get) en nuestras aplicaciones Web dan una facilidad para los usuarios al poder enriquecer más el texto ingresado, ya sea con imágenes, sangría, fondos, color de texto, entre otras opciones que nos brinda esta herramienta.
Es por eso que esta vez posteo una lista con 5 muy buenos editores WYSIWYG que transformaran los simples <textarea> en poderosos editores de texto enriquecido de manera sencilla y rápida.

Yahoo! UI Rich Text Editor

Esta herramienta es un control de interfaz de usuario que reemplaza el tag textarea por un HTML basado en esta librería lo que genera un menú de opciones para realizar múltiples tarea con los textos.

 

Ver Demos

 

TinyMCE

Este popular editor WYSIWYG tiene también muy buenas opciones, cambiando nuestro tradicional textarea por un conjunto de elementos HTML para construir el menú de formato, esta herramienta es muy usada por diversos CMS Open Source, es muy fácil de integrar y opciones para configurar el menú de formato limitando botones.

 

DescargarVer Demo

 

NicEdit

Este editor tiene el objetivo de ser lo más simple y rápido de utilizar para los usuarios, ya que es súper ligero y se puede integrar de manera sencilla en nuestros sitios Web con tan solo 2 líneas de código.

 

DescargarVer Demo

 

CKEditor

CKEditor es muy potente y de una interfaz muy buena también, su similitud a una aplicación de escritorio para la edición de texto como Microsoft Word u OpenOffice es bastante. Este editor es ideal para los desarrolladores al poder proporcionar soluciones distintas con tan potentes funciones que trae este WYSIWYG.

 

DescargarVer Demo

 

openWYSIWYG

Este editor es definitivo para sus aplicaciones Web con formularios que tengan edición de texto, ya que cuenta con características que necesita para que su sistema de administración de contenido sea mucho mejor.
Su configuración es sencilla, se tiene un control total de la configuración del editor, y con solo unas líneas de código lo tendrán en su página Web.
DescargarVer Demo

 

De hecho no son los únicos, si tienes otros muy buenos puedes agregarlos a la lista de TOP comentándolo.

5 tips para escribir tweets retweeteables

Si estas utilizando Twitter para tus negocios, promover tu marca, productos o servicios en tiempo real, es muy importante saber como escribir un tweet que sea retweeteable, y para lograr esto nunca se debe hablar de yo, yo y yo, ya que no funciona, los usuarios están dispuesto a compartir algo que sea de valor, interesante y provocativo, ejm: “Michael Jackson is dead”.
Estos 5 simples tips harán de tus 140 limitados caracteres contenidos muy retweeteables.

1. Siempre incluya un enlace

Puede ser un post de algún blog, una noticia, un video, o una foto, o algo que profundice y aclare mejor el resumen de tu tweet, lo importante es poner dentro del tweet la parte mas importante del contenido del enlace para atraer a mas usuarios.
Para minimizar el enlace puedes utilizar un servicio de acortamiento de url, uno recomendado es bit.ly ya que es el
acortador oficial de Twitter.

2. Nunca utilices los 140 caracteres

Si los utilizas no alcanzara caracteres para retweetearlo, Pete Cashmore de Mashable es un ejemplo a seguir, ya
que en sus tweets utiliza muy por debajo de los 140 caracteres contenido para sus tweets, de esta manera deja
fácil a los usuarios el poder retweetear sin editar el contenido para resumirlo.

3. Escriba tweets con hashtags en tendencias

Poner un hashtag en tu tweet no garantizara que lo encuentren rápidamente, el punto es saber que hashtag esta con tendencia en Twitter, al tener que Tweetear algo y encontrar el debido hashtag para relacionarlo sera más efectivo que nos hagan más retweets.
#php, #web20, #seo, son algunos de los hashtags mas generales para PHP, Web 2.0 y SEO.

4. Añadir algo original al retweetear

Este truco es un buen modo de realizar retweets haciendo un ajuste al original, reduciendo el contenido al tweet para agregar una observación original para aportar algo más y hasta podrá hacer que retweeten a nosotros y no al original, recuerden siempre poner al autor original en nuestros retweets.

5. Llene su BIO y la URL en su cuenta de Twitter

Lo que es el “Acerca de mí” en nuestra Web significa el BIO y la URL en nuestro Twitter, esto proporcionara a sus visitantes poder comprobar su credibilidad y hacer que lo sigan con confianza y fidelidad.
Original de: Mashable.

jQuery Browser Plugin

a href=”http://jquery.thewikies.com/browser/” target=”_blank”>jQuery Browser Plugin es un complemento para jQuery que nos facilita funciones para ver información sobre el navegador del usuario y el Sistema Operativo.
¿Cómo funciona?
Llamando a la función respectiva nos devuelve un objeto JavaScript que contiene toda la información sobre el navegador que se utiliza ($.browser).

También tiene funciones para que nos devuelva el nombre del navegador en formato CSS, lo que significa que usted puede crear clases CSS para navegadores específicos, versiones de navegador, e incluso para cada sistema operativo.
Estas son algunas de las mejores funciones:

  • $.browser.name: Nombre del navegador usado (firefox).
  • $.browser.version: Versión del navegador usado (3.5.3).
  • $.browser.className: Nombre del navegador como clase CSS (firefox3).
  • $.os.name: Nombre del sistema operativo usado (win).

 

Código ejemplo:

document.write($.browser.name+' '+$.browser.version);

 

DescargarVer Ejemplo