DLayer: script jQuery que nos ayuda a maquetar diseños

ByLuis

Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.

La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.

Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.

Espero que os sea útil

jquery-dlayer

Similar Posts

wForms: javascript para tus formularios

ByLuis

wForms es cógido Javascript no intrusivo que te ayuda a realizar las acciones más comunes con tus formularios web. Disponible en dos versiones, comprimida y legible, ofrece tres tipos de acciones en los formularios:

  • Validación de los campos de entrada: como se define los campos obligatorios y la comprobación del formato para cada campo.
  • Sincronización entre campos: cómo controlar campos del formulario dependiendo de otros campos.
  • Secciones condicionales: si aparecen o no campos basados en respuestas anteriores.

wForms

Vía / dzone

qTip: tooltips con jQuery

ByLuis

qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:

qtip.png

  • Compatible con IE6+, Firefox 2+, Opera 9+, Safari 3+, Chrome 1+, Konqueror 3.5+
  • Esquinas redondeadas sin necesidad de imágenes
  • Posibilidad de indicar la esquina donde se quiere situar el tip (elemento del bocadillo que enlaza con el elemento)
  • Posibilidad de meterle efectos y Ajax
  • Configurable

qTip

Vía / crishnakh

Render más rápido de las tablas con CSS

ByLuis

En el caso de que tengamos que usar tablas, cuando realmente se trate de una tabla, es conveniente tener en cuenta una propiedad CSS poco utilizada que nos podrá permitir mejorar la velocidad de render de las tablas.

La propiedad es table-layout y nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:

.fixed_table {
table-layout: fixed;
}
.auto_table {
table-layout: auto;
}

El valor fixed nos permite dibujar la tabla de una forma más rápida, ya que el ancho de las celdas depende de las columnas y no del contenido de ellas. Por ello, al no tener que mirar toda la tabla para ajustar los anchos, el render se hace más rápido. Es bueno usarlo cuando se trata de tablas muy grandes y mejor si tienen un contenido muy parecido.

El valor auto es dependiente del contenido de las celdas, por lo que es necesario leer toda la tabla. Se recomienda usarlo cuando las tablas tiene contenido muy variable o cuando se trata de pocas filas.

Use the table-layout CSS property to speed up table rendering

Vía / Posh CSS

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í

|

YSlow: añadido de Firebug de Yahoo

ByLuis

YSlow es un plugin para Firefox que añade una nueva pestaña a Firebug, la cual realiza informes de las páginas que visitamos y nos indica por qué es lenta según algunas reglas de rendimiento.
yslow.png
Muestra una evaluación de cada posible regla de rendimiento, mostrando estadísticas de ellas. Además indica que componentes están instalados y hace una comparativa entre la página visitada con caché o sin caché.
Una extensión muy a tener en cuenta.
YSlow
Vía / OpenSourceCommunity.org

5 Comments

  1. Se agradece! 🙂

    Como pega le pondría que para páginas con ancho variable no iría bien, pero vamos, según cuentas es algo chapucero así que está más que de sobra jeje!

    Gracias!

    PAZ!!

  2. Existe una extension para firefox y firebug que se llama pixelperfect que hace esto mismo de manera más simple…
    ¡Viva firebug!

  3. fmvilas, sí, incluso me han dicho que le añadiera un grid 🙂

    Jaime, no la conocía y si hice esto es porque busqué y no encontré 🙁 Muchas gracias, instalo ya mismo… ¡viva firebug! 🙂

  4. Pingback: DLayer: script jQuery que nos ayuda a maquetar diseños
  5. Pingback: kndesign.com.ar » Blog Archive » links utiles diseño & web 01

Comments are closed.