6 formas de hacer un diseño destacable

A la hora de hacer diseños mucha gente puede opinar sobre ello mejor que yo, pero a mí estos consejos me han gustado. Está claro que en muchos diseños no se pueden usar, pero para algunas circunstancias sí son interesantes de aplicar.

  • Fondos de pantalla grandes: los fondos de pantalla grande pueden hacer que el diseño resalte, a parte de que son fáciles de añadir.consejos1.png
  • Layout original: no es la primera vez que veo diseños con secciones de tamaños que superan el ancho y alto del navegador y que para acceder a cada sección hay que hacer un scroll progresivo (mediante javascript). Son originales y en algunos casos muy acertados. En el ejemplo que os pongo, cada color es una sección y el tamaño original tiene un ancho de 6000px.consejos2.png
  • Navigación creativa: la navegación puede dar mucho juego para mejorar el diseño, ya sea mediante rollovers u otras cosas. Eso sí, ante todo que prime la usabilidad. En el ejemplo que os paso los menús van a juego con los colores de la calle.consejos3.png
  • Minimalismo: aunque por ahora se ha tratado de consejos con un gran diseño, eso no implica que un gran diseño tenga que ser aparatoso, puede ser perfectamente minimalista, lo cual hace que llame mucho la atención.consejos4.png
  • Logo: está claro que un buen logo hace que te represente y además te diferencie.
  • Layout horizontal: aunque la gente está acostumbrada al scroll vertical, este tipo de diseño puede llegar a ser muy atractivo, aunque haya gente que lo odie.consejos6.png

6 Methods to Make Your Website Standout

Feedeliza: convierte tu blog en una red social

Acabamos de lanzar Feedeliza en Bitacoras.com, un widget por el cual podemos añadir un módulo con el contenido de otros blogs (registrados en Bitacoras.com).
feedeliza.jpg
El contenido de los blogs se puede obtener mediante una búsqueda geolocalizada, una busqueda normal o por canales, mostrando las entradas de los blogs que tengo registrados en Bitacoras.com, o mediante los blogs de los usuarios a los que sigo en Bitacoras.com.
captura_feedeliza.jpg
También disponemos de un plugin para WordPress que lanzaremos la semana que viene.
Una competencia amistosa de Feevy
Feedeliza

SupoSE: búsquedas en el repositorio de SVN

Subversion Repository Search Engine (SupoSE) es un buscador implementado en Java que nos permite encontrar contenido dentro de nuestro repositorio SVN. Indexa todos los ficheros (menos los binarios) y ayuda a encontrar lo que quieres en todos los ficheros de texto, como por ejemplo los scripts de nuestras aplicaciones, en documentos OpenOffice…
No me queda muy claro si permite indexar ficheros Word, Excel y parecidos y si admite buscar en el historial del repositorio, en la página no lo indican muy bien.
SupoSE
Sea como fuera, es una buena herramienta a tener en cuenta.

API de micURL

Los compañeros de Blogsmedia han sacado a la luz el API para su acortador de URLs micURL.

Está basado en una llamada GET a una URL:

http://micurl.com/api.php?url=[url]

Por [url] se entiende la URL que se quiere acortar y que debería estar codificada para no tener problemas con los ampersands (&).

Devuelve tres posibles valores:

  • 1 si hay error
  • 2 si se ha superado el número de peticiones
  • url acortada (http://micurl.com/micurlvalue)

API de micURL

TJPzoom: zoom mediante Javascript

Un buen Javascript que permite añadir zoom a nuestras imágenes. El script añade una ventana con marco sombreado a la imagen en la que se ve el zoom, pudiendo moverla por toda la imagen.
jszoom.png
Si hacemos drag hacia arriba el zoom aumenta, hacia abajo disminuye, hacia la derecha la ventana aumenta y hacia la izquierda disminuye. Además permite utilizar otra imágen con mayor resolución para evitar el pixelado.
TJPzoom
Vía / WebAppers

Listado de directorio HTTP mediante PHP

Cuando queremos que nuestro servidor web muestre los ficheros y directorios que hay en un directorio dado (algo que se debería evitar por defecto), nos encontramos con que el diseño o la estructura no es la que deseamos.
phplisting.png
Si queremos personalizar esta página mediante PHP podemos usar una librería que nos permite recrear la página por defecto, añadiendo otras características como lectura de zips, posiblidad de borrar ficheros y previews de imágenes y vídeos.
PHP Directory Listing Script
Vía / With Tech Eyes

Comet y el HTML5

Uno de los problemas con los que nos enfrentamos al intentar desarrollar una aplicación en Comet es que hay que simularlo, ya que los navegadores aún no admiten la posiblidad de recibir información directamente del servidor (push). En la especificación de HTML5 nos encontramos con los eventos enviados por el servidor (server sent events) y el elemento event-source, el cual representa el destino de los eventos producidos por el servidor.

El elemento event-source tiene el atributo src que indica la URL que se procesará, la cual se llamará una vez el elemento haya sido añadido al documento. Para poder recibir la información, el Content-type de la respuesta debe ser application/x-dom-event-stream, teniendo un formato parecido a:

Event: test
Target: p
data: data

Un ejemplo de código para el cliente sería el siguiente:

<p>It should say "PASS" below:</p>
<p id="p">FAIL (script did not run)</p>
<script>
document.addEventListener("click", update, false)
function update(e) {
pass = e.target.id == "x"
document.getElementById("p").firstChild.data = pass ? "PASS" : "FAIL"
}
</script>
<event-source src="support/sse-target.php?target=p&event=click" onclick="update(event)" id="x">

Por ahora solo está implementado en Opera, aunque otros navegadores ya están trabajando en ello. Esperemos que se vuelva un elemento común en todos los navegadores para poder desarrollar aplicaciones web mucho más interesantes.

Más información

links for 2008-03-23

Usar Skype mediante PHP

No lo he podido probar, y aún así las funcionalidades están un poco limitadas. Pero se puede usar Skype mediante PHP, aunque necesitaremos:

Un ejemplo sería el siguiente:

<?php
// Event sink:
class _ISkypeEvents {
function AttachmentStatus($status) {
echo ">Attachment status $status\n";
}
function CallStatus($call, $status) {
echo ">Call $call->id status $status\n";
}
}
// Create a Skype4COM object:
$skype = new COM("Skype4COM.Skype");
// Create a sink object:
$sink =& new _ISkypeEvents ();
$sink->convert = $skype->convert();
// Connect to the sink:
com_event_sink($skype, $sink, "_ISkypeEvents");
// Create a conversion object:
$convert = $skype->convert;
$convert->language = "en";
// Start the Skype client, minimized and with no splash screen:
if (!$skype->client()->isRunning()) {
$skype->client()->start(true, true);
}
// If the user status is not "online", change user status to "online":
if ($skype->currentUserStatus() == $convert->textToUserStatus("OFFLINE")) {
$skype->changeUserStatus($convert->textToUserStatus("ONLINE"));
}
// Create a user object
$user = $skype->user("echo123");
echo "User " . $user->handle . " online status is " . $convert->onlineStatusToText($user->onlineStatus) . "\n";
// Place a call
$call = $skype->PlaceCall($user->handle);
// Wait for the call to be "in progress" and report an error if:
while ($call->status <> $convert->textToCallStatus("INPROGRESS")) {
if ($call->status == $convert->textToCallStatus("FAILED") ||
$call->status == $convert->textToCallStatus("REFUSED") ||
$call->status == $convert->textToCallStatus("CANCELLED") ||
$call->status == $convert->textToCallStatus("FINISHED") ||
$call->status == $convert->textToCallStatus("BUSY"))
die ("Call status " . $convert->callStatusToText($call->status));
else
com_message_pump (500);
}
// Send dtmf tones:
com_message_pump (10000);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "0";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "1";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "2";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "3";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "4";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "5";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "6";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "7";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "8";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "9";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "#";
com_message_pump (500);
if ($call->status == $convert->textToCallStatus("INPROGRESS")) $call->dtmf = "*";
// Finish the call:
if ($call->status <> $convert->textToCallStatus("FINISHED")) $call->finish();
//Sleep:
com_message_pump (1000);
?>

Example Call.php