aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hacía tiempo que no se hablaba tanto de HTML5 como en los últimos 2 días. Es normal, por que el gigante de la red lo ha estornudado y nos ha salpicado a todos, pero ¿realmente entendemos que es lo que significa el paso de HTML4 a HTML5?

(Ver Imagen) (Flickr)

Esta imagen, que descubro gracias a @joanballester via Twitter, ilustra muy claramente la diferencia que implica el paso a esta nueva revisión del estandar HTML. No solo nos va a ayudar a mejorar nuestras aplicaciones con contenidos multimédia, sinó que vamos a poder llamar a cada cosa por su nombre. Lo que hará que nuestra información sea mucho más clara para las arañas de los navegadores.

Esto es sin duda la noticia del día de ayer. Primero con la presentación de una página de demo en Youtube en la que usamos HTML5 y los controles multimedia para mostrar los videos [Via MarlexSystems] (solo en Chrome, Safar4i, Webkit, Firefox 3.5,..).

<article id="watch-page">
  <h1>O3D Beach Demo</h1>
  <section id="main-content">
	<div id="video-player">
		<video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
			<div class="video-fallback">
				<br>You must have an HTML5 capable browser.
			</div>
		</video>
		<div class="controls">
			<button class="play-button"></button>
			<div class="progress-bar">
			<div class="progress-list">
				<progress class="load-progress" value="0" style="width: 0%;"></progress>
				<progress class="play-progress" value="0" style="width: 0%;"></progress>
				<a href="#" class="scrubber-button" style="left: 0%;"><img src="/demo/transp.gif" width="16" height="16"></a>
			</div>
[...]

Si puedes probarlo te lo recomiendo, es una gozada, ver por fin que funciona, y como funciona 😀

Por otro lado, en el Google I/O se ha presentado Google Wave, lo último de Google que suena a Facebook, Twitter,Friendfeed,Gmail, Messenger, BaseCamp, Office, Wiki, FlickR … killer. Una aplicación que promote cambiar la forma de interactuar con los demás en Internet.

(Ver Imagen)

Todo ello, haciendo uso de las propiedades de HTML5, sacándole el máximo partido al estandar para innovar una vez más.

Luigi, me muestra hoy un artículo muy interesante sobre optimización de Javascript. En él encontramos un ejemplo de como mejorar nuestras iteraciones en nuestro código. Simplemente debemos pensar en decrementar la variable que estamos iterando. He montado un pequeño ejemplo para testear 50.000, 500.000 y 5.000.000 de iteraciones simples. Los resultados hablan por si solos:

[increment]50.000 iteraciones: 11ms. (50000)
[decrement]50.000 iteraciones: 2ms. (50000)
[increment]500.000 iteraciones: 115ms. (500000)
[decrement]500.000 iteraciones: 19ms. (500000)
[increment]5.000.000 iteraciones: 1188ms. (5000000)
[decrement]5.000.000 iteraciones: 181ms. (5000000)

Funciones

El código del ejemplo es muy sencillo y como se puede ver, únicamente se encarga de incrementar la variable y, en ambas.

	var fors = {
		increment: function(iterations){
				var y = 0;
				for (var i=0;i<iterations;i++){
					y++;
				}
				return y;
		},
		decrement:function (iterations){
			var y = 0;
			for (var i=iterations;i>0;i--){
				y++;
			}
			return y;
		}
	}

Como podemos ver, un pequeño cambio puede significar reducir entre un 200 y un 600% el tiempo de procesamiento de nuestros scripts. ¿Alguna optimización más?

Explicación

El motivo de esta diferencia de tiempo, es debido a que increment() debe realizar una revisión del valor de iterations por cada pasada por el bucle. De esta forma, se realiza un acceso a memoria para solicitar el valor de la variable, algo que no pasa en decrement() que al comparala con 0, nos ahorramos dicha consulta.

David Walsh, ha desarrollado un curioso plugin para MooTools con el que podremos gestionar el scroll de nuestros usuarios. ScrollSpy, trata de un sistema en el que dependiendo del scroll que el usuario haga sobre nuestras páginas, se le aplicará un efecto o se le mostrará un elemento.

window.addEvent('domready',function() {
	var ss = new ScrollSpy({
		min: 200,
		onEnter: function(position,state,enters) {
			$('gototop').fade('in');
		},
		onLeave: function(position,state,leaves) {
			$('gototop').fade('out');
		}
		container: window
	});
});

Tan sencillo y límpio como vemos arriba. Indicaremos en min, el scroll mínimo para que se active la acción onEnter() y al salir del rango de scroll definido entre el mínimo y máximo (si no se define se toma el final de la página) activará el método onLeave(). Sencillo y potente, sinó mirar los 4 ejemplos que David ha montado para ilustrarnos. (Ejemplo 1, Ejemplo 2, Ejemplo 3, Ejemplo 4).

SixRevision ha realizado un listado de 10 plugins de WordPress con los que seguro que ahorrarás tiempo en todo lo relacionado con el blog.

1. Post Ideas: Es un plugin sencillo que se encarga de gestionar de una forma cómoda esos miniborradores que puedes usar para almacenar ideas para futuros posts.
2. Tidy Up: Plugin que se encarga de detectar errores en tu HTML y lo limpia (mañana lo probaré a ver que significa eso de limpiar :D)
3. Pages+: Ideal para los blogs que tienen muchas páginas, gestiona muy eficientemente el trabajo con ellas.
4. Mass Post Manager: Realizar tareas comunes como «Cerrar comentarios», «Eliminarlos», … a un conjunto de posts a la vez.
5. WordPress Attachment Manager: Interesante plugin que te permite generar listas de elementos adjuntados al post.
6. Survey Gizmo: Plugin ideal para gestionar tus encuestas. Dispone de una versión FREE bastante completa.
7. Tweetable Twitter: Plugin que integra tu WordPress con Twitter, y además envia los posts automáticamente a twitter para mántener a tus followers informados.
8. Secure Files: Te ayudará a gestionar esos ficheros que únicamente los usuarios registrados deben poder descargar.
9. SmartVideoPlus: Plugin múltimedia con el que podrás integrar vídeos en tu WordPress más cómodamente.
10. Sticky Post: Los usuarios de WordPress 2.7 ya lo tienen integrado en el núcleo de WordPress, pero los usuarios de versiones más antiguas podrán decidir cómodamente que post quedará marcado como sticky en su Blog.

NimbleKit es una extensión de Xcode con el que podremos desarrollar aplicaciones para el iPhone/iPod Touch pero sin necesidad de saber Object C. Se trata de intentar hacer que los desarrolladores web tengamos posibilidad de realizar estas aplicaciones e incluso subirlas al App Store de Apple. Todo ello, desarrolllando como lo venimos haciendo, usando tecnologías como HTML y Javascript.

(Ver Imagen)

Dispone de una serie de funciones que activarán los elementos nativos del dispositivo. Además de …

• Control completo de la apariencia de la aplicación
• Posibilidad de reproducir sonido en streaming
• Controlar la vibración
• Soporte de la Agenda
• Acceso a ficheros
• Acceso a Internet