CuatroXL

Desarrollo web - Cuatro XL

Archive for February, 2009

Thursday
Feb 12,2009

[queda por traducir]

La publicidad molesta a su publico

Thursday
Feb 12,2009

Por todos es sabido que la publicidad es, en la mayoría de los casos, una molestia. Esto también se aplica al mundo web.

Hoy visitaba la web del diario El país, y vi una entrevista en vídeo que me llamó la atención. La entrevista era en ingles, por lo que llevaba unos sub-títulos para los no bilingües (como yo).

Tenía una imagen como esta:

captura uno

Hasta aquí todo iba bien; pero de pronto aparece la maldita publicidad, tapándome los subtitulo y haciendo que acuerde del que tuvo la genial idea de hacerlo así:

Si algún desarrollador se ve envuelto en hacer un reproductor de vídeo y sus jefes le obligan a poner publicidad; por favor hagan un redimensionado de la película y luego muestren su molesto banner:

Monday
Feb 9,2009

Función para reemplazar una porción de texto.

Función:

<!-- Replace funtion-->
<xsl:template name="replace-string">
    <xsl:param name="str" />
    <xsl:param name="delim" />
    <xsl:param name="newdelim" />
   <xsl:if test="string-length(substring-before($str,$delim)) = 0">
      <xsl:value-of select="$str" />
   </xsl:if>
   <xsl:if test="string-length(substring-before($str,$delim)) > 0">
         <xsl:value-of select="substring-before($str,$delim)" />
         <xsl:value-of select="$newdelim" />
   </xsl:if>
   <xsl:if test="string-length(substring-after($str,$delim)) > 0">
       <xsl:call-template name="replace-string">
         <xsl:with-param name="str" select="substring-after($str,$delim)" />
         <xsl:with-param name="delim" select="$delim" />
         <xsl:with-param name="newdelim" select="$newdelim" />
         <xsl:with-param name="ini" value="1" />
       </xsl:call-template>
  </xsl:if>
</xsl:template>

Ejemplo de uso:

        <xml>
            <title>
                Name__MARCA__Alberto
            </title>
        </xml>
        <xsl:template match="title">
            <xsl:call-template name="replace-string">
              <xsl:with-param name="str" select="." />
              <xsl:with-param name="delim" select="'__MARCA__'"/>
              <xsl:with-param name="newdelim" select="' : '" />
            </xsl:call-template>
            <xsl:value-of select="."/>
        </xsl:template>

Eligiendo color

Monday
Feb 9,2009

Para todo programador, que quiere hacer un diseño minimamente decente, es un dolor de cabeza tener que elegir colores. Algo tan simple como poner un color de fondo y colorear las fuentes puede hacer todo más agradable.

Yo soy un completo negado para combinar colores.

Esta herramienta seguro que me va a ayudar en esta labor


Proceso de maquetación de un botón.

Saturday
Feb 7,2009

Increíble el trabajo de maquetación por parte de Google. Una cosa tan simple, como puede ser la creación de un botón, puede derivar en un estudio meticuloso hasta el último detalle: ahorro de bytes, recudir llamadas al servidor, y tratar de mantener una semántica coherente.

“Yo todavía estaba molesto por la exigencia de una imagen fondo con degradado…”
“En lugar de vincular una imagen con degradado, pensé que podríamos ser capaces de simular un degradado con algunas lineas de color. Con unas pocas tonalidades de color cerca del color de fondo, podríamos conseguir algo que pareciese un degradado. “

Mejor leer el artículo de Douglas Bowman en el que cuenta el proceso de desarrollo que compartió con el equipo de Google.

Recreating the button

Thursday
Feb 5,2009

Pasar parámetros por GET a Flash es una práctica muy extendida; pero no deja de dar dolores de cabeza a los desarrolladores, cuando se trata de una cadena con acentos.

La codificación de http (ASCII hex); es el mismo que usa HTML y Javascript para poder decodificar estas cadenas. Por alguna extraña razón Flash utiliza lo mismo pero a excepción de lo acentos, no comprendo por qué usa una codificación distinta para los acentos.

Vamos a ver esas diferencias:

Flash(ejecutar en el IDE de flash)

trace(escape(’á’)+’ ===> ‘+’á’);
trace(escape(’Á’)+’ ===> ‘+’Á’);
trace(escape(’é’)+’ ===> ‘+’é’);
trace(escape(’É’)+’ ===> ‘+’É’);
trace(escape(’í’)+’ ===> ‘+’í’);
trace(escape(’Í’)+’ ===> ‘+’Í’);
trace(escape(’ó’)+’ ===> ‘+’ó’);
trace(escape(’Ó’)+’ ===> ‘+’Ó’);
trace(escape(’ú’)+’ ===> ‘+’ú’);
trace(escape(’Ú’)+’ ===> ‘+’Ú’);

Javascript(ejecutar en el navegador)

alert(escape(’á’)+’ ===> ‘+’á’);
alert(escape(’Á’)+’ ===> ‘+’Á’);
alert(escape(’é’)+’ ===> ‘+’é’);
alert(escape(’É’)+’ ===> ‘+’É’);
alert(escape(’í’)+’ ===> ‘+’í’);
alert(escape(’Í’)+’ ===> ‘+’Í’);
alert(escape(’ó’)+’ ===> ‘+’ó’);

alert(escape(’Ó’)+’ ===> ‘+’Ó’);
alert(escape(’ú’)+’ ===> ‘+’ú’);
alert(escape(’Ú’)+’ ===> ‘+’Ú’);

La diferencia de resultado es absoluta; no tiene nada que ver. Por lo que la solución solo para por una cosa:

  1. parsear la cedena que vamos a pasar por GET, con la forma que acepta flash
  2. al recibir la variable; vamos a ejecutar la función “unescape” en el flash para poder utilizarla
  3. lamentarse de haber usado flash