Ads 468x60px

Perfil

lunes, 16 de septiembre de 2013

Convertir tu web estatica a Ajax

com.bydust.ajax es una Clase Javascript que convierte tu pagina estática a un verdadero sitio web Ajax.
Como funciona?
Cuando un usuario entra a tu sitio web, la clase realiza una comprobación del navegador . Si es capaz de soportar Ajax la clases se activa y convierte tu web automáticamente, si no, la secuencia de comandos se desactivara y el usuario navegara en tu web sin hacer peticiones Ajax.
Características
  • Es fácil de implementar y quitar
  • Filtra información necesaria que traera con Ajax
  • Puede añadir reglas para algunos enlaces
  • Animaciones personalizables
  • Permite retroceder de Pagina
Implementación
Primero que nada, bajarnos el .zip con los dos archivos Javascript (Descargar) , luego debemos incluir estos archivos en el head de cada pagina que deseamos convertir.
<head>
<script  src="js/com.bydust.array.js"></script>
<script  src="js/com.bydust.ajax.js"></script>
</head>
El Segundo paso sera especificar el contenido que debera recargar con Ajax, para esto clasificamos las secciones con divs y un identificador, el siguiente código sera guardado como
demo.html y como demo2.html con otro contenido en el div content, esto resultara dos paginas estaticas sin ninguna función Ajax.
<div id="page">

  <div id="content">
  <!-- begin content -->
  Contenido Demo 1*
  <!-- end content -->
  </div>

  <div id="sidebar">
  <!-- begin sidebar -->
  <a href="demo.html" >demo 1</a> -
  <a href="demo2.html" >demo 2</a>
  <!-- end sidebar -->
  </div>

</div>
Para finalizar incluiremos esta rutina en todas la paginas que se requieran con Ajax y con ella nuestras paginas estaticas tendrán ahora funcionalidad Ajax.
window.onload = function(){
var refreshed_content = Array('!content','sidebar');
bda.start(refreshed_content); 
}
Aunque paresca mentira, su pagina ahora esta Ajaxificada, pruebenla y verán la funcionalidad. Aquí puedes ver una demostración de una dos paginas estaticas Ajaxificadas.
Recursos
Publicado por Jesus en 3:23 p. m. 0 comentarios
Etiquetas: , ,

Generar Captura de pantalla con Ajax

PageGlimpse es un servicio que proporciona la captura de pantalla de una web.
Funciona consultando una pagina mandando como parametro la url y el tamaño.
Ejemplo
http://images.pageglimpse.com/v1/thumbnails?url=http://google.com&size=large&devkey=*****&nothumb=http://web.com/noimage.gif
Parametros:
url es la web que se desea capturar.
size es el tamaño estandar del thumbnail (small, medium, large).
devkey es el código que te darán al momento de registrarte en PageGlimpse.
nothumb es un parametro opcional para mostrar una imagen en caso todavía no se halla generado la captura de pantalla de la web.
Utilizandola con Javascript
Thumbnails.js es una librería Javascript que utiliza la API de PageGlimpse para traer la captura de pantalla con una funcion en Javascript el cual utiliza los mismos parametros que la url.
Para utilizar esta librería primero incluiremos el Javascript Thumbnails.js dentro del "head".
Luego crearemos la siguiente funcion
var getScreenShot= function(caja,size){

 var container = document.getElementById('container'),
  thumbs = Thumbnails({
   devkey:'bf3ec081beb6d6af0ff9e43e6f77771e',
   size:size,
   nothumb:'noimage.gif'
  });

 thumbs.get(caja, function(url, img) {
  var link = document.createElement('a');
  img.style.border = 'none';
  link.href = url;
  link.appendChild(img);
  container.innerHTML = '';
  container.appendChild(link);
 });
}
Insertamos un div con id “container” dentro del "body":
<div id="container"></div>
Y despues llamaremos a la pagina de esta manera:
<script type="text/javascript">
getScreenShot('http://google.com','small');
</script>

Recursos

Publicado por Jesus en 3:21 p. m. 0 comentarios
Etiquetas: , ,

domingo, 15 de septiembre de 2013

Detectar peticiones Ajax con PHP

Cuando desarrollamos aplicaciones Web, una de las ventajas que ahora tenemos es de utilizar Ajax para ciertas secciones donde es conveniente, y también es necesario restringir peticiones que no sean tipo XMLHttpRequest.
Para filtrar solo peticiones Ajax bastara con colocar este simple script.
if(isAjax()){
    die('Es una peticion Ajax.');
}else{
    die('Acceso denegado!');
}

function isAjax(){

    $xhr = strtolower($_SERVER['HTTP_X_REQUESTED_WITH']);
    if( !empty($xhr) &&
        $xhr == 'xmlhttprequest'){ 

        return true;
    }else{

        return false;
    }

}
Nota: algunos servidores Web no proporcionan esta variable, de modo que tendrás que probar antes de implementarlo.

Publicado por Jesus en 3:19 p. m. 0 comentarios
Etiquetas: , ,

sábado, 14 de septiembre de 2013

Instalar un acortador de URL en WordPress

Le petite url es un plugin para WordPress muy bueno que permite tener un sistema propio de acortamiento de url para nuestros Post.
Existen otros plugins con la misma funcionalidad, probándolos me di cuenta que este era mas completo, ¿Porqué? Pues este plugin nos da automáticamente la url corta al crear el Post, y nos brinda una función para ponerla en nuestro theme actual y de esta manera promocionarla.
Mediante su panel de configuración este plugin nos brinda ciertas particularidades que nosotros queremos, por ejemplo la url puede estar conformada por diferentes grupos de caracteres (letras minúsculas, mayúsculas, números).
Para una mejor explicación de la configuración, aquí un Video creado con Screenr.
ScreenCast
[SWF]http://screenr.com/Content/assets/screenr_0817090731.swf,540,350,i=9984[/SWF]

Recursos



Publicado por Jesus en 3:16 p. m. 0 comentarios
Etiquetas:

viernes, 13 de septiembre de 2013

Android studio


Hola hoy vamos a ver el nuevo IDE para desarrollar en Android que ha lanzado Google esta semana en su evento Google I/O 2013, su nombre es  Android Studio esta basado en un IDE para Java muy conocido llamado IntelliJ IDEA.
Este nuevo entorno nos proporciona herramientas para el desarrollo en android al igual que en Eclipse si utlizamos el plugin ADT.
Este nuevo entorno nos proporciona herramientas para el desarrollo en android al igual que en Eclipse si utlizamos el plugin ADT.
Segun la documentacion oficial tambien nos ofrece:
  • Soporte para Gradle
  • Refactorizacion especifica para Android y soluciones rapidas.
  • Herramientas para medir el rendimiento, usabilidad, compatibilidad de versiones y otros problemas.
  • ProGuard y capacidad para firmar apps
  • Asistentes basados ??en plantillas para crear diseños y componentes en Android.
  • Un editor rico en cuanto a diseño, que le permite realizar drag and drop a los componentes de la UI,
  • vista previa de los layouts en múltiples configuraciones de pantalla en simultaneo(a mi opinion algo super util), y mucho más
Como siempre Google nos ofrece sus soluciones para diferentes plataformas, yo particularmente lo he probado solamente en Linux Ubuntu 12.04 64 bits .
La instalación es muy simple y no voy a explayarme sobre ya que para cada OS varia pero lo pueden descargarlo de aqui.

Creando un proyecto:

Una vez que lo abrimos podemos ver algunas cosas,muestra una ventana para crear un proyecto importarlo, etc.
Para crear un proyecto nuevo es de lo mas simple:
1- Seleccionamos New Project,
luego la ventana que veremos es muy parecida a la del Eclipse.
2- Podemos seleccionar el icono para la app y su tamaño:
 3-Seleccionar algun diseño ya predeterminado para la UI.

4- Por ultimo ingresamos el nombre de la Activity y Finish
Una vez q abre el e  podemos ver que tal vez su UI no sea del todo bonita si lo comparamos con el eclipse o algún otro  (lo compensa en rendimiento)
La estructura del proyecto es muy parecida a la de eclipse, a continuación muestro una comparativo con los ide e sombreado algunas areas con color para facilitar la comparación.
Al intentar lanzar el emulador tuve el siguiente problema:
Algunos de los emuladores que habia creado no tenian seleccionado una version en el campo Targe, esto se debe a que el ide trae por defecto la version 4.2.2 y en mi caso usaba 2.3, para corregir esto tuve que seleccionar para el proyecto la ubicacion del SDK que tenia instalado.
Deben hacer lo siguiente:
File->Project Structure
Luego clickera Edit como vemos en la img.
Luego en el campo Android SDK Home Path cambiarlo a donde uds tengan instalado su SDK.
Luego de esto deberan volver a la ventana con los emuladores dar click en el emulador que muestra fail, clickear edit y veran que en el campo target en su listado figuran todos las versiones que tenian instaladas.

Editor de UI:

Una de las caracteristicas mas interesantes que incluye es un poderoso de editor visual para poder crear arrastrando los componentes nuestras vistas.
También nos permite ver nuestra vista en diferente dispositivos.

Cambiar Theme:

Si son de los que les gusta usar el IDE en colores oscuros al estilo SublimeText2 pueden cambiar el color de la sig. forma
File->Settings->Appeareance->Theme
El actual es IDEA 4.5 deberan cambiarlo a “Darcula“, luego deberan reiniciar el ide.
Luego se vera de la siguiente forma;

Probar App en Telefono en vez de Emulador:

Pude observar que el IDE por defecto ejecuta la aplicación en el emulador y por mas que tengamos nuestro telefono conectado lo seguirá haciendo, para poder correrlas directamente en nuestro telefono debemos hacer lo siguiente:
Dar click al lado de la flecha verde de RUN en el campo de seleccion y clickear en “Edit Configuration” como muestra la imagen.
Luego nos abrira la siguiente ventana en el cual debemos buscar en la sección Target Device y marcar “Show chooser dialog” y luego  OK.
Una vez modificado esto al volver a correr nuestra App nos mostrara la ventana para seleccionar si correr en el emulador o en nuestro dispositivo Android.

Importar Proyecto de Eclipse:

 Documentacion oficial sobre esto aqui.

Debemos hacer lo sig.

Primer ver si el plugin ADT en eclipse esta al dia version 22 o superior
Si no recuerdan como actualizarlo miren este link
Luego en Eclipse, seleccionar File > Export.
En la ventana que aparece seleccionar Android and Generate Gradle build files.
Seleccionar el proyecto you want y click Finish.
Para importarlo en Android Studio:
En Android Studio, seleccionar File > Import Project.
Ubicar el proyecto y seleccionar ok
Seleccionar crear proyecto de una fuente existente, seguir el asistente como si estuviesemos creando un proyecto.
Android Studio nos ofrece mucho mas de lo que mostre en este post solamente comente algunas, con el tiempo iremos conociendo mas sobre este IDE.
Les dejo un video oficial de Google sobre este

Conclusion:

El ide promete mucho ya que esta diseñado especificamente para el desarrollo en Android, es mucho mas rapido y liviano que Eclipse, esto es un punto
muy importante a favor, tambien para lo que es el diseño de UI es mucho mejor.
Recuerden que al ser una version Preview de seguro debe haber muchos bugs que iran corrigiendo con el tiempo·
Los invito a que lo prueben y dejen algun comentario de que les parecio o si quieren compartir alguna funcionalidad que hallan encontrado y les parece importante.
Publicado por Jesus en 2:30 p. m. 0 comentarios
Suscribirse a: Entradas (Atom)