pon css en tu vida!

css, html, javascript, php y mucho mas…

¡Estrenando portfolio!

23.07.10 Cómo se hizo, divagaciones Sin comentarios, aún...

Más de cuatro años después de empezar en esta profesión y tras varias versiones que nunca llegaron a ver la luz, hace tan solo unos días que esta online mi portfolio.

Este portfolio nace sin ninguna pretensión profesional, simplemente por la obligación moral de tener mi propio espacio en internet, de tener esa presencia “física” en internet y no estar escondido detrás de un nick (aunque bien es cierto que nunca renunciaré ni renegaré de él).

Entrando un poco en la parte técnica, el portfolio esta montado bajo un Drupal con un tema “personalizado”, creado a partir del tema Zen. Este tema utiliza al 100% HTML5 y muchas de las características de CSS3 que ya están disponibles para los navegadores decentes (sacándole partido a aquellas ocho horas en las que Jose Florido estuvo “dándonos la brasa“).  Se me queda la espinita de no haber utilizado una versión más reciente de jQuery, pero hasta que no salga la versión 7 de Drupal, tendremos que seguir conformándonos con la 1.2.6.

Y por el momento, poco más… Contento por el trabajo realizado y por un diseño medio decente para ser “made in me”.

Espero que este sea el principio para retomar las actualizaciones del blog, pues la última actualización fue en diciembre de 2009, aunque no prometo nada. Tengo varios temas en la cabeza, me gustaria encontrar el tiempo y las ganas suficientes para poder dejarlos aquí plasmados.

Mudanza a FeedBurner para publicar en Twitter

15.12.09 google Sin comentarios, aún...

A partir de hoy, cambiamos de TwitterFeed a FeedBurner como servicio para publicar las actualizaciones del blog en Twitter.

Aprovechando que Google ha lanzado su acortador de urls goo.gl, y como nunca he estado contento con el servicio de TwitterFeed, pues matamos dos pájaros de un tiro.

Para publicar las actualizaciones de vuestro blog en Twitter utilizando FeedBurner, tan solo hay que configurar el servicio a través de Publicize > Socialize.

mostrar-ocultar-password-jquery

Hace unos meses, a raíz de un de un artículo de Jakob Nielsen, comentaba la posibilidad de hacer más usables los formularios de login mediante un checkbox para mostrar y ocultar la contraseña.

Y aunque la idea no me parecía descabellada, pasó de largo por mi cabeza como tantas y tantas cosas que vemos al día por Internet.

Sin embargo, después de tener la posibilidad utilizar un móvil para conectarme a Internet, me doy cuenta de cuan engorroso puede llegar a ser meter nuestra contraseña utilizando el teclado del móvil, y lo frustrante que es no saber si lo que has introducido es la contraseña correcta.

El resultado de todo esto es un pequeño script en jQuery que nos permite mostrar y ocultar el valor de un input de tipo password.

DEMO | DESCARGAR EJEMPLO

Más info, después del salto ;)

[Más]

Gestión de incidencias en Eclipse con Mantis y Mylyn

11.12.09 Cómo se hizo, PHP Sin comentarios, aún...

A raiz del post de Brandon Savage “Why tracking bugs in personal projects matters“, he decidido seguir su recomendación y montar mi propio Bug Tracker para mis proyectos personales.

A través de los comentarios he conocido Mylyn, una herramienta para integrar los gestores de incidencias en Eclipse, el IDE que utilizo para desarrollar.

Para completar el círculo, y como Bug Tracker utilizaré Mantis, un gestor de incidencias desarrollado en PHP que utiliza MySQL como motor de bases de datos. Podría haberme decantado por Bugzilla, Jira o Trac, pero el hecho de conocer ya el funcionamiento de Mantis, así como que esté desarrollado en PHP, han decantado la balanza. Quizás no sea el mejor, pero para lo que necesito por el momento, cumplirá su función.

La instalación

Instalando Mantis

Empezaremos instalando el gestor de incidencias Mantis. Para ello, nos bajamos la última versión estable del proyecto (en estos momentos, la 1.1.8), desde aquí: http://www.mantisbt.org/download.php

La instalación de Mantis es sencilla:

1. Creamos la base de datos que utilizará la aplicación en MySQL.

2. Modificamos el archivo config_inc.php.sample, concretamente a partir de la línea 40:

# --- database variables ---------

# set these values to match your setup
$g_hostname      = "localhost";
$g_db_username   = "mantisdbuser";
$g_db_password   = "";
$g_database_name = "bugtracker";
$g_db_type       = "mysql";

# --- email variables -------------
$g_administrator_email  = 'administrator@example.com';
$g_webmaster_email      = 'webmaster@example.com';

# the "From: " field in emails
$g_from_email           = 'noreply@example.com';

# the return address for bounced mail
$g_return_path_email    = 'admin@example.com';

Las variables $g_hostname, $g_db_username, $g_db_password y $g_database_name, son las típicas de cualquier configuración para conectar con MySQL. $g_db_type por su parte, lo dejaremos tal cual está, ya que por el momento tan solo soporta mysql.

Las cuentas de email de las líneas inferiores, las configuraremos al gusto, para el envío-recepción de los emails correspondientes.

3. Una vez finalizada la modificación de este archivo, guardamos los cambios y lo renombramos. Quitaremos el .sample del final, para quedarnos tan solo con config_inc.php.

4. Ya hemos terminado la configuración. Ahora tan solo tendremos que seguir los pasos de la instalación, que se realiza desde http://servidor-mantis.com/admin/install.php.

5. Por último, y como medida de seguridad, es recomendable eliminar del servidor la carpeta admin.

Instalando Mylyn en Eclipse

El siguiente paso es instalar Mylyn en Eclipse. Como siempre, nos vamos al menú Help > Install New Software, y añadimos esta url: http://download.eclipse.org/tools/mylyn/update/e3.4/. Seleccionamos los complementos deseados (en Mylyn Integration podéis desmarcar el de C/C++ y Java si nos los vais a necesitar) y continuamos hasta finalizar la instalación. Reiniciamos Eclipse y seguimos

Conectando Mylyn con Mantis

Para acabar, instalaremos el plugin Mylyn-Mantis, necesario para que Mylyn reconozca las incidencias generadas en Mantis. Para ello, seguimos los mismos pasos que hemos realizado para instalar Mylyn, recogiendo los paquetes necesarios de esta url: http://mylyn-mantis.sourceforge.net/eclipse/update/. Instalamos el conector y volvemos a reiniciar Eclipse.

Importar las incidencias de Mantis a Eclipse

Ya solo nos queda conectar Mylyn con el servidor donde hemos instalado Mantis. Para ello, mostramos el panel Task List en Eclipse desde Window > Show View > Other, y dentro de la carpeta Tasks, encontraremos Task List. Es importante no confundir este panel con el propio de Eclipse, Tasks, ya que no tienen la misma utilidad. El nativo de Eclipse recoge los TO-DO, DONE, etc. que marcamos en el código.

new-query

Pinchamos con el botón derecho sobre el panel, y seleccionamos New > Query.

add-task-repo

A continuación, seleccionamos Add Task Repository, y seleccionamos el de Mantis.

En la ventana que nos aparece a continuación, seleccionaremos en el desplegable Server la opción Mantis Connector 1.1.0 or greater, modificamos la url que nos aparecerá en su lugar (http://your.domain.com/api/soap/mantisconnect.php) por la de nuestro servidor, y terminamos de configurar el resto de parámetros (incluido nuestro usuario de Mantis).

query-mylyn

Para finalizar, le damos un nombre a la Query, seleccionamos el proyecto creado en Mantis del cual queremos importar las incidencias, y seleccionamos un filtro (lo más lógico es elegir uno que devuelva todas las incidencias de ese proyecto abiertas asignadas a nuestro usuario).

Para crear un filtro, podemos hacerlo desde el propio Mantis realizando una búsqueda avanzada.

Finalizamos el proceso, y ya es el propio Mylyn quien se encarga de importar todas las incidencias que cumplan el filtro a nuestro Eclipse.

Ahora tan solo nos queda trastear con él para explotar todas sus posibilidades.

Seguiremos informando ;)

Seguridad en Zend Framework

27.07.09 PHP, Zend Framework Sin comentarios, aún...

Últimamente, he estado poniéndome al día en todo lo que se refiere a la seguridad a la hora de programar una aplicación web. Temas como el session fixation, SQL injection, etc…

En programania, Luis Artola ha publicado el enlace a una presentación de Stefan Esser acerca de la seguridad en Zend Framework que corresponde a la presentación que ofreció en la Dutch PHP Conference el pasado mes de Junio.

Muy interesante para todos los que andamos tocando Zend Framework, pues se tratan temas importantes como son:

  • XSS
  • CSRF
  • Seguridad en consultas SQL
  • Validación y filtrado de las entradas
  • Manejo de las sesiones

No entra en profundidad en ningún tema (al menos en las diapositivas), pero puede ser un buen punto de partida.

Descargar presentación: Secure Programming With The Zend Framework [PDF]

Vía | programania.net

Todos estamos acostumbrados a ver señalizados los enlaces externos con la típica flecha.

Algo no tan común, y que quería añadir al blog desde el principio, era la de señalizar el idioma de los enlaces externos. Desgraciadamente, en el mundo web el 80% de los contenidos de calidad están en ingles, y hoy en día todavía hay gente a la que esto le supone un problema.

Por ello, he decidido que en este blog se señalizarán aquellos enlaces que lleven a páginas en otros idiomas que no sean castellano, tanto por código como visualmente.

Para señalizar el idioma en del enlace mediante el HTML, es realmente sencillo. Tan solo deberemos utilizar el atributo hreflag

<a href="#" title="Titulo del enlace" hreflang="en-US">Enlace</a>

El atributo hreflang proporciona a los agentes de usuario información sobre el idioma del recurso del otro extremo del vínculo, igual que el atributo lang proporciona información sobre el idioma del contenido o de los valores de los atributos de un elemento.

Ahora, para mostrar la bandera del idioma, utilizaremos el pseudo-selector :after junto con el selector [attr|=val]

a[hreflang|='en']:after {
content: url(images/gb.png);
margin-left: 3px;
vertical-align: middle;
}

El selector [attr|=val] se utiliza para seleccionar elementos cuyo atributo sea exactamente “val” o empiece por “val” seguido inmediatamente por un guión “-”. Este selector se creó para utilizarlo en el atributo hreflang de los elementos a, por lo que si fue creado especialmente para esto, ¿no vamos a desperdiciarlo, verdad?

Marcando nuestro html correctamente, y mediante una sencilla regla de CSS, ya tendremos señalizados aquellos enlaces que, en este caso, dirijan a páginas en inglés.

Un ejemplo:
Enlace a google.es, en castellano
Enlace a la W3C, en inglés

Documentación.

Selectores por atributos en CSS

Vínculos en HTML

Sistema de rating con jQuery.

16.07.09 CSS, Cómo se hizo, jQuery 2 Comentarios

Uno de los primeros posts que escribí en este blog, fue un tutorial para crear un sistema de valoración por css.

Ese sistema nos puede interesar cuando no necesitamos la valoración del usuario, y tan solo queremos mostrar un ranking estático de forma mucho más visual de lo que podría ser el típico numero de 1 a 5.

Hoy, para cerrar el círculo, vamos a ver como crear otro sistema de valoración, esta vez utilizando jQuery.

sistema-rating-jquery

- VER DEMO - | - DESCARGAR EJEMPLO -

[Más]

Ponte al día con HTML5.

13.07.09 HTML5 1 Comentario

Con la salida de Firefox 3.5, parece que ha estallado entre los que nos dedicamos al mundo web la “fivefever”, también conocida como “volerse loco por un lenguaje que, en teoría, aún le quedan 13 años para estar acabado”.

Fuera de bromas, si quieres estar al día de que es lo que se cuece en el “nuevo” HTML5, que ya está soportado por Firefox 3.5 y Safari 4, aquí tienes una recopilación de lo mejor que se ha publicado estos días:

Cheat Sheet para HTML5 en PDF | Smashing Magazine

HTML5 y CSS3, las técnicas del futuro | Nettuts+

Geolocalización en Firefox 3.5 | Mozilla Hacks

HTML5 vence a XHTML2 | W3C

Todas las novedades de HTML5 | Anexom

Tag <video /> de HTML5 | aNieto2k

html5Doctor, te ayuda a implementar HTML5, hoy!

html5gallery, hermana de html5doctor, es una galería de páginas realizadas utilizando HTML5

Google Wave, el primer proyecto serio que utilizará HTML5.

¿Conocéis algún otro enlace que debería estar en la lista?

Aunque no creo que existan datos oficiales, creo que si no todo el mundo, el 95% de los que nos dedicamos al mundo web utilizamos Firebug.
Personalmente, ¡no soy capaz de imaginar cómo maquetar una web sin utilizarlo!

Una de las funcionalidades que echo en falta es poder ver el CSS en formato plano. Me explico:
Cuando durante la maquetación modificas propiedades de 4 o 5 elementos, después me resulta muy engorroso tener que acordarme de qué he hecho, y dónde.
Y, ¿a que viene todo esto?

Ayer descubrí una extensión para firefox, que si bien no está destinada a reemplazar a firebug, puede ser un gran complemento.

Phoenix permite editar el código CSS y Javascript de cualquier web, y ejecutar esas modificaciones para observar los resultados. También podremos ver el código HTML, tanto el original como el generado después de ejecutar el javascript. Eso sí, no podemos hacer modificaciones en el HTML.

Phoenix. Complemento para Firefox

Pero eso no es todo, Phoenix nos muestra los archivos CSS y js que se cargan en la página y su tamaño. Su editor de código, que colorea la sintaxis, es capaz de comprimir y minificar cualquier CSS o javascript, y también hacerlo a la inversa. Cualquier script de javascript comprimido (con packer ) o minificado (minify), Phoenix es capaz de descomprimirlo para que sea perfectamente legible.

Podremos ver en vivo los cambios que realicemos, tanto en CSS como en javascript. No tan “en vivo” como con Firebug, pero sí después de activarlo a través de “Execute CSS” o “Execute JS”.

Por último, Phoenix también permite guardar en nuestro ordenador los archivos.

Recordad que Phoenix está todavía en versión experimiental, por lo que, dicho finamente, tiene licencia para pegar todos los petardazos que quiera :) Sin embargo, a mí todavía no me ha fallado en los días que llevo utilizándola.

Eso sí, aún tiene un problema con la codificación de caracteres, al menos en los CSS: > que convierte en &gt; , etc…

Sin embargo, es una extensión totalmente recomendable, con la que se pueden hacer grandes cosas si se acompaña con firebug, y alguna que otro add-on interesante.

Animaos a probarla, y contadme que os ha parecido.

Web del proyecto Phoenix.

Descarga la extensión para Firefox Phoenix.

Vía @vladocar

Hace un par de días, encontré esta comparativa entre tres de los sistemas que podemos utilizar en PHP para cachear grandes arrays de datos , comprimiendolos y almacenándolos en archivos.

Es este artículo, se utilizan 3 métodos distintos:

La prueba para obtener a un ganador entre estos tres métodos fué la siguente:

Se utilizaron 5 conjuntos de datos, con diferentes tamaños (de memoria utilizada): 904B, ~18kB, ~250kB, ~4.5MB and ~72.5MB.

A estos conjuntos se los sometió a 10 codificaciones/decodificaciones, calculando el tamaño del archivo generado, y el tiempo tardado en relaizar cada operación.

optimizacion-big-array

Click para ampliar

Los resultados son bastante reveladores:

  1. El método con mayor ratio de compresión es JSON.
  2. Hasta que no lidiamos con cantidades “ingentes” de datos ( más de 30Mb), los mejores resultados se obtienen con serialize/unserialize.
  3. A partir de los 30Mb, el rendimiento de serialize/unserialize disminuye casi exponencialmente.
  4. A partir de los 30Mb, JSON se convierte en el método más eficaz.

Más información sobre cómo y dónde se realizó la comparativa, así como más gráficas, en el artículo original: Cache a large array JSON serialize or var_export