Luis Carlos Cárdenas http://makesurfer.com Al fin de cuentas, todo va para donde mismo. Mon, 30 Aug 2010 23:54:58 +0000 en hourly 1 http://wordpress.org/?v=3.0 Dominios .MX a 15 dolares el año, solo este Septiembre. http://makesurfer.com/2010/08/dominios-mx-a-15-dolares-el-ano-solo-este-septiembre/ http://makesurfer.com/2010/08/dominios-mx-a-15-dolares-el-ano-solo-este-septiembre/#comments Mon, 30 Aug 2010 23:54:58 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=178 Así es compañeros lectores, me acaba de llegar un boletín de la Network Information Center México, osease NIC México acaba de anunciar su (ya tradicional) promoción de dominios bajo la extensión .MX, que solo será valida para este mes de Septiembre, mes de la patria en México. El precio de los dominios es de USD$15, pero cabe aclarar lo siguiente:

  • El precio por año es apartír del segundo año.
  • Solo este mes es la promoción.
  • Aplica solo a nuevos registros.
  • Solo bajo .MX (osease: no .com.mx)

En lo personal, deben aprovechen esta promoción si tantas ganas o necesidad tienen de tener un dominio directo .MX, ya que fuera de la promoción este dominio sale costando mucho más, ya que tanto se ha dicho respecto al elevado (por que hasta 45 dolares llegó a costar un .com.mx) precio que tienen estos dominios.

Fuente: NIC México – Noticias

]]> http://makesurfer.com/2010/08/dominios-mx-a-15-dolares-el-ano-solo-este-septiembre/feed/ 2 Un excelente verano universitario. http://makesurfer.com/2010/08/un-excelente-verano-universitario/ http://makesurfer.com/2010/08/un-excelente-verano-universitario/#comments Mon, 23 Aug 2010 02:53:10 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=175 Hoy es el ultimo día de estas vacaciones de verano, pero sin duda este ha sido un verano muy diferente a todos los demás. No es un verano como las de la transición de la primaria-secundaria, secundaria-preparatoria o preparatoria-universidad, pues ya ahora que estoy estudiando nivel superior, con una carrera que me gusta y de la que inconscientemente me preparé desde antes de entrar. Fue un verano muy productivo, con mucho trabajo y muchas salidas, donde a pesar de todo aquel trabajo quedaba tiempo suficiente para desvelarse, levantarse tarde y salir cada rato con los amigos y amigas. Este verano fue especial, donde me tome la meta de leerme al menos 2 libros, y valla que lo supere leyendo 4, algo que espero que ahora que vuelva a la escuela tener tiempo, por que las desveladas de tareas, mal comidas, mal dormidas muchas veces te dejan sin ganas de hacer las cosas. Aunque claro, extraño a mis compañeros de clase, a las personas que este año conocí y que algunas ya son especiales para mi. Espero todo marche bien este año, pero empezando por este semestre. Me da cierta nostalgia ver a compañeros que desertaron, otros que cambiaron de carrera, algunos más que no eran lo que querían y otros que se regresaron a sus lugares de origen por falta de recursos para seguir. Este verano por fin me compré un gadget, debo admitirlo que haberle puesto ganas en el semestre para no atrasarme fue totalmente beneficioso, pues fueron casi 3 meses de arduo descanso. Hice algunas cosas que quería hacer, y otras más que jamas imaginé que haría, pero todo fue muy bueno en este verano. Todo sigue su curso, y mi carrera todavía le faltan unos 3 o hasta 4 años más, pero un año avanzado es un año.

]]> http://makesurfer.com/2010/08/un-excelente-verano-universitario/feed/ 1 Tweet Button – El boton para compartir enlaces en Twitter http://makesurfer.com/2010/08/tweet-button-el-boton-para-compartir-enlaces-en-twitter/ http://makesurfer.com/2010/08/tweet-button-el-boton-para-compartir-enlaces-en-twitter/#comments Thu, 12 Aug 2010 17:22:16 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=170 Tal y como sucedió con Facebook y su plan de dominar el mundo con boton Like o "Me Gusta, Twitter ahora ofrece el servicio del boton de Tweet, con el cual puedes compartir facilmente información con un solo clic. Ademas, este servicio te contabiliza las veces que ha sido compartido tu enlace. Puedes crear estos botones en el generador de tweet button de Twitter.

Solo espero, que con estos botones no se hagan sitios generadores de botones de "Me Gusta" como de Facebook, si no llegará a un uso excesivo en spam.

Aquí el video oficial que te explica en que consiste este boton.

Aquí un ejemplo:

Visto en: Twitter Blog

]]> http://makesurfer.com/2010/08/tweet-button-el-boton-para-compartir-enlaces-en-twitter/feed/ 0 El 15, un juego hecho con HTML y JavaScript. http://makesurfer.com/2010/08/el-15-un-juego-hecho-con-html-y-javascript/ http://makesurfer.com/2010/08/el-15-un-juego-hecho-con-html-y-javascript/#comments Tue, 10 Aug 2010 20:32:35 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=163 Hace ya algunos años, un amigo que acababa de entrar al Instituto Tecnológico de Tepic desarrolló un pequeño juego en Visual Basic, llamado El 15. Este juego consiste en un recuadro de 4x4, en el cual hay 15 números y un espacio vacío. Con este espacio puedes mover todos los números y acomodarlos de forma lineal horizontal, lineal vertical, en espiral y lo que tu imaginación te diga.

Pues bien, para eso, yo todavía seguía en la preparatoria y me encontraba aprendiendo Javascript (como siempre... autodidacta). Para eso, se me ocurrió, a modo de reto, crear ese mismo juego utilizando solo Javascript y HTML. Y a pesar de que mis conocimientos en programación no eran lo que hoy son (gracias a la carrera), pude desarrollar este jueguito. Esta configurado solo para detectar la posición correcta de los números en lineal horizontal. Así lo que los invito a que prueben este juego, cualquier critica constructiva, consejo o aclaración, bienvenida a los comentarios.

Demo del juego.
Descargar juego/código.

]]> http://makesurfer.com/2010/08/el-15-un-juego-hecho-con-html-y-javascript/feed/ 3 Musica: Don Tetto http://makesurfer.com/2010/08/musica-don-tetto/ http://makesurfer.com/2010/08/musica-don-tetto/#comments Mon, 09 Aug 2010 19:24:45 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=160 Hace algunos meses, navegando por la red me encontre con este grupo rock/punk rock colombiano de nombre Don Tetto, Esta banda fue formada en el 2003 en Bogotá, Colombia.

Tienen 3 discos:

  • Lo que no sabías
  • Lo que no sabías (edición especial)
  • Mienteme Prometeme

Sus integrantes son:

Cada uno tiene su cuenta Twitter, pero tambien la banda tiene su Twitter, Facebook, YouTube, MySpace y claro, su pagina web.

Los invito a que entren a su cuenta de MySpace y escuchen algunas de las rolas de este grupo, claro, mis canciones favoritas son:

  • Fallido Intento
  • Dime
  • No estaba acostumbrado
  • Ha vuelto a suceder

Fuente: Wikipedia

Imagen: Perfil de Twitter de Don Tetto

]]> http://makesurfer.com/2010/08/musica-don-tetto/feed/ 0 Extraer galería de fotos de una Fan Page de Facebook. http://makesurfer.com/2010/08/extraer-galeria-de-fotos-de-una-fan-page-de-facebook/ http://makesurfer.com/2010/08/extraer-galeria-de-fotos-de-una-fan-page-de-facebook/#comments Thu, 05 Aug 2010 23:07:27 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=152 En estos tiempos, donde muchisimas personas (por no decir todas) ya cuentan con un perfil en redes sociales, más sin embargo como ya sabemos, la "moda" o la red social con más usuarios en la red es Facebook. Esta plataforma cuenta con multiples servicios para los perfiles de las personas, como son: muro de mensajes (alias 'twitter de facebook'), fotos, videos, notas, aplicaciones, etc. Las empresas pueden aplicar estos mismos servicios, no como un perfil de usuario, si no como una compañía con una pagina fan. En estas paginas, las personas se unen para conocer sus promociones, fotos y actividad de dichas empresas. Esto es solo un gancho social para atraer a los usuarios, o como mantener clientes leales como tal es el caso de Starbucks. Todo esta plataforma puede ser aprovechada por los desarrolladores web para extraer la información con ayuda del API, creando un concepto muy parecido al de la nube (cloud computing). Pues bien, ahora vamos a aprender un poco de como aprovechar esta plataforma para crear galerías de fotos. Empezamos.

Lo primero...

Antes de empezar necesitamos contar con lo siguiente:

  • Tener una cuenta en Facebook
  • Tener acceso a la Fan Page de donde vamos a extraer la galería.
  • Soporte libreria JSON de PHP
  • Que la Fan Page sea totalmente publica.
  • Que nuestro servidor soporte cURL (opcional).

Si contamos con lo anterior, ya podemos trabajar sobre nuestra pagina web para que muestre las fotos de facebook en el sitio. Si tu servidor no cuenta con cURL, no te preocupes, más adelante te voy a decir una alternativa a cURL. Como la galería tiene que ser publica, entonces no necesitaremos del access_token que necesita el Graph API de Facebook para reconocer al usuario que ya inicio sesión. Ahora si... sobre la marcha.

El siguiente paso...

Necesitamos obtener el numero de ID de nuestra galería, pero como en ninguna parte menciona la ID de la galería, ni en la URL, entonces necesitamos entrar al API, que si nos dirá como acceder, vamos a trabajar sobre una Fan Page que creé para este ejemplo. Mi Fan Page se llama "Faxterol Web" y su numero de ID es 116134141772310. Esta prueba se hace en el navegador, así que esta es la estructura de la URL de los albums de una fan page.

https://graph.facebook.com/ID_FANPAGE/albums

Sustituimos ID_FANPAGE por el ID de nuestra Fan Page. y nos mostrará algo así.

Clic para ver Texto Plano
JavaScript:
  1. {
  2. "data": [
  3. {
  4. "id": "116134595105598",
  5. "from": {
  6. "name": "Faxterol Web",
  7. "category": "Unknown",
  8. "id": "116134141772310"
  9. },
  10. "name": "Wallpapers PHP",
  11. "description": "Algunos Wallpapers de PHP.",
  12. "link": "http://www.facebook.com/album.php?aid=23384&id=116134141772310",
  13. "count": 3,
  14. "created_time": "2010-08-05T21:56:51+0000",
  15. "updated_time": "2010-08-05T21:58:51+0000"
  16. },
  17. {
  18. "id": "116134141772310",
  19. "from": {
  20. "name": "Faxterol Web",
  21. "category": "Unknown",
  22. "id": "116134141772310"
  23. },
  24. "name": "Fotos de perfil",
  25. "link": "http://www.facebook.com/album.php?aid=-3&id=116134141772310",
  26. "count": 1,
  27. "created_time": "2010-08-05T21:55:42+0000",
  28. "updated_time": "2010-08-05T21:55:42+0000"
  29. }
  30. ],
  31. "paging": {
  32. "previous": "https://graph.facebook.com/116134141772310/albums?limit=25&since=2010-08-05T21%3A56%3A51%2B0000",
  33. "next": "https://graph.facebook.com/116134141772310/albums?limit=25&until=2010-08-05T21%3A55%3A41%2B0000"
  34. }
  35. }

Nos desplega contenido en formato JSON, que contiene la variable data que es un arreglo, y tenemos dos galerías. Ponemos especial atencion en el parametro 'name', tomamos la de nombre "Wallpapers PHP", y tomamos su id (arriba de from). Despues de haber tomado el ID, ahora vamos a pedirle las fotos al API de Facebook con la siguiente url.

https://graph.facebook.com/ID_DEL_ALBUM/photos?limit=100

Sustituimos el ID_DEL_ALBUM por el numero de id del album que tomamos anteriormente y abrimos con el navegador para observar que tambien despliega los datos en JSON, pero ahora con las fotos del album. Añadimos la variable 'limit' a la url para limitar el numero de fotos que nos regresara el API, podemos cambiarlo si queremos. Ahora nuestra url es así: https://graph.facebook.com/116134595105598/photos?limit=100

Codigo a la ejecución... (vease, manos a la obra)

Ahora si, vamos a trabajar con nuestra galeria.Primero con nuestro codigo PHP.

Clic para ver Texto Plano
PHP:
  1. <?php
  2. //llamamos la URL con la librería cURL.
  3. $gals = curl_init();
  4. curl_setopt_array($gals,array(
  5. CURLOPT_URL => "http://graph.facebook.com/140387082653939/photos?limit=100",
  6. CURLOPT_USERAGENT => "Faxterol 1.0 Windows es_MX / Chromium", //el 'user agent'
  7. CURLOPT_RETURNTRANSFER => 1 //para que nos regrese el contenido y no lo imprima directamente
  8. ));
  9.  
  10. //el contenido quedará guardado en esta variable.
  11. $galeria = curl_exec($gals);
  12. curl_close($gals);
  13. //codificamos el contenido JSON del API para poder usarlo como arreglo y/o objeto de PHP.
  14. $galeria = json_decode($galeria);
  15.  
  16. //Esta es la variable de las fotos,
  17. $fotos = $galeria->data;
  18. ?>

Si no tienes la librería cURL en tu servidor, puedes hacer lo siguiente.

Clic para ver Texto Plano
PHP:
  1. <?php
  2.  
  3. //Extraemos el contenido de la galería y lo guardamos en una variable.
  4.  
  5. $galeria = file_get_contents("https://graph.facebook.com/116134595105598/photos?limit=100");
  6. //codificamos el contenido JSON del API para poder usarlo como arreglo y/o objeto de PHP.
  7. $galeria = json_decode($galeria);
  8.  
  9. //Esta es la variable de las fotos,
  10. $fotos = $galeria->data;
  11. ?>

Despues de esto, vamos a imprimir las fotos con un foreach.

Clic para ver Texto Plano
PHP:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Untitled Document</title>
  6. </head>
  7. <body>
  8. <h1>Galeria</h1>
  9. <ul><?php
  10. <?
  11. foreach($fotos as $idfoto => $foto){
  12. ?>
  13. <li><a title="Foto <?=($idfoto+1);?> de la galería." href="<?=$foto->source;?>"><img title="Foto <?=($idfoto+1);?> la galería" src="<?=$foto->picture;?>" /></a></li>
  14. <?php
  15. }
  16. ?>
  17. </ul>
  18. </body>
  19. </html>

la variable, $foto->source tiene guardada la URL de la foto en tamaño grande y la variable $foto->picture la URL de la foto en miniatura (thumbnail).

Y listo ya tenemos nuestra galería en nuestro sitio web.

Una manita de gato...

Si queremos darle una manita de gato, ahi que ponerle algo extra a nuestra galería, en este caso le pondrémos un lightbox. Descargamos un plugin llamado SexyLightbox y lo ponemos en nuestro sitio, el codigo queda de la siguiente manera.

Clic para ver Texto Plano
PHP:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Untitled Document</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7. <script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script>
  8.  
  9. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  10. <link rel="stylesheet" href="sexylightbox.css" type="text/css" />
  11.  
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. SexyLightbox.initialize({color:'blanco', dir: 'sexyimages'});
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <h1>Galeria</h1>
  20. <ul><?php
  21. <?
  22. foreach($fotos as $idfoto => $foto){
  23. ?>
  24. <li><a rel="sexylightbox[kmx]" title="Foto <?=($idfoto+1);?> de la galería" href="<?=$foto->source;?>"><img title="Foto <?=($idfoto+1);?> de la galería" src="<?=$foto->picture;?>" /></a></li>
  25. <?php
  26. }
  27. ?>
  28. </ul>
  29. </body>
  30. </html>

Y listo, ya tenemos una muy bonita y sexy galería de fotos extraidas del facebook de la fan page.

Ventajas...

  • No gastamos en espacio y ancho de banda de nuestro servidor
  • Desarrollo rapido de nuestra aplicación.
  • No necesitamos programar un panel de administración para subir las fotos.
  • No es necesario actualizar las dos partes, pues solo actualizando en Facebook tambien se actualiza en nuestro sitio.
  • Ideal para mostrar fotos a usuarios que no forman parte de dicha red social

Y esas son algunas de las ventajas, espero les haya servido este pequeño tutorial que apliqué a Kilometro X, puedes descargar el ejemplo.

]]> http://makesurfer.com/2010/08/extraer-galeria-de-fotos-de-una-fan-page-de-facebook/feed/ 1 Libro: Eres Productivo Vol. 1. http://makesurfer.com/2010/07/libro-eres-productivo-vol-1/ http://makesurfer.com/2010/07/libro-eres-productivo-vol-1/#comments Thu, 29 Jul 2010 04:40:02 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=146 Hace un par de días, terminé de leer un libro que se llama "Eres Productivo Vol 1". Este libro es una recopilación de los artículos más interesantes de ThinkWasabi, un blog en el cual escribe Berto Pena, autor de este libro.

El libro, así como su blog, Berto Pena escribe artículos y consejos sobre como elevar nuestra productividad, dando algunas recetas algunas muy básicas y otras que te hacen despertar el sentido de querer ser más productivo. Además, en algunos de sus artículos también nos enseña como ser buenos freelancers a la hora de trabajar en nuestra casa. Algo en el que me identifico mucho, puesto que con mi trabajo de desarrollador web freelance ahorro mucho tiempo, pero de igual manera, para los que dedicamos nuestro tiempo y trabajo a estar pegados frente a una computadora, este libro nos enseña el porque este aparato es un arma de doble filo a la hora de utilizarlo en nuestro trabajo.

Así que los invito a que lean este libro, si ustedes no son trabajadores freelance, pero si estudiantes, aun así se los recomiendo, y si lo leen, pongan en practica los consejos.

El libro lo dejo a ustedes para que lo descarguen, ya que está liberado bajo licencia Creative Commons 3.0 Atribución - No Comercial - Sin obra derivada.

Descarga: Unete al Club EresProductivo para poder descargar este y el segundo volumen del libro.

]]> http://makesurfer.com/2010/07/libro-eres-productivo-vol-1/feed/ 1 Proyecto: Kilometro X http://makesurfer.com/2010/07/proyecto-kilometro-x/ http://makesurfer.com/2010/07/proyecto-kilometro-x/#comments Sun, 25 Jul 2010 06:12:50 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=123 Este es uno de mis ultimos trabajos de desarrollo web. Kilometro X es un parque ecologico y de deportes ubicado en el cerro de San Juan, en el poblado de El Aguacate, Municipio de Tepic, Nayarit.

En el inicio, se utilizó un video de alojado en Vimeo, este es un promocional del parque. Despues de entrar a la web, podemos observar un mensaje de bienvenida y, si tienes una cuenta en Facebook, puedes unirte a la pagina fan del Kilometro X en Facebook.  Cuenta con 9 secciones principales que son:

  • Página Principal (presionando el logo de KMX se accede)
  • Actividades
  • Servicios
  • Ubicación
  • Contacto
  • Descargas
  • Paquetes
  • Galería (boton naranja del lado derecho).
  • Términos de uso.

Como cada uno de los nombres de la seccion del sitio, podemos encontrar dicha información del Kilometro X. En la sección Actividades, cuenta con varias subsecciones detallando cada una de las actividades que se realizan en el Kilometro X. En la sección de ubicación, podemos encontrar información sobre la localización del parque y la vista panoramica de la calle de la entrada al parque con un mapa de la ciudad. La galería de fotos muestra fotografías alojadas en la nube (a traves de Facebook), directamente de la Fan Page del Kilometro X.

El sitio fué desarrollado con XHTML, CSS 2 y JavaScript, con ayuda del Framework jQuery.

El diseño fué acargo de Casa Creativa y los logos y marcas mencionadas son de sus respectivos dueños y autores.

]]> http://makesurfer.com/2010/07/proyecto-kilometro-x/feed/ 4 Humor: Si resolver un examen fuera así de fácil. http://makesurfer.com/2010/07/humor-si-resolver-un-examen-fuera-asi-de-facil/ http://makesurfer.com/2010/07/humor-si-resolver-un-examen-fuera-asi-de-facil/#comments Sun, 25 Jul 2010 04:00:01 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=119 Sin dudas, esta imagen ha sido de las más graciosas que he visto, los programadores me entenderan, y es que ojalá fuera así de facil resolver un examen. xD

No recuerdo la  verdad donde lo descargue, pero creo que es de la pagina que está en la esquina inferior derecha.

]]> http://makesurfer.com/2010/07/humor-si-resolver-un-examen-fuera-asi-de-facil/feed/ 1 Musica: La Ghenga. http://makesurfer.com/2010/07/musica-la-ghenga/ http://makesurfer.com/2010/07/musica-la-ghenga/#comments Wed, 21 Jul 2010 04:49:18 +0000 Luis Carlos Cárdenas http://makesurfer.com/?p=111 Era verano de hace 3 años, cuando estaba navegando por Google, buscando algún grupo de reggae cuando en una lista me encontré a este grupo de nombre: La Ghenga. Este grupo de origen italiano, aunque la mayoria de sus canciones estan en Ingles, podemos encontrar algunas de sus canciones para descargar en su sitio web.

He de confesar, que la cancion que más me gusto fué la de Jamaica Farewall, inclusive, podemos buscar a este grupo en Grooveshark y hay muchas canciones para escuchar. Su voz es femenina, no se ve muy joven pero tiene una buena voz.

Mis canciones favoritas:

  • So Bad Now
  • To get your love
  • Jamaica Farewall
  • Jamaica is the place to go
  • Trust me
  • Right Time

Espero les guste su musica como a mi, así que aquí les dejo este video via YouTube de este grupo, la canción que suena es: Trust me.

Un saludo.

]]> http://makesurfer.com/2010/07/musica-la-ghenga/feed/ 1