Hace rato que venimos trabajando en el proyecto que hace poco vió la luz: PagaTuAlquiler.com

Siempre sentimos la necesidad de crear algo propio, de transitar el gratificante y duro camino de llevar una pequeña idea (o quizas no tan pequeña) a la realidad. Sabíamos que no iba a ser fácil. Que la distancia entre esa idea viviendo en un papel medio garabateado y su aparición en la vida real es bastante grande. Igualmente nos embarcamos en el viaje y hace poco logramos nuestro primer objetivo, esa idea que estuvo alguna vez en el aire ya es una realidad. Es el primer paso, todavía queda mucho camino por recorrer y mejorar, pero el primer gran paso ya esta dado y estamos muy orgullosos de ello.

A partir de ahora vamos a estar concentrados en que PagaTuAlquiler siga avanzando y mejorando, tratando de llevarlo a donde nosotros soñamos que algún día llegará. Esto no significa que nosotros como Malbec Media dejemos de ofrecer nuestros servicios de desarrollo web y SEO, pero sí que lo haremos en menor medida, nuestras energias están concentradas en PagaTuAlquiler.

Saludos,

El equipo de Malbec Media

Fotografia de *clarity*

No related posts.

Pero más que eso, es cambiar como funcionan las cosas hoy en día. Se trata de hacerle la vida un poco mas fácil a la gente. Se trata de darle a la gente otra opción sobre como pueden administrar sus propiedades.

Link: PagaTuAlquiler

No related posts.

The idea

The site we are building for this tutorial will have a normal navigation, consisting of plain old links to the different pages. If javascript is enabled it will replace the default action of these links (for example going to a new page) with a new behavior: load the content using Ajax and refreshing the page without going to a new URL.

We’ll use the jQuery load function. This function will fetch the new page. It has a very useful feature (essential in our case) that lets you load a page fragment and not the whole page as right now we’re only interested in the main content div.

The HTML

<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Here we have the main navigation. It doesn’t have anything special, we only need the id of the navigation element containing the links we want to add this special behavior

<div id="ajax-wrap">
<div id="text">
</div>
</div>

Another important part is to create a div that wraps the content; this will be the div whose content will change when we move from page to page. Note we have two elements, the wrapper div and the actual element that has the content in it (in this case the div with the “text” id).

Also note that all the content pages are complete html pages by themselves. We load them with ajax and only use the content portion. If someone actually goes to the URL the link is pointing to, they should see a full page and not just the content portion. (This is key for the site to work without javascript, like a regular site).

Javascript

I’ve created a small javascript object that handles everything, here’s the code:

var AjaxContent = function(){
var container_div = '';
var content_div = '';
return {
getContent : function(url){
    $(container_div).animate({opacity:0}, //Turn the opacity to 0
        function(){ // the callback, loads the content with ajax
        $(container_div).load(url+" "+content_div, //only loads the selected portion
        function(){
            $(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
            }
        );
    });
},
ajaxify_links: function(elements){
    $(elements).click(function(){
        AjaxContent.getContent(this.href);
        return false; //prevents the link from beign followed
    });
},
init: function(params){ //sets the initial parameters
    container_div = params.containerDiv;
    content_div = params.contentDiv;
    return this; //returns the object in order to make it chainable
    }
    }
}();

We include this script on the pages (along with jQuery) and we’re ready to rock and roll. I’ll explain it little by little.

When the page loads, we have to identify the links and assign them some new events. Here’s the part where we initialize and set up the special nav.

$(function(){
    AjaxContent.init({containerDiv:"#ajax-wrap",contentDiv:"#text"}).ajaxify_links("#menu a");
});

This call initializes the AjaxContent object with the ids of the wrapper div and the content div (note the jquery [selector] notation). The second chained call tells which links we want to add this special behavior, in this case the links inside the element with the “menu” id (“#menu a”). This is it! It should work by now although let’s explain what’s going on inside.

ajaxify_links: function(elements){
    $(elements).click(function(){
        AjaxContent.getContent(this.href);
        return false;
    });
}

This is the method we called before. It selects all the elements passed using our jQuery selector string, in this case it takes all the links. For each one of them, it assigns a function to the click event. This function calls the getContent method and prevents the link from being followed by the browser (with the “return false” sentence).

getContent : function(url){
    $(container_div).animate({opacity:0}, //first, turn the opacity to 0
        function(){ //on the callback, load the content with ajax
            $(container_div).load(url+" "+content_div,
            function(){
                $(container_div).animate({opacity:1}); //and finally bring back the opacity back to 1
            }
        );
    });
}

This method fades out the container div. It then calls the load method and only retrieves the part that we want, in this case we’ve told the script to get the div with the “text” id (jQuery actually loads the whole HTML and then parses it, returning only the part we’ve asked for). When the content is loaded, it fades in the content again.

Conclusion

As you could see, thanks to the power of jQuery, this is really easy to do. We now have a fancy way to retrieve the content and keep the site looking like a normal non-ajax site to the ones who don’t use javascript. The site also remains both SEO friendly and fully accessible to the crawlers because the links are normal <a> elements with the href property.

Thanks to the guys on Solucija for the free template I’ve used for this example.

Happy coding!

Source files: and Demo

Related posts:

1. Cross-domain gif request with javascript
2. Use YSlow to optimize your site files
3. 5 Essential Firefox add-ons for web development

We’ve created a special site for them, using the power of the photos to show all the beautiful things that Mendoza has to offer.

Related posts:

1. Welcome to Malbec Media’s Blog

YSlow is an incredible tool that helps you optimize your site. It’s a Firebug Add on (the well known Firefox extension) that tests your web page, and lets you know  how your site can be optimized.

The test grades different aspects of your site and gives you possible solutions and advice if there’s something wrong.

Optimizing image files

Yslow comes with a tool called SmushIt. After opening the Yslow tab, you have to select the Tools option. When you click on “All Smush.it”, your images will be submitted to the SmushIt tool and a zip file containing all the optimized versions of your images will be available.

The cool thing about SmushIt is that uses loss-less optimization techniques, which means it optimizes the images without changing their look or visual quality.

More info here: Smush.It

Minify your javascript files

YSlow also helps you minify all the javascript files of your site. You have to choose the option “All JS Minified” from the YSlow tools. This will open a new page with all the javascript files minified. You just have to copy and paste in the new minified files and voila, you’re done.

YSlow

This tool has a lot more to offer, we just covered a couple of things you can do with it. If your site has a lot of images and big javascript files, this tool could help you save a little bandwith and help you give users a better experience.

Yslow

Related posts:

1. Coding a jQuery AJAX site that degrades gracefully
2. 5 Essential Firefox add-ons for web development
3. Cross-domain gif request with javascript

No related posts.

We’ve been using different techniques to protect our clients from spam such as encoding the email addresses we publish on their sites. Seeing how helpful this was we decided to make a tool that helps with that task that’s easy for anyone to use.

Our little email encoder is a simple service that takes your address and provides a javascript code to replace it. This code encrypts your email and uses the information (in an obfuscated way) to recreate the address on the client side.

The algorithm that makes the conversion works entirely with Javascript, on the client side, so no address is sent to us.

Hope you like it and thanks so much for the reviews!

Mailto Encoder

Related posts:

1. Prevent spam by encoding your email addresses
2. Cross-domain gif request with javascript

MailToEncoder: a simple but powerfull encoder we did, on of our weekend proyects

If you have your email published on your (or any other) site, and this site is being indexed by search engines, eventually you will end up with a mountain of spam in your inbox.

Why is this you ask?  Basically “spam bots” as they are called, are gathering email addresses from the internet, they work by using the search engines to find and look through sites, getting every email address they see. To fight the spam bots we need a way of preventing these little guys from taking our addresses while of course leaving a way for our visitors to see them.

A simple approach

This approach is widely used although not the safest ( much better than just typing your address as it is of course).
Here is how its done, when writing the email address we change it a bit. Example:

info [at] domain.com

myemail (at) domain.com

This leaves it still readable by humans although a little less bot friendly. You can vary the form (maybe you like using {} instead), to make it match your style.

Encoding your address

Another approach (my favorite) is to obfuscate the email in the source code, using a javascript code that reconstructs the address on the client side. While this sounds complicated its invisible for the end user and prevents the bots from seeing the address as most can not execute javascript.

Here’s a couple of resources that do that for you (they give you a  javascript code based on the address you want to encode):

Rumkin.com Mail encoder: very cool tool, has a lot of options.

MailToEncoder: a simple but powerful encoder we put together as one of our weekend projects

Encode!

Go ahead and encode the addresses you have published on your site, is never too late to fight spam!

Related posts:

1. Cross-domain gif request with javascript

El terreno del desarrollo web es amplio y variado, donde entran en juego un conjunto de disciplinas muy dispares. Esta explicación bastante abarcativa, trata de cubrir un poco el panorama.
A grandes rasgos podemos separar una aplicación web en 2 grandes partes, bastante distintas, que conviven entre sí, casi transparentemente a los ojos del usuario.

El usuario y su navegador

Estamos en las profundidades del browser y el procesamiento del lado del cliente. Aquí aparecen varias tecnologías involucradas, a grandes rasgos son: html + css, javascript y flash (siendo muy amplio podría incluir a applets java, aunque no es lo más frecuente de ver).

HTML + CSS

El diseño del sitio e interfaz de usuario puede verse muy lindo en Photoshop, pero a la hora de la verdad tiene que estar traducido (cortado se le suele decir) en HTML y CSS. Buenas prácticas de codificación, estándares web, divs, doctypes, compatibilidad entre navegadores (tratando de caerle bien a ese amigo que nadie quiere, pero que la realidad nos obliga a tener, IE6) y consideraciones para el SEO (optimización para motores de búsqueda) son algunos de los ingredientes de esta ensalada de fruta (y esto no termina acá).

Javascript

En pocas palabras, en único lenguaje de programación que entienden los navegadores nativamente (y no todos por igual :S). Animaciones sin flash, AJAX (Javascript asíncrono, la X de XML es debatible), y cualquier tipo de lógica ejecutada en el navegador, todas están a cargo de Javascript.

Con su sintaxis parecida a Java y C, es la manera de agregar algún tipo de inteligencia a las aplicaciones web.
Flash y applets java también son alternativas propietarias a la hora de programación del lado del cliente y los 2 requieren de agregados instalados en el cliente (realmente no son mi especialidad).
Dentro de el mundo de Javascript, hay varias librerías que extienden las funcionalidades nativas del lenguaje y permiten llevar la experiencia de usuario a otro nivel.

A nuestro entender son fundamentales a la hora de programar en javascript, facilitando mucho las cosas. La mayoría de las veces trabajamos con Jquery y su Jquery UI, en el pasado hemos usado Mootools, Prototype y Scriptaculous.

La parte de atras

El mundo del backend es otro cantar, el encargado de servir nuestras páginas y entregar los datos requeridos por nuestra aplicación es otra bestia totalmente diferente.

El protagonista aquí es el servidor web, encargado de recibir la petición, procesarla y devolvernos el resultado. Este resultado puede estar listo para ser mostrado en formato HTML, o bien en otra forma (xml, json, texto plano, etc.) para ser procesado por nuestra aplicación en el cliente.

Apache, Nginx, Lighttpd e IIS están entre los más usados, encargados de interactuar con los intérpretes de los distintos lenguajes: (dependiendo de la elección de tecnología) PHP, Ruby, Python, ASP, entre otros.

Dentro de los lenguajes de programación server-side tenemos al submundo de los frameworks. Un framework provee una estructura de soporte, mediante la cual el proyecto de software puede ser organizado y desarrollado, haciendo más fáciles algunas tareas y salvándonos de “reinventar la rueda” brindando funcionalidad básica.
Por mencionar algunos, en el mundo de PHP tenemos a CakePHP, CodeIgniter y Symphony (son sólo algunos). Otros destacados y muy populares son Ruby on Rails (para Ruby) y Django (para Python).

Bajando un poco de nivel seguimos encontrando cosas a tener en cuenta:

• Seguridad: En el servidor propiamente dicha(a nivel de red), en la aplicación (inyecciones SQL, XSS – Cross site scripting, validación, etc).
• Optimización: Caches a nivel de framework, caches independientes como memcached, caches a través de proxys. Optimización del código, precompiladores, etc.
• Escalabilidad: Eliminar cuellos de botella a nivel de servidor web con redundancia, redundancia en la base de datos separando las llamadas de lectura de las de escritura a distintos servidores (las de lectura representan el 80%), etc.

Otra variable de esta ecuación son las bases de datos. MySql y PostgreSQL (las más populares del software libre), Oracle, SQL Server, etc. El código de los diferentes lenguajes es el que accede a estas bases de datos y se encarga de interactuar con la información.

En resumen

Todos estos factores son parte de la vida del desarrollador Web. He pasado por alto algunos temas para que no se haga tan extenso, como los CMS(Gestor de Contenidos), el SEO (Search Engine Optimization u Optimización de motores de Búsqueda, que es un mundo aparte) y un largo etcétera.

Con tantas cosas en juego, no sé quién se puede aburrir (yo a veces me quejo pero al final de cuentas, en la variedad esta la diversión). Es un desafío con el cual nos encanta enfrentarnos día a día.
Saludos!

Foto de CalEvans

No related posts.

Whoa Whoa Whoa!!!

Desde hace un par de años que no cambiabamos nuestro look y nos gustaria que nos digas que opinas del nuevo sitio, ¡sientete libre de dejar un comentario si te gusta!

¿Que hay de nuevo viejo?

• ¡Español! – BAM! Abrimos las puertas al mercado de habla hispana y estamos listos de repartir nuestro amor entre nuestros amigos hispanohablantes
• Blog –  Estamos dandole una probadita a esto del blog, ahora podrás encontrar algunos sabrosos articulos si eres desarrollador web y por que no, soñador como nosotros.
• Twitter – Estamos twiteando a twiteros que esten buscando personas para retweetear nuestros tweets… Uhh…me parece que fue demasiado. Igualmente, si algo de esto te suena conocido, éstos somos nosotros en tweeter: http://www.twitter.com/malbecmedia
• Precios-  Tenemos nuevos precios y estan claramente especificados en nuestra pagina de servicios!
• Portfolio- Hemos agregado nuestros ultimos trabajos al portfolio, entra y mira nuestros trabajos mas recientes!
• Facebook- ahora te puedes hacer fan de nosotros en Facebook!! Dale, vamos, toda la gente copada lo esta haciendo.

Gracias !

Related posts:

1. Welcome to Malbec Media’s Blog
2. Cambiando el rumbo