Etiqueta: html

web – agregar un protector de pantalla a una aplicación

programacion
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

SmartGwt – HTMLPane para deplegar un mensaje

programacion

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

CSS – Centrar un div horizontalmente y verticalmente

diseño

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

Ubuntu – Convertir video para HTML5

programacion

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/

CSS – Centrar una imagen en la página

diseño

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/ 

CSS – Remplazar un bloque de texto con una imagen

diseño

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;

}

Fedora 15 – Create new html page with Google Plugin for Eclipse does nothing

programacion

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>

BIRT – Parámetro con acentos en el ReportViewer

programacion

En los reportes que creó con BIRT tengo un encabezado «estándar» que utiliza el valor de un parámetro para desplegar el título.
Hace poco me tope con un título que contenía acentos y noté que en vez de «Archivo Histórico» me ponía «Archivo HistÃ3rico».

Para pasar un parámetro con acentos al ReportViewer, y que este lo despliegue correctamente, necesitas primero sustituir los carácteres acentuados por su entidad html correspondiente y luego codificar la url (yo utilizo la función URL.encodeQueryString() de GWT)

url.append("Titulo1=").append(URL.encodeQueryString(escapeHTML(tituloOficina)));

Para escapar el html tuve que crear mi propia función ya que los métodos StringUtil.asHTML() y SafeHtmlUtils.htmlEscape() no sustituyen los caracteres acentuados.

public static final String escapeHTML(String s) {
		StringBuffer sb = new StringBuffer();
		int n = s.length();
		for (int i = 0; i < n; i++) {
			char c = s.charAt(i);
			switch (c) {
			// á &aacute;
			case 225:
				sb.append("á");
				break;
			// Á &Aacute;
			case 193:
				sb.append("Á");
				break;
			// é &eacute;
			case 233:
				sb.append("é");
				break;
			// É &Eacute;
			case 201:
				sb.append("É");
				break;
			// í &iacute;
			case 237:
				sb.append("í");
				break;
			// Í &Iacute;
			case 205:
				sb.append("Í");
				break;
			// ó &oacute;
			case 243:
				sb.append("ó");
				break;
			// Ó &Oacute;
			case 211:
				sb.append("Ó");
				break;
			// ú &uacute;
			case 250:
				sb.append("ú");
				break;
			// Ú &Uacute;
			case 218:
				sb.append("Ú");
				break;

			default:
				sb.append(c);
				break;
			}
		}
		return sb.toString();
	}

actualización (16/10/2017)

en el ejemplo anterior se realiza la codificación y paso de parámetros mediante GWT. Recientemente tuvimos el mismo problema pero en una aplicación con javascript y angular.

Para realizar el mismo proceso en javascript utilizamos la librería he.js (que también codifica los caracteres con acentos) para codificar primero a HTML y luego, la función [encodeURIComponent], para codificar a los caracteres permitidos en la URL.

url += '&Titulo3=' + encodeURIComponent(he.encode($scope.reporte.descripcion, {decimal: true}))
windows.open(url)

notesé el parámetro {decimal: true} en la función he.encode, que es necesario para que BIRT viewer lo decodifique correctamente.

para entender porque se utiliza la función encodeURIComponent en vez de encodeURI, puedes ver este post

Fuentes:
birt-exchange forum
string-functions.com – html encode
meyerweb.com – URL decoder/encoder

GWT – Enviar HTML dentro de JSON mediante RequestBuilder

programacion

Hace poco integré el CKEditor en un proyecto. A la hora de enviar el código HTML al servidor tuve algunos problemas con los caracteres especiales.
Y es que hay que asegurarnos de que nuestro JSON sea compatible con su definición; afortunadamente el metodo toString de la clase JSONObject se encarga de «escapar» los caracteres no permitidos en JSON (» \ / \b \f \n \r \t \uXXXX) y nos regresa una cadena válida.

String jsonAcuerdo=new JSONObject(acuerdo).toString();

Finalmente, tenemos que enviar los datos dentro de una variable codificada a HTML de la siguiente forma

RequestBuilder rb = new RequestBuilder(RequestBuilder.POST, URL.encode(jsonUrl));
rb.setHeader("Content-type", "application/x-www-form-urlencoded");
StringBuffer postData = new StringBuffer();
postData.append("acuerdo=").append(URL.encodeComponent(jsonAcuerdo));
rb.sendRequest(postData.toString(),new RequestCallback(){
//TODO on response received
});

aquí es importante utilizar el método «encodeComponent» de la clase URL ya que esté si codifica los caracteres delimitadores de componentes en una URL (; / ? : & = + $ , #) a diferencia del método «encode» que no lo hace. Estos caracteres seguramente estarán presentes en el código HTML que deseemos enviar, por ejemplo en &quot; y ni hablar de los otros. Esta variable será decodificada «automaticamente» cuando la leamos en el servidor mediante el método getParameter de la interfaz ServletRequest

Drupal – Full vs Filtered HTML

programacion


Para un proyecto con Drupal queria sustituir el editor de texto que trae por default por uno mucho mas facil de utilizar. Asi que instale y configure el CKEditor. Despues de hacer esto, pense que automaticamente al crear una nueva pagina se desplegaria el Editor, pero no fue asi -tuve que seleccionar «Full HTML» en el formato de entrada-.
La diferencia entre el formato de entrada «Full HTML» y «Filtered HTML» es que, el primero, almacena y despliega el contenido tal como lo insertas (o lo insertaria un usuario con privilegios de creacion de contenido). Esto es potencialmente peligroso, ya que se podrian introducir codigos HTML malignos y nadie querria volver a entrar a tu sitio 😀 jaja. Por ello existe el segundo formato de entrada que realiza un filtro sobre las etiquetas que insertamos en el contenido y nos deja utilizar solo las que son «seguras».
El formato «Filtered HTML» es el predeterminado, para cambiar esto ve a Administrar->Configuracion del Sitio->Formatos de Entrada -bajo tu propio riesgo 😉 –

Fuentes:
Drupal Forums – Full vs Filtered HTML
Drupal Forums – Input Format Options default