Asido: librería PHP para transformar imágenes

Asido es una libería PHP que nos permite modificar imágenes usando diferentes librerías. Actualmente está disponible únicamente para PHP5, pero aún es posible descargarse la versión anterior de la librería para PHP4.
Entre las librerías que admite encontramos a GD2, Magick Wand, Image Magick (vía shell) y Image Magick (vía extensión). Y entre las opciones que nos permite está añadir marcas de agua, redimensionar, cambiar ancho y alto, stretch, fit, enmarcar, convertir a otro formato, girar, flip vertical y horizontal, crop, copiar y pegar, y escala de grises.
Asido
Gracias Innovación Web por el aviso

Consejos para trabajar con el código de otros

Cuando se trabaja en una empresa de desarrollo de software es muy común que entres en un proyecto que ya está empezado, por lo que deberás tratar con un código que no es el tuyo, y que da igual que sea bueno o malo, deberás adaptarte a él, algo que siempre puede dar algún problema. Más problemático es cuando sustituyes al único encargado del código y el traspaso de conocimientos se realiza en un par de horas (algo muy frecuente en las grandes empresas de consultoría).

Para aquellos que se encuentren en esas circunstancias, espero que los consejos que os voy a comentar, sacados de mi propia experiencia en el desarrollo web, os sean de utilidad.

Echa un vistazo preliminar

Aún no sabes cómo es el código, si es bueno o es malo, pero un vistazo preliminar a la estructura de directorios y a los nombres de los ficheros suele darte una idea aproximada de la funcionalidad que pueden tener.

Por muy malo que sea un programador, éste tiene su propia lógica para la nomenclatura, échale un rato a intentar adivinarla y así podrás localizar ficheros de forma más sencilla en futuras modificaciones.

No esperes un diseño MVC claro, quizás ni exista y esté todo mezclado. Tú tienes tu forma de programar, pero aunque para ti sea perfecta, ni quizás lo sea, ni todo el mundo la comparte.

No intentes entenderlo todo de golpe

Lo más seguro es que no debas cambiar toda la aplicación de golpe, por lo que de poco te va a servir empezar a estudiarla completamente y entender todo su significado. Ve por partes, si tienes que hacer un cambio en una parte céntrate en esa parte del código y olvídate del resto.

Cuando te hayas pegado con una parte del código no se te olvidará fácilmente, por lo que si en otra ocasión tienes que volver a tocar esa parte te será más sencillo.

Empieza por el final para llegar al origen

Afortunadamente el resultado del desarrollo web es visible para todos, tan solo debes ver el código HTML para ver qué se ha generado con la aplicación.

Normalmente, las modificaciones que se suelen realizar son del tipo “en tal página falla tal cosa”. Mira el HTML de esa página y encuentra algo que pueda ser exclusivo de ella.

Busca nombres de clases de etiquetas, las cabeceras de las páginas (<h1>..<h6>), textos explicativos. Una vez creas que tienes un texto más o menos exclusivo de esa página busca entre todo el código, por ejemplo en Windows puedes usar GlobalFind.

Debes tener cuidado porque a veces el código no aparece exactamente como lo buscas. Por ejemplo un texto largo puede estar dividido en varias líneas:

$texto = 'Texto largo que el desarrollador ';
$texto .= 'a cortado en líneas para verlo más claro, ';
$texto .= 'aunque sea menos eficiente por tener que ';
$texto .= 'concatenar strings.';

O también puede darse la circunstancia de que el texto se forme por la unión de un texto y una variable:

$clase = array('empleados', 'facturas', 'resumen');
// Algo de código por aquí
echo '<div class="'.$clase[$tipo].'">...</div>';
// Más código

Quizás te encuentres con ficheros de idiomas, y verás que el texto que buscas está asociado a un código, céntrate en ese código y búscalo.

Usa trazas

La lógica del código es de todo menos lógica. Te vas a encontrar con partes de código que no vas a entender por mucho que lo estudies. No es bueno perder el tiempo intentando entender el código al 100%, ya tendrás tiempo para ello.

Cuando te encuentres con un trozo de código que no entiendas, métele trazas a todos los bloques para saber por dónde pasa:

echo 'Empezamos';
if ($condicion1 && $condicion7) {
echo 'Paso por aquí 1';
// código
if ($condicion3 || !$condicion4) {
echo 'Paso por aquí 2';
// código
} else {
echo 'Paso por aquí 3';
// codigo
if ($condicion5) {
echo 'Paso por aquí 4';
}
}
} else {
echo 'Paso por aquí 5';
// código
}
echo 'FIN';

Fijándote en las trazas que devuelva verás que código se ejecuta y así podrás encontrar mejor el error.

Ten en cuenta la base de datos

La BD es muy importante a la hora de localizar información. Mucha gente usa la BD para almacenar los mensajes de error o de información, que serán fundamentales para comprender el funcionamiento de la aplicación.

Localiza dónde se ejecutan las consultas, si hay suerte estarán separadas del resto de código (normalmente a las clases que tratan con la BD se le llama modelos). Si tienes que modificar los datos que devuelve una consulta, aunque no sepas cómo se obtienen esos datos (la sentencia SQL exacta), si que puedes hacerte una idea de las tablas a las que accede. Busca entre los modelos el nombre de esas tablas y filtra por los campos que muestra en la página. Claro que el select * from puede ser nuestro mayor enemigo.

Examina los datos de la tabla para ver si coincide con los datos que se muestran. Un ejemplo sencillo es insertar un registro mediante la aplicación y ver qué se ha guardado en la BD, así entenderás más facilmente qué se guarda en cada campo.

No olvides los ficheros de configuración

En ellos está mucha de la lógica de la aplicación, estudiarlos durante un rato puede aclararnos muchas cosas, como por ejemplo rutas de ficheros, conexiones a la BD, sistema de trazas, clases auto-ejecutables…

Cuidado con las aplicaciones externas

Si programas en Java es posible que no encuentres el por qué de un problema porque quizás la ejecución dependa de un JAR externo. Localízalos y tenlos siempre presentes. Si trabajas con Linux o Unix puede que haya llamadas a la shell. Pasará algo parecido a los JAR, deberás saber dónde están y qué hacen.

Empieza por los cambios sencillos

No intentes poner la aplicación del revés o cambiarla radicalmente nada más empezar con ella. Ve poco a poco, con cambios sencillos, que te hagan enfrentarte con el código y empezar a conocerlo.

Los cambios que puedas realizar en una parte no sabes donde van a poder afectar, por eso debes ir con cuidado y empezando con cosas sencillas, que tendrán menos posibilidades de estropear otras cosas.

Un cambio en varios lugares

Reutilizar código no siempre es una norma para los desarrolladores. Aunque creas que has localizado el lugar dónde debes cambiar el código, no pienses que es el único lugar. Sigue buscando a ver si hay más lugares donde se deba cambiar.

Testea constantemente

No conoces la aplicación y no sabes que puedes estropear cuando tocas algo. Un cambio sin importancia puede hacer que todo falle, ten cuidado si arreglas algo de no estropear otra cosa.

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