Archivo de la etiqueta: Javascript

Código de 50% de descuento para #cpartymx4!

Hola amigos en esta ocasión les traigo un código de 50% de descuento para todos los usuarios de las comunidades afiliadas a Campus Party! El código es:

cpmx4comunidadesmayo

¿Como activo el código?

Accede a tu cuenta de campusparty, si aun no estas registrado corre y registrate

Captura de pantalla 2013-05-09 a la(s) 13.08.36

Una vez dentro de tu cuenta, accede a comprar tu entrada

Captura de pantalla 2013-05-09 a la(s) 13.13.51

Te aparecerá un botón con la leyenda “Comprar con descuento” haz clic en el

Captura de pantalla 2013-05-09 a la(s) 13.16.06

Por ultimo introduce el código de 50% de descuento para asistir a campusparty México

cpmx4comunidadesmayo

Captura de pantalla 2013-05-09 a la(s) 13.18.15

De manera paralela, Campus Party ha habilitado un micrositio para regalar pases gratis en en la siguiente dirección

salu2

@Chopapp para compartir código fuente

Después de un largo descanso …. Chop es una curiosa herramienta desarrollada por ZURB que te permite compartir snippets (trozos de código fuente) y recibir retro alimentación, si quieren saber por que esta app es bastante interesante les recomiendo seguir leyendo :).

chop

La idea es bastante simple y divertida, en el caso de querer mostrar nuestro codigo a alguna otra persona (similar a otros servicios como copypastecode o pastebin) y recibir algun tipo de retroalimentación tan solo tenemos que copiarlo en el formulario, elegir el lenguaje de programación adecuado y usar el botón de Chop It!, ejemplo:

chop_example1

Una vez hecho esto la aplicación nos pedirá un nombre de usuario y a continuación nos dará un link con el cual nuestros amigos podrán ver y opinar sobre nuestro código :), lo mas interesante de esta aplicación a diferencia de muchas otras que existen en el mercado es que nos permite realizar comentarios sobre el código línea por línea y no un comentario general, desde mi punto de vista es una forma bastante interesante de innovar y mejorar respecto a servicios ya existentes. El resultado final es algo como esto:

chop_example_2

Si quieren mantenerse informados sobre el desarrollo de esta aplicación pueden seguir a @chopapp

Tutorial Bing Search API 2.0 y PHP

Ha inicios del mes de agosto la gente de Microsoft mejoro (por no decir que modifico) la forma en que los desarrolladores interactuaban con la api, mejor conocida como bing api 2.0 ahora. Esto lógicamente causo bastantes problemas a las empresas y programadores independientes que no realizaron adoptaron los cambios en sus aplicaciones rápidamente, la mayor novedad que nos presenta ahora la api es que trabaja directamente con Windows Azure Marketplace.

Muchas personas pensaran que modificar sus aplicaciones para que vuelvan a funcionar va a ser una tarea muy tediosa, pero de hecho es bastante sencillo, a continuación he escrito una serie de pasos que te permitirá migrar una aplicación a bing api 2.0, mas concretamente utilizaremos la Bing search api 2.0

  • Registrarte en el Windows Azure Marketplace (usando tu cuenta de hotmail es suficiente)
  • Una vez registrado puedes acceder a la sección de datos del marketplace donde además de Bing Search Api (que es el servicio que utilizaremos en este tutorial) también podrás hacer uso de otros servicios como Microsoft Translator, etc. Lista de servicios de Bing

  • Al hacer clic en el servicio serás enviado a una vista donde se proporciona mas información acerca de la api así como una lista de precios por utilizar la api mensualmente, si crees que tu aplicación no tendrá mas de 5000 peticiones por mes a la api podrías utilizar el paquete gratuito al servicio (el ultimo precio que se muestra) de lo contrario te recomiendo adquirir algún otro paquete con las transacciones por mes que mas se ajusten a tus necesidades
  • Una vez suscrito al paquete de tu preferencia (hacer clic, aceptar términos, etc, etc.) en la sección de claves de cuenta podrás encontrar la key necesaria para poder conectarte al servicio y empezar a hacer uso de el. Así mismo en la sección de Mis datos encontraras un resumen de las aplicaciones que estas utilizando actualmente y el estado del numero de consultas restantes por mes, etc.

Listo eso es todo lo que tienes que configurar para comenzar a hacer uso de la api de bing :), ahora para no dejar el articulo a medias les dejo un pequeño código en PHP que nos regresa los resultados encontrados de la query que le pasemos a la api.

<?php

  $api = 'https://api.datamarket.azure.com/Data.ashx/Bing/Search/v1/Web?$format=json&$top=8&Query=';
  $accountKey = "LA KEY QUE APARECE EN LA SECCION DE CLAVES DE CUENTA";
  $context = stream_context_create(array(
    'http' => array(
        'request_fulluri' => true,
        'header'  => "Authorization: Basic " . base64_encode($accountKey . ":" . $accountKey)
    )
  ));

  $query = 'alevsk';
  $request = $api . '%27'.$query.'%27';

  $jsonResponse =  json_decode(file_get_contents($request, 0, $context));
  print_r($jsonResponse);
  
?>

El código es bastante sencillo pero creo que deja bastante claro cuales son los requerimientos mínimos para interactuar con la api como la autentificación, los sources y el formato de respuesta, si tienes mas dudas acerca de los parámetros que recibe la api puedes utilizar el generador de consultas que proporciona el sitio o también acceder a el utilizando el enlace de “Usar” (el que esta a la derecha en la imagen anterior).

El generador de consultas de bing api 2.0 se trata de una herramienta bastante útil ya que te permite configurar tus request de una manera muy amigable y al final en la parte superior te muestra como quedaría la petición (la URL) que deberías de hacer a la api para obtener los resultados mostrados abajo :).

Muy importante, aquí les dejo la documentacion completa de la api que podrán utilizar como referencia.

Con esto espero que haya quedado claro o por lo menos entendible la nueva manera de interactuar con la api de bing y como siempre digo, si hay dudas respecto al código pueden escribirlas en los comentarios y con gusto las resolveré.

salu2

SelectBox dependientes – ciudades y estados

Retomando los post sobre programación web en esta ocasión les comparto un rápido ejemplo sobre selectbox dependientes, mas concretamente el ejemplo de selectbox de ciudades y estados. Básicamente tenemos 2 selectbox, el primero contendrá los estados de la republica mexicana, cuando seleccionamos alguno el segundo selectbox contendrá ahora las ciudades de ese estado, para hacer esto necesitamos una pequeña base de datos con 2 tablas (ciudades y estados .. obvio), después algo de código php que se encargue de hacer la conexión y otro mas que nos devuelva los datos de las consultas vía JSON y por ultimo nuestro html y javascript que se encargara de mostrar el resultado.

Al terminar el tutorial tendremos algo que se vera así 🙂

Puedes descargar los archivos que se utilizara en la practica a continuación.

Comenzamos pues :).

Comenzamos creando el archivo que hará la conexión a la base de datos, yo acostumbro hacer una clase para eso ya que luego puedo hacer extends de la misma y todo es mas fácil.

<?
  global $ID_BD;
  $ID_BD=mysql_connect("127.0.0.1", "root","");
  mysql_select_db("states_cities", $ID_BD);
  mysql_query("SET NAMES 'utf8'", $ID_BD);  

class mysql {
VAR $ID;
function mysql (){

}
  function _query($sql){

  global $ID_BD;
   

    //echo "$sql\n";
      return mysql_query($sql,$ID_BD);
  }
  
  function _registers($sql){
  
  global $ID_BD;
    [email protected]_query($sql, $ID_BD);
    
    //echo $result;
    //echo $sql;
    if ($row=mysql_fetch_object($result)){
        do{
        
        $registros[]= $row;
        
        }while($row=mysql_fetch_object($result));
    }
    else
      return array();
    return $registros;
  }
  
  function _register ($sql){

  global $ID_BD;
    //echo "$sql";
      $result=mysql_query($sql, $ID_BD);
      if ($row=mysql_fetch_object($result))
        return  $row;
  }
  
  function _close(){
    mysql_close($this->ID);
  }
  
  function _last_id(){
    global $ID_BD;
      return  mysql_insert_id($ID_BD);
  }
}  

?>

Después creamos el archivo que se encargara de hacer las consultas y regresar el JSON correspondiente, realizaremos peticiones a este archivo via ajax por medio de jquery.

<?php
require_once 'mysql.php';

class data extends mysql
{
  function getStates()
  {
    $states = $this->_registers("SELECT * FROM states;");
    return json_encode($states);
  }

  function getCities($idState)
  {
    $idState = (int) $idState;
    $cities = $this->_registers("SELECT * FROM cities WHERE id_state = " . $idState . ";");
    return json_encode($cities);
  }
}

  $data = new data();
  if($_GET['action'] == "getStates")
  {
    echo $data->getStates();
  }
  else if($_GET['action'] == "getCities" && isset($_GET['stateID']))
  {
    echo $data->getCities($_GET['stateID']);
  }

?>

Como podemos ver he empaquetado el código en una clase y casi en la parte final del código reviso si existen algunos parámetros pasados por GET para mandar llamar a las funciones correspondientes :), examinemos por ejemplo la función que nos trae los estados:

  function getStates()
  {
    $states = $this->_registers("SELECT * FROM states;");
    return json_encode($states);
  }

Básicamente hacemos un select y el arreglo asociativo resultante (checar la clase mysql para mas información) lo pasamos por json_encode para ser manipulado con javascript, lo mismo pasa con la función que te arroja las ciudades solo que esa tiene una clausula WHERE que te manda traer solo las ciudades de X estado :).

Finalmente creamos nuestro archivo html donde desplegaremos los 2 selectbox, para eso escribimos el siguiente código.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>SelectBox dependientes</title>
    <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script language="JavaScript">

    Object.size = function(obj) {
      var size = 0, key;
      for (key in obj) {
          if (obj.hasOwnProperty(key)) size++;
      }
      return size;
    };
    $(document).ready(function() {

      //$.ajax({
      $.ajax({
        url: 'data.php?action=getStates',
        dataType: 'json',
        success: function(data) {
          var size = Object.size(data);
          var items = "";
          for(var i = 0; i < size; i++)
          {
            items = items + '<option value="' + data[i].id_state + '">' + data[i].name + '</option>';
            //console.log(data[i].id_state + " : " + data[i].name);
          }  
          $('#states').append(items);
          $('#states').change();
        }
      });

     $('#states').change(function() {
      $.ajax({
        url: 'data.php?action=getCities&stateID=' + $('#states').val(),
        dataType: 'json',
        success: function(data) {
          var size = Object.size(data);
          var items = "";
          for(var i = 0; i < size; i++)
          {
            items = items + '<option value="' + data[i].id_state + '">' + data[i].name + '</option>';
            //console.log(data[i].id_state + " : " + data[i].name);
          }  
          $('#cities').html("");
          $('#cities').append(items);
          $('#cities').change();
        }
      });      
     });

    });      
    </script>
</head>
<body>

<a href="#">Selecciona un estado</a>
<br/>
<select id="states">
</select>
<br/>
<a href="#">Selecciona una ciudad</a>
<br/>
<select id="cities">
</select>
<br/>

<div id="map">
</div>

</body>
</html>

Como pueden ver, al inicio cargamos la librería de JQuery desde google, después hacemos la primera petición al script data.php via ajax para que nos traiga los estados y poder “rellenar el primer selectbox”, después tenemos el siguiente código javascript.

     $('#states').change(function() {
      $.ajax({
        url: 'data.php?action=getCities&stateID=' + $('#states').val(),
        dataType: 'json',
        success: function(data) {
          var size = Object.size(data);
          var items = "";
          for(var i = 0; i < size; i++)
          {
            items = items + '<option value="' + data[i].id_state + '">' + data[i].name + '</option>';
            //console.log(data[i].id_state + " : " + data[i].name);
          }  
          $('#cities').html("");
          $('#cities').append(items);
          $('#cities').change();
        }
      });      
     });


change() nos permite detectar el cambio de selección de un selectbox, entonces utilizamos ese evento para “refrescar” las opción del segundo selectbox, vemos cual es el estado que esta seleccionado, extraemos su valor (es el mismo id que le corresponde en la tabla de estados) y armamos la petición para mandar traer las ciudades :).

Y listo con esto tenemos listo un mini ejemplo de selectbox dependientes, espero les sirva este pequeño snippet :), ya saben cualquier duda pónganla en comentarios.

La verdad es un código bastante sencillo y fácil de implementar (unos 10 mins a lo mucho), con un poco mas de código se podría mostrar la ubicación de la ciudad en google maps o utilizar esto en algún formulario de registro o cualquier otra cosa.

salu2

Detectar iPad – iPhone – iPod con Javascript


Muchas de las personas que desarrollan sitios web seguramente se habrán topado ya con la famosa pregunta “¿y mi sitio se va a poder ver bien desde el Nuevo iPad?”. Existen varias soluciones para esto, si por ejemplo utilizamos algún CMS como wordpress o Joomla existen bastantes plugins que nos permitirán adaptar nuestros sitios para que puedan ser leídos comodamente en estos dispositivos, algunos de los que me vienen a la mente son WPtouch, WordPress PDA & iPhon, etc.

Sin embargo si somos de esos desarrolladores mas “artesanales” y nos gusta hacer los trabajos desde 0 tenemos que implementar esas detecciones a mano, en realidad no es tan difícil, se requiere un poco de paciencia mas que nada para desarrollar una buena hoja de estilos, lo demás es bastante fácil.

Basta con colocar un pequeño código javascript, por ejemplo:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) 
{
      //El usuario esta utilizando un iPhone, iPad o iPad para visualizar el sitio web
      //Cargar la respectiva hoja de estilos
}
else
{
     //Nos visitan desde un navegador tradicional
     //cargamos la hoja de estilos por defecto :)
}

La funcionalidad de esa condición es bastante sencilla, si el navegador con el que nos visitan tiene en su estructura iPhone, iPod o iPad, lo mas seguro es que nos estén visitando desde uno de esos dispositivos, esta validación se puede realizar también desde PHP, sin embargo yo la prefiero hacer del lado del cliente para aligerar algo de carga al servidor.

salu2