Como hacia tiempo que no publicaba ningún código fuente y en varias ocasiones Alejandro Torres me ha pedido escribir alguna entrada de programación, he decidido publicar este ejemplo practico.

¿En que consiste este ejemplo?

Se trata de una especie de asistente para poder generar facilmente mapas estaticos utilizando la API de google maps.

¿Que puedes aprender con este ejemplo?

• Estructura de directorios y ficheros: css, javascript, html
• Separar capas lógicas: CSS, javascript del XHTML
• Visualizar más rápidamente la página poniendo el javascript al final
• Javascript no intrusivo, separar los eventos javascript del XHTML y llamarlos en el evento onload
• Javascript: Como utilizar la API google maps para generar imagenes estáticas
• SEO: tag title, metatags description y keywords
• PHP: obligar a descargar ficheros
• Ver un ejemplo de XHTML y CSS valido
• A programar como el culo

Demo y descarga:

• Demostración en vivo del generador de mapas
• Descargar código fuente genmaps

Notas:

Si pruebas el ejemplo en modo local funcionará correctamente, si decides subirlo en un servidor tendrás que introducir tu google API key en el fichero index.html:

<script type=”text/javascript” src=”http://maps.google.com/maps ?file=api&v=2.x&key=tu_google_api_key“></script>

Más información:

• Documentación API google maps para generar mapas estáticos
• Javascript no intrusivo

Como te prometi Hanok, escribo este pequeño ejemplo / tutorial para obtener fotos de flikr a partir de una palabra y una API key.

Requisitos:

1. Tener una cuenta flickr (necesaria para obtener la API key)
2. Una API key, que puedes crear aqui

Como no sé me da muy bien explicar las cosas, pongo el ejemplo directamente

1. Descarga el ejemplo:
   
2. Busca la linea linea 5:
   flickrapi = ”;
3. Introduce tu API key, por ejemplo:
   flickrapi = ‘843323377f82da580cc0181828f6618d’;
   Nota: esta me la he inventado, a lo mejor tienes suerte y funciona, pero mejor introduce la tuya

Instrucciones de uso:

1. Introduce la palabra que quieras buscar
2. Pulsas el botón buscar
3. Esperas a que se carguen las fotos

Modificando el ejemplo:

• Valor por defecto:
  En la linea 37 donde pone:
  value=”merluza verde”

  puedes cambiarlo por:
  value=”lol catz”

• Número de fotos:
  En la linea 6 puedes cambiar el valor de la variable:
  max=5;

  por:
  max=3;
  Nota: máximo permitido 500

• Tamaño de las fotos:
  En la linea 7 puedes cambiar el valor de la variable:
  size=’m';

  por:
  size=’s’; //small (pequeño, cuadrado de 75×75 pixeles)
  size=’t'; //thumbnail (miniatura, el lado más largo máximo queda en 100 pixeles)
  size=’m'; //medium (mediano, el lado más largo máximo queda en 500 pixeles)
  size=’b'; //big (grande, el lado más largo máximo queda en 1024 pixeles)

  Nota: recomiendo usar como máximo el tamaño m, ya que a veces el tamaño b (grande) muestra una imagen con el texto, this photo is currently unavailable

Más información:

• flickr.photos.search
• Photo Source URLs

1. Entiende que es JSON (tuto, ejemplos…)
   
2. Convierte un matriz PHP en JSON (script PHP)
3. Convierte XML en JSON (script PHP)
   
4. Dibujar un árbol a partir de un código javascript, JSON > 100% imprescindible (visto en aNieto2K)

Siempre he sido de escribir el código javascript a saco, tiene su mérito pero es complicarse la vida

Estos días he estado probando la librería jQuery y me gustaría recomendarla a la gente cabezuda como yo y también a los que quieran empezar con el javascript.

¿Que es jQuery?

es una librería (Framework) JavaScript diseñada para “simplificar” tareas comunes

¿En que me puede ayudar?

1. Escribirás menos
2. Ahorras tiempo tanto en la creación como en la edición
3. El código será más limpio y comprensible
4. La aplicación que programes, será compatible con la mayoría de navegadores (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)

Descargar jQuery:

Pagina oficial (la edición comprimida sólo ocupa 20kb)

Ejemplos:

1-Método tradicional de toda la vida
2-Método utilizando jQuery

1-document.getElementById(’id_objeto’ ).innerHTML = ‘esto es una prueba’
2-$(’#id_objeto’).html(’esto es una prueba’)

1-alert(document.getElementById(’id_objeto’ ).innerHTML)
2-alert($(’#id_objeto’).html())

1-document.getElementById(’id_campo_formulario’ ).value=12
2-$(’#id_campo_formulario’).val(12)

1-alert(document.getElementById(’id_objeto’ ).value)
2-alert($(’#id_campo_texto’).val())

1-document.getElementById(’id_objeto’ ).style.display=’none’
2-$(’#id_objeto’).hide()

1-document.getElementById(’id_objeto’ ).style.display=”
2-$(’#id_objeto’).show()

1-this.disabled=true;
2-$(this).attr(’disabled’,true);

1-document.getElementById(’id_objeto’ ).style.backgroundColor=’#ff0000′
2-$(’#id_objeto’).css(’backgroundColor’,'#ff0000′);

1-if(document.getElementById(’id_objeto’) .checked){}
2-if($(’#id_objeto’).is(’:checked’)){}

1-function mostrar(id){
obj = document.getElementById(id);
obj.style.display = ((obj.style.display)? ” : ‘none’);
}
mostrar(’id_objeto’);
2-$(’#id_objeto’).toggle();

Nota:

document.getElementById(’id_objeto’) y $(’#id_objeto’), no es exactamente lo mismo, por ejemplo no puedes hacer:
$(’#id_objeto’).style.display=”

Más recursos:

• Pestañas
• Elementos de interfaz
• 15 Days Of jQuery
• jQuery Docs

si alguien esta pensando en hacer un un FTP vía web o un servidor de ficheros, puede que este código les sea útil

¿Que es lo que hace?

al enviar el formulario, comprueba que la extensión del fichero sea igual a:
BMP, GIF, JPG o PNG

En caso de que no se cumpla la condición, se devolverá un mensaje de error y se cancelará el envío

javascript:

function revisar(){
var obj=document.getElementById(’txt_fichero’);
if(!obj.value.match(/\.(BMP|GIF|JPG|PNG)$/i)){
alert(’tipo de fichero no valido’);
return false;
}
}

HTML:

<form action=”destino.php” onsubmit=”return revisar();” enctype=”multipart/form-data” method=”post”>
Elige un fichero:<br />
<input name=”fichero” id=”txt_fichero” type=”file” /><br />
<input type=”submit” value=”Enviar formulario” />
</form>

Nota:

Si lo que quieres es permitir subir cualquier tipo de fichero y restringir alguno, solo tienes que quitar el símbolo de exclamación (!), ejemplo:

if(obj.value.match(/\.(EXE|MSI|BIN)$/i))

Demostración:

Parte de este código se utiliza en cryptimg

Descargar ejemplo: