Proceso de creación

POM: Programación Orientada a Maquetadores

Atributos data-*

<input type="text" class="autocomplete estilobonito" data-max-items="15" data-type="clientes" data-min-length="3" />

// jQuery
$("input.autocomplete").bind(function(){

	// Recogemos valores
	var $this = $(this),
	 	$value = $this.val(),
		$maxitems = $this.data("max-items") || 5,
		$type = $this.data("type") || "compras", 
		$minlength = $this.data("min-length") || 5;
	
	
	/* Funcionalidad */
	
	// Salimos si ha pulsado menos de $minlength carácteres
	if ($value.length < $minlength) return;
	
	jQuery.getJSON("http://miservicio.com/", {
		type: $type,
		items: $maxitems,
		value: $value
	},function(){
		/* LO QUE QUIERAS HACER*/
	});
});

¿Donde está la gracia?

Artículos relacionados

• Programación Orientada a Objetos (POO) en Javascript
• Browser Book, Libro para maquetadores
• Joose-js, mejorando la programación orientada a objetos
• Top 20 lenguajes de programacion
• De Photoshop a XHTML/CSS paso a paso

Descripción

Preparación

1. Inbox de tareas en Remember de Milk
2. Inbox del Lotus Notes del trabajo.

• Viaje a Japón
• Comprar agua
• Llamar a Pepe
• Tirar la basura
• …

Algún día

• Viaje a Japón
• Comprar mampara del baño
• Cambiar la persiana del comedor
• ….

Contextos

• Comprar agua à compras
• Llamar a Pepe à llamadas
• Tirar la basura à casa
• Proyectos

• Viaje a Japón
  • Buscar billetes de avión
  • Buscar hotel
  • Aprender frases compuestas en Japonés
  • …

Agendas

• Pepe López
  • Llamar a María
  • Organizar cena antiguos alumnos
  • …

Cheklist

• Viaje a Japón
  • Buscar billetes de avión
  • Buscar hotel
• Viaje a Islandia
  • Buscar billetes de avión
  • Buscar hotel

En espera

• En espera
  • Organizar cena antiguos alumnos (Pepe López)
  • …

Prioridades

• Casa
  • Sacar la basura
  • Llamar a mis padres
  • Sacar ropa de la lavadora
  • ….

Reglas básicas

Diagrama

(Ver Imagen)

Más información

• Aplicaciones GTD
• Cualquier artículo de Berto Pena en ThinkWasabi

Artículos relacionados

• Especificidad CSS, algo que deberías conocer
• jQuery 1.0 ha salido para mostrarnos la luz
• 3 maravillas para los desarrolladores en WordPress 2.2
• Introducción al hCard, preséntate semánticamente en la web
• Creando notas al pie con jQuery

Poniendonos en situación

(Ver Imagen)

• Velocidad: 1/20 seg
• Apertura: f/4.0
• ISO: 1600
• Focal: 10mm

(Ver Imagen)

4-5 mejor que 1

Photoshop

(Ver Imagen)

(Ver Imagen)

Modo de apilamiento

(Ver Imagen)

(Ver Imagen)

(Ver Imagen)

(Ver Imagen)

Artículos relacionados

• 12 galerías de Imagenes en Javascript
• 101 galerías de imagenes en javascript/flash/css
• Precarga de Imagenes con CSS
• Redimensiona las imagenes de tus posts
• Transparencias en tus imagenes con CSS

Wp-Answers

(Ver Imagen)

Nuestro theme

Dándole estilos

.wp_answers_votes {
 float:right;
 background-color:#F1F1F1;
 margin-bottom:10px;
 padding:10px
 text-align:center;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
}
.wp_answers_total_votes{
 font-size:2em;
}

Opciones

(Ver Imagen)

Widget

(Ver Imagen)

Descargar

Artículos relacionados

• ¿Tiene sentido usar wp-answers en aNieto2k?
• Respuestas de programador
• Plugins & Themes
• Un amigo muy listo
• ¿Quieres ser millonario? versión Geek para tu iPhone

¿Que es un widget?

Información técnica

Creando nuestro primer Widget

Fichero config.xml

<widget id="http://quirksmode.org/widget" dockable="true">
  <widgetname>Test widget</widgetname>
  <icon>pix/myIcon.gif</icon>
  <width>200</width>
  <height>200</height>
  <security>
    <access>
      <host>quirksmode.org</host>
    </access>
  </security>
</widget>

Vayamos al lio

(Ver Imagen) Tenemos Opera 9.64 que nos permitirá probarlo en nuestro ordenador mediante el motor gráfico de Opera. Tambien encontraremos VodafoneAppsManager que se trata de un fichero .sis para instalar en un dispotivo symbian que nos permitirá ejecutar estos Widgets en nuestros móviles symbian. Y por último, WidgetPacker, una aplicación que nos ayudará a crear nuestro Widget. Una vez instalado Opera o VodafoneAppsManager (el que queramos para probar) instalamos WidgetPacker y comenzamos a desarrollar.

(Ver Imagen) Podemos optar por usar un template sobre el que trabajar, recomendable para las primeras pruebas, o crear uno nuevo. Entre los templates disponibles, tenemos la posibilidad de crear un widget sobre Twitter o sobre Fortune. Nosotros vamos a crear uno desde cero.

(Ver Imagen) Para ello primero definiremos los datos que nos va solicitando la aplicación y que se encargará de generar el fichero config.xml que hemos comentado previamente. (Ver Imagen) Este será el resultado del fichero XML de nuestro ejemplo:

<widget id="widget2k" dockable="yes">
  <widgetname>Mi Primer Widget</widgetname>
  <description>Widget de Prueba</description>
  <width>320</width>
  <height>240</height>
  <author>
    <name>Andrés Nieto</name>
    <organization>aNieto2k</organization>
    <link>http://www.anieto2k.com</link>
    <email>XXXX@gmail.com</email>
  </author>
  <security>
    <access>
      <host>www.anieto2k.com</host>
    </access>
  </security>
</widget>

(Ver Imagen) Al hacer esto nos encontraremos nuestro nuevo Widget, osea el corazón de lo que será nuestro Widget. ¿Muy familiar verdad?

(Ver Imagen)

El código

(Ver Imagen)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Mi Primer Widget</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>

	<script type="text/javascript" src="js/wmpkit.js"></script>
	<script type="text/javascript" src="js/json2.js"></script>

    <script type="text/javascript" src="js/script.js"></script>

  </head>
  <body>
	<div id="page">
		<div id="header">
			<h1><a href="http://www.anieto2k.com">aNieto2k</a></h1>
		</div>
		<div id="content"><!-- CONTENEDOR DE NOTICIAS --></div>
		<div id="footer">
			<p>
				Desarrollado por <a href="http://www.anieto2k.com">aNieto2k</a>
			</p>
		</div>
	</div>
  </body>
</html>

CSS

body {
  	font-family: Verdana, Helvetica, sans-serif;
  	font-size: 10px;
  	background-color: #184574;
}

a {
	color:#878826;
}
.post {
	background-color: #fff;
	margin: .5em;
	padding: -5em;
}

Javascript

//
// insert init code here...
//
var blogURL = "http://www.anieto2k.com/feed/json/";
var contentContainer = document.getElementById("content");

// Lanzamos la petición
wmpkit.xhrGet(blogURL,handleResponse);
/*
	Funcion que se encarga de crear un <div />
	que contendrá la información del post.
*/
function createPost(post){
	var container = document.createElement("div");
		container.setAttribute("class", "post");

	var title = document.createElement("a");
		title.textContent = post.title;
		title.setAttribute("class", "user");
		title.setAttribute("href", post.link);
	container.appendChild(title);

	var content = document.createElement("div");
		content.textContent = post.description;
	container.appendChild(content);
	contentContainer.appendChild(container);
}

/*
	Callback que ejecutamos al recibir
	la respuesta del servidor
*/
function handleResponse(xhr) {
	  if(xhr.responseText) {
		  try {
	  		var posts = JSON.parse(xhr.responseText);
  			for (var c = 0;c < posts.items.length;c ++) {
  				createPost(posts.items[c]);
  			}
  		} catch (e) {}
  	}
  };

Compilación

(Ver Imagen) Con nuestro proyecto seleccionado pulsaremos sobre el botón "Build" y este nos mostrará una ventana con la información sobre el proceso.

(Ver Imagen) Ahora ya encontramos el fichero .wgt en la carpeta dist/ de la estructura de nuestro Widget. Este fichero será el encargado de instalarse en el dispositivo móvil o en el navegador Opera. Para ello podemos optar por 2 aciones:

1. Ejecutarlo en el navegador (Opera 9.64) mediante un simple doble-click en el fichero .wgt.
2. O mediante el botón "Deploy" de la aplicación que se encargará de enviarnoslo directamente a nuestro movil mediante Bluetooth (es necesario tenerlo).

Resultado

(Ver Imagen)

Más información

1. Creando widgets para T-Mobile
2. Widgets en Forum Nokia

Artículos relacionados

• WordPress Widgets
• La W3C le mete mano a los Widgets
• WordPress Dashboard Editor, widgets en tu dashboard
• Increibles tablas zebra seleccionables
• Widget traductor

Ver Demo

Instalación

1. Descargamos el ficheros
2. Descomprimimos y colocamos el directorio completo en la raiz de WordPress.
3. Modificamos el HTML si queremos adaptarlo al diseño del blog.

Descargar

Artículos relacionados

• aNieto2k iCal Version
• Crear un iCal (estilo iPhone) con jQuery
• Otra vulnerabilidad para IE (daxctle.ocx)
• Necesitas alguna versión concreta de WordPress
• dhtmlxScheduler, create tu propio Google Calendar

Código

function eval_php($atts, $content=null) {
        ob_start();
        eval($content);
        $output = ob_get_contents();
        ob_end_clean();
        return "Entro".$output;
}

add_shortcode("php", "eval_php");
// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

Modo de empleo

[php]Código PHP[/php]

Ejemplo

[php]
	$str = "Hello {xx}";
	echo str_replace('{xx}', 'World!', $str);
[/php]

¿Donde pongo este código?

¿Precauciones?

1. Limitando por ID de usuario

// ID's de usuarios permitidos
$users_avail = array(1,2,3,4);

function noPHP($data = null){
	global $current_user, $users_avail;
  	 get_currentuserinfo();

	if (in_array($current_user->ID, $users_avail)) return $data;
	$data["post_content"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content"]));
	$data["post_content_filtered"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content_filtered"]));
	return $data;
}

add_filter('wp_insert_post_data', 'noPHP');

function eval_php($atts, $content=null) {
	ob_start();
	eval($content);
	$output = ob_get_contents();
	ob_end_clean();
	return $output;
}

add_shortcode("php", "eval_php");

// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

2. Limitando por level mínimo

// Level mínimo
$minlevel = 5;

function noPHP($data = null){
	global $current_user, $minlevel;
      get_currentuserinfo();

	if ($current_user->user_level > $minlevel)
		return $data;

	$data["post_content"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content"]));
	$data["post_content_filtered"] = str_replace("[php]", "", str_replace("[/php]", "", $data["post_content_filtered"]));
	return $data;
}

add_filter('wp_insert_post_data', 'noPHP');

function eval_php($atts, $content=null) {
	ob_start();
	eval($content);
	$output = ob_get_contents();
	ob_end_clean();
	return $output;
}

add_shortcode("php", "eval_php");

// Forzamos el do_shortcode al principio
add_filter('the_content', 'do_shortcode', 1);

Limitaciones

Artículos relacionados

• Ocultar contenido a los usuarios no registrados
• Usando Shortcodes en nuestro theme
• Ejecuta PHP en tus posts
• Usando Shortcodes como profesionales
• ShortCode API, otra novedad de WordPress 2.5

stepForm()

<form action="" method="post" class="stepMe">
	<fieldset>
		<label for="name">Nombre:</label>
		<input name="nombre" id="name" value="" />
		<label for="surname">Apellidos:</label>
		<input name="apellidos" id="surname" value="" />
		<label for="birthday">Fecha de Nacimiento:</label>
		<input name="fnac" id="birthday" value="" />
	</fieldset>
	<fieldset>
		<label for="text1">Text1:</label>
		<select id="text1">
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
			<option>1</option>
		</select>
		<label for="text2">Text2: </label>
			<input type="radio" id="text2" />
	</fieldset>
	<fieldset>
		<label for="submit">Submitar datos </label>
		<input type="submit" id="submit" value="Enviar" />
	</fieldset>
</form>

Personalización

1. Texto Back. (por defecto Volver)
2. Texto Next. (por defecto Seguir)
3. Contenedor. (por defecto fieldset)

$.stepForm();
// Volver / Seguir [fieldset] 

$.stepForm('Back','Next');
// Back / Next [fieldset]

$.stepForm('<-','->', 'p');
// Volver / Seguir [p]

Código

jQuery.extend({
    stepForm: function(txtBack, txtNext, token){
    	var fieldsets = $((token || 'fieldset'), $("form.stepMe"));
        var total = $(fieldsets).length;
	$(fieldsets).each(function(x,el){
			    if (x > 0) {
			      $(el).hide();
			      $(el).append('<a class="backStep" href="#x_' + (x-1) + '">'+ (txtBack || 'Volver') +'</a>');
			      $(".backStep", $(el)).bind("click", function(){
			                $("#x_" + (x - 1)).show();
			                $(el).hide();
			       });
			    }

			    if ((x+1)< total) {
			        $(el).append('<a class="nextStep" href="#_' + (x+1) + '">'+(txtNext || 'Seguir')+'</a>');
			        $(".nextStep", $(el)).bind("click", function(){
			                $("#x_" + (x + 1)).show();
			                $(el).hide();
			        });
			    }
			    $(el).attr("id", "x_" + x);
	});
    }
});

Actualización

Artículos relacionados

• MooTools FormCheck, validador de formularios con MooToos
• Mejora la presentación de los formularios con jLook y jQuery
• VanadiumJS, validación de formularios en el cliente
• Validar formularios con Javascript
• Soluciones modernas a los formularios 2.0

¿Como funciona?

¿Para que sirve?

Visita @webdev2k

@webdev2k en Twitter

Artículos relacionados

• Listado de herramientas para desarrollo web
• Proceso del desarrollo de una aplicación informática
• Alonso, lo consiguió en Montmeló
• Qcodo, Framework de desarrollo en PHP
• commentFeed

35 17 * * * hola()

1. minuto [0-59]
2. hora [0-23]
3. dia del mes [0-31]
4. mes [0-12]
5. dia semana [0-7]
6. ejecutable

La hora especificada será la del navegador del usuario

* 16 * * * hola()

30 6 1 * * showHola()

Codigo

var jsCron = {
		items:[],
		interval: null,
		parse: function(strUnix) {
				return strUnix.match(/^(\d+|\*) (\d+|\*) (\d+|\*) (\d+|\*) (\d|\*) +(\w+)/);
		},
		check: function() {
				var hoy = new Date();
				var test = [new Date(), hoy.getMinutes(), hoy.getHours(), hoy.getDate(), hoy.getMonth(), hoy.getDay()];

				for (var i in this.items) {
					var exec = 0;
					var t = this.parse(this.items[i][1]);
					for (var x in t)
				    if (t[x] && (t[x] == test[x] || t[x] == "*"))exec++;
					if (exec == 5 && this.items[i][0] == 0) {
							eval(t[6]).call();
							this.items[i][0] = 1;
					} else if (exec < 5 && this.items[i][0] == 1) {
						this.items[i][0] = 0;
					}
				}
		},
		set: function(strUnix) {
			if (!/^(\d+|\*) (\d+|\*) (\d+|\*) (\d+|\*) (\d|\*) +(\w+)/.test(strUnix)) return new Error("Formato invalido");
			this.items.push([0, strUnix]);
		},
		init: function(seg) {
			var seg = seg || 1000;
			this.interval = setInterval("jsCron.check()", seg);
		}
};
jsCron.init();

Modo de uso

// Función hola();
function hola() {
   alert("Hola");
}

// Tarea programada
jsCron.set("35 17 * * * hola()");

Actualización

// Tarea programada
jsCron.set("35 17 * * *", hola())
// de forma inline
jsCron.set("35 17 * * *", function() {
   alert("Hola");
});

Artículos relacionados

• TwitterWeek – 2011-09-04
• Lo mejor del blog en 2009
• Portando sprintf() a Javascript
• Google Reader, tambien formato iPhone/iPod Touch
• Enviate copias de seguridad de tu base de datos a tu email