Artículos relacionados

• Descubrimientos del 21 marzo 2011
• Descubrimientos del 18 marzo 2011
• Descubrimientos del 16 marzo 2011

Si incluyes muchos posts o bien estos son largos, la tarea para el usuario para desplazarse de abajo a arriba en un momento determinado puede resultar tediosa. Añade otra pequeña ayuda a la navegabilidad de tu blog con una sencila línea de código.

En primer lugar ve a tu editor de temas, opción editor bajo el menú apariencia y selecciona el archivo index.php (es la plantilla de página principal)

Seguidamente inserta la siguiente línea de código antes (importante) de cerrar el primer DIV:

# código anterior
<a style="position: fixed; bottom: 5px; right: 5px;" title="Ir arrriba" href="#"><img src="LINK A TU IMAGEN" alt="" /></a>

Y nada más, puedes ver el ejemplo de la implementación en este mismo blog.

Artículos relacionados

• Opciones para crear calendarios de eventos
• Crear un espectacular ‘login’ de estilo mac
• Traducción al castellano del plugin WPTouch para versiones móviles de wordpress

Todo ello realizado con jQuery, puedes ver una Demo o Descargar los archivos fuente.

Artículos relacionados

• Opciones para crear calendarios de eventos
• Como añadir un botón de ‘Ir arriba’ en tu wordpress
• Traducción al castellano del plugin WPTouch para versiones móviles de wordpress

Artículos relacionados

• Traducción al castellano del plugin WPTouch para versiones móviles de wordpress
• Jugando con @font-face (HTML5)
• Uso del color en las primeras fases de un diseño web

Vamos a ver como poder trabajar con la información de una base de datos MySQL mediante el componente DHX quick tables. Esta extensión está especialmente indicada para todos aquellos que desconocen como escribir código para realizar las funciones de editar o actualizar en bases de datos pero necesitan alguna forma sencilla de hacerlo.

Lo primero (y único) que necesitas es descargar el archivo de instalación y subirlo a una carpeta de tu servidor (se requiere soporte PHP por supuesto).

En nuestro caso vamos a hacer las pruebas en un servidor local bajo la carpeta ‘tablas’, ahora simplemente necesitas ejecutar el script via browser; http://localhost/tablas/install.php.

Se instalará la herramienta y se lanzará el asistente, en unos sencillos pasos tendremos nuestra aplicación lista para trabajar.

Para el ejemplo he creado una simple base de datos llamada pruebaDB con una tabla nombrada como usuarios, ella está compuesta de tres campos; ‘id’, ‘nombre’ y ‘apellido’. Puedes crear esta tabla desde phpMyAdmin siguiendo estos sencillos pasos:

1. Creación de la base de datos ‘pruebadb’.

2. Creación de la tabla ‘usuarios’.

3. Crear campos ‘id’, ‘nombre’ y ‘apellidos’.

Ver imagen

Bién, trás este pequeño inciso sigamos con la instalación del componente. Si la conexión a la base de datos ha sido correcta obtendremos algo parecido a esto:

Vemos que podremos acceder a la base de datos en modo invitado (guest) o como administrador mediante una llave de autorización. Puedes cambiar ese key editando el archivo conf/db_config.ini.

Si damos a continuar procederemos a escojer el nombre de la tabla de la base de datos y a configurar diversas opciones como el nombre de la página. Dejaremos deseleccionado el checkbox de use all fields para seleccionarlos más adelante.

Seguidamente escojeremos los campos de la tabla con los que se podrá trabajar.

Ahora podremos definir el nombre para cada campo, su posición, si se puede filtrar y el tipo (editable, solo lectura, checkbox, etc).

Esto es todo lo que necesitas para crear la página si ‘guardas y finalizas’ obtendrás algo parecido a esto:

Como dijimos antes, el primer link es para la vista pública y puedes utilizarlo para el front-end de tu diseño. El segundo es para la parte administrativa o de edición de los campos de la base de datos.

Espero haber sido de ayuda y lo suficientemente conciso con el tutorial.

Artículos relacionados

• Tres tutoriales para diseñar layouts con Photoshop qué hacen un uso intensivo del color azul
• Traducción al castellano del plugin WPTouch para versiones móviles de wordpress
• Jugando con @font-face (HTML5)

Recientemente he instalado el plugin WPTouch para optimizar la navegación desde dispositivos móviles y trás unos ligeros retoques de personalización he decidido traducirlo al castellano para completar la instalación.

El plugin no dispone de un sistema de traducciones, tal vez en sucesivas versiones lo implementen pero en tanto la única manera es editar los archivos de los temas ‘a la brava’.

En la descarga encontrarás la carpeta wptouch/themes/default con los archivos traducidos, tan solo tienes que sobreescribir los que tienes en tu servidor. Con esto tendrás todo el sistema traducido a excepción del texto del interruptor de tema móvil / tema normal que viene en el footer.

Para traducir este último punto necesitarás sobreescribir el archivo core-functions.php que también adjunto en la descarga situado en wptouch/themes/core.

En una sucesiva revisión terminaré de traducir los textos del core, por el momento esto deja el interface de navegación completamente funcional. Aquí puedes ver unas muestras tomadas desde mi HTC Magic con Android:

Traducción al castellano del plugin WPTouch (184)

Artículos relacionados

• Permisos de directorio y archivos para wordpress
• Opciones para crear calendarios de eventos
• Importar páginas estáticas HTML a wordpress

Estos días atrás estuve jugando un poco con @font-face, ello permite cargar cualquier tipo de fuente para ser utilizada en tu web. En concreto he cambiado la fuente de los títulos de los posts de este blog que utiliza un atributo ‘h2′ quedando de la siguiente manera:

Su utilización es muy sencilla:

@font-face {
font-family: breipfont;
src: url(images/breipfont.otf) format("opentype");
}

Con esto cargamos la fuente (en mi caso breipfont) haciendo la declaración con la regla ‘font-face‘ y le asignamos un nombre.

.post-content h2 {
font-family: 'breipfont', 'Georgia';
font-size: 26px;
line-height: 30px;
padding-left: 18px;
}

Se la aplicamos a ‘h2‘ haciendo la llamada con ‘font-family‘. Si el navegador es compatible aplicará la fuente ‘briepfont‘ y en caso contrario utilizará ‘georgia‘. Sencillo verdad?

Aquí tienes un listado de fuentes disponibles para descarga.

Notas: Observo que Chrome y Opera no renderizan aún las fuentes, es extraño ya que anuncian su compatibilidad en sus últimas versiones. No he investigado demasiado el tema pero parece que en el caso de Chrome es debido a algún bug. Firefox 3.5 y Safari desde su versión 3.1 lo hacen a la perfección.

Artículos relacionados

• Construir un menú de navegación con sprites
• 25 Técnicas avanzadas para CSS
• 19 combinaciones de fuentes qué crean un alto nivel estético

Cada maestrillo tiene su librillo y en este artículo quiero compartir mi técnica para la elección de colores en esas primeras fases en el desarrollo del layout de un diseño.

Para mi estos estadios iniciales son esenciales, los mas complicados y hasta críticos ya que de ello dependera el progreso del aspecto visual del proyecto. No acertar adecuadamente a la hora de elegir colores y como utilizarlos puede resultar en una perdida de tiempo considerable una vez ya el diseño este avanzado.

Crear una paleta de colores.

Vamos primero a pensar en el contexto del contenido de la web que estamos realizando. Supongamos por ejemplo que nuestro diseño está relacionado con el mundo de la construcción, en primer lugar escogeria una fotografía en la que se vean diferentes elementos relacionados con el contexto del contenido, por ejemplo esta:

El siguiente paso sería abrirla en photoshop (o tu programa de edición fotográfica preferido) y aplicarle una pixelación considerable. En photoshop lo haríamos aplicando el Filtro Pixelizar, escogiendo la opción Cristalizar.

Alternativamente tenemos también el Filtro Textura en su opción Vidriera:

ver imagen

Quedandonos con la primera opción obtenemos el siguiente resultado:

Hecho esto ya disponemos de multitud de pixeles que mediante la herramienta cuentagotas podremos ir seleccionando y anotando su código de color.

ver imagen

ver imagen

Con esto podremos obtener una paleta de colores, a elección de cada cual el número de muestras a seleccionar.  Aconsejo tomar un bueno número de ellos y procurando elegir colores que contrasten entre ellos.

El siguiente paso es estudiar como esos colores pueden influir en el contraste, brillo y consistencia del diseño. Para ello tenemos una estupenda herramienta que se basa en los estandares de accesibilidad definidos por la WCAG.

WCAG 2.0 nos define el ratio de luminancia y WCAG 1.0 la diferencia entre brillo y control. Si seguimos estas lineas definidas por la W3.org obtendremos combinaciones con el suficiente contraste de luminancia entre texto y color.

El punto 1.4.3 nos habla del contraste mínimo: La presentación visual de texto e imágenes de texto tiene que tener un ratio de contraste de al menos 4.5:1, excepto para el ‘nivel AA’, Texto de gran tamaño, en este caso el contraste debe ser de al menos 3:1.

El punto 1.4.6 nos habla del contraste sugerido: En este caso la presentación debe tener un ratio de al menos 7:1 exceptuando el caso del ‘nivel AAA’, Texto de gran tamaño con el cual el ratio debe ser de al menos 4.5:1.

Nuestra herramienta es una aplicación air llamada Contrast-A y nos ayuda a buscar combinaciones de colores accesibles, puedes descargarla y probarla.

ver imagen

ver imagen

Artículos relacionados

• Cajas de precios en formato PSD
• Página de error en formato PSD
• Interfaz de usuario del iPAD en vectores

Artículos relacionados

• jCryption, encripta los datos enviados por formulario
• Opciones para crear calendarios de eventos
• Glimmer genera efectos jQuery sin tener conocimientos de código

Puedes ver una demo del efecto AQUÍ.
Leer el artículo Fancy Thumbnail Hover Effect w/ jQuery.

Artículos relacionados

• Crear un espectacular ‘login’ de estilo mac
• 19 combinaciones de fuentes qué crean un alto nivel estético
• jCryption, encripta los datos enviados por formulario