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

Explicación de los comandos:

755 – Permiso de lectura y acceso de ejecución para cualquiera y también acceso de escritura para el propietario del archivo.
644 – Permiso de escritura para ti pero solo de lectura para el resto.

Bien, vayamos al grano:

• Directorio raiz (root), este es el directorio donde está instalado wordpress. Requiere un valor CHMOD 755.
• Directorio wp-includes, subdirectorio con varios archivos importantes, requiere un valor CHMOD 755.
• wp-admin/index.php, archivo que muestra la pizarra o escritorio de wordpress. Fijar un CHMOD 644.
• wp-admin, wp-admin/js, ambas carpetas utilizadas en la sección de administración, un CHMOD 755.
• wp-content, wp-content/themes/, wp-content/plugins/, carpetas donde se almacenan tus temas y plugins utilizados. CHMOD 755.

La mayoría sabréis como cambiar los valores CHMOD, para quien no puede utilizar su programa favorito de FTP, en mi caso Filezilla. Una vez conectado al servidor, escoger la carpeta o archivo en la ventana del servidor, click derecho y del menú desplegable elegir ‘atributos de archivo…’

Fuente: Security Check – File directory permissions for your blog

Artículos relacionados

• Traducción al castellano del plugin WPTouch para versiones móviles de wordpress
• Utilizar All in one SEO pack con Windows Live Writer
• Actualización WPTouch 1.9.3.3 y su traducción al castellano

Hasta ahora solamente lo había utilizado para redactar posts offline, guardar los borradores en local y luego pasarlos al editor de wordpress para desde allí finalmente publicar. También me era de ayuda poder utilizar el corrector ortográfico para las redacciones aunque me molestaba bastante ese paso intermedio, un gasto de tiempo.

Recientemente apareció un plugin para hacer uso del All in One SEO pack desde el mismo writer y ya poder publicar directamente desde él, ahorrándote el trabajo de pasar el post a wordpress.

La instalación es muy sencilla.

Sube a tu servidor el plugin all-in-one-seo-wlw-bridge y actívalo. Este hace de ‘puente’ entre wordpress y live writer permitiéndole a este actualizar los campos de la base de datos.

Coloca el archivo SeoWLWbridge.dll en tu carpeta Plugins de la instalación de live writer. Aún no existe un instalador para hacer esto.

Y voilá ya tienes todo, la utilización es muy sencilla.

1. Cuando termines de redactar tu artículo pasa al modo de vista ‘origen’ (lo que sería la pestaña HTML en el editor de wordpress) y coloca allí el cursor.

2. En el menú insertar de writer ahora tienes una opción llamada Add SEO Information.

3. Añade la información como lo harías en wordpress rellenando los campos.

Fíjate que ha añadido una serie de datos al final de tu post que serviran al ‘puente’ para actualizar la base de datos al publicar.

Es importante para el funcionamiento del plugin que estos datos esten insertados al final del artículo. En el link de descarga te dejo todos los archivos necesarios.

Artículos relacionados

• Traducción al castellano del plugin WPTouch para versiones móviles de wordpress
• Permisos de directorio y archivos para wordpress
• Actualización WPTouch 1.9.3.3 y su traducción al castellano

El js muestra el fondo con una capa transparente pero previene su acceso, la idea es forzar al usuario a actualizar su navegador. He hecho pequeñas modificaciones a la traducción española oficial y actualizado los links de los navegadores para que apunten a las páginas de descarga de estos en castellano.

Simplemente inserta la siguiente linea justo despues de la etiqueta <body>

<!--[if lte IE 6]>
<mce:script mce_src="js/ie6/warning.js"></mce:script>
<mce:script type="text/javascript"><!  window.onload=function(){e("js/ie6/")} // -->
<!--[endif]-->

y modifica la ruta (“js/ie6/”) para que apunte a la carpeta donde instales las imágenes en tu servidor.

Artículos relacionados

• Ventanas modales al estilo facebook con MooTools
• 15 Técnicas en MooTools que deberias conocer
• 20 Tutoriales para aprender Ajax

Alberto Navarro lleva un tiempo publicando en su blog Como Hacer posts en serie con recopilaciones de cursos y tutoriales. Entre otras cosas también interesantes reúne tutos sobre diseño gráfico, web, programación, audio, video, etc.

A la fecha de publicación de este post lleva ya 16 artículos de la serie, gracias Alberto por la aportación.

Síguelo en Recopilación de cursos y tutoriales interesantes.

Artículos relacionados

• Traducción al castellano del plugin WPTouch para versiones móviles de wordpress
• Jugando con @font-face (HTML5)
• Permisos de directorio y archivos para wordpress

Porque es importante utilizar los sprites? Considera el menú de esta web, como puedes ver consiste de cinco ítems y cada uno de ellos tiene cuatro estados. La imagen de reposo, la que aparece al pasar el cursor por encima, la que aparece al hacer click sobre ella y finalmente la activa.

Podríamos generar el menú creando cuatro imágenes para cada ítem e irlas intercambiando en función del estado lo que resultaría en un total de cinco ítems x cuatro estados = 20 imágenes, esto afecta claramente a los tiempos de carga de la página. Posiblemente el tamaño en kb de la imagen total con todo sea aproximadamente igual al de la suma de las 20 imágenes por separado por lo que no afectaría al tiempo de carga pero en lo que si se ve afectado este último es en el número de peticiones efectuadas por el navegador. Cada petición de imagen implica un retardo entre que se realiza y se obtiene esta finalmente, por lo que como puedes ver, hay una diferencia sustancial entre solicitar veinte o solamente una.

Bien, el menú consta de cinco elementos, con un ancho de 100px cada uno de ellos y la altura de este es de 60px. Por lo tanto generaremos una imagen de 500px x 240px para contener todos los elementos de nuestro menú.

Las cuatro hileras corresponden una, a cada estado del menú. Los primeros 60px verticales son el estado de reposo. Del 60px al 120px muestran el ítem al pasar el ratón por encima, de los 120px a 180px el estado al hacer click y los últimos 60px corresponden al estado actual o activo del menú (en la página donde nos encontramos). La técnica como comentaba antes consiste en crear una lista desordenada de 5 elementos (ul) en nuestro html de 100px x 60px cada uno y utilizar la imagen como fondo (background) e irla desplazando mediante CSS para que solo aparezca visible la parte en cuestión.

El html:

<div id="menu">
<ul id="Navegacion">
	<li id="navQue"><a href="index.html">que hacemos</a></li>
	<li id="navTe"><a href="te.html">te ofrecemos</a></li>
	<li id="navComo"><a href="como.html">como trabajamos</a></li>
	<li id="navVen"><a href="ven.html">ven contacta</a></li>
	<li id="navAqui"><a href="aqui.html">aquí blogueamos</a></li>
</ul>
</div>

EL CSS para el contenedor:

#menu { width:500px; height:60px; }
#menu #Navegacion { width:500px; height:60px; margin:0; padding:0;background:url('menu-sprite-cast.jpg') 0 0 no-repeat; }
#menu #Navegacion li { display:inline; }
#menu #Navegacion li a { background-image:url('images/menu-sprite-cast.jpg') no-repeat; float:left; outline:none; width:100px; height:0; padding-top:60px; overflow:hidden; }

Creamos un contenedor en un div llamado menu con el ancho y altura de nuestro menú (puedes evitarte este paso dependiendo de la estructura de tu layout) e identificamos nuestra lista desordenada como Navegacion aplicandole las mismas dimensiones. En este punto definimos como imagen de fondo nuestro sprite.

Es en el momento de definir las propiedades del link de cada ítem del menú (li a) donde acotamos que dimensiones tiene cada elemento de nuestro menú (100px x 60px)

EL CSS para generar el sprite:

/* Nav a */
#menu #Navegacion li#navQue a { background-position: 0 0; }
#menu #Navegacion li#navTe a { background-position: -100px 0; }
#menu #Navegacion li#navComo a { background-position: -200px 0; }
#menu #Navegacion li#navVen a { background-position: -300px 0; }
#menu #Navegacion li#navAqui a { background-position: -400px 0; }

Definimos la posición de la imagen completa para cada elemento del menú, fíjate que el ancho de cada uno de ellos es de 100px, por lo tanto vamos desplazando 100px negativos a cada elemento. Con ello vamos colocando cinco veces la imagen completa dejando solo visible la porción que nos interesa.

/* Nav a:encima */
#menu #Navegacion li#navQue a:hover { background-position: 0 -60px; }
#menu #Navegacion li#navTe a:hover { background-position: -100px -60px; }
#menu #Navegacion li#navComo a:hover { background-position: -200px -60px; }
#menu #Navegacion li#navVen a:hover { background-position: -300px -60px; }
#menu #Navegacion li#navAqui a:hover { background-position: -400px -60px; }

En este paso aplicamos los desplazamiento para el estado hover (al pasar el puntero del ratón por encima). En esta ocasión, además de desplazar 100px horizontales a cada elemento necesitamos desplazar -60px verticales también a cada uno de ellos, recuerda, la segunda hilera de elementos.

Creo que a estas alturas y aun sin estar familiarizado con CSS ya has comprendido la técnica utilizada. Sin más el resto del CSS:

/* Nav a:activo */
#menu #Navegacion li#navQue a:active { background-position: 0 -120px; }
#menu #Navegacion li#navTe a:active { background-position: -100px -120px; }
#menu #Navegacion li#navComo a:active { background-position: -200px -120px; }
#menu #Navegacion li#navVen a:active { background-position: -300px -120px; }
#menu #Navegacion li#navAqui a:active { background-position: -400px -120px; }
/* Nav elemento actual */
body#hacemos #Navegacion li#navQue a { background-position: 0 -180px; }
body#ofrecemos #Navegacion li#navTe a { background-position: -100px -180px; }
body#trabajamos #Navegacion li#navComo a { background-position: -200px -180px; }
body#contacta #Navegacion li#navVen a { background-position: -300px -180px; }
body#blogueamos #Navegacion li#navAqui a { background-position: -400px -180px; }

Hemos definido el sprite para los estados activo y actual. Para este último he aplicado el estilo al ‘body‘, es una buena práctica aplicar un identificador al body de cada una de nuestras páginas. Con esto aplica el efecto según en que página se encuentre. Hay otras muchas maneras de hacer esto mismo, si conoces alguna puedes comentarla a todos.

Por último, dejo unos archivos fuente para que puedas investigar el funcionamiento, en el ZIP encontraras el HTML el CSS y la imagen con el sprite.

Artículos relacionados

• Jugando con @font-face (HTML5)
• 25 Técnicas avanzadas para CSS
• 19 combinaciones de fuentes qué crean un alto nivel estético

Enlace a 100+ Massive CSS Toolbox.

Artículos relacionados

• Jugando con @font-face (HTML5)
• Construir un menú de navegación con sprites
• 25 Técnicas avanzadas para CSS