CSS framework: 960 Grid System

3 de October de 2008 | Categoría: CSS, Diseño, Recursos

Normalmente no suelo usar frameworks para desarrollar sitios, pero para evitar complicaciones y problemas de compatibilidad esta vez decidí usar el 960 Grid System.

Para empezar, antes que nada un framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado (Wikipedia ™).

Este sistema se basa en un ancho de página de 960 px, el ancho ideal según muchos diseñadores. Lo bueno es que este ancho es perfectamente divisible entre 12 o 16 columnas con lo que podremos ir combinando diferentes anchos y estructuras a lo largo de la página sin problemas.

El framework nos facilita la taréa de crear la página dandonos todo el código CSS necesario para que vallamos creando las distintas columnas en nuestra web de forma que todas queden perfectamente ordenadas en su lugar y con un margen de 10 px por los lados. Lo que hace que cada columna tenga una separación de 20 px. Continuar leyendo »

 

Lista de últimos temas escuchados en Last.fm en PHP

17 de September de 2008 | Categoría: Recursos, Tutoriales

Gracias a la API de Last.fm y a esta entrada de Carlos Martínez. El código usa el sistema Plain (Texto) de la API que nos permite acceder a los datos en forma de archivo de texto, y luego, posteriormente por medio de PHP lo adaptamos para mostrarlo de forma correcta.

<?php
function get_remote_file($url, $timeout = 10) {
    $ch = curl_init();
    curl_setopt ($ch, CURLOPT_URL, $url);
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $file_contents = curl_exec($ch);
    curl_close($ch);
    return ($file_contents) ? $file_contents : FALSE;
}
$usuario = "usuario";
$datos = get_remote_file("http://ws.audioscrobbler.com/1.0/user/$usuario/recenttracks.txt");
$datos = utf8_decode($datos);
$linea = explode("\n", $datos);

echo "<ul id=\"lastfm\">";
for ($i = 0; $i <10; $i++) {
    $parte = explode(",", $linea[$i]);
    echo "<li>".str_replace("?","-",$parte[1])."</li>";
    }
echo "</ul>";
?>

 

Pattern Tap la inspiración ordenada por secciones

19 de August de 2008 | Categoría: Diseño, Recursos

Pattern Tap nos permite buscar la inspiración por secciones, es decir: no se trata de la clásica galería en la que se van aglomerando webs con un diseño inspirador si no que nos va mostrando por categorías webs que destacan en algunos puntos.

Por ejemplo, si queremos incluir en nuestro diseño unas tablas o un footer podemos dirigirnos a Pattern Tap y nos mostrará una categoría en la que veremos webs con un buen footer o un buen diseño de tablas.

 

Escogiendo la combinación de colores ideal para nuestra web

24 de July de 2008 | Categoría: Diseño, Recursos

A mi, personalmente, una de las cosas que más quebraderos de cabeza me provocan a la hora de diseñar una web, es escoger la combinación ideal de colores. Parece sencillo, pero, es realmente difícil encontrar 3 o 4 colores que combinen perfectamente entre sí y que encajen en nuestro diseño.

Gracias a dios, hay muchas herramientas que ayudan a los diseñadores a superar este problema. Tenemos los clásicos sitios como Colourlovers o Kuler que nos ofrecen una serie de paletas listas para usar en nuestra web.

Pero, luego hay otras herramientas como ColorJack que nos permiten seleccionar nuestros colores ideales de forma personalizada. Nosotros solo tenemos que elegir un color, el principal y luego dependiendo de como configuremos el selector nos dará 5 colores más que combinen a la perfección con el nuestro.

 

Mejora el selector de colores de Mac OS Leopard con Hex Color Piker

21 de July de 2008 | Categoría: Recursos

Hace tiempo hablé sobre los problemas que tiene el selector de colores de Mac OS Leopard desde el punto de vista del desarrollador. Ahora, me encuentro con Hex Color Picker, una aplicación, o más bien un plugin, que nos da la posibilidad de seleccionar colores hexadecimales desde el mismo selector de colores nativo de Leopard, de esta forma se suplen todos los problemas y se convierte en un selector de colores realmente útil.

Sin duda a partir de ahora, un plugin indispensable para mi Mac OS.

 

Ooble: un theme muy configurable para Wordpress

15 de July de 2008 | Categoría: Recursos, Wordpress

Este es el primer theme que he desarrollado con la idea de liberarlo, en cuanto al diseño he decidido hacer algo parecido a el diseño de este blog, y he preferido centrarme en su configuración y funcionamiento. Continuar leyendo »

 

Plantillas para boletines de E-mail

29 de June de 2008 | Categoría: General, Recursos

Una de las formas más efectivas y populares para fidelizar usuarios es la de los boletines vía e-mail. Con ellos conseguimos hacer que el usuario vuelva a nuestro sitio al leer el boletín.

Uno de los problemas que tienen esta clase de técnicas, aparte de muchas veces ser considerados Spam, es el crear un diseño que se vea adecuadamente en cualquier tipo de cliente de correo, ya sea vía web o de escritorio.

Para ello, MailChimp ha creado esta interesante lista de plantillas gratuitas optimizadas para que se vean en cualquier cliente de correo, de esta forma solo tendremos que modificarlo un poco y adaptarlos a nuestro gusto y objetivos.

De todos modos, aunque estén probados en la mayoría de clientes siempre es recomendable añadir la clásica frase "Si no puede ver el email correctamente haga clic aquí." para ahorrar problemas.

 

PSD2CSS Online: pasa tus diseños de Photoshop a CSS en segundos

30 de April de 2008 | Categoría: CSS, Diseño, Recursos

PSD2CSS OnlinePSD2CSS Online es un web que nos permite pasar nuestros diseños hechos en Photoshop a CSS y Html de forma automática y Online. Simplemente tendremos que subir nuestro archivo en formato PSD y automáticamente nos mostrará el resultado, un archivo Html con el CSS incrustado en él.

Además nos permite indicar varios tipos de capas en Photoshop incluyendo un guión y una pequeña palabra al final de su nombre para que la web las trate de una forma o de otra:

  • Con _text podremos definir aquellas capas que son tipo texto.
  • _form, _inputtext, y _submit nos permitirán autogenerar formularios.
  • _jpg conseguiremos que esa capa se guarde como una imagen en formato jpg.
  • Con _link indicaremos que se trata de un enlace. Y con _linkover conseguiremos hacer enlaces con Roll Overs. (Enlaces que cambian al situarnos encima)
  • Con _center centraremos la capa marcada.
  • _bkgnd nos permite que la capa sea un fondo de un div.

Yo lo he probado con un diseño que tenía guardado desde hace algún tiempo y el resultado no ha sido perfecto, he de admitir que el PSD probablemente no estaba bien construido, ni si quiera use ninguna de las propiedades que se indican arriba, fue solo una prueba rápida, pero aún así repito que aunque no fue perfecto el resultado fue bastante bueno y con solo unos retoques podría dejarlo tal y como quiero.

 

5 Generadores de Themes para Wordpress que te facilitarán el trabajo

25 de April de 2008 | Categoría: Recursos, Wordpress

A la hora de crear un theme yo siempre he preferido usar el método normal, pero hay gente, que por falta de conocimientos o costumbre prefieren utilizar estos generadores de themes que siempre facilitan la tarea.

En Pagechain han publicado una pequeña lista con 5 generadores de themes, cuatro online y uno offline, que os pongo a continuación:

  1. CSSEZ
  2. Templatr
  3. WP Theme Gen
  4. WP Pal
  5. WordPress Theme Gen (Offline)
 

Icojoy libera mini iconos gratuitos para cualquier proyecto.

23 de April de 2008 | Categoría: Recursos

Icojoy ha liberado dos conjuntos de mini iconos de forma completamente gratuita y además nos permiten hacer un uso completamente libre de él en cualquier tipo de proyecto.

El primer pack esta compuesto por 26 iconos de 16x16 disponibles en formato .ico, .icns, .tif, .gif, .bmp o .png y en color o blanco y negro. Son ideales para Blogs o Redes sociales.

El segundo son 26 iconos en blanco y negro a 16x16 pixeles. Estos están disponibles en formato .ico, .icns, .tif o .png.

Vía | Webappers.