DivisionSoftware Blog

Miguel de Icaza

I was using Subtext as my blog engine. At first, it was fun, but with a recent server change I get rid of .Net 1.1. This decision forced me to upgrade to the last version of Subtext.

The process was a little complex (at least on paper) and I have no time or energy to do it. I thought about writing a small app, and using the old DB, but it will be time consuming and surely the blog will stagnate as I couldn’t find the time to update the app.

The solution was: Tumblr. Why? Mostly because it’s ability to use a custom domain. Nice. Now time to post all the old posts here.

Recently I misunderstood a question in StackOverflow and begin to investigate if it is possible to show several items in the same line.

At first, I thought that you must show the items either vertically or horizontally, but that is not the case, you can change the full panel where the items are shown by changing the ItemsPanel

<ListBox ItemsSource=”{Binding}”>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation=”Horizontal” Width=”610” />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation=”Horizontal” Width=”200” Margin=”0”>
                <TextBlock Text=”{Binding Path=NoteName}” Width=”120” />
                <TextBlock Text=”{Binding Path=NoteDate, StringFormat=d}” Width=”80”/>
            </StackPanel>
        </DataTemplate>                   
    </ListBox.ItemTemplate>
</ListBox>

In this case, I change the Panel for a WrapPanel that allows me to show 3 items in the same line.

As an exercise to the reader: What margin or border prevents to set the width of the panel to 600?

I need a simple way to show an image button, with only one image source, but like that the user have a good UI experience, and feel the button over, pressed, etc.

      <Button Style="{StaticResource ImageButton}" Height="16" Width="16">
             <Image Source="left-arrow.png"></Image>         </Button>  

Option 1. Use Opacity to simulate different states
In the style, I replace all the button template with the image, and add several triggers with different opacity levels and margin options (to simulate pressed effect)

  <Style x:Key="ImageButton" TargetType="Button">         <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="Button">                     <ContentPresenter x:Name="img" ContentTemplate="{TemplateBinding Content}" Opacity=".8"/>                     <ControlTemplate.Triggers>                       <Trigger Property="IsKeyboardFocused" Value="true">                          <Setter TargetName="img" Property="Opacity" Value="1" />                       </Trigger>                       <Trigger Property="IsDefaulted" Value="true">                       </Trigger>                       <Trigger Property="IsMouseOver" Value="true">                         <Setter TargetName="img" Property="Opacity" Value="1" />                       </Trigger>                       <Trigger Property="IsPressed" Value="true">                           <Setter TargetName="img" Property="Margin" Value="1,1,-1,-1" />                       </Trigger>                       <Trigger Property="IsEnabled" Value="false">                         <Setter TargetName="img" Property="Opacity" Value=".2" />                       </Trigger>                     </ControlTemplate.Triggers>                 </ControlTemplate>             </Setter.Value>         </Setter>     </Style>  

Option 2. Use glow
But sometimes, using 0.8 for the normal state of the image does not look ok.
So I create a different style using glow for the MouseOver trigger (you should have two, one for the images with light background, with black glow; and another for dark backgrounds)

<Style x:Key="ImageButtonGlowOnLight" TargetType="Button">          <Setter Property="Template">              <Setter.Value>                  <ControlTemplate TargetType="Button">                      <ContentPresenter x:Name="img" ContentTemplate="{TemplateBinding Content}" Opacity="1"/>                      <ControlTemplate.Triggers>                        <Trigger Property="IsKeyboardFocused" Value="true">                          <Setter TargetName="img" Property="BitmapEffect">                            <Setter.Value>                              <OuterGlowBitmapEffect GlowColor="Black" GlowSize="5" Noise="0" Opacity=".5" />                            </Setter.Value>                          </Setter>                        </Trigger>                        <Trigger Property="IsDefaulted" Value="true">                        </Trigger>                        <Trigger Property="IsMouseOver" Value="true">                          <Setter TargetName="img" Property="BitmapEffect">                            <Setter.Value>                              <OuterGlowBitmapEffect GlowColor="Black" GlowSize="5" Noise="0" Opacity=".5" />                            </Setter.Value>                          </Setter>                        </Trigger>                        <Trigger Property="IsPressed" Value="true">                            <Setter TargetName="img" Property="Margin" Value="1,1,-1,-1" />                        </Trigger>                        <Trigger Property="IsEnabled" Value="false">                          <Setter TargetName="img" Property="Opacity" Value=".2" />                        </Trigger>                      </ControlTemplate.Triggers>                  </ControlTemplate>              </Setter.Value>          </Setter>      </Style>

Por favor, continuen bajando música ilegal

Como parte de los muchos sombreros que tenes que usar cuando sos desarrollador de sitios web, me llegó a las manos un DVD de un cliente que deseaba subirlo a la web para postearlo en el sitio y todos lo pudieran ver.

Este procedimiento ya lo hice una vez, pero como olvidé totalmente como se hacía, decidí documentarlo en este post.

Parte 1. “Ripiando” el DVD (Copiandolo a un archivo)

Luego de extensa busqueda, el mejor programa gratis (¿quien quiere pagar?) para ripiar (¿como se dirá en español?) el DVD es DVDx, que es gratuito y la única limitación con la versión “Pro” es que esta versión no permite ripiar DVDs comerciales con la protección anti-copia (DECCs), que en este caso no es un problema.

¿No es muy lindo no? En fin..por suerte lo tengo que usar una vez muy de vez en cuando.

Sigamos, los iconos de la toolbar están en el orden que los tenemos que presionar para terminar el trabajo

1. Seleccionar el DVD root (Generalmente la carpeta VIDEO_TS) y luego un “title” que son cada uno de los capitulos dentro del DVD. Por supuesto que depende de cada DVD, muchas veces tenes que probar para ver cual es el que queres ripiar.

2. Eso te lleva directamente al la función “Input settings”

Lo más importarte a seleccionar aquí es el track de audio y si deseamos algún subtitulo. Con suerte tiene solo uno y no tenemos que tocar nada de esta ventana que da miedo.

3. Ahora tenemos que seleccionar que vamos a generar en la ventana “Output settings”

Esta es la ventana más importante y más difícil. Aquí seleccionamos con que formato vamos a extraer el DVD y los formatos disponibles dependen de los “codex” que tengamos instalados en nuestra maquina.
Como el destino de los videos es enviarlos a YouTube, no me preocupo mucho por el tamaño, ya que YouTube lo va a transcodear una vez que lo suba al sitio.
Entonces, elijo WMV (el codex de Windows Media Player) que es fácil de manipular y lo aceptan casi todos los programas.

Si se quiere reducir el tamaño o mejorar la calidad, en esta ventana estan las opciones para hacerlo. Se puede cambiar el tamaño y la cantidad de cuadros por segundo.

Por suerte nos va dando un estimado de cuanto tiempo va a llevar y el tamaño final estimado.

4. Seleccionar destino de los archivos (“Select destination”)

Esta si es sencilla. Apretamos “Browse” y seleccionar un directorio donde se va a generar el archivo. Acordarse de chequear que tenga espacio libre suficiente.

5. Finalmente presionar “Encode” que empieza el proceso.

Parte 2. Subiendo el archivo a Internet

Ahora que tenemos el video en un archivo tenes que subirlo a la web, para ellos primero debemos elegir cual servicio de los muchos existentes es el que preferimos.

Aquí hay una linda lista con los servicios que hay y las restricciones que tiene cada uno

Anteriormente siempre hubiera preferido Google Video, porque no tenia casi ningún limite y se veía más “profesional” o más de negocios que YouTube, pero han cancelado el servicio y ahora te mandan a su adquirido servicio, YouTube, el rey de los sitios de video.

El problema es que solo tiene un límite de 10 minutos por video, y es muy probable que el nuestro se extienda de ese tiempo, para ello debemos cortar nuestro video y publicarlo por separado.

Buscando en internet un software para cortar el video es bastante difícil, siempre hay mil millones de opciones, muchas intentan pareces gratuitas pero no son, mucho engaño dando vuelta (Me pasó de probar el programa Easy Split Video, para que al final de todo el trabajo de seleccionar los tiempos de corte, me dió un error diciendo que no tenía la versión paga, jodete y perdé todo tu trabajo).

Finalmente, sin muchas ganas, decidí probar el Windows Movie Maker, que viene incluído en Windows Vista, y sorprendenteme me sirvió muy bien para la tarea.

Solo tenemos que localizar un punto del video donde quede bien cortar y apretar el boton “Split” y la pelicula nos queda dividida en dos

Luego arrastramos cada parte hacia el StoryBoard

y exportamos ese pedazo del video usando el menú “File” y luego “Publish Video”.
Publicar el video tiene varias opciones, es recomendable dejar el video con la misma definición que venía y dejar que YouTube haga las optimizaciones necesarias.

Si estas trabajando con archivo XAML en Visual Studio, ya sabés lo lento que es cada vez que accedes a uno, por más que haya chequedo la opción para abrirlo siempre en “XAML View”

La solución definitiva a este problema la vi hace poco en este post. Consiste en decirle a VS que abra los XAML con el editor de codigo común!

Hay que hacer lo siguiente:

1. Clic de la derecha en cualquier archivo XAML en el cuadro Solution Explorer
2. Select “Open With…”
3. Select “Source Code (Text) Editor”
4. Click on “Set as Default”
5. Click OK
6. Listo!

El equipo de MS SQL Server realmente perdió el tren de simplicidad luego de la versión 2000.

En SQL 2000 para instalar solo tenias un par de simples y claras opciones como “Instalar desktop tools” e “Instalar Server”

Ya SQL 2005 la complicó bastante con un nuevo instalador especifico con varias cosas raras, pero la versión 2008 ya se pasaron de la raya.

En sistema Windows Vista, con todos los componentes de windows Update actualizados, hay que

1. Arrancar el proceso de instalación (que ya tarda mucho tiempo)

2. Luego de descomprimir los archivos temporales, te dice que te falta el Windows Installer 4.5 Que tiene distintos archivos para instalar para Vista y para XP

3. Reiniciar

4. Volver a ejecutar el instalador, volver a esperar, esperar que descomprima los temporales

5. Finalmente nos presenta un pantalla donde podemos elegir un montón de opciones donde solo una es “Instalación”

6. Luego ejecuta un programa “Setup Support Rules” donde me dice que me falta PowerShell. Lo bueno de este paso es que podemos dejar el instalador ejecutando mientras bajamos e instalamos PowerShell.

7. Bajar PowerShell (también tiene archivos diferenciados para Vista y Xp) previo instalación de Genuine Windows Validation Tool (¿para eso lo habrán hecho requido en Sql 2008?)

8. Instalar Powershell

9. Presionar el boton “Re-Run” y ahora si, luego de unos 25 clicks más, podemos finalizar la instalación.

Hoy estuve solucionando un problema con ThickBox que hacía que la ventana de ThickBox no se vea centrada cuando scrolleaste un poco para abajo y practicamente no quedaba visible

El problema solo ocurría en IE7, incluso IE6 funcionaba bien y el problema es específico porque en esta página tengo que usar un DOCTYPE viejo, porque es una página que viene de hace mucho en desarrollo.

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN”>

Este DOCTYPE hace que IE7 sea tratado como un IE6, pero en una parte del codigo de ThickBox lo deja afuera, sin considerar que puede tener otro DOCTYPE.

ThickBox.js linea 284

if (!(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6 
    $(“#TB_window”).css({ marginTop: ‘-’ + parseInt((TB_HEIGHT / 2), 10) + ‘px’ });
}

Corrigiendo esta linea a

if (!(jQuery.browser.msie && jQuery.browser.version <= 7)) { // take away IE6 

solucionó el problema.

Ojo que no es una solución global para el problema, pero dentro de este proyecto en particular, todo solucionado.

Hoy  estuve luchando toda la tarde con una página en particular de un sitio, que no respondía al

<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1”>

Todo el sitio tenía seteado el mismo header, pero sin embargo esta página se negaba a obedecerlo.

Luego de varias idas y venidas, varias busquedas en Google incluídas, empezé a descuartizar la página en pedacitos hasta quedar la más minima expresión que continuaba dando el problema.

Resulta que la página tenía un INCLUDE de un archivo nuevo, que fue creado en Visual Studio 2008, el cual crea el archivo como UTF-8 y no ANSI como estaba el resto del sitio.

Lo que no se sabe bien, porque la página cambia su enconding a UTF-8 solo por un INCLUDE, pero bueno, abriendo el archivo con Notepad y grabandolo como ANSI solucionó el problema.

Toda la tarde perdida…