El Patrón Modelo-Vista-Presentador (MVP) surge para ayudar a realizar pruebas automáticas de la interfaz gráfica, para ello la idea es codificar la interfaz de usuario lo más simple posible, teniendo el menor código posible, de forma que no merezca la pena probarla. En su lugar, toda la lógica de la interfaz de usuario, se hace en una clase separada (que se conoce como Presentador), que no dependa en absoluto de los componentes de la interfaz gráfica y que, por tanto, es más fácil de realizar pruebas.

La idea básica es que la clase Presentador haga de intermediario entre la Vista (la interfaz gráfica de usuario) y el modelo de datos. La vista tiene métodos en los que le pasan los datos que debe pintar ya "mascados" (una lista de cadenas por ejemplo, en vez del modelo...). Únicamente debe meter esos datos en los componentes gráficos (cajas de texto, checkbox, etc). También métodos get para obtener el contenido de esos componentes.

El Presentador hará de enlace entre el modelo y la vista, y dotará de inteligencia a la vista. Como el objetivo es poder probarlo fácilmente, el Presentador recibe las interfaces que deben implementar el modelo y la vista, con los métodos públicos a los que el Presentador debe llamar.

Se puede decir que el patrón MVP es una mejora del patrón Modelo-Vista-Controlador (MVC) basado en tres características:

• La vista no conoce el modelo.
• El presentador es independiente de la tecnología de interfaz de usuario.
• La vista y el presentador son testeables puesto que esta basada en un contrato.

El diseño web cada vez se está aprovechando de las ventajas de aplicar los conceptos clave de la Ingeniería.

Si imaginamos la fabricación de un coche, podemos verlo como la fabricación por separado de una serie de piezas (motor, sistema de frenado, ruedas, tapicería, …) que se diseñan por separado y se combinan. Así, en el diseño web muchas veces se combinan librerías Javascript como jQuery o módulos personalizados que añaden funcionalidad a la web.

El problema de esto, es que un navegador está obligado a realizar una petición al servidor por cada archivo (imagen, librería, hoja de estilos, …) que se utiliza en la página web. Una vez cargadas, el navegador las cachea y la navegación resulta más fluida, pero ¿Cómo podemos agilizar ese primer paso tan decisivo?

La respuesta es simple: Minimizando las peticiones al servidor

Hojas de estilo y librerías Javascript

Lo ideal es que todas las peticiones vayan en un mismo fichero. Esto en un principio obligaría al programador a realizar todo el proceso de la hoja de estilos en un único fichero, lo cual, en algunos casos puede no ser lo más aconsejable por modularidad, aunque sí por eficiencia.

Existen librerías que son capaces de combinar varios ficheros en uno solo de forma automática cada vez que alguno de los ficheros se modifica. Esto quizás añada un poco de tiempo de procesamiento en PHP pero las ventajas a la larga cuando la web esté en producción son grandes.

Imágenes

Si una hoja de estilos hace uso de unas 10 imágenes de fondo, tiene que realizar una llamada al servidor por cada una de estas imágenes. La solución para minimizar esto es combinar todas las imágenes en una sola utilizando una técnica llamada CSS Sprites.

Con esta técnica, y mediante hojas de estilo somos capaces de coger como imagen de fondo sólo la porción que necesitamos.

No hay que menospreciar el trabajo que lleva generar la imagen combinada además de calcular las posiciones de cada imagen ya que estamos utilizando uno de los recursos más importantes del programador, que es el tiempo.

Para ayudar con esto, existen una serie de herramientas online que permiten simplificar la tarea:

Algunas herramientas son:

• http://spriteme.org/
• http://spritegen.website-performance.org/

Minimizar y comprimir los archivos

Antes hemos comentando las ventajas de combinar los archivos en uno para minimizar el número de peticiones web. Si además, somos capaces de reducir el tamaño del fichero en producción estaremos incrementando la eficiencia de nuestra web.

Para ello, existen dos técnicas que se pueden combinar:

• Minimizar los ficheros: Eliminando comentarios, espacios en blanco, …
• Comprimir los ficheros: Algunos navegadores son capaces de entender que los datos pueden venir comprimidos utilizando algún algoritmo de compresión. 

Con esto, lo que vamos a conseguir es que el servidor esté más holgado pues tendrá que transmitir menos cantidad de datos a cada uno de los clientes que realicen peticiones y por tanto, el rendimiento global será mayor.

Todas estas ventajas las podemos conseguir de forma automática utilizando la librería minify que se encarga de juntar, combinar y reducir los ficheros indicados.

http://code.google.com/p/minify/

Cache

Es posible que le indiquemos a cada página web, de manera individual, cuanto tiempo debe pertenecer esta en cache. Las dos posibilidades son:Para páginas estáticas es implentar una política de establecer una fecha de caducidad de la cache lejanaPara páginas dinámicas usar una fecha aproviada para ayudar al navegador con las peticiones condicionales

En servidores como Apache, somos capaces de indicar una fecha relativa a la fecha actual, indicando que la página caducará, por ejemplo, pasados días (e incluso años) de la fecha de la petición.
En el caso de cambinar un componente, es necesario indicárselo al navegador añadiendo algún parámetro a la consulta o añadiendo algún número de versión al fichero.

Otros consejos

Poner las hojas de estilo en la cabecera: Tal y como indica el estandar W3C

The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.

Esto nos indica que poniendo las hojas de estilo allí, el navegador será capaz de cargar la página de forma progresiva

Utilizar ficheros externos

Al margen de los beneficios de reusabilidad y modularidad, usando ficheros externos para almacenar nuestras hojas de estilo y scripts permiten al navegador cachearlos.

Por consiguiente, las páginas web son más livianas y tardan menos en descargarse.

Reducir el número de elementos DOM en la página

Maquetar de forma clara y semántica reducen el número de elementos del árbol ya que no es necesario añadir DIVs u otros elementos para corregir problemas de LAYOUT. De esta forma, los scripts serán más rápidos y eficientes porque tendrán que buscar en menos nodos

Evita tener imágenes vacías

Las imágenes vacías (<img src=”” alt=”Vacía” />) o var img = new Image(); img.src=’’; obligan a los navegadores a realizar peticiones HTTP que no son útiles.

Fuentes:

• http://developer.yahoo.com/performance/rules.html
• http://code.google.com/p/minify/
• http://spritegen.website-performance.org/
• http://spriteme.org/

Siempre hay ocasiones en las que es necesario insertar un video o un fichero de audio para que se reproduzca de forma integrada en la web sin neesidad de descargarlo a tu disco duro y abrirlo con tu reproductor habitual.

Hasta ahora esto se ha hecho siempre mediante la inserción de macros a través de la etiqueta html iframe o mediante un reproductor flash. Esto tiene dos inconvenientes:

El primero de ellos es que para que todo cuadre en la web. El que lo inserta debe saber el suficiente html para que ajuste el tamaño a la proporción adecuada de tal forma que todo se ajuste a la maqueta como debería.

El segundo de los inconvenientes es que la inserción de macros siempre es un problema en cuanto a seguridad, ya que se está cargando contenido de otra web en la nuestra, lo cual puede provocar que nuestra web sea portadora de virus si no se utiliza con cuidado.

El flash por su parte, en función de los navegadores, puede generar graves problemas de rendimiento (Especialmente en Internet Explorer). Además del hecho de que no es posible reproducir flash en ciertos dispositivos, como los de Apple, enórmemente extendidos ha día de hoy.

En el caso de que la web no esté pensada para ser visualizada en dispositivos móviles o tablets, en principio, de esta forma se puede obtener un reproductor de audio o de video muy facilmente. A continuación vemos unos ejemplos de cómo insertar videos flv en la web con un reproductor flash,

<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv.swf" width="300" height="220">
       <param name="movie" value="http://flv-player.net/medias/player_flv.swf" />
      <param name="allowFullScreen" value="true" />
     <param name="FlashVars" value="flv=http://www.miweb.es/video.flv" />
</object>

Con este código cargaremos un reproductor de video flash que nos permitirá ver videos flv en nuestra web insertándolo allí donde queramos que se reproduzca el video. Sin embargo, los sitios como youtube o vimeo, no permiten reproducir los videos de forma directa a traves del reproductor flash, porque ya tienen su propio sistema. En estos casos, debemos, o bien insertar diréctamente le código iframe que nos ofrece youtube o vimeo para que todo funcione corréctamente ajustando los parámetros de anchura y altura del iframe que nos dan para que cuadre en donde lo queramos poner. A continuación se muestra un ejemplo de youtube:

<iframe width="560" height="315" src="http://www.youtube.com/embed/bxP0VnbHSxE" frameborder="0" allowfullscreen></iframe>

Existe una alternativa que, aunque tambien pasa por los iframes, facilita mucho la labor para alguien que no sabe HTML. Tanto Youtube como Vimeo, tienen un código asociado a cada uno de sus videos que acompaña a la url mediante parámetros get. De cara al porgramador es algo más laborioso, porque debe procesar el enlace por php, extraer el código citado de youtube o vimeo, y acoplarlo a un enlace de tipo embed de la web que corresponda (Youtube o Vimeo). Básicamente, se trata de montar nuestro propio iframe sabiendo cual es el formato de los enlacess embed de Vimeo y de Youtube, los cuales podemos ver facilmente en los iframes para insertar un video que nos proporcionan dichas webs.

En el caso del audio, tambien se usa un código flash que carga el reproductor instalado por defecto en nuestro navegador. El más utilizado suele ser Windows media player, debido a al gran expansión de los sistemas operativos Windows.

Etiquetas audio y video de HTML 5

En HTML 5 tenemos la posibilidad de reproducir audio y video diréctamente mediante el uso de las etiquetas audio y video.

La etiqueta Audio

Nos permite insertar un fichero de audio con un reproductor en nuestra web, que nos permitira escucharlo sin necesidad de tener instalado ningún programa adicional para dicho fin. Un ejemplo de sintaxis de esta etiqueta sería el siguiente:

<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />

A continuación se expone una breve descripción de algunos de los atributos disponibles para esta etiqueta.

src. Indica la ruta del archivo a reproducir.

autoplay. Permite que la reproducción comience de forma automática sin previo aviso. En ocasiones no se recomienda su uso para dejar que el usuario decida cuando reproducir audio cuando lo desee.

autobuffer. Nos permite cargar de forma automática el archivo para que sea más rápida su reproducción a posteriori y reducir aí tiempos de espera para el usuario.

width y height. Definen respectivamente la anchura y la altura que deberaá tener la etiqueta de audio.

loop. Ejecuta la reproducción en bucle de forma que al finalizar vuelve a empezar.

controls. Muestra los controles de reproducción.

type. Define el tipo de archivo a reproducir y su extensión (video, audio...)/(mp3, ogg...).

La etiqueta Video

En el caso de la etiqueta de video, atributos son muy similares a los de la etiqueta audio. Aquú un ejemplo de su sintáxis.

<video src=”video.ogg”>
<!– Código a mostrar en navegadores que no soportan HTML 5 –>
</video>

Para más información podéis consultar este enlace. 

El inconveniente de utilizar estas etiquetas es que hay navegadores que no soportan corréctamente todas las funcionalidades de html5 y por ese motivo no se utilizan todavía de forma habitual.

FFMPEG es un rápido sistema de conversión de vídeo y audio, que además de permitir la conversión entre muchos de los formatos conocidos como MP4, MPEG para video y mp3 o amr para audio, entre otros.

FFServer nos permite transmitir video y audio que haya sido previamente convertido a alguno de los formatos soportados por FFMPEG además de hacerlo también en tiempo real combinándolo con FFMPEG, mediante flujos FFM.

FFPlay es un reproductor de medios muy sencillo que utiliza las librerías de FFMPEG y SDL. Normalmente, se utiliza como sistema de testeo cuando se trabaja con FFMPEG.

Ahora que ya conocemos las distintas herramientas que vamos a utilizar, podemos empezar a analizarlas con un poco más de profundidad.

FFMPEG

Funcionamiento

FFMPEG, funciona por línea de comandos. La forma general de invocar a FFMPEG es la siguiente:

ffmpeg [[Opciones para el fichero de entrada][-i Fichero de entrada]]…{[Opciones para el fichero de salida] Fichero de salida}.

Mediante esta estructura general tan sencilla, FFMPEG no sólo nos permite convertir ficheros que se encuentren en nuestro PC, sino que podemos capturar el vídeo o el audio, en función de lo que nos interese, desde cualquier fuente, ya sea una tarjeta capturadora de video o una dirección IP de una máquina local o remota en la que se encuentre el fichero de audio o video a convertir.

A continuación veremos las opciones de FFMPEG más importantes y que se suelen usar con más frecuencia.

Opciones Principales

-h

Nos muestra la ayuda del programa, es decir, nos muestra cuales son las diferentes opciones que FFMPEG acepta como argumento.

-formats

Nos muestra una lista de los formatos que soporta el programa tanto de entrada como de salida. Los campos que preceden al nombre del formato nos dicen si ese formato es aceptado como parámetro de entrada o como parámetro de salida.

‘D’ (Decoding Available). Si el nombre de un formato viene precedido de este campo, nos dice que es posible decodificar dicho formato, es decir, que FFMPEG lo puede recibir como parámetro de entrada.

‘E’ (Encoding available). Este campo por su parte, no informa sobre la posibilidad de codificar este formato, lo que nos indica que se puede utilizar como parámetro de salida de FFMPEG.

-codecs

Esta opción nos permite saber cuales de los codecs (codificadores, decodificadores o ambos) están disponibles en el programa. Los campos que preceden al nombre de del códec, nos dicen si el codificador o el decodificador están disponibles y si lo están para audio o vídeo.

‘D’  (Decoding Available). Nos indica si el decodificador está disponible para ese códec.

‘E’ (Encoding Available). Si este campo está presente, nos dice que el codificador está disponible para el códec a cuyo nombre precede.

V/A/S. Nos indica si el códec está disponible para audio, vídeo o subtítulos.

‘S’. Es lo que nos indica si el códec soporta cortes.

‘D’. El códec soporta renderizado directo.

‘T’. El códec es capaz de manejar videos a la entrada que estén truncados aleatoriamente en lugar de en los límites de en los frames únicamente.

-f formato

La opción ‘-f ’, nos permite especificar el formato que tiene nuestro video de entrada y el que tendrá el video a la salida.

-i

Esta opción es la que nos permite especificar la fuente de la que se extraerá el video, ya sea local o remota.

Si la fuente es local, tendremos sentencias como esta: ffmpeg –i video.yuv.

Si por el contrario, la fuente es remota podremos encontrarnos con sentencias como esta: ffmpeg –i tcp://192.168.3.25:5432.

-target type

Transforma el fichero de la entrada al formato que se indica en el campo ‘type’, ajustando automáticamente opciones como el bitrate, el códec, o el tamaño del buffer.

Opciones de Video

-b ‘bitrate’

Nos permite modificar el ratio de bits (en Kbps) que se usará para nuestro video tanto a la entrada como a la salida.

-r ‘fps’

Nos permite modificar el número de imágenes por segundo que se mostrarán en nuestro video.

-s ‘size’

Con esta opción podemos establecer la resolución, ya sea manualmente introduciendo los valores  de la forma ‘WxH’, donde ‘W’ es el ancho y ’H’ la altura, o bien usando alguna de las abreviaturas  que reconoce el programa para establecer aluna resolución estándar como por ejemplo HD a 1080p que se puede especificar como ‘ ffmpg –i video.avi –s hd1080 videohd.mpeg’.

-aspect ‘aspect’

Incluyendo esta opción, podremos especificar el formato de pantalla en el que se va a visualizar el video, y por tanto lo adaptaremos a dicho formato de pantalla. Los más conocidos son el formato ‘4 : 3’ y el formato ‘16 : 9’ (pantalla panorámica).

-vcodec ‘codec’

Nos permite establecer un códec determinado para realizar la conversión de video.

Opciones de Audio

-ar  ‘freq’

Con esta opción podemos seleccionar la frecuencia de muestreo para nuestro fichero de audio.

-ab ‘bitrate’

Esto nos permite seleccionar el número de bits por segundo en el fichero de audio en Kilobits por segundo, donde sus valores más frecuentes son 64 Kbps, 128 Kbps o 192 Kbps.

-ac ‘chanels’

Nos permite decidir a qué tipo de sonido se adaptará nuestro fichero de audio, mono (opción ‘1’) o estéreo (opción ‘2’).

Además de las citadas en este documento, FFMPEG, ofrece una amplia gama de opciones que nos permiten realizar múltiples cambios en los ficheros a la entrada y a la salida, ya sean de audio o de video, e independiente mente, de si su fuente es un fichero propiamente dicho o una tarjeta capturadora de televisión o una dispositivo externo de video digital como por ejemplo una cámara que grabe en formato dv1. Para tener una visión más completa sobre el funcionamiento de FFMPEG, conviene revisar la documentación oficial del proyecto que se puede encontrar en www.ffmpeg.org o bien, si ya tenemos instalado FFMPEG en el equipo, usar el comando ‘man’ para acceder a la ayuda del mismo.

Algunos Ejemplos de Aplicación

Ahora que ya hemos visto algunas de las opciones más importantes de FFMPEG de cara al proyecto, para una mejor comprensión nos valdremos de algunos ejemplos que servirán para tener una idea gráfica de lo que hacen las opciones y de cómo se pueden combinar.

Por ejemplo podemos convertir un fichero  YUV420P a un  .avi con la siguiente sentencia:

ffmpeg -i /home/prueba.yuv /home/salida.avi.

También podemos realizar el proceso contrario, obteniendo como resultado un fichero de video puro (YUV420P).

ffmpeg –i /home/video.avi videoPuro.yuv.

También podemos establecer más de un fichero a la entrada cuando queremos que estos se conviertan a un mismo formato de esta forma.

ffmpeg –i /tmp/a.wav –s 640x480 –i /tmp/a.yuv /tmp/a.mpg.

De esta forma convertiremos los dos ficheros tanto el de video como el de audio a mpeg. Tendremos dos ficheros nombrados exactamente igual, pero en el uno habrá audio y en el otro video.

Si se necesitan más ejemplos se puede acudir a www.ffmpeg.org y consultar la sección de documentación para tener todos los ejemplos de conversión entre formatos, ya sean de audio o de video.

FFSERVER

FFServer es un sistema que nos permite transmitir ficheros de audio o video en tiempo real o con ficheros previamente convertidos. Este programa funciona mediante un fichero de configuración denominado ffserver.conf, situado en /etc.

Se puede ejecutar de forma individual utilizando la siguiente sintaxis:

ffserver [Opciones].

También podemos arrancarlo cuando ejecutamos FFMPEG solicitándole una fuente o un destino remoto.

A continuación veremos las principales opciones que FFServer nos proporciona para su ejecución por línea de comandos.

Opciones

-L

Nos muestra la licencia del programa.

-version

Nos indica la versión que tenemos instalada en nuestro equipo.

-formats

Nos muestra una lista de los formatos, codecs y protocolos que soporta FFServer, entre otros.

-f ‘Fichero de Configuración.

Nos permite especificar un fichero de configuración alternativo al existente en /etc/ffserver.conf.

-n

Esta opción anula todas las directivas de ejecución que permiten al programa ejecutar FFMPEG de forma automática. De este modo, el usuario tendrá que ejecutar FFMPEG de forma manual.

Es muy común a día de hoy colocar videos en nuestras páginas web. Para ello tenemos dos alternativas utilizar algún proveedor de videos que nos preste su ancho de banda (youtube, vimeo, …) o utilizar el de nuestro servidor. Hay casos en los que elegir nuestro servidor puede ser debido a motivos de privacidad de los contenidos.

Sea como sea, si lo que te interesa es subir un video FLV a tu propio servidor y además utilizarlo con el plugin Fancybox, entonces puedes seguir leyendo. Lo primero es tener un reproductor de FLV para web. Hay cientos de reproductores disponibles, tanto gratuitos como de pago, tan solo hay que buscar flv player en google. Podeis utilizar por ejemplo el de flv-player.net que tiene varias versiones (completas o más ligeras sin algunas funcionalidades).

Una vez tenemos el archivo flv y el reproductor flv (es un archivo swf), ya solo nos falta descargar Fancybox. Suponemos que sabemos utilizar fancybox, por tanto montamos una página sencilla que requiera los archivos javascript necesarios así como sus hojas de estilos.

En está pagina añadimos un enlace:

Ver video

Si nos fijamos en el href le hemos colocado un id. De esta forma fancybox cargará el contenido de dicho identificador en el popup que abra. Por tanto ahora solo nos falta definir dicho identificador.

Hemos introducido la capa con identificador “flv” dentro de otra capa con “display” “none”, de esta manera al entrar en la página no aparecerá el video directamente. Dentro de la capa “flv” tenemos la etiqueta “object” que lleva el reproductor de FLV (player_flv_maxi.swf) y una serie de parametros para configurar el reproductor donde el más importante es el que define el video a reproducir y cuyo nombre es “flv”. En el ejemplo vemos como le asignamos mi_video.flv como video a reproducir.

Finalmente solo nos falta el código javascript que va a hacer que al hacer click en nuestro enlace se abra Fancybox con nuestro video.

$("a.video_flv").fancybox({
'overlayOpacity': 0,
	'hideOnContentClick': false,
	'padding': 0,
	'autoScale': false,
	'autoDimensions': false,
	'width': 680,
	'height': 495,								
	'titleShow': false,
	'overlayColor': '#000'
});

Estamos utilizando un selector con jquery para añadirle el evento de fancybox con una configuración donde cabe destacar el autoscale y autodimensions desactivados para asi fijar el tamaño del popup a abrir. De esta forma conseguimos ver nuestro video flv en fancybox.

HTML5 nos brinda la posibilidad de poder añadir más semántica a nuestras webs, pudiendo hacer distinciones entre bloques de contenido utilizando etiquetas como <ARTICLE>, <SECTION>, <HEADER>, <FOOTER>, … en lugar de poder distinguir únicamente por estructura entre elementos de bloque o elementos en línea.

Como siempre, el principal problema al que nos enfretamos es la retrocompatibilidad con los navegadores ya que las versiones más antiguas de estos no entienden estas estructuras y no las representan de forma correcta.

Lo bueno es que, gracias a un poco de CSS y Javascript podemos "ayudar" a dichos navegadores a "entender" dichas etiquetas.

Estructura de página en HTML5. Olvidándonos del DOCTYPE

La declaración de una página en HTML5 es mucho más sencilla que en las versiones anteriores:

<!DOCTYPE html>
<html lang="es">
	<head>
		<!-- Title -->
		<title>{title}</title>


		<!-- Meta data -->
		<meta charset="UTF-8">
		<meta name="description" content="{meta_descripcion}" /> 
		<meta name="keywords" content="{meta_keywords}" /> 
		<meta name="robots" content="index,all" />

		<!--[if lte IE 8]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->		

		<!-- Stylesheets -->
		<link rel="stylesheet" href="style/style.css">

		<!-- Javascripts -->
		<script type="text/javascript" src="js/jquery.js"></script>
	</head>

	<body>
</body>
</html>

	<!--[if lte IE 8]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->	

Esta línea indica que si nuestra versión de navegador es más pequeño o igual que Internet Explorer 8, entonces hay que cargar el fichero html5.js que informará al navegador de los nuevos elementos.

Maquetación de los nuevos elementos

Al inicio de nuestra hoja de estilos, normalmente aplicamos una serie de estilos que sirven para "resetear" las hojas de estilos propias del navegador y así intentar dar uniformidad a como se visualiza la página en distintos navegadores y sistemas operativos.

Este sería un ejemplo de dichas reglas:

/* Reset the stylesheet */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, textarea, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
address, article, aside, audio, canvas, command, datalist, 
details, dialog, figure, figcaption, footer, header, hgroup,
keygen, mark, meter, menu, nav, progress,
ruby, section, time, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

Como vemos, hemos incluido además de las etiquetas típicas de XHTML1.1 y HTML 4.1, las nuevas etiquetas de address, article, aside, audio, canvas, command, datalist, details, dialog, figure, figcaption, footer, header, hgroup, keygen, mark, meter, menu, nav, progress, ruby, section, time, video.

Además, con esta regla, vamos a especifcar cuáles de dichos elementos queremos que sean tratados como elementos de bloque.

/* HTML5 elements that are blocks */
aside, header, footer, article, section, 
nav, figure, figcaption {
	display: block;
}

Gracias a estos sencillos pasos podemos empezar a maquetar nuestras webs utilizando las ventajas de HTML5 ya que permitirán que los resultados de motores de búsqueda sean más precisos con nuestros resultados además de permitir, de forma sencilla, la sindicación de contenidos o la publicación de artículos en las redes sociales.

Para más información sobre HTML5 puede leer la entrada Cómo usar HTML5

La construcción de Sliders es una tarea que se ha simplificado mucho desde el surgimiento de frameworks y librerías javascript como jQuery o Prototype. Lo que antes era una tarea ardua y pesada ahora es tarea de unas pocas líneas de código.

Para un ingeniero de Software, la tarea es ahora de encontrar una forma estándar de desarrollar dichos pasadores de forma que su solución se aplique a la mayoría (sino a todos) de los casos posibles de forma que no tenga prácticamente que modificar el código generado ante cambios de diseño, como número de elementos, paginadores, …

En el presente artículo vamos a estudiar los elementos que contiene un slider, unos principios básicos de funcionamiento y una serie de prácticas útiles en su programación.

Elementos del pasador

Podemos distinguir entre los siguientes elementos dentro de un Slider:

• Contenedor principal: Sirve para agrupar todos los elementos del Slider.
• Menú de navegación. Contiene el menú que nos va a permitir navegar por los elementos. Pueden ser botones de anterior y siguiente o un paginador, por ejemplo.
• Capa contenedora. Este elemento sirve para determinar cual es el área visible que se a ver en pantalla. El truco consiste en ponerle unas dimensiones fijas y la propiedad overflow a hidden, para ocultar todo el contenido que se salga de su interior. Además, tiene que tener posicionamiento relativo para poder especificar el posicionamiento absoluta del listado de elementos.
• Listado de elementos: Este elemento está dentro de la capa contenedora y tiene un tamaño que excede a su padre. Además, tiene posicionamiento absoluto para poder animar la posición del listado respecto a la capa contenedora.

Un ejemplo de este funcionamiento sería esto:

Maquetación del slider

La maquetación de los elementos anteriormente descritos podría ser así:

	<!-- Slider -->
	<div class=”slider”>

		 <!-- Capa contenedora -->
		 <div class=”contenedor”>

	<!-- Listado de elementos -->
				<ul>
					 <li><img src=”images/img1.jpg” alt=”image 1”></li>
					 <li><img src=”images/img2.jpg” alt=”image 2”></li>
					 <li><img src=”images/img3.jpg” alt=”image 3”></li>
				</ul>
		 </div>

		 <!-- Menu -->
		 <div class=”menu”>
				<ul>
					 <li><a href=”#”>Prev</a></li>
					 <li><a href=”#”>Next</a></li>
				</ul>
		 </div>
	</div>

A continuación, vamos a destacar una serie de consejos que deberían de cumplir todos los SLIDERs.

Programación en jQuery

Utlizando clases en lugar de IDs para referenciar a los SLIDERs podemos utilizar la siguiente técnica en jQuery para automatizar el comportamiento de todos ellos.

// Slider
$('.slider').each (function ())
{
	// Declaración de variables
	var slider = this ;


	// Código del Slider
	// …
}

Esto nos permite diseñar el comportamiento básico de todos ellos sin tener que programarlos uno a uno.

Utilizando el .animate de jQuery

El método de animación más recomendado es animar el posicionamiento del elemento respecto al contenedor. (la posición left o top, cuando sea un slider horizontal o vertical, respectivamente).

Lógicamente, para esto, nuestro contenedor tiene que tener posicionamiento relativo y el listado posicionamiento absoluto.

.slider .contendor {
	 position: relative;
}

.slider .contenedor ul {
	position: absolute;
	top: 0;
	left: 0;

	/* 
	 * Valor muy alto para permitir almacenar todos los elementos 
	 * Este valor debería ser height para sliders verticales 
	 */
	width: 10000px;
}

Para más información sobre posicionamiento, consulte este artículo

En el caso de sliders horizontales o verticales de tamaño fijo, donde cada item tiene el mismo tamaño, la forma más sencilla de animar es la siguiente:

1. Sacar el número de elementos en total

   			var numElementos = $(slider).find ('.contenedor ul li').size () ;
   		

2. Calcular la distancia entre dos elementos
   El mejor método para calcular esto es calcular la diferencia de posicionamiento entre el segundo elemento y el primero

   De esta forma, tenemos la distancia absoluta, sin tener que preocuparnos de márgenes, rellenos y la diferencia de cómo se interpretan estos valores dependiendo del navegador.

   			var distancia = 
   				$(slider).find ('li:first-child + li').position().left - 
   				$(slider).find ('li:first-child').position().left ;
   		

   ¡Atención! Si nos fijamos bien, es posible que el código anterior nos de un error en el caso de que haya menos de 2 elementos. Afortunadamente, en este caso, la lógica nos indica que un SLIDER no tiene ninguna función en este caso, por lo que lo más lógico es desactivarlo antes.

   			// Slider
   			$('.slider').each (function ())
   			{
   				// Declaración de variables
   				var slider = this ;
   				var numElementos = 
   				$(slider).find ('.contenedor ul li').size () ;
   
   
   				// ¿Es necesario un Slider?
   				if (numElementos < 2)
   				{
   					return ;
   				}
   
   
   				// Código del slider
   				// ...
   			}
   		

3. Calcular el número de elementos visibles.
   Que se puede calcular dividiendo el ancho (o alto) del contenedor entre la distancia entre los elementos.
4. Inicializar el paginador a 1

Cada vez que el usuario pulse sobre los botones de anterior y siguiente, entonces se calcula la posición left multiplicando la página actual por el ancho. Además, hay que actualizar el paginador aumentándolo o disminuyéndolo en una unidad según avancemos o retrodedamos.

Un ejemplo de la animación del listado de elementos es el siguiente:

// …

// Siguiente
$(this).find ('.next').click (function (e)
{
	// Evitamos el comportamiento del enlace
	e.preventDefault () ;
				

// Si hay más elementos a la derecha
	if (page < (numItems - numItemsVisible))
	{
		page++;
		$(slider).find ('ul').stop().animate ({left:"-" + (myWidth * (page - 1) + 'px')}, velocity) ;	
	}
}) ;
			
			
// Anterior
$(this).find ('.prev').click (function (e)
{
	// Evitamos el comportamiento del enlace
	e.preventDefault () ;
				
		
	// Sólo si hay elementos a la izquierda
	if (page > 1)
	{
		page--;
		$(slider).find ('ul').stop().animate ({left: "-" + (myWidth * (page - 1) + 'px')}, velocity) ;	
	}
}) ;	

// …

Otra cosa importante a tener en cuanta cuando realizamos la animación es la siguiente. Como estamos indicando la nueva posición del elemento de forma absoluta podemos realizar lo siguiente:

	$(slider).find ('ul').stop().animate ({ … }) ;

Con STOP estamos indicando que cualquier animación que hubiera previamente debe detenerse y sólo hacer caso a la nueva, de forma que no se van quedando las animaciones en cola y sólo tiene valor la última que ha pulsado el usuario.

Desactivar el menú si no hay elementos suficientes para realizar la animación

Una buena práctica es desactivar el menú de navegación cuando el número de elementos totales es inferior o igual al número de elementos visibles.

if (numElementos <= numVisible)
{
	$(slider).find (".menu").hide () ;
}

Comportamiento automático

Con el plugin de timer.js es posible hacer que el slider avance automáticamente Utilizando además atributos “data-” de HTML podemos especificar atributos al Slider para que se desactive este comportamiento automático una vez que el usuario realiza una acción manual sobre el Slider.

Por ejemplo… podemos añadir un atributo al comenzar cada Slider

$('.slider').each (function ())
{
	// Vars
	var slider = this ;

	// Definir la acción del menú
	$(slider).attr ('data-automatic', 1); 


	// Comportamiento automático
	$(slider).everyTime (5000, function() 
	{
		// ¿Está activado el comportamiento automático?
		if ($(slider).attr ('data-automatic') == '1')
		{
			// Código de animación
		}
 	}
 
	// En las acciones del menú lo desactivamos
	$(slider).find ('menu a').click (function (e)
	{
		$(slider).attr ('data-automatic', 0); 
	}) ;
}

Suele ser muy común confundirse con las distintas combinaciones que se pueden realizar entre tablas, por ello vamos a aclarar las diferencias entre cada una.

Existen las combinaciones internas de tablas donde cada registro de la tabla A se combina con otro de la tabla B que cumpla las condiciones.
Ej: Obtener los empleados del departamento de recursos humanos:

select * from empleados a, departamentos b where a.id_departamento=b.id

Esta consulta anterior se podría haber expresado de forma explicíta así:

select * from empleados a inner join departamentos b on a.id_departamento=b.id

Este tipo de combinaciones de tabas suele ser la más utilizada, pero si por ejemplo queremos un listado de todos los empleados, que tengan o no departamento asignado, entonces debemos realizar lo que se llama una combinación externa.
Ej: Obtener todos los empleados tengan o no departamento asignado:

select * from empleados a left join departamentos b on a.id_departamento=b.id

De esta forma se realizada un outer join por la izquierda, es decir nos traemos todos los registros de la tabla izquierda tengan o no correspondencia con la tabla derecha. Por el lado contrario un right join hace lo mismo pero trayendo todos los registros de la tabla derecha tengan o no correspondencia con la de la izquierda. Aquellos registros sin correspondencia entren para el campo correspondiente un valor NULL, es decir si un empleado no tiene departamento, entonces su valor es null.

Los ejemplos que hemos visto hasta ahora se pueden aplicar en MySQL y otros compatibles, pero en Oracle para realizar los outer join se realizan así:

select * from empleados a, departamentos b where a.id_departamento(+)=b.id

Es decir se coloca el (+) en el lado que queramos (left o right).

En los left o right join se puede ademas aplicar otras condiciones.
Ej: Obtener los empleados de los departamentos que tengan hipoteca:

select * from empleados a left join departamentos b on a.id_departamento=b.id where a.hipoteca=1

Cuando queremos programar o usar alguna aplicación que requiera autenticación y encriptación podemos hacer uso de certificados digitales. Para obtenerlo podemos hacer uso de un certificado obtenido mediante VeriSign, DNI electrónico o crear nosotros uno mismo.

En esta entrada de blog vamos a hacer esta última opción, que aunque no podrá ser verificado por ninguna Autoridad Certificadora (CA), nos servirá perfectamente mientras realizamos el desarrollo.

Antes de empezar, vamos a suponer que tenemos claros los conceptos del certificado digital, tales como:

• Concepto de clave pública privada
• Certificado digital
• Autoridad certificadora

También será necesario tener claro algunos conceptos muy básicos de Linux como moverse por archivos, permisos, edición, etc.

Instalar OpenSSL

Para empezar, necesitaremos OpenSSL instalado a ser posible la versión más actualizada posible, ya que si no, puede ser que alguno de los pasos no funcione correctamente.

En Windows lo descargaremos y descomprimiremos y en Linux para Ubuntu/Debian:

sudo apt-get install openssl

o para RedHat / CentOS:

yum install openssl

lo tendremos instalado.

Crear autoridad certificadora de certificados X.509

Prepararemos el entorno:

cd $HOME
mkdir CA
cd CA
mkdir certificados
mkdir privado
echo '01' > contador
touch certindex

Ahora generaremos el archivo de configuración OpenSSL

nano openssl.cnf

El contenido debería ser algo así:

# -----------------------
# Configuración inicial
# -----------------------

dir           = .    # Directorio de trabajo

[ ca ]
default_ca    = CA_default

[ CA_default ]
serial        = $dir/contador          # Contador de números de serie
database      = $dir/certindex         # Listado de certificados
new_certs_dir = $dir/certificados      # Directorio para los certificados generados
certificate   = $dir/cacert.pem        # Certificado raíz
private_key   = $dir/privado/cakey.pem # Clave privada del certificado raíz
default_md    = sha1                   # Digest usado
preserve      = no                     # Preserva el orden de los campos del DN
nameopt       = default_ca             # Muestra detalles del certificado
certopt       = default_ca             # Muestra detalles del certificado
policy        = policy_match           # Indica si los campos obligatorios  y/o
                                       # opcionales deben ser iguales al 
                                       # certificado raíz

# Política de recolección de datos frente al raíz
[ policy_match ]
countryName                 = match        
stateOrProvinceName         = match          
organizationName            = match
organizationalUnitName      = optional      
commonName                  = supplied     
emailAddress                = optional

# Configuración de certificados
[ req ]
default_bits       = 2048           # Tamaño de la clave en bits
default_keyfile    = key.pem        # Fichero de la clave privada
default_md         = sha1           # Digest
string_mask        = nombstr        # Caracteres permitidos en la clave
distinguished_name = req_distinguished_name  # Sección para el nombre DN
req_extensions     = v3_req         # Sección con mas extensiones que se 
                                    # añaden a la petición del 
                                    # certificado

# Distinguished Name. Datos públicos del certificado X.509 que identifican al propietario.
[ req_distinguished_name ]
0.organizationName          = Nombre de la organización
0.organizationName_default  = Imaginanet
organizationalUnitName      = Departamento
emailAddress                = Correo electrónico
emailAddress_max            = 40
localityName                = Ciudad
stateOrProvinceName         = Estado o provincia
countryName                 = Código ISO del pais (dos letras)
countryName_default         = ES
countryName_min             = 2
countryName_max             = 2
commonName                  = Nombre común (nombre del host o IP)
commonName_max              = 64

# Si se indica la opcion -x509 indica que se trata de un certificado CA raíz
# con autoridad para firmar o revocar otros certificados
[ v3_ca ]
basicConstraints       = CA:TRUE  
                                 
subjectKeyIdentifier   = hash     
authorityKeyIdentifier = keyid:always,issuer:always  

[ v3_req ]
basicConstraints            = CA:FALSE
subjectKeyIdentifier        = hash 

openssl req -new -x509 -extensions v3_ca -keyout privado/cakey.pem  -out cacert.pem -days 3650 -config ./openssl.cnf

Creando un certificado digital X.509 en base a nuestra autoridad certificadora

openssl req -new -nodes -out imaginanet-cert.pem -config ./openssl.cnf

openssl ca -out certificado-imaginanet.pem -config ./openssl.cnf -days 3650  -infiles imaginanet-cert.pem

Donde el archivo imaginanet-cert.pem corresponde a nuestra clave privada y certificado-imaginanet.pem a la pública.

Utilidades

No debemos olvidar que los certificados generados no serán validos en un entorno real de producción ya que nuestra CA no será reconocida por los navegadores o el KeyStore de Java, pero si que nos vendrá bien como entorno de desarrollo para:

• Poner un servidor web en modo seguro HTTPS
• Realizar firmas sobre ficheros o correos mediante cualquier lenguaje de programación

Añadiendo la autoridad certificadora y nuestro certificado digital a nuestro navegador: Firefox

Supongamos que hemos puesto en marcha nuestro servidor web Apache con HTTPS y el certificado digital creado. Para que el navegador nos confirme que es una página válida deberemos añadir la autoridad certificadora a la lista de autoridades certificadoras válidas. En el caso de Firefox:

Editar -> Preferencias -> Avanzado -> Cifrado -> Ver certificados -> Autoridades -> Importar

y seleccionaremos el archivo cacert.pem

Si por el contrario quisiéramos firmar digitalmente con el certificado creado, deberemos añadir el certificado digital yendo a:

Editar -> Preferencias -> Avanzado -> Cifrado -> Ver certificados -> Sus certificados -> Importar

y seleccionar la clave privada imaginanet-cert.pem e introducir la contraseña para ser guardada en el KeyStore de Firefox.

Todo documento firmado con este certificado será no válido ya que el servidor que lo firme no reconocerá a la autoridad certificadora, pero podemos añadir dicho certificado al KeyStore del lado del servidor, cosa que veremos en próximas entradas del blog.

Convertir certificados .pem / .cert (X.509) a .pfx (PKCS12)

En ocasiones es necesario el uso de certificados en formato PKCS12 de extensión PFX, como por ejemplo para la librería iText para Java / C#. Lo podemos hacer mediante el siguiente comando con OpenSSL 0.9.8k (si tenemos una versión inferior deberemos actualizar ya que no funciona en todas las aplicaciones el fichero generado):

openssl pkcs12 -inkey private_key.pem -in public_cert.cert -export -out cert.pfx

Referencias

Parte de este artículo se ha basado en http://www.linuxtotal.com.mx/ssl_apache.html

Más información:

• X.509
• PKCS7
• PKCS12

< span style=" display: inline-block; margin-right: -1px; vertical-align: middle; height:
400px; width: 1px; ">< /span>

El término NOSQL aplicado a bases de datos no se refiere a que no se utilice el lenguaje sql, si no que significa "not only sql". Estas bases de datos son no relacionales y no proporcionan garantías ACID, tampoco suelen tener esquemas fijos de tablas ni sentencias join. El término ACID hace referencia a un conjunto de características requeridas para que una serie de instrucciones puedan ser consideradas como una transacción.

Estas bases de datos tienen la ventaja de su rapidez y escalabilidad horizontal y los inconvenientes de que no garantizan las transacciones. Dependiendo del tipo de proyecto, puede que se adapte mejor una base de datos de este tipo o una relacional, todo depende de las necesidades del proyecto.

En PHP nos encontramos con distintos productos que utilizan esta tecnología, las más conocidas son de tipo documental y de tipo clave-valor. Bases de datos documentales tenemos por ejemplo CouchDB y MongoDB, en cuando a bases de datos de tipo clave-valor quizás la más conocida sea Cassandra, creada por y para Facebook. Todas estos ejemplos son de código abierto.

En este artículo nos centraremos en MongoDB, una bases de datos de tipo documental en la que los datos se guardan en disco en formato BSON (JSON binario). Es muy sencillo trabajar con ella, al no tener que definir esquemas fijos, la lógica del modelo es la que establece como se guardan los datos. En una misma tabla podemos tener datos con distintos formatos, lo que demuestra la potencia de esta tecnología. Otra de sus virtudes es la facilidad con la que se puede escalar sin apenas configurar nada, simplemente añadiendo nodos nuevos. Si se prevé que una aplicación vaya a ser usada por multitud de usuarios a la vez y las transacciones no sean un problema, seguramente esta sea la solución adecuada.

Veamos un ejemplo de utilización del driver de mongodb para php, con las operaciones básicas.

	$m = new Mongo(); // connect
	$db = $m->selectDB("example");
	$collection = $db->users;

	// Añadir un registro
	$obj = array( "username" => "Pedro", "password" => md5("mipassword") );
	$collection->insert($obj);


	// Añadir otro registro con un esquema diferente
	$obj = array( "username" => "Juan", "password" => md5("otropassword"), "year" => "1960" );
	$collection->insert($obj);

	// Buscar todos los elementos de la coleccion
	$cursor = $collection->find();

	// Iterar a través de los resultados
	foreach ($cursor as $obj) {
		echo $obj["username"] . "\n";
	}

	// Buscar el usuario con nombre Juan
	$user = $collection->findOne(array('username' => 'Juan')));

	// Buscar usuarios con el campo año  > 1950
	$users = $collection->find(array('year' => array( '$gt' => 1950)));


	// Usar javascript para reducir un resultado, conseguiremos los usuarios que se llamen juan o que su año sea < 1950
	$js = "function() {
		return this.username == 'Juan' || this.year < 1950;
	}";
	$users = $collection->find(array('$where' => $js));

Para reducir el ancho de banda en nuestro servidor, a costa de cargar la cpu un poco más, podemos redimensionar las imágenes que estamos sirviendo con un sencillo script de PHP. Vamos a ver dos métodos, uno con la librería gd y otro llamando a imagemagick.

Librería GD:

Usaremos un archivo php para hacer la carga de las imágenes, lo llamaremos thumb.php y lo colocaremos en la raíz de nuestra web. Lo llamaremos de la siguiente forma:

        <img src="/thumb.php?file=/public/image1.png&width=100" alt="miniatura" />

Le pasamos 2 parámetros al script:

file: la ruta a la imagen que queremos redimensionar.

width: la nueva anchura.

Lo primero que tenemos que hacer el calcular las nuevas dimensiones de la imagen, en nuestro ejemplo estamos marcando la anchura, y la altura se calcula a partir de ésta. Cuando ya tenemos las nuevas dimensiones vemos en qué formato está y luego escribimos las cabeceras correspondientes y la mostramos. El código del archivo thumb.php sería el siguiente:

        $file = $_GET["file"];
        $width = $_GET["width"];

        // Ponemos el . antes del nombre del archivo porque estamos considerando que la ruta está a partir del archivo thumb.php
        $file_info = getimagesize("." . $file);
        // Obtenemos la relación de aspecto
        $ratio = $file_info[0] / $file_info[1];

        // Calculamos las nuevas dimensiones
        $newwidth = $width;
        $newheight = round($newwidth / $ratio);
        
        // Sacamos la extensión del archivo
        $ext = explode(".", $file);
        $ext = strtolower($ext[count($ext) - 1]);
        if ($ext == "jpeg") $ext = "jpg";

        // Dependiendo de la extensión llamamos a distintas funciones
        switch ($ext) {
                case "jpg":
                        $img = imagecreatefromjpeg("." . $file);
                break;
                case "png":
                        $img = imagecreatefrompng("." . $file);
                break;
                case "gif":
                        $img = imagecreatefromgif("." . $file);
                break;
        }
        // Creamos la miniatura
        $thumb = imagecreatetruecolor($newwidth, $newheight);
        // La redimensionamos
        imagecopyresampled($thumb, $img, 0, 0, 0, 0, $newwidth, $newheight, $file_info[0], $file_info[1]);
        // La mostramos como jpg
        header("Content-type: image/jpeg");
        imagejpg($thumb, null, 80);

Imagemagick

Si usamos imagemagick tenemos las ventajas de ahorrar consumo de memoria y los inconvenientes de que tenemos que tenerlo instalado en nuestro servidor. En caso de tenerlo disponible, el script resultante sería muy parecido al anterior

        $file = $_GET["file"];
        $width = $_GET["width"];

        // Ponemos el . antes del nombre del archivo porque estamos considerando que la ruta está a partir del archivo thumb.php
        $file_info = getimagesize("." . $file);
        // Obtenemos la relación de aspecto
        $ratio = $file_info[0] / $file_info[1];

        // Calculamos las nuevas dimensiones
        $newwidth = $width;
        $newheight = round($newwidth / $ratio);

        // No necesitamos sacar la extensión ya que el comando convert ya detecta el formato
        header("Content-type: image/jpeg");
        passthru("convert -scale ".($newwidth)."x".($newheight)."! "./".$file."" JPG:-");

Si hacemos uso de distintas monedas en nuestra página web para mostrar precios orientativos, necesitaremos mantener actualizado el cambio de moneda por la fluctuación diaria entre euros, dólares, yenes, etc.

El Banco Central Europeo genera un archivo XML que es actualizado a diario. Este XML lo podemos procesar y actualizar nosotros para guardarlo en un archivo de configuración o base de datos mediante SimpleXML y una tarea programada / cron.

El código PHP haciendo uso de SimpleXML sería el siguiente:

$xml = simplexml_load_file("http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml");
foreach ($xml->Cube->Cube->Cube as $c) {
	$attr = $c->attributes();
	echo "Un euro equivale a ".$attr[1]." ".$attr[0]."
";
}

Donde la variable $attr[0] equivale el código ISO de la moneda y $attr[1] equivale al valor de un euro en dicha moneda.

A partir de aquí, deberemos procesar el valor de la moneda como nos interese.

Más información:

• Información para desarrolladores del Banco Central Europeo

RewriteEngine On

RewriteCond %{HTTP_HOST} ^midominio.com$ [NC]
RewriteRule ^(.*)$ http://www.midominio.com/ [R=301,L]

RewriteCond %{HTTP_HOST} ^www.midominio.es$ [NC]
RewriteRule ^(.*)$ http://www.midominio.com/ [R=301,L]
RewriteCond %{HTTP_HOST} ^midominio.es$ [NC]
RewriteRule ^(.*)$ http://www.midominio.com/ [R=301,L]

RewriteCond %{HTTP_HOST} ^www.midominio.net$ [NC]
RewriteRule ^(.*)$ http://www.midominio.com/ [R=301,L]
RewriteCond %{HTTP_HOST} ^midominio.net$ [NC]
RewriteRule ^(.*)$ http://www.midominio.com/ [R=301,L]

redirect 301 /antiguo/antiguo.html http://www.midominio.com/nuevo.html

En ocasiones es necesario realizar un cambio de servidor para nuestras webs. El gran problema es que el traspaso no sólo implica mover los archivos de la web, si no es mucho más: cuentas de correo con sus emails, bases de datos, configuración DNS, configuración de la quota del dominio, etc.

Mover los archivos mediante FTP y realizar una importación de la base de datos es posible, pero cuando se tratan de unos cuantos miles de dominios, bases de datos y tener que crear de nuevo las cuentas de correo (y perder los correos guardados en el servidor), resulta realmente pesado e ineficiente.

Administrador de migraciones de Plesk

Si nuestro servidor tiene instalado el panel de control Plesk, el proceso se simplifica de gran manera, ya que él hará por nosotros toda la transferencia de archivos y configuración por nosotros de los dominios entre los hosts que deseemos.

En primer lugar, pulsaremos sobre el botón "Administrador de migraciones" de la pantalla de inicio

Entonces entraremos en la pantalla principal de las migraciones de Plesk, con las migraciones ya hechas, en proceso y su estado.

Pulsamos sobre "Iniciar Migración nueva" para iniciar una nueva migración que nos llevará a la introducción de credenciales en el servidor origen: dirección IP y cuenta de administrador (root en servidores Linux y Administrador en servidores Windows).

En esta pantalla es importante estar atentos  a la parte inferior la opción de transferir todos los dominios o sólo los dominios seleccionados.

En este punto, Plesk conectará con el servidor origen y en la opción inferior podremos decidir sin transferir sólo correo, archivos o todo. En nuestro caso hemos seleccionado sólo migrar algunos dominios.

En la última pantalla de migración, Plesk nos pregunta sobre qué hacer en caso de conflictos en la migración. Por ejemplo puede ser que si la configuración del servidor sólo permite una base de datos por dominio y migramos un dominio que contiene dos, creará un conflicto. La mejor opción en este punto es mantener las opciones por defecto.

Finalmente la migración se inicia y volvemos a la pantalla inicial del asistente de migraciones, donde podemos ver una barra de progreso en la migración que acabamos de realizar. En función de la velocidad y peso de los archivos a transferir durará más o menos.

Tras terminar, es posible que la migración se haya completado con advertencias, aunque por lo general no suelen ser importantes. Podemos ver el informe final de la migración y liberar el espacio ocupado por ella en el disco duro del servidor destino clickando sobre ella.

Algunas veces nos interesa tener controlada la creación de objetos por motivos como por ejemplo el ahorro de memoria. Una forma de hacer esto es utilizando el patrón de diseño "Singleton". Vamos a estudiar un ejemplo en PHP para ver su utilidad, funcionamiento e implementación.

Un claro ejemplo de la utilidad de este patrón sería una clase para trabajar con bases de datos. Si cada vez que necesitemos conectarnos tenemos que crear una instancia del objeto, estaríamos aumentando el consumo de memoria de nuestra aplicación de una manera innecesaria. Lo que normalmente suele hacer la gente es utilizar una variable global que sería una instancia de ese objecto, pero el uso de variables globales no es recomendado por multitud de razones que darían para otro "Post".

Para conseguir nuestro objetivo lo primero que tenemos que hacer es no permitir crear instancias del objeto, para esto basta con "ocultar" el constructor declarándolo como "private". Lo siguiente que necesitamos es crear un método estático que nos devuelva una instancia de ese objeto, si existe una ya creada la devolvemos y si no creamos una nueva.

Veamos un ejemplo de implementación:

	class Database {
		static private $instance = null;
		
		private function __contruct() {}
		
		public static function getInstance() {
			if (self::$instance == null) {
				self::$instance = new Database();
			}
			return self::$instance;
		}
		
		public function connect($dsn) {
			...
		}
		
		public function query($sql) {
			...
		}
		
		public function executeQuery() {
			...
		}
		
		public function getResult() {
			...
		}
		
		public function disconnect() {
			...
		}
	}

Éste sería un prototipo de una clase para trabajar con una base de datos. Como podemos ver, ya no podremos hacer "$db = new Database();", por lo que nos aseguramos el ahorro de memoria. En su lugar para obtener el objeto que deseamos tendremos que hacer:

	...
	$db = Database::getInstance();
	$db->connect($dsn);
	...
	...

Siempre que llamemos al método estático "getInstance()" se comprobará que no exista ya una instancia de este objeto, si no existe crearemos una, la guardaremos como una propiedad estática de la clase y la devolveremos, muy simple.

Otra forma de ejecutar el código anterior sin tener que inicializar ninguna variable:

	...
	Database::getInstance()->connect($dsn);
	...

Como se puede apreciar, utilizando este patrón adecuadamente, a parte de ahorrar memoria, tendríamos un código más limpio y libre de variables globales, que pueden ser modificadas por accidente en otros procesos

div.marco div.contenido {
   width: 172px;
   height: 80px;
   overflow: hidden;
   margin-left: 20px;
}
div.marco div.contenido div.carril {
   position: relative;
   white-space: nowrap;
}
div.marco div.contenido div.carril div.mini {
   display: inline-block;
   _display: inline;
   #display: inline;
   width: 80px;
   height: 80px;
   overflow:hidden;    
}

       if (nitems <= itemsxpag) {
           $(this).find("a.next").remove();
           $(this).find("a.prev").remove();
       }
       else {
           $(this).parent().find("a.next").click(function (e) {
               e.preventDefault();

               if (pagactual == npages)
                   return;
               $(self).parent().find("a.prev").removeClass("nomore");
               
               ul.animate({left:"-=" + ancho + "px"});
               pagactual++;
               
               if (pagactual == npages)
                   $(this).addClass("nomore");
           });
           $(this).parent().find("a.prev").click(function (e) {
               e.preventDefault();

               if (pagactual == 1)
                   return;
               $(self).parent().find("a.next").removeClass("nomore");
               
               ul.animate({left:"+=" + ancho + "px"});
               pagactual--;
               if (pagactual == 1)
                   $(this).addClass("nomore");
           });
       }

    function validarEmail(valor) {                    
       if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01-x09x0bx0cx0e-x7f])+)])/.test(valor)){
           return (true)
       } else {
           return (false);
       }
   }

function letraDni(numeros) {
    var letras = "TRWAGMYFPDXBNJZSQVHLCKE";
    return letras.charAt(numeros % 23);
}

function calculaDigito(valores) {
     pesos = new Array(1, 2, 4, 8, 5, 10, 9, 7, 3, 6);
     d = 0;
     for (i=0; i<=9; i++) {
       d += parseInt(valores.charAt(i)) * pesos[i];
     }
     d = 11 - (d % 11);
     if (d==11) d=0;
     if (d==10) d=1;
     return d;
}

Completamos el listado de comandos útiles para servidores web Linux con algunos comandos propios para distribuciones Ubuntu / Debian:

Firewall:

Poner en marcha el firewall

ufw enable

Parar firewall

ufw disable

Estado

ufw status

Bloquear puerto:

ufw deny port

Bloquear tráfico procedente de cierta IP:

ufw deny from ip

Permitir puerto:

ufw allow port

Manejo de paquetes:

Actualizar lista de paquetes disponibles

apt-get update

Actualizar todos los paquetes (hacer con cuidado en un servidor en producción):

apt-get upgrade

Actualizar a la siguiente versión de la distribución (hacer con cuidado en un servidor en producción):

apt-get dist-upgrade

Buscar un paquete disponible:

apt-cache search paquete

Instalar un paquete:

apt-get install paquete

Eliminar un paquete:

apt-get remove paquete

Intentar solucionar conflictos y dependencias rotas:

dpkg –configure -a

Artículos relacionados

• Comandos útiles para servidores web Linux 
• Comandos útiles para servidores web RedHat / CentOS

Completamos el listado de comandos útiles para servidores web Linux con algunos comandos propios para distribuciones RedHat / CentOS:

Manejo de paquetes:

Buscar paquetes

yum list paquete

Instalar paquete

yum install paquete

Actualizar paquete

yum update paquete

Borrar paquete

yum remove paquete

Servicios

Asociar un servicio al inicio

chkconfig vsftpd on

Artículos relacionados

• Comandos útiles para servidores web Linux
• Comandos útiles para servidores web Ubuntu / Debian

Comandos generales:

Conectar a través de SSH

ssh root@direccionip

Ejecutar un comando con privilegios de root (si no lo somos)

sudo comando

Obtener versión del kernel

uname -a

Espacio en disco ocupado por un archivo o carpeta

du -hlsc carpeta_o_archivo

Espacio libre en los sistemas de ficheros

 df   

Empaquetar

tar cvf paquete.tar directorio_a_empaquetar

Desempaquetar

tar xvf paquete.tar

Servicios:

Iniciar un servicio

/etc/init.d/service start

Parar un servicio

/etc/init.d/service stop

Estado de un servicio

/etc/init.d/service status

Reiniciar servicio

/etc/init.d/service restart

Interfaces de red:

Información de las interfaces

ifconfig

Parar una interfaz

ifdown interfaz

Levantar una interfaz

ifup interfaz

Editar archivo de configuración de las interfaces

nano /etc/network/interfaces

Editar archivo de servidores de nombres

nano /etc/resolv.conf

Editar archivo hosts

nano /etc/hosts

MySQL

Exportar base de datos

mysqldump --user USUARIO --password=CONTRASEÑA nombre_base_datos > archivo.sql

Exportar base de datos

mysqldump -u USUARIO -p nombre_base_datos > archivo.sql

Importar base de datos (debe existir antes esa base de datos)

mysql -u USUARIO -p nombre_base_datos < archivo.sql

Artículos relacionados

• Comandos útiles para un servidor web Ubuntu / Debian
• Comandos útiles para un servidor web CentOS / RedHat

Podemos obtener fácilmente datos del muro de facebook con PHP gracias al "graph api". Lo único que tenemos que hacer es hacer una llamada al API y procesar los datos que nos devuelve en formato JSON. PHP nos ofrece herramientas para hacer esto de la forma más sencilla posible

Vamos a ver un ejemplo de como obtener los datos del muro de Imaginanet. Para ello debemos saber el identificador de la página (o del usuario en caso de que el muro que nos interese sea el de una persona y no una página). Ese identificador lo obtenemos, por ejemplo de la url de la página. Si accedemos a la página de facebook de Imaginanet, la url que tenemos es la siguiente: http://www.facebook.com/pages/Imaginanet/293803966478. El número que aparece al final es el identificador que queremos.

	$id_usuario = "293803966478";
	$respuesta = file_get_contents("https://graph.facebook.com/" . $id_usuario . "/feed");

En la variable "$respuesta" tenemos los datos que queremos en formato JSON, para transformarlos en un array asociativo que nos permita manejarlo de forma sencilla solo tenemos que hacer lo siguiente:

	$datos = json_decode($respuesta,true);

Ahora en la variable "$datos" tenemos un array asociativo con los datos del muro.

Si por ejemplo quisieramos sacar las últimas 4 fotos que haya en las publicaciones del muro, haríamos lo siguiente:

	$facebook = array();
	$i = 0;
	foreach ($datos["data"] as $value) {
		if (trim($value["picture"]) != "") {
			$facebook[$i]["src"] = trim($value["picture"]);
			$facebook[$i]["titulo"] = trim($value["name"]);
			$facebook[$i]["texto"] = trim($value["description"]);
			$i++;
		}
		if ($i>4) break;
	}
	$html = "";
	foreach ($facebook as $key => $value) {
		$html .= '
			

				
'.$value["titulo"].'
				<img src="' . $value["src"] . '" alt="' . $value["titulo"] . '" />
				
'.$value["texto"].'
			
		';
	}

	echo $html;

Hay que tener en cuenta que esto sólo funcionaría para muros públicos, de otra forma tendríamos que utilizar algún método de autenticación. Podemos utilizar alguna de las clases PHP que nos provee facebook, para trabajar con esta API.

• Informes de algunos meses del año.
• Múltiples imágenes o vídeos.
• PDFs asociados a una página.
• Etc.

Con PHP podemos comprimir en formato ZIP de varias maneras, pero vamos a destacar dos:

• Nativamente con PHP, mediante su librería ZipArchive
• Con librerías externas, como PclZip

Comprimiendo archivos en ZIP con PHP mediante ZipArchive

Si tu servidor tiene una versión superior a 5.2.0 y la extensión zlib podemos hacer uso de ella.

Para saber si tenemos los requisitos, debemos usar la función phpinfo() en un archivo PHP y nos mostrará toda la información relativa al servidor.

Por ejemplo:

<?php

phpinfo();

?>

A continuación podemos usar la librería de la siguiente manera para comprimir los archivos a.txt y b.txt en el mismo archivo ZIP:

<?php

$zip = new ZipArchive();

$filename = 'test.zip';

if($zip->open($filename,ZIPARCHIVE::CREATE)===true) {
        $zip->addFile('a.txt');
        $zip->addFile('b.txt');
        $zip->close();
        echo 'Creado '.$filename;
}
else {
        echo 'Error creando '.$filename;
}

?>

Comprimiendo archivos en ZIP con PHP mediante PclZip

En ocasiones no tenemos acceso a la instalación y modificación de paquetes y configuración de nuestro servidor, por lo que una buena opción es el uso de la librería PclZip.

Debemos descargar la librería y tras ello la guardaremos en una carpeta, por ejemplo lib.

<?php

require('lib/pclzip.lib.php');
$zip = new PclZip('test.zip');
$zip->create('a.txt,b.txt');

?>

Enlaces relacionados

• PHP.net: ZipArchive
• PclZip

	@font-face {
		font-family: "Futura";
		font-style: normal;
		font-weight: normal;
		src: local("?"), url("/fonts/futurastd-light-webfont.woff") format("woff"), url("/fonts/futurastd-light-webfont.ttf") format("truetype");
	}

	p {
		font-family: Futura;
	}

	Cufon.replace('h1');
	Cufon.replace('#sub1');

	
Texto a remplazar con la nueva fuente

Las expresiones regulares son un mecanismo que nos permite realizar búsquedas y reemplazos de textos complejos. 

Por ejemplo podríamos sustituir todas las ocurrencias del texto "www.yahoo.com" por "www.google.com" utilizando la siguiente expresión regular en javascript: 

texto.replace(/www.yahoo.com/gi,"www.google.com")

El lenguage PERL es el que ha hecho crecer a las expresiones regulares hasta llegar a ser lo que conocemos hoy. En PHP y javascript se contruyen los patrones de forma similar, con Javascript podemos aprovecharnos de ellas mediante los métodos del objeto string, y en php con funciones como preg_search o preg_replace.

Algunas expresiones regulares útiles:

Suele ser muy común en una web el envío de correos electrónicos mediante la función mail de PHP, ahora bien puede ser que a veces necesitemos leer correos desde PHP, ya sea para crear una aplicación de webmail, o para mostrar al usuario sus correos recibidos, o cualquier otra funcionalidad que se nos ocurra.

Para lograr esto, tenemos dos formas de hacerlo:
1) Implementar el protocolo directamente a través de sockets.
Puede que sea la forma más laboriosa pero en algunos casos, puede ser útil. Como hemos dicho se trata de abrir un socket al servidor de correo y comunicarnos con él utilizando el protocolo requerido, donde los más comunes son POP3 e IMAP.

Por ejemplo, para crear el socket haríamos:

$server = "ip del servidor";
$user = "usuario de correo";
$pass = "contraseña del correo";
$connection = fsockopen($server, 110, $errno, $errstr, 30);

fputs($connection, "user $usern");
echo fgets($connection)."
";
fputs($connection, "pass $passn");
echo fgets($connection)."
";

fputs($connection, "RETR 2n");
$total = 0;
$bloque = 1000;
while ($total < $tamano) {
    echo fread($connection, $bloque);
    $total = $total + $bloque;
}

$mbox = imap_open ("{localhost:110/pop3}INBOX", "user_id", "password");

$cabecera = imap_headerinfo($mbox, numero_mensaje)
$from = $cabecera->from;
$subject = $cabecera->subject;

Cuando tenemos una aplicación web, es muy común que tengamos que generar un archivo PDF con datos extraídos de una base de datos para crear por ejemplo: informes, catálogos, facturas, documentos, etc.

El uso de algunas de estas librerías para PHP puede llegar a ser demasiado complicado, así que vamos a hacer uso de la librería mPDF que nos permite generar PDFs en base a un código HTML y CSS.

Los resultados que vamos a obtener van a ser muy buenos en función del código HTML usado, aunque también podemos usar otras librerías más complejas pero con resultados más profesionales como es el caso de ezPDF, aunque para un sencillo ejemplo mPDF nos será suficiente.

Generando PDFs dinámicos con mPDF en base a un código HTML y CSS

<?php

$cabecera = "<span><b>Mi primer documento PDF dinámico con mPDF</b></span>";

$cuerpo = "<html>
<body>
<br/>
<h1>¡Hola mundo!</h1>
<br/>
<div>
<p>A continuación mostramos algunos <u>datos</u></p>
<table style='width:200px;text-align:center;'>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>						
</tr>
<tr>
<td>3</td>
<td>4</td>						
</tr>
</tbody>
</table>
</div>
<div>
<p>Aquí podemos introducir datos dinámicos desde PHP</p>
</div>
</body>
</html>";

$pie = "<span>
<a href=\"http://www.imaginanet.com\">Diseño y Programación Web: Imaginanet</a>
 - <i>Creado ".date("d/m/Y")."</i>
</span>";

include("mpdf/mpdf.php");
$mpdf=new mPDF();
$mpdf->SetHTMLHeader($cabecera);
$mpdf->SetHTMLFooter($pie);
$mpdf->WriteHTML($cuerpo);
$mpdf->Output();

?>

Como podemos ver, es más complicado la maquetación que el uso de PHP. En la maquetación podemos hacer uso de todos los tags HTML, aunque no tienen un comportamiento 100% al de un navegador, así que deberemos adaptarnos a la salida que mPDF produce.

Podéis ver el resultado final del documento PDF generado dinámicamente mediante PHP en este enlace.

Automatizando nuestro script

Linux

50 8 * * 1 root php /var/www/vhosts/test-domain.yy/httpdocs/cron/generacion_pdf.php

Esto ejecutaría todos los lunes a las 8:50 de la mañana el archivo /var/www/vhosts/test-domain.yy/httpdocs/cron/generacion_pdf.php como el usuario root.
 

Plesk

Dentro del dominio donde corra nuestro script, tenemos un apartado de tareas programadas que guarda el mismo formato que el crontab de Linux.

Enlaces relacionados

• mPDF
• ezPDF
• Cron

<table>
<tr>
<td>
    <table><tr><td>Cabecera</td></tr></table>
        </td>
    </tr>
    <tr>
        <td>
    <table><tr>
<td>Menu Lateral Izquierdo</td>
<td>Contenido</td>
</tr></table>
        </td>
    </tr>
    <tr>
        <td>
    <table><tr><td>Pie</td></tr></table>
        </td>
    </tr>
</table>

<div id="cabecera">
    Cabecera
</div>
<div id="menulateral">
    Menu Lateral Izquierdo
</div>
<div id="contenido">
    Contenido
</div>
<div id="pie">
    Pie
</div>

#cabecera {
    width: 600px;
    height: 100px;
    background: green;
}

#menulateral {
    float: left;
    width: 250px;
    height: 100px;
    background: yellow;
}
#contenido {
    float: left;
    width: 350px;
    height: 200px;
    background: blue;
}

#pie {
    width: 600px;
    height: 50px;
    background: cyan;
    clear: left;
}

<div id="contenedor">
    ...código de capas anterior...
</div>

#contenedor {
    width: 600px;
    margin: 0 auto;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    ...código anterior de capas...
</body>
</html>

Para crear aplicaciones relacionadas con youtube tenemos 2 APIs, API de datos y API del reproductor:

- El API de datos está orientado a desarrolladores acostumbrados a programar en el lado del servidor. Yotube nos proporciona clases implementadas en varios lenguajes de programación que nos podemos descargar.

- El API del reproductor nos permite configurar las opciones del reproductor de youtube en nuestra web, creando incluso nuestros propios controles.

En este artículo nos vamos a centrar en una descripción general del API de datos.

Esta API se basa en el protocolo REST, con peticiones HTTP y respuesta en formato XML, aunque también podemos obtener la respuesta en formato JSON añadiento a la petición el parámetro alt=jsonc.

Para autenticarnos disponemos de 3 esquemas: AuthSub, OAuth o ClientLogin.

- AuthSub: Para crear una aplicación web que permita a los usuarios vincular vídeos, comentarios, puntuaciones, contactos u otra información con sus propias cuentas de YouTube.

- OAuth: Este método se utiliza con la misma finalidad que el anterior pero utilizando un sistema estándar basado en el protocolo abierto OAuth

- ClientLogin: Para asociar todas las acciones de tu aplicación a una cuenta de Youtube.

Si tu aplicación requiere que sus usuarios introduzcan su usuario y contraseña de youtube, no deberías usar el método ClientLogin.

Para crear tu aplicación también necesitarás de una clave de desarrollador y un ID de cliente que puedes obtener aquí

En la guía de referencia del API tienes información detallada sobre todas las acciones que puedes realizar y sobre los códigos de respuesta HTTP para solicitudes del API de datos de YouTube.

Ahora vamos a ver unos ejemplos con PHP y curl de lo que podemos hacer utilizando este API:

Añadir un vídeo favorito a tu canal:

En este ejemplo suponemos que estamos utilizando el método de autenticación ClientLogin. En las cabeceras de la petición POST debemos pasarle el método de autenticación y el "authtoken" que obtenemos al autenticarnos (AUTH_TOKEN), la clave de desarrollador (DEVELOPER_KEY). También le estamos indicando que queremos los datos en formato JSON. En la variable $data tenemos que poner el id del video de youtube que queremos añadir como favorito a nuestro canal. como estamos utilizando un protocolo REST tenemos que enviarlo en el formato correspondiente, por eso las claves del array deben ser ["data"]["video"]["id"], este formato será el mismo que recibamos cuando hagamos una petición GET para obtener los videos favoritos de nuesto canal.

	$data["data"]["video"]["id"] = 'ID_VIDEO';

	$ch = curl_init();

	curl_setopt($ch,CURLOPT_URL,'http://gdata.youtube.com/feeds/api/users/TU_CANAL/favorites?alt=jsonc');

	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array(
			"Host: gdata.youtube.com",
			"Content-Type: application/json",
			"Authorization: GoogleLogin auth=AUTH_TOKEN",
			"GData-Version: 2,
			"X-GData-Key: key=DEVELOPER_KEY"
	));
	$response = curl_exec($ch);
	$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
	curl_close($ch);

Borrar un vídeo favorito de tu canal:

Para borrar un video favorito de nuestro canal es muy simple, solo tenemos que enviar una petición DELETE a la url del video correspondiente. Para referenciar al video en la url utilizamos su ID.

	$ch = curl_init('http://gdata.youtube.com/feeds/api/users/TU_CANAL/favorites/ID_VIDEO');
	curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "DELETE");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array(
			"Host: gdata.youtube.com",
			"Content-Type: application/atom+xml",
			"Authorization: GoogleLogin auth=AUTH_TOKEN",
			"X-GData-Key: key=DEVELOPER_KEY"
	));
	$response = curl_exec($ch);
	$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
	curl_close($ch);

Obtener los vídeos favoritos de tu canal:

Obtener un listado con los vídeos favoritos de tu canal es mucho más simple. No necesitamos estar autenticados, pues esta acción es pública. Así que podemos utilizar la función de php "file_get_contents". Si pasamos por GET el parámetro alt=jsonc, recibiremos la respuesta en JSON, por lo que parsearla será mucho más sencillo, solo hay que aplicarle la función "json_decode" a la respuesta.

	$response = file_get_contents("http://gdata.youtube.com/feeds/api/users/TU_CANAL/favorites?v=2&alt=jsonc");
	$response = json_decode($response,true);

En la guía de referencia del API tenemos los códigos de respuesta de estas acciones, además de una explicación más detallada de lo que podemos hacer con esta API. En estos ejemplos hemos utilizado php y curl para hacer las peticiones, pero desde la web del API podemos descargarnos clases para distintos lenguajes de programación que nos facilitarán esta tarea.

La llamada a Google Weather es una simple llamada a una URL pasando el parámetro de ciudad, por ejemplo http://www.google.com/ig/api?weather=Madrid devolviéndonos un XML (podemos probar a poner esta dirección en un navegador web para hacernos una idea).

El siguiente paso sería procesar el XML devuelto y mostrar los datos que nos interesen. Por ejemplo vamos a mostrar un código en PHP para el API de Google Weather usando la librería SimpleXML:

<?php
	// Proceso
	$ciudad = "Barcelona";

	$xml = simplexml_load_file("http://www.google.com/ig/api?weather=".$ciudad);

	if($xml===false) { // Fallo al contactar con Google
			return null;
	}

	$current = $xml->xpath("/xml_api_reply/weather/current_conditions"); 
	if(count($current)==0) { // Ciudad errónea
			return null;
	}

	$temperatura_centigrados = $current[0]->temp_c["data"];
	$humedad = $current[0]->humidity["data"];
	$condiciones = $current[0]->condition["data"];
	$icono = $current[0]->icon["data"];
	
	// Vista
	echo 'Temperatura: '.$temperatura_centigrados.'&deg;<br/>';
	echo $humedad.'<br/>';
	echo 'Condiciones: '.$condiciones.'<br/>';
	echo '<img src="http://www.google.com/'.$icono.'" alt="'.$condiciones.'" title="'.$condiciones.'"/>"';
	
?>

Por último, para hacer nuestra aplicación resistente a fallos, recomendamos ejecutar este script desde una llamada AJAX, ya que si Google fallara o tardara en responder, nuestra página tardaría o fallaría al servirse.

       

           Video 1
           Video 2
       
       

           
       
       

           
       

Un servidor REST (Representational State Transfer) puede ser muy útil para la creación de aplicaciones HTML5. Utilizaríamos el servidor para el módelo de datos y el cliente (navegador) para la lógica de la aplicación, realizando llamadas ajax al servidor que devolvería los datos en formato JSON, por ejemplo. En un sistema REST, cada recurso es direccionable únicamente a través de su URI, y disponemos de un conjunto de aplicaciones (POST, GET, PUT y DELETE), propias del protocolo HTTP, para trabajar con esos recursos.

Por ejemplo, si disponemos de una base de datos de clientes y queremos objetener una lista con ellos, tendríamos que acceder a la URL del recurso "clientes", http://servidor.com/clientes. Una petición GET a este recurso nos devolvería un array con todos los clientes que tenemos en nuestra BB.DD. Si lo que queremos es obtener la información de un cliente en particular, por ejemplo el cliente con identificador igual a 00001, haríamos una petición GET a la url http://servidor.com/clientes/00001. Para crear un cliente nuevo tendríamos que enviar por POST una petición a http://servidor.com/clientes con los datos del nuevo cliente. Para modificar algún dato del cliente 00001 usaríamos una petición PUT con los nuevos datos a http://servidor.com/clientes/00001. Si la petición es DELETE a esa misma url, borraríamos ese registro de la BB.DD. Normalmente los datos que devuelve el servidor estarán en formato JSON o XML. Para nuestro ejemplo utilizaremos JSON, ideal para trabajar con aplicaciones javascript.

Para tratar mediante PHP las peticiones en nuestro servidor utilizaremos un código parecido a este:

$method = $_SERVER['REQUEST_METHOD'];

// tendremos que tratar esta variable para obtener el recurso adecuado de nuestro modelo.
$resource = $_SERVER['REQUEST_URI'];

// Dependiendo del método de la petición ejecutaremos la acción correspondiente.
switch ($method) {
	case 'GET':
		// código para método GET
		break;
	case 'POST':
		$arguments = $_POST;
		// código para método POST
		break;
	case 'PUT':
		parse_str(file_get_contents('php://input'), $arguments);
		// código para método PUT
		break;
	case 'DELETE':
		// código para método DELETE
		break;
}
echo json_encode($response,true); // $response será un array con los datos de nuestra respuesta.

Utilizando jquery es muy sencillo realizar peticiones a nuestro servidor con la función $.ajax:

$.ajax({
	url: 'http://servidor.com/recurso', // url del recurso
	type: "get", // podría ser get, post, put o delete.
	data: {}, // datos a pasar al servidor, en caso de necesitarlo
	success: function (r) {
		// aquí trataríamos la respuesta del servidor
	}
});

Con estas simples indicaciones ya tenemos las bases para la construcción de una aplicación. Si diseñamos bien nuestro modelo de datos tendremos la oportunidad de crear gran variedad de aplicaciones para distintos tipos de clientes (navegadores web, móviles, aplicaciones de escritorio ...), sin tener que modificar nuestro servidor, utilizando un método estandar, sencillo e intuitivo.

RSS (Really Simple Sindication) es un estándar con formato XML que permite compartir contenidos de una página web. Facilitando incluso leer dichos contenidos sin disponer de un navegador web.

Para poder compartir el contenido se debe seguir el siguiente formato indicado por RSS (solo mostramos las etiquetas más comunes):

<?xml version="1.0" encoding="Codificación de nuestro texto del contenido o web"?>
<rss version="2.0">
    <channel>
        <title>Título de nuestro contenido o web</title>
        <link>Enlace a nuestro contenido o web </link>
        <description>Descripción del contenido o web</description>
        <language>Idioma del contenido o web</language>

        <item>
            <title>Titulo del item</title>
            <link>Enlace del item </link>
            <pubDate>Fecha de publicación del item</pubDate>
            <description>Descripción del item</description>
        </item>
        <item>
            ...
        </item>
        ...
    </channel>
</rss>

    echo "<title><![CDATA[". $titulo ."]]></title>";
    echo "<description><![CDATA[". $texto ."]]></description>";

Tras ver como realizar pagos por PayPal en una tienda virtual en tu web, el siguiente paso sería saber si finalmente el usuario realizó el pago o no, ya que podría haber cerrado la ventana, no tener la tarjeta de crédito a mano o simplemente haberse arrepentido.

Verificando el pago de las compras en un comercio electrónico mediante PayPal

Como no sabemos si el cliente va a realmente a pagar tras ir a la pantalla de pago de PayPal, lo ideal es tratar cada compra como no pagada hasta que recibamos la confirmación por parte de PayPal de que así ha sido.

Para recibir la notificación por parte de PayPal, deberemos activar la opción del Instant Payment Notification o Notificación de Pago Instantánea en el panel de control de tu cuenta y especificar la ruta de donde tiene que avisar con unos datos relativos a la compra que se ha realizado satisfactoriamente.

Este archivo al que PayPal avisa lo alojaremos en nuestro servidor y deberá ser programado a medida para realizar la acción que corresponda. En nuestro caso programaremos en PHP y la ruta de aviso por ejemplo podría ser http://www.mi-host-de-pruebas.com/paypal_ipn.php

La programación del archivo paypal_ipn.php hará actualizar el estado en base de datos de ese pedido de no pagado a pagado.

Configurando Instant Payment Notification en nuestra cuenta de PayPal

Lo primero deberemos crear una cuenta Premier o Business de PayPal y acceder a ella. En la pantalla principal, deberemos estar en la pestaña "Mi cuenta", ir al submenú "Perfil" y elegir "Más opciones".

En la nueva pantalla elegir la opción "Preferencias de Notificación de pago instantánea". Ahora rellenaremos el campo "URL de notificación" con la dirección que nos interese (por ejemplo http://www.mi-host-de-pruebas.com/paypal_ipn.php), marcaremos la opción de "Recibir mensajes de IPN (activado)" y guardaremos los cambios.

Programando la actualizado de la compra electrónica con PHP

Cuando se realiza un pago satisfactoriamente, PayPal nos envía una serie de variables mediante POST con la que podemos identificar qué pago se ha pagado satisfactoriamente, pero sólo nos harán falta dos:

• payment_status: puede tener varios valores, pero los que nos interesan son sólo dos, Completed, que significa que la transacción de dinero se ha completado, y Processed, indica que el pago ha sido aceptado pero no se ha completado aún la transacción de dinero por que el banco del cliente aún no ha hecho la transferencia de dinero (este caso también lo contemplamos como pago válido).
• item_number: esta variable es una de las que nuestra página web envío al redirigirnos a PayPal (lo podemos ver en la primera parte de como utilizar PayPal en nuestra página web) y contiene un valor que identifique la compra que se ha pagado.

Lo primero es comprobar que payment_status nos indica que se ha realizado un pago, a partir de ahí deberemos jugar con la variable item_number que puede tener múltiples usos. Si por ejemplo al llamar a PayPal indicamos que item_number es "VENTA-512", en la notificación sabremos que la venta de identificador 512 se ha pagado satisfactoriamente.

También podríamos realizar distintos tipos de pago en nuestra web que no sólo sea de venta, si no transacción, alquiler, etc. y siempre podríamos identificarla mediante la variable item_number.

Ejemplo de como procesar una Notificación de Pago Instantánea mediante PHP

<?php

// Poner aquí código de inicialización en base de datos //

if($_POST['payment_status']=='Completed' || $_POST['payment_status']=='Processed') {
	// Suponemos que el item_number que nosotros enviamos es del formato: XXXXX-YYYY
	// Donde XXXXX es el tipo de pago e YYYY es el identificador único del pago
	$tipo_venta_aux = explode('-',$_POST['item_number']);
	$tipo_venta = $tipo_venta_aux[0];
	$item_pagado = $tipo_venta_aux[1];

	$pago_valido = false;

        // Verificamos en base de datos
	switch($tipo_venta) {
		case 'VENTA':
			// Verificamos que es una venta existente y pendiente de pago
			$pago_valido = true;
			break;
		case 'ALQUILER':
			// Verificamos que es un alquiler existente y pendiente de pago
			$pago_valido = true;
			break;
		case 'PAGO_MENSUAL':
			// Verificamos que es un pago mensual existente y pendiente de pago
			$pago_valido = true;
			break;
	}

	if($pago_valido == true) {
		// Actualizamos el estado a pagado y hacemos lo que nos interese.
		// Como por ejemplo notificar al cliente de que el pago ha sido registrado.
	}
}

// Poner aquí código de finalización en base de datos //

?>

Páginas y artículos relacionados

• Como realizar compras en tu web mediante PayPal.
• Documentación de PayPal sobre IPN.
• Pagos en serie a PayPal.

Vamos a hablar sobre como programar una aplicación para un dispositivo con Android que se va a tratar de una sencilla calculadora.

Como todos sabemos, Android se programa mediante el lenguaje de programación Java. Este ejemplo de la calculadora puede parecer demasiado básico, pero con una idea inicial de como hacer una pequeña aplicación para Android y nociones sobre Java, veremos que desarrollar un programa más complejo es muy fácil.

En primer lugar, necesitaremos el Android SDK que lo podemos descargar de http://developer.android.com/sdk/index.html

Tras instalarlo deberemos ejecutar el archivo android dentro de la carpeta tools y hacer lo siguiente:

• Instalar la plataforma de la versión Android a emular, lo haremos desde la pestaña Available packages y elegiremos la versión que queramos (2.1, 2.2, 2.3, etc)
• Crear un dispositivo virtual, pestaña Virtual devices, que será nuestro dispositivo a emular.

Como segundo paso, haremos uso de la plataforma Eclipse y su plugin ADT para el desarrollo de Android bajo Eclipse. Podemos hacerlo desde la dirección http://developer.android.com/sdk/eclipse-adt.html

Ahora nos quedaría configurar Eclipse para que supiera la ruta hasta el SDK de Android y tendríamos todo preparado para trabajar. Lo podemos hacer desde el menú Window -> Preferences y dentro de la ventana en la pestaña Android tenemos la opción SDK Location.

Ahora tenemos todo preparado y configurado para empezar a crear aplicaciones. La web del SDK de Android contiene varios ejemplo de como empezar a programar y el ejemplo más sencillo es el del "Hola Mundo" donde viene todo el proceso indicado arriba de forma más detallada (lo podéis encontrar aquí http://developer.android.com/resources/tutorials/hello-world.html).

Nosotros nos vamos a basar en uno un poco más avanzado y lo vamos a ampliar hasta crear una aplicación con cierta utilidad. Este ejemplo es el de como posicionar elementos con tamaños y posiciones relativas http://developer.android.com/resources/tutorials/views/hello-relativelayout.html y vamos a añadir algunos elementos y funcionalidades para crear nuestra sencilla calculadora.

Creando nuestra primera aplicación para Android

Para ver cual queremos que sea la interfaz final e intuir el funcionamiento, vamos a mostrar una captura de pantalla del resultado final en el emulador:

donde podemos ver tres elementos: TextView (objeto para mostrar texto), EditText (caja de entrada de texto) y Button (botón).

Empezaremos creando en Eclipse un proyecto para Android, modificaremos el archivo res/layout/main.xml en su vista de código de fuente y pegaremos el siguiente código XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView
        android:id="@+id/label_a"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Operando A:"/>
    <EditText
        android:id="@+id/op_a"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label_a"/>
     <TextView
        android:id="@+id/label_b"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/op_a"     
        android:text="Operando B:"/>
    <EditText
        android:id="@+id/op_b"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label_b"/>       
    <Button
        android:id="@+id/sumar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/op_b"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="1dip"
		android:onClick="cSumar"        
        android:text="+" />
    <Button
        android:id="@+id/restar"    
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/sumar"
        android:layout_alignTop="@id/sumar"
		android:onClick="cRestar"             
        android:text="-" />
    <Button
        android:id="@+id/multiplicar"   
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/restar"
        android:layout_alignTop="@id/restar"
		android:onClick="cMultiplicar"            
        android:text="*" />
    <Button
        android:id="@+id/dividir"    
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/multiplicar"
        android:layout_alignTop="@id/sumar"
 		android:onClick="cDividir" 
        android:text="/" />   
    <TextView
        android:id="@+id/texto_resultado"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/dividir"                    
        android:text="Resultado:"/>              
    <TextView
        android:id="@+id/resultado"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/texto_resultado"          
        android:text="Realice operación para obtener resultado"/>                  
</RelativeLayout>

Los atributos relevantes para este ejemplo de cada elemento son:

• android:id identificador de cada objeto
• android:layout_width y android:layout_height, anchura y altura respectivamente
• android:layout_below: indica si el objeto está debajo de otro
• android:layout_toRightOf y android:layout_alignTop: indican si están varios elementos en la misma fila sobre qué objeto se coloca a su derecha y su posicionamiento en altura
• android:text es el texto por defecto en cada elemento
• android:onClick es el nombre del método público a ejecutar al pulsar ese botón. Este método debe ser obligatoriamente público y tener como parámetro de entrada la vista, ejemplo public void function cSumar(View view) { ... }.

ahora vamos a programar el funcionamiento de los objetos descritos en el archivo de extensión java creado para el proyecto:

package com.android.calculadora;

import android.app.Activity;
import android.os.Bundle;
import android.widget.*;
import android.view.*;

public class Calculadora extends Activity {
	
	// Instancias de objetos a usar
	private double valor_a, valor_b;
	private EditText op_a, op_b;
	private TextView resultado;
	
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // Asignamos los objetos
        this.op_a = (EditText) findViewById(R.id.op_a);
        this.op_b = (EditText) findViewById(R.id.op_b);
        this.resultado = (TextView) findViewById(R.id.resultado);              
    }

    public void cSumar(View view) {
    	if(this.op_a.getText().toString().length() > 0 && this.op_b.getText().toString().length() > 0) {
        	this.valor_a = Double.parseDouble(this.op_a.getText().toString());
        	this.valor_b = Double.parseDouble(this.op_b.getText().toString());    
        	this.resultado.setText(Double.toString((this.valor_a + this.valor_b)));    		
    	}
    }

    public void cRestar(View view) {
    	if(this.op_a.getText().toString().length() > 0 && this.op_b.getText().toString().length() > 0) {
        	this.valor_a = Double.parseDouble(this.op_a.getText().toString());
        	this.valor_b = Double.parseDouble(this.op_b.getText().toString());    
        	this.resultado.setText(Double.toString((this.valor_a - this.valor_b)));    		
    	}
    }
    
    public void cMultiplicar(View view) {
    	if(this.op_a.getText().toString().length() > 0 && this.op_b.getText().toString().length() > 0) {
        	this.valor_a = Double.parseDouble(this.op_a.getText().toString());
        	this.valor_b = Double.parseDouble(this.op_b.getText().toString());    
        	this.resultado.setText(Double.toString((this.valor_a * this.valor_b)));    		
    	}
    }
    
    public void cDividir(View view) {
    	if(this.op_a.getText().toString().length() > 0 && this.op_b.getText().toString().length() > 0) {
        	this.valor_a = Double.parseDouble(this.op_a.getText().toString());
        	this.valor_b = Double.parseDouble(this.op_b.getText().toString());    
        	if(this.valor_b != 0) {
            	this.resultado.setText(Double.toString((this.valor_a / this.valor_b)));         		
        	}
        	else {
            	this.resultado.setText("Infinito");         		
        	}
    	}
    }       
}

El método onCreate se ejecuta al crear la aplicación y es donde asignamos los objetos declarados en el XML a objetos Java. Tras ello declaramos las funciones definidas en los atributos onClick de cada botón.

Por último nos quedaría ejecutarlo y probar el funcionamiento.

Conclusiones

Como hemos dicho, este ejemplo de una calculadora es un ejemplo muy sencillo pero podemos ver que con un poco de código y unas pequeñas nociones sobre Android SDK podemos sacar muchísimo provecho de nuestros conocimientos sobre Java.

Antes de empezar habría que aclarar que HTML5 sigue en estado de borrador y lo seguirá estando durante algunos años más.

Vamos a comentar las novedades más importantes. 

Algo básico es que HTML5 está definido en base al DOM (la representación interna de una web con la que trabaja un navegador), dejando de lado la representación “real”, definiendo a la vez un estándar HTML y XHTML.

Mejor estructura

Hoy en día se abusa bastante del elemento div, que nos permite estructurar una web en bloques. En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, será trivial de entender para una máquina, dándole más importancia a unas secciones y pudiendo jugar con esos datos automáticamente. Estos son los elementos:

• section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
• article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
• aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
• header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
• footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
• nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

Mejores formularios

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

• datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
• number para que el usuario indique un número.
• range para indicar un rango entre dos números.
• email para indicar un correo electrónico.
• url para indicar una dirección web.
• search para indicar una búsqueda.
• color para indicar un color.

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato, por ejemplo una fecha o un color se podrán indicar de manera directa e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra y el punto com), y que por tanto gana mucho con este estándar.

Otros elementos importantes

• audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo. Aunque las implementaciones actuales son un tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo como Youtube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es posible (¡y necesario!).
• embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
• canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez, por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar en el futuro, y que será el culpable de aplicaciones web espectaculares.

Más elementos

• dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.
• figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.
• mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.
• meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
• progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.
• time representa una fecha o una hora.
• command representa un comando que el usuario puede ejecutar en su navegador.
• output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.
• datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

Gogle Chrome está en su mejor momento, habiendo alcanzado una cuota de mercado record del 7,5% durante el mes de agosto.

Por otra parte Google ya trabaja en nuevas funcionalidades para 'tablets' y 'netbooks'.

Entre las últimas revisiones de Chrome, hay dos nuevas actualizaciones: control de orientación y comandos de voz.

Representantes de los distintos sistemas operativos móviles se dieron cita en el evento Tendencias en Plataformas y Desarrollo Móvil, organizado por Aecomo, para evaluar las posibilidades de cada uno en el mercado y las tendencias futuras. El debate lo centraron iPhone y Android.

Aecomo reunió a desarrolladores y representantes de las empresas en el evento Tendencias en Plataformas y Desarrollo Móvil, para que  expresaran sus puntos de vista sobre las posibilidades que ofrece el mercado.

El crecimiento experimentado por la programación de aplicaciones móviles en los últimos tiempos ha sido vertiginoso y ha hecho que muchas compañías se sumen al negocio de construir su propia tienda o mercado. Las conferencias dieron voz a los distintos actores presentes en el mercado.

Apple y sus buenas condiciones de trabajo

El valedor de Apple fue Juan Antonio Muñoz-Gallego, socio fundador de Unkasoft, que justifica su trabajo sobre iPhone en la remuneración económica. Según afirma el desarrollador, la compañía paga un 70% de los beneficios que genere la aplicación a su creador y lo hace en menos de treinta días.

La App Store ya ha obtenido 1.500 millones de descargas, según los datos de Muñoz-Gallego. Con esto pone de relevancia la calidad del escaparate que Apple es capaz de ofrecer a los programadores. Sin embargo, las apps móviles más utilizadas son siempre las mismas: Google Maps, Facebook y la herramienta musical Pandora.

En estos momentos, con el iPad ya en la calle y arropado por un gran éxito en ventas, los desarrolladores tienen la oportunidad o la obligación, según como se mire, de crear aplicaciones duales, adaptadas a ambos dispositivos.

Muñoz-Gallego presenta la App Store de Apple como un buen escenario para potenciar el comercio a través del móvil. Algunas compañías ya han aprovechado en este sentido las capacidades de las distintas versiones del sistema operativo de iPhone, como Ikea, que lanzó un catálogo virtual, permitiendo al usuario comprobar cómo quedarían sus productos en el lugar que vean con la cámara del dispositivo.

Android: innovación más que dinero

Tendencias en Plataformas y Desarrollo Móvil trajo a Israel Ferrer, desarrollador de Android y fundador del blog and.roid.es, el más importante acerca de este sistema operativo en España, que ofreció datos sobre el gran crecimiento del SO de Google en los últimos meses.

Durante la charla, Ferrer profundizó en la estrategia de Google, afirmando que al buscador le interesa principalmente la publicidad y el software para monopolizar este sector. Por tanto, nada de terminales de momento. Para compensar, Android tiene una larga lista de dispositivos que lo utilizan como sistema, por lo que los desarrolladores deben ajustarse a distinto hardware, así como diferentes tamaños de pantalla y resoluciones.

Sin embargo, Android dispone de herramientas para solventar estas dificultades, según Ferrer, que aludió a la versión 1.6 como una de las más adecuadas para trabajar.

Respecto a las otra plataformas, Ferrer dijo: “Google piensa que sólo tiene dos competidores: iPhone y Blackberry”. También hizo referencia a la posibilidad de convivencia de varias tiendas de apps, como el Android Market, que permite la presencia de otros competidores.

La confrontación con Apple no se hizo esperar. En este punto, Israel Ferrer afirmó: “La innovación está en Android”, y se dirigió a los desarrolladores diciendo que para ganar dinero “iros a iPhone”.

En la misma semana, estas dos empresas de internet han hecho pública su política publicitaria online.

Google en su blog hace público por primera vez, las comisiones que reciben los dueños de websites con AdSense. El 68% de los ingresos generados se entregan a los propietarios de websites.

Twitter por otra parte ha anunciado que controlará más la publicidad e impedirá que terceros vendan tweets publicitarios gestionados por Twitter, según anuncian "no permitirán inyectar mensajes remunerados en flujos de mensajes de su red social". Toman esta medida por el engorro que puede suponer el aumento descontrolado de publicidad mal gestionada. 

Según un estudio de Internet World Stats, España es el sexto usuario de internet en Europa y el décimo cuarto puesto a nivel mundial. Las comunidades donde más usuarios existen son Madrid, Cataluña y País Vasco, mientras que Murcia y Extremadura son las que menos usuarios tienen.

El índice de penetración de internet en la población española es del 72% (en el ranking mundial el puesto ocupado sería el 20) y tiene un crecimiento medio del 440% desde el año 2000.

En el ranking de uso de redes sociales, España ocupa el séptimo puesto a nivel mundial, el 80% de los usuarios está en una red social y el 60% consulta estas todos los días. 

En el informe se recoge que los índices de penetración a destacar son: Madrid (58%), Cataluña (57%) y País Vasco (55%). Mientras que las comunidades con menor índice son Murcia (39%) y Extremadura (36%), estas dos últimas según el informe, son las que menor crecimiento han tenido en los últimos años.

Perfil de usuario de internet en España
Un 55% son hombres y un 45% mujeres. Una cuarta parte está entre los 14 y 24 años, otra entre 25 y 34 años, otra entre 35 y 44 años y el último grupo es de más de 45 años. El perfil de usuario que más ha crecido es el de más de 55 años.
Además, se informa de que el perfil social del usuario de la web es más alto que el de la población general.

Las redes sociales más populares en España: FaceBook, Tuenti y Twitter.
FaceBook con 7.900.000 usuarios es la más importante, seguida de Tuenti con 7 millones y Twitter. En el informe se comenta que las empresas que utilizan redes sociales superan en beneficios e ingresos a la competencia.

Si a esto le añadimos que un 30% de los usuarios que utiliza redes sociales recuerda la publicidad de estas, el 52% se convierte en fan de una marca y el 46% habla bien de una marca. 

Los pagos en serie de PayPal (batch payments) sirven para realizar múltiples pagos de forma masiva a personas que tengan una cuenta de PayPal para realizar pagos masivos o transferencias periódicas de dinero que es necesario para ciertas empresas o tiendas en Internet.

La gran ventaja es que podemos programar una aplicación que realice este pago a los usuarios que nosotros deseemos. Para ello deberemos crear un fichero en el que los datos de cada pago estarán separados por tabulaciones y cada pago por un salgo de línea. El formato de cada pago es el siguiente:

1. Dirección de correo electrónico del usuario
2. Importe en el formato 12.34
3. Código de la moneda de pago (monedas de pago en PayPal). En cada archivo sólo puede haber una moneda, por lo que si tenemos que hacer varios pagos de varias monedas deberemos generar diferentes archivos
4. Identificador del pago (sin espacios)
5. Texto explicativo del pago (opcional)

Un ejemplo de archivo de pago en serie sería el siguiente:

123456@dompruebas.es	2.43	EUR	transferencia_2245	Pago del día  14 de Mayo
abcdfeg@dompruebas.es	122.53	EUR	transferencia_2246	Pago del día  14 de Mayo

Ejemplo de generación de pago en serie en PHP

Con el siguiente sencillo ejemplo, conseguiremos hacer un script que realice pagos en serie. La fuente la suponemos de una base de datos, y tras crear el archivo, deberemos subir el archivo a la web de PayPal para realizar los pagos:

<?php
 
// Resultados obtenidos de una base de datos, XML, etc.
$moneda = "EUR";
 
$bp[0]['email'] = "123456@dompruebas.es";
$bp[0]['importe'] = "2.43";
$bp[0]['identificador'] = "transferencia_2245";
$bp[0]['mensaje'] = "Pago del día  14 de Mayo";
 
$bp[1]['email'] = "abcdfeg@dompruebas.es";
$bp[1]['importe'] = "122.53";
$bp[1]['identificador'] = "transferencia_2246";
$bp[1]['mensaje'] = "Pago del día  14 de Mayo";
 
// Procesamos
$archivo = "";
$icount = count($bp);
for($i=0;$i<$icount;$i++) {
   $archivo.=$bp[$i]['email']."\t";
   $archivo.=$bp[$i]['importe']."\t";
   $archivo.=$moneda."\t";
   $archivo.=$bp[$i]['identificador']."\t";
   $archivo.=$bp[$i]['mensaje']."\r\n";
}
 
$nombre_archivo = date("Ymd").'_'.$moneda.'_bp_'.time().'.txt';
$fd=fopen($nombre_archivo, 'a');
fwrite($fd,$archivo);
fclose($fd);
?>

Para más información, podemos leer la documentación oficial de los pagos en serie.

Artículos relacionados:

• Cómo pagar en tu web con PayPal
• Controlar los pagos por PayPal mediante Notificación de Pago Instantánea

Cuando tenemos planeado hacer una aplicación web que va a hacer un trabajo intensivo de operaciones, base de datos, ficheros, etc. (por ejemplo página corporativa o de comercio electrónico) debemos plantearnos la velocidad final que tendrá con una alta carga de visitas diarias.

Por ello, vamos a explicar algunos trucos y consejos con ejemplos para poder escribir nuestro código PHP optimizado y por tanto nuestras aplicaciones corran más rápido.

Cadenas de texto

Usar echo en vez de print

Es más rápido hacer uso de la función echo que de la función print

echo “Hola”; // Más rápido
print “Hola”;

Evitar concatenar texto innecesariamente y utilizar múltiples echos

Es mejor realizar dos salidas de texto con dos echos diferentes que concatenar texto y después producir la salida.

echo “Bienvenido”; echo $usuario; // Más rápido
echo “Bienvenido”.$usuario;

Saber si una cadena de texto está vacía

Es más rápido saber si una variable está vacía con empty que saber si la longitud en número de caracteres es cero con strlen.

if (empty($cadena)) echo “vacía”; // Más rápida
if (strlen($s) == 0) echo “vacía”;

Substituir texto

La manera más rápida para substituir texto es con strtr y no con str_replace o preg_replace.

$salida = strtr("abd","d","c"); // Más rápida
$salida = str_replace("d","c","abd");
$salida = preg_replace("/d/","c","abd");

Saber si una cadena está contenida en otra

La función strpos es más rápida y ocupa menos memoria que strstr

if(strpos("Hola","o")!==false) echo "sí"; // Más rápida
$esta_contenida = strstr("Hola","o");
if(!empty($esta_contenida)) echo "sí";

Variables y arrays

Uso de variables locales

Es más rápido y eficiente en memoria trabajar con variables locales dentro de una función que con una variable de instancia de un objeto, declarada como global o sin definir:

class objeto {
   private $c;
   public function __Construct() {
      $this->c=0;
   }
   public function prueba() {
      // Inicialización
      global $a;
      $b = 0;
      // Incremento
      $a++;
      $b++;	// Más rápida
      $this->c++;
      $d++;
   }
}

Coste de memoria

Deberemos declarar variables que vayamos a usar. Si vamos a usar una variable con valores temporales podemos llamarla $auxiliar y así no declarar muchas variables diferentes que sólo usamos una vez.

Las variables que ocupen mucho espacio en memoria, por ejemplo un array muy grande, deberemos borrarlas cuando no se vayan usar con la función unset.

Calcular la longitud de un array antes de recorrerlo

Es más rápido recorrer un array de la siguiente forma

$icount = count($lista);
for($i=0;$i<$icount;$i++) {
   ...
}

que de ésta

for($i=0;$i<count($lista);$i++) {
   ...
}

ya que el cálculo de count se realiza tantas veces como posiciones tenga el array.

Acceder correctamente a un índice no númerico

Debemos acceder a los índices no numéricos de un array especificándolo con comillas

echo $lista[0]['nombre']; // Más rápido
echo $lista[0][nombre];

Funciones y objetos

Hacer uso de las funciones predefinidas en PHP

Las funciones incluidas en PHP siempre serán mucho más rápidas que las que podamos hacer nosotros

Uso de include y require

Es más rápido hacer uso de include o require que include_once o require_once.

Funciones declaradas en objetos hijos son más rápidos que los heredados

Una función declarada en un objeto hijo es más rápida que una función heredada de un objeto padre.

Bases de datos

Ordenar los resultados de múltiples consultas

Cuando tenemos que hacer múltiples consultas SQL que terminen siendo pesadas, es mejor realizar el procesamiento de ordenación mediante la función usort o similares que mediante SQL. Un ejemplo acerca de esto podéis leer en el siguiente artículo de como Digg consiguió optimizar su web notablemente mediante estos procedimientos.

Jedox Palo

Palo es un herramienta OLAP (Online Analytical Processing) de BI, que nos permite crear almacenar datos y generar informes en hojas de cálculo (via Microsoft Excel / OpenOffice) o en el navegador Web. Esta herramienta está creada por la empresa Jedox y en las aplicaciones básicas son software libre, por lo que nos permite el uso básico a un costo cero, y además posee de herramientas más avanzadas de pago.

Instalando lo necesario

Lo primero será descargarnos de la página oficial de Palo el cliente (Palo for Excel o Palo for Open Office) y el el servidor (Palo Suite) e instalarlo primero el cliente y después el servidor, si no podría haber algún problema en la instalación. Además, debemos bajarnos el manual de uso y configuración para conocer ciertas funcionalidades y configuraciones.

Para esta instalación, vamos a suponer que la instalación que hagamos el cliente y el servidor van a estar en el mismo ordenador. Si queremos que el servidor esté abierto deberemos abrir el puerto en la configuración del servidor Palo.

NOTA: Instalando el complemento de Palo en OpenOffice

Inicialmente la instalación del addin de Palo lo hice sobre Excel sin problemas en Office XP. Sin embargo noté que si queríamos hacerlo para OpenOffice bajo Linux mostraba un error Java. Tras buscar un poco por Google encontré la siguiente página http://software.krimnet.com/guide/guide-install-palooca-ubuntu-904-netbook-remix.htm en la que que explica los paquetes necesarios para instalarlo bajo Debian/Ubuntu.

Primeros pasos creando informes con Excel o OpenOffice

Ahora arrancaremos nuestra hoja de cálculo, si es desde Excel deberemos hacerlo haciendo doble click en el icono Palo Excel-Addin del escritorio, y veremos que tenemos una nueva opción que es la pestaña Palo.

Para crear un informe seleccionaremos la opción Pegar Vista. Las opciones básicas que se muestran son las siguientes:

• Servidor / Base de datos: nuestro ordenador se puede conectar a varios servidores que contengan diferentes bases de datos. En principio trabajaremos con la base de datos Demo.
• Área de hoja: son las dimensiones de las que disponemos. Podemos definir una dimensión como un dato medible, como por ejemplo: productos, ventas, años, clientes, etc.
• Título de columna: dimensión/es que irán en el eje X, en nuestro caso arrastraremos hasta aquí la dimensión Years.
• Título de renglón: dimensión/es que irán en el eje Y, arrastraremos la dimensión Products.

Tras seleccionarlo pulsaremos el botón insertar y el informe quedará creado.

Podemos ver que la vista consisten en dos zonas: la zona superior contiene las dimensiones no escogidas y la inferior contiene las dimensiones escogidas que queremos ver en detalle.

Si hacemos doble click sobre las celdas azules de la zona inferior podemos ir desplegando las secciones de años o productos, subdividiéndose en otras secciones hasta llegar a un elemento final. Mientras, en las celdas amarillas se muestra el valor calculado.

Podemos seleccionar las dimensiones de la zona superior para modificar el informe. Por ejemplo podemos hacer doble click sobre Europe y elegir Spain, todos los datos de la zona inferior que ahora salen son los pertenecientes a España, pudiendo ver en detalle los valores para los productos según años.

Por último, tras tener el informe que deseamos, si queremos exportarlo y visualizarlo en un ordenador sin que tenga Palo instalado, podemos pulsar la opción Guardar como Instantánea, pero este informe no será dinámico y sólo veremos los datos visualizados al generarlo.

Fuentes y más información

• Wikipedia, Business Intelligence: http://es.wikipedia.org/wiki/Business_intelligence
• Wikipedia, OLAP: http://es.wikipedia.org/wiki/OLAP
• Jedox, Palo: http://www.jedox.com/

A continuación vamos a explicar algunos conceptos básicos de brechas de seguridad más comunes y como solucionarlos mediante PHP permitiendo escribir aplicaciones web un poco más seguras.

Protección contra la inyección de código SQL

Es muy común trabajar contra una base de datos (MySQL, PostgreSQL, Oracle, etc.) y estas consultas dependen de parámetros llegados desde GET o POST, por lo que permitimos al usuario de cada web que en cierta manera modifique las consultas SQL de nuestra web.

Esto podría provocar que un usuario que construya una consulta SQL malintencionada pudiera obtener resultados indeseados, como poder hacer un login en una zona restringida de nuestra web sin conocer ningún usuario / contraseña.

Supongamos la siguiente situación: tenemos un nombre de usuario pruebas y una contraseña clave_pruebas guardados en base de datos. Para realizar la identificador obtenemos los parámetros por POST mediante las variables $_POST['usuario'] y $_POST['clave']. Tras ello realizamos la siguiente consulta SQL:

mysql_query('select id from usuariosWeb where usuario = '".$_POST['usuario']."' and password = '".$_POST['clave']."'');

Si existe un usuario con ese nombre y usuario, es que la identificación es correcta y por tanto debemos hacer el login. Pero sin embargo, si construyésemos el siguiente parámetro

$_POST['clave'] ="m' or 1='1"

podemos observar que nos devuelve un valor válido para identificarse conociendo sólo el nombre de usuario.

Para solucionarlo, tenemos diversos métodos pero lo más cómodo es substituir las comillas simples y dobles de todos los parámetros parámetros POST mediante el siguiente código:

foreach($_POST as $key => $value) {
	$_POST[$key] = str_replace("'","",$value);
	$_POST[$key] = str_replace('"','',$value);
}

Guardar contraseñas, números de tarjeta de crédito, dirección de correo, etc. de forma segura con MD5 ó SHA1

Para guardar las contraseñas de los usuarios en las bases de datos debemos guardarlas de manera que no puedan ser visibles a simple vista ya que si alguna persona malintencionada consiguiera acceder a la base de datos, además de conseguir el control de nuestra web, además tendrá acceso a información sensible de los usuarios que nos visitan.

Para ello podemos dificultarlo mediante los resúmenes hash MD5 o SHA-1, que aunque se tratan de algoritmos crackeados, por lo menos no mostraremos como texto plano esta información.

Ejemplo:

$a = "clave_pruebas";

echo "clave original: ".$a." ";

$b = md5($a);

echo "Hash MD5 de la clave original: ".$b." ";

$c = sha1($a);

echo "Hash SHA-1 de la clave original: ".$c." ";

Como podemos ver, con ello conseguimos ocultar mínimamente la contraseña de cada usuario. Cuando un usuario se identifique con su contraseña, realizaremos el cálculo del hash de su contraseña y compararemos contra la base de datos, no el texto plano de la contraseña, si no del hash.

Uso de variables de sesión y no de cookies

Normalmente, alguna zona de nuestra web necesite acceso mediante usuario y contraseña. Para que el usuario no tenga que introducirlas repetidamente podemos guardarla mediante cookies pero es una práctica muy insegura ya que si lo hiciéramos, esta información es transmitida mediante la red en texto plano y podría ser leída por cualquier persona que realice un sniffing de red o que lea las cookies guardadas en nuestro ordenador mediante un virus o troyano.

Por ello lo mejor es hacer uso de las variables de sesión. Estas variables se guardan en el servidor por lo que en cualquier caso, la información transmitida sólo es sensible la primera vez que se envía y no las sucesivas veces (por tanto esto sería evitable haciendo uso del protocolo HTTPS en vez de HTTP).

Como ejemplo del usuario de variables de sesión, haremos uso de dos archivos. En el primero creamos una variable de sesión:

session_start();
$_SESSION['clave'] = "clave_pruebas";

y en el segundo mostramos el valor en pantalla.

session_start();
echo $_SESSION['clave'];

Suplantación de sesiones (Session hijacking o Man in the middle)

Del uso de variables de sesión se deriva otra posible brecha de seguridad que es una persona malintencionada intente suplantar el cliente de cara al servidor. Cuando iniciamos una sesión, creamos una cookie con un identificador único para esa sesión. Si una persona malintencionada interceptase ese identificador único y mandase esa cookie al servidor, podría suplantar nuestra identidad y tener acceso a nuestras zonas restringidas de la web.

Lo solución ideal sería el uso del protocolo HTTPS que encriptaría toda nuestra conexión, pero si esto no es posible, podemos crear una serie de comprobaciones en las que intentemos asegurarnos de la real identidad de cada usuario.

Para ello podemos guardar una serie de variables de sesión de los datos que el usuario nos proporciona en cada visita, como son la dirección IP o la información de su navegador, etc. Si estos cambian significaría que es un intento de session hijacking y por tanto es un usuario que realiza un ataque. En el siguiente ejemplo tenemos dos archivos, en el que en el primer archivo realizamos un login satisfactorio y guardamos los datos iniciales de dirección IP y tipo del navegador con el que lo hemos hecho:

session_start();
$_SESSION['REMOTE_ADDR'] = $_SERVER['REMOTE_ADDR'];
$_SESSION['HTTP_USER_AGENT'] = $_SERVER['HTTP_USER_AGENT'];

En pantallas posteriores, comprobaremos si en cada pantalla los datos actuales de dirección IP y datos del navegador se corresponden con los que se realizó el login como usuario en la web:

session_start();
if($_SESSION['REMOTE_ADDR'] != $_SERVER['REMOTE_ADDR'] || $_SESSION['HTTP_USER_AGENT'] != $_SERVER['HTTP_USER_AGENT']) {
	exit();
}

Parámetros GET/POST explotables

Para finalizar, si hacemos uso de parámetros GET y POST deberemos comprobar siempre que se correspondan con el usuario actual o si tiene permisos.

Por ejemplo, si tenemos un archivo que edita productos llamado editarProducto.php y recibe el parámetro GET idproducto, que se corresponde con el identificador único del producto a editar y llamamos al archivo de la siguiente manera:

http://www.miweb.com/editarProducto.php?idproducto=15

deberemos comprobar en cualquier caso que en primer lugar seamos un usuario registrado y logueado y después que el producto de identificador único 15 corresponde a uno de los productos del usuario logueado.

• Open Source
• Ligero de peso
• Ampliable mediante plugins
• Usable en todos los navegadores.

<!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">
<head>
<title>Ejemplo de un editor de textos Web simple con TinyMCE</title>

<!-- TinyMCE -->

<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
	tinyMCE.init({
		mode : "exact",
		elements : "editor_texto",
		theme : "advanced",
		theme_advanced_buttons1:"bold,italic,underline,|,undo,redo,|,bullist,numlist",
		theme_advanced_buttons2:"",
		theme_advanced_buttons3:""

	});
</script>
<!-- /TinyMCE -->

</head>
<body>

<h3>Editor de textos Web</h3>

<textarea id="editor_texto" name="editor_texto" style="width: 30%;">Texto de prueba</textarea>

</body>
</html>

• mode "exact" y elements "editor_texto": con estas dos líneas indicamos que queremos aplicar el editor de textos sólo al elemento de la web de identificador editor_texto
• theme "advanced": elegimos utilizar el tema avanzado del editor para poder seleccionar los botones concretos que queremos que aparezcan mediante theme_advanced_buttons1, theme_advanced_buttons2 y theme_advanced_buttons3 donde seleccionaremos dentro de las tres posibles filas de botones del editor, que botones aparecerán. En este caso negrita, cursiva, subrayado, una separación, deshacer, rehacer, una separación, lista y lista numerada respectivamente.

Vamos a explicar cómo llamar al API de PayPal para realizar pagos en tu página web. En primer lugar deberemos crear una cuenta como desarrollador de PayPal Sandbox (https://developer.paypal.com/) que usaremos para verificar que lo hacemos de manera correcta antes de hacerlo funcionar en la tienda virtual de nuestra página web.

Tras hacerla y meternos en nuestra cuenta de desarrollador, deberemos seleccionar la opción Create a preconfigured buyer or seller account donde rellenaremos con nuestros datos el formulario teniendo en cuenta que debe ser una cuenta de vendedor.

Una vez creada, entraremos a nuestro listado de cuentas de PayPal Sandbox. Estas cuentas no son cuentas reales de PayPal y sólo funcionarán dentro de su Sandbox. Para entrar en ella pulsaremos el botón de Enter Sandbox Test Site y podremos introducir el usuario y contraseña para esta cuenta de prueba. Una vez dentro podemos observar que es como si fuera una cuenta de PayPal pero los pagos que se hagan a ella no serán reales.

Ejemplo de pago con el API de PayPal

Para realizar el pago utilizaremos un documento HTML en el que le pasaremos los parámetros que PayPal necesita (importe, código de venta, etc.) y otros opcionales como los datos del usuario que compra para que le aparezcan rellenados en el formulario de pago. Un ejemplo sería el siguiente:

<html>

<head>

<title>Ejemplo de pago mediante la API de PayPal</title>

</head>

<body>

<form name='formTpv' method='post' action='https://www.sandbox.paypal.com/cgi-bin/webscr'>

	<input type='hidden' name='cmd' value='_xclick'>
	<input type='hidden' name='business' value='mi_cuenta_sandbox@mi_pagina.com'>
	<input type='hidden' name='item_name' value='Nueva compra en mi web'>
	<input type='hidden' name='item_number' value='VENTA-X2561'>
	<input type='hidden' name='amount' value='10.15'>
	<input type='hidden' name='page_style' value='primary'>
	<input type='hidden' name='no_shipping' value='1'>
	<input type='hidden' name='return' value='http://mi_pagina/exito.html'>
	<input type='hidden' name='rm' value='2'>
	<input type='hidden' name='cancel_return' value='http://mi_pagina/cancelada.html'>
	<input type='hidden' name='no_note' value='1'>
	<input type='hidden' name='currency_code' value='EUR'>
	<input type='hidden' name='cn' value='PP-BuyNowBF'>
	<input type='hidden' name='custom' value=''>
	<input type='hidden' name='first_name' value='NOMBRE'>
	<input type='hidden' name='last_name' value='APELLIDOS'>
	<input type='hidden' name='address1' value='DIRECCIÓN'>
	<input type='hidden' name='city' value='POBLACIÓN'>
	<input type='hidden' name='zip' value='CÓDIGO POSTAL'>
	<input type='hidden' name='night_phone_a' value=''>
	<input type='hidden' name='night_phone_b' value='TELÉFONO'>
	<input type='hidden' name='night_phone_c' value=''>
	<input type='hidden' name='lc' value='es'>
	<input type='hidden' name='country' value='ES'>
</form>
<script type='text/javascript'>
	document.formTpv.submit();
</script>

</body>

</html>

La dirección de llamada del formulario de pruebas es https://www.sandbox.paypal.com/cgi-bin/webscr pero al pasar a ventas reales deberemos indicar https://www.paypal.com/cgi-bin/webscr

Como podemos ver, existente multitud de parámetros en el formulario que son fáciles de ver cuales son su propósito (nombre, dirección, etc.). A continuación detallamos los más importantes o que podemos tener duda de qué son realmente:

• business: indicaremos la cuenta de PayPal asociada al vendedor. Mientras estemos de pruebas indicaremos la cuenta de pruebas del Sandbox, pero para ventas reales deberemos indicar nuestra cuenta de vendedor.
• item_name: título que aparecerá en la pantalla de pago.
• item_number: código de la venta, actuará como identificador único de cada venta.
• amount: importe a pagar, donde si hay decimales no podrán indicarse con una coma ni con más de dos números.
• return: página de vuelta a nuestra web indicando éxito en el pago.
• cancel_return: página de vuelta a nuestra web indicando que no se realizó el pago por que el usuario lo canceló.
• currency_code: código de la moneda usada en el pago. Para el caso del euro es EUR.
• lc: idioma de la pantalla de pago.
• country: código ISO del país del cliente.

Artículos relacionados

• Pagos en serie de PayPal
• Controlar los pagos por PayPal mediante Notificación de Pago Instantánea

• Un enlace que compruebe si un valor existe ya en una base de datos.
• Completar un campo de texto de búsqueda con valores sugeridos por nuestra web.
• Un chat web
• etc.

En este artículo vamos a describir como realizar una sencilla llamada AJAX a una fichero externo que ejecutará un proceso (una suma entre dos valores enviados mediante POST) y nos devolverá la salida correspondiente apoyándonos con la librería jQuery, que aunque no es necesario su uso, lo haremos sobre ella para aprovechar la potencia que nos proporciona. Se podría decir que es el típico Hola mundo en AJAX.

El código se compone de dos archivos: un archivo donde mostraremos los formularios con datos de entrada y otro con el archivo de procesamiento.

A continuación mostramos el código del fichero de entrada de datos (habrá que tener cuidado con escribir correctamente la ruta a la librería jQuery):

<html>

<head>

<title>Ejemplo sencillo de AJAX</title>

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

<script>
function realizaProceso(valorCaja1, valorCaja2){
        var parametros = {
                "valorCaja1" : valorCaja1,
                "valorCaja2" : valorCaja2
        };
        $.ajax({
                data:  parametros,
                url:   'ejemplo_ajax_proceso.php',
                type:  'post',
                beforeSend: function () {
                        $("#resultado").html("Procesando, espere por favor...");
                },
                success:  function (response) {
                        $("#resultado").html(response);
                }
        });
}
</script>

</head>

<body>

Introduce valor 1

<input type="text" name="caja_texto" id="valor1" value="0"/> 


Introduce valor 2

<input type="text" name="caja_texto" id="valor2" value="0"/>

Realiza suma

<input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(), $('#valor2').val());return false;" value="Calcula"/>

<br/>

Resultado: <span id="resultado">0</span>

</body>

</html>

En este código, utilizamos los id de las cajas de texto para pasarle sus valores a la función realizaProceso. En esta función recogemos los valores de entrada en un array parametros y enviamos mediante AJAX especificando el parámetro data (datos que mandamos), url (dirección del archivo de proceso) y type (POST o GET).

Por último vemos que tenemos dos eventos: beforeSend y success donde podemos indicar la acción a realizar mientras se procesan los datos y tras terminar de procesarlos (en este caso jugar con el contenido HTML del id resultado).

Ahora vemos el archivo de procesamiento de datos (ejemplo_ajax_proceso.php) que únicamente suma los datos recibidos por POST:

<?php 
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2']; 
echo $resultado;
?>

• Primero tenemos que incluir la biblioteca jquery en la cabecera. Nos la descargamos desde su web y la añadimos de la siguiente forma:
  

• Luego creamos nuestro archivo del plugin, que luego también tendremos que añadirlo en la cabecera para utilizarlo.

  			$.fn.duplicar = function () {
  				this.each(function () {
  					var html = "
  "+$(this).html();
  					$(this).append(html);
  				});
  			}
  		

  Lo que hace este plugin es duplicar el contenido de los elementos seleccionados.
  $.fn es el objeto de jquery que contiene las funciones que nosotros le definimos. Dentro del código de la función, el this es un array con los elementos seleccionados con jquery. Con la función each, recorremos ese array.

• Para utilizarlo:

  			$("div.doble").duplicar();
  		

  Así duplicaríamos el contenido de todos los divs con la clase "doble"

Éste es un ejemplo muy básico. Para más información sólo hay que pasarse por la web de jquery la cual tiene una bastante buena documentación.

La propiedad display de css (en la versión 2.1), puede contener un valor muy interesante, inline-block. Con este valor conseguimos que el elemento con esa propiedad se comporte como una caja, pero mostrandose en la misma línea, como si tuviese display: inline.

¿Y esto de qué nos sirve?, pues si no usamos esta propiedad tendríamos que añadirle a la caja un "float: left", por ejemplo, pero esto trae unas consecuencias, a veces, muy molestas. Por ejemplo, si queremos mostrar contenido dividido en cajas y que se muestren filas de 3 cajas, si éstas varían con la altura, pasaría esto:

Esto pasa porque al tener "float:left", las cajas "buscan" el primer espacio disponible a su izquierda. Ésto podría solucionarse desde el html, añadiendo cada tres cajas un elemento que tenga la propiedad "clear:both". Pero si queremos que el número de cajas por fila varíe dependiendo de la anchura de nuestra ventana del navegador, ya no valdría esta solución. Además si usamos la propiedad "display: inline-block", podemos alinear las cajas arriba, abajo, al centro , con tan solo cambiar la propiedad vertical-align. Si ponemos "vertical-align:top", tendremos esto:

Hacks para conseguir "display: inline-block" en internet explorer 6 y 7

Nuestros amigos Ie6 e Ie7, como siempre, mostrandonos su tecnología punta (recordemos que ésto es CSS 2.1), no implementan esta propiedad completamente.

De todas formas es muy sencillo hacerlo funcionar con un pequeño truco. En vez de usar "display: inline-block", tendríamos que ponerles "display: inline" y añadirles la propiedad "zoom:1"

	div.block {
		display: inline-block;
		#display: inline-block;
		_display: inline;
		zoom: 1;
	}

La "#" es un hack para que solo aplique esa propiedad IE7 y el "_" para IE6. La propiedad zoom solo la cojeran esos 2 navegadores, puesto que no es estándar, haciendo que el elemento se comporte como una caja.

	

		Item 1
		

			

				Option 1
			
			

				Option 2
			
		
	

ul.menu {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style-type: none;
	white-space: nowrap;
}
ul.menu ul {
	display: none;
}
ul.menu li {
	position: relative;
	display: inline-block;
}
ul.menu ul li {
	display: block;
}

ul.menu > li:hover > ul {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
}

ul.menu ul li:hover > ul {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
}

Hacks para Internet explorer 6 y 7:

ul.menu li {
	position: relative;
	display: inline-block;
	_display: inline;
	_zoom: 1;
	#display: inline;
	#zoom: 1;
}

$("ul.submenu li").hover(
	function () {
		$(this).addClass("hover");
	},
	function () {
		$(this).removeClass("hover");
	}
);

ul.menu li.hover ul {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
}

ul.menu li.hover ul ul {
	display: none;
}

ul.menu ul li.hover ul {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
}

ul.menu ul li.hover ul ul {
	display: none;
}

Hace un par de semanas vi un vídeo tutorial en el que se muestra la potencia y la facilidad de uso de Yahoo! Query Language donde creando un código HTML y Javascript muy simple obtiene como respuesta (por cierto una respuesta muy rápida) la búsqueda en los buscadores de Yahoo!, Google y Bing. El vídeo en cuestión es el siguiente:

Building a search mashup with YQL using Google, Yahoo and Bing - live :) from Christian Heilmann on Vimeo.

Tras verlo empecé a realizar pruebas con la consola de YQL para ver que nos permite hacer esta API y realicé la primera consulta:

select * from search.web(20) where query="PHP";

select * from query.multi where queries='
  select *  from microsoft.bing.web(20) where query="PHP";
  select *  from search.web(20) where query="PHP";
  select *  from google.search(20) where q="PHP"
'

1.Regístrate y accede a tu cuenta

2.Verifica la propiedad del dominio

3.Personaliza Google Apps

4.Crea cuentas de usuario

5.Migrar datos y activa el correo electrónico

6.Implanta Google Apps

¿Cómo ver el correo de nuestra cuenta?

function fix_text($str)
{
    $subject = '';
    $subject_array = imap_mime_header_decode($str);

    foreach ($subject_array AS $obj)
        $subject .= rtrim($obj->text, "t");

    return $subject;
} 


$mail = imap_open('{imap.gmail.com:993/novalidate-cert/ssl}', 'cuenta de correo', 'contraseña de la cuenta');
$last = imap_num_msg($mail);

echo '<strong><a href="/url_dominio_google/?account_id=cuenta_de_correo" target="_blank">Mensajes de correo ('.$last.') / <span style="color: #e71d02;">Nuevos ('.$nuevos.')</span></a></strong>';

if ($last>7) $ini=($last-7);
else $ini=1;

$nuevos=0;
for ($i=$last;$i>=$ini;$i--){
	$header = imap_header($mail, $i);
	$from=$header->from;
	if (is_array($from)){
	        $de=$from[0]->personal;
	}

	$asunto=fix_text($header->subject);
	$asunto=''.$asunto."";

	if ($header->Unseen=="U"){
		$de=''.$de.'';
		$asunto=''.$asunto."";
		$nuevos++;
	}
	echo ''.$de.' - '.$asunto.' '.date('d/m', $header->udate);
}

imap_close($mail);

¿Cómo ver el google calendar?

require_once('Zend/Loader.php');
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_AuthSub');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Calendar');

$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;
$client = Zend_Gdata_ClientLogin::getHttpClient('usuario google apps', 'contraseña', $service);
$service = new Zend_Gdata_Calendar($client);
$dominioGapps=explode('@','usuario google apps');

echo 'http://www.google.com/calendar/hosted/'.trim($dominioGapps[1]).'/render?account_id='.urlencode('usuario google apps');

$query = $service->newEventQuery();
$query->setUser('id del calendario'); //Tambien se puede poner la opcion 'default' para el calendario común

$query->setVisibility('private');
$query->setProjection('full');
$query->setOrderby('starttime');
//$query->setFutureevents('true');// Retrieve the event list from the calendar server
$query->setStartMin('2010-01-01');
$query->setStartMax('2010-01-30');
try {    
	$eventFeed = $service->getCalendarEventFeed($query);
} catch (Zend_Gdata_App_Exception $e) {
	echo "Error: " . $e->getResponse();
}

foreach ($eventFeed as $event) {
	$valor=$event->when;
	$donde=$event->where;
	$autor=$event->author;
	$categoria=$event->category;
	$idevento=$event->link;
	$diaEvento=$valor[0]->startTime;
	$diaMesEvento = intval(substr($diaEvento,8,2));
	$dias[$diaMesEvento] .= $event->title->text.". Hora: ".substr($diaEvento,11,5)." (".substr($diaEvento,23,6).")n";
	$enlaceEvento[$diaMesEvento]=$idevento[0]->href;
}

Desde que Google sacó su herramienta Analytics nos proporcionó una nueva perspectiva gratuita para ver nuestra web desde los ojos de las personas que la visitan permitiéndonos conocer lo que "realmente opinan" los usuarios de tu web.

A primera vista desde el panel de control de Google Analytics, la gran cantidad de opciones y menús que tenemos resulta hasta confusa para entender realmente que nos están diciendo y más aún para gente inexperta. Así que tras un tiempo trabajando con ella, decidí ponerme manos a la obra para simplificar esta gran herramienta para hacerla un poco más sencilla.

¿Cómo usar el API?

En primer lugar, damos por supuesto que tenemos una cuenta de Google Analytics y un sitio web con el código Javascript que nos haga recolectar las estadísticas en nuestra cuenta.

En segundo lugar deberemos elegir unas librerías que nos ayuden a usar el API en función del lenguaje de programación que vayamos a usar. Para ello, podemos encontrar en la sección de librerías de Google Analytics una buena cantidad de librerías para diferentes lenguajes (Java, Python, PHP, etc.).

Tras estos dos pasos iniciales, tenemos todo listo para empezar a utilizar el API. Podemos echar un vistazo a la documentación del API  y como era de esperar las posibilidades que nos ofrece esta completísima API son muchas.

Lo que más nos interesa es conocer los parámetros con los que podemos utilizarla: dimensiones qué es lo que vamos a medir y las métricas son en qué unidad lo vamos a medir. Estas dimensiones y métricas las podemos agrupar de la manera que queramos, aunque para obtener unos buenos resultados deberemos hacerlo con sentido y además, podemos hacer el uso de filtros, que nos permite filtrar los valores devueltos por una métrica o una dimensión (por ejemplo una dirección web en concreto).

A continuación vamos a hablar de los datos básicos que se desprenden de su uso.

¿Tiene buen contenido o diseño mi web?

Tras interpretar los datos que obtenemos, podemos considerar si nuestra web tiene buenos contenidos o no desde dos puntos de vista, globalmente o específicamente para una página determinada.

Desde el punto de vista global, deberemos prestar atención al grupo de métricas ga:bounces y ga:entrances que nos dirá el tanto por cien de rebote de nuestra web. Este cálculo lo haremos realizando la división de  ga:bounces entre ga:entrances dándonos como resultado el número de cuantas personas abandonan la web tras visitar nuestra página inicial.

Un alto número en el tanto por cien de rebotes nos indica que la página inicial no contiene o no muestra de manera correcta lo que el usuario esperaba encontrar en ella y por tanto vuelve a la página anterior por donde llegó.

Otra valoración que podemos hacer es si estos contenidos globales son interesantes o no para el usuario mediante la métrica ga:timeOnSite que nos proporciona la cantidad de tiempo que estuvo el usuario en nuestra web y la dimensión ga:pageDepth, que nos dice la cantidad media que los usuarios ven cuando entran en nuestra web.

¿Son buenas las palabras clave que utilizo para cada página?

Las palabras claves nos sirven junto al contenido de cada página para describirla de cara a los buscadores. Para ver si las palabras claves que describen nuestras páginas son buenas podemos utilizar las dimensiones ga:source filtrando por ga:pagePath, especificando en esta última la página deseada a comprobar.

Si el resultado que nos devuelve es alto desde los buscadores Google, Yahoo, Bing, etc. significa que de cara a los buscadores las palabras clave describen bien el contenido.

¿Cuál es el comportamiento de los visitantes de mi web?

Un valor interesante es el que nos proporciona la dimensión ga:secondPagePath, que nos dice cuál fue la segunda página que visitó el usuario tras ver nuestra web. Ésto nos indica que es lo que más llama la atención en nuestra web pudiendo potenciar otras páginas que deberían tener mejores resultados.

Podemos observar también la navegación que realizan los usuarios para páginas determinadas y ver desde qué página llegaron y a qué página fueron desde ella. En este caso, para saber desde qué página llegaron a otra deberemos usar como parámetros la dimensión ga:previousPagePath,métrica ga:pageviews y el filtro ga:nextPagePath especificando la página objetivo.

Por el contrario, para saber qué página visitaron desde la actual usaremos la dimensión ga:nextPagePath, métrica ga:pageviews y filtro ga:previousPagePath con la página que queremos consultar

Los datos obtenidos nos dirán si la navegación que realiza el usuario es la que esperamos o por el contrario no lo es y por tanto el contenido no le interesa.

Conclusiones 

Todo estos datos sobre el patrón de comportamiento de los usuarios nos sirve para conseguir un mejor posicionamiento web y por tanto tener más posibilidades de éxito. Estas técnicas, mezcladas con los conocimientos de marketing tradicional, las utilizamos en Imaginanet para la consecución de los objetivos planteados en los proyectos de marketing online en que participamos.

En próximas entradas, hablaremos de posibilidades más avanzadas que nos ofrece.

<script type="text/javascript">
  $(document).ready(function() {
    $('#colorpicker').farbtastic('#color');
  });
</script>

$('idCampoDeTexto').ColorPicker();

$('idCampoDeTexto').ColorPicker({option1:val1,opt2:val2,...});

Hace unos años, nacían las búsquedas personalizadas de Google, en donde se comenzaba a modificar los resultados en función de los intereses del usuario. Un año más tarde, se comenzaba a almacenar y a mostrar el historial de búsquedas de cada usuario que se había registrado previamente con una cuenta de usuario de Google.

El buscador venía almacenando, por cuestiones técnicas, las búsquedas que se realizan desde cada una de las direcciones IP que se conectan al servicio. Sin embargo, la compañía ha anunciado oficialmente que el historial de búsquedas se va a almacenar durante 6 meses para todos los usuarios, y no se relacionará con nuestra dirección IP, sino con una 'cookie' de nuestro navegador web, incluso cuando el usuario no dispone de cuenta en Google.

Con esta 'cookie' (que se puede borrar en cualquier momento), Google va a distinguirnos no ya por nuestra dirección IP, sino por el navegador web que utilicemos. De esta manera, aunque nuestro proveedor de Internet nos cambie la dirección IP, o aunque estemos con nuestro portátil en otro país, Google va a saber durante 180 días las búsquedas que hemos realizado.

El objetivo es, según este post oficial personalizar nuestras búsquedas, y ofrecernos los resultados más adecuados a nuestros gustos y preferencias. Así, por ejemplo, si cuando buscamos 'barcelona' siempre acabamos haciendo click en las páginas de hoteles, la siguiente vez que lo consultemos quizá veamos sitios web de hoteles en las primeras posiciones.

Esta nueva característica del buscador nos trae consigo de nuevo la duda acerca de si Google va a tener en cuenta estos clicks para modificar los resultados también del resto de usuarios y cambiar el posicionamiento general de las búsquedas. Pero también traerá consigo una importante polémica sobre la privacidad de todos nosotros, puesto que desde ahora, en caso de que queramos cuidar un poco más los datos expuestos ante Google, habrá que preocuparse de eliminar la 'cookie' de 'google.com' (o el dominio de la versión local que utilicemos).

Para borrar esta 'cookie' existen varias soluciones, para Firefox, están las extensiones 'Google-anon' o 'Cookie Manager', este link sobre las cookies en MS IExplorer, o esta página más genérica sobre 'cookies'.

var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart-container-1',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges]
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
   var ga = document.createElement('script');
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   ga.setAttribute('async', 'true');
   document.documentElement.firstChild.appendChild(ga);
})();

• Lógicamente, tienes que sustituir "UA-XXXXX-X" por tu ID.
• Al cargarse ga.js de forma asíncrona, tiene que existir una forma para que algunas funciones de GA se puedan utilizar cuando el código se termina de cargar. Esto se hace introduciendo comandos en la cola del objeto de Google Analytics, _gaq.
• Una vez que todos los comandos callback se han puesto en cola, se carga el script ga.js. Esto se empaqueta en una función asíncrona para así evitar conflictos de namespace.
• Se crea un elemento "script" y su fuente "src" se pone al valor correcto de la URL de ga.js. Mirando más alla, en el soporte que se incluye en HTML5 a los scripts asíncronos, el atributo "async" se pone a "true", muy bueno! La ventaja más importante es que le dice al navegador que los siguientes scripts se pueden ejecutar de forma inmediata (no tienen que esperar a que se carge ga.js). La última línea añade el elemento script al DOM. Esto es lo que ejecuta la descarga de ga.js. En muchos códigos se hace document.getElementsByTagName(”head”)[0].appendChild, pero esto falla si el documento no tiene elemento head. Esta forma de hacerlo, es más robusta.

    

        Globos
    
    

        Coche
    
    

        Niebla
    
    

        Molino de viento
    
    

        Bosque
    

ul.thumb {
   position: relative;
   list-style: none;
   background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#555), to(#222)) !important;
   background: #666;
}

ul.thumb li {
   position: absolute;
   top: 50%;
   left: 50%;
   padding: 6px 6px 24px 6px;
   background: #FFF;
   width: 150px;
   height: 130px;
   -moz-box-shadow:1px 1px 6px #222;
   -webkit-box-shadow:1px 1px 6px #222;
   box-shadow:1px 1px 6px #222;
   -webkit-transition: all 3s ease-in-out;
   z-index: 0;
}
ul.thumb li img {
   width: 100%;
   height: 100%;
}
ul.thumb li:nth-child(1) {
   margin-top: -130px;
   margin-left: -130px;
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   transform: rotate(30deg);
}

ul.thumb li:hover{
   font-size: 1.3em;
   z-index: 10;
   width: 480px;
   height: 322px;
   margin-top: -151px;
   margin-left: -240px;
   -moz-box-shadow:8px 8px 24px #111;
   -webkit-box-shadow:8px 8px 24px #111;
   box-shadow:8px 8px 24px #111;
   -moz-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}

El presente artículo ha sido traducido del publicado en http://www.lazycat.org/postcards/

Diseños abiertos y elegantes, menores costes de ancho de banda y un mantenimiento mucho más fácil.

¿Os gusta la idea? Leed este artículo para conocer pequeños trucos que puedes aplicar al código, diseño y contenidos de tus páginas web, y si alguno de los sitios web que visitas normalmente no da la talla, ¿porqué no comentarles que pueden hacer un cambio limpio, rápido y con muchas ventajas sobre lo que tiene?

Muchas páginas web incluyen enlaces a artículos relacionados y más información. Envíales URLs que creas les puedan ayudar y pienses que son útiles.

Hojas de estilo alternativas

Fondos

Elección de los colores

Tablas

Introducción

No redimensionar la ventana del navegador

Si quieres cargar una home, y a continuación tu web en un pop-up, para nada te lo recomendamos.

Si preguntas que versión quieres: versión flash, html, alta resolución, baja resolución. También pierdes oportunidad.

Es como si le preguntases a alguien que quiere entrar en tu tienda, si quiere pasar a la tienda mala o a la buena (pero claro, hay que tener en cuenta que para entrar en la tienda buena hacen falta unas gafas especiales y una pequeña espera de 30 segundos... MMM, NO gracias), lo que les estas preguntando es: "¿Quieres irte y comprar en mi competencia? porque te estoy poniendo una muralla que tienes que saltar antes de que conozcas los productos o servicios que te ofrezco.

Si tienes una web, toda en flash, hazla de nuevo.

NO intentes REinventar la navegación por páginas web

Situa los elementos gráficos en la zona de tu página web que quieras, ponlos arriba, a la izquierda, también en la parte derecha puedes colocar elementos, pero sobre todo, no inventes la lógica de navegación, esto es, la manera en que las personas interactuan con interfaces digitales, a la misma vez que estás intentando vender un producto o servicios. El usuario se confundirá, se enfadará, y se irá.

 Este trabajo me va a dar bastantes dolores de cabeza

Si eres un diseñador gráfico, y "de paso ofreces páginas web", estas dando consejos sobre diseño web, a tus clientes de trabajos gráficos impresos, se cauto con este tema. El diseño gráfico para impresión se parece al diseño web lo mismo que un anuncio de un coche de carreras a conducir y construir ese coche de carreras. No cometamos errores, el diseño gráfico es fantástico por si mismo, sabes hacer gráficas perfectas y perfectos slogans para impresión. Un usuario no puede comprarte el producto con un anuncio impreso (por el momento), no pueden comunicarse con tu negocio a través de un anuncio impreso. Dedícate al diseño gráfico y no metas tus narices en un medio que no conoces ni entiendes (lo mismo les digo a esos "técnicos" que haces websites "aprovechando la situación")

Si una página de inicio no tiene contenido o cualquier texto Real (no incluido en una imagen) y esto mismo es extensible a todo el sitio web. Contrata a una persona que dote de contenido a la página web y despide a tu webmaster.

El contenido es el rey. Los buscadores no indexan gráficos o animaciones flash deslumbrantes, sólo indexan texto. Contrata una persona que de contenidos relevantes y vinculados con tu negocio (es básico para tener un buen ranking y poder vender / ofrecer tus productos o servicios a través de una página web)

Si tu página web no funciona con Firefox, da la bienvenida a la metedura de pata más común de 2007.

Realmente, Firefox sólo genera entre el 10-15% de la cuota de mercado de los navegadores de usuario, pero en el caso de algunos sitios web, esta cuota es mucho más alta, por ejemplo, oomny.com tiene más del 80% de sus usuarios con Firefox. Además, si quien hizo tu página web, no la hizo compatible y funcional con Firefox, obviamente no tienen idea de lo que están haciendo y se están saliendo del juego. No hay razón por la que se necesite un sitio web sólo compatible y totalmente dependiente de Internet Explorer para que no funcione en Firefox, y francamente, no hay razón alguna para ello. Que un webmaster no conozca Firefox, quiere decir que no está en la cultura de Internet y esto puede hacer que tu imagen y la de tu negocio en Internet se vean afectados.

Este punto es una colección de pequeñas cosas que han hecho desaparecer a otros sitios web.

Son principios básicos pero repetidos, como no mostrar texto parpadeante, no usar Frontpage, no utilizar pop-ups o ventanas emergentes, no hacer texto con scroll, obligar a la descarga de fuentes o tipografías especiales, utilizar introducciones Flash, ...

Si utilizas música en tu página web cerciorarte de que el usuario pueda detenerla,

y es MEJOR NO cargarla con la página web sin que la solicite el usuario. Esto mismo, es aplicable al vídeo con audio, muchos usuarios de páginas web navegan desde su trabajo y no les hace mucha gracia que sus altavoces empiecen a sonar con tu espantosa música de forma totalmente intrusiva en su ordenador, y más si su jefe está pendiente y con ganas de darle a alguien una patada en el trasero.

Dándole estilo a tu sitio

Persistentes

Preferidas

Alternativas

Intercambiando estilos

El Script

HTMLLinkElement.getAttribute("rel").indexOf("style") != -1 

HTMLListElement.getAttribute("title")

HTMLLinkElement.getAttribute("rel").indexOf("alt") != -1

function setActiveStyleSheet(title) { 
 var i, a, main; 
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { 
     a.disabled = true; 
     if(a.getAttribute("title") == title) a.disabled = false; 
    } 
  } 
}  

Cookies

function getActiveStyleSheet() { 
 var i, a; 
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) 
    return a.getAttribute("title"); 
   } 
 return null; 
} 

function createCookie(name,value,days) { 
   if (days) { 
    var date = new Date(); 
    date.setTime(date.getTime()+(days*24*60*60*1000)); 
    var expires = "; expires="+date.toGMTString(); 
   } 
   else expires = ""; 
 document.cookie = name+"="+value+expires+"; path=/"; 
} 
 
function readCookie(name) { 
 var nameEQ = name + "="; 
 var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
     var c = ca[i]; 
     while (c.charAt(0)==' ') c = c.substring(1,c.length); 
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
    } 
 return null; 
} 

onLoad

function getPreferredStyleSheet() { 
 var i, a; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
     if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title")) 
     return a.getAttribute("title"); 
    } 
 return null; 
} 

window.onload = function(e) { 
   var cookie = readCookie("style"); 
   var title = cookie ? cookie : getPreferredStyleSheet(); 
   setActiveStyleSheet(title); 
} 

onUnload

window.onunload = function(e) { 
   var title = getActiveStyleSheet(); 
   createCookie("style", title, 365); 
} 

Juntándolo todo

change style to default 
change style to paul 

¿PORQUÉ UN DOCTYPE?

¿DÓNDE HAN IDO A PARAR TODOS LOS DOCTYPES?

DOCTYPES QUE FUNCIONAN

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

SIGUIENTES PASOS