Skip to Content »

Integrando WordPress y iPhone

  • 27/08/2008
  • 10:58 pm
  • Jim

Hoy en día iPhone es uno de los dispositivos que se ha masificado de manera veloz por sus características de interactividad y tecnología, en esta ocasión veremos que formas tenemos de optimizar nuestro blog hecho con WordPress para visualizarlo y administrarlo con iPhone.

iWPhone
Este es un theme que mostrará el contenido de tu blog formateado para las dimensiones de la pantalla de un iPhone, es muy fácil de instalar y poner en funcionamiento. Para instalarlo, descargas los archivos fuente en iWPhone WordPress Plugin and Theme en donde encontrarás el archivo iwphone.php el cual debes colocar en el directorio de plugins, además una carpeta llamada iwphone-by-contentrobot el cual debes colocar en la carpeta de themes. Luego de ello activas el plugin iWPhone y listo ya tienes optimizado tu blog para iPhone.

Si prefieres le puedes hacer algunas modificaciones al template, como en nuestro caso en el cual hemos modificado los colores de los textos y del header para personalizarlo de acuerdo al estilo de tu diseño.

WPtouch
Se trata de un plugin para adaptar el contenido de tu blog para ser compatible con iPhone, este tema a diferencia del anterior viene con un panel de administración muy completo en el cual puedes configurar una gran variedad de parámetros del diseño de tu blog, es muy fácil de administrar y configurar. Puedes descargar este theme en WPtouch: WordPress On iPhone.

WordPress for iPhone
WordPress for iPhone es el app oficial para iPhone y iPod Touch que te permitirá administrar tu blog de manera sencilla, rápido y desde una interfaz muy cómoda. Puedes administrar blogs alojados en Wordpress.com o instalaciones propias para versiones superiores a 2.5.1. Para utilizarlo puedes descargar el app en AppStore, luego de instalado puedes configurar tu cuenta de Wordpress con la dirección de tu blog, el usuario y clave de acceso y podrás administrar tu blog. El único inconveniente a mi parecer es que no se puede moderar los comentarios, con este añadido este app sería mucho mas productivo.

Después de ver estas aplicaciones podemos concluir que es muy fácil adaptar nuestro blog para que sea visualizado y administrado de un iPhone. Este blog ya se ha optimizado para nuestros visitantes desde iPhone y iPod Touch así que bienvenidos a nuevamente.

Posts Relacionados

AutoClear en Formularios HTML

  • 19/08/2008
  • 12:44 am
  • Jim

Uno de los métodos mas prácticos para indicar a los usuarios que tipo de información debe ingresar en los formularios es incluir un valor inicial. El siguiente ejemplo ayudará a mostrar valores por defecto los cuales se limpiarán al acceder al campo y volverán a mostrar el valor iniciar si no se ha ingresado información.

Preparando el Formulario
Lo primero es crear nuestro formulario, lo hacemos de la manera normal donde incluimos los valores iniciales que utilizaremos para indicar al usuario que valores ingresar.

HTML:
  1. <strong>Registro de Usuarios:</strong><br />
  2. Nombre: <input type="text" id="name" value="Nombre" /><br />
  3. Email: <input type="text" id="name" value="Email" /><br />
  4. Web: <input type="text" id="web" value="Direccion Web" /><br />
  5. <input name="btsend" type="button" value="Enviar" />

AutoClear Utilizando Javascript
La primero forma es utilizar solamente Javascript, para ello nos hemos basado en el script propuesto en Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus, este script se ejecuta al cargarse la página y recorre todos los elementos input text y guarda el valor inicial del formulario en la propiedad rel, luego agrega los eventos a ejecutarse en onfocus, onblur y ondblclick, en donde se verifica si se ha ingresado algún valor para mostrar la ayuda.

JavaScript:
  1. function init(){
  2.     var inp = document.getElementsByTagName('input');
  3.     for(var i = 0; i <inp.length; i++) {
  4.         if(inp[i].type == 'text') {
  5.             inp[i].setAttribute('rel', inp[i].defaultValue);
  6.             inp[i].onfocus = function() {
  7.                 if(this.value == this.getAttribute('rel')) {
  8.                     this.value = '';
  9.                 } else {
  10.                     return false;
  11.                 }
  12.             }
  13.             inp[i].onblur = function() {
  14.                 if(this.value == '') {
  15.                     this.value = this.getAttribute('rel');
  16.                 } else {
  17.                     return false;
  18.                 }
  19.             }
  20.             inp[i].ondblclick = function() {
  21.                 this.value = this.getAttribute('rel')
  22.             }
  23.         }
  24.     }
  25. }
  26. if(document.childNodes) {
  27.     window.onload = init
  28. }

Este script los colocamos en el header de nuestro HTML y ya tenemos el efecto AutoClear en nuestro formulario, podemos ver el resultado de este ejemplo en autoclear-javascript.html y si desean pueden ver el código fuente para ver como si incluyo el script.

AutoClear Utilizando Mootools
Si estamos utilizando Mootools, podemos reescribir esta función, utilizando los selectores de elementos y llamando a la función en el evento domready el cual es llamado cuando se ha cargado la página.

JavaScript:
  1. window.addEvent('domready', function() {
  2.     inp = $$('input[type=text]');
  3.     inp.each(function(inp) {
  4.         inp.setProperty('rel', inp.value);
  5.         inp.addEvent('focus', function(){
  6.             if (this.value == this.getProperty('rel')){
  7.                 this.value = '';
  8.             }
  9.         });
  10.         inp.addEvent('blur', function(){
  11.             if (this.value == ''){
  12.                 this.value = this.getProperty('rel');
  13.             }
  14.         });
  15.         inp.addEvent('dblclick', function(){
  16.             this.value = this.getAttribute('rel');
  17.         });
  18.     });
  19. });

Nótese que hemos utilizado la función each de Mootools que nos permite recorrer todos los elemento del array que contienen los campos de texto, lo siguiente es agregar los eventos para detectar el focuso blur. Pueden ver el resultado de esta versión en autoclear-mootools.html

Posts Relacionados

CSS Reset

  • 17/08/2008
  • 5:21 pm
  • Jim

CSS Reset es una técnica para inicializar todos los estilos que vienen por defecto con los navegadores (margenes, alineaciones, alto de las lineas, tamaños de letra, etc.). La técnica consiste en eliminar completamente los estilos predefinidos por el navegador para luego empezar a trabajar con una hoja de estilos en blanco.

Una vez inicializados o reseteados los estilos, podemos empezar a construir los estilos con la garantía que serán mucho mas consistentes. Hay muchas técnicas para realizar esta eliminación de estilos, desde los muy sencillos hasta los muy completos.

Reset Básico
Consiste en utilizar el selector universal para el padding y margin de todos los elementos html. Es la técnica mas usada por la mayoría de los desarrolladores.

CSS:
  1. * {
  2.    padding: 0;
  3.    margin: 0;
  4. }

Reset Universal Básico
Esta técnica consiste ademas de eliminar el padding y el margin, eliminar los estilos de las fuentes, los bordes y las alineaciones.

CSS:
  1. * {
  2.     vertical-align: baseline;
  3.     font-weight: inherit;
  4.     font-family: inherit;
  5.     font-style: inherit;
  6.     font-size: 100%;
  7.     border: 0 none;
  8.     outline: 0;
  9.     padding: 0;
  10.     margin: 0;
  11. }

Eric Meyer’s CSS Reset
Esa un tecnica desarrollada por Eric Meyer en Reset Reloaded y basado en YUI Reset CSS con algunas modificaciones. Esta técnicas es una de las mejor logradas y que resuelven la mayoría de problemas de estilos.

CSS:
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. dl, dt, dd, ol, ul, li,
  7. fieldset, form, label, legend,
  8. table, caption, tbody, tfoot, thead, tr, th, td {
  9.     margin: 0;
  10.     padding: 0;
  11.     border: 0;
  12.     outline: 0;
  13.     font-weight: inherit;
  14.     font-style: inherit;
  15.     font-size: 100%;
  16.     font-family: inherit;
  17.     vertical-align: baseline;
  18. }
  19. /* remember to define focus styles! */
  20. :focus {
  21.     outline: 0;
  22. }
  23. body {
  24.     line-height: 1;
  25.     color: black;
  26.     background: white;
  27. }
  28. ol, ul {
  29.     list-style: none;
  30. }
  31. /* tables still need 'cellspacing="0"' in the markup */
  32. table {
  33.     border-collapse: separate;
  34.     border-spacing: 0;
  35. }
  36. caption, th, td {
  37.     text-align: left;
  38.     font-weight: normal;
  39. }
  40. blockquote:before, blockquote:after,
  41. q:before, q:after {
  42.     content: "";
  43. }
  44. blockquote, q {
  45.     quotes: "" "";
  46. }

Hay que notar que no se utiliza el selector universal y el su lugar se listan todos los elementos a los que deseamos se aplique el reset, además de ello se eliminan los estilos de las listas, entre otros. Lo recomendable es guardar estas reglas en una hoja de estilos llamada reset.css e incluirlos en nuestro web antes de incluir los estilos propios del web.

Mas Información

Posts Relacionados

  •