| |

Menú radial mediante XHTML

ByLuis

Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.

menu_radial.png

El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.

Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.

menu_radial2.png

El HTML sería el siguiente:

<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>

Y los estilos:

ul {
width: 150px;
height: 150px;
display: block;
padding: 0px;
margin: 0px;
}
li {
width: 48px;
height: 48px;
display: block;
border: 1px solid #008585;
background: #24B8B8;
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
li + li + li {
margin-left: 50px;
}
li:first-child {
margin: 0px 50px;
}
a {
font-size: 250%;
font-family: Arial;
text-decoration: none;
color: #DEDED2;
}

Javascript Tutorial – Radial Menus Part 1

Similar Posts

iJab: chat javascript usando XMPP/Jabber

ByLuis

iJab es una librería javascript que nos permite añadir chat en nuestras aplicaciones web, con la característica que usa XMPP/Jabber para realizar las comunicaciones.

Entre las características encontramos:

  • Basado en el protocolo XMPP: lo cual permite usar servidores basados en ese protocolo
  • Soporte para MSN y AIM, añadiendo transports al servidor XMPP
  • Totalmente Javascript
  • Compatible con Firefox, IE, Chrome y Safari
  • Themes
  • Modos de aplicación: stant-alone, web chat y live
  • Sin pop-ups
  • Notificaciones de nuevos mensajes
  • Sonido
  • Múltiples usuarios en el chat (MUC)
  • Búsqueda de usuarios
  • Administración: permite añadir y borrar usuarios y administrar grupos
  • Smileys

iJab

Vía / WebAppers

Hapi.js + Vue.js empezando con las routes

Hapi.js + Vue.js empezando con las routes

ByLuis

Empezamos a mostrar contenido, hasta ahora solo mostraba un error 404 cuando se accedía a la URL del servidor.

Ahora vamos a añadir una route simple que muestre un objeto JSON cuando se acceda a la home. Recordad que la parte del servidor solo va a devolver respuestas JSON que tratará el frontend.

Usaremos plugins para tratar todas las rutas que incluiremos en glue. En este ejemplo tan solo añadiremos un route al server que devuelva un mensaje:

const Config = require( '../config' );

const websiteName = Config.get( '/website/name' );

const register = function( server, serverOptions ) { // eslint-disable-line
	server.route( {
		method: 'GET',
		path: '/',
		options: {
			tags: [ 'api', 'home' ],
			description: 'Server home',
			notes: 'Server home',
			auth: false,
		},
		handler: function( request, h ) { // eslint-disable-line
			return {
				message: `Welcome to ${ websiteName }`,
			};
		},
	} );
};

module.exports = {
	name: 'api-home',
	dependencies: [],
	register,
};

Ahora solo falta añadir el plugin en el manifest.js

const manifest = {
	server: {
		port: Config.get( '/server/port' ),
	},
	register: {
		plugins: [
			{
				plugin: './api/home',
			},
		],
	},
};

Puedes bajarte el código aquí

HTML5 Web Workers

ByLuis

HTML5 a parte de añadir nuevas etiquetas, también incluye otras posibilidades javascript, como los Web Workers, los cuales permiten ejecutar scripts en paralelo (background). Por ejemplo, tenemos un proceso costoso en recursos que no es interrumpible, podemos utilizar un Worker y evitar que el navegador se nos colapse.

Su uso es bastante sencillo, se instancia un Worker que estará en un fichero javascript independiente, se indica qué hacer cuando se reciba un mensaje y ya solo queda que el javascript y el Worker se comuniquen mandándose mensajes.

El script que instancia el Worker sería así:

// Crea el Web Worker
var worker = new Worker("worker.js");

// Envía un mensaje al worker
worker.postMessage(0);

// Recibe los mensajes del Worker
worker.onmessage = function (evt) {
	// evt.data es el valor devuelto por el Worker
	alert(evt.data);
}

// Trata los errores
worker.onerror = function (evt) {
	alert(evt.data);
}

Y el worker.js sería el siguiente:

// Ejemplo de Worker
onmessage = function (evt) {
    // evt.data es el valor enviado desde el javascript
    for (var i=evt.data, il=1000001; i

Los Workers también admiten el evento onconnect, aunque tan sólo he visto que funcione en Webkit:

onconnect = function(evt) {
  postMessage('Hola, acabas de conectarte al Worker');
}

Using HTML5 Web Workers to have background computational power

Mejor técnica para herencia en Javascript

ByLuis

Muy buen artículo que nos explica paso a paso cómo conseguir implementar la herencia en Javascript. Aunque Javascript no es un lenguaje pensado en la orientación a objetos, últimamente debido al Ajax y a las librerías que van apareciendo, nos solemos encontrar con la necesidad de implementar OO en nuestras aplicaciones clientes y, en casos menos frecuentes, tratar el tema de la herencia en Javascript.
Este artículo nos explica desde el inicio de herencia entre clases, hasta los problemas con los que nos vamos encontrando. El problema más frecuente es cuando una clase llama a un método de la clase padre, si se usa this en la clase padre, usará la clase padre, y no la hija, que es lo que se supone que se espera que haga.
Otro problema que nos explica, es la necesidad de indicar cuál es la clase padre, para poder referenciarla. Si se especifica directamente, se puede solucionar el problema, pero si la estructura de clases es compleja, especificar en cada una de ellas cuál es el progenitor, nos encontramos con una estructura difícil de mantener.
A parte de resolvernos la realización de herencia entre clases en Javascript, este artículo nos enseña a resolver los problemas que nos podemos encontrar, ya que hubiera sido más sencillo darnos la solución, explicarla y listo, pero sin embargo lo que hace es ofrecer soluciones iniciales, ver que problemas representa y luego solucionarlos y pasar a otra versión mejorada.
También me gustaría destacar la explicación de los métodos call() y apply() que poseen las funciones en Javascript. Hay que tener en cuenta que en Javascript las funciones son tratadas como objetos, admiten propiedades y métodos. El método call() permite especificar el this utilizado, mientras que el método apply() el array de argumentos que se le pasa a la función.
Introducing the best Javascript Inheritance Technique

Texto explicativo en las cajas de los formularios

ByLuis

Dentro de una serie de artículos sobre Javascript he encontrado este script que permite mostrar un texto explicativo en las cajas de texto y que desaparezca cuando el usuario ha escrito algo.

Primeramente necesitamos el HTML que se mostrará, se trata de un formulario normal, pero el texto explicativo, mediante estilos, en vez de aparecer debajo como se vería sin estilos, al darle posición absoluta, se mostrará sobre la caja de texto.

<style type="text/css">
.helptext {
position: absolute;
color: #999999;
z-index: 10;
font-size: small;
overflow: hidden;
}
</style>
<form action="" method="post">
<input type="text" name="login" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
<div class="helptext" id="label_login" onclick="ChangeFocus(this);">
Enter Login Name
</div>
  
<input type="password" name="password" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
<div class="helptext" id="label_password" onclick="ChangeFocus(this);">
Enter Password
</div>
  
<input type="submit" name="submit" value="Login" onclick="return false;" />
</form>
<script type="text/javascript" language="JavaScript">
UpdateHelpText(document.getElementsByName('login')[0]);
UpdateHelpText(document.getElementsByName('password')[0]);
</script>

Acto seguido, se necesitan las funciones javascript, en este caso son dos, una de ella que pasa el foco a la caja de texto cuando se pincha en el texto explicativo (recordad que está encima de la caja de texto):

function ChangeFocus(el) {
while (el.tagName != 'INPUT')
el = el.previousSibling;
el.focus();
}

Y la otra función que oculta el texto explicativo dependiendo del contenido de la caja de texto:

function UpdateHelpText(el)
{
var label = el;
while (label.tagName != 'DIV')
label = label.nextSibling;
if (el.value == '') {  // Field is empty; show text
label.style.left = getElementAbsPosX(el) + 'px';
label.style.top = (getElementAbsPosY(el) - 7) + 'px';
label.style.visibility = 'visible';
}
else { // Field is not empty; hide text
if (label)
label.style.visibility = 'hidden';
}
}

Advanced JavaScript III

Vía / AjaxLine