Semitransparencia en pngs - y el maldito IE

Aquel webmaster que se precie ya habrá tenido problemas con los png,
las transparencias y el maldito explorador de internet que no cumple
estándares.

Para el que no lo sabe, Png es por "Portable Network
Graphics", o gráficos portatiles para red, creado para mejorar el
formato gif (256 colores, transparencia de mapa de bits.... muy
ochentoso). Además de ser mejores que los gifs, no requieren una
licencia para usarlos (si, todos los programitas que crean gif tienen
que comprar la licencia....). Otra acepción del acrónimo, una recursiva
como nos gusta a los geeks, es "PNG is Not Gif".

Básicamente te
deja tener imágenes de 24 bits color o blanco y negro (con paleta) o
imagenes RGB (no CYMK, pero es para web asi que no hay problema,
verdad?). Tambien usa varios métodos de compresión, entrelazados,
etc,etc.

En definitiva: es el sueño de cualquier diseñador web,
porque podés hacer cosas muy interesantes con ellos (que con jpg o gif
serían bastante molestas o imposibles).

Funcionan bien en todos
los navegadores web, son un estándar con muchos años ya pero, la mala
noticia es que en ie 6 o menor no funcionan las transparencias,
personalmente, yo tengo que hacer sitios que se vean perfecto en varios
browsers, incluyendo ie6 (maldición!), el cual no muestra png con
transparencias a menos que lo obligues.

Ahora a ver como se lo obliga :D

La magia básicamente se logra con AlphaImageLoader, un apestoso parche para cargar bien los png (mencioné que fueron creados para la web?).
La
idea de Micro$oft, para variar fue no usar el estándar ya establecido y
crear un "truquito" para que las cosas anden como deberían.

la magia es como sigue:
lo que en cualquier navegador funciona haciendo esto:

div#imagen_de_fondo {
	width:600px;
	height:400px;
	background-image: url(images/YourImage.png);
	background-repeat: repeat-y;
	position:absolute;
	top: 82px;
	left: 46px;
	padding-left: 25px;
}

en ie 6 funciona agregando esto:

div#imagen_de_fondo {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/YourImage.png,sizingMethod='scale');
}

Y listo! (en teoría!)
Así tenemos backgrounds con png's transparentes. Excelente. aca hay un ejemplo
Falta el tema de los tags img, si usamos una imagen png con transparencia, no va a funcionar.

La solucion a eso:
Reemplazar los img por divs con background.

Probablemente más tarde un post de cómo hacer esto :D

que lo disfruten.




Technorati Tags: semitransparencia, png, web development

Creá Webs Accesibles

A vos, diseñador, programador web, creá webs accesibles!
Y sacate una foto!!


Me sumo a la iniciativa de, como no podia ser de otra manera: creawebsaccesibles.com.ar/

Hay mucha información y fotos, la idea es, primero que todo, difundir la usabilidad y accesibilidad como parámetros de buen diseño.

Bueno, en el sitio está toda la info, incluso el folletito para bajar y sacarte una fotito :D




Technorati Tags: accesibilidad, usabilidad

Directorio de Delivery en córdoba

Buenas! Queria contarles de uno de mi nuevo proyecto, Blupo, que por ahora es un directorio de delivery de córdoba, donde pueden encontrar desde taxis y pizzas hasta kioscos y peluquerías (si, peluquerías para llevar!) a domicilio.
Y si no lo encontrás, lo agregás.
Y como le queremos poner todas las pilas, por cada negocio que se agregue te damos un numerito, y en abril
sorteamos un mp4!! (por lotería de córdoba, para que sea todo limpio y transparente)
fuaaaaaaa (como el paté de fuaaa)!!!

Bueno, la verdad es que espero que sea super útil para todos los vagos de córdoba, y que se prendan a la iniciativa. y si alguno tiene un comentario, crítica, insulto o lo que sea, que no dude en mandarlo, que nos hace felices :D



Technorati Tags: delivery, cordoba, web 2.0, ajax

Por Fin: Editor de blogs externo

Excelentisimo!!! lo que estuve esperando durante tanto tiempo!
Estoy subiendo este post desde ScribeFire, un excelentísimo plugin de firefox, que me permite escribir, dar formato y postear entradas al blog. Genial.
Algunas de las features principales:

• Edicion WYSIWYG
• Edicion HTML
• Vista Previa en vivo
• Puedo poner titulo (en algunos otros no podia!)
  
• tags
• crear nuevos blogs
• manejar mis blogs
• etc,etc,etc

Todo esto para el nuevo blogger de google, que tenia unos problemillas de compatibilidad.

En definitiva: Se la re banca, me encantó y voy a seguir usandolo.

Hasta la proxima.


Technorati Tags: herramientas, blog, extensiones, firefox

Powered by ScribeFire.

Frameworks de desarrollo web

He probado algunos (no todos) de los frameworks web que hay en el mercado, para Java (Struts), PHP (Cakephp), y Ruby (Ruby on Rails). Paso a enumerar ventajas y desventajas segun mi humilde opinion:

* Struts: Ventajas: ninguna, es pesado, hay que configurar uno o más xmls gigantes, en fin, no me gusta para nada, y no lo volvería a usar.

* Cakephp: Muy buen entorno inspirado en rails, anda bien con php 4 y 5, anda en casi cualquier hosting (todos soportan php). Desventajas: es php, es un lenguaje bastante feo. y le falta la capacidad sintáctica de ruby como para tener un framework realmente excelente.

* Ruby On Rails: La diva de los entornos de desarrollo web,
excelente, super cómodo, elegante, rápido, extensible, etc etc. desventajas: no todos los hostingss soportan ruby on rails. Mi hosting (bluehost) si. y la verdad que anda bastante lindo.


Conclusión: Estoy volviendo al poderoso Ruby on Rails. Subiendo la productividad y la calidad de los sitios :)

El Truncate de cakephp me rompe el layout

Y si, para un sitio que hice (un blog), en la pagina de listado tenia el primer pedazo de cada post cortado a, digamos 600 caracteres... el problema: abria un div y no lo cerraba y me cortaba justo al medio. Como estoy usando cakephp termine con la siguiente solucion:

agregar en views/helpers/advtext.php

class AdvtextHelper extends Helper {
 /**
 * Truncates text.
 *
 * Cuts a string to the length of $length and replaces the last characters
 * with the ending if the text is longer than length.
 *
 * @param string  $text String to truncate.
 * @param integer $length Length of returned string, including ellipsis.
 * @param string  $ending Ending to be appended to the trimmed string.
 * @param boolean $exact If false, $text will not be cut mid-word
 * @param boolean $considerHtml If true, HTML tags would be handled correctly
 * @return string Trimmed string.
 */
 function truncate($text, $length = 100, $ending = '...', $exact = true, $considerHtml = false) {
        if ($considerHtml) {
            // if the plain text is shorter than the maximum length, return the whole text
            if (strlen(preg_replace('/<.*?>/', '', $text)) <= $length) {
                return $text;
            }
            
            // splits all html-tags to scanable lines
            preg_match_all('/(<.+?>)?([^<>]*)/s', $text, $lines, PREG_SET_ORDER);
    
            $total_length = strlen($ending);
            $open_tags = array();
            $truncate = '';
            
            foreach ($lines as $line_matchings) {
                // if there is any html-tag in this line, handle it and add it (uncounted) to the output
                if (!empty($line_matchings[1])) {
                    // if it's an "empty element" with or without xhtml-conform closing slash (f.e. 
)
                    if (preg_match('/^<(\s*.+?\/\s*|\s*(img|br|input|hr|area|base|basefont|col|frame|isindex|link|meta|param)(\s.+?)?)>$/is', $line_matchings[1])) {
                        // do nothing
                    // if tag is a closing tag (f.e. )
                    } else if (preg_match('/^<\s*\/([^\s]+?)\s*>$/s', $line_matchings[1], $tag_matchings)) {
                        // delete tag from $open_tags list
                        $pos = array_search($tag_matchings[1], $open_tags);
                        if ($pos !== false) {
                            unset($open_tags[$pos]);
                        }
                    // if tag is an opening tag (f.e. <b>)
                    } else if (preg_match('/^<\s*([^\s>!]+).*?>$/s', $line_matchings[1], $tag_matchings)) {
                        // add tag to the beginning of $open_tags list
                        array_unshift($open_tags, strtolower($tag_matchings[1]));
                    }
                    // add html-tag to $truncate'd text
                    $truncate .= $line_matchings[1];
                }
                
                // calculate the length of the plain text part of the line; handle entities as one character
                $content_length = strlen(preg_replace('/&[0-9a-z]{2,8};|&#[0-9]{1,7};|&#x[0-9a-f]{1,6};/i', ' ', $line_matchings[2]));
                if ($total_length+$content_length > $length) {
                    // the number of characters which are left
                    $left = $length - $total_length;
                    $entities_length = 0;
                    // search for html entities
                    if (preg_match_all('/&[0-9a-z]{2,8};|&#[0-9]{1,7};|&#x[0-9a-f]{1,6};/i', $line_matchings[2], $entities, PREG_OFFSET_CAPTURE)) {
                        // calculate the real length of all entities in the legal range
                        foreach ($entities[0] as $entity) {
                            if ($entity[1]+1-$entities_length <= $left) {
                                $left--;
                                $entities_length += strlen($entity[0]);
                            } else {
                                // no more characters left
                                break;
                            }
                        }
                    }
                    $truncate .= substr($line_matchings[2], 0, $left+$entities_length);
                    // maximum lenght is reached, so get off the loop
                    break;
                } else {
                    $truncate .= $line_matchings[2];
                    $total_length += $content_length;
                }
                
                // if the maximum length is reached, get off the loop
                if($total_length >= $length) {
                    break;
                }
            }
        } else {
            if (strlen($text) <= $length) {
                return $text;
            } else {
                $truncate = substr($text, 0, $length - strlen($ending));
            }
        }
        
        // if the words shouldn't be cut in the middle...
  if (!$exact) {
            // ...search the last occurance of a space...
   $spacepos = strrpos($truncate, ' ');
   if (isset($spacepos)) {
                // ...and cut the text in this position
    $truncate = substr($truncate, 0, $spacepos);
   }
  }
  
        // add the defined ending to the text
  $truncate .= $ending;
  
        if($considerHtml) {
            // close all unclosed html-tags
            foreach ($open_tags as $tag) {
                $truncate .= '';
            }
        }
  
  return $truncate;
        
 }
}
?>

el helper, se usa igual que html->truncate, pero con un parametro extra, que en true toma en cuenta el html para le truncado, y hasta lo cierra bien y todo.


<?=$advtext->truncate($text,600,'[...]',false,true)?> asi lo uso yo.

Aplicación de escritorio para postear a blogger

Hoy me puse a jugar un rato con python, (despues de tanto huirle), y la verdad que hace las cosas bastante faciles... muy a pesar mío.En Este momento estoy usando mi primer aplicación hecha en este lenguaje, es una gui en gtk para postear a blogger. Este post de hecho, esta creado con mi programilla, que si bien muy básico, me deja escribir y previsualizar al mismo tiempo, y ya tiene funcionalidad de postear entradas con titulo, texto y etiquetas

El proyecto empezó cuanto intentéusar un programa que supuestamente sirve para esto mismo,BloGTK, pero lamentablemente no funciona con blogger. Intente usar otros, pero ninguno andaba con blogger y la verdad no estan muy mantenidos. Así que huce lo que debía, le mande un mail al señor de blogtk, pero al no haber respuesta, y al ganarme mi curiosidad, lo rehice de cero...

Hay muchisimas cosas para agregarle, estaria muy bueno hacerlo bien, y aumentar la utilidad al máximo, el tiempo dirási esto sigue mantenido. Hasta incluso que si a alguien le parece útil, se podría armar un proyecto (GPL, obviamente) para que se siga manteniendo y mejorando esto.

Bueno, es hora de probar el boton "Save", asi que si este post aparece en mi blog, es que la magia ha funcionado. Espero que si