‘Bocadillos’ en tu web

ByLuis October 18, 2006

Albert Lanchas nos ofrece un script que me ha gustado bastante en el que se muestran ‘bocadillos’ con imÃ¡genes dentro. El bocadillo se adapta al tamaÃ±o de la imagen y su aspecto se puede cambiar mediante CSS.

Es necesario tener instalado prototype para su funcionamiento, y su uso es bastante sencillo, incluir el script, la librerÃa prototype, la css e incluir la siguiente lÃnea para que funcione:

<a href="imagen.jpg" rel="bubble"><img src="images/bubble.png"/></a>

Yo como unica pega, intentarÃa hacer la sombra con una imagen png, para poder usar la transparencia que nos ofrece, aunque en IE6 no funcione.

Bubble

VÃa / Fresqui

Javascript

Tutoriales de Javascript

ByLuis November 30, 2006

EstÃ¡ claro que tutoriales hay muchos, pero no todos son iguales, ni estÃ¡n enfocados para un mismo pÃºblico. En este caso, yo creo que se trata de tutoriales sencillos pensados para empezar de cero, para quien no tenga ningÃºn conocimiento de Javascript, incluso dirÃa que para quienes el HTML es solo una forma de mostrar texto.
Empieza por lo mÃ¡s bÃ¡sico, luego nos introduce los objetos, funciones, tipos bÃ¡sicos, arrays, formularios y validaciones, trabajar con frames. Lo dicho, para empezar creo que es muy adecuado.
JavaScript Cake: Tutorials and Scripts
VÃa / dzone

css | Javascript

iUI: librería Javascript/CSS para emular iPhone

ByLuis July 31, 2007

iUI es una librerÃa Javascript/CSS creada por Joe Hewitt, co-fundador de Firefox y creador de Firebug, que permite emular el lenguaje nativo visual del iPhone.

Entre las caracterÃsticas que nos ofrece encontramos:

Controles UI
Enlaces a pÃ¡ginas externas vÃa Ajax
EnvÃo de formularios vÃa Ajax
Soporte para historial del navegador

iUI

VÃa / Ajaxline

Javascript

Nitobi UI: elementos UI para javascript

ByLuis February 25, 2009

Impresionante librería para incluir elementos UI en nuestras aplicaciones javascript. Contiene los siguientes elementos:

Grid: tabla con celdas estilo hoja de cálculo
TreeGrid: igual que el anterior pero permite desplegar filas
ComboBox: un combo mas interactivo, como los de auto-sugerencias
TabStrip: gestión de pestañas
Tree: árbol de datos, tipo directorios/ficheros
FishEye: aumentar elementos con efecto “ojo de pez”
Callout: mensajes popup en plan bocadillo
Spotlight: resaltar elementos DOM, muy útil para realizar guías interactivas
Calendar: calendarios
Toolkit: herramientas varias para Ajax

Nitobi UI

Desarrollo web

Diferencias entre un buen diseñador y un gran diseñador

ByLuis November 7, 2006

Estando a la espera de que nos cuenten las diferencias entre un mal diseÃ±ador y un buen diseÃ±ador, que serÃa algo que necesitamos algunos, nos quedamos con un buen artÃculo que nos explica las diferencias entre un buen diseÃ±ador y un gran diseÃ±ador.

Se trata del tÃpico post que todo el mundo referencia y que uno se da cuenta que se entera de las cosas el Ãºltimo, por eso voy a referenciar donde lo he visto originalmente, donde lo he leido en espaÃ±ol y por su puesto el original.

Entre las cosas que mÃ¡s me han gustado destaco lo siguiente:

Mientras un buen diseÃ±ador dispone de ciertos elementos y los organiza de manera estÃ©tica, un gran diseÃ±ador se preocupa ademÃ¡s porque el mensaje que expresa su diseÃ±o llegue a destino.

…los artistas crean problemas, los diseÃ±adores los solucionan. Pero un gran diseÃ±ador se adelanta a un problema potencial, tiene visiÃ³n.

La conclusiÃ³n a estas ideas nos lleva nuevamente a la razÃ³n de ser del trabajo de diseÃ±o, que es justamnente lo que diferencia ademÃ¡s a un diseÃ±ador de un artista: las necesidades y problemas que atiende el diseÃ±o suelen ser -por lo general- ajenas al diseÃ±ador. El diseÃ±ador no es mÃ¡s que un instrumento comunicativo en esencia.

Nine skills that separate good and great designers

9 habilidades que separan buenos y grandes diseÃ±adores

VÃa / Criterion

Javascript

Hapi.js+Vue.js Crear servidor backend

ByLuis April 27, 2019June 9, 2019

El primer paso va a ser crear el entorno del servidor, para ello creamos un directorio e inicializamos el proyecto ejecutando:

npm init

Rellenamos todos los datos que nos van pidiendo para configurar el proyecto.

Ya tenemos el proyecto creado, ahora iremos instalando las librerías que necesitamos, en este caso hapi y glue.

npm i @hapi/hapi

npm i @hapi/glue

¿Qué es glue? Glue es un plugin que permite configurar el servidor de forma fácil.

Ahora creamos el fichero index.js e insertamos el siguiente código:

const Glue = require( '@hapi/glue' );

const manifest = {
	server: {
		port: 3001,
	},
};

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Fácil de entender, ¿no? Creamos el servidor usando Glue con el manifest y las opciones, y arrancamos el servidor.

Listo, accedemos a http://localhost:3001 para comprobar que funciona. Nos devolverá error 404 porque por ahora no hay definidas routes.

¿Cómo se arranca el servidor? podríamos usar directamente node, pero mejor usaremos nodemon. Primero lo instalamos:

npm i --save-dev nodemon

Y ejecutaremos lo siguiente para arrancar el servidor:

npm run start

Puedes obtener el código en GitHub hapi-vue-demo 0.1.0

Similar Posts