Dale forma al texto con CSS

Uno de los problemas con los que nos podemos encontrar a la hora de maquetar una página web con CSS, es la de realizar formas complejas con el texto, requiriendo de trabajar con una buena cantidad de capas. Para facilitar este trabajo, desde CSS Text Wrapper nos dan varias posibilidades, permitiéndonos de forma gráfica darle forma al texto, y generando por nosotros todo el código necesario para añadirlo directamente a la web, y de tres formas distintas: todo el código en un único archivo HTML, separando el código HTML del CSS, o por JavaScript.

The LOST Underground Art Show

Lost es una serie de televisión estadounidense que narra las aventuras de un grupo de supervivientes a un accidente aéreo ocurrido en una misteriosa isla del Océano Pacífico. Esta serie se encuentra entre las más solicitadas por internet, y tiene un gran número de fans que realizan todo tipo de obras y trabajos afines a ésta.

En este caso nos encontramos con The LOST Underground Art Show, un proyecto donde podemos encontrarnos con varias obras relacionadas con los protagonistas de la serie, animales y objetos reflejados en diferentes obras como cuadros o figuras, todos ellos a la venta.

Leer más

Un sistema Captcha Drag And Drop

Los sistemas captchas son utilizados para evitar que robots, también llamados spambots, puedan utilizar ciertos servicios. Por ejemplo, para que no puedan participar en encuestas, registrarse para usar cuentas de correo electrónico (o su uso para envío de correo basura) o, más recientemente, para evitar que correo basura pueda ser enviado por un robot (el remitente debe pasar el test antes de que se entregue al destinatario).

La típica prueba consiste en que el usuario introduzca un conjunto de caracteres que se muestran en una imagen distorsionada que aparece en pantalla. Se supone que una máquina no es capaz de comprender e introducir la secuencia de forma correcta por lo que solamente el humano podría hacerlo. Pero con el avanzado software de reconocimiento de caracteres que existen hoy en día, es cada vez más habitual encontrarse con aplicaciones que pueden saltarse eficazmente este sistema.

Para ayudar a proteger tus páginas web de los spammers, podemos encontrarnos con nuevos sistema que de una forma intuitiva ayudan a verificar la “humanidad” de la persona que introduce la información. Ajax Fancy Captcha es un plugin de jQuery que funciona de una forma totalmente distinta, pidiéndonos arrastrar y soltar un objeto solicitado a un círculo.

Su instalación es rápida y sencilla, permitiéndonos fácilmente configurar las opciones básicas y realizar la traducción de los textos que se incluyen, y todo ello con un tamaño mínimo del script.

Página web | Descarga

Coderun: entorno de desarrollo online

Coderun nos da la posibilidad de trabajar sobre un entorno de desarrollo similar a Visual Studio, con la particularidad de realizar todo el trabajo en el navegador con HTML dinámico y AJAX. De forma online y sin instalar absolutamente nada, podemos empezar a programar nuestros proyectos de ASP.NET, servicios Web, Silverlight, bibliotecas de clases, sitios PHP, aplicaciones facebook y código JavaScript. Y todo gratis y sin ni siquiera registrarse.

http://coderun.com/ide/

Emprise Javascript Chart, gráficas profesionales

Emprise Javascript Chart, es una librería Javascript que permite generar gráficas profesionales de forma sencilla y rápida.

Entre las funcionalidades que nos encontramos cabe destacar:

1. La gran cantidad de tipos de gráficos disponibles
2. La compatibilidad con la mayoría de navegadores actuales.
3. Fácilmente ampliable mediante plugins Javascript
4. Personalizable

Aunque se trata de una librería comercial, la versión free ofrece una gran cantidad de opciones que podríamos usar en nuestras aplicaciones.

Ejemplos | Descargar de la versión gratuita

Vía aNieto2k

Librería JavaScript Raphaël

Raphaël es una pequeña librería JavaScript que pretende simplificar el trabajo con gráficos vectoriales en la web. Si quiere crear sus gráficos, imágenes o texto por ejemplo, se puede lograr de una forma rápida y sencilla con esta librería.

Raphaël utiliza las Recomendación del SVG W3C y VML como base para la creación de gráficos. Esto significa que cada objeto que cree es también un objeto DOM, para que pueda conectar con controladores de eventos JavaScript o modificarlo más adelante.

Raphaël actualmente es compatible con Firefox 3.0 +, Safari 3.0 +, Opera 9.5 + e Internet Explorer 6.0 +.

Redirección 301

Una redirección 301 nos sirve para redireccionar a una nueva URL la página actual. Es un estado del servidor, al igual que el error “404: Not Found” o el “‘500: Internal Server Error”, que configura una página web para que, cuando llegue el robot del buscador, éste sepa que la página se ha movido definitivamente a una nueva dirección.

Mediante esta redirección, se traspasarán al mismo tiempo los valores de PageRank de Google y de enlaces externos, de los que ya disponíamos en nuestra vieja dirección.

¿Y cómo implementamos este estado?. Podemos realizaros de diferentes formas:

1.- Configuración en el Servidor

Mediante el archivo httpd.conf de Apache, debemos configurar el código siguiente, indicando los valores correctos de viejodominio y nuevodominio. Procura de todas formas realizar antes una copia de seguridad del archivo, por si acaso.

RewriteEngine On
 RewriteCond %{HTTP_HOST} !^viejodominio\.com [NC]
 RewriteRule (.*) http://nuevodominio.com/$1 [R=301,L]

2.- Mediante el fichero .htaccess

Se debe crear el archivo .htaccess con el contenido que se incluye a continuación, y guardarlo en el directorio raiz del “viejo dominio”, o en un directorio concreto sobre el que queremos aplicar la redirección.

Redirect 301 /catalogo http://nuevodominio.com/catalogo

3.- Mediante programación

Indicar la redirección con algún lenguaje de programación del lado del servidor; por ejemplo con PHP el código sería el siguiente:

<?php
 header("HTTP/1.1 301 Moved Permanently", TRUE, 301);
 @header("Location: http://nuevodominio.com/");
?>

Más información en WebExperto

Panel deslizante con jQuery

Gracias a webkreation, podemos disponer de un magnífico panel deslizante realizado con jQuery, que nos permitirá “esconder” un panel con la funcionalidad que desees: un formulario de acceso a una zona privada, texto, imágenes, etc., mostrándose de una forma limpia y agradable al pulsar sobre el texto “Abrir panel”. Es totalmente configurable y muy sencillo de instalar, con la posibilidad de descargarlo desde su propia página como plugin para WordPress.

Sliding Panel | Demo | Descarga

Traducciones automáticas con la API de Google

Todos sabemos que las traducciones automáticas de textos no suelen ser tan perfectas o fieles al texto original como las traducciones realizadas por un nativo, pero estas aplicaciones pueden sacarnos muchas veces de un aprieto; y en estos momentos, el traductor de Google es posiblemente el traductor gratuito más eficaz, y que además pone a nuestra disposición una API sobre la que podemos trabajar y hacer nuestras cosillas.

Mediante esta API, podemos traducir texto de una página web automáticamente, lo que nos ayudará a crear páginas en varios idiomas, o traducir parte de algún texto con suma facilidad. A continuación os dejo un código de ejemplo con su uso.

<script type="text/javascript">

/* Inicio del codigo para realizar la traduccion */
google.load("language", "1");

function initialize() {
/* 'contenido' es el div, dentro del cuerpo de la pagina, donde vamos a introducir el texto y su traduccion */
var contenido = document.getElementById('contenido');
/* Introducir el texto y su traduccion en el div 'contenido' */
contenido.innerHTML = '<div id="text">Este es un texto de prueba.<\/div><div id="translation"/>';

/* Seleccionar el texto a traducir. */
var text = document.getElementById("text").innerHTML;

/* Indicamos en el primer parametro la variable que contiene el texto a traducir */
/* Indicamos el origen y destino de los idiomas para la traduccion */
/* en este caso como es de español a ingles, incluimos 'es' y 'en' */
/* si la segunda variable la dejamos vacia, se autodetecta el idioma */
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);

</script>

Demo | Descarga

Scripts de autocompletado de texto para web

Para facilitar la entrada de texto, los scripts de autocompletado son una gran ayuda. Se suelen utilizar sobre todo a la hora de buscar palabras en un sitio web, se han convertido en uno de los mejores elemento de interacción con el usuario, y últimamente la mayoría de los sitios más famosos como google, youtube o msn ya lo tienen implementado.

La mayoría de los scripts que nos podemos encontrar por internet, están realizados con JavaScript o AJAX, y su implementación en la página no suele resultar muy complicada; por ello, es una opción interesante de incluir para ayudar a nuestros usuarios en sus búsquedas.

Tokenizing Autocomplete Text Entry

A fancy Apple.com-style search suggestion

AutoSuggest

Google suggest style filter

Ajax Powered AutoComplete

Leer más