screensaver

screensaver

Ahora que las Smart TV’s son más comunes, existe un número mayor de aplicaciones y usos que les podemos dar. Desde hace ya bastante tiempo, se han utilizado pantallas para desplegar la información de los vuelos en los aeropuertos.

Desarrollé una aplicación parecida al tablero del aeropuerto y estaba preocupado por el efecto “burn-in”, así que decidí utilizar un salvapantallas (screensaver). Afortunadamente un equipo de Adobe desarrolló un proyecto (git repo) que hace precisamente esto, y lo hace muy bien.

Para agregarlo en mi proyecto, solo copie los archivos en una carpeta ‘screensaver’ e inserte un iframe en la página que lo quería mostrar

<iframe id="saver" src="screensaver/saver.html"></ iframe>

y para que iniciara inmediatamente, sin la necesidad de la intervención del usuario

$(document).ready(function(){
this.$('#saver').load(function(){
this.contentWindow.eve('menu.instagram')
this.contentWindow.eve('go')
})
})

con esto es como si el usuario hubiera dado clic en el botón de instagram y luego en el botón de play 🙂

Fuentes:
http://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page
http://stackoverflow.com/questions/12199797/why-is-iframe-contentwindow-null

Para desplegar un mensaje en formato HTML puedes utilizar un HTMLPane. Para el cuerpo del mensaje no hay ningún problema, el problema se presenta cuando intentas aplicar CSS para posicionar elementos. Esto se debe al mecanismo de posicionamiento y auto dimensionado de los controles de SmartGwt.

En mi caso, sólo necesitaba desplegar una “capa” que ocupara toda la pantalla para desplegar el mensaje. Así que utilizando el atributo “position: fixed;” de CSS pude ubicar los elementos referente a la ventana del naevgador.

SmartGwt

        HTMLPane pnlHtmlMessage = new HTMLPane();
        pnlHtmlMessage.setContents(message.getHtml());

HTML del mensaje

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .wrapper {
                position: relative;
            }</p><pre><code>        .background {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            bottom: 24px;
            background-color: black;
            opacity: 0.6;
        }

        .message {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 640px;
            height: 120px;
            margin-left: -320px;
            margin-top: -60px;
            font-size: 24px;
            color: white;
        }

        .indicador {
            position: fixed;
            text-indent: -800px;
            background-image: url(/img/dismiss-arrow.png);
            width: 468px;
            height: 60px;
            left: 20px;
            bottom: 30px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="background"&gt;&lt;/div&gt;
    &lt;div class="message"&gt;
        Ahora puedes ver mensajes importantes en esta pantalla.&lt;br&gt;
        Selecciona la opción de "No mostrar este mensaje de nuevo" y haz clic en el botón OK si has entendido el mensaje
    &lt;/div&gt;
    &lt;div class="indicador"&gt;Selecciona y da clic aquí&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><p>

Si utilizaramos “position: absolute;” intentaría posicionar los elementos relativos al padre. Debido a que SmartGwt crea 2 divs para el HTMLPane: uno que funciona como proxy para los eventos y otro con el contenido HTML, pero con un tamaño que no coincide con el tamaño real del control. Así que es necesario posicionar los elementos del mensaje mediante una posición “fixed”.

Fuentes:
http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text

Necesitaba desplegar un mensaje sencillo con un texto centrado en la pantalla y una imágen alineada a la parte inferior izquierda de la pantalla.

Para lograr esto lo hice de la siguiente manera.

HTML

</p><div class="message">        Ahora puedes ver mensajes importantes en esta pantalla.

        Selecciona la opción de "No mostrar este mensaje de nuevo" y haz clic en el botón OK si has entendido el mensaje    </div><div class="indicador">Selecciona y da clic aquí</div><p>

CSS

    .message {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 640px;
        height: 120px;
        margin-left: -320px;
        margin-top: -60px;
        font-size: 24px;
        color: gray;
        opacity: 0.4;
    }
    .indicador {
        text-indent: -800px;
        background-image: url(../img/mensajes/dismiss-arrow.png);
        width: 468px;
        height: 60px;
        left: 20px;
        bottom: 10px;
        position: absolute;
    }

Hay que resaltar que para centrar el div necesitamos que tenga un tamaño fijo (width y height)y una posición absoluta, lo colocamos en el centro de la pantalla (la esquina superior izquierda del elemento) con top y left en 50% y luego utilizamos un valor proporcional negativo para margin-left y margin-top respectivamente para que se muestre centrado.

Fuentes:
http://stackoverflow.com/questions/9862167/positioning-div-element-at-center-of-screen

Recientemente he estado trabajando en un proyecto donde es necesario insertar vídeo en un a página web. Para realizar esta tarea podemos utilizar la etiqueta de HTML5 ‘<video>‘. Bueno, pues para que nuestro vídeo se pueda ver en los navegadores principales -firefox, chrome, ie, opera, safari- es necesario tener al menos 3 fuentes (source) de vídeo en los formatos mp4 (h264), webm (vp8) y ogg (theora).

En Linux podemos utilizar el comando avconv -antes ffmpeg- de la siguiente manera:

avconv -i original.mov nuevo.mp4 nuevo.webm nuevo.ogv

tal vez sea necesario que instales el paquete libavcodec-extra. Con esto, al final tendremos 3 archivos nuevos con los formatos requeridos, ya sólo habría que agregar las fuentes a la etiqueta ‘<video>’

<video style="width: 640px; height: 360px;">
 <source src="videos/nuevo.mp4" type="video/mp4"></source>
 <source src="videos/nuevo.webm" type="video/webm"></source>
 <source src="videos/nuevo.ogv" type="video/ogg"></source>
 <!-- Opcionalmente insertar vídeo en flash para soportar navegadores antiguos -->
 Lo sentimos, tu navegador no soporta la etiqueta de video.
 </video>

Fuentes:
https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements
http://paulrouget.com/e/converttohtml5video/

Para colocar una imagen exactamente en el centro de una página lo puedes lograr mediante CSS de la siguiente forma.

Supongamos que nuestra imagen mide 300px de ancho por 200px de alto.

HTML


<img id="logo" src="img/logo.png" /> 

CSS


#logo{
position:fixed;
width:300px;
height:200px;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-100px;
}

Fuentes:
http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ 

En el diseño de páginas web es muy útil colocar bloques o contenedores para indicar el lugar que va a ocupar un elemento de nuestro diseño. Y es mucho más práctico el poder remplazar dicho bloque desde nuestra hoja de estilos. De esta forma podemos modificar el diseño sin tener que cambiar la estructura o el código html de nuestra página.

En ésta página nos muestran nueve formas diferente de realizar esto. Pero mi favorita es, sin duda, la técnica número 3.

HTML


<h1 class="technique-three">

CSS-Tricks

</h1>

CSS


h1.technique-three {

width: 350px; height: 75px;

background: url("images/header-image.jpg");

text-indent: -9999px;

}

I’ve just installed Eclipse Indigo and Google Plugin for Eclipse. Then, I created a new -empty- Web Application Project and added a Module and Entry Point successfully, but when I tried to add a new HTML Page to contain my module I couldn’t. The create new html page wizard did nothing when I pressed the finish button. I switched Eclipse to previous version -helios- but the same problem occurred. Even tried to switch java jdk from openjdk to oracle(sun) jdk but didn’t work.
An issue has been reported in the gwt issue tracker but has not been addressed. Meanwhile…Is there a way to install a previous version of Google Plugin for Eclipse?

I’m going to see if the same problem occurs on Ubuntu 10.10 …. 🙂
Unfortunately it works in Ubuntu… same Eclipse and Google Plugin version 😦
It works if you use GWT 2.2.0, you can download previous versions from here.
Or you could just add a simple html page and paste the following contents replacing your module’s name appropriately, “samples” in this case

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Samples</title>
<script type="text/javascript" language="javascript" src="samples/samples.nocache.js"></script>
</head>

<body>

</body>
</html>