Conectar a la base de datos desde JSP

3.9.08. Por ooscarr (ooscarr)

Netbeans

Con JSTL, conectarse a una base de datos es sencillo y no requiere todo ese peligroso código Java que antes producía dolores de cabeza y frustración.

Preparación

Luego de crear el proyecto JSP y antes de conectar a la base de datos, hay que instalar las librerías Java para la base de datos.

  1. Vamos a las propiedades del proyecto, en la sección Librerías presionamos el botón Add Library... (Agregar librería...)

    Panel de propiedades del proyecto en Netbeans

  2. Importar

    Importar librería en Netbeans

  3. Seleccionamos la librería de PostgreSQL (o Mysql, según...)

    PostgreSQL JDBC Driver
    Aprovechar de agregar la JSTL si no ha sido incluida.

  4. Add Library (Agregar Librería)

    Add Library

  5. OK

Conexión

Luego creamos un JSPF para la conexión

  1. Nuevo archivo > JSP

  2. Le ponemos un nombre...

    Nuevo archivo JSP(F) en Netbeans
    Nos aseguramos que el archivo quede en la carpeta WEB-INF/jspf

El árbol de archivos del proyecto indicando Web Pages > WEB-INF > jspf > conexion.jspf

conexion.jspf

El código del archivo conexion.jspf contendría sólo y nada más que:

<sql:setDataSource driver="org.postgresql.Driver"
 url="jdbc:postgresql://locahost:5432/usuario"
 user="usuario"
  password="contraseña"
 var="bdatos" />

* Si se utiliza Mysql, cambiar parte de la segunda línea por jdbc:mysql://
** Si el servidor se encuentra en otra máquina, cambiar la parte locahost:5432 por la IP y el puerto correspondiente.

La conexión se guarda en una variable var="bdatos" para poder ser usada después en el código.

Código

Ya en el código JSP, primero agregamos el tag sql

<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>

Y después llamamos a la parte de la conexión como siempre con:

<%@include file="/WEB-INF/jspf/conexion.jspf" %>

Por ejemplo, el código completo de una página con una consulta simple sería:

index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Página JSP</title>
 </head>
 <body>
  <h1>¡Hola, mundo!</h1>

<%@include file="/WEB-INF/jspf/conexion.jspf" %>
<sql:transaction dataSource="${bdatos}">

 <c:catch var="ex">
  <sql:query var="encontrados">
   SELECT primer_nombre FROM persona LIMIT 4
  </sql:query>
 </c:catch>


 <c:choose>
  <c:when test="${not empty ex}">
   <p>Problema: <c:out value="${ex.message}"/></p>
  </c:when>
  <%-- Si no hubo ninguna excepción --%>
  <c:otherwise>


   <c:choose>

    <%-- Si encontró algo --%>
    <c:when test="${encontrados.rowCount>0}">
     <ol>
      <c:forEach items="${encontrados.rows}" var="persona">
       <li><c:out value="${persona.primer_nombre}" /></li>
      </c:forEach>
     </ol>


    </c:when>
    <c:otherwise>
     <p>No se encontraron datos.</p>
    </c:otherwise>
   </c:choose>

  </c:otherwise>
 </c:choose>
</sql:transaction>
 </body>
</html>

Ejecución

ver index.jsp.

Etiquetas: , ,

3.9.08. 2 comentarios E-mail

Un gráfico bajo JSP con Cewolf en NetBeans

15.8.08. Por ooscarr (ooscarr)

Netbeans

Traduje las instrucciones del tutorial de la página de Cewolf y consideré que se merecía un post, digamos, para actualizarlo/corregirlo.

Primero, para qué sirve Cewolf

Cewolf puede ser usado dentro de una aplicación basada en Servlet/JSP para insertar gráficos complejos de todo tipo (p.e. lineales, de torta o pastel o circular o 100%, de barras, histogramas, diagramas de caja, etc.) en una página web. Además provee una completa librería de etiquetas (tags) para definir todas las propiedades del gráfico (colores, rayas, leyendas, etc.). De este modo el JSP que incluye el gráfico no queda lleno de código java. Todo es descrito con etiquetas XML válidas.

Cewolf está basado en JFreeChart y usa su motor de renderizado para renderizar la imagen del gráfico final al flujo de respuesta de los clientes. Ningún archivo es creado en el lado del servidor. Todo está basado en objetos de sesiones livianas y análisis de datos dinámico. Cewolf consiste de un servlet el cual maneja el renderizado de los gráficos y una librería de etiquetas (Tag Library) que traduce la definición del gráfico incluida en el JSP a una etiqueta img que consulta al servlet de renderizado para la obtención del gráfico apropiado.

Cewolf

Completamente gratis, libre y abierto

  • Licencia LGPL
  • Sin cargos
  • Sin restrictions
  • Todos los archivos fuentes documentados y disponibles
  • Soporte las 48 horas en los foros de SourceForge
  • Rápido desarrollo y ciclos de mejores versiones

100% Java

  • sin uso de librerías nativas
  • debería correr en todo servidor compatible con J2EE o en contenedores servlet
  • uso extenso de proyectos open source disponibles

Completa librería de etiquetas para gráficos

  • Sin necesidad de código java dentro del JSP
  • Descripción XML de un gráfico
  • Validación de etiquetas de gráficas en tiempo de diseño
  • Extensa documentación de las etiquetas

Enorme número de diferentes gráficas

  • Lineal [XY]
  • Torta [3D]
  • Barras horizontales [3D]
  • Barras [XY] Verticales [3D]
  • [3D] Barras verticales apiladas
  • De área [XY]
  • Gráfico disperso
  • Gráfico de velas
  • Alto Bajo
  • Gantt
  • Sobrepuestos
  • Combinados

Antes

Antes de empezar, asegúrate:

Hola, mundo

PASO 1: Instalamos las librerías

  1. Creamos un Nuevo proyecto de tipo Aplicación Web
    Captura de pantalla del asistente para crear un Nuevo proyecto en Netbeans
  2. Elejimos un nombre
    Captura de pantalla del asistente para crear una Nueva Aplicación Web
  3. Usamos una carpeta dedicada para los archivos JAR
    Use dedicated library folder for server JAR files
  4. Ahora, en la parte de los proyectos, seleccionamos Propiedades. Y en el panel de propiedades, sección Librerías presionamos el botón de Agregar JAR
    Libraries > Add JAR/Folder
  5. Aquí tenemos que abrir la carpeta del Cewolf recién descargada y dentro de la carpeta /lib/ seleccionar todos los archivos .jar que aparecezcan, marcar la opción Copiar a la carpeta de librerías y presionar Seleccionar.
    Copy to Libraries Folder
  6. OK
    Panel de Propiedades del proyecto en Netbeans para Mac OS X con el botón OK focalizado
    No se olviden también de agregar la librería JSTL con el botón Agregar Librería, o sino no va a funcionar nada.

PASO 2: Nos ponemos desagradables

Ahora que están las librerías, debemos preparar la aplicación.

Primero debemos mover o copiar la carpeta /etc/ que viene en Cewolf a nuestra carpeta /WEB-INF

Captura de pantalla que muestra cómo se arrastra una carpeta del panel Favoritos al panel de archivos del proyecto en Netbeans
Para ver nuestras carpetas locales en Netbeans, debemos seleccionar el menú Ventana > Favoritos (o Window > Favorites, si tienes el Netbeans en inglés).

web.xml

Ahora editamos el archivo web.xml que hizo un cameo en la imagen anterior, en el modo XML y le metemos el siguiente código antes que se cierre la etiqueta </web-app>

<servlet>
 <servlet-name>CewolfServlet</servlet-name>
 <servlet-class>
  de.laures.cewolf.CewolfRenderer
 </servlet-class>
 <!-- sets storage implementation -->
 <init-param>
  <param-name>storage</param-name>
  <param-value>
  de.laures.cewolf.storage.TransientSessionStorage
  </param-value>
 </init-param>
 <!-- sets overlib.js location relative to webapp -->
 <init-param>
  <param-name>overliburl</param-name>
  <param-value>etc/overlib.js</param-value>
 </init-param>
 <!-- turn on or off debugging logging -->
 <init-param>
  <param-name>debug</param-name>
  <param-value>true</param-value>
 </init-param>
 <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
 <servlet-name>CewolfServlet</servlet-name>
 <url-pattern>/cewolf/*</url-pattern>
</servlet-mapping>

Para probar, prueba ejecutar la aplicación web (o presionar el botón Play) y visitar la carpeta /cewolf como en el siguiente ejemplo:

http://localhost:8080/ejemplo/cewolf?state

Y debería aparecer:

Cewolf servlet up and running.
Requests served so far: 0

O sino, te equivocaste de puerto (prueba el :8084).

PASO 3: Java

Con Cewolf, todavía se debe escribir la parte de los datos de JFreeChart con código Java. Lo que sucede es que una clase se encarga de preparar los datos y a través de un bean se accede a ellos desde la JSP.

  1. Para crear la clase, vamos a Nuevo archivo > Java > Java Class
    Panel de nuevo archivo de Netbeans en Mac OS X
  2. Le ponemos un nombre a la clase, en este caso NumeroDeVisitas; y al paquete (Package) le podríamos llamar de.laures.cewolf.datos
    Captura de pantalla del panel de nueva clase java en Netbeans para Mac OS X
  3. Luego de presionar el botón Finalizar, el archivo debería aparecer dentro de la carpeta Source Packages en nuestro proyecto.

    Captura de pantalla con el árbol de archivos en Netbeans mostrando el archivo ejemplo > Source Packages > de.laures.cewolf.datos > NumeroDeVisitas.java

Códigos fuentes

Y en ese archivo escribamos, por ejemplo, el siguiente código java que he traducido especialmente para ti:

NumeroDevisitas.java
package de.laures.cewolf.datos;

import java.io.Serializable;
import java.util.Date;
import java.util.Map;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.jfree.data.category.CategoryDataset;
import org.jfree.data.category.DefaultCategoryDataset;

import de.laures.cewolf.DatasetProduceException;
import de.laures.cewolf.DatasetProducer;
import de.laures.cewolf.links.CategoryItemLinkGenerator;
import de.laures.cewolf.tooltips.CategoryToolTipGenerator;

/** 
 * Un ejempplo de productor de datos.
 * @author  Guido Laures
 * Traducido por Oscar Fernández
 */

public class NumeroDeVisitas implements DatasetProducer,
 CategoryToolTipGenerator, CategoryItemLinkGenerator, Serializable{

 private static final Log log=LogFactory.getLog(NumeroDeVisitas.class);

 // Estos valores normalmente no se deberían escribir
 // sino producidos por algún tipo de fuente de datos
 // como una base de datos o un archivo
 private final String[] categories={"Lun","Mar","Mié","Jue","Vie","Sáb","Dom"};
 private final String[] seriesNames={"Portada","Noticias","Foros","Buscador"};

 //Produce datos aleatorios
 public Object produceDataset(Map params) throws DatasetProduceException{
  log.debug("produciendo datos.");
  DefaultCategoryDataset dataset=new DefaultCategoryDataset(){
   // @see java.lang.Object#finalize()
   protected void finalize() throws Throwable {
    super.finalize();
    log.debug(this +" terminado.");
   }
  };
  for(int series=0;series<seriesNames.length;series ++){
   int lastY=(int)(Math.random()*1000+1000);
   for(int i=0;i<categories.length;i++){
    final int y=lastY+(int)(Math.random()*200-100);
    lastY=y;
    dataset.addValue(y,seriesNames[series],categories[i]);
   }
  }
  return dataset;
 }

 /**
  * Estos datos producidos son invalidados después de 5 segundos.
  * Por este método el productor puede influenciar el comportamiento
  * de caché de Cewolf de la forma que quiera.
  */
 public boolean hasExpired(Map params,Date since){
  log.debug(getClass().getName()+"hasExpired()");
  return(System.currentTimeMillis()-since.getTime())>5000;
 }

 // Retorna un ID único para este DatasetProducer
 public String getProducerId(){
  return "NumeroDeVisitas DatasetProducer";
 }
 
 // Retorna un link target para un item de datos especial.
 public String generateLink(Object data,int series,Object category){
  return seriesNames[series];
 }

 // @see java.lang.Object#finalize()
 protected void finalize() throws Throwable{
  super.finalize();
  log.debug(this+" finalized.");
 }

 /**
  * @see org.jfree.chart.tooltips.CategoryToolTipGenerator#generateToolTip(CategoryDataset, int, int)
  */
 public String generateToolTip(CategoryDataset arg0,int series,int arg2){
  return seriesNames[series];
 }
}
index.jsp

Ya. Ahora que la parte complicada está hecha, para llamar al gráfico desde la JSP, escribimos:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri='/WEB-INF/etc/cewolf.tld' prefix='cewolf' %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>Hola, mundo</title>
 </head>
 <body>
  <jsp:useBean id="visitas" class="de.laures.cewolf.datos.NumeroDeVisitas"/>
  <cewolf:chart 
   id="line"
   title="Estadísticas de visitas al sitio"
   type="line"
   xaxislabel="Página"
   yaxislabel="Número de Visitas">
   <cewolf:data><cewolf:producer id="visitas"/></cewolf:data>
  </cewolf:chart>

  <h1>Hola, mundo!</h1>
  <p><img src="<cewolf:imgurl
      chartid="line"
      renderer="cewolf"
      width="400"
      height="300"></cewolf:imgurl>"
   alt="Gráfico" /></p>
 </body>
</html>

Para que funcione, se debe poner atención a las partes marcadas del código.

¡Y listo!

Ahora al visitar la página recién editada, debería aparecer algo así:

ver index.jsp.
* Las líneas del gráfico lineal pueden ser diferentes, ya que, como se vio en el código java, corresponden a datos aleatorios que cambian cada vez que se refresca la página.
** La página es de referencia

Algo más útil

Algo más útil sería obtener los datos desde una base de datos o algún otro servicio. Eso lo veré en otro capítulo. Se me acabó el tiempo. Chao.

Referencias

Etiquetas: ,

15.8.08. 0 comentarios E-mail

Tip: Agregar carpeta al PATH

31.7.08. Por ooscarr (ooscarr)
terminal

Los paths son una lista de directorios que son buscados cuando escribes el nombre de un programa en las líneas de comandos.

Permanentemente

Para agregar permanentemente, se edita el archivo /etc/paths con permisos de superusuario así:

  1. Abrir el terminal
  2. tipear:
    sudo vi /etc/paths
  3. Escribir la contraseña si la pide
  4. Se abrirá una interfaz llamada vi, presionar la tecla i para insertar texto
  5. En la última línea, agregramos la ruta (path, por eso se llama path) al directorio
  6. esc
  7. En mi caso guardo el archivo presionando dos veces la combinación de teclas shift Z
  8. Listo

Temporalmente

También se puede agregar una ruta al PATH temporalmente mientras no cerremos la ventana. El método depende de qué sistema de comandos estén usando.

Con csh o tcsh

Si están usando el csh o el tcsh, los comandos serían:

setenv PATH ${PATH}:/ruta/a/la/carpeta

Con sh o bash

Y si están usando el sh o el bash, sería:

export PATH=$PATH:/ruta/a/la/carpeta

Estos últimos comandos se deshacen cuando se cierra la ventana del terminal.

Algunos sistemas como linux tienen métodos adicionales de agregar los PATHs, y otros (como Windows) tienen los PATHs ubicados en otras partes (Propiedades del Sistema).

Referencias

Etiquetas: , , , ,

31.7.08. 0 comentarios E-mail

Optimizando para la web con GIMP

29.7.08. Por ooscarr (ooscarr)
GIMP

Aunque no lo crean, el software GIMP sí tiene un optimizador de imágenes para la web. Existe un plug-in llamado Save for web cuya instalación todavía es un poco complicada.

¿Qué es Save for Web?

Save for web es un plug-in para GIMP (2.4) que agrega un elemento al menú Archivo que abre un optimizador del tamaño de archivo para la web como ha existido en otros programas comerciales como Adobe Photoshop y Fireworks por muchos años, y que no viene incluido por defecto en GIMP (en estas fechas estamos en la versión 2.4.6).

Archivo > Save for Web...
Por ahora está en inglés.

¿Cómo lo instalo?

Bueno, eso depende de en qué computador estés trabajando.

En Windows

Para Windows ya viene compilado (32 bits), así que sólo hay que

  1. Descargar el archivo
  2. Descomprimirlo
  3. Copiar el archivo webexport.exe a la carpeta:
    C:\Documents and Settings\TU_NOMBRE\.gimp-2.4\plug-ins
  4. Y volver a abrir el programa

En Linux

En linux hay que compilarlo primero, o sea.

  1. Si no lo tienes, instalar el paquete libgimp2.0-dev (Ubuntu, Debian)
  2. Descargar el archivo
  3. Descomprimir el archivo
  4. Entrar a la carpeta desde la consola y tipear: 
    ./configure
  5. make
  6. make install
  7. Y volver a abrir el programa

En Mac OS X

En Mac se suponía que era igual que en Linux, pero no supe dónde encontrar la librería libgimp2.0-dev.

Pero en los foros encontré el plug-in ya compilado

Así que sólo habría que

  1. Descomprimir el archivo
  2. Copiar el archivo webexport a la carpeta:
    ~/Library/Application Support/Gimp/plug-ins/
  3. Y volver a abrir el programa

¿Y ahora qué?

Ahora, cada vez que quieras optimizar una imagen para la web, vas al menú Archivo > Save for Web... y se abrirá un panel especial como éste:

Save for Web panel

Lo malo es que esto todavía no tiene soporte para el canal alpha en los PNG 8. :-(

Referencias

Etiquetas: , , ,

29.7.08. 0 comentarios E-mail

PNGs transparentes en Internet Explorer 6 (segunda parte)

22.7.08. Por ooscarr (ooscarr)

No a Internet Explorer

Ya vimos los métodos mediante scripts para mostrar el canal alpha de los archivos PNG en Internet Explorer 6, ahora toca el turno de hacerlo desde el archivo mismo. Internet Explorer, desde la versión 4, soporta imágenes en formato PNG; pero el formato implementado no está completo. Sin embargo, hasta donde lo soporta, todavía podemos hacer algo.

Transparencia binaria

Primero hay que decir que es mentira que Internet Explorer antes de la versión 7 no soportaba transparencia en los PNG. IE sí podía mostrar pixeles 100% transparentes de forma nativa como lo hace con las imágenes GIF (y los PNG se comprimen más que sus equivalentes GIF), ya que para hacer transparente este color no se necesita un canal alpha, sino definir en la paleta cuál color no mostrar.

Imagen con semi-transparencias Imagen PNG sin semi-transparencias
La imagen de la izquierda es semi-transparente por lo que IE6 no lo interpreta bien (el fondo no se ve). En cambio la imagen de la derecha sólo tiene 1 color 100% transparente que no necesita el canal alpha así que IE lo muestra transparente sin necesidad de scripts raros.

¿Cómo lo creamos?

Este formato, al igual que el GIF, consta de un índice de colores de los cuales podemos elegir por lo menos 1 como transparente para que Internet Explorer lo interprete correctamente.

En Windows (con Irfanview)

Irfanview

Para crear estos archivos PNG en Windows, yo utilizo un pequeño (pero poderoso) software gratuito (mi favorito de Windows) llamado Irfanview, que al momento de guardar el archivo como PNG y seleccionar la opción Save Transparent Color, aparece un diálogo que permite elegir el solo y único color que Internet Explorer interpretará como transparente (antiguamente había que ingresar el número en la paleta de este color).

Panel de opciones de "Guardar como..." en el software Irfanview
Al presionar guardar, aparecerá una miniatura de la imagen donde se debe seleccionar el color que será transparente.

En los demás sistemas operativos (con GIMP)

GIMP

En el caso del software GIMP (no estamos en condiciones de comprar Photoshop),

  1. Una vez abierta la imagen, anda a Imagen > Modo > Indexado...
    Menú "Imagen" > "Modo" > "Indexado..." de GIMP
  2. En el siguiente diálogo, cualquier combinación de configuraciones es buena (manteniéndose debajo de los 256 colores; mientras menos, mejor)
    Panel de conversión de color indexado de GIMP
  3. Luego, después de Guardar como..., aparecerá un panel donde es importante marcar Guardar los valores de los colores de los pixeles transparentes y no marcar Guardar el color de fondo.
    Opciones de Guardar como PNG en GIMP

Alternativamente, se puede hacer más fácil con un plug-in llamado Save for web. Y si tienes Fireworks esto es mucho más fácil (seguir leyendo).

Este tipo de archivo resulta igual que un GIF (excepto que no lo abrirán versiones anteriores a Internet Explorer 4), y como el archivo es más pequeño, para este tipo de imágenes ya todos se deberían olvidar de los GIF.

Es cierto que la gracia del formato PNG está en las semi-transparencias, y el método anterior sólo sirve para demostrar que PNG es una mejor alternativa para los GIF estáticos. Pero también se puede lograr semitransparencias compatibles con IE6 si llegamos al límite de lo que IE6 puede ofrecer con respecto al soporte de este formato.

Presentando el PNG 8

Otra manera de incluir imágenes PNG con alpha en versiones anteriores a IE7, es guardarlas en PNG 8, es decir, con una paleta de colores inferior a los 256 colores. De esta forma, el canal alpha se degradará más aceptablemente ignorando todos los colores semi-transparentes.

Imagen de un fantasma semi-transparente con PNG 8
Este fantasma no se ve en IE6 e inferiores porque todos los pixeles tienen algún nivel de transparencia (esta vez sí se ve el fondo).

Y esa es la restricción. Al ignorar completamente cualquier color con canal alpha, este método sólo es recomendable para sombras o partes semi-transparentes que sean presindibles.

Imagen de la cabeza de Wilber con una sombra semi-transparente
La sombra y sólo la sombra semi-transparente no se ve en IE6 e inferiores pero sí se ve en IE7.

¿Cómo lo creamos?

Con Fireworks

MacromediaAdobe Fireworks es la mejor aplicación para crear este tipo de archivos. Lamentablemente no es gratis, pero se puede descargar una versión de prueba para Mac o Windows por 30 días desde la página de Adobe.

Para guardar en PNG 8 hay que ir a Archivo > Vista previa y seleccionar PNG 8. Después de seleccionar Transparencia alfa, Exportar.

PNG 8 en Fireworks 2 para Mac OS en blanco y negro
Nótese que con Fireworks también se puede guardar en el modo indexado mencionado anteriormente.

PNGNQ

Yo busqué cómo hacerlo en GIMP pero no encontré nada. Así que por ahora con comandos no más

Para instalar pngnq sólo tirándolo al path (o al /usr/bin), se necesita tener la librería libpng, que para mac se puede bajar desde Mac OS X Ports.

Cuando lo ejecutamos, tipeamos:

pngnq filename.png

O si queremos elegir el número de colores:

pngnq -n 256 filename.png

Y se creará el archivo resultante en la misma carpeta terminado en -nq8.png.

Da buenos resultados la mayoría de las veces en cuanto a colores, pero nunca se sabe lo que va a salir hasta que se ejecuta y se prueba en el maldito Internet Explorer 6.

Referencias

Artículos relacionados

Etiquetas: , ,

22.7.08. 0 comentarios E-mail

Usando PNG con transparencias en Internet Explorer 6 (primera parte)

20.7.08. Por ooscarr (ooscarr)
No a Internet Explorer

¿Por qué las transparencias de las imágenes PNG no se ven en Internet Explorer 6 y qué puedo hacer para que se vean bien? Todavía hay mucha gente que no ha actualizado a Internet Explorer 7, o deshabilitaron el WindowsUpdate, o todavía no pasan ni a Windows XP. No sé.

Primero pensé: Al diablo con IE6. Pero hay veces en que necesito que las cosas funcionen en Internet Explorer 6, y los otros formatos no me dejan cambiar de posición las imágenes o el color de fondo sin tener que generarlas de nuevo y es muy complicado andar reproduciendo fondos con capas y un montón de marimañas más. Necesito definir una solución para este problema.

Por medio de javascripts

DirectX

Suena descabellado, pero el truco más famoso es el del javascript (el famoso pngfix.js) que arregla por medio de un estilo propietario de Microsoft el problema (AlphaImageLoader). También se puede aplicar sin necesidad de javascripts con el estilo CSS no estándar:

img{
 background-image: url(pildora.png) !important;
 background-image: none;
 filter: none !important;
 filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src="pildora.png");
}

Este código lo que hace es dibujar una segunda superficie en el mismo espacio que ocupa el elemento y cargar el PNG ahí. Con DirectX.

Pero este código tiene sus problemas y limitaciones, como no funcionar en versiones anteriores a Internet Explorer 5.5, no poder usar mapas de imágenes (existe otro javascript para mapas de imágenes), no funciona con listas (hay otro javascript para listas), tampoco con fondos (otro javascript), ni rollovers (otro), consume muchos recursos hasta el punto de ¡bloquear algunos formularios y deshabilitar ciertos links!

SuperSleight

El mismo desarrollador del javascript anterior menciona otro javascript más completo SuperSleight que, traduciendo, tiene las siguientes ventajas:

  • Funciona tanto con imágenes inline como de fondo, reemplazando la necesidad de los javascripts sleight y bgsleight
  • Automáticamente aplicará position: relative a los vínculos y campos de formulario si no tienen ya una posición ajustada. (Puede ser deshabilitado.)
  • Puede ser ejecutado en todo el documento, o sólo una parte seleccionada donde tú sabes que están los PNGs. Esto es mejor para el rendimiento.
  • Detecta imágenes de fondo ajustadas como no-repeat y ajusta el scaleMode para recortar en vez de escalar.
  • Puede ser re-aplicado por cualquier otro JavaScript en la página — útil si ha sido cargado nuevo contenido mediante una petición AJAX.

El javascript en cuestión se puede descargar desde 24 ways y viene con un archivo GIF transparente x.gif que utiliza para hacer todo el truco.

Para implementarlo, basta incluir el llamado al javascript dentro del <head></head> dentro de comentarios condicionales para Internet Explorer menores o iguales a la versión 6:

<!--[if lt IE 7]>
<script type="text/javascript"
 src="supersleight-min.js"></script>
<![endif]-->

Yo lo uso, pero no incluye solución para los fondos que se repiten o están posicionados. Así que restringí su funcionamiento para esta columna (<div id="content">) solamente descomentando la penúltima línea del javascript de la siguiente forma:

// limit to part of the page ... pass an ID to limitTo:
supersleight.limitTo('content');

HTC

Después, en wikipedia encontré otra solución. Esta vez sí es compatible con imágenes, con listas ¡y hasta con fondos repetidos y posicionados al mismo tiempo!

En cada elemento que queramos usarlo, el truco es el siguiente, por ejemplo:

img {
 behavior: url(/js/fx-iepngfix.htc);
}
#header {
 padding-bottom:31px;
 background:transparent url(IMAGENAME.png) 0% 100% no-repeat;
 behavior: url(/js/fx-iepngfix.htc);
}
ul li {
 padding-left: 11px;
 background-image: url(IMAGENAME.png);
 background-repeat: no-repeat;
 background-position: 0% 5px;
 behavior: url(/js/fx-iepngfix.htc);
}

Por supuesto, la propiedad CSS no estándar "behavior" sólo existe en Internet Explorer (es una de las Microsoft Windows Script Technologies) y el archivo HTC (con licencia BSD, MIT y LGPL, al igual que el iepngfix.htc del que está basado) se puede descargar desde la página de fx-iepngfix.htc.

Se podría crear un javascript que agregue esta propiedad a todos los elementos que lo necesiten y luego llamamos a dicho javascript desde comentarios condicionales. Puede ser... Hm... ¡Oh! ¡Dicho y hecho! ¡Alguien más ha logrado esta solución definitiva!

Otras librerías

En Google code existe un proyecto que intenta arreglar éste y otros problemas de Internet Explorer a través de un javascript. Se trata de IE7.js e IE8.js. El primero arregla y ajusta las versiones anteriores de Internet Explorer para que se comporte como Internet Explorer 7; y el segundo, mejora también a Internet Explorer 7 para que incluya arreglos que no alcanzaron a integrarse en él. Todavía no soporta los fondos repetidos o posicionados. :-(

Soluciones como estas vienen integradas en la mayoría de las librerías javascript como:

Incluídas en frameworks y CMSs como

Y eso que no menciono la solución con flash...

Continuará...

Siento que me he alargado demasiado con este –al principio simple– post. Existen otras técnicas que solucionan todos estos problemas más fácilmente y directo al hueso, que no revelaré hasta la próxima entrada.

Referencias

Artículos relacionados

Etiquetas: , , ,

20.7.08. 0 comentarios E-mail

Deja de usar iframes

28.6.08. Por ooscarr (ooscarr)
Maten a Internet Explorer

Ustedes saben. Los frames y los iframes desaparecieron de la especificación XHTML a partir del XHTML 1.1, y el pobre iframe no ha sido considerado para el HTML 5. Entonces, si necesitamos embebeer contenido de otra página en la nuestra, ¿cómo lo haremos?

Si es sólo por presentación, usa CSS

Si quieres poner un iframe sólo para que se vea la barrita de desplazamiento dentro de la página, deberías usar hojas de estilo como en el bloque de noticias como aparece en la siguiente página:

Para lograr ese efecto sin usar iframes, primero encerramos la parte que queremos en, digamos, un <div>:

<div id="extras">Esto después debería lucir como si
estuviera dentro de un viejo iframe</div>

Y para que se vea con la barrita de desplazamiento, le aplicamos el estilo overflow, por ejemplo:

#extras{
 height : 230px;
 width : 200px;
 overflow : auto;
}

Si es muy necesario cambiar su contenido sin actualizar la página, podrías usar métodos javascripts como el XML HTTP Request.

Un objeto HTML

Si es necesario usar el viejo iframe, existe la solución de usar un objeto de tipo HTML embebido dentro de la página.

Por ejemplo, a continuación debería aparecer un pequeño convertidor de divisas:

No se pudo mostrar el convertidor de divisas en esta página. Visita finance.google.com.
Prueba presionando el botón Convert.

Éste es el código:

<object type="text/html"
data="http://finance.google.com/finance/converter?
from=USD&amp;to=CLP&amp;auto=1"
width="400" height="150"
style="border:1px solid #000;">
 No se pudo mostrar el convertidor de divisas en esta página.
 Visita <a href="http://finance.google.com/finance?q=usdclp"
  rel="external">finance.google.com</a>.
</object>

Internet Explorer

Lo anterior no funciona en Internet Explorer. En vez de mostrar un formulario para convertir divisas, sólo apareció el objeto con una página en blanco.

Internet Explorer preguntando si deseo ejecutar código externo
Internet Explorer cree que todos los object son elementos ActiveX. :-/

Internet Explorer bloquea el contenido embebido de otros dominios (incluso entre subdominios distintos), excepto si el HTML se está ejecutando bajo localhost. Según ellos, por razones de seguridad, y puede ser que estén en lo correcto en tratar a este objeto como un elemento independiente... Hmm... Los desarrolladores también dijeron que puede ser que eliminen esta restricción en futuras versiones beta de Internet Explorer 8. Esperemos.

Resultado de Acid2 mirror en Internet Explorer 8
Esta es la razón por la que IE8 pasa el Acid2 test desde www.webstandards.org y no desde acidtests.org, ni desde webstandards.org (sin las www).

Así que el método de objetos sólo funcionará para páginas del mismo dominio bajo Internet Explorer.

Internet Explorer además muestra unas extrañas barras de desplazamiento y un borde cuando incrustamos objetos HTML. Para deshacernos de éstos, hay que definir los siguientes estilos dentro de las páginas a embeber:

html {
 overflow: auto;
 border: none;
}

No se pudo mostrar el hola, mundo.
Se debería ver en Internet Explorer.

Internet Explorer, adicionalmente, no reconoce que un link dentro de la página incluida tiene a la página que la contiene como su _parent. Prueba haciendo click en el botón XHTML 1.0 que está dentro del objeto anterior y compara dónde se abre la página. Así que sumemos motivos para odiar a IE.

Pruebas en otros navegadores

Una página francesa hizo la prueba en los navegadores más populares de su época la manera en que cargan este y otros tipos de objetos, y estos fueron sus resultados:

User AgentResultado
Fuente: http://joliclic.free.fr
Firefox 1.5success
Firefox 1.0.7success
Opera 9success
Konqueror 3.5.2success
Safari 2.0.4success
IE 7RC1success
IE 6success
IE 5.5success
IE 5.0.1success
IE 4.0.1success
IE Mac 5.2.3success
Lynx 2.8.5degrade correctly

Yo le agregaría

User AgentResultado
Firefox 2.0.0.14success
Firefox 3success
IE8 beta 1success
Opera 9.5success
Safari 3.1.1success
iPhone 1Gsuccess

Al usar este método de objeto, también desaparece el soporte de abrir un link directamente dentro del objeto desde afuera como se podía hacer antiguamente con los iframes a través del desechado atributo target.

XFrames?

El tercer método no lo sabemos. Así como el W3C desechó los formularios con <form> en favor de los Xforms, a partir del XHTML 1.1 los frames ya no son soportados en favor de los Xframes.

Xframes es una redefinición de los framesets, que permite definir el contenido de los frames desde la URI para así no echar a perder el botón de retroceso o las direcciones guardadas en marcadores, además de facilitar el trabajo de los buscadores. Pero nada se dejó como alternativa al pobre iframe, por ahora.

En resumen

Evita usar iframes. Aparte de que son inseguros, pasados de moda y próximamente obsoletos; lo más recomendable es programar la forma de reusar código en un lenguaje de programación interpretado en el servidor.

Pero si hay que usar iframes,

  1. Si el contenido es del mismo dominio y no se cambiará desde la página contenedora, el objeto HTML debería ser la solución.
  2. Si se desea cambiar el contenido de las páginas incluidas, las llamadas javascript HTTP Request (em, como AJAX) podrían ser una alternativa.
  3. Si se desea incluir contenido externo sin olvidar a Internet Explorer, no quedará otra que seguir usando iframes (con algún DOCTYPE antiguo o transicional). O utilizar los comentarios especiales <!--[if IE]> e <!--[if !IE]> <--> como lo he hecho en mi recién inaugurado formulario de comentarios.

Referencias

Etiquetas: , , ,

28.6.08. 0 comentarios E-mail

Desinstala Firefox de forma limpia (antes de instalar la nueva versión)

11.6.08. Por ooscarr (ooscarr)
Mozilla firefox

El martes sale Firefox 3. Y, a pesar de que el programa viene preparado para el salto, sería bueno hacer una instalación desde cero de la nueva versión. No es necesario hacer esto; no crean Firefox que es complicado de instalar, todo lo contrario.

Respalda los marcadores

Antes de desinstalar Firefox, lo recomendable es respaldar los marcadores o bookmarks desde el menú Marcadores > Administrar marcadores; y luego en la ventana que se abre, Archivo > Exportar.

Desinstalación

Para desinstalar Mozilla Firefox en Microsoft Windows XP y otros Windows, sólo hay que presionar Desintalar en la opción Agregar/Quitar Programas del Panel de Control que aparece en el menú Inicio. En Linux, hay que borrar la carpeta firefox-<version> que está dentro de la carpeta /usr/lib/. En Mac OS X, dentro de la carpeta de aplicaciones, hay que tirar Firefox al cesto de la basura así nada más.

Pero desinstalando Firefox no se eliminarán los marcadores, el historial, extensiones ni otros agregados. Estos datos quedan guardados en la carpeta del perfil de usuario, que está ubicada en las siguientes ubicaciones dependiendo del sistema operativo:

  • Windows Vista:
    • Users\<NombreDeUsuario>\AppData\Roaming\Mozilla\Firefox
    • \Users\<NombreDeUsuario>\AppData\Local\VirtualStore\Program Files\Mozilla Firefox (si es que existe)
    • C:\Windows\Prefetch\FIREFOX
  • Windows 2000, XP, Server 2003:
    • Documents and Settings\<NombreDeUsuario>\Application Data\Mozilla\Firefox
    • C:\Windows\Prefetch\FIREFOX
    • C:\Archivos de Programa\Mozilla Firefox (si existe)
  • Mac OS X:
    • ~/Library/Application Support/Firefox
    • ~/Library/Preferences/org.mozilla.firefox.plist
  • Linux y otros sistemas basados en UNIX:
    • ~/.mozilla/firefox

En Windows podrían quedar algunas entradas en el registro que se deberían quitar sólo usando algún software para limpiar el registro, como los incluidos en algunos antivirus o anti-spywares.

A partir de Firefox 3, se incluirá la opción de eliminar datos personales y de personalización en el asistente de desinstalación de Windows.

Instala Firefox 3

Ahora que está todo limpio de versiones anteriores, sólo debes volver a descargar Firefox e instalarlo bien desde cero. Lo que es muy fácil e intuitivo.

Descarga Firefox

Referencias

Etiquetas: , , , ,

11.6.08. 2 comentarios E-mail

¿Respaldemos la base de datos?

25.5.08. Por ooscarr (ooscarr)
PostgreSQL

Mi nombre es Oscar, y dentro de una hora nos van a borrar/formatear las cuentas que usamos para trabajar en mi Universidad. Y si bien respaldé mis archivos mediante FTP, todavía me queda información y trabajo almacenado dentro de las bases de datos que están en los servidores. Lo mismo podría ser útil si uno se va a cambiar de empresa de hosting (si es que hubiera alguna que ofrezca PostgreSQL en sus planes más económicos). Éste es un tutorial for dummies™.

Conectando al servidor ACInfo (acinfo.unap.cl:5432)

PgAdmin III

Con las últimas versiones del software PgAdmin III, respaldar una base de datos es muy sencillo. Si nuestra base de datos no es muy complicada en cuanto a usuarios, grupos y esquemas; o su volumen no es demasiado grande (por ejemplo, 6 millones de datos).

El respaldado

Para respaldar con el programa, como primer paso lo único que hay que hacer es hacer click con el botón derecho sobre algún objeto de tu dominio y elegir la opción Resguardo... del menú contextual.

También accesible desde el menú “Herramientas” > “Resguardo...”

Luego aparecerá una cuadro de diálogo con distintas opciones dependiendo de dónde vas a hacer la restauración.

Si no tienes permiso de super usuario en el servidor destino (donde vas a hacer la restauración), debes elegir la opción PLAIN:

Imagen del cuadro de diálogo “Resguardar”
En el caso del tipo PLAIN, lo recomendable es que el archivo termine con la extensión .sql
En Windows, es necesario escribir la ruta completa del nombre de archivo a mano (C:\...)

Este tipo de respaldos no permite blobs; para eso, se utilizan los otros formatos y se hace mediante líneas de comandos.

Si tienes permiso de super usuario en el servidor destino lo recomendado es utilizar cualquiera de las opciones COMPRESS o TAR por igual.

Imagen del cuadro de diálogo Resguardar
En el caso del tipo COMPRESS o TAR, lo recomendable es que el archivo termine con la extensión .backup

Luego de eso, es cosa de esperar. Según el sistema operativo, puede o no quedarse el computador paralizado hasta que termine. Ten paciencia o cambia de pantalla con las teclas control + tab (o command + tab en los especiales teclados mac).

Por mientras te cuento que si tienes los puertos bloqueados y no puedes conectarte con pgAdmin III, también existe un sistema para manejar la base de datos desde la web (como phpmyadmin de MySQL) llamado phpPgAdmin, que permiten exportar los datos además de los formatos SQL y pg_dump, en los formatos método COPY (binario) , XML, XHTML, CSV o datos separados por tabs y saltos de líneas. Opciones también disponibles desde las líneas de comandos.

/Applications/pgAdmin3.app/Contents/SharedSupport/pg_dump -i -h acinfo.unap.cl -p 5432 -U ooscarr -F p -O -D -v -f "/Users/ooscarr/Desktop/respaldo.sql" -n 'public' ooscarr

El proceso retornó el código de salida 0.

Para una mejor descripción de cada una de las opciones de exportación con el comando pg_dump (en inglés), visita la documentación oficial de PostgreSQL

La restauración

Hay dos formas de hacer la restauración con el programa pgAdmin III, y dependerá del formato del archivo de respaldo o los permisos de usuario que tengas en el servidor donde deseas recuperar la información.

Con el archivo .sql
SQL

Si no tienes permiso de super usuario e hiciste el respaldo en modo PLAIN, lo único que hay que hacer es ir al editor SQL (Herramientas > Herramienta para Consultas), abrir el archivo desde ahí y presionar el botón Play (Consulta > Ejecutar). Hecho.

Con el archivo .backup

Si tenemos un archivo .backup, necesitaremos los permisos necesarios en la base de datos para seleccionarla con el botón derecho y elegir la opción Restaurar...

También accesible desde el menú “Herramientas” > “Restaurar...”

Cuadro de opciones de restauración

Y con eso estaría respaldado y restaurado todo. :-) Por supuesto que podrían haber riesgos y complicaciones y habría que entrar a picar por el SSH, pero para qué nos vamos a poner tan negativos. Yo asumo que las bases de datos destino estaban vacías y la configuración de las tablas no era tan especial.

Fin

Ya tengo mis archivos respaldados, mi base de datos está respaldada... Existen otros métodos para replicar los datos sin necesidad de crear un archivo sino que directamente y otras formas de respaldo automático (Slony-I). Ahora me iré a ver cómo respaldar mi base de datos MySQL, nos vemos.

Referencias

Etiquetas: , ,

25.5.08. 2 comentarios E-mail

Cómo agregar el lenguaje PL/pgSQL a PostgreSQL

19.5.08. Por ooscarr (ooscarr)
PostgreSQL

Cuando se inicializa la base de datos postgres manualmente por primera vez, no se instala el lenguaje de programación procedural de funciones PL/pgSQL automáticamente. Así que tendremos que hacerlo nosotros mismos.

En nuestra base de datos

Por pgAdmin III

La manera más sencilla de instalar los lenguajes procedurales, como PL/pgSQL, es a través de la interfaz gráfica del software pgAdmin III.

  1. Una vez que el servicio PostgreSQL está iniciado y funcionando...
  2. Abrimos el software pgAdmin III y vamos al panel de preferencias
    Captura de pantalla de cómo llegar al panel de preferencias en Mac OS X
  3. Nos aseguramos que en la ficha Visualizar esté marcada la casilla Lenguajes y presionamos OK.
    Captura de pantalla del panel de preferencias
  4. Nos conectamos al servidor o refrescamos la base de datos si es que ya estábamos conectados.
    Para refrescar la base de datos, sobre el nombre del objeto, con el botón derecho del ratón, elegir Refrescar
  5. Seleccionamos el objeto Lenguajes y le damos click a la opción Nuevo Lenguaje....
    Captura de pantalla del menú contextual Nuevo Lenguaje... en Mac OS X
  6. Elegimos nuestro lenguaje favorito en el campo Nombre y presionamos el botón OK.
    Captura de pantalla de las opciones de lenguajes procedurales predefinidos
  7. Ya podemos disponer del lenguaje seleccionado para crear nuevas funciones en PostgreSQL.
    En el panel de nueva función ya aparece el lenguaje plpgsql

¿Fácil, no?

* Si lo anteriormente mencionado no funciona, pruebe conectándose al servidor de la base de datos con un super usuario de postgreSQL.

Con comandos

Lo mismo se podía hacer con una simple sentencia SQL:

CREATE LANGUAGE plpgsql

Para agregar el lenguaje por defecto

Se puede hacer que un lenguaje procedural se instale automáticamente en cada nueva base de datos que creamos, para esto...

Desde pgAdmin III

  1. Abrimos el software pgAdmin III y vamos al panel de preferencias
    Captura de pantalla de cómo llegar al panel de preferencias de pgAdmin3 en Mac OS X
  2. Nos aseguramos que en la ficha Visualizar esté marcada la casilla Mostrar Objetos del Sistema en la vista de árbol? (...) y presionamos OK.
    Captura de pantalla del panel de preferencias
  3. Antes de conectar a la base de datos, cambiamos el nombre de usuario...
    Para elegir el nombre de usuario a conectar, sobre el nombre del servidor, con el botón derecho del ratón, elegir Propiedades
    ...por uno que tenga permisos de super usuario.
    Captura de pantalla del panel de servidor
  4. Una vez conectados, le agregamos el lenguaje a la base de datos llamada template1.
    Captura de pantalla del menú contextual Agregar Lenguaje sobre la base de datos template1 en Mac OS X
  5. No hay paso 5, excepto dejar las conexiones como estaban.

Con comandos

Hacer lo mismo por comandos es más complicado porque hay que hacerlo no por SQL sino que por shell:

createlang plpgsql template1

Palabras finales

Ahora que instalamos PL/pgSQL y otros lenguajes predefinidos, tenemos un entorno PostgreSQL listo para trabajar.

También es posible utilizar otros lenguajes personalizados, cuya instalación tendrán que estudiarla en la documentación oficial que está en las fuentes.

Las funciones de PostgreSQL no sólo pueden ser definidas en el lenguaje estándar SQL, sino que en cualquier otro lenguaje que a usted se le ocurra y pueda implementar, como por ejemplo:

  • PL/pgSQL (similar al PL/SQL de Oracle)
  • C
  • C++
  • PL/Java
  • PL/Perl
  • plPHP
  • PL/Python
  • PL/Ruby
  • PL/sh
  • PL/Tcl
  • PL/scheme
  • PL/R
  • PL/Lua
  • PL/LOLCODE !
  • PL/Parrot !

Fuentes

Artículos relacionados

Etiquetas: , , ,

19.5.08. 0 comentarios E-mail

Cómo instalé PostgreSQL en Mac OS X

5.5.08. Por ooscarr (ooscarr)
PostgreSQL

El último sistema operativo de Apple viene con MySQL pero no incluye el poderoso sistema de bases de datos OpenSource PostgreSQL. Y para los sistemas UNIX no proveen un archivo binario de fácil instalación suponiendo que es sencillo para todos los realmente interesados (comentan que sí). Aquí entrego una guía típica de instalación de este tipo de programas que sirve tanto para Mac OS X, Linux, BSD y UNIX en general. Es para todos casi lo mismo.

Primero

  1. Se recomienda a todos descargar la última versión más conocida por estos días como iPhone SDK desde la página de Apple. O instalar las Developer Tools (que vienen en el disco de instalación) si usas Tiger.
  2. Descargar la última versión de PostgreSQL desde postgresql.org (los .md5 son las firmas digitales, no los archivos que queremos). De preferencia, en el escritorio.
  3. Hacer doble click en el archivo recién descargado para que se descomprima y ya tenemos la carpeta para compilar.

Compilar PostgreSQL

  1. Abrimos el Terminal (Aplicaciones > Utilidades > Terminal)
  2. Escribimos el comando 
    $ cd
    luego espacio, arrastramos y soltamos la carpeta recién descomprimida en la ventana del Terminal para que quede la ruta escrita en la misma línea. Enter (o return). Debería quedar algo como: 
    $ cd /Users/ooscarr/Desktop/postgresql-8.3.1

Configure

Antes de comenzar a compilar, hay que generar los Makefiles. Esto se hace ejecutando el script incluido configure con parámetros opcionales. El comando y los parámetros que elegí fueron los siguientes:

./configure --enable-thread-safety \
                    --without-docdir \
                    --with-perl \
                    --with-gssapi \
                    --with-pam \
                    --with-bonjour \
                    --with-openssl

No usé --prefix= porque no tengo problemas en que Postgres se instale en /usr/local. Tampoco --exec-prefix= porque no necesito que sea independiente de la plataforma, es para instalarlo aquí mismo.

En general no recomiendo personalizar las carpetas donde Postgres va a instalar sus archivos, para tener una instalación de lo más normal y conocida que permitan pedir ayuda para arreglar problemas sin complicaciones. Leopard, como UNIX, viene con readline instalado, así que no hay muchas complicaciones. El --without-docdir es para que no instale la documentación en inglés, pero lo puedes obviar sin problemas.

El --enable-dtrace suena tentador, pero no es necesario ya que no vamos a analizar el proceso de compilación y, según el archivo README, ahora sólo tiene soporte para Solaris (un muy buen sistema operativo para desarrolladores).

Al presionar return se demora un poco porque está revisando las librerías, el sistema, etc. Debería aparecer una lista de checking y unas config.status. Todo normal.

Make

Estamos listos con el código fuente, ahora falta compilar. Comando:

$ make

Éste se demora más, ocupa más el procesador, pero en unos minutitos debería haber terminado con la frase:

All of PostgreSQL successfully made. Ready to install.

Ya. Está listo para instalar.

Instalación

La instalación es igual de fácil. Lo único que hay que hacer (por ahora) es escribir:

$ sudo make install

Lo típico. Si pide la password, la escribimos y listo. La contraseña no aparecerá en pantalla.

PostgreSQL installation complete.

Eso es todo. PostgreSQL está instalado en /usr/local/pgsql/

pgAdmin III

Antes de seguir, sería bueno instalar la última versión del software pgAdmin III cuya instalación es tan fácil como la mayoría de las instalaciones de Mac OS X: arrastrar un archivo a la carpeta de Aplicaciones.

Crear la base de datos

Al igual que en Windows, se estila crear un usuario dedicado para que PostgreSQL administre los datos. Más bien es un requisito. En mi caso voy a guardar los datos en la carpeta /usr/local/pgsql/data como viene por defecto, pero esto cambia según la necesidad y configuración personal de cada usuario. Para crear la carpeta ahí, utilizo el famoso comando:

$ mkdir /usr/local/pgsql/data

Después hay que crear el usuario. Y como no me molesta tener un usuario más en la pantalla de inicio de sesión (si tienes el inicio de sesión automático, ni lo vas a ver), lo creo normalmente desde Preferencias del Sistema > Cuentas > +

Pantalla de Agregar nuevo usaurio de Mac OS X

Bueno, ahora que existe el usuario postgres, hacemos que la carpeta /usr/local/pgsql/data pertenezcan a este nuevo usuario.

$ sudo chown postgres /usr/local/pgsql/data

Para inicializar la base de datos, debemos entrar a la cuenta de postgres con

$ su -l postgres

Y la inicializamos por primera vez con el script:

/usr/local/pgsql/bin/initdb -D /usr/local/pgsql/data

Al finalizar, aparecerán dos líneas muy importantes, ya que estos comandos se usarán para iniciar el servidor de postgresql para que funcione. En mi caso iniciaré el servidor de PostgreSQL con:

/usr/local/pgsql/bin/pg_ctl -D /usr/local/pgsql/data -l logfile start

Y lo terminaré con:

/usr/local/pgsql/bin/pg_ctl -D /usr/local/pgsql/data -l logfile stop

Cabe recordar que estos comandos sólo funcionan desde el usuario postgres así que siempre habrá que iniciar su sesión escribiendo antes:

$ su -l postgres
$ /usr/local/pgsql/bin/pg_ctl -D /usr/local/pgsql/data -l logfile start

Ahora que está el servidor corriendo, podemos cerrar todas las ventanas.

Crear los usuarios

La forma más fácil de crear los usuarios es abrir el software pgAdmin3, presionar el ENCHUFE para crear un nuevo servidor dentro del programa con los datos conocidos:

Agregando servidor localhost en pgAdmin III para Mac OS X

Una vez conectado, creamos un nuevo usuario desde Editar > Nuevo Objeto > Nueva rol de Login...

Editar > Nuevo Objeto > Nueva rol de Login...

Aquí se pueden usar nuestros propios datos que se usarán para conectarnos desde los códigos que podamos estar escribiendo.

Agregando datos de usuario de PostgreSQL en pgAdmin III para Mac OS X

Ya podemos crear una nueva base de datos

Menú contextual Crear nueva base de datos

Para el nuevo usuario recién creado

Asignando usuario de nueva base de datos
Recomiendo utilizar la codificación de caracteres UTF-8 como estándar si vamos a usar caracteres que no están en el idioma inglés, como la é con tilde.

Si nos desconectamos (con el mismo ENCHUFE), por seguridad deberíamos ir a Propiedades

Menú contextual Propiedades de la base de datos

... Y cambiar el nombre de la base de datos (BD de Mantenimiento) y el usuario dueño de esa base datos que recién configuramos.

Cambiando datos de base de dato PostgreSQL en PgAdmin III para Mac OS X

Cuando nos volvamos a conectar, nos va a volver a pedir la contraseña del usuario nuevo.

Por favor ingrese la contraseña

Y una vez conectados a la base de datos local, deberíamos tener un PostgreSQL completo funcionando en nuestro computador.

Tablas, triggers y vistas de PostgreSQL en PgAdmin III en español

[ACTUALIZACIÓN] Para que la instalación quede completa, faltó mencionar cómo agregar el lenguaje PL/pgSQL a PostgreSQL.

Palabras finales

Aprendimos a instalar PostgreSQL de manera sencilla en la máquina local desde el código fuente. Ahora sólo me falta aprender a hacer que se inicie automáticamente cada vez que se enciende el computador o crear un alias que inicie la base de datos con un simple doble click y sin escribir los complicados comandos:

su -l postgres
/usr/local/pgsql/bin/pg_ctl -D /usr/local/pgsql/data -l logfile start

También es conveniente agregar el directorio /usr/local/pgsql/bin/ al PATH

Referencias

Artículos relacionados

Etiquetas: , , ,

5.5.08. 4 comentarios E-mail

Agregando citas web en la Wikipedia en español

25.4.08. Por ooscarr (ooscarr)

Muchas personas ocupan Wikipedia día a día para hacer sus tareas o incluso para saber de qué está hablando alguna persona dentro de una conversación; yo mismo me he visto empezando a leer un artículo y terminar estudiando temas que ni me imaginaba. Después de un tiempo uno se entusiasma y comienza a arreglar y hasta crear artículos nuevos. He aquí una ayuda para usuarios experimentados de cómo crear citas o vínculos al pie de una página en un artículo.

El sistema de Wikipedia

Wikipedia funciona bajo un sistema de publicación llamado wiki, que incluso se puede descargar, modificar y usar en algún proyecto privado bajo una red local o Internet para crear una propia wikipedia acerca de algún tema específico. Hoy en día, el sistema wiki es usado abiertamente como una excelente herramienta en algunas empresas o grupos para organizar y editar colectivamente todo el conocimiento que se posee sobre algo como información sobre clientes, procedimientos y documentación interna, estado y explicación de partes de un proyecto largo, sistemas de ayuda, registro de enfermedades, personajes de Star Wars, celebridades, etc.

La redacción o edición de artículos con formato enriquecido se hace por medio de una serie de caracteres específicos que, una vez que se guarda el artículo, son automáticamente interpretados como instrucciones para convertir por ejemplo un texto encerrado en subtítulo, negritas, listas, vínculos a otros artículos, vínculos a páginas externas, etc. También existen otros muy especiales que el sistema convierte en formatos más avanzados como lo son, entre muchos: las imágenes, categorías, cuadros resúmenes, índices o, como en este caso vamos a ver, vínculos al pie de página. Estos últimos, utilizan generalmente una combinación entre código XHTML y los códigos internos que usa el sistema de wikipedia.

Ya, qué bueno, pero quiero los códigos

OK. Primero tengo que decir que los códigos de la wikipedia en español están también traducidos al español, así que el mismo código que se usa en la wikipedia en inglés no va a funcionar en otra versión de wikipedia que no esté en inglés.

Las citas web se dividen en 2 partes:

La parte de los links
Cuando se ponen esos numeritos que al apretarlos lleva directo al pie de la página
El pie de página.
Que es donde van el vinculo y la descripción de qué podremos encontrar ahí. La lista de referencias.

La parte de los links

La parte de los links se llama en cualquier parte donde queramos poner los famosos numeritos, por ejemplo: 1.

Para que ese numerito aparezca, hay que insertar el siguiente código (algunas lineas son opcionales) entre medio del texto:

<ref name="xxx">{{cita web
|url =
|título =
|fechaacceso =
|añoacceso =
|autor =
|último =
|primero =
|enlaceautor =
|coautores =
|fecha =
|año =
|mes =
|formato =
|obra =
|editorial =
|páginas =
|idioma =
|doi =
|urlarchivo =
|fechaarchivo =
|cita =
}} aquí un corto texto de descipción opcional </ref>

Observa el siguiente código de ejemplo:

<ref name="meteoros">{{cita web
 | url = http://www.meteoros.de/arten/ee23e.htm
 | título = Circumhorizontal arc
 | editorial = Arbeitskreis Meteore e.V.
 | fechaacceso = 22 de abril
 | añoacceso = 2007
 | idioma = inglés
}} (Incluye una foto que muestra
 un arco circunhorizontal sobre [[Mont Blanc]]
 en 1988.)</ref>

Como se puede apreciar, no utilicé todas las variables propuestas; y en general, se trata de simplemente la información que aparecerá en el pie de la página cuando hagamos click en el numerito que automáticamente se pondrá. Los numeritos se incrementarán automáticamente.

Las fechas se dividen en fechaacceso, que sería el día y el mes en palabras; y añoacceso, que obviamente es el año. Ver ejemplo. Sirve para indicar en qué fecha de la página se obtuvo la información en caso de que la página web que se encuentra en esa dirección eventualmente cambie.

Es muy importante que el atributo name sea único (en este caso name="meteoros”) ya que este nombre identificará a qué referencia ir en caso de que se tenga más de una. Si más adelante en el texto se quiere volver a hacer referencia a una página que ya fue referenciada anteriormente, basta incluir:

<ref name="meteoros" />

y como la referencia con el atributo name="meteroros" ya había sido definida, Wikipedia automáticamente le asignará el mismo número y al hacer click en él, le llevará a la misma referencia en el pie de página.

El pie de página

La parte de la lista de referencias que aparece abajo se genera automáticamente. Pero hace falta invocarla en el final de texto con el siguiente código:

== Referencias y notas ==
{{listaref}}

Y eso es todo

En este caso vimos lo que son las referencias o citas a páginas web. Pero en el caso de referencias o citas a libros, capítulos de libros, papers, artículos de un periódico o revistas, se utilizan otros códigos. Estos códigos y más información se pueden encontrar en la página de ayuda de la Wikipedia en español. lo mejor lo escribo aquí más adelante.

Referencias

Etiquetas: ,

25.4.08. 0 comentarios E-mail

¿Cómo controlar Last.fm con el Apple Remote Control?

30.3.08. Por ooscarr (ooscarr)

Introducción

Actualmente el cliente reproductor de Last.fm para Mac no ofrece la opción de controlarlo con el Apple Remote Control que venía incluido en las primeras macs con Intel como sí lo hace iTunes y otros programas como los de presentaciones. Como yo no bajo música ilegalmente, el reproductor Last.fm lo es todo para mí y poder controlarlo a distancia es lo que yo más andaba buscando. Escarbando en Internet, encontré un programa para darle acciones al control remoto de Apple y aquí mostraré cómo configurarlo con Last.fm.

iRed Lite

iRed Lite

iRed Lite es una aplicación que se adueña del receptor infrarojo mientras está abierta y permite controlar distintas aplicaciones configurándolo adecuadamente. Lamentablemente no es Open Source pero sí es gratuito (por ahora) a diferencia de otras soluciones como Remote Buddy (€19.99). De hecho, iRed Lite parece ser una alternativa gratuita y menos acabada de Remote Buddy.

Con todo ese poder de controlar y cargar cualquier aplicación más la capacidad de los receptores infrarojos de Apple de poder también transmitir, fácilmente se podrían controlar todos los equipos de la casa como el televisor, el equipo de música, el aire acondicionado y hasta el portón del auto y el mismo sistema de alarma del auto con el simple Apple Remote de 6 botones! O estoy exagerando...

Configuración

Leyendo el Manual, aprendí estas instrucciones:

  1. Una vez descargado e instalado, hay que abrir el Editor.
    Icon, Show Panel
  2. Creamos un nuevo Layer presionando el Engranaje > New Layer. Le ponemos un título (Title: Last.fm), lo activamos con la aplicación Last.fm.app (Activate layer with application Last.fm.app) y ponemos Guardar (Save)
    Icon, Show Panel
  3. Luego, presionamos el triangulito que está en la esquina inferior derecha de la ventana para abrir el espectacular editor avanzado
    Triangulito en la punta de la ventana
  4. Agregamos una nueva aplicación llamada "Last.fm" y un nuevo grupo (Groups) llamado "Controles".
    Agregar con el botón +
  5. De ahí, agregamos una nueva acción de tipo teclado (+ Add Action ... > Keystroke) y la llamamos "Skip", por ejemplo.
    Keystroke
  6. Abajo, ponemos "Last.fm.app" como Target Application. En el campo Special Key presionamos la tecla → y marcamos el checkbox de command (⌘). También podemos marcar Bring to front para ver qué canción va a sonar.
    command RIGHT
  7. Lo mismo se puede hacer para subir el volumen y bajarlo. Al final presionamos Save y de nuevo el triangulito para cerrar el espectacular editor avanzado.
    Save
  8. En la ficha Button, arriba donde está la imagen presionamos el dibujo del botón derecho. Abajo, para asignarle una acción a ese botón marcado con amarillo, le ponemos un "Title: Skip", en el sector derecho Application, Last.fm, Controles, Skip y el botón Save. Lo mismo para subir y bajar volumen, seleccionando primero los botones + y - en el dibujo de arriba.
    Yellow buttons
  9. Listo. Ahora para controlar el reproductor Last.fm abrimos el iRed Lite, presionamos un segundo el botón MENU del control, buscamos el layer Last.fm, presionamos Play y cada vez que presionemos adelante, el cliente Last.fm saltará la canción.
    OSD Panel

Palabras finales

Ahora que tengo todo co