Todos contra Google

En esta página puedes descargar algunas aplicaciones en español que he desarrollado para dispositivos móviles con la ayuda del framework PhoneGap.

Todas estas aplicaciones están publicadas bajo licencia de software libre (GPL), por tanto, también está disponible el código fuente (source code). Puedes descargarlo, modificarlo y redistribuirlo.

Para el desarrollo de estas aplicaciones se ha utilizado: HTML, CSS, JavaScript, Jquery, Jquery mobile, PhoneGap y PHP.


Conversor Euro Dolar
Conversor de Euros a Dolares, este programa te permite convertir de la moneda euro a dolar. Simplemente introduce los euros y te los convertirá a dolares o viceversa.
Android Market | Descargar código fuente


IMC Calculator1.1 
Calculador del índice de masa corporal. IMC Calculator es una aplicación que te permite conocer el estado nutritivo de tu cuerpo. Los resultados que ofrece están basados en la tabla proporcionada por la OMS.
Android Market | Descargar código fuente


My IP1.1
My IP ¿Cuál es mi IP? es una aplicación que te muestra cual es tu dirección IP y cómo estás conectado a Internet (HSDPA, 3G, WiFi, Ethernet...).Rápida y sencilla aplicación para conocer tu dirección IP de acceso a Internet.
Android Market | Descargar código fuente


Android Counter.1
Esta aplicación te permite ir contando simplemente con tocar la pantalla, emite un sonido cada vez que se aumenta el contador para que puedas tenerlo en la mano al estilo Contador AXE.
Android Market | Descargar código fuente

Hace unas semanas que estoy buscando un buen sistema para desarrollar aplicaciones para dispositivos móviles sin tener que desarrollar una aplicación específica para cada plataforma. A pesar de que la mayoría de entornos de desarrollo para móviles están basados en Java, las llamadas al sistema son diferentes en cada arquitectura.

La mejor solución que he encontrado se llama PhoneGap, es un framework que permite desarrollar aplicaciones para dispositivos móviles (iPhone, Android, Symbian, Bada, Blackberry...) basadas en HTML5 y JavaScript.

Si sumamos la potencia de HTML5 a la capacidad de conectar, mediante AJAX, a un servidor PHP, los límites son prácticamente inapreciables. Aunque todavía no tiene soporte para todas las llamadas al sistema, mediante PhoneGap podemos utilizar la antena GPS, los SMS, llamadas, vibrador, acelerómetro, acceso a contactos, etc...

La documentación es bastante buena y hay bastantes ejemplos ya desarrollados, la mayoría en inglés.

Hoy he publicado mi primera aplicación en el Android Market, es un Conversor de Euros a Dolares y viceversa, es una aplicación muy sencilla que me ha permitido conocer un poco más la arquitectura de las aplicaciones de Android y dar mis primeros pasos en el desarrollo de aplicaciones Android.


Por si a alguien le resulta útil, podéis descargar el código fuente.

Actualización: He creado una página donde iré recopilando todas las aplicaciones y códigos fuente de las aplicaciones que desarrolle con PhoneGap:

• EJEMPLOS PHONEGAP

Instalar y configurar Google Analytics en la versión 2.3.x de osCommerce es bastante diferente a las versiones anteriores, la forma más cómoda es hacerlo mediante el módulo Google Analytics for osCommerce v2.3:

• Descarga el módulo http://addons.oscommerce.com/info/8175/v,23

• Ejecuta la siguiente consulta SQL en la base de datos de osCommerce:

INSERT INTO configuration (configuration_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, last_modified, date_added, use_function, set_function) VALUES (2222, 'Google analytics', 'GOOGLE_ANALYTICS', '', 'Your Google analytics key', 1, 111, NULL, '0000-00-00 00:00:00', NULL, NULL);

• Ahora entra en el panel de administración de tu tienda y vete a Configuración > My Store, selecciona el  último parámetro (Google analytics) y pulsa sobre Editar, ahí tienes que añadir el código de seguimiento completo de Google Analytics, algo parecido a esto:

<script type="text/javascript">    var _gaq = _gaq || [];   _gaq.push(['_setAccount', 'UA-XXXXYYYY-1']);   _gaq.push(['_trackPageview']);    (function() {     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);   })();  </script>

• Abre el fichero /includes/template_top.php y justo debajo de la etiqueta </head> pega el siguiente código, esto cargará el script de tracking

<?php if (tep_not_null(GOOGLE_ANALYTICS)) {?><?php echo GOOGLE_ANALYTICS ;?><?php } ?>

Es muy recomendable realizar esta implementación en nuestra tienda osCommerce porque, además de medir el tráfico del portal, nos permitirá realizar tracking de las compras realizadas y sus importes. Esto nos permitirá analizar qué páginas de referencia y keywords (SEO/SEM) son más rentables, así como analizar el ROI de cualquier campaña (mailing, banners, etc...) si están correctamente etiquetadas.

Blogger por defecto establece una barra superior con su propio menú en todas las plantillas prediseñadas de blogger, quitarla es muy sencillo, simplemente hay que ocultarla en el CSS de la plantilla:

1. En el menú de blogger pincha en "Diseño>Edición HTML"
2. Activa la opción "Expandir plantillas de artilugios"
3. Busca la línea donde aparecen las especificaciones CSS del cuerpo de la página, empezará con el texto "body {"
4. Justo encima de esa línea, escribe el siguiente código CSS: #navbar-iframe { height:0px; visibility:hidden; display:none; }

Cuando un cliente nos pide que desarrollemos una versión de su web adaptada a dispositivos móviles, lógicamente, quiere que al entrar con su móvil vea directamente la página web adaptada. Pues bien, hacer esto en PHP está tirao, sólo hace falta incluir una pequeña función en la cabecera de nuestro fichero index.php

La función, que lee las cabeceras del navegador para saber con qué dispositivo navega, se llama esMovil(), hay que insertar esta función o la librería que la contiene en la primera línea de nuestro script index.php

function esMovil(){
return eregi( 'ipod|iphone|ipad|android|opera mini|blackberry|palm os|windows ce|Bada|Windows Phone|Symbian', $_SERVER['HTTP_USER_AGENT'] );
}

Esta función es capaz de detectar si el navegador del visitante pertenece a un dispositivo móvil, ahora simplemente tenemos que añadir un condicional al principio de nuestro fichero index.php para filtrar a los visitantes según el dispositivo que utilizan:

if( esMovil() AND $_SERVER['REQUEST_URI']=='/'){
header( 'location:/versionmovil/' );
exit();
}

Es importante recordar que esta verificación hay que hacerla al comienzo del script, la función header location de PHP no funcionará si ya hemos mostrado algo de código HTML. Recomiendo incluir la función en la primera línea y esta verificación justo a continuación. En caso de que estén utilizando un dispositivo móvil, los redireccionará a: http://www.midominio.com/versionmovil

Este script, detecta los navegadores por defecto de los siguientes dispositivos móviles (probado a 05/10/2010):

• iPod
• iPhone
• iPad
• Android
• Blackberry
• Palm OS
• Windows móvil
• Symbian

Un buen amigo, me ha recomendado el buscador de código fuente de Google (Google Code Search).

Por todos es sabido que los spam-robots encargados de buscar y almacenar direcciones de correo electrónico válidas por toda la red, son cada vez más 'inteligentes' y es más difícil engañarlos.

Un ingenioso truco que podemos usar, es aprovecharnos de las ventajas de los CSS para escribir en el código HTML nuestro e-mail con los carácteres invertidos (moc.liamg@resu) y mostralos correctamente al cargar este texto con ciertas propiedades en el CSS.

Un código de ejemplo:


<style type="text/css">

span.test { direction: rtl; unicode-bidi:bidi-override; }  

</style>

<p><span class="test">moc.liamg@resu</span></p>


El fichero robots.txt es un fichero que contiene recomendaciones de acceso que todos los crawlers y robots de buscadores deberían cumplir. Un crawler es un sistema automatizado que utilizan los buscadores para indexar páginas web, comunmente conocido como spider o bot. Cada buscador tiene su propio robot (Google-Bot, noxtrumbot, msnbot, etc...). Debemos tener un control absoluto de este fichero a la hora de realizar un posicionamiento web, puesto que es un fichero básico de cara a la indexación en buscadores.


Mediante el fichero robots.txt podemos realizar varias acciones:

• Impedir acceso a determinados robots, muy útil sobre todo para evitar sobrecargas en el servidor.
• Prohibir el acceso a determinadas zonas, por ejemplo al área de administración de la web.
• Identificar la ubiación del sitemap.
  
• Eliminar contenido duplicado. Muy valorado por los buscadores.

El fichero robots.txt debe estar colocado en el directorio raíz del sitio, de tal forma que sea accesible a través de: www.example.com/robots.txt

Este ejemplo permitiría el acceso total a la web, es como si no tuvieramos fichero robots.txt:



User-agent: *
Disallow:

Añadiendo una carpeta a Disallow impediriamos el acceso a esa carpeta, en este ejemplo permitimos a los robots indexar cualquier página excepto las que estén dentro de /administracion:

User-agent: *
Disallow: /administracion



Si sólo queremos prohibir el acceso a un determinado robot, deberíamos indicarlo en el user-agent, de la siguiente forma:



User-agent: msnbot
Disallow: *


#Robots.txt con comodines
Disallow: /*.html$
Disallow: /noticia/*/num/*



Si detectamos accesos repetitivos que están saturando el servidor, podemos indicarle al robot un tiempo (en segundos) entre cada petición:



User-agent: msnbot
Crawl-delay: 30

También podemos indicarle en el fichero robots.txt el lugar donde se encuentra nuestro sitemap:

Sitemap: http://www.example.com/sitemap.xml

De esta forma, un fichero robots.txt básico quedaría:



User-agent: *
Disallow: /administracion
Sitemap: http://www.example.com/sitemap.xml

Este script para Grease Monkey permite ocultar todo el contenido de un contenedor div, este ejemplo de Script oculta los links superiores de Google (La Web, Imágenes, Videos, etc...), si queremos utilizarlo para otro div, tendremos que cambiar gbar por el id del div que queramos ocultar:

// ==UserScript==
// @name OcultaDiv
// @namespace http://www.ellibrogordodepetete.com/search/label/C%C3%B3digo%20fuente
// @description Script que permite ocultar un div
// @include http://www.google.es/*
// ==/UserScript==

var info_superior = document.getElementById('gbar');
info_superior.style.visibility='hidden';


Si queremos que se fuerce la descargar de un fichero en lugar de abrirlo desde el propio navegador (imágen, pdf, etc...) podemos utilizar la siguiente cabecera desde nuestro fichero php:


header("Content-type: application/force-download");


Los Scripts de Nautilus son unos scripts que podemos ejecutar desde el menú contextual en cualquier ventana del explorador de ficheros.

Para poder utilizar esta opción es necesario tener instalada la librería python-nautilus, podemos descargarla vía apt o synaptic.

Una vez descargada e instalada la librería, tan sólo debemos copiar los scripts en:

/home/usuario/.gnome2/nautilus-scripts

Ahora cuando pulsemos con el botón derecho, tendremos una opción llamada Scripts, dentro de ella nos aparecerán todos los Scripts que tengamos instalados en la carpeta.

Como ejemplo, este script sirve para abrir la ventana actual con privilegios de root:


#!/bin/bash

# Abre nautilus como root
foo=`gksudo -u root -k -m "Introduce la contraseña de root" /bin/echo "got r00t?"`
sudo nautilus --no-desktop $NAUTILUS_SCRIPT_CURRENT_URI


Este código es una modificación del módulo Last 5 original de Marketplace. Este módulo para Joomla (1.0.x) muestra los últimos anuncios clasificados insertados en Marketplace, además añade un icono al listado y muestra el precio del artículo debajo del nombre.

Podeis ver un ejemplo de este módulo funcionando en VenderMiWeb.com


Código:


<?



///////////////////////////////////////////////////////

// Módulo para marketplace que muestra los últimos 5



// anuncios publicados con el precio correspondiente

//

// Autor: I. Cisneros

// Blog: http://www.ellibrogordodepetete.com



// Proyecto: http://www.VenderMiWeb.com

// Fecha: 15/04/08

//

// Licencia: GPL

//



///////////////////////////////////////////////////////



// Dont allow direct linking


defined( '_VALID_MOS' ) or die( 'Error, no se permite el acceso directo al fichero.' );


$database->setQuery( "SELECT id FROM #__menu WHERE link LIKE '%com_marketplace%' AND published='1' ");



$mpItemid = $database->loadResult();

if ( strlen( $mpItemid) > 0 ) {

$mpItemidLink = "&Itemid=".$mpItemid;

}

else {

$mpItemidLink = "";

}


$database->setQuery( "SELECT a.id, a.category, a.ad_headline, a.ad_type, a.ad_image, a.ad_price AS af_date, b.name

FROM #__marketplace_ads AS a, #__marketplace_categories AS b

WHERE b.published='1' AND a.category = b.id AND a.published='1'

AND a.category = '6'

ORDER BY a.id DESC LIMIT 3 ");

$meslist = $database->loadObjectList();

$content ="<table>";

foreach ($meslist as $mes) {


$linkTarget = sefRelToAbs( "index.php?option=com_marketplace&page=show_ad&catid=".$mes->category."&adid=".$mes->id.$mpItemidLink);


if ($mes->ad_image > 0) {



$imageIcon = $mosConfig_live_site."/modules/mod_marketplace5_images/photo.gif";


}

else {
$imageIcon = $mosConfig_live_site."/modules/mod_marketplace5_images/transpixel.gif";

}


$precio = $mes->af_date;



if ($precio == ""){



$precio = "A convenir";



}


$content.="<tr><td valign=\"top\" width=\"20\"><center><img src=\"$imageIcon\" width=\"16\" height=\"16\" border=\"0\"></center></td><td valign=\"top\">"."<font size='2'><a href=\"$linkTarget\">".$mes->ad_headline."</a></font><br>"." Precio: ".$precio."</td></tr>";

}

$imageIcon2 = $mosConfig_live_site."/modules/mod_marketplace5_images/photo.gif";

$content.="</table>";

?>


Estoy empezando a realizar pequeños scripts para Grease Monkey, la popular extensión de Firefox. Grease Monkey nos permite ejecutar nuestros propios códigos javascript en diferentes páginas web. Para ir abriendo boca, vemos como sería el código para el clásico ¡Hola mundo!:


// ==UserScript==
// @name Hola mundo
// @namespace http://www.ellibrogordodepetete.com/search/label/C%C3%B3digo%20fuente
// @description Ejemplo de script de Hola Mundo para Grease Monkey
// @include *
// @exclude http://www.google.com/
// ==/UserScript==

alert('¡Hola mundo!');


Estaba escribiendo un script en PHP y en el código de un enlace HTML, quería que se abriera en una ventana nueva, algo que cualquier sabe hacer, pues me he hecho la picha un lío.

Se me había metido en la cabeza que tenía que añadir el atributo action="_blank" y me estaba volviendo loco porque no funcionaba, bastante lógico la verdad, estaba mal escrito. Como la mayoría sabeis, action se utiliza en JavaScript y no sé porqué yo lo he migrado a HTML. Me ha hecho gracia, y he decidido escribir una microentrada.

En definitiva, la primera lección de "HTML for dummies", cómo abrir un enlace en una ventana nueva:

A veces mientras estamos escribiendo un programa, se nos va un poco la pinza y escribimos comentarios en el código fuente, que vistos al cabo de un tiempo resultan bastante graciosos, aquí algunos ejemplos:

Me siento ignorado

// a veces creo que el compilador ignora todos mis comentarios

Sinceridad

// estoy borracho, lo arreglo después

Un poco de magia

// Mágico. No tocar.

Por si no se entiende

return 1; //retorna 1

Dios, ayúdanos

// Cuando escribí esto sólo Dios y yo sabíamos lo que hace.
// Ahora, sólo Dios sabe.

Aviso

/*
* Quizás creas que sabés lo que hace esta porción de código.
* Creeme, no lo sabés.
* Si tratás de entenderlo vas a pasar muchos horas sin dormir,
* maldiciendo el momento que pensaste que eras los suficientemente
* inteligente para "optimizar" el siguiente código.
* Así que, cerrá este archivo y andá a jugar con otra cosa.
*/

Advertencia para al mantenedor

//
// Querido mantenedor:
//
// Una vez que termines de intentar "optimizar" esta rutina,
// y que te des cuenta del terrible error que cometiste,
// por favor incrementá el siguiente contador como una
// advertencia para el próximo:
//
// total_de_horas_gastadas_aqui = 16
//

Desconfiar de la documentación

/**
* Siempre devuelve true.
*/
public boolean isAvailable() {
return false;
}

Arreglo

// no estoy seguro de que esto funcione, pero resuelve el problema

Visto en: DosIdeas.com

La mayoría de los sitios web utilizan una técnica incorrecta y no estándar para crear popups, la técnica que suele utilizarse es la siguiente:

Código de ejemplo no estándar:


Link de ejemplo no estándar:


Utilizar esta técnica tiene varios problemas:

• No se puede hacer follow al link (los motores de búsqueda no lo siguen)
  
• No puedes abrir el link en una nueva ventana o pestaña
  
• Es obligatorio tener JavaScript activado para poder seguir el enlace
  
• No sigue el estandar de programación web (W3C)

La forma correcta de crear un popup estándar es la siguiente:

Código de ejemplo estándar:


Link de ejemplo estándar:

No follow es un atributo HTML que podemos asignar a un enlace para que éste no sea valorado por los buscadores. Resulta útil si queremos enlazar a páginas de dudosa moralidad sin ser penalizados por Google o si queremos evitar tener demasiados enlaces salientes en una página de nuestro sitio web.

La sintaxis es:


<a href="paginaweb" rel="nofollow">


No recomiendo su uso, puesto que está mal visto por muchos bloggers y por la mayoría de SEO, su utilización está muy extendida en páginas grandes, como la wikipedia, para evitar la utilización del servicio como SPAM. Otros sitios como menéame la utilizan sólo en las noticias pendientes, una vez que la noticia aparece en portada el atributo es retirado del enlace.

Esta función en PHP devuelve un valor booleano. Verdadero si el texto que pasamos como argumento se corresponde con una dirección de e-mail, falso en caso contrario.

function Esemail($email){
$pattern="/^[a-zA-Z0-9._]+@[a-zA-Z0-9._]+.[a-zA-Z0-9]+$/";
if(preg_match($pattern, $email) > 0) return true;
else return false;
}



Función en PHP que devuelve la dirección IP del usuario:


function SacarIP(){
// Comprobamos si hay proxy
if (getenv('HTTP_X_FORWARDED_FOR')) {
$ip=getenv('HTTP_X_FORWARDED_FOR');
}
else {// en caso de que no haya proxy
$ip=getenv('REMOTE_ADDR');
}

return $ip;
}


Llevaba un tiempo buscando cómo publicar código fuente (PHP/HTML) en Blogger sin que traduzca las etiquetas y modifique el código, la solución es SimpleCode.

SimpleCode es una aplicación web que nos permite traducir un código fuente para poder insertarlo entre las etiquetas code de blogger, transformado los carácteres de apertura y cierre (<>) por los carácteres aceptados por google (lt y gt).

Ejemplo de código en php:

<?php
echo "<html>";
echo "Prueba de codigo php";
echo "</html>";
?>