|

Instala tu propia Wikipedia

ByLuis

WikipediaWikipedia, para aquellos que no la conozcan, es una enciclopedia libre escrita de forma colaborativa, que usa la tecnología wiki. Está realizada mediante el software llamado MediaWiki, creado especialmente para Wikipedia, el cual podemos instalarnos en nuestro sitio web.
Los requerimientos mínimos son: Apache, PHP, MySQL y el propio MediaWiki. Yo recomiendo, al igual que en Lifehacker, el uso de WAMP Server, para instalar Apache, PHP y MySQL de forma sencilla, yo es el que uso para mis cosas y es muy sencillo y va muy bien, a parte incluye un gestor de BD para facilitar la tarea.
Puedes ver el resto de la explicación de como instalar tu propia Wikipedia en Lifehacker, está bastante bien explicado, paso a paso, lo cual se agradece mucho.
Vía / Lifehacker

Similar Posts

| |

Elige. Tu dominio con o sin www

ByLuis

www-si-o-no.jpg Uno de nuestros hábitos, aunque muchos dicen pijerías :), es mostrar los dominios en una versión, es decir con o sin www lo que impide la duplicación de contenidos en 2 url’s diferentes.

Las razones para evitar la duplicidad son variadas. Desde posicionamiento en buscadores a unificar el pagerank. Aunque Choan y Víctor lo resumen muy bien en castellano:

En realidad, lo importante es que el usuario pueda acceder a nuestro sitio con o sin el www. por delante. Ojo, con un pero bien grandote: debemos facilitar el acceso a través de cualquiera de las dos direcciones —en beneficio del usuario—, pero nuestros contenidos deben estar disponibles solamente en una de ellas.

Choan Gálvez

En la mayoría de casos estamos optando sin www. Las encontramos superfluas y totalmente innecesarias cuando verbalizas una dirección web.

Dando por hecho que tu web está en Apache crea o edita el archivo .htaccess de tu raíz FTP sustituyendo example y .com por lo que corresponda a tu dominio:


# Para que el dominio salga siempre sin www.
RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.example\.com$ [NC]
RewriteRule ^(.*)$ http://example.com/$1 [R=301,L]

Y si te gusta lo clásico:


# Para que el dominio salga siempre con www.
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [R=301,L]
| | |

Laboratorio: marcar búsquedas de Google

ByLuis

Algo que suele ser interesante es cuando realizamos una búsqueda en Google, que en la página a la que accedemos desde los resultados de Google, nos resalte las palabras que hemos buscado, aunque la barra de Google ya te da la oportunidad de hacerlo.

El proceso es sencillo, tenemos que capturar la URL desde la que nos llaman, dada por $_SERVER[‘HTTP_REFERER’], obtener las palabras que hemos puesto a buscar el Google (vienen en el parámetro q) y después capturar la salida, como se realizaba en el caso de la caché, y cuando tenemos lo que vamos a enviar por la salida, sustituir cada una de las palabras por el código HTML que queramos que resalte la palabra en cuestión.

<?php
// Filtro para el array para quedarnos solo con la QUERY
function filtro($val) {
return strpos($val, 'q=') === 0;
}
// Obtenemos la página desde la que nos llaman
$url = $_SERVER['HTTP_REFERER'];
// Nos quedamos solo con los parámetros
$url = parse_url($url);
$url = $url['query'];
// Nos quedamos solo con el parámetro que nos interesa
$parametros = split("&", $url);
$cadena = array_filter($parametros, "filtro");
$cadena = urldecode(substr(array_shift($cadena), 2));
// Cacheamos la salida
ob_start();
?>
...
Página HTML
...
<?php
// Recuperamos el buffer de salida
$html = ob_get_clean();
// Por cada palabra de la cadena de búsqueda, la sustituimos por el HTML necesario para resaltar
$palabras = split(" ",$cadena);
foreach ($palabras as $palabra) {
$html = preg_replace('/('.$palabra.')/i', '<b>$1</b>', $html);
}
// Mostramos el buffer por la saliad
echo $html;
?>

Código

| |

W3C: fallos de accesibilidad (II)

ByLuis

Seguimos con los fallos de accesibilidad que se suelen cometer en el desarrollo web, que nos ofrece la W3C y que empezamos a tratar hace unos días.

Mostrar imágenes con información importante mediante estilos

Se trata de usar una imagen que contiene información (por ejemplo para los enlaces del menú) y mostrarla como fondo de un elemento y que no haya un texto que indique el contenido de la imagen.

Una solución es escribir el texto pero no hacerlo visible, para ello usaremos la propiedad text-ident, si le damos un valor negativo elevado el texto desaparecerá por la izquierda. Por ejemplo, tenemos una imagen titulo.png que tiene el título del blog con un diseño especial, lógicamente queremos que se vea así por temas de diseño e imagen. Ahora bien, si solo mostramos la imagen, no somos capaces de leer el contenido de esta. Por ello tendremos que hacer lo siguiente para que el texto aparezca sin que haya estilos y con estilos solo aparezca la imagen:

h1 {
background: url(titulo.png);
width: 200px;
height: 100px;
text-indent: -10000px;
}
<h1>Título</h1>

Usar el estilo blink sin el mecanismo para parar el parpadeo

Esta es corta, no uses jamás text-decoration: blink. Y si por un casual no te queda otra posibilidad que usarlo, crea un script que pare el parpadeo a los 3 segundos.

Usar un applet o un flash que parpadee sin el mecanismo para pararlos

Lo mismo que el punto anterior, pero enfocado a applets y a animaciones Flash.

Usar subtítulos que omiten parte del diálogo o sonidos importantes

Si vas a ofrecer un sonido, una conversación y no muestras los subtítulos con todo el contenido (conversación y sonidos destacados), no se trata de un buen subtítulo y puede haber información importante que se escape.

Más información

| |

Incluir CSS a tu RSS

ByLuis

Algo sencillo y que queda muy bien a la hora de mostrar nuestras hojas de estilo, claro, que si usamos una aplicación que las muestra según sus propios estilos, no conseguimos nada.

Se trata de añadir una línea indicando el xml-stylesheet en las RSS:

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://dominio.com/rss.css" ?>
...

Y luego definir los estilos, en el ejemplo del autor, a parte de formatear la salida, oculta aquellas partes del RSS que no quiere que aparezcan:

rss {
display: block;
font-family: verdana, arial;
}
title {
display: block;
margin: 5px;
padding: 2px;
color: gray;
border-bottom: 1px solid silver;
}
link {
display: block;
font-size: small;
padding-left: 10px;
}
item {
display: block;
padding: 2px 30px 2px 30px;
}
docs {
display: block;
background-color: #ffffe6;
margin: 20px;
text-align: center;
padding: 5px;
color: #7f7f7f;
border: 1px solid silver;
}
/* Elementos ocultos */
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

Ejemplo

Adding a CSS StyleSheet to your RSS Feed

Vía / dzone

| | |

Apps Mania, un Techcrunch en formato CSS Mania

ByLuis

Hoy hemos lanzado, Apps Mania, la cuarta nanopublicación de Blogs Media (la tercera en inglés).

Captura de Apps Mania

¿Qué es Apps Mania?

Nos gusta decir que es un Techrunch en formato CSS Mania. Es decir un showcase de aplicaciones web.

Hacía meses que teníamos la idea en mente y después de múltiples retrasos hoy ve la luz siendo conscientes de que mientras tanto han aparecido sitios similares que no pasan de ser meros directorios, ya que no tienen el nivel de actualización que tendrá Apps Mania ni incluyen información que nosotros sí contemplamos como: descripción, Elevator Pitch, URL Demo, URL API, tags…

Al igual que en CSS Mania, solo aceptaremos publicidad contratada. La sinergia entre ambas propuestas, puede resultar interesante.

Apps Mania.

Suscripción: feed de Apps Mania

|

Nuevo traductor estadístico árabe-inglés

ByLuis

google.pngGoogle, siguiendo con su intención de proveer de información de todo el mundo, aunque esté escrita en otro idioma, intenta superarse en una de sus aplicaciones más importantes, el traductor. En vez de usar ligüistas que definan vocabularios y gramáticas, indexan gran cantidad de textos escritos en un idioma y luego aplican métodos estadçisticos de aprendizaje para conseguir las traducciones, con muy buenos resultados. Esto ha permitido sacar a la luz un nuevo traductor árabe-inglés e inglés-árabe, lo cual me lleva a decir que no dejes de visitar nuestra página شبكه احساس.com.
Statistical machine translation live
Vía / Digg