Archivo de la categoría: desarrollo web

Artículos sobre desarrollo de aplicaciones web.

Katamari Hack

[singlepic=717,160,,,left]¿Jugaron alguna vez Katamari Damacy? ¿no? yo tampoco… :(
Pero ahora tenemos la oportunidad de saborear una probadita de su mecánica de juego sobre cualquier página web.

¡A rodar se ha dicho! :D

Arrastra el siguiente enlace a tu barra de marcadores para poder activarlo sobre cualquier sitio fácilmente, o simplemente da clic aquí: ¡Katamari!

O copia y pega este código en la barra del URL de tu navegador cuando visites otra página:

1
javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

Te aparecerá un diálogo con opciones de configuración, presiona Start! para comenzar.
Para controlar la katamari (pelota) sólo deja presionado el botón derecho de tu ratón.

(funciona mejor en chrome)

Depredado en

Katamari Hack

goedkope energie

Missing host to link to! Please provide :host parameter or set default_url_options[:host]

[singlepic=484,60,,,left]

Contexto: Desarrollo de aplicación web con Rails 3.
Obtuve el siguiente error al estar jugando con la característica lockable en Devise:

ActionView::Template::Error (Missing host to link to! Please provide :host parameter or set default_url_options[:host])

Investigando un poco me topé con que la solución consistía en hacer caso a la indicación que aparece en el README de Devise. Je.

Necesitamos configurar en cada ambiente (development, production, etc.) las URLs que se emplearán en el envío de correos electrónicos:

Aquí está la configuración para config/environments/development.rb:

1
config.action_mailer.default_url_options = { :host => 'localhost:3000' }

Y aquí una de ejemplo para config/environments/production.rb:

1
config.action_mailer.default_url_options = { :host => 'lobotuerto.com' }

Aprende acerca del posicionamiento con CSS

Seguramente has visto código como este en algunas hojas de estilo CSS:

1
2
3
4
5
6
7
8
9
10
11
12
#div-1 {
  position:relative;
  top:20px;
  left:-40px;
}
 
#div-1a {
  position:absolute;
  top:0;
  right:0;
  width:200px;
}

Pero, ¿te has preguntado qué hacen, cómo funcionan o cómo interactúan exactamente las posiciones absolute y relative?

¿Si? Pues yo también, y fue hasta que encontré este sitio que todas mis dudas fueron despejadas:
Learn CSS Positioning in Ten Steps

¡Una lectura bastante recomendada, si andas en el rollo del diseño web! :)

Un reproductor multimedia de código abierto para aplicaciones web

[singlepic=704,180,,,left]

¿Eres un desarrollador de aplicaciones web (Rails, PHP, ASP, etc.) y necesitas reproducir video o música y no estás seguro de qué usar?

Te presento Flowplayer: Reproductor Flash de video para la web.

Flowplayer es un reproductor de video de código abierto (GPL 3) para la web. Úsalo para embeber videos y películas en tus páginas y sitios.

Descárgalo aquí.

Cómo instalar PostgreSQL en Ubuntu 11.04

[singlepic=668,160,,,left]

Acabo de incorporarme a un proyecto en Rails en el que usan PostgreSQL, y como recién formateé y le puse Ubuntu 9.04 a la laptop, necesito ahora instalar este manejador de base de datos.

Y es un buen pretexto para por fin escribir la guía de cómo instalarlo en Ubuntu.

Como siempre, vamos a la terminal (Aplicaciones → Accesorios → Terminal) y tecleamos:

1
sudo apt-get install postgresql postgresql-client postgresql-contrib libpq-dev pgadmin3

Eso instala el cliente y servidor de la base de datos, algunos scripts de utilería y la aplicación pgAdmin para administrar la base de datos. El paquete de libpq-dev nos servirá para poder compilar la gema Ruby de PostgreSQL más adelante.

Confirmemos que la instalación terminó adecuadamente teclando:

1
psql --version

En mi caso la respuesta fue:
psql (PostgreSQL) 8.4.7

Cambiar la contraseña del usuario administrador

Ahora necesitamos establecer la contraseña del usuario administrador postgres. Teclea la siguiente línea en la terminal (cambia la palabra password por la contraseña que desees usar):

1
2
3
sudo su postgres -c psql
ALTER USER postgres WITH PASSWORD 'password';
q

Eso altera la contraseña dentro de la base de datos, ahora necesitamos hacer lo mismo para el usuario Linux postgres:

1
2
sudo passwd -d postgres
sudo su postgres -c passwd

Te aparecerá un prompt, introduce la misma contraseña que pusiste antes.

Poner a punto pgAdmin

Listo, de ahora en adelante podemos usar pgAdmin o la terminal para administrar nuestra base de datos como el usuario postgres. Pero antes de que te metas a pgAdmin deberías configurar el PostgreSQL Admin Pack, que te permite llevar un mejor registro y monitoreo de tu base de datos.

Ejecuta lo siguiente desde la línea de comandos en tu terminal:

1
sudo su postgres -c psql < /usr/share/postgresql/8.4/contrib/adminpack.sql

Para ejecutar pgAdmin ve a tu menú de aplicaciones:
Aplicaciones → Programación → pgAdmin III

Cambiar el esquema de autentificación de PostgreSQL

Al ejecutar algunos comandos de base de datos, es posible que te encuentres con un error que dice algo como:

FATAL: la autentificación Ident falló para el usuario «x»

Para evitarlo necesitas editar el archivo /etc/postgresql/8.4/main/pg_hba.conf y cambiar el esquema de autentificación. Abre el archivo con privilegios de root:

1
sudo gedit /etc/postgresql/8.4/main/pg_hba.conf

Y cambia esto:

1
2
# Database administrative login by UNIX sockets
local   all         postgres                          ident

Por:

1
2
# Database administrative login by UNIX sockets
local   all         postgres                          md5

Reinicia el servidor de PostgreSQL tecleando en tu terminal:

1
sudo /etc/init.d/postgresql restart

PostgreSQL Ruby gem

Si planeas usar PostgreSQL dentro de Ruby, necesitarás esto:

1
gem install pg

Si deseas instalar la gema desde código fuente, sigue estas instrucciones.

En Rails 3, puedes crear una aplicación configurada para usar PostgreSQL con este comando:

1
rails new mi-nueva-aplicacion -d postgresql

¡Listo! :D

Recursos

Install PostgreSQL on Ubuntu 8.04 (cómo acceder de manera remota a tu servidor)
Switching Rails to PostgreSQL

Enlaces sobre desarrollo web

[singlepic=575,120,,,left]

Aquí les traigo una serie de enlaces a diferentes artículos y tutoriales, que tratan el tema del desarrollo web, espero les sean útiles:

Ahora que Javascript no es menospreciado, ¿a quién no le gustaría aprender algo de Javascript avanzado?

O si no eres avanzado, tal vez te interese conocer 24 mejores prácticas con Javascript para principiantes.

También por ahí anda un artículo con 30 mejores prácticas con HTML para principiantes

Cuando te sientas un poco suelto en el webdev, podrías echarle una mirada a detalle al 960 CSS Framework, un framework en CSS para desarrollo rápido de aplicaciones web.

Andando en los frameworks, ¿por qué no conocer 10 maneras de incrementar tu desempeño en jQuery? Y de paso aprender a hacer animaciones asombrosas con jQuery.
O un slideshow, al estilo de algún software de presentación ¡pero en la red!

Y ya que seas todo un master, puedes darte una vuelta por las instrucciones paso a paso para usar la API de Google Maps.

Ext JS 3.0 ya está aquí

[singlepic=651,60,,,left]

Fue liberada hace unos días la versión 3.0 de este framework para desarrollo de aplicaciones web.

Entre sus monerías incluye:

  • Soporte para peticiones directas, CRUD y REST
  • Nuevos ejemplos y componentes (incluye un componente para gráficas)
  • Más de 1,000 mejoras y correcciones – administración de memoria mejorada para IE6 (¡guácala!)
  • API documentada y CSS refactorizado
  • Compatibilidad con versiones anteriores

Aquí puedes ver una lista más detallada sobre lo nuevo.
O revisar algunas de las cosas que puedes hacer con él.

Recopilador de complementos para Firefox

[singlepic=475,90,,,left]

A veces se volvía algo tedioso el tener que apuntar todas las extensiones y agregados que uso en mi Firefox, para poder instalarlas en otro lado.

Al parecer no soy el único con este problema. Ya que, para aliviar esta situación, Mozilla decidió crear un recopilador de complementos.

Como su nombre lo indica, este agregado nos permite suscribirnos a paquetes probados y recomendados de extensiones útiles para nuestro Firefox. Y también, nos permite crear nuestras propias colecciones para después compartirlas con nuestros amigos y el mundo.

Por ejemplo, tenemos que hay una colección llamada Web Developer’s Toolbox que incluye cosas como: Firebug, Web Developer, FireFTP, Tamper Data entre otros. Tenemos también la lista de las más populares.

Muy recomendable. :)

Aquí te puedes dar una idea de las mejores extensiones que hay en este momento para Firefox:
Top 10 Must-Have Firefox Extensions, 2009 Edition

RubyCamp México

[singlepic=608,160,,,left]

¡Para todos los fans de los barcamps y Ruby (♥) viene ahora RubyCamp Ciudad de Mexico – IFUNAM! :D

¿Qué es un RubyCamp?

Un RubyCamp es un conjunto de “desconferencias” (eventos abiertos y participativos) que tendrán como temas principales:

  • El lenguaje de programación Ruby
  • Ruby On Rails, Merb, Sinatra, etc

Cuyo contenido será provisto por los participantes. Este RubyCamp se realizará en el Instituto de Física de la UNAM el día 05 de junio de 2009 (¡este viernes!).

¿Cómo me puedo registrar?

Registro RubyCamp (es un evento sin costo)
Pueden ver más información en el siguiente enlace: Rubycamp

Seguramente andaré por ahí, si se animan allá vemos. ;)

Ext JS 2.2 liberado

[singlepic=510,120,,,left]

Siendo un ávido desarrollador de aplicaciones web, Ext JS se ha convertido en una herramienta imprescindible en mi stack de programación.

Ahora me llega la excelente noticia de que Ext 2.2 ha sido liberado. Y al parecer con un buen de mejoras y un par de componentes y ejemplos nuevos a pesar de ser sólo una versión de mantenimiento.

Lo nuevo

  • CheckboxGroup / RadioGroup
    Por fin soporte “oficial” para checkboxes y radiobuttons al más puro estilo Ext (demo).
  • History
    Ya podremos manipular el botón de “Back” de nuestro navegador para que coopere con nuestra aplicación de una sola página hecha en Ext (demo).
  • MultiSelect / ItemSelector
    Seleccionar múltiples elementos en las listas (demo).
  • FileUploadField
    Este componente es invaluable si tu aplicación debe permitir a los usuarios enviar archivos al servidor (demo).
  • XmlTreeLoader
    Componente para cargar un documento XML como árbol (demo).
  • GMapPanel
    Componente para cargar un mapa de Google en un panel de Ext. El ejemplo muestra como se puede extender un componente de Ext para que se comunique con una API externa (demo).

Otros cambios notables

  • Soporte total para Firefox 3
    Ext JS 2.2 ahora funciona mejor en Firefox 3. Se han corregido una serie de problemas visuales que presentaban algunos componentes como el DatePicker.
  • Ejemplos avanzados de Drag and Drop
    • Cómo implementar las clases Ext.DragZone/DropZone en el contexto de una aplicación de negocios (demo).
    • Arrastrar y soltar elementos de una grilla a otra (demo).
    • Arrastrar elementos de una grilla y soltarlos sobre una forma para poblar sus campos (demo).
  • Mejoras en rendimiento, corrección de bugs y más
    Mejoras en el rendereo de las grillas y corrección de algunos detalles con IE.

¡Ya lo quiero probar!

Para descargar el nuevo Ext 2.2, da clic aquí.
Pueden leer información más detallada sobre esta versión en: Ext 2.2 Released.