Notificaciones con chrome desktop en HTML5

El día que escribo este post, parece que va a ser el estandar, y espero no lo cambien (como ya me paso alguna vez, y que por esa razon este objeto: window.webkitNotifications  ya no funcionaba.... pero con este nuevo código ya funciona otra vez...je je )



Es un "objeto" que defino en javascript y solo hay que instanciarlo y utilizarlo:

Aquí la "clase o objeto":

/*INICIO NOTIFICATIONS DESKTOP*/     
function Notifier() {}

    // Returns "true" if this browser supports notifications.
    Notifier.prototype.HasSupport = function() {
    if (Notification) {
        return true;
      } else {
        return false;
      }
    }
    // Returns "true" if this browser supports notifications.
    Notifier.prototype.HasPermission = function () {
        if (Notification.permission === "granted") {
            return true;
        } else {
            return false;
        }
    }

    // Request permission for this page to send notifications. If allowed,
    // calls function "cb" with true.
    Notifier.prototype.RequestPermission = function (cb) {
        Notification.requestPermission(function (status) {
            if (status === 'granted') {
                return true;
            }
            else {
                return false;
            }
            
        });
    }

    // Popup a notification with icon, title, and body. Returns false if
    // permission was not granted.
    Notifier.prototype.Notify = function(icon, title, body) {
        if (Notification.permission === "granted") {
            var optionsNotification = {
                body: body,
                icon: icon
            }
            //Notification.create('1', optionsNotification);
            var n = new Notification(title, optionsNotification);

        return true;
      }

      return false;
    }

La instanciación:

var notifier = new Notifier();

El uso:

notifier.RequestPermission();

ó

notifier.HasSupport()

etc.

Para más información aquí.

Espero les sirva.

Sean felices! :) Y siéntanse libres de opinar ;)

Convertir imagen a byte array en javascript utilizando canvas de html5

Y esta es la funcion:

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to guess the
    // original format, but be aware the using "image/jpg" will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Sean felices! :) Y siéntanse libres de opinar ;)

Pasar imagenes de java applet a javascript

Los pasos son.

1) El applet  
2) colocar el applet en la pagina
3) crear la funcion javascript que recibirá como parametro la imagen en formato String.

1) Bueno entonces.... el archivo java lo vamos a llamar Main.java y contendrá:

import java.applet.*;
import java.awt.*;
import netscape.javascript.JSObject;
import java.awt.event.*;

import java.awt.image.*;
import java.io.*;
import javax.imageio.*;
import javax.swing.*;
import javax.xml.bind.*;

public class Main extends Applet{
public void init () {

System.out.println("Good Morning2"); 
String reconstitutedString = "";



String text = "Hello";

BufferedImage img = new BufferedImage(1, 1, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = img.createGraphics();
Font font = new Font("Arial", Font.PLAIN, 48);
g2d.setFont(font);
FontMetrics fm = g2d.getFontMetrics();
int width = fm.stringWidth(text);
int height = fm.getHeight();
g2d.dispose();

img = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
g2d = img.createGraphics();
g2d.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDER_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_DITHERING, RenderingHints.VALUE_DITHER_ENABLE);
g2d.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
g2d.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
g2d.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
g2d.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_PURE);
g2d.setFont(font);
fm = g2d.getFontMetrics();
g2d.setColor(Color.BLACK);
g2d.drawString(text, 0, fm.getAscent());
g2d.dispose();

//convertir a array de bytes
ByteArrayOutputStream baos = new ByteArrayOutputStream();
try {
ImageIO.write(img, "png", baos);
} catch (IOException e) {
System.out.println(e); 
e.printStackTrace();
}
String imageString = "data:image/png;base64," + DatatypeConverter.printBase64Binary(baos.toByteArray());

JSObject window = JSObject.getWindow(this);
window.call("alerta", new Object[] {imageString});

}
public void paint(Graphics g){
g.drawString("Welcome in Java Applet66.",40,20);

}
}

1.1) Para compilar el archivo java ejecutamos la linea en cmd:

javac Main.java -classpath C:\VSTEAM\Development\TitanMultiClient\WebSites\TitanWebClient\Impersonation\java-plugin-1.6.0.23.jar

No quiero ir al detalle de como compilar un  java y eso, pero no sobra decir que se necesita un jar especial para que funcione esto.... ese jar hay que meterlo en la carpeta LIB de donde esta instalado nuestro java.

El jar lo adjunto aquí.

Una vez colocado en LIB, hay si se podrá compilar correctamente.

2) En la página debe de estar el siguiente código html:

 <applet CODE="Main.class" WIDTH="300" HEIGHT="300">
                        
 </applet>

Y también agregar el código de la imagen que se va a colocar:

<img id="imageTest" src="" 
                    width="50" height="50" alt="embedded folder icon">


3) colocar lo siguiente en la página web en la sección scripts.

<script src="jQuery.js" type="text/javascript"></script>
<script>
        function alerta(parametro) {
            alert('aaa' + parametro);
            $('#imageTest').attr('src', parametro);
        }
    </script>

Ojo que se necesita jquery en este ejemplo, para asignar el valor src a la imagen, aunque se puede hacer con javascript.

Espero les sirva este pequeño manual.

Sean felices! :) Y siéntanse libres de opinar ;)

Contar columnas de una tabla con jquery

Así es:

$('#tabla_id').find('tr')[0].cells.length;

Sean felices! :) Y siéntanse libres de opinar ;)

Borrar BD SQLite creada con HTML5

Hola a todos.

Si estas iniciando con desarrollo con SQLite y deseas borrar una base de datos de tu aplicativo en windows xp, la dirección esta aquí:

C:\Documents and Settings\nameuser\Configuración local\Datos de programa\Apple Computer\Safari\Databases

Y ahí estan las base de datos creadas con tus aplicativos en HTML5.

Aclaro que en windows vista, o en seven cambiará un poco la ruta.

Espero to sirva.

Sean felices! :) Y sientanse libres de opinar ;)

Herramientas, frameworks, engines para HTML5 y el futuro de la web

Bueno bueno...

Aquí comenzaré a colocar todo tipo de referencias a las nuevas tecnologias para desarrollar en el mundo web... es una inmensidad, pero serán herramientas que nos van a ayudar muchisimo en nuestras aplicaciones web.

engines para juegos: http://ntt.cc/2011/01/31/66-open-source-javascript-game-engine-for-serious-developers.html como por ejemplo impact.


Raphaël: JavaScript Library  -> para dibujar al piso en HTML5 e interacciones

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills Herramientas para cross-browser hacia HTML5

A medida que vaya encontrando más los iré publicando en este post.

Espero les sirva.

Sean felices! :) Y sientanse libres de opinar ;)