Category: Artí­culos

Artí­culos sobre Diseño y Programación Web

Categories
Artí­culos CSS Diseño Google

Usando Google Font Api y Google Font Directory

Google acaba de anunciar la creación de un directorio de Fuentes Open Source que se pueden utilizar en nuestros sitios mediante una API.

Bajo el lema “Haciendo hermosa la web” podemos por ahora usar una lista de 18 fuentes con sus respectivas variantes.

¿Cómo usarlo?

El ejemplo que nos dejan es muy sencillo. Primero agregamos esta línea entre las etiquetas <head>:

HTML:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light" />

Y luego para que se vea en nuestra página agregamos el siguiente código CSS:

CSS:

                body {
                        font-family: 'Josefin Sans Std Light', arial, serif;
                        font-size: 48px;
                }

Donde el valor del parámetro family en el atributo href es la fuente que queremos usar. En el ejemplo escogí la fuente Josefin+Sans+Std+Light ya que es la fuente más parecida al logo de Buayacorp :).

El resultado con alguito de color:

google-font-buayacor-white

Y añadiendo alguito de código:

CSS:

                body {
                        font-family: 'Josefin Sans Std Light', arial, serif;
                        font-size: 48px;
                        text-shadow: 2px 2px 4px #aaa;
                        letter-spacing: -5px;
                        background: #4b4b4b;
                }

google-font-buayacor-gray

Ver el ejemplo >

¿Cómo funciona?

Básicamente lo que hace es usar la regla @font-face de CSS3. Revisando un poco el código veremos que estas fuentes funcionarán sólamente en en modo “screen” y no en impresión.

CSS:

@media screen {
@font-face {
  font-family: 'Josefin Sans Std Light';
  font-style: normal;
  font-weight: normal;
  src: local('Josefin Sans Std Light'), url('http://themes.googleusercontent.com/font?kit=doRWK9Qks0OQGenH-kW8nsnX9wMe89zs2uzox0MWMfk') format('truetype');
}
}

Vemos que tampoco funcionarán en navegadores antiguos.

Esperemos que con este tipo de ayudas, no se cometa el error del pasado de abusar como se hacía con la etiqueta <font>.

Es cierto que se podría lograr maravillas usando esta regla, sin embargo no se debe abusar de su uso.

Enlaces

Categories
Artí­culos drupal Open Source PHP Ubercart

Ubercart para productos de tipo “servicio”

Este es un post de varios que empezaremos sobre Drupal.

Ubercart es un poderoso módulo de Drupal para vender productos o servicios.

Por defecto este módulo nos permite crear el tipo de nodo "Producto" con atributos de envío como peso, altura, etc.

Sin embargo unos proyectos que estoy haciendo necesité quitar este tipo de atributos para ofrecer sólo servicios. Un ejemplo sería por ejemplo ofrecer Tours.

Para esto he creado un pequeño módulo que básicamente oculta estos campos usando el hook_form_alter de la API de Drupal sin alterar el core de Ubercart. El código es el siguiente:

PHP:

function uc_service_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == "product_node_form") {
          
          // Precios
          $form['base']['prices']['list_price']["#type"]        = 'hidden';
          $form['base']['prices']['cost']["#type"]                = 'hidden';
          
          // Producto Físico
          $form['base']['shippable']['#type']         = 'hidden';
          $form['base']['shippable']['#default_value']   = FALSE;
          
          // Peso
          unset($form['base']['weight']);
          
          // Dimensiones
          unset($form['base']['dimensions']);
          
          // Cantidades
          $form['base']['default_qty']["#type"]                         = 'hidden';
          $form['base']['default_qty']["#default_value"]        = 0;
          
          unset($form['base']['pkg_qty']);
  }
}
 

Instalación

  1. Descomprimir el archivo
  2. Copiar la carpeta uc_service en /sites/all/modules/ o /modules/ depende donde hayas instalado Ubercart.
  3. Activar el módulo en /admin/build/modules/.
  4. Crear tus productos tipo servicio.

He probado este módulo en algunos sitios y todo va bien, sin embargo cualquier observación háganmelo saber.

Descargar el módulo uc_service.

Categories
Artí­culos Diseño Varios Web

¿Me puedes hacer una página web?

Braulito, tú haces páginas web, ¿verdad? ¿me puedes hacer una?, pero por favor cóbrame baratito nomás.

Ésta es la frase común que escucho cuando alguien me pide un trabajo. Mucha gente tiene la idea equivocada de que una "página web", como suelen llamarle, es algo simple de hacer y que se podría hacer de un día para otro.

Cusco es una ciudad turística y por ende hay muchas empresas relacionadas a éste sector que requieren sitios web para vender sus productos al extranjero. Sin embargo, la mayoría de la gente que está tras este negocio, tiene la rara creencia de que un sitio web se hace rápidamente y que hacerlo no cuesta casi nada. Esto se debe porque existen muchas personas que se dedican a hacer sitios web -- generalmente no de muy buena calidad -- que cobran muy bajo.

Continue reading "¿Me puedes hacer una página web?"
Categories
Artí­culos

Reducir el tamaño de discos virtuales en VMWare

Una de las cosas que tenía pendiente antes de que mi disco anterior pasara a mejor vida, era reducir el tamaño del disco virtual que usaba para Debian Sid sobre VMWare, puesto inicialmente asigné 16GB al tamaño del disco, de los cuales -- como pueden ver en la imagen -- tan sólo usaba alrededor de 2GB pero el archivo generado era de 9GB.

VMWare Virtual Disks

El proceso es relativamente sencillo y consiste en agregar un nuevo disco virtual y clonar los contenidos del anterior. Los siguientes pasos son necesarios sólo si no tienen instalado algo que les permita modificar de manera fácil las propiedades de la máquina virtual (en otras palabras, si no instalaron VMWare Workstation):

  • Crear copia de seguridad del archivo de configuración de la máquina virtual.

  • Crear y añadir un nuevo disco virtual: para obtener un nuevo disco pueden descargar discos vacíos o crearlo usando QEMU con la siguiente orden:

    code:

    qemu-img create -f vmdk disco-nuevo.vmdk 5G

    .

    A continuación, se debe editar el fichero de configuración de la máquina virtual y agregar los siguiente:

    code:

    ## Si usan discos SCSI

    scsi0:1.present = "TRUE"
    scsi0:1.fileName = "disco-nuevo.vmdk"
    scsi0:1.redo = ""

    ## Si usan discos IDE

    ide0:1.present = "TRUE"
    ide0:1.fileName = "disco-nuevo.vmdk"

     

  • Clonar el disco anterior en el nuevo disco: para esta tarea pueden usar cualquier software que permita clonar discos y soporte el sistema de archivos del sistema operativo instalado sobre VMWare. En mi caso hice uso de la versión DOS de Norton Ghost, el cual -- como seguramente ya saben -- pueden conseguirlo gracias al buscador y/o cliente P2P/BitTorrent que prefieran. 🙄

    VMWare Norton Ghost

  • Quitar el disco anterior e iniciar la máquina virtual: para esto volvemos a editar el archivo de configuración y quitamos las líneas agregadas en el primer paso y luego reemplazamos todas las referencias del disco anterior por el nuevo. Los que no quieren complicarse la vida pueden crear una nueva máquina virtual.

    Uno de los problemas que tuve y por motivos técnicos que desconozco, fue que GRUB no terminaba de cargar, pero esto fue resuelto fácilmente con Super Grub Disk.

Luego de unos minutos finalmente logré mi objetivo: 🙂

code:

alex@hell:~$ df -h
S.ficheros          Tamaño Usado  Disp Uso% Montado en
/dev/sda1             4.2G  2.7G  1.4G  67% /
tmpfs                  62M     0   62M   0% /lib/init/rw
udev                   10M   52K   10M   1% /dev
tmpfs                  62M     0   62M   0% /dev/shm
alex@hell:~$

Lo bueno de esta forma para reducir el tamaño de discos virtuales es que no hay que sacar una copia de seguridad de los discos, tan sólo del archivo de configuración -- aunque tampoco es estrictamente útil ya que podemos crear nuevas máquinas virtuales importando los discos anteriores.

Categories
Artí­culos

TortoiseSVN: Reducir la actividad en el disco

TortoiseSVN es un cliente gráfico para Subversion que se integra con el shell de Windows, gracias a esta integración es posible que los cambios hechos sobre un proyecto se diferencien a través de los íconos que se asignan de acuerdo a diferentes estados que puede tener un archivo.

TortoiseSVN icon overlays

Pero como todo en la vida, nada viene gratis 🙂 , puesto que ésta característica puede funcionar de dos formas:

Por omisión

Se almacena el caché de estado en un proceso separado (TSVNCache.exe). Este proceso está al tanto de los cambios que se realizan en todas las particiones.

Shell

El cacheo se realiza directamente dentro de la dll de la extensión del shell, pero sólo para la carpeta actualmente visible. Cada vez que navega a otra carpeta, se obtiene de nuevo la información de estado.

TortoiseSVN Icon Overlays Settings

Retomando el punto, para reducir la actividad en disco que realiza el proceso TSVNCache.exe se tiene que hacer uso de las opciones Exclude/Include paths de modo que sólo se limite la verificación de cambios al directorio donde están ubicados nuestros proyectos. Un ejemplo para un disco con tres particiones podría ser:

code:

Exclude paths:
C:\*
D:\*
E:\*

Include paths:
D:\SVN\*

Con estos cambios seguramente reduciran muchos eventos que se realizan sobre archivos o carpetas, que dicho sea de paso, pueden verlo con FileMon.