Retrorock

Algunas herramientas que le pueden hacer la vida mas fácil a un web designer

wilburhimself — Thu, 19 Jan 2012 05:17:20 +0000

Día a día quienes nos dedicamos al diseño web tenemos que repetir muchas cosas que hacemos a diario, por eso estoy haciendo una colección con algunas herramientas online que uso para facilitarme el trabajo.

Es seguro que aquí no estén todas las herramientas que hubiese querido poner, pero pienso ir actualizando este post para ir agregando nuevas herramientas.

CSS Generators

Sprite Generators

CSS/Javascript Compressors

Fonts

Layouts and grids

Algunos recursos para comenzar con Backbone.js

wilburhimself — Mon, 16 Jan 2012 07:58:48 +0000

Poco a poco estamos viendo Backbone.js por todos lados, por su capacidad de vincular eventos de diferentes elementos de la interfaz web, la facilidad que ofrece a los programadores de organizar aplicaciones grandes con Javascript siguiendo una arquitectura con modelos y Vistas y la flexibilidad para elegir cualquier sistema de templates.

Revisando en mis bookmarks he decidido hacer una lista de recursos para aprender sobre Backbone.js y algunos temas relacionados. Todo comienza con Understanding MVC And MVP (For JavaScript And Backbone Developers)

Aparte de los enlaces superiores que solo están dedicados a Backbone.js también quise poner algunos enlaces que tratan de temas relacionados muy estrechamente.

Creo que esta lista vá a ir creciendo con el tiempo y según mis bookmarks, no es que haya buscado, pero me gustaría encontrar tambien posts sobre Backbone.js en español.

Si tienes algún enlace que pueda agregar en la lista escríbelo en un comentario.

Como utilizar los comentarios de Facebook en WordPress

wilburhimself — Fri, 13 Jan 2012 14:53:54 +0000

En estas líneas voy a escribir sobre como usar los comentarios de facebook (Facebook Comments) en un website construido con WordPress sin la necesidad de instalar un plugin para lograrlo.

Con esta explicación se pueden implementar los comentarios de Facebook en cualquier website, y es precisamente por eso que quería hacer notar como instalar los comentarios de Facebook sin el uso de un plugin, porque cada CMS tiene una manera distinta de implementar los comentarios, así que quise explicar como implementarlos en cualquier CMS de una forma parecida.

Paso 1 – Crear una applicación de Facebook.

Lo primero es crear una aplicación de Facebook para que represente a tu website. Esto se puede hacer en el centro de desarrolladores de Facebook. Haz click en + Crear Nueva Aplicación y entra el nombre de tu website, selecciona que aceptas los Facebook Platform Policies y continúa.

Una vez la App está creada vas a ser redirigido a una pantalla donde se pueden editar las propiedades de tu app. Ahora mismo no tienes que editar nada, solo hacer click en el link de Website y copiar la App ID. Este ID lo vas a utilizar posteriormente para indentificar a quienes pueden moderar los comentarios en tu website.

paso 2 – Añadir el Facebook Javascript SDK a WordPress

Ahora hay que agregar el Facebook Javascript SDK al template de WordPress. Agrega el código a continuación en el header.php justo antes de la etiqueta y sustituye el App ID que está en la linea 5 por el del paso anterior.

paso 3 – Agregando las herramientas de moderación

Mientras editas el … pega el código a continuación y sustituye de nuevo el App ID por el que copiaste en el paso 1. Esta etiqueta del Open Graph le dice a Facebook que asocie este website con la app especificada.

Paso 4 – Agregando el plugin de comentarios

Ya que has agregado el Javascript SDK al header de tu template, lo próximo que debes hacer es agregar el facebook comments plugin al archivo comments.php

Yo opté por eliminar los comentarios de WordPress de mi template, pero no tienes que hacer lo mismo, lo comentarios de Facebook y los de WordPress pueden co-existir.

Para agregar los comentarios a tu template crea o sustituye el archivo comments.php por el siguiente código:

Estas líneas van a verificar que los comentarios estén abiertos para esta entrada antes de insertar el código de los comentarios de Facebook. Se pueden cambiar la cantidad de comentarios (num_posts) y el ancho (width) para que cumpla con tus necesidades.

paso 5 – Comprobar los comentarios

Si ejecutaste todos los pasos anteriores correctamente, puedes dirgirte a una entrada cualquiera tu blog y bajar hacia donde están los comentarios y ver algo como esto:

Asumiendo que estás logueado en Facebook cuando haces esto deberías ver una opción para agregar comentario, vista del moderador y otra para editar las configuraciones, si no, debes verificar que la app Id del paso 1 están puestas correctamente en el header.

Para moderar los comentarios dirigete al Facebook comments moderation tool

Como superar un bloqueo mental

wilburhimself — Thu, 16 Jun 2011 02:49:36 +0000

Bloquearse mentalmente y no poder avanzar con sus proyectos o tareas es una de las situaciones mas dificiles para el desarrollo de las metas de una persona. Es muy dificil sobreponerse a un bloqueo mental porque en primer lugar casi nunca sabemos como llegó. No es fácil, pero es posible superarlo.

Todos los bloqueos mentales son diferentes para cada quien y para cada tarea individualmente, así que es difícil decir que lo que funcionaría en un caso funcione para el otro, pero despues de haber experimentado y leído sobre distintas metodologías, hago un resumen de algunas cosas que generalmente ayudan a retomar el paso frente a nuestros proyectos despues de no haber podido comenzar a trabajar en ellos en un momento dado.

Preguntate a ti mismo, que ganas con quedarte bloqueado?
Asegurate de conocer bien las herramientas con las que vas a trabajar para que no pases de largo las oportunidades de aprovechar el tiempo.
Asegurate de conocer bien la tarea que debes desarrollar, el problema que debes arreglar o la naturaleza del trabajo al que te vas a dedicar.
Ataca el problema varias veces, trata de conocer todas las perspectivas posibles del problema en cuestión
Escribe todas las ideas relevantes (y no relevantes) que puedas relacionar con el proyecto. Hazlo de una forma organizada.
Busca inspiración en proyectos pasados que hayas terminado tu o alguien que conozcas. Busca problemas similares y observa como otros los han resuelto.
Habla con amigos y colegas sobre tu trabajo y tambien sobre su trabajo, trata de resolver un problema similar al tuyo, pero en menor escala, observa si esto te trae una visión mas clara.
Encuentra alguien imparcial con quien comentar tu problema.
Planifica cual es el próximo paso una vez termines con este proyecto.

Si pudiste superar el bloqueo mental, recuerda celebrarlo. Celebra tu capacidad mental, es el regalo más grande que se te ha dado. Con tu mente tienes la capacidad y los recursos para superar cualquier reto y encontrarle soluciones a cualquier problema al que te enfrentes.

Mantén tus pensamientos frescos y tu creatividad fluirá y tus ideas van a crecer cada vez más.

no hay entradas relacionadas.

Templates para páginas según el path en Drupal 7

wilburhimself — Sat, 26 Mar 2011 01:51:24 +0000

Muchas veces queremos un template diferente para una página o una sección de nuestro website, con esta técnica podemos tener una dirección como:

example.com/portafolio

y que nos de el chance de tener un template específicamente para esa dirección, algo como

page–portafolio.tpl.php

Para que esto sea posible, debemos implementar el hook_preprocess_page y agregar las sugerencias de templates antes de pasarlo al theme system de Drupal.

Así se hacía en Drupal 6:

Así se hace en Drupal 7:

Las diferencias son claras! Bueno, quizas no tanto, pero las diferencias si son importantes, por ejemplo:

Antes los nombres de los templates utilizaban un solo guión – para separar las palabras, ahora usan dos guiones –
Cuando definimos el nombre del archivo que vamos a sugerir como template sustituimos el guión por dos underscores __ el theme system se encarga de traducir esto a — en el nombre del archivo.
Antes agregabamos la sugerencia a $vars['template_files'] ahora lo hacemos a $vars['theme_hook_suggestions']

Cabe recordar que este código va en el template.php de nuestro Theme.

Ideas of march

wilburhimself — Thu, 24 Mar 2011 15:15:10 +0000

Leyendo el link que me pasó el gran José me puse a pensar … donde está la comunidad de desarrolladores web de República Dominicana?

Somos muchos, buenos, pero no compartimos mas que en Twitter y tenemos mucho mas que compartir que 140 caracteres.

Soy un usuario de Twitter, me gusta mucho la espontaneidad, pero hay algunas caracteristicas que me vienen a la mente de lo que mas me gusta de los blogs y no son necesariamente las cosas que nos atraen a todos de Twitter:

Un blog post no se pierde casi instantáneamente en un timeline (usualmente lleno de tweets no relacionados a un mismo tema)
Yo particularmente uso mi blog como referencia para temas con los que estoy trabajando.
Un post puede ser tan largo o tan corto como uno quiera.
Es mas fácil mantener una conversación en un blog con los comentarios y trackbacks.
Se puede profundizar mas sin un límite de caracteres.
Los comentarios agregan valor a la conversación y ayudan a descubrir a nuevos recursos y personas según sus respuestas.

Mi relacion con mi blog es un poco mas distante que la de muchos, y a muchos de los que van a leer este post los he conocido por Twitter, pero sigo pensando en las cosas buenas de una blogósfera en la que debatimos temas que nos interesan y son relevantes para nuestro entorno autóctono que me animo a seguir pensando en las virtudes de que usemos mas nuestros blogs para mantener una conversación saludable sobre temas que nos interesan solo a nosotros y a nuestro entorno particular.

Hay muchos blogs abandonados me imagino que es por lo mismo, la conversacion se movio de los blogs a Twitter, asi que con mantener la blogosfera activa me refiero a que comentemos mas en los blogs, pongamos nuestros links en los comentarios y retomemos la conversacion que hemos dejado un poco atras, me imagino que es por el efecto de arrastre que ha tenido el hecho de que ya no usamos nuestros blogs.

La idea original de #ideasofmarch es de postear mas en nuestros blogs durante el mes de marzo, pero ya estamos un poco tarde para eso, asi que mi invitación es que usemos mas nuestros blogs en el 2011 que en el 2010.

Usando los Shortcodes de WordPress

wilburhimself — Sun, 12 Dec 2010 23:55:05 +0000

Los shortcodes son un feature muy poderoso y a mi parecer poco utilizado de WordPress. Imagina que pudieras agregar un anuncio de adsense o una lista de posts de una categoría dentro de un post.

Los shortcodes hacen eso y más y definitivamente van a lograr que tu vida desarrollando themes de WordPress sea más fácil.

Un ejemplo

Con este código podemos agregar un link a nuestro perfil de Twitter en nuestros posts escribiendo [twitter-link]

Un ejemplo mejor, Posts

Ya que podemos agregar este tipo de funcionalidad a nuestra edición de posts, vamos a hacer algo un poco más interesante, crear un shrotcode que nos permita integrar una lista de posts de una categoría determinada en nuestros posts, por ejemplo:

… esto podemos usarlo asi:

[category-posts category="programacion" num="5"]

Y en su lugar va a aparecer una lista de posts de la categoría programación dentro de nuestro post.

Res, Sainte Catherine

wilburhimself — Sun, 12 Dec 2010 08:44:44 +0000

La junta directiva del residencial Sainte Catherine nesecitaba una forma de comunicarse con los inquilinos directamente pero sin la necesidad de establecer reuniones con todos al mismo tiempo.

En este website los propietarios tienen un punto de acceso común a las actualizaciones y noticias del residencial como un listado con los teléfono y correos electrónicos de todos los miembros de la directiva.

El desarrollo de este website incluyo una lista de correos donde los administradores envían anuncios importantes a todos los inquilinos del residencial.

Este proyecto fué desarrollado con PHP y MySQL usando el framework Codeigniter.

no hay entradas relacionadas.

RM Real Estate

wilburhimself — Sun, 12 Dec 2010 08:12:31 +0000

RM Real Estate necesitaba una forma de publicar sus propiedades disponibles de forma fácil y con un sistema que les resultara familiar, con sus propios terminos.

Para este proyecto se desarrollo un sistema administrador de propiedades con PHP y MySQL y el framework Codeigniter.

Aparte de poder publicar sus propiedades necesitaban algo que nunca habían conseguido con las versiones anteriores de su website, que los visitantes encontraran con facilidad las propiedades que buscaran. Por esta razón utilizamos un sistema de busqueda de propiedades (faceted search) que filtra busquedas muy avanzadas sin que el usuario sienta que está haciendo un gran esfuerzo para encontrar lo que buscaba.

no hay entradas relacionadas.

Construyendo un Front Controller en PHP

wilburhimself — Sun, 28 Nov 2010 18:26:44 +0000

Un front controller maneja todos los request en una aplicación web y está estructurado usualmente en dos partes, el request handler, que es donde se interpretan los parametros y se ejecuta la segunda parte, el command hierarchy que es el comando o acción que debe ejecutar la aplicación, tambien conocido como Page controller.

En las aplicaciones con PHP el esquema más comun es tener un archivo index.php y decida que acción tomar dependiendo de los parametros GET que reciba.

Esta imagen representa una forma bien sencilla de Front Controller, donde el archivo index.php recibe el nombre del script que va a cargar en el variable $_GET['page']. Los scripts (actions) están almacenadas en el folder pages.

Todo el que ha usado PHP por más de dos horas ha implementado de una manera u otra un page controller, aunque sea usando un if/else para ver si un formulario se envio.

En este ejemplo, el page controller es about.php. Podría tener un código como este:

Una estructura más organizada

Podemos tomar ventaja de la lógica que podemos realizar cuando estamos manejando el request HTTP para organizar mejor el codigo de nuestra aplicación.

Podemos separar la presentación de la logica guardando los page controllers y los templates en directorios distintos, Que los page controllers decidan que templates utilizar en cada request.

Se puede mejorar incluso la estructura de las URL’s enviando todos los requests al archivo index.php con un .htaccess. El archivo index.php (front controller) se va a encargar de llamar las acciones necesarias.

Para comenzar a organizar mejor el código de la aplicacion, vamos a crear un directorio con el nombre controllers, donde vamos a guardar todos los page controllers de la aplicacion. Luego creamos otro directorio con el nombre de views donde vamos a guardar todos los templates.

Usando $_SERVER['QUERY_STRING']

Si tenemos una URL como http://example.com/about $_SERVER['QUERY_STRING'] va a ser about, una como http://example.com/about/us va a ser about/us, lo que nos da una pista de como podemos usar la URL para definir la estructura de un request a nuestra aplicación. Nuestro front controller ahora va a decidir que page controller llamar y que accion o metodo ejecutar y que parametros aplicar a este llamado, todo dependiendo de la URL.

Esta vez el código del front controller luce así:

Línea por línea el front controller ahora hace lo siguiente:

Toma el QUERY_STRING y lo parte donde hay un / usando la función explode que lo convierte en un array.
Toma el primer elemento del array y lo usa como controller, si está vacío usa el default ‘home’.
Toma el segundo elemento del array y lo usa como action, si está vacío usa el default ‘index’.
Toma los elementos restantes para paserselos como parametros al action.
Incluye el controller desde el directorio controllers.
por último ejecuta el action.

El controller about tiene este código:

Detecta un request Ajax con PHP